Squashed commit of the following:
commit efffda8fc2ae9ebf5df051c33159fc4334075470
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 19:03:49 2020 -0400
Fixed Reset Button
Fingers crossed on last commit
commit ff6b739533c20e1eb3f4942b06def9fdfcf58548
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 18:49:54 2020 -0400
Copy Update + Radio Button Fix
Changed the copy under "First-Time Buyer" and made the selected radio button a solid fill rather than only coloring the text.
commit 95887a68b671dcf231e4e7aea6710bfe4e2eae29
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 18:31:18 2020 -0400
Removed a Console Log
commit 84f1ef8b96730818903aaa0e12ab12be642f8bd1
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 18:27:03 2020 -0400
Added Probabilities
Chart will now also display % chance of that pattern.
commit d047d7749ca2809165068fe3f787c83ffba8b45e
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 18:08:35 2020 -0400
Added "First Buy" and "Previous Pattern"
All CSS needed for these fields have also been included, as well as some Javascript updated to reflect the new radios.
commit 95b60e1458df72c86cf91c2017cb8208e0829d9b
Merge: 1d6046b be09f8e
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 13:51:53 2020 -0400
Merge branch 'front-end'
commit be09f8e6085dccf90683c819a3deec44852a54b1
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 13:51:43 2020 -0400
Requested changes
This commit adds changes as requested in https://github.com/mikebryant/ac-nh-turnip-prices/pull/34
commit 1d6046bfe283e6a779e2e2f49edd12b6fdf128bd
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 02:34:12 2020 -0400
typo
commit a414b8fdc22aaad82265d502601c0d2a67050f5d
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 02:22:36 2020 -0400
Update scripts.js
commit fbc3878d831e0f9abeb2de40337dedb8ee20f794
Merge: d521944 3cad0d4
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 02:18:57 2020 -0400
Merge branch 'master' of https://github.com/Trevor-Welch/ac-nh-turnip-prices
commit d521944eae82eeb0644b13ffa75a23ec3d2f52ef
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Wed Apr 8 02:15:37 2020 -0400
Massive UI Rework
This commit completely changes the UI of the app, giving it a more Animal Crossing touch and make it feel like an app on the Nook Phone.
commit 3cad0d4f2a127ba46e946a9b0bebfc1cfb7001f2
Author: Trevor Welch <welch.trevor@yahoo.com>
Date: Mon Apr 6 20:43:38 2020 -0400
Refactored scripts.js
Scripts.JS was very hard to read initially.
This commity cleans things up, abstracts functions, and makes it a bit more easier to read.
master
Mike Bryant
4 years ago
parent
f30e1e751e
commit
54b8458a5f
@ -1,20 +1,420 @@
|
|||||||
#turnipTable th, #turnipTable td {
|
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Varela+Round&display=swap');
|
||||||
padding: 5px;
|
|
||||||
|
/* - Global Styles - */
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
background: #DEF2D9;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(#fff 20%, transparent 0),
|
||||||
|
radial-gradient(#fff 20%, transparent 0);
|
||||||
|
background-size: 30px 30px;
|
||||||
|
background-position: 0 0, 15px 15px;
|
||||||
|
|
||||||
|
/* background: #FFFAE5; */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Varela Round', sans-serif;
|
||||||
|
padding-bottom: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nook-phone {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 16px auto;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 16px 0px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
background: #F5F8FF;
|
||||||
|
color: #686868;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nook-phone-center {
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dialog-box {
|
||||||
|
background: #FFFAE5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin: 32px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 40px;
|
||||||
|
max-width: 800px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-box p {
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #837865;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
line-height: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-box b,
|
||||||
|
.dialog-box a {
|
||||||
|
color: #0AB5CD;
|
||||||
|
transition: 0.2s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-box i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-box a:hover {
|
||||||
|
color: #5ECEDB
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-box .dialog-box__name {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: -28px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #BA3B1F;
|
||||||
|
padding: 4px 24px;
|
||||||
|
background: #FF9A40;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__form {
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 32px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__row h6 {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 16px auto;
|
||||||
|
color: #845E44;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__flex-wrap {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__group label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__flex-wrap .input__group label {
|
||||||
|
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__form i {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
font-style: normal;
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 8px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__form>.form__row input {
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 0px solid white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: 0.2s all;
|
||||||
|
margin: 8px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:placeholder-shown {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:not(:placeholder-shown) {
|
||||||
|
background: transparent;
|
||||||
|
color: #0AB5CD;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:placeholder-shown:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:focus {
|
||||||
|
outline: none;
|
||||||
|
transform: scale(1.1);
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:focus::placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number] {
|
||||||
|
width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=number]:disabled {
|
||||||
|
background: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
#turnipTable thead tr:first-child {
|
input[type=number]:disabled:hover {
|
||||||
border: none;
|
box-shadow: none;
|
||||||
|
transform: none;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
#turnipTable th {
|
input::-webkit-outer-spin-button,
|
||||||
text-align: center;
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#turnipTable td:first-child {
|
input[type=number] {
|
||||||
white-space: nowrap;
|
-moz-appearance: textfield;
|
||||||
text-align: left;
|
}
|
||||||
|
|
||||||
|
.input__radio-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__radio-buttons input[type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__radio-buttons input[type="radio"]+label {
|
||||||
|
opacity: 1;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40px;
|
||||||
|
background: #F3F3F3;
|
||||||
|
padding: 16px 24px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: 0.2s all;
|
||||||
|
margin: 8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__radio-buttons input[type="radio"]:not(:checked)+label:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #F5F8FF;
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__radio-buttons input[type="radio"]:checked+label {
|
||||||
|
background: #0AB5CD;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFBABA;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-width: 0px;
|
||||||
|
border-radius: 40px;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: 0.2s all;
|
||||||
|
position: relative;
|
||||||
|
margin: 32px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 98%;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-wrapper::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper::-webkit-scrollbar-track {
|
||||||
|
height: 8px;
|
||||||
|
width: 5px;
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper::-webkit-scrollbar-thumb {
|
||||||
|
height: 8px;
|
||||||
|
width: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper::-webkit-scrollbar-thumb:window-inactive {
|
||||||
|
height: 8px;
|
||||||
|
width: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#turnipTable {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#turnipTable th div:nth-of-type(1) {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#turnipTable th div:nth-of-type(2) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
#turnipTable td {
|
#turnipTable td {
|
||||||
text-align: center;
|
max-width: 100px;
|
||||||
|
padding: 6px 4px;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.03);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
#turnipTable tbody tr {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#turnipTable tbody tr:hover {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#turnipTable .table-pattern {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.waves {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
margin-bottom: -7px;
|
||||||
|
/*Fix for safari gap*/
|
||||||
|
max-height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Animation */
|
||||||
|
.parallax>use {
|
||||||
|
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax>use:nth-child(1) {
|
||||||
|
animation-delay: -2s;
|
||||||
|
animation-duration: 7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax>use:nth-child(2) {
|
||||||
|
animation-delay: -3s;
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax>use:nth-child(3) {
|
||||||
|
animation-delay: -4s;
|
||||||
|
animation-duration: 13s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax>use:nth-child(4) {
|
||||||
|
animation-delay: -5s;
|
||||||
|
animation-duration: 20s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move-forever {
|
||||||
|
0% {
|
||||||
|
transform: translate3d(-90px, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate3d(85px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Shrinking for mobile*/
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.waves {
|
||||||
|
height: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue