m2

Author: AnnaelleMyriam

docs/index.html

@@ -20,32 +20,38 @@
   <div id="app">
     <!-- SCENE 1: Museum Entrance + Ticket -->
     <div id="scene-ticket" class="scene active">
-      <canvas id="timeTravel"></canvas>
-      <div class="museum-title">
-        <h1>WELCOME TO THE<br/>NATURAL DISASTER<br/>MUSEUM</h1>
-        <span class="museum-subtitle">1975 — 2025</span>
+      <!-- Top half: Time travel effect + Title -->
+      <div class="time-travel-section">
+        <canvas id="timeTravel"></canvas>
+        <div class="museum-title">
+          <h1>WELCOME TO THE<br/>NATURAL DISASTER<br/>MUSEUM</h1>
+          <span class="museum-subtitle">1975 — 2025</span>
+        </div>
       </div>
 
-      <div class="ticket-wrapper" id="ticketWrapper">
-        <div class="ticket" id="museumTicket">
-          <!-- TICKET FRONT -->
-          <div class="ticket-front">
-            <div class="ticket-header">
-              <span class="ticket-label">ADMISSION · FREE</span>
-              <span class="ticket-num">#00480</span>
-            </div>
-            <div class="ticket-map" id="ticketMiniMap">
-              <!-- Tiny SVG world map rendered here by scene1_ticket.js -->
-            </div>
-            <div class="ticket-footer">
-              <div class="ticket-info">
-                <span>4 EXHIBITS</span>
-                <span>50 YEARS OF DATA</span>
-                <span>230 COUNTRIES</span>
+      <!-- Bottom half: Simple ticket -->
+      <div class="ticket-section">
+        <div class="ticket-wrapper" id="ticketWrapper">
+          <div class="ticket" id="museumTicket">
+            <!-- TICKET FRONT -->
+            <div class="ticket-front">
+              <div class="ticket-header">
+                <span class="ticket-label">ADMISSION · FREE</span>
+                <span class="ticket-num">#00480</span>
+              </div>
+              <div class="ticket-map" id="ticketMiniMap">
+                <!-- Tiny SVG world map rendered here by scene1_ticket.js -->
+              </div>
+              <div class="ticket-footer">
+                <div class="ticket-info">
+                  <span>4 EXHIBITS</span>
+                  <span>50 YEARS OF DATA</span>
+                  <span>230 COUNTRIES</span>
+                </div>
+                <div class="ticket-cta">CLICK TO ENTER &rarr;</div>
               </div>
-              <div class="ticket-cta">CLICK TO ENTER &rarr;</div>
+              <div class="ticket-tear"></div>
             </div>
-            <div class="ticket-tear"></div>
           </div>
         </div>
       </div>

docs/js/scene1_ticket.js

@@ -29,13 +29,32 @@ const Scene1 = {
 
     this.timeTravelCtx = this.timeTravelCanvas.getContext('2d');
 
-    // Set canvas size
+    // Set canvas size - only top half of screen
     const resize = () => {
-      this.timeTravelCanvas.width = window.innerWidth;
-      this.timeTravelCanvas.height = window.innerHeight;
+      const timeTravelSection = document.querySelector('.time-travel-section');
+      if (timeTravelSection) {
+        this.timeTravelCanvas.width = timeTravelSection.clientWidth;
+        this.timeTravelCanvas.height = timeTravelSection.clientHeight;
+      }
     };
     resize();
-    window.addEventListener('resize', resize);
+
+    // Recreate particles on resize
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        resize();
+        this.createParticles();
+      }, 100);
+    });
+
+    this.createParticles();
+    this.animateTimeTravel();
+  },
+
+  createParticles() {
+    this.particles = [];
 
     // Create particles
     const numParticles = 100;
@@ -75,17 +94,20 @@ const Scene1 = {
         isYearLabel: true
       });
     }
-
-    this.animateTimeTravel();
   },
 
   animateTimeTravel() {
     const ctx = this.timeTravelCtx;
     const canvas = this.timeTravelCanvas;
-    const centerX = canvas.width / 2;
-    const centerY = canvas.height / 2;
 
     const animate = () => {
+      if (!this.timeTravelCanvas || !this.timeTravelCtx) {
+        return; // Stop if canvas is removed
+      }
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+
       // Fade out effect for trails
       ctx.fillStyle = 'rgba(8, 10, 15, 0.15)';
       ctx.fillRect(0, 0, canvas.width, canvas.height);