Skip to content

Commit 11106ee

Browse files
lunasrclunasrc
committed
feat: welcome page with stars bg
1 parent 82bbbf6 commit 11106ee

3 files changed

Lines changed: 55 additions & 13 deletions

File tree

‎docs/css/style.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
--gradient-primary: linear-gradient(90deg, #97AEC4 0%, #6EB6FF 50%, #FF8775 100%);
2525

2626
/* Typography */
27+
--font-inter: 'Inter', sans-serif;
2728
--font-display: 'Bebas Neue', sans-serif;
2829
--font-typewriter: 'Special Elite', cursive;
2930
--font-body: 'Source Sans 3', sans-serif;
@@ -63,7 +64,7 @@ body::before {
6364
pointer-events: none;
6465
z-index: 0;
6566
opacity: 0.85;
66-
}
67+
}
6768

6869
button {
6970
cursor: pointer;
@@ -166,7 +167,7 @@ button {
166167
}
167168

168169
h1 {
169-
font-family: 'Inter', sans-serif;
170+
font-family: var(--font-inter);
170171
font-weight: 700;
171172
font-size: clamp(2.6rem, 5.2vw, 4.8rem);
172173
line-height: 1.05;
@@ -189,7 +190,7 @@ button {
189190
}
190191

191192
.lede {
192-
font-family: 'Inter', sans-serif;
193+
font-family: var(--font-inter);
193194
font-size: 1.2rem;
194195
line-height: 1.5;
195196
color: var(--bluegrey);

‎docs/index.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<body>
2020
<div id="app">
2121
<!-- SCENE 1: Museum Entrance + Ticket -->
22-
<div id="scene-ticket" class="frame">
22+
<div id="scene-ticket" class="frame scene active">
2323
<!-- Background: Full screen time travel canvas -->
2424
<canvas id="timeTravel"></canvas>
2525

@@ -328,11 +328,6 @@ <h2 class="story-title">EARTH STORY</h2>
328328

329329
showScene(id) {
330330

331-
// Stop scene 1 animation if leaving it
332-
if (this.currentScene === 'scene-ticket' && id !== 'scene-ticket' && WelcomePage.stopTimeTravelEffect) {
333-
WelcomePage.stopTimeTravelEffect();
334-
}
335-
336331
document.querySelectorAll('.scene').forEach(s => {
337332
s.classList.add('hidden');
338333
s.classList.remove('active');
@@ -372,12 +367,9 @@ <h2 class="story-title">EARTH STORY</h2>
372367
});
373368
});
374369

375-
376-
377370
document.addEventListener('DOMContentLoaded', async () => {
378371
console.log('Natural Disaster Museum initializing...');
379372

380-
WelcomePage.initTimeTravelEffect();
381373
App.showScene('scene-ticket');
382374

383375
await initData();

‎docs/js/scene1_ticket.js‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,28 @@
182182
// }
183183
// };
184184

185-
// // Drifting starfield background
185+
// Kept as a global utility — scene2_globe.js calls Scene1.getISO3FromNumericId()
186+
const Scene1 = {
187+
getISO3FromNumericId(numericId) {
188+
const idToISO = {
189+
'156': 'CHN', '840': 'USA', '356': 'IND', '360': 'IDN', '608': 'PHL',
190+
'392': 'JPN', '050': 'BGD', '586': 'PAK', '076': 'BRA', '484': 'MEX',
191+
'036': 'AUS', '276': 'DEU', '250': 'FRA', '826': 'GBR', '724': 'ESP',
192+
'380': 'ITA', '792': 'TUR', '364': 'IRN', '231': 'ETH', '404': 'KEN',
193+
'566': 'NGA', '710': 'ZAF', '704': 'VNM', '764': 'THA', '004': 'AFG',
194+
'524': 'NPL', '104': 'MMR', '332': 'HTI', '643': 'RUS', '124': 'CAN',
195+
'032': 'ARG', '152': 'CHL', '170': 'COL', '604': 'PER', '012': 'DZA',
196+
'818': 'EGY', '504': 'MAR', '508': 'MOZ', '800': 'UGA', '024': 'AGO',
197+
'120': 'CMR', '180': 'COD', '729': 'SDN', '440': 'LTU', '112': 'BLR',
198+
'426': 'LSO', '834': 'TZA', '894': 'ZMB', '716': 'ZWE', '178': 'COG',
199+
'266': 'GAB', '288': 'GHA', '384': 'CIV', '466': 'MLI', '478': 'MRT',
200+
'562': 'NER', '686': 'SEN', '694': 'SLE', '728': 'SSD'
201+
};
202+
return idToISO[numericId];
203+
}
204+
};
205+
206+
// Drifting starfield background
186207
(function initTimeTravel() {
187208
const canvas = document.getElementById('timeTravel');
188209
if (!canvas) return;
@@ -273,4 +294,32 @@
273294
window.addEventListener('resize', resize);
274295
init();
275296
requestAnimationFrame(frame);
297+
})();
298+
299+
// Ticket click → Scene 2
300+
// (script is at end of <body> so DOM is ready — no DOMContentLoaded needed)
301+
(function attachTicketHandler() {
302+
const ticket = document.getElementById('ticket');
303+
const frame = document.getElementById('scene-ticket');
304+
if (!ticket || !frame) return;
305+
306+
function enterMuseum() {
307+
ticket.style.transition = 'transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease';
308+
ticket.style.transform = 'scale(8)';
309+
ticket.style.opacity = '0';
310+
311+
setTimeout(() => {
312+
App.showScene('scene-globe');
313+
314+
setTimeout(() => {
315+
ticket.style.transition = 'none';
316+
ticket.style.transform = '';
317+
ticket.style.opacity = '1';
318+
setTimeout(() => { ticket.style.transition = ''; }, 50);
319+
}, 100);
320+
}, 700);
321+
}
322+
323+
ticket.addEventListener('click', enterMuseum);
324+
ticket.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') enterMuseum(); });
276325
})();

0 commit comments

Comments
 (0)