diff --git a/css/styles.css b/css/styles.css index c960d82..a969a2d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -65,6 +65,36 @@ h2 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08); } +.dialog-box-lng { + text-align: center; +} + +.dialog-box-lng p, +.dialog-box-lng select { + display: inline; +} + +.dialog-box-lng select { + font-size: 1rem; + padding: 4px; + font-weight: bold; + border-radius: 4px; + border-color: #DEF2D9; + color: #837865; + cursor: pointer; + transition: 0.2s all; +} + +.dialog-box-lng select:hover { + background-color: #EBFEFD; + border-color: #5ECEDB; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); +} + +.dialog-box-lng select:focus { + outline: none; +} + .dialog-box p { font-family: 'Raleway', sans-serif; font-weight: 800; @@ -267,10 +297,10 @@ input[type=number] { color: #FFF; } -.reset-button { +.button { + color: #686868; font-family: inherit; font-weight: bold; - color: #FFBABA; padding: 8px 16px; border-width: 0px; border-radius: 40px; @@ -281,13 +311,16 @@ input[type=number] { margin: 16px auto; } -.reset-button:hover { +.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); } +.button.button--reset { + color: #E45B5B; +} .table-wrapper { display: inline-block; @@ -348,7 +381,7 @@ input[type=number] { #turnipTable td { white-space: nowrap; - max-width: 100px; + max-width: 150px; padding: 6px 4px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.03); @@ -402,7 +435,6 @@ input[type=number] { justify-content: center; } - .waves { position: relative; width: 100%; @@ -412,6 +444,74 @@ input[type=number] { max-height: 150px; } +#permalink-input { + display: none; + position: fixed; +} + +.permalink { + display: none; + white-space: nowrap; + font-size: 18px; + user-select: none; + cursor: pointer; +} + +.permalink .fa-copy { + margin: 0 8px; + height: 20px; + color: #0AB5CD; +} + +/* The snackbar - position it at the bottom and in the middle of the screen */ +#snackbar { + visibility: hidden; /* Hidden by default. Visible on click */ + min-width: 250px; /* Set a default minimum width */ + background-color: #FFFAE5; /* Black background color */ + font-family: 'Raleway', sans-serif; + font-weight: 800; + font-size: 1rem; + color: #837865; + letter-spacing: 0.2px; + line-height: 1.8rem; + text-align: center; /* Centered text */ + border-radius: 40px; /* Rounded borders */ + padding: 16px 24px; /* Padding */ + position: fixed; /* Sit on top of the screen */ + z-index: 1; /* Add a z-index if needed */ + bottom: 30px; /* 30px from the bottom */ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08); +} + +/* Show the snackbar when clicking on a button (class added with JavaScript) */ +#snackbar.show { + visibility: visible; /* Show the snackbar */ + /* Add animation: Take 0.5 seconds to fade in and out the snackbar. + However, delay the fade out process for 2.5 seconds */ + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; +} + +/* Animations to fade the snackbar in and out */ +@-webkit-keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@-webkit-keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} + +@keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} /* Animation */ .parallax>use { diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..b06b446 Binary files /dev/null and b/favicon.ico differ diff --git a/img/192.png b/img/192.png deleted file mode 100644 index 68b4ae5..0000000 Binary files a/img/192.png and /dev/null differ diff --git a/img/512.png b/img/512.png deleted file mode 100644 index a59c3ec..0000000 Binary files a/img/512.png and /dev/null differ diff --git a/img/favicon-128.png b/img/favicon-128.png new file mode 100644 index 0000000..08a2116 Binary files /dev/null and b/img/favicon-128.png differ diff --git a/img/favicon-152.png b/img/favicon-152.png new file mode 100644 index 0000000..4137fda Binary files /dev/null and b/img/favicon-152.png differ diff --git a/img/favicon-167.png b/img/favicon-167.png new file mode 100644 index 0000000..cee09d8 Binary files /dev/null and b/img/favicon-167.png differ diff --git a/img/favicon-180.png b/img/favicon-180.png new file mode 100644 index 0000000..47147bc Binary files /dev/null and b/img/favicon-180.png differ diff --git a/img/favicon-192.png b/img/favicon-192.png new file mode 100644 index 0000000..876941d Binary files /dev/null and b/img/favicon-192.png differ diff --git a/img/favicon-196.png b/img/favicon-196.png new file mode 100644 index 0000000..1d27fa5 Binary files /dev/null and b/img/favicon-196.png differ diff --git a/img/favicon-32.png b/img/favicon-32.png new file mode 100644 index 0000000..764bb36 Binary files /dev/null and b/img/favicon-32.png differ diff --git a/img/favicon-512.png b/img/favicon-512.png new file mode 100644 index 0000000..124adf7 Binary files /dev/null and b/img/favicon-512.png differ diff --git a/index.html b/index.html index 0bfb4dd..2b93582 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,20 @@ + + + + + + + + + + + + + - @@ -33,13 +45,10 @@
Hello, and welcome to the Turnip Prophet app on your Nook Phone.
-This app lets you track your island's turnip prices daily, but you'll have to put the prices in yourself! -
-After that, the Turnip Prophet app will magically predict the turnip prices you'll have for the rest of - the week. -
+ + + +Pattern | -% Chance | -Sunday | ++ | + |
- Monday
+
- AM
- PM
+
+
|
- Tuesday
+
- AM
- PM
+
+
|
-
Wednesday
+
- AM
- PM
+
+
|
- Thursday
+
- AM
- PM
+
+
|
- Friday
+
- AM
- PM
+
+
|
- Saturday
+
- AM
- PM
+
+
|
- Guaranteed Minimum | -Potential Maximum | ++ |
---|