update

www/index.html

@@ -15,13 +15,45 @@
   <audio id="splash" preload="auto">
     <source src="./src/audio/start.mp3" type="audio/mp3">
   </audio>
-
+ <!---
   <splash-screen class="d-flex flex-column justify-content-center align-items-center vh-100">
     <img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
     <h1>Click...</h1>
-  </splash-screen>
+  </splash-screen> --->
+
+<ui style="display: none;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
+
+  <div class="stats-container">
+  <table class="stats-table">
+    <tbody>
+      <tr>
+        <th><i class="fas fa-mouse-pointer"></i> Clicks</th>
+        <td id="clicks" class="value">0</td>
+      </tr>
+      <tr>
+        <th><i class="fas fa-stopwatch"></i> Seconds</th>
+        <td id="seconds" class="value">0</td>
+      </tr>
+      <tr>
+        <th><i class="fas fa-cookie-bite"></i> Cookies</th>
+        <td id="cookies" class="value">0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
+  <cookie class="cookie position-relative">
+    <img src="https://cdn.discordapp.com/attachments/1320553436646866994/1322299238599753818/7_Sem_Titulo_20241227172134.png?ex=67705ea1&is=676f0d21&hm=898542885adabfffe794a3e214beb8cd93b865cb4da0aee5280ed894e2481dfe&" 
+         alt="cookie" 
+         class="icon mb-4">
+         </cookie>
+</ui>
+
+
 
   <script src="./src/js/main.js" defer></script>
+  <script src="./src/js/cookie/game.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
 

www/src/js/cookie/game.js

@@ -0,0 +1,37 @@
+$('.cookie').on('click', function (e) {
+
+  const a = 1;
+
+  const $effect = $(`<div class="click-effect">+${a}</div>`);
+
+  const offset = $(this).offset();
+  const X = e.pageX - offset.left;
+  const Y = e.pageY - offset.top;
+
+  $effect.css({
+    left: X + 'px',
+    top: Y + 'px',
+    position: 'absolute',
+  });
+
+  $(this).append($effect);
+
+  $effect
+    .animate(
+      {
+        top: '-=2.5rem',
+        opacity: 1,
+        fontSize: '1.5rem',
+      },
+      300
+    )
+    .animate(
+      {
+        opacity: 0,
+      },
+      200,
+      function () {
+        $(this).remove();
+      }
+    );
+});

www/src/js/main.js

@@ -1,10 +1,9 @@
 $(() => {
-  // Splash screen animation
   $("splash-screen").on("click", () => {
     $("#splash")[0].play();
-
     setTimeout(() => {
       $("splash-screen").remove();
+      $("ui").show();
     }, 1000);
   });
-});
+});

www/src/styles/css/ui.css

@@ -68,3 +68,91 @@ body {
         opacity: 0.8;
     }
 }
+
+.cookie img {
+  width: 15rem;
+  transition: transform 0.02s ease-in-out;
+  will-change: transform;
+  position: relative;
+}
+
+.cookie img:active {
+  transform: scale(0.8);
+}
+
+.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; 
+}
+
+/* Font Awesome for icons */
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
+
+/* Estilos para a tabela */
+.stats-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 0 10px;
+}
+
+.stats-table {
+  width: 100%;
+  max-width: 400px;
+  border-collapse: collapse;
+  text-align: left;
+  font-family: "Press Start 2P", cursive;
+  color: var(--text-color);
+  background-color: var(--table-row-bg);
+  border: 2px solid var(--table-border);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.stats-table th, .stats-table td {
+  border: 2px solid var(--table-border);
+  padding: 10px;
+  text-align: center;
+}
+
+.stats-table th {
+  background-color: var(--table-header-bg);
+  font-size: 1em;
+}
+
+.stats-table td {
+  background-color: var(--table-row-bg);
+  position: relative;
+  font-size: 1.2em;
+}
+
+.stats-table td .label {
+  font-weight: bold;
+}
+
+.stats-table td .value {
+  display: block;
+  margin-top: 5px;
+}
+
+.stats-table td .animated-number {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: rise 1s ease-out;
+}
+
+@keyframes rise {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, 50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}