mobile

index.html

@@ -34,7 +34,7 @@
                     <div class="time-label">Segundos</div>
                 </div>
             </div>
-            <div id="expired-message" class="hidden">A data já passou!</div>
+            <div id="expired-message" class="hidden">Estou indo para Santana!</div>
         </div>
         <div class="target-date-container">
             <p>Contando até: <span id="target-date">10 de Abril de 2025</span></p>

main.js

@@ -4,11 +4,13 @@ import { initFireworks, startFireworks, resetFireworks } from './fireworks.js';
 // Default date is set to April 10, 2025
 let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime();
 
-const test = true;
+const test = window.location.href.includes('localhost') ||
+    window.location.href.includes('127.0.0.1') ||
+    window.location.href.includes('192.168');
 
 if (test) {
     // Para teste: descomentar a linha abaixo para simular que a data já passou
-    targetDate = new Date().getTime() - 1000; // 1 segundo no passado
+    targetDate = new Date().getTime() + 10000; // 10 segundos no futuro
 }
 
 // Elements

particles.js

@@ -9,7 +9,7 @@ export class Particle {
         this.color = color;
         this.alpha = 1;
         this.gravity = 0.05;
-        this.resistance = 0.92;
+        this.resistance = 0.96;
     }
 
     update() {

script.js

@@ -0,0 +1,13 @@
+// Código das partículas
+class Particle {
+    // ... código da classe Particle
+}
+
+// Código dos fogos
+let fireworks = [];
+let particles = [];
+// ... resto do código
+
+// Código principal
+let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime();
+// ... resto do código 

styles.css

@@ -129,16 +129,65 @@ h1 {
         flex-wrap: wrap;
     }
 
+    h1 {
+        font-size: 1.8rem;
+        margin-bottom: 1.5rem;
+    }
+
     .time-value {
-        font-size: 2.5rem;
-        min-width: 80px;
+        font-size: 2rem;
+        min-width: 70px;
+        padding: 0.4rem 0.7rem;
     }
 
     .separator {
-        font-size: 2.5rem;
+        font-size: 2rem;
     }
 
     .time-section {
-        margin: 0.5rem;
+        margin: 0.3rem;
+    }
+
+    .time-label {
+        font-size: 0.8rem;
+    }
+
+    #expired-message {
+        font-size: 1.5rem;
+    }
+
+    .target-date-container {
+        font-size: 1rem;
+    }
+
+    .container {
+        padding: 1.5rem;
+        width: 95%;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    .time-value {
+        font-size: 1.6rem;
+        min-width: 60px;
+        padding: 0.3rem 0.5rem;
+    }
+
+    .separator {
+        font-size: 1.6rem;
+        margin: 0 0.1rem;
+    }
+
+    .time-section {
+        margin: 0.2rem;
+    }
+
+    .time-label {
+        font-size: 0.7rem;
+        margin-top: 0.3rem;
     }
 }