Hugging Face's logo

Spaces:
ParulPandey
/
Earth_Explorer
Running

App Files Community
ParulPandey commited on
Commit
10346b3
·
verified ·
1 Parent(s): aff2f99

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +560 -18
index.html CHANGED
@@ -1,19 +1,561 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Earth Explorer Adventure</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
8
+ <script src="env.js"></script>
9
+ <script src="https://cesium.com/downloads/cesiumjs/releases/1.128/Build/Cesium/Cesium.js"></script>
10
+ <link href="https://cesium.com/downloads/cesiumjs/releases/1.128/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ margin: 0;
14
+ font-family: 'Inter', Arial, sans-serif;
15
+ overflow: hidden;
16
+ background-color: #f7fafd;
17
+ }
18
+ .overlay-title {
19
+ position: absolute;
20
+ top: 18px;
21
+ left: 50%;
22
+ transform: translateX(-50%);
23
+ width: fit-content;
24
+ min-width: 220px;
25
+ max-width: 700px;
26
+ text-align: center;
27
+ font-size: 2.1em;
28
+ font-family: 'Inter', Arial, sans-serif;
29
+ font-weight: 900;
30
+ letter-spacing: 0.03em;
31
+ color: #fff;
32
+ background: linear-gradient(90deg, #651fff 0%, #00e6ff 100%);
33
+ border-radius: 36px;
34
+ box-shadow: none;
35
+ padding: 10px 36px;
36
+ z-index: 20;
37
+ pointer-events: none;
38
+ }
39
+ .overlay-reset {
40
+ position: absolute;
41
+ left: 50%;
42
+ bottom: 16px;
43
+ transform: translateX(-50%);
44
+ z-index: 20;
45
+ pointer-events: auto;
46
+ box-shadow: 0 2px 8px rgba(26,35,126,0.10);
47
+ }
48
+ .modern-btn {
49
+ font-family: 'Inter', Arial, sans-serif;
50
+ font-size: 1.2em;
51
+ font-weight: 900;
52
+ color: #fff;
53
+ background: linear-gradient(90deg, #651fff 0%, #00e6ff 100%);
54
+ border: none;
55
+ border-radius: 36px;
56
+ padding: 14px 34px;
57
+ cursor: pointer;
58
+ }
59
+ #cesiumContainer {
60
+ width: 100%;
61
+ height: 100vh;
62
+ min-height: 420px;
63
+ background: #e3eafc;
64
+ box-shadow: 0 4px 24px rgba(26,35,126,0.07);
65
+ position: relative;
66
+ overflow: hidden;
67
+ padding-top: 0;
68
+ padding-bottom: 0;
69
+ }
70
+ #place-info {
71
+ position: absolute;
72
+ top: 32px;
73
+ left: 32px;
74
+ background: #fff;
75
+ padding: 22px 28px 18px 28px;
76
+ border-radius: 16px;
77
+ box-shadow: 0 4px 24px rgba(26,35,126,0.08);
78
+ max-width: 360px;
79
+ min-width: 220px;
80
+ text-align: left;
81
+ border: 1.5px solid #c5cae9;
82
+ z-index: 13;
83
+ font-family: 'Inter', Arial, sans-serif;
84
+ font-size: 1.08em;
85
+ display: none;
86
+ color: #263238;
87
+ }
88
+ #place-name {
89
+ font-size: 1.3em;
90
+ font-weight: 600;
91
+ color: #283593;
92
+ margin-bottom: 8px;
93
+ }
94
+ #place-fact {
95
+ margin-bottom: 12px;
96
+ color: #1565c0;
97
+ }
98
+ #place-quiz label {
99
+ font-weight: 600;
100
+ color: #3949ab;
101
+ }
102
+ #place-quiz select {
103
+ font-size: 1em;
104
+ margin: 5px;
105
+ border-radius: 6px;
106
+ border: 1.5px solid #c5cae9;
107
+ background: #f7fafd;
108
+ }
109
+ #animal-quiz button {
110
+ background: #ffd700;
111
+ border: none;
112
+ border-radius: 7px;
113
+ padding: 6px 16px;
114
+ font-size: 1em;
115
+ color: #0288d1;
116
+ font-weight: bold;
117
+ margin-left: 8px;
118
+ cursor: pointer;
119
+ }
120
+ #animal-treasure {
121
+ font-size: 2em;
122
+ margin-top: 16px;
123
+ display: none;
124
+ }
125
+ #ui {
126
+ position: absolute;
127
+ right: 24px;
128
+ bottom: 24px;
129
+ background: linear-gradient(135deg, #ffe082 0%, #b388ff 100%);
130
+ padding: 14px 18px 12px 18px;
131
+ border-radius: 14px;
132
+ box-shadow: 0 4px 18px rgba(80,60,180,0.15);
133
+ max-width: 260px;
134
+ min-width: 140px;
135
+ text-align: left;
136
+ border: 2px solid #ff7eb3;
137
+ z-index: 12;
138
+ font-family: 'Inter', Arial, sans-serif;
139
+ font-size: 1.07em;
140
+ overflow: hidden;
141
+ color: #3d155f;
142
+ word-break: break-word;
143
+ line-height: 1.35;
144
+ }
145
+ #ui .sparkle {
146
+ position: absolute;
147
+ width: 100%;
148
+ height: 100%;
149
+ left: 0; top: 0;
150
+ pointer-events: none;
151
+ z-index: 1;
152
+ background: url('data:image/svg+xml;utf8,<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="2" fill="%23fff" opacity=".7"/><circle cx="80" cy="40" r="1.5" fill="%23fff" opacity=".5"/><circle cx="50" cy="20" r="1.2" fill="%23fff" opacity=".6"/><circle cx="30" cy="50" r="1.7" fill="%23fff" opacity=".4"/></svg>');
153
+ animation: sparkle-move 3s linear infinite;
154
+ }
155
+ @keyframes sparkle-move {
156
+ 0% { background-position: 0 0; }
157
+ 100% { background-position: 100px 60px; }
158
+ }
159
+ #ui .ui-heading {
160
+ font-size: 1.25em;
161
+ font-weight: 700;
162
+ color: #5e35b1;
163
+ margin-bottom: 8px;
164
+ letter-spacing: 0.02em;
165
+ }
166
+ #score {
167
+ font-size: 1.35em;
168
+ font-weight: 900;
169
+ color: #ff4081;
170
+ background: #fffde7;
171
+ border-radius: 14px;
172
+ padding: 10px 20px 10px 18px;
173
+ margin-bottom: 15px;
174
+ box-shadow: 0 2px 10px #ffecb3aa;
175
+ display: inline-block;
176
+ letter-spacing: 0.01em;
177
+ }
178
+ #instructions {
179
+ font-size: 1.18em;
180
+ color: #ffd600;
181
+ font-weight: 900;
182
+ margin-bottom: 10px;
183
+ letter-spacing: 0.02em;
184
+ }
185
+ #ui ul {
186
+ list-style: none;
187
+ padding: 0 0 0 2px;
188
+ margin: 0 0 0 0;
189
+ }
190
+ #ui ul li {
191
+ font-size: 1.13em;
192
+ margin-bottom: 11px;
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 10px;
196
+ color: #651fff;
197
+ font-weight: 800;
198
+ text-shadow: 0 2px 10px #fff7, 0 1px 2px #0002;
199
+ }
200
+ #ui ul li .icon {
201
+ font-size: 1.3em;
202
+ display: inline-block;
203
+ margin-right: 3px;
204
+ }
205
+ #ui ul {
206
+ margin: 0 0 0 18px;
207
+ padding: 0;
208
+ }
209
+ #ui li {
210
+ font-size: 1.05em;
211
+ color: #0288d1;
212
+ margin-bottom: 7px;
213
+ font-family: 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
214
+ }
215
+ #ui #instructions {
216
+ font-size: 1.1em;
217
+ color: #ff7043;
218
+ margin-bottom: 10px;
219
+ font-family: 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
220
+ font-weight: bold;
221
+ background: none;
222
+ border: none;
223
+ padding: 0;
224
+ box-shadow: none;
225
+ display: block;
226
+ }
227
+ #score {
228
+ font-size: 22px;
229
+ color: #d81b60;
230
+ margin-bottom: 10px;
231
+ }
232
+ #instructions {
233
+ font-size: 1.3em;
234
+ color: #ff7043;
235
+ margin-bottom: 18px;
236
+ font-family: 'Comic Sans MS', 'Comic Sans', cursive, Arial, sans-serif;
237
+ font-weight: bold;
238
+ background: #fffbe7;
239
+ border-radius: 12px;
240
+ border: 2px dashed #ffd700;
241
+ padding: 10px 14px;
242
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
243
+ display: inline-block;
244
+ }
245
+ #fact {
246
+ font-size: 13px;
247
+ color: #388e3c;
248
+ margin-top: 10px;
249
+ font-style: italic;
250
+ }
251
+ #loading {
252
+ position: absolute;
253
+ top: 50%;
254
+ left: 50%;
255
+ transform: translate(-50%, -50%);
256
+ font-size: 24px;
257
+ color: #ffffff;
258
+ background: rgba(0, 0, 0, 0.7);
259
+ padding: 10px;
260
+ border-radius: 5px;
261
+ }
262
+ #error {
263
+ position: absolute;
264
+ top: 50%;
265
+ left: 50%;
266
+ transform: translate(-50%, -50%);
267
+ font-size: 18px;
268
+ color: #d32f2f;
269
+ background: rgba(255, 255, 255, 0.9);
270
+ padding: 15px;
271
+ border-radius: 5px;
272
+ max-width: 80%;
273
+ text-align: center;
274
+ display: none;
275
+ }
276
+ </style>
277
+ </head>
278
+ <body>
279
+ <div id="cesiumContainer">
280
+ <div id="game-title" class="overlay-title">Earth Explorer</div>
281
+ <button id="resetViewBtn" class="modern-btn overlay-reset">Reset View</button>
282
+ </div>
283
+ <div id="loading">Loading Globe Explorer...</div>
284
+ <div id="error"></div>
285
+ <div id="place-info">
286
+ <div id="place-name"></div>
287
+ <div id="place-fact"></div>
288
+ <div id="place-quiz">
289
+ <div id="place-clue"></div>
290
+ <input id="place-answer-input" type="text" placeholder="Type your answer here..." autocomplete="off" style="margin-top:8px;padding:6px 10px;border-radius:6px;border:1.5px solid #c5cae9;font-size:1em;">
291
+ <button id="place-answer-submit">Submit</button>
292
+ <div id="place-feedback" style="margin-top:7px;min-height:22px;font-weight:bold;"></div>
293
+ </div>
294
+ <div id="place-treasure"></div>
295
+ </div>
296
+ <div id="ui">
297
+ <div id="score">Places Discovered: 0/9</div>
298
+ <div id="instructions">🧭 <b>How to Play:</b></div>
299
+ <ul>
300
+ <li>🌍 <b>Spin the globe to explore</li>
301
+ <li>📍 <b>Find the red pins on the map</li>
302
+ <li>👀 <b>Click a pin to get a clue about a famous place</li>
303
+ <li>🔎 <b>Zoom in to discover the place and learn a fun fact</li>
304
+ <li>💎 <b>Collect all places to win!</li>
305
+ </ul>
306
+ </div>
307
+ <script>
308
+ // Add Reset View button functionality (attached after viewer is created)
309
+ function setupResetButton(viewer) {
310
+ document.getElementById('resetViewBtn').onclick = function() {
311
+ viewer.camera.flyTo({
312
+ destination: Cesium.Cartesian3.fromDegrees(0, 0, 20000000),
313
+ orientation: {
314
+ heading: Cesium.Math.toRadians(0),
315
+ pitch: Cesium.Math.toRadians(-90),
316
+ roll: 0.0
317
+ },
318
+ duration: 1.5
319
+ });
320
+ // Hide the quiz/info box
321
+ document.getElementById('place-info').style.display = 'none';
322
+ };
323
+ }
324
+
325
+ async function initializeCesium() {
326
+ try {
327
+ // INSERT YOUR CESIUM ION API KEY HERE
328
+ Cesium.Ion.defaultAccessToken = CESIUM_ION_TOKEN;
329
+ // Only keep Bing for satellite view (no OSM)
330
+ window.currentImagery = 'default';
331
+ // Only use Cesium Ion Imagery Provider (assetId: 3) as the sole imagery layer
332
+ const viewer = new Cesium.Viewer('cesiumContainer', {
333
+ baseLayerPicker: false,
334
+ timeline: false,
335
+ animation: false,
336
+ geocoder: false,
337
+ homeButton: false,
338
+ sceneModePicker: true,
339
+ navigationHelpButton: true
340
+ });
341
+
342
+ window.viewer = viewer;
343
+ setupResetButton(viewer);
344
+
345
+
346
+ // Add imagery provider as a layer (do not zoom to it, use default Cesium view)
347
+ try {
348
+ const imageryLayer = viewer.imageryLayers.addImageryProvider(
349
+ await Cesium.IonImageryProvider.fromAssetId(3)
350
+ );
351
+ // Do not zoom to the layer
352
+ } catch (error) {
353
+ console.log(error);
354
+ }
355
+
356
+
357
+ // Fallback settings to ensure globe visibility
358
+ viewer.scene.globe.enableLighting = true;
359
+ viewer.scene.globe.depthTestAgainstTerrain = true;
360
+
361
+ // Hide loading text
362
+ document.getElementById('loading').style.display = 'none';
363
+
364
+ // --- INTERACTIVE GAME LOGIC ---
365
+ const scoreDisplay = document.getElementById('score');
366
+ let placesFound = 0;
367
+ const totalPlaces = 9;
368
+ const places = [
369
+ { name: "Sahara Desert", longitude: 13.0, latitude: 23.5, clue: "This is the largest hot desert in the world, stretching across North Africa. Zoom in to see endless sand dunes and almost no vegetation. What is this place?", fact: "The Sahara Desert covers over 9 million square kilometers!" },
370
+ { name: "Great Barrier Reef", longitude: 147.7, latitude: -18.3, clue: "This natural wonder is the world’s largest coral reef system, found off the coast of Australia. Zoom in to see turquoise waters and coral islands. What is this place?", fact: "The Great Barrier Reef is home to thousands of species of marine life." },
371
+ { name: "Amazon Rainforest", longitude: -60.0, latitude: -3.0, clue: "This is the world’s largest tropical rainforest, covering much of northern South America. Zoom in to see a thick green jungle and winding rivers. What is this place?", fact: "The Amazon Rainforest produces 20% of the world’s oxygen." },
372
+ { name: "Mount Everest", longitude: 86.9250, latitude: 27.9881, clue: "This is the highest mountain on Earth, located in the Himalayas. Zoom in to see snow-capped peaks towering above the clouds. What is this place?", fact: "Mount Everest is 8,848 meters (29,029 ft) tall!" },
373
+ { name: "Antarctica", longitude: 0.0, latitude: -82.8628, clue: "This is the coldest, driest, and windiest , continent, covered almost entirely by ice. Zoom in to see a vast white landscape. What is this place?", fact: "Antarctica holds 60% of the world’s fresh water in its ice." },
374
+ { name: "Grand Canyon", longitude: -112.1401, latitude: 36.0544, clue: "This steep-sided gorge in Arizona, USA, is carved by a river over millions of years. Zoom in to see colorful rock layers and a deep canyon. What is this place?", fact: "The Grand Canyon is 446 km long and up to 1,857 meters deep." },
375
+ { name: "Great Wall of China", longitude: 117.236, latitude: 40.6769, clue: "This is a man-made structure stretching thousands of kilometers across northern China. Zoom in to spot a long wall winding over hills. What is this place?", fact: "The Great Wall of China is over 21,000 km (13,000 miles) long!" },
376
+ { name: "Niagara Falls", longitude: -79.074, latitude: 43.0799, clue: "These are three massive waterfalls on the border of Canada and the USA. Zoom in to see roaring water and mist. What is this place?", fact: "More than 3,000 tons of water flow over Niagara Falls every second." },
377
+ { name: "Uluru (Ayers Rock)", longitude: 131.0369, latitude: -25.3444, clue: "This giant red sandstone rock is found in the heart of Australia’s Outback. Zoom in to see a huge, isolated rock rising from flat land. What is this place?", fact: "Uluru is sacred to the local Anangu people and is 348 meters tall." }
378
+ ];
379
+ scoreDisplay.textContent = `Places Discovered: 0/${totalPlaces}`;
380
+ // Add place markers as billboards
381
+ const pinDataUrl = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><text x="0" y="52" font-size="56">📍</text></svg>';
382
+ const entities = places.map(place => {
383
+ return viewer.entities.add({
384
+ position: Cesium.Cartesian3.fromDegrees(place.longitude, place.latitude, 1000),
385
+ billboard: {
386
+ image: pinDataUrl,
387
+ width: 48,
388
+ height: 48,
389
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM
390
+ },
391
+ name: "Zoom",
392
+ properties: {
393
+ clue: place.clue,
394
+ placename: place.name,
395
+ fact: place.fact
396
+ }
397
+ });
398
+ });
399
+ // Pin click handler
400
+ const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
401
+ handler.setInputAction((click) => {
402
+ const pickedObject = viewer.scene.pick(click.position);
403
+ if (Cesium.defined(pickedObject) && pickedObject.id) {
404
+ const entity = pickedObject.id;
405
+ // Show place info box on left
406
+ const clue = entity.properties.clue.getValue();
407
+ const placename = entity.properties.placename.getValue();
408
+ const fact = entity.properties.fact.getValue();
409
+ const placeInfoDiv = document.getElementById('place-info');
410
+ const placeNameDiv = document.getElementById('place-name');
411
+ const placeFactDiv = document.getElementById('place-fact');
412
+ const placeQuizDiv = document.getElementById('place-quiz');
413
+ const placeTreasureDiv = document.getElementById('place-treasure');
414
+ if (placeInfoDiv) placeInfoDiv.style.display = 'block';
415
+ if (placeNameDiv) placeNameDiv.textContent = `📍 Mystery Place`;
416
+ if (placeFactDiv) placeFactDiv.textContent = '';
417
+ if (placeTreasureDiv) placeTreasureDiv.style.display = 'none';
418
+ if (placeQuizDiv) {
419
+ placeQuizDiv.innerHTML = `
420
+ <div id="place-clue"><label>${clue}</label><br><span style='color:#0288d1;font-size:1em;'>Type your answer or zoom in for help!</span></div>
421
+ <input id="place-answer-input" type="text" placeholder="Type your answer here..." autocomplete="off" style="margin-top:8px;padding:6px 10px;border-radius:6px;border:1.5px solid #c5cae9;font-size:1em;">
422
+ <button id="place-answer-submit">Submit</button>
423
+ <div id="place-feedback" style="margin-top:7px;min-height:22px;font-weight:bold;"></div>
424
+ `;
425
+ }
426
+ document.getElementById('place-answer-input').value = '';
427
+ document.getElementById('place-answer-input').disabled = false;
428
+ document.getElementById('place-answer-submit').disabled = false;
429
+ document.getElementById('place-feedback').textContent = '';
430
+ if (placeFactDiv) placeFactDiv.textContent = '';
431
+ if (placeTreasureDiv) placeTreasureDiv.style.display = 'none';
432
+ let tries = 0;
433
+ let answered = false;
434
+ let points = 0;
435
+ let zoomRevealed = false;
436
+ let allowZoomAttempt = false;
437
+ // Enhanced answer checking logic
438
+ function revealPlace(correct, revealByZoom = false) {
439
+ answered = true;
440
+ document.getElementById('place-answer-input').disabled = true;
441
+ document.getElementById('place-answer-submit').disabled = true;
442
+ if (placeNameDiv) placeNameDiv.textContent = `📍 ${placename}`;
443
+ if (placeFactDiv) placeFactDiv.textContent = fact;
444
+ if (placeTreasureDiv) {
445
+ placeTreasureDiv.textContent = correct ? '💎 You found a hidden treasure!' : '';
446
+ placeTreasureDiv.style.display = 'block';
447
+ }
448
+ if (correct) {
449
+ placesFound++;
450
+ if (scoreDisplay) scoreDisplay.textContent = `Places Discovered: ${placesFound}/${totalPlaces}`;
451
+ setTimeout(() => {
452
+ viewer.entities.remove(entity);
453
+ if (placeInfoDiv) placeInfoDiv.style.display = 'none';
454
+ if (placesFound === totalPlaces) {
455
+ setTimeout(() => {
456
+ if (placeInfoDiv) placeInfoDiv.style.display = 'block';
457
+ if (placeNameDiv) placeNameDiv.textContent = '🌍 Globe Explorer!';
458
+ if (placeFactDiv) placeFactDiv.textContent = "You found all the hidden places!";
459
+ document.getElementById('place-clue').innerHTML = '';
460
+ if (placeTreasureDiv) {
461
+ placeTreasureDiv.textContent = '🏆';
462
+ placeTreasureDiv.style.display = 'block';
463
+ }
464
+ }, 800);
465
+ }
466
+ }, 1800);
467
+ } else if (revealByZoom) {
468
+ document.getElementById('place-feedback').textContent = `The answer is: ${placename}. ${fact}`;
469
+ } else {
470
+ document.getElementById('place-feedback').textContent = `The answer is: ${placename}. ${fact}`;
471
+ }
472
+ }
473
+ function checkAnswer() {
474
+ if (answered) return;
475
+ const userAns = document.getElementById('place-answer-input').value.trim().toLowerCase();
476
+ const correctAns = placename.trim().toLowerCase();
477
+ if (!zoomRevealed) tries++;
478
+ if (userAns === correctAns) {
479
+ if (!zoomRevealed) {
480
+ points = tries === 1 ? 40 : tries === 2 ? 30 : tries === 3 ? 20 : 0;
481
+ } else {
482
+ points = 10;
483
+ }
484
+ document.getElementById('place-feedback').textContent = `🎉 Correct! You earned ${points} points!`;
485
+ if (placeNameDiv) placeNameDiv.textContent = `📍 ${placename}`;
486
+ revealPlace(true);
487
+ } else {
488
+ if (!zoomRevealed && tries < 3) {
489
+ document.getElementById('place-feedback').textContent = `❌ Try again!`;
490
+ document.getElementById('place-answer-input').value = '';
491
+ } else if (!zoomRevealed && tries === 3) {
492
+ // Show Zoom for Hint button
493
+ allowZoomAttempt = true;
494
+ document.getElementById('place-feedback').innerHTML = `❌ Out of tries! <button id='zoom-hint-btn' style='margin-left:8px;padding:5px 12px;border-radius:8px;background:#00e6ff;color:#fff;font-weight:bold;border:none;cursor:pointer;'>Zoom in for a hint!</button>`;
495
+ document.getElementById('place-answer-input').disabled = true;
496
+ document.getElementById('place-answer-submit').disabled = true;
497
+ document.getElementById('zoom-hint-btn').onclick = function() {
498
+ document.getElementById('place-feedback').textContent = '🔎 Zoom in to the location to reveal the answer!';
499
+ document.getElementById('place-answer-input').value = '';
500
+ // Wait for zoom event
501
+ };
502
+ } else if (zoomRevealed) {
503
+ // Final attempt after zoom
504
+ document.getElementById('place-answer-input').disabled = false;
505
+ document.getElementById('place-answer-submit').disabled = false;
506
+ allowZoomAttempt = false;
507
+ if (tries > 3) {
508
+ // This is the final attempt after zoom
509
+ if (userAns === correctAns) {
510
+ points = 10;
511
+ document.getElementById('place-feedback').textContent = `🎉 Correct! You earned ${points} points!`;
512
+ if (placeNameDiv) placeNameDiv.textContent = `📍 ${placename}`;
513
+ revealPlace(true);
514
+ } else {
515
+ document.getElementById('place-feedback').textContent = `The answer is: ${placename}. ${fact}`;
516
+ if (placeFactDiv) placeFactDiv.textContent = `${placename}: ${fact}`;
517
+ document.getElementById('place-answer-input').disabled = true;
518
+ document.getElementById('place-answer-submit').disabled = true;
519
+ points = 0;
520
+ // Keep info box visible until Reset View is pressed
521
+ // Do NOT call revealPlace(false) here to avoid overwriting the answer
522
+
523
+ }
524
+ }
525
+ }
526
+ }
527
+ }
528
+ document.getElementById('place-answer-submit').onclick = checkAnswer;
529
+ document.getElementById('place-answer-input').onkeydown = function(e){ if(e.key==='Enter') checkAnswer(); };
530
+ // Zoom-to-reveal for help (if not answered)
531
+ function checkZoom() {
532
+ try {
533
+ const cameraHeight = viewer.camera.positionCartographic.height;
534
+ if (!answered && allowZoomAttempt && !zoomRevealed && cameraHeight < 2000000) {
535
+ zoomRevealed = true;
536
+ document.getElementById('place-feedback').textContent = `🔍 You unlocked a final try! Type your answer and press Submit.`;
537
+ document.getElementById('place-answer-input').value = '';
538
+ document.getElementById('place-answer-input').disabled = false;
539
+ document.getElementById('place-answer-submit').disabled = false;
540
+ document.getElementById('place-answer-submit').style.pointerEvents = 'auto';
541
+ document.getElementById('place-answer-submit').style.opacity = '1';
542
+ document.getElementById('place-answer-input').focus();
543
+ }
544
+ } catch (err) { console.error(err); }
545
+ }
546
+ viewer.camera.moveEnd.addEventListener(checkZoom);
547
+ }
548
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
549
+ // --- END INTERACTIVE GAME LOGIC ---
550
+ } catch (e) {
551
+ console.error('Error initializing Cesium:', e);
552
+ document.getElementById('loading').style.display = 'none';
553
+ document.getElementById('error').innerText = 'An error occurred while loading Cesium.';
554
+ document.getElementById('error').style.display = 'block';
555
+ }
556
+ }
557
+
558
+ window.onload = initializeCesium;
559
+ </script>
560
+ </body>
561
  </html>