ILikeMonkingOff commited on
Commit
a1666b4
·
verified ·
1 Parent(s): 4cb5b5f

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +377 -19
index.html CHANGED
@@ -1,19 +1,377 @@
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>Choose Your Own Adventure</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Courier New', monospace;
10
+ background-color: #000;
11
+ color: #0f0;
12
+ margin: 0;
13
+ padding: 20px;
14
+ line-height: 1.6;
15
+ }
16
+ .container {
17
+ max-width: 800px;
18
+ margin: 0 auto;
19
+ border: 1px solid #0f0;
20
+ padding: 20px;
21
+ background-color: #001a00;
22
+ }
23
+ h1 {
24
+ text-align: center;
25
+ color: #0f0;
26
+ text-shadow: 0 0 10px #0f0;
27
+ }
28
+ .story {
29
+ margin-bottom: 20px;
30
+ font-size: 18px;
31
+ }
32
+ .choices {
33
+ margin-top: 20px;
34
+ }
35
+ button {
36
+ display: block;
37
+ width: 100%;
38
+ padding: 15px;
39
+ margin: 10px 0;
40
+ background-color: #003300;
41
+ color: #0f0;
42
+ border: 1px solid #0f0;
43
+ font-family: 'Courier New', monospace;
44
+ font-size: 16px;
45
+ cursor: pointer;
46
+ transition: all 0.3s;
47
+ }
48
+ button:hover {
49
+ background-color: #006600;
50
+ box-shadow: 0 0 10px #0f0;
51
+ }
52
+ .restart {
53
+ text-align: center;
54
+ margin-top: 20px;
55
+ }
56
+ .restart button {
57
+ width: auto;
58
+ display: inline-block;
59
+ padding: 10px 20px;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container">
65
+ <h1>Choose Your Own Adventure</h1>
66
+ <div id="game-container">
67
+ <div id="story" class="story"></div>
68
+ <div id="choices" class="choices"></div>
69
+ <div id="restart" class="restart"></div>
70
+ </div>
71
+ </div>
72
+
73
+ <script>
74
+ // Game data structure
75
+ const gameData = {
76
+ start: {
77
+ text: "You wake up in a dark forest with no memory of how you got there. The moonlight filters through the trees. You can hear strange sounds in the distance. What do you do?",
78
+ choices: [
79
+ { text: "Follow the sound of running water", next: "river" },
80
+ { text: "Head towards the distant light", next: "cabin" },
81
+ { text: "Stay put and wait for morning", next: "wait" }
82
+ ]
83
+ },
84
+ river: {
85
+ text: "You follow the sound and find a small river. There's a rickety bridge ahead. On the other side, you see a path leading to a village. What do you do?",
86
+ choices: [
87
+ { text: "Cross the bridge carefully", next: "village" },
88
+ { text: "Follow the river downstream", next: "waterfall" },
89
+ { text: "Turn back to the forest", next: "start" }
90
+ ]
91
+ },
92
+ cabin: {
93
+ text: "You approach a glowing cabin in the woods. The door is slightly ajar. Warm light spills out, and you smell food cooking. What do you do?",
94
+ choices: [
95
+ { text: "Knock on the door", next: "friendly" },
96
+ { text: "Peek through the window", next: "spy" },
97
+ { text: "Decide it's too risky and leave", next: "start" }
98
+ ]
99
+ },
100
+ wait: {
101
+ text: "You decide to wait for morning. As the hours pass, the forest grows colder. You hear footsteps approaching. What do you do?",
102
+ choices: [
103
+ { text: "Call out for help", next: "help" },
104
+ { text: "Hide behind a tree", next: "hide" },
105
+ { text: "Keep waiting silently", next: "silent" }
106
+ ]
107
+ },
108
+ waterfall: {
109
+ text: "Following the river downstream, you discover a beautiful waterfall. Behind it, there's a hidden cave with glowing crystals. What do you do?",
110
+ choices: [
111
+ { text: "Enter the cave to explore", next: "treasure" },
112
+ { text: "Sit and rest by the waterfall", next: "rest" },
113
+ { text: "Return to the bridge", next: "river" }
114
+ ]
115
+ },
116
+ village: {
117
+ text: "You cross the bridge and reach the village. The villagers welcome you warmly. They explain you've been missing for days. They offer you food and shelter. What do you do?",
118
+ choices: [
119
+ { text: "Accept their hospitality", next: "safe" },
120
+ { text: "Ask about how you got here", next: "explain" },
121
+ { text: "Thank them but continue exploring", next: "explore" }
122
+ ]
123
+ },
124
+ friendly: {
125
+ text: "An elderly woman opens the door with a kind smile. She invites you in for dinner, saying she's been expecting you. She explains you're a traveler who got lost. What do you do?",
126
+ choices: [
127
+ { text: "Accept the invitation gratefully", next: "dinner" },
128
+ { text: "Politely decline and ask questions", next: "questions" },
129
+ { text: "Thank her and continue your journey", next: "continue" }
130
+ ]
131
+ },
132
+ spy: {
133
+ text: "Through the window, you see a family having dinner. They seem normal, but something feels off. Suddenly, they all turn to look directly at you. What do you do?",
134
+ choices: [
135
+ { text: "Knock on the door nervously", next: "nervous" },
136
+ { text: "Run away quickly", next: "run" },
137
+ { text: "Wave awkwardly and introduce yourself", next: "awkward" }
138
+ ]
139
+ },
140
+ help: {
141
+ text: "You call out and a friendly ranger appears. He explains you've been reported missing and offers to guide you back to town. What do you do?",
142
+ choices: [
143
+ { text: "Accept his help gratefully", next: "rescue" },
144
+ { text: "Ask him questions about the forest", next: "questions2" },
145
+ { text: "Thank him but insist on finding your own way", next: "independent" }
146
+ ]
147
+ },
148
+ hide: {
149
+ text: "You hide behind a tree. The footsteps pass by without noticing you. After they're gone, you realize you've been walking in circles. You're more lost than ever. What do you do?",
150
+ choices: [
151
+ { text: "Try to retrace your steps", next: "retrace" },
152
+ { text: "Climb a tree to get your bearings", next: "climb" },
153
+ { text: "Build a small fire to signal for help", next: "fire" }
154
+ ]
155
+ },
156
+ silent: {
157
+ text: "You remain silent. The footsteps grow closer, then stop. After a long pause, they move away. You hear them again much later, but this time they're accompanied by voices calling your name. What do you do?",
158
+ choices: [
159
+ { text: "Respond to the voices", next: "respond" },
160
+ { text: "Stay hidden and observe", next: "observe" },
161
+ { text: "Follow the voices quietly", next: "follow" }
162
+ ]
163
+ },
164
+ treasure: {
165
+ text: "Inside the cave, you find ancient treasure! Gold coins and jewels glitter in the crystal light. As you reach for them, you hear the sound of the waterfall changing. The cave is flooding! What do you do?",
166
+ choices: [
167
+ { text: "Grab what you can and run", next: "grab" },
168
+ { text: "Look for another exit", next: "exit" },
169
+ { text: "Leave the treasure and escape", next: "escape" }
170
+ ]
171
+ },
172
+ rest: {
173
+ text: "You sit by the waterfall and feel completely at peace. The sound of the water is hypnotic. You start to feel drowsy. As you close your eyes, you realize this might be a dream. What do you do?",
174
+ choices: [
175
+ { text: "Let yourself fall asleep", next: "dream" },
176
+ { text: "Pinch yourself to stay awake", next: "awake" },
177
+ { text: "Get up and keep moving", next: "moving" }
178
+ ]
179
+ },
180
+ safe: {
181
+ text: "You accept the villagers' hospitality and spend the night in safety. The next morning, they help you find your way home. You return to your normal life, but sometimes wonder about that strange night in the forest.",
182
+ choices: [
183
+ { text: "Play Again", next: "start" }
184
+ ]
185
+ },
186
+ explain: {
187
+ text: "The villagers explain that you wandered into the forest three days ago and got lost. They've been searching for you. They're relieved to have found you safe. They escort you home the next morning.",
188
+ choices: [
189
+ { text: "Play Again", next: "start" }
190
+ ]
191
+ },
192
+ explore: {
193
+ text: "You thank the villagers but decide to explore more. As you leave, you realize you're heading deeper into the forest. The path becomes less clear, and soon you're lost again. But this time, you feel like you're meant to be here.",
194
+ choices: [
195
+ { text: "Play Again", next: "start" }
196
+ ]
197
+ },
198
+ dinner: {
199
+ text: "You enjoy a wonderful meal with the kind woman. She tells you stories of other travelers she's helped. After dinner, she shows you to a comfortable room. You sleep peacefully and wake up back in your own bed at home. Was it all a dream?",
200
+ choices: [
201
+ { text: "Play Again", next: "start" }
202
+ ]
203
+ },
204
+ questions: {
205
+ text: "You politely decline but ask how she knew you were coming. She smiles mysteriously and says, 'The forest tells me when someone needs help.' She points you in the direction of the main road. You find your way home safely.",
206
+ choices: [
207
+ { text: "Play Again", next: "start" }
208
+ ]
209
+ },
210
+ continue: {
211
+ text: "You thank the woman and continue your journey. As you walk away, you feel a strange sense of déjà vu. The path ahead seems familiar, and you realize you're retracing your original steps. Eventually, you find your way home.",
212
+ choices: [
213
+ { text: "Play Again", next: "start" }
214
+ ]
215
+ },
216
+ rescue: {
217
+ text: "The ranger guides you safely back to town. He explains you've been reported missing for two days. Your family is overjoyed to see you. You're safe, but you'll never forget your adventure in the mysterious forest.",
218
+ choices: [
219
+ { text: "Play Again", next: "start" }
220
+ ]
221
+ },
222
+ questions2: {
223
+ text: "You ask the ranger about the strange sounds in the forest. He tells you about local legends of a magical forest that appears only at night. He suggests you were experiencing something beyond normal reality. He escorts you home safely.",
224
+ choices: [
225
+ { text: "Play Again", next: "start" }
226
+ ]
227
+ },
228
+ independent: {
229
+ text: "You thank the ranger but insist on finding your own way. He reluctantly gives you directions and a small flashlight. Following his advice, you successfully navigate out of the forest and return home.",
230
+ choices: [
231
+ { text: "Play Again", next: "start" }
232
+ ]
233
+ },
234
+ retrace: {
235
+ text: "You try to retrace your steps but everything looks the same in the dark. You become more and more lost. Eventually, you stumble upon a ranger station where helpful rangers find you and guide you home safely.",
236
+ choices: [
237
+ { text: "Play Again", next: "start" }
238
+ ]
239
+ },
240
+ climb: {
241
+ text: "You climb a tall tree to get your bearings. From above, you can see the lights of a nearby town. Carefully climbing down, you head in that direction and successfully find your way home.",
242
+ choices: [
243
+ { text: "Play Again", next: "start" }
244
+ ]
245
+ },
246
+ fire: {
247
+ text: "You build a small fire to signal for help. The smoke attracts a search party that's been looking for you. They guide you safely back home. Your adventure in the forest becomes a family story for years to come.",
248
+ choices: [
249
+ { text: "Play Again", next: "start" }
250
+ ]
251
+ },
252
+ respond: {
253
+ text: "You respond to the voices calling your name. They belong to a search party looking for you! They're overjoyed to find you safe. They explain you've been missing for two days. They escort you home safely.",
254
+ choices: [
255
+ { text: "Play Again", next: "start" }
256
+ ]
257
+ },
258
+ observe: {
259
+ text: "You stay hidden and observe. The voices belong to a search party. As they pass by, you realize they're calling your name. You decide to reveal yourself. They're relieved to find you safe and guide you home.",
260
+ choices: [
261
+ { text: "Play Again", next: "start" }
262
+ ]
263
+ },
264
+ follow: {
265
+ text: "You quietly follow the voices. They lead you to a clearing where searchlights are sweeping the forest. They belong to a rescue party looking for you! They're overjoyed to find you safe and sound. You're escorted home.",
266
+ choices: [
267
+ { text: "Play Again", next: "start" }
268
+ ]
269
+ },
270
+ grab: {
271
+ text: "You grab some treasure and run as the cave floods behind you. You make it out just in time! The next morning, you return home with your newfound wealth. Your adventure becomes the stuff of local legend.",
272
+ choices: [
273
+ { text: "Play Again", next: "start" }
274
+ ]
275
+ },
276
+ exit: {
277
+ text: "Instead of grabbing treasure, you look for another exit. You find a narrow passage that leads to a hidden exit above the waterfall. You escape safely and return home with an incredible story to tell.",
278
+ choices: [
279
+ { text: "Play Again", next: "start" }
280
+ ]
281
+ },
282
+ escape: {
283
+ text: "You wisely decide that treasure isn't worth your life. You escape the cave just as it floods completely. Though you leave the treasure behind, you return home safe and sound with an unforgettable adventure story.",
284
+ choices: [
285
+ { text: "Play Again", next: "start" }
286
+ ]
287
+ },
288
+ dream: {
289
+ text: "You let yourself fall asleep by the waterfall. When you wake up, you're in your own bed at home. Was it all a dream? The small piece of crystal in your pocket suggests otherwise. You'll never forget your magical forest adventure.",
290
+ choices: [
291
+ { text: "Play Again", next: "start" }
292
+ ]
293
+ },
294
+ awake: {
295
+ text: "You pinch yourself to stay awake. The peaceful feeling fades, and you realize you need to get moving. You head back towards the bridge and eventually find your way home, safe but forever changed by the experience.",
296
+ choices: [
297
+ { text: "Play Again", next: "start" }
298
+ ]
299
+ },
300
+ moving: {
301
+ text: "You get up and keep moving. The peaceful feeling of the waterfall fades as you focus on finding your way out. You eventually stumble upon a ranger station where helpful rangers guide you home safely.",
302
+ choices: [
303
+ { text: "Play Again", next: "start" }
304
+ ]
305
+ },
306
+ nervous: {
307
+ text: "You knock nervously on the door. The family invites you in warmly, explaining they heard you were lost. They feed you and help you contact your family. The next morning, they drive you home safely.",
308
+ choices: [
309
+ { text: "Play Again", next: "start" }
310
+ ]
311
+ },
312
+ run: {
313
+ text: "You run away quickly. As you flee, you realize you're heading in the direction of a main road. You eventually find your way to a gas station where you can call for help. You're picked up and returned home safely.",
314
+ choices: [
315
+ { text: "Play Again", next: "start" }
316
+ ]
317
+ },
318
+ awkward: {
319
+ text: "You wave awkwardly and introduce yourself. The family laughs kindly and invites you in. They explain they've been expecting you - a ranger told them to watch for a lost traveler. They help you get home safely.",
320
+ choices: [
321
+ { text: "Play Again", next: "start" }
322
+ ]
323
+ }
324
+ };
325
+
326
+ // Game state
327
+ let currentState = "start";
328
+
329
+ // DOM elements
330
+ const storyElement = document.getElementById("story");
331
+ const choicesElement = document.getElementById("choices");
332
+ const restartElement = document.getElementById("restart");
333
+
334
+ // Function to display the current scene
335
+ function displayScene(sceneKey) {
336
+ const scene = gameData[sceneKey];
337
+ if (!scene) {
338
+ console.error("Scene not found:", sceneKey);
339
+ return;
340
+ }
341
+
342
+ // Update story text
343
+ storyElement.innerHTML = scene.text;
344
+
345
+ // Clear previous choices
346
+ choicesElement.innerHTML = "";
347
+
348
+ // Add new choices
349
+ scene.choices.forEach(choice => {
350
+ const button = document.createElement("button");
351
+ button.textContent = choice.text;
352
+ button.addEventListener("click", () => {
353
+ currentState = choice.next;
354
+ displayScene(currentState);
355
+ });
356
+ choicesElement.appendChild(button);
357
+ });
358
+
359
+ // Add restart button if it's an ending
360
+ if (scene.choices.length === 1 && scene.choices[0].next === "start") {
361
+ restartElement.innerHTML = '<button onclick="restartGame()">Play Again</button>';
362
+ } else {
363
+ restartElement.innerHTML = "";
364
+ }
365
+ }
366
+
367
+ // Function to restart the game
368
+ function restartGame() {
369
+ currentState = "start";
370
+ displayScene(currentState);
371
+ }
372
+
373
+ // Start the game
374
+ displayScene(currentState);
375
+ </script>
376
+ </body>
377
+ </html>