From f0297b958601b25f02000b18ac0b1606c57c28d0 Mon Sep 17 00:00:00 2001 From: sebastianjnuwu Date: Sun, 29 Dec 2024 12:18:49 -0300 Subject: [PATCH] feat(styles): UI --- www/index.html | 37 ++++++++-- www/src/audio/click.mp3 | Bin 0 -> 6405 bytes www/src/js/main.js | 12 +++- www/src/styles/css/ui.css | 145 ++++++++++++++++++++++++-------------- 4 files changed, 137 insertions(+), 57 deletions(-) create mode 100755 www/src/audio/click.mp3 diff --git a/www/index.html b/www/index.html index 4d3eead..0e84edd 100644 --- a/www/index.html +++ b/www/index.html @@ -11,16 +11,45 @@ - + - + + + splash-screen

Click...

 + +

+ Cookie +

+
+ + + + + +
+ + + +
@@ -37,15 +66,13 @@

Click...

- - + cookie - diff --git a/www/src/audio/click.mp3 b/www/src/audio/click.mp3 new file mode 100755 index 0000000000000000000000000000000000000000..1f64e0e1eae35c74fb56c4325b12983f12f75719 GIT binary patch literal 6405 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 literal 0 HcmV?d00001 diff --git a/www/src/js/main.js b/www/src/js/main.js index ff15aa7..3aa3339 100644 --- a/www/src/js/main.js +++ b/www/src/js/main.js @@ -1,9 +1,19 @@ $(() => { + $("splash-screen").on("click", () => { + $("#splash")[0].volume = 0.1; $("#splash")[0].play(); setTimeout(() => { $("splash-screen").remove(); - $("ui").show(); + $("start-screen").show(); }, 1000); }); + + $("start-screen button").on("click", () => $("#click")[0].play()); + + $("#play").on("click", () => { + $("start-screen").remove(); + $("ui").show(); + }); + }); \ No newline at end of file diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css index 43641a8..9fbf5aa 100644 --- a/www/src/styles/css/ui.css +++ b/www/src/styles/css/ui.css @@ -1,36 +1,38 @@ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"); +@import url("https://fonts.cdnfonts.com/css/minecraftia"); + @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"); @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap"); :root { - --layout: #fffbde; - --layout-dark: #fbf0c1; - --text-color: #fdd388; - --text-color-dark: #7c3d18; + --layout: #fffbde; + --layout-dark: #fbf0c1; + --text-color: #fdd388; + --text-color-dark: #7c3d18; } *, *:before, *:after { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - padding: 0; - margin: 0; - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - background: linear-gradient(to bottom, var(--layout), var(--layout-dark)); + padding: 0; + margin: 0; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + background: linear-gradient(to bottom, var(--layout), var(--layout-dark)); } .ui-cookie splash-screen .icon { @@ -69,58 +71,99 @@ body { } } -.cookie img { - width: 15rem; - transition: transform 0.02s ease-in-out; - will-change: transform; - position: relative; +start-screen .title { + font-family: "MedievalSharp", cursive; + font-size: 4.5rem; + font-weight: bold; + margin: 2rem; + color: var(--text-color); + text-shadow: 2px 2px 8px var(--text-color-dark); + animation: start-screen-title 1s ease-in-out; +} + +start-screen .menu-buttons { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +start-screen .menu-buttons button { + font-size: 1.6rem; + padding: 0.8rem 3rem; + border: none; + border-radius: 50px; + font-weight: bold; + font-family: "MedievalSharp", cursive; + border: 0.5px solid var(--text-color-dark); + text-shadow: 1px 1px 0.5px var(--text-color-dark); + background-color: var(--layout-dark); + color: var(--text-color); + cursor: pointer; + transition: all 0.08s ease-in-out; +} + +start-screen .menu-buttons button:hover { + transform: translateY(-5px); + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); +} + +@keyframes start-screen-title { + from { + transform: translateY(-50px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } } -.cookie img:active { - transform: scale(0.8); +ui .cookie img { + width: 15rem; + transition: transform 0.02s ease-in-out; + will-change: transform; + position: relative; } -.click-effect { - position: absolute; - color: white; - font-size: 2rem; - font-weight: bold; - text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); - pointer-events: none; +ui .cookie img:active { + transform: scale(0.8); } -.statistic { - text-align: center; - font-family: "Press Start 2P", cursive; - color: var(--text-color); - text-shadow: 1px 1px var(--text-color-dark); +ui .click-effect { + position: absolute; + color: white; + font-size: 2rem; + font-weight: bold; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); + pointer-events: none; } -.statistic th, .statistic td { - padding: 5px; - text-align: center; +ui .statistic { + text-align: center; + font-family: "Press Start 2P", cursive; + color: var(--text-color); + text-shadow: 1px 1px var(--text-color-dark); } -.statistic th { - font-size: 0.8em; +ui .statistic th, ui .statistic td { + padding: 5px; + text-align: center; } -.statistic td { - position: relative; - font-size: 1em; +ui .statistic th { + font-size: 0.8em; } -.statistic td .label { - font-weight: bold; +ui .statistic td { + position: relative; + font-size: 1em; } -.statistic td .value { - display: block; - margin-top: 5px; - transition: transform 0.2s ease, color 0.2s ease; +ui .statistic td .label { + font-weight: bold; } -.statistic td .value.animate { - transform: scale(1.3); - color: #ff4500; +ui .statistic td .value { + display: block; + margin-top: 5px; } \ No newline at end of file