Hugging Face's logo

Spaces:
humboldtd
/
my-web-kids
Running

App Files Community
humboldtd commited on
Commit
3a18421
·
verified ·
1 Parent(s): 6f2edcb

use this code and add to it make it a mega app with tons to explore and add to.{

Browse files

"stories": [
{
"title": "The Enchanted Forest",
"description": "Join Lily on her adventure through the enchanted forest.",
"events": [
{
"id": 1,
"text": "Lily finds a magical key. What does she do?",
"choices": [
{
"text": "Open the hidden door.",
"next_event": 2
},
{
"text": "Keep the key and continue exploring.",
"next_event": 3
}
]
},
{
"id": 2,
"text": "Behind the door, Lily finds a friendly dragon. What does she do?",
"choices": [
{
"text": "Ask the dragon for help.",
"next_event": 4
},
{
"text": "Run away quickly.",
"next_event": 5
}
]
},
{
"id": 3,
"text": "Lily continues exploring and finds a hidden treasure. What does she do?",
"choices": [
{
"text": "Take the treasure and leave.",
"next_event": 6
},
{
"text": "Leave the treasure and keep exploring.",
"next_event": 7
}
]
}
// Add more events as needed
]
},
{
"title": "The Mystery of the Old Mansion",
"description": "Solve the mystery of the old mansion with Detective Max.",
"events": [
{
"id": 1,
"text": "Max finds a mysterious note. What does he do?",
"choices": [
{
"text": "Follow the clues in the note.",
"next_event": 2
},
{
"text": "Ignore the note and explore the mansion.",
"next_event": 3
}
]
}
// Add more events as needed
]
}
// Add more stories as needed
]
} - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +814 -18
  3. prompts.txt +75 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Web Kids
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: my-web-kids
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,815 @@
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>StoryVerse - Interactive Story Adventures</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');
16
+
17
+ :root {
18
+ --primary-gold: #FFD700;
19
+ --primary-purple: #6B46C1;
20
+ --dark-bg: #0F0F23;
21
+ --card-bg: rgba(255, 255, 255, 0.05);
22
+ }
23
+
24
+ .font-cinzel { font-family: 'Cinzel', serif; }
25
+ .font-inter { font-family: 'Inter', sans-serif; }
26
+
27
+ .story-card {
28
+ background: var(--card-bg);
29
+ backdrop-filter: blur(10px);
30
+ border: 1px solid rgba(255, 255, 255, 0.1);
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .story-card:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 20px 40px rgba(107, 70, 193, 0.3);
37
+ }
38
+
39
+ .choice-btn {
40
+ background: linear-gradient(135deg, var(--primary-purple), #8B5CF6);
41
+ transition: all 0.3s ease;
42
+ position: relative;
43
+ overflow: hidden;
44
+ }
45
+
46
+ .choice-btn:before {
47
+ content: '';
48
+ position: absolute;
49
+ top: 0;
50
+ left: -100%;
51
+ width: 100%;
52
+ height: 100%;
53
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
54
+ transition: left 0.5s;
55
+ }
56
+
57
+ .choice-btn:hover:before {
58
+ left: 100%;
59
+ }
60
+
61
+ .gradient-text {
62
+ background: linear-gradient(135deg, var(--primary-gold), var(--primary-purple));
63
+ -webkit-background-clip: text;
64
+ -webkit-text-fill-color: transparent;
65
+ background-clip: text;
66
+ }
67
+
68
+ .floating {
69
+ animation: float 6s ease-in-out infinite;
70
+ }
71
+
72
+ @keyframes float {
73
+ 0%, 100% { transform: translateY(0px); }
74
+ 50% { transform: translateY(-20px); }
75
+ }
76
+
77
+ .vanta-canvas {
78
+ position: absolute;
79
+ top: 0;
80
+ left: 0;
81
+ width: 100%;
82
+ height: 100%;
83
+ z-index: -1;
84
+ }
85
+
86
+ .story-progress {
87
+ background: linear-gradient(90deg, var(--primary-purple), var(--primary-gold));
88
+ height: 4px;
89
+ transition: width 0.5s ease;
90
+ }
91
+
92
+ .achievement-badge {
93
+ background: rgba(255, 215, 0, 0.1);
94
+ border: 2px solid var(--primary-gold);
95
+ color: var(--primary-gold);
96
+ }
97
+
98
+ .modal-backdrop {
99
+ backdrop-filter: blur(5px);
100
+ background: rgba(0, 0, 0, 0.8);
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="bg-gray-900 text-white font-inter">
105
+ <!-- Vanta Background -->
106
+ <div id="vanta-bg" class="fixed inset-0"></div>
107
+
108
+ <!-- Navigation -->
109
+ <nav class="relative z-50 bg-black bg-opacity-50 backdrop-blur-md sticky top-0">
110
+ <div class="container mx-auto px-4 py-4">
111
+ <div class="flex justify-between items-center">
112
+ <div class="flex items-center space-x-2">
113
+ <i data-feather="book-open" class="w-8 h-8 text-yellow-400"></i>
114
+ <h1 class="text-2xl font-cinzel font-bold gradient-text">StoryVerse</h1>
115
+ </div>
116
+ <div class="flex items-center space-x-6">
117
+ <button id="libraryBtn" class="flex items-center space-x-2 hover:text-yellow-400 transition">
118
+ <i data-feather="library"></i>
119
+ <span>Library</span>
120
+ </button>
121
+ <button id="achievementsBtn" class="flex items-center space-x-2 hover:text-yellow-400 transition">
122
+ <i data-feather="award"></i>
123
+ <span>Achievements</span>
124
+ </button>
125
+ <button id="profileBtn" class="flex items-center space-x-2 hover:text-yellow-400 transition">
126
+ <i data-feather="user"></i>
127
+ <span>Profile</span>
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </nav>
133
+
134
+ <!-- Main Content -->
135
+ <main class="relative z-10 container mx-auto px-4 py-12">
136
+ <!-- Hero Section -->
137
+ <section class="text-center mb-16" data-aos="fade-up">
138
+ <h2 class="text-5xl md:text-7xl font-cinzel font-bold mb-4 gradient-text floating">
139
+ Choose Your Adventure
140
+ </h2>
141
+ <p class="text-xl text-gray-300 mb-8">Immerse yourself in interactive stories where every choice shapes your destiny</p>
142
+ <div class="flex justify-center space-x-4">
143
+ <button id="startJourney" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-semibold hover:shadow-2xl transform hover:scale-105 transition">
144
+ Start Your Journey
145
+ </button>
146
+ <button id="createStory" class="px-8 py-3 border-2 border-yellow-400 rounded-full font-semibold hover:bg-yellow-400 hover:text-black transition">
147
+ Create Story
148
+ </button>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Stories Grid -->
153
+ <section id="storiesContainer" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
154
+ <!-- Stories will be dynamically loaded here -->
155
+ </section>
156
+
157
+ <!-- Story Reader Modal -->
158
+ <div id="storyReader" class="fixed inset-0 z-50 hidden">
159
+ <div class="modal-backdrop absolute inset-0"></div>
160
+ <div class="relative z-10 container mx-auto h-full flex items-center justify-center p-4">
161
+ <div class="bg-gray-800 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
162
+ <div class="p-6 border-b border-gray-700">
163
+ <div class="flex justify-between items-center">
164
+ <h3 id="currentStoryTitle" class="text-2xl font-cinzel font-bold"></h3>
165
+ <button id="closeReader" class="text-gray-400 hover:text-white">
166
+ <i data-feather="x" class="w-6 h-6"></i>
167
+ </button>
168
+ </div>
169
+ <div class="mt-4">
170
+ <div class="bg-gray-700 rounded-full h-2 overflow-hidden">
171
+ <div id="progressBar" class="story-progress" style="width: 0%"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div id="storyContent" class="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
176
+ <!-- Story content will be loaded here -->
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Achievements Modal -->
183
+ <div id="achievementsModal" class="fixed inset-0 z-50 hidden">
184
+ <div class="modal-backdrop absolute inset-0"></div>
185
+ <div class="relative z-10 container mx-auto h-full flex items-center justify-center p-4">
186
+ <div class="bg-gray-800 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
187
+ <div class="p-6 border-b border-gray-700">
188
+ <div class="flex justify-between items-center">
189
+ <h3 class="text-2xl font-cinzel font-bold">Achievements</h3>
190
+ <button id="closeAchievements" class="text-gray-400 hover:text-white">
191
+ <i data-feather="x" class="w-6 h-6"></i>
192
+ </button>
193
+ </div>
194
+ </div>
195
+ <div id="achievementsContent" class="p-6 overflow-y-auto">
196
+ <!-- Achievements will be loaded here -->
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Create Story Modal -->
203
+ <div id="createStoryModal" class="fixed inset-0 z-50 hidden">
204
+ <div class="modal-backdrop absolute inset-0"></div>
205
+ <div class="relative z-10 container mx-auto h-full flex items-center justify-center p-4">
206
+ <div class="bg-gray-800 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
207
+ <div class="p-6 border-b border-gray-700">
208
+ <div class="flex justify-between items-center">
209
+ <h3 class="text-2xl font-cinzel font-bold">Create Your Story</h3>
210
+ <button id="closeCreateStory" class="text-gray-400 hover:text-white">
211
+ <i data-feather="x" class="w-6 h-6"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ <div class="p-6 overflow-y-auto max-h-[calc(90vh-100px)]">
216
+ <form id="storyForm" class="space-y-6">
217
+ <div>
218
+ <label class="block text-sm font-medium mb-2">Story Title</label>
219
+ <input type="text" id="storyTitle" class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter your story title">
220
+ </div>
221
+ <div>
222
+ <label class="block text-sm font-medium mb-2">Description</label>
223
+ <textarea id="storyDescription" rows="3" class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Describe your story"></textarea>
224
+ </div>
225
+ <div>
226
+ <label class="block text-sm font-medium mb-2">Story Events (JSON Format)</label>
227
+ <textarea id="storyEvents" rows="10" class="w-full px-4 py-2 bg-gray-700 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder='[{"id": 1, "text": "Your story text...", "choices": [{"text": "Choice 1", "next_event": 2}]}]'></textarea>
228
+ </div>
229
+ <button type="submit" class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:shadow-2xl transition">
230
+ Create Story
231
+ </button>
232
+ </form>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </main>
238
+
239
+ <!-- Footer -->
240
+ <footer class="relative z-10 bg-black bg-opacity-50 backdrop-blur-md mt-16">
241
+ <div class="container mx-auto px-4 py-8">
242
+ <div class="text-center">
243
+ <p class="text-gray-400">&copy; 2024 StoryVerse. Crafted with magic and code.</p>
244
+ </div>
245
+ </div>
246
+ </footer>
247
+
248
+ <script>
249
+ // Vanta.js Background
250
+ VANTA.NET({
251
+ el: "#vanta-bg",
252
+ mouseControls: true,
253
+ touchControls: true,
254
+ gyroControls: false,
255
+ minHeight: 200.00,
256
+ minWidth: 200.00,
257
+ scale: 1.00,
258
+ scaleMobile: 1.00,
259
+ color: 0x6b46c1,
260
+ backgroundColor: 0x0f0f23,
261
+ points: 8.00,
262
+ maxDistance: 25.00,
263
+ spacing: 20.00
264
+ });
265
+
266
+ // Story Data
267
+ const storiesData = {
268
+ "stories": [
269
+ {
270
+ "title": "The Enchanted Forest",
271
+ "description": "Join Lily on her adventure through the enchanted forest.",
272
+ "image": "http://static.photos/nature/640x360/42",
273
+ "events": [
274
+ {
275
+ "id": 1,
276
+ "text": "Lily finds a magical key glowing softly in the moonlight. What does she do?",
277
+ "choices": [
278
+ {
279
+ "text": "Open the hidden door behind the ancient oak.",
280
+ "next_event": 2
281
+ },
282
+ {
283
+ "text": "Keep the key and continue exploring the dark path.",
284
+ "next_event": 3
285
+ }
286
+ ]
287
+ },
288
+ {
289
+ "id": 2,
290
+ "text": "Behind the door, Lily discovers a friendly dragon named Ember. The dragon offers to grant her one wish. What does she do?",
291
+ "choices": [
292
+ {
293
+ "text": "Ask the dragon to help find her lost brother.",
294
+ "next_event": 4
295
+ },
296
+ {
297
+ "text": "Politely decline and ask to be friends instead.",
298
+ "next_event": 5
299
+ }
300
+ ]
301
+ },
302
+ {
303
+ "id": 3,
304
+ "text": "Continuing down the path, Lily stumbles upon a hidden treasure chest filled with ancient coins. What does she do?",
305
+ "choices": [
306
+ {
307
+ "text": "Take just one coin as a memory and leave the rest.",
308
+ "next_event": 6
309
+ },
310
+ {
311
+ "text": "Leave it untouched, sensing it might be cursed.",
312
+ "next_event": 7
313
+ }
314
+ ]
315
+ },
316
+ {
317
+ "id": 4,
318
+ "text": "Ember the dragon flies Lily across the kingdom. They spot her brother in a distant tower. The dragon offers to help rescue him. What now?",
319
+ "choices": [
320
+ {
321
+ "text": "Accept the dragon's help and plan a rescue.",
322
+ "next_event": 8
323
+ },
324
+ {
325
+ "text": "Thank the dragon and say she must do this alone.",
326
+ "next_event": 9
327
+ }
328
+ ]
329
+ },
330
+ {
331
+ "id": 5,
332
+ "text": "Lily and Ember become best friends. The dragon teaches her ancient magic and they explore the world together. The End.",
333
+ "is_ending": true,
334
+ "achievement": "Dragon's Friend"
335
+ },
336
+ {
337
+ "id": 6,
338
+ "text": "The single coin brings Lily good fortune. She finds her way home safely, forever remembering her adventure. The End.",
339
+ "is_ending": true,
340
+ "achievement": "Fortune's Favorite"
341
+ },
342
+ {
343
+ "id": 7,
344
+ "text": "By showing respect for the forest's mysteries, the trees themselves guide Lily home. She becomes a guardian of the woods. The End.",
345
+ "is_ending": true,
346
+ "achievement": "Forest Guardian"
347
+ },
348
+ {
349
+ "id": 8,
350
+ "text": "Together, Lily and Ember rescue her brother. The three become inseparable, protecting the kingdom from evil. The End.",
351
+ "is_ending": true,
352
+ "achievement": "Heroic Trio"
353
+ },
354
+ {
355
+ "id": 9,
356
+ "text": "Lily's courage inspires her to face challenges alone. She becomes a legendary hero, admired by all. The End.",
357
+ "is_ending": true,
358
+ "achievement": "Solo Hero"
359
+ }
360
+ ]
361
+ },
362
+ {
363
+ "title": "The Mystery of the Old Mansion",
364
+ "description": "Solve the mystery of the old mansion with Detective Max.",
365
+ "image": "http://static.photos/vintage/640x360/13",
366
+ "events": [
367
+ {
368
+ "id": 1,
369
+ "text": "Detective Max finds a mysterious note hidden in the mansion's library. The paper is old and mentions a secret room. What does he do?",
370
+ "choices": [
371
+ {
372
+ "text": "Follow the clues in the note to find the secret room.",
373
+ "next_event": 2
374
+ },
375
+ {
376
+ "text": "Ignore the note and explore the mansion's basement first.",
377
+ "next_event": 3
378
+ }
379
+ ]
380
+ },
381
+ {
382
+ "id": 2,
383
+ "text": "The note leads Max to a hidden room behind the bookshelf. Inside, he finds old documents about the mansion's original owner. What next?",
384
+ "choices": [
385
+ {
386
+ "text": "Examine the documents carefully for clues.",
387
+ "next_event": 4
388
+ },
389
+ {
390
+ "text": "Search the room for hidden compartments.",
391
+ "next_event": 5
392
+ }
393
+ ]
394
+ },
395
+ {
396
+ "id": 3,
397
+ "text": "In the basement, Max discovers strange symbols on the walls. They seem to be part of an ancient ritual. What does he do?",
398
+ "choices": [
399
+ {
400
+ "text": "Document the symbols and research them.",
401
+ "next_event": 6
402
+ },
403
+ {
404
+ "text": "Follow the symbols to see where they lead.",
405
+ "next_event": 7
406
+ }
407
+ ]
408
+ },
409
+ {
410
+ "id": 4,
411
+ "text": "The documents reveal the mansion was built on ancient burial grounds. The owner's ghost might be trapped. What action?",
412
+ "choices": [
413
+ {
414
+ "text": "Perform a ritual to free the ghost.",
415
+ "next_event": 8
416
+ },
417
+ {
418
+ "text": "Leave the mansion and seal it forever.",
419
+ "next_event": 9
420
+ }
421
+ ]
422
+ },
423
+ {
424
+ "id": 5,
425
+ "text": "Max finds a hidden safe with the original deed. It reveals a shocking truth about the mansion's dark past. The End.",
426
+ "is_ending": true,
427
+ "achievement": "Truth Seeker"
428
+ },
429
+ {
430
+ "id": 6,
431
+ "text": "Research shows the symbols are protective wards. Max restores them, cleansing the mansion of evil. The End.",
432
+ "is_ending": true,
433
+ "achievement": "Protector"
434
+ },
435
+ {
436
+ "id": 7,
437
+ "text": "Following the symbols leads Max to a hidden chamber with treasure. He becomes rich but keeps the mansion's secret. The End.",
438
+ "is_ending": true,
439
+ "achievement": "Treasure Hunter"
440
+ },
441
+ {
442
+ "id": 8,
443
+ "text": "The ritual succeeds! The grateful ghost reveals a hidden treasure as thanks. Max solves the mystery and helps the spirit rest. The End.",
444
+ "is_ending": true,
445
+ "achievement": "Ghost Whisperer"
446
+ },
447
+ {
448
+ "id": 9,
449
+ "text": "Max seals the mansion, protecting future generations from its dark influence. His caution saves many lives. The End.",
450
+ "is_ending": true,
451
+ "achievement": "Guardian of Safety"
452
+ }
453
+ ]
454
+ },
455
+ {
456
+ "title": "Space Explorer's Dilemma",
457
+ "description": "Navigate through space and make critical decisions as Captain Sarah.",
458
+ "image": "http://static.photos/technology/640x360/88",
459
+ "events": [
460
+ {
461
+ "id": 1,
462
+ "text": "Captain Sarah receives a distress signal from a nearby planet. The signal is weak but urgent. What action?",
463
+ "choices": [
464
+ {
465
+ "text": "Change course to investigate immediately.",
466
+ "next_event": 2
467
+ },
468
+ {
469
+ "text": "Continue the mission and report it to command.",
470
+ "next_event": 3
471
+ }
472
+ ]
473
+ },
474
+ {
475
+ "id": 2,
476
+ "text": "On the planet, Sarah finds an abandoned alien colony with advanced technology. What should she do?",
477
+ "choices": [
478
+ {
479
+ "text": "Study the technology and document findings.",
480
+ "next_event": 4
481
+ },
482
+ {
483
+ "text": "Leave immediately and mark the planet as dangerous.",
484
+ "next_event": 5
485
+ }
486
+ ]
487
+ },
488
+ {
489
+ "id": 3,
490
+ "text": "By following protocol, Sarah's crew remains safe but the distress signal stops. She feels guilty. What now?",
491
+ "choices": [
492
+ {
493
+ "text": "Return to investigate despite orders.",
494
+ "next_event": 6
495
+ },
496
+ {
497
+ "text": "Follow orders and continue the mission.",
498
+ "next_event": 7
499
+ }
500
+ ]
501
+ },
502
+ {
503
+ "id": 4,
504
+ "text": "The technology reveals a way to travel faster than light. Sarah must decide whether to share this discovery. What choice?",
505
+ "choices": [
506
+ {
507
+ "text": "Share it with all of humanity.",
508
+ "next_event": 8
509
+ },
510
+ {
511
+ "text": "Keep it secret to prevent misuse.",
512
+ "next_event": 9
513
+ }
514
+ ]
515
+ },
516
+ {
517
+ "id": 5,
518
+ "text": "Sarah's caution saves her crew from an alien virus. She returns home a hero for making the right choice. The End.",
519
+ "is_ending": true,
520
+ "achievement": "Cautious Leader"
521
+ },
522
+ {
523
+ "id": 6,
524
+ "text": "Returning against orders, Sarah finds survivors and becomes a legend for her compassion. The End.",
525
+ "is_ending": true,
526
+ "achievement": "Compassionate Captain"
527
+ },
528
+ {
529
+ "id": 7,
530
+ "text": "Following protocol earns Sarah a promotion, but she always wonders what might have been. The End.",
531
+ "is_ending": true,
532
+ "achievement": "Protocol Follower"
533
+ },
534
+ {
535
+ "id": 8,
536
+ "text": "Sharing the technology revolutionizes space travel. Sarah becomes famous but faces ethical dilemmas. The End.",
537
+ "is_ending": true,
538
+ "achievement": "Revolutionary"
539
+ },
540
+ {
541
+ "id": 9,
542
+ "text": "Keeping the secret, Sarah ensures it's used responsibly. She becomes a guardian of advanced knowledge. The End.",
543
+ "is_ending": true,
544
+ "achievement": "Secret Keeper"
545
+ }
546
+ ]
547
+ }
548
+ ]
549
+ };
550
+
551
+ // User Progress
552
+ let userProgress = {
553
+ currentStory: null,
554
+ currentEvent: null,
555
+ achievements: [],
556
+ completedStories: [],
557
+ storyHistory: []
558
+ };
559
+
560
+ // Load user progress from localStorage
561
+ function loadUserProgress() {
562
+ const saved = localStorage.getItem('storyVerseProgress');
563
+ if (saved) {
564
+ userProgress = JSON.parse(saved);
565
+ }
566
+ }
567
+
568
+ // Save user progress to localStorage
569
+ function saveUserProgress() {
570
+ localStorage.setItem('storyVerseProgress', JSON.stringify(userProgress));
571
+ }
572
+
573
+ // Render stories
574
+ function renderStories() {
575
+ const container = document.getElementById('storiesContainer');
576
+ container.innerHTML = '';
577
+
578
+ storiesData.stories.forEach((story, index) => {
579
+ const storyCard = document.createElement('div');
580
+ storyCard.className = 'story-card rounded-xl p-6 cursor-pointer';
581
+ storyCard.setAttribute('data-aos', 'fade-up');
582
+ storyCard.setAttribute('data-aos-delay', index * 100);
583
+
584
+ const isCompleted = userProgress.completedStories.includes(story.title);
585
+
586
+ storyCard.innerHTML = `
587
+ <div class="relative mb-4">
588
+ <img src="${story.image}" alt="${story.title}" class="w-full h-48 object-cover rounded-lg">
589
+ ${isCompleted ? '<div class="absolute top-2 right-2 bg-green-500 text-white px-2 py-1 rounded-full text-xs">Completed</div>' : ''}
590
+ </div>
591
+ <h3 class="text-xl font-cinzel font-bold mb-2">${story.title}</h3>
592
+ <p class="text-gray-400 mb-4">${story.description}</p>
593
+ <div class="flex justify-between items-center">
594
+ <span class="text-sm text-yellow-400">${story.events.length} events</span>
595
+ <button class="px-4 py-2 bg-purple-600 rounded-lg hover:bg-purple-700 transition" onclick="startStory('${story.title}')">
596
+ Begin Adventure
597
+ </button>
598
+ </div>
599
+ `;
600
+
601
+ container.appendChild(storyCard);
602
+ });
603
+ }
604
+
605
+ // Start a story
606
+ function startStory(storyTitle) {
607
+ const story = storiesData.stories.find(s => s.title === storyTitle);
608
+ if (!story) return;
609
+
610
+ userProgress.currentStory = storyTitle;
611
+ userProgress.currentEvent = 1;
612
+ userProgress.storyHistory = [];
613
+
614
+ openStoryReader();
615
+ renderStoryEvent(story, 1);
616
+ updateProgressBar(0);
617
+ }
618
+
619
+ // Render story event
620
+ function renderStoryEvent(story, eventId) {
621
+ const event = story.events.find(e => e.id === eventId);
622
+ if (!event) return;
623
+
624
+ userProgress.storyHistory.push(eventId);
625
+ saveUserProgress();
626
+
627
+ const content = document.getElementById('storyContent');
628
+ const currentTitle = document.getElementById('currentStoryTitle');
629
+
630
+ currentTitle.textContent = story.title;
631
+
632
+ if (event.is_ending) {
633
+ // Handle story ending
634
+ if (event.achievement && !userProgress.achievements.includes(event.achievement)) {
635
+ userProgress.achievements.push(event.achievement);
636
+ }
637
+ if (!userProgress.completedStories.includes(story.title)) {
638
+ userProgress.completedStories.push(story.title);
639
+ }
640
+ saveUserProgress();
641
+
642
+ content.innerHTML = `
643
+ <div class="text-center">
644
+ <div class="mb-8">
645
+ <i data-feather="award" class="w-24 h-24 text-yellow-400 mx-auto mb-4"></i>
646
+ <h2 class="text-3xl font-cinzel font-bold mb-4">The End</h2>
647
+ <p class="text-xl text-gray-300 mb-6">${event.text}</p>
648
+ ${event.achievement ? `
649
+ <div class="achievement-badge inline-block px-6 py-3 rounded-full mb-6">
650
+ <i data-feather="star" class="inline w-5 h-5 mr-2"></i>
651
+ Achievement Unlocked: ${event.achievement}
652
+ </div>
653
+ ` : ''}
654
+ </div>
655
+ <div class="space-y-4">
656
+ <button onclick="restartStory('${story.title}')" class="choice-btn block w-full py-3 rounded-lg font-semibold">
657
+ Play Again
658
+ </button>
659
+ <button onclick="closeStoryReader()" class="block w-full py-3 border border-gray-600 rounded-lg hover:bg-gray-700 transition">
660
+ Back to Library
661
+ </button>
662
+ </div>
663
+ </div>
664
+ `;
665
+ updateProgressBar(100);
666
+ } else {
667
+ // Regular event with choices
668
+ const progress = (userProgress.storyHistory.length / story.events.length) * 100;
669
+ updateProgressBar(progress);
670
+
671
+ content.innerHTML = `
672
+ <div class="mb-8">
673
+ <p class="text-xl leading-relaxed">${event.text}</p>
674
+ </div>
675
+ <div class="space-y-4">
676
+ ${event.choices.map(choice => `
677
+ <button onclick="makeChoice('${story.title}', ${choice.next_event})"
678
+ class="choice-btn block w-full py-4 px-6 rounded-lg font-semibold text-left hover:shadow-lg transform hover:scale-105 transition">
679
+ ${choice.text}
680
+ </button>
681
+ `).join('')}
682
+ </div>
683
+ `;
684
+ }
685
+
686
+ feather.replace();
687
+ }
688
+
689
+ // Make a choice
690
+ function makeChoice(storyTitle, nextEventId) {
691
+ const story = storiesData.stories.find(s => s.title === storyTitle);
692
+ if (!story) return;
693
+
694
+ userProgress.currentEvent = nextEventId;
695
+ renderStoryEvent(story, nextEventId);
696
+ }
697
+
698
+ // Update progress bar
699
+ function updateProgressBar(percentage) {
700
+ const progressBar = document.getElementById('progressBar');
701
+ progressBar.style.width = `${percentage}%`;
702
+ }
703
+
704
+ // Restart story
705
+ function restartStory(storyTitle) {
706
+ startStory(storyTitle);
707
+ }
708
+
709
+ // Open story reader
710
+ function openStoryReader() {
711
+ document.getElementById('storyReader').classList.remove('hidden');
712
+ }
713
+
714
+ // Close story reader
715
+ function closeStoryReader() {
716
+ document.getElementById('storyReader').classList.add('hidden');
717
+ renderStories(); // Refresh stories to show completed status
718
+ }
719
+
720
+ // Open achievements
721
+ function openAchievements() {
722
+ const modal = document.getElementById('achievementsModal');
723
+ const content = document.getElementById('achievementsContent');
724
+
725
+ content.innerHTML = `
726
+ <div class="grid md:grid-cols-2 gap-4">
727
+ ${userProgress.achievements.length > 0 ? userProgress.achievements.map(achievement => `
728
+ <div class="achievement-badge p-4 rounded-lg text-center">
729
+ <i data-feather="star" class="w-12 h-12 mx-auto mb-2"></i>
730
+ <h4 class="font-semibold">${achievement}</h4>
731
+ </div>
732
+ `).join('') : `
733
+ <div class="col-span-2 text-center text-gray-400">
734
+ <i data-feather="award" class="w-16 h-16 mx-auto mb-4"></i>
735
+ <p>No achievements yet. Complete stories to unlock them!</p>
736
+ </div>
737
+ `}
738
+ </div>
739
+ <div class="mt-8 text-center">
740
+ <p class="text-gray-400">Completed Stories: ${userProgress.completedStories.length}</p>
741
+ <p class="text-gray-400">Total Achievements: ${userProgress.achievements.length}</p>
742
+ </div>
743
+ `;
744
+
745
+ modal.classList.remove('hidden');
746
+ feather.replace();
747
+ }
748
+
749
+ // Close achievements
750
+ function closeAchievements() {
751
+ document.getElementById('achievementsModal').classList.add('hidden');
752
+ }
753
+
754
+ // Open create story
755
+ function openCreateStory() {
756
+ document.getElementById('createStoryModal').classList.remove('hidden');
757
+ }
758
+
759
+ // Close create story
760
+ function closeCreateStory() {
761
+ document.getElementById('createStoryModal').classList.add('hidden');
762
+ }
763
+
764
+ // Create new story
765
+ document.getElementById('storyForm').addEventListener('submit', function(e) {
766
+ e.preventDefault();
767
+
768
+ const title = document.getElementById('storyTitle').value;
769
+ const description = document.getElementById('storyDescription').value;
770
+ const eventsText = document.getElementById('storyEvents').value;
771
+
772
+ try {
773
+ const events = JSON.parse(eventsText);
774
+ const newStory = {
775
+ title: title,
776
+ description: description,
777
+ image: `http://static.photos/abstract/640x360/${Math.floor(Math.random() * 100)}`,
778
+ events: events
779
+ };
780
+
781
+ storiesData.stories.push(newStory);
782
+ renderStories();
783
+ closeCreateStory();
784
+
785
+ // Reset form
786
+ document.getElementById('storyTitle').value = '';
787
+ document.getElementById('storyDescription').value = '';
788
+ document.getElementById('storyEvents').value = '';
789
+
790
+ alert('Story created successfully!');
791
+ } catch (error) {
792
+ alert('Invalid JSON format. Please check your events structure.');
793
+ }
794
+ });
795
+
796
+ // Event listeners
797
+ document.getElementById('closeReader').addEventListener('click', closeStoryReader);
798
+ document.getElementById('achievementsBtn').addEventListener('click', openAchievements);
799
+ document.getElementById('closeAchievements').addEventListener('click', closeAchievements);
800
+ document.getElementById('createStory').addEventListener('click', openCreateStory);
801
+ document.getElementById('closeCreateStory').addEventListener('click', closeCreateStory);
802
+ document.getElementById('startJourney').addEventListener('click', () => {
803
+ document.getElementById('storiesContainer').scrollIntoView({ behavior: 'smooth' });
804
+ });
805
+
806
+ // Initialize
807
+ document.addEventListener('DOMContentLoaded', function() {
808
+ AOS.init();
809
+ feather.replace();
810
+ loadUserProgress();
811
+ renderStories();
812
+ });
813
+ </script>
814
+ </body>
815
  </html>
prompts.txt ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ use this code and add to it make it a mega app with tons to explore and add to.{
2
+ "stories": [
3
+ {
4
+ "title": "The Enchanted Forest",
5
+ "description": "Join Lily on her adventure through the enchanted forest.",
6
+ "events": [
7
+ {
8
+ "id": 1,
9
+ "text": "Lily finds a magical key. What does she do?",
10
+ "choices": [
11
+ {
12
+ "text": "Open the hidden door.",
13
+ "next_event": 2
14
+ },
15
+ {
16
+ "text": "Keep the key and continue exploring.",
17
+ "next_event": 3
18
+ }
19
+ ]
20
+ },
21
+ {
22
+ "id": 2,
23
+ "text": "Behind the door, Lily finds a friendly dragon. What does she do?",
24
+ "choices": [
25
+ {
26
+ "text": "Ask the dragon for help.",
27
+ "next_event": 4
28
+ },
29
+ {
30
+ "text": "Run away quickly.",
31
+ "next_event": 5
32
+ }
33
+ ]
34
+ },
35
+ {
36
+ "id": 3,
37
+ "text": "Lily continues exploring and finds a hidden treasure. What does she do?",
38
+ "choices": [
39
+ {
40
+ "text": "Take the treasure and leave.",
41
+ "next_event": 6
42
+ },
43
+ {
44
+ "text": "Leave the treasure and keep exploring.",
45
+ "next_event": 7
46
+ }
47
+ ]
48
+ }
49
+ // Add more events as needed
50
+ ]
51
+ },
52
+ {
53
+ "title": "The Mystery of the Old Mansion",
54
+ "description": "Solve the mystery of the old mansion with Detective Max.",
55
+ "events": [
56
+ {
57
+ "id": 1,
58
+ "text": "Max finds a mysterious note. What does he do?",
59
+ "choices": [
60
+ {
61
+ "text": "Follow the clues in the note.",
62
+ "next_event": 2
63
+ },
64
+ {
65
+ "text": "Ignore the note and explore the mansion.",
66
+ "next_event": 3
67
+ }
68
+ ]
69
+ }
70
+ // Add more events as needed
71
+ ]
72
+ }
73
+ // Add more stories as needed
74
+ ]
75
+ }