Hugging Face's logo

Spaces:
aryansrk
/
studies
Running

App Files Community
aryansrk commited on
Commit
4ce0fb5
·
verified ·
1 Parent(s): a24e9df

Generate a single-page, slider-style website with 11 visual sections representing a gamified educational journey titled: 🎮 "Time Travelers: The Mesopotamian Mission" 🧠 Website Goal: To explain the Mesopotamian Civilisation to 5th-grade students in a fun, story-based, and gamified style using strong visuals, engaging text, and interactive layout. 🎯 Design Instructions: - Each of the 11 sections (slides) should appear like a **game level** or **mission** - Use **bright, child-friendly illustrations**, icons, and maps - Background: Ancient parchment style, or stone-textured backdrop to give ancient vibes - Each section must include a **heading, image/graphic, and short paragraph** from the provided script - Add basic transitions between sections like a slideshow --- 🧩 SLIDES STRUCTURE: 📍 **Slide 1: Welcome Slide** - Title: “Time Travelers: The Mesopotamian Mission” - Subtitle: "Learn history like a game!" - Visuals: Cartoon-style time machine, ancient Mesopotamia map, cheerful kids in explorer outfits 📍 **Slide 2: Level 1 – What is a Civilisation?** - Visuals: Caveman evolving to city builder, scrolls, huts to buildings - Text: Explain how civilisation started when people did more than just survive 📍 **Slide 3: Level 2 – Starter Pack of a Civilisation** - Visuals: Icons of cities, farming, trade, art, language, tech, government - Text: 8 key features of every civilisation 📍 **Slide 4: Level 3 – Map Unlock: Mesopotamia** - Visuals: Map showing Tigris & Euphrates, modern-day Iraq, zones like Sumer & Babylon - Text: "Land between two rivers", intro of Sumer, Akkad, Assyria 📍 **Slide 5: Level 4 – Know Your Squad (Social Life)** - Visuals: 3 layers of people – kings & priests, workers & traders, slaves - Text: Describe family life, school, and rights of women 📍 **Slide 6: Level 5 – City Builder Mode** - Visuals: Ancient cities like Ur, Uruk, Ziggurat in layers, outer town, palace - Text: Town planning, city-states, sacred areas 📍 **Slide 7: Level 6 – Gods, Temples, and Beliefs** - Visuals: Ziggurats, statues of gods like Marduk, starry sky, burials with items - Text: Mesopotamians believed in many gods and afterlife 📍 **Slide 8: Level 7 – Occupation Craft** - Visuals: Farmers in fields, potters using wheel, traders on boats - Text: Farming, pottery, animal domestication, trade with India 📍 **Slide 9: Level 8 – Art & Architecture** - Visuals: Hanging Gardens of Babylon, domes, vaults, columns - Text: Mesopotamian construction style and purpose of Hanging Gardens 📍 **Slide 10: Level 9 – Achievement Unlocked** - Visuals: Cuneiform on clay tablets, Henry Rawlinson decoding, Epic of Gilgamesh hero image - Text: Cuneiform script, world’s first library, story writing 📍 **Slide 11: Level 10 – Law & Order Time** - Visuals: King Hammurabi, giant stone with laws carved, temple of Marduk - Text: Hammurabi’s 282 laws – the first legal code 📍 **Slide 12: Level 11 – The Final Level: Decline** - Visuals: Destroyed Nineveh, dried river, people migrating - Text: Decline due to natural changes, invasions, and river shift --- 🎨 Visual Style Notes: - Child-friendly, vibrant vector art (not dark) - Keep fonts readable and playful - Add slide number and fun level icons (e.g., stars, badges) 📲 Output Format: - Single scrolling web page with slider UI - Or exportable slideshow in landscape format - Suitable for use on web, mobile, or classroom smartboard --- 💡 Add footer on each slide: "Designed for young explorers by Aryan's Ed-Tech Mission 🚀" - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +795 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Studies
3
- emoji: 🏃
4
- colorFrom: red
5
  colorTo: red
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: studies
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: red
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,795 @@
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>Time Travelers: The Mesopotamian Mission</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Nunito', sans-serif;
14
+ background-color: #f5f0e4;
15
+ overflow-x: hidden;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ .title-font {
20
+ font-family: 'Fredoka One', cursive;
21
+ }
22
+
23
+ .slide {
24
+ width: 100vw;
25
+ height: 100vh;
26
+ background-image: url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg');
27
+ background-size: cover;
28
+ background-position: center;
29
+ position: relative;
30
+ overflow: hidden;
31
+ transition: all 0.5s ease;
32
+ }
33
+
34
+ .slide-content {
35
+ background-color: rgba(255, 255, 255, 0.85);
36
+ border-radius: 20px;
37
+ border: 8px solid #e8c887;
38
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
39
+ }
40
+
41
+ .parchment-bg {
42
+ background-image: url('https://www.transparenttextures.com/patterns/rice-paper.png');
43
+ background-color: #f3e7c8;
44
+ }
45
+
46
+ .level-badge {
47
+ width: 80px;
48
+ height: 80px;
49
+ border-radius: 50%;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ font-weight: bold;
54
+ position: absolute;
55
+ top: 20px;
56
+ right: 20px;
57
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
58
+ }
59
+
60
+ .nav-dot {
61
+ width: 15px;
62
+ height: 15px;
63
+ border-radius: 50%;
64
+ border: 2px solid #4a5568;
65
+ cursor: pointer;
66
+ transition: all 0.3s ease;
67
+ }
68
+
69
+ .nav-dot.active {
70
+ background-color: #4a5568;
71
+ transform: scale(1.2);
72
+ }
73
+
74
+ .character {
75
+ position: absolute;
76
+ bottom: 20px;
77
+ right: 20px;
78
+ width: 150px;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .character:hover {
83
+ transform: scale(1.1) rotate(-5deg);
84
+ }
85
+
86
+ @media (max-width: 768px) {
87
+ .slide-content {
88
+ margin: 20px;
89
+ padding: 15px !important;
90
+ }
91
+
92
+ .character {
93
+ width: 100px;
94
+ }
95
+
96
+ .level-badge {
97
+ width: 60px;
98
+ height: 60px;
99
+ font-size: 1.5rem;
100
+ }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="relative">
105
+ <!-- Navigation Dots -->
106
+ <div class="fixed right-5 top-1/2 transform -translate-y-1/2 z-50 flex flex-col space-y-3">
107
+ <div class="nav-dot active" data-slide="0"></div>
108
+ <div class="nav-dot" data-slide="1"></div>
109
+ <div class="nav-dot" data-slide="2"></div>
110
+ <div class="nav-dot" data-slide="3"></div>
111
+ <div class="nav-dot" data-slide="4"></div>
112
+ <div class="nav-dot" data-slide="5"></div>
113
+ <div class="nav-dot" data-slide="6"></div>
114
+ <div class="nav-dot" data-slide="7"></div>
115
+ <div class="nav-dot" data-slide="8"></div>
116
+ <div class="nav-dot" data-slide="9"></div>
117
+ <div class="nav-dot" data-slide="10"></div>
118
+ </div>
119
+
120
+ <!-- Slide 1: Welcome Slide -->
121
+ <div class="slide flex items-center justify-center">
122
+ <div class="slide-content p-10 max-w-4xl mx-auto text-center parchment-bg">
123
+ <h1 class="title-font text-5xl md:text-6xl text-yellow-700 mb-4">🎮 Time Travelers: <br>The Mesopotamian Mission</h1>
124
+ <h2 class="text-2xl md:text-3xl text-blue-600 mb-8">Learn history like a game!</h2>
125
+
126
+ <div class="flex justify-center mb-8">
127
+ <img src="https://cdn-icons-png.flaticon.com/512/2933/2933245.png" alt="Time Machine" class="w-32 h-32 animate-bounce">
128
+ </div>
129
+
130
+ <p class="text-lg mb-8 text-gray-800">
131
+ Ready for an epic adventure through time? Pack your explorer's kit as we journey back to one of the world's first civilizations - Mesopotamia!
132
+ </p>
133
+
134
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105">
135
+ Start Mission!
136
+ </button>
137
+
138
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
139
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
140
+ </div>
141
+ </div>
142
+
143
+ <div class="level-badge bg-yellow-400 text-white text-3xl">
144
+ <i class="fas fa-flag"></i>
145
+ </div>
146
+
147
+ <img src="https://cdn-icons-png.flaticon.com/512/1864/1864593.png" alt="Explorer Kids" class="character">
148
+ </div>
149
+
150
+ <!-- Slide 2: Level 1 – What is a Civilisation? -->
151
+ <div class="slide flex items-center justify-center">
152
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
153
+ <div class="flex items-center mb-6">
154
+ <span class="bg-blue-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 1</span>
155
+ <h2 class="title-font text-3xl text-blue-700">What is a Civilisation?</h2>
156
+ </div>
157
+
158
+ <div class="flex flex-col md:flex-row gap-6">
159
+ <div class="md:w-1/2">
160
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474083.png" alt="Evolution of civilization" class="w-full h-auto rounded-lg">
161
+ </div>
162
+ <div class="md:w-1/2">
163
+ <p class="text-lg text-gray-800 mb-4">
164
+ A civilization happens when people start doing more than just surviving! Instead of hunting and gathering, they build cities, create art, develop writing, and make laws.
165
+ </p>
166
+ <div class="bg-blue-100 p-4 rounded-lg border-l-4 border-blue-500">
167
+ <p class="text-blue-800">
168
+ <span class="font-bold">Fun Fact:</span> Mesopotamia was one of the world's FIRST civilizations, starting around 3500 BCE!
169
+ </p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
175
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
176
+ </div>
177
+ </div>
178
+
179
+ <div class="level-badge bg-blue-500 text-white text-3xl">
180
+ 1
181
+ </div>
182
+
183
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474005.png" alt="Caveman" class="character">
184
+ </div>
185
+
186
+ <!-- Slide 3: Level 2 – Starter Pack of a Civilisation -->
187
+ <div class="slide flex items-center justify-center">
188
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
189
+ <div class="flex items-center mb-6">
190
+ <span class="bg-green-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 2</span>
191
+ <h2 class="title-font text-3xl text-green-700">Starter Pack of a Civilisation</h2>
192
+ </div>
193
+
194
+ <p class="text-lg text-gray-800 mb-6">Every great civilization needs these 8 key features:</p>
195
+
196
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
197
+ <div class="bg-green-100 p-4 rounded-lg text-center">
198
+ <i class="fas fa-city text-3xl text-green-600 mb-2"></i>
199
+ <p class="font-bold">Cities</p>
200
+ </div>
201
+ <div class="bg-green-100 p-4 rounded-lg text-center">
202
+ <i class="fas fa-tractor text-3xl text-green-600 mb-2"></i>
203
+ <p class="font-bold">Farming</p>
204
+ </div>
205
+ <div class="bg-green-100 p-4 rounded-lg text-center">
206
+ <i class="fas fa-handshake text-3xl text-green-600 mb-2"></i>
207
+ <p class="font-bold">Trade</p>
208
+ </div>
209
+ <div class="bg-green-100 p-4 rounded-lg text-center">
210
+ <i class="fas fa-paint-brush text-3xl text-green-600 mb-2"></i>
211
+ <p class="font-bold">Art</p>
212
+ </div>
213
+ <div class="bg-green-100 p-4 rounded-lg text-center">
214
+ <i class="fas fa-language text-3xl text-green-600 mb-2"></i>
215
+ <p class="font-bold">Writing</p>
216
+ </div>
217
+ <div class="bg-green-100 p-4 rounded-lg text-center">
218
+ <i class="fas fa-microchip text-3xl text-green-600 mb-2"></i>
219
+ <p class="font-bold">Technology</p>
220
+ </div>
221
+ <div class="bg-green-100 p-4 rounded-lg text-center">
222
+ <i class="fas fa-landmark text-3xl text-green-600 mb-2"></i>
223
+ <p class="font-bold">Government</p>
224
+ </div>
225
+ <div class="bg-green-100 p-4 rounded-lg text-center">
226
+ <i class="fas fa-church text-3xl text-green-600 mb-2"></i>
227
+ <p class="font-bold">Religion</p>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="bg-yellow-100 p-4 rounded-lg">
232
+ <p class="text-yellow-800">
233
+ <span class="font-bold">Mission:</span> Can you spot all these features in Mesopotamia as we explore?
234
+ </p>
235
+ </div>
236
+
237
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
238
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
239
+ </div>
240
+ </div>
241
+
242
+ <div class="level-badge bg-green-500 text-white text-3xl">
243
+ 2
244
+ </div>
245
+
246
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474087.png" alt="Builder" class="character">
247
+ </div>
248
+
249
+ <!-- Slide 4: Level 3 – Map Unlock: Mesopotamia -->
250
+ <div class="slide flex items-center justify-center">
251
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
252
+ <div class="flex items-center mb-6">
253
+ <span class="bg-purple-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 3</span>
254
+ <h2 class="title-font text-3xl text-purple-700">Map Unlock: Mesopotamia</h2>
255
+ </div>
256
+
257
+ <div class="flex flex-col md:flex-row gap-6">
258
+ <div class="md:w-1/2">
259
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474095.png" alt="Mesopotamia map" class="w-full h-auto rounded-lg">
260
+ </div>
261
+ <div class="md:w-1/2">
262
+ <p class="text-lg text-gray-800 mb-4">
263
+ Mesopotamia means "land between two rivers" - the Tigris and Euphrates rivers. Today this area is mostly in Iraq. The main regions were Sumer, Akkad, Assyria, and Babylon.
264
+ </p>
265
+ <div class="bg-purple-100 p-4 rounded-lg">
266
+ <p class="text-purple-800">
267
+ <span class="font-bold">Geography Tip:</span> The rivers provided water for farming and transportation, making this a perfect place for civilization to begin!
268
+ </p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
274
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
275
+ </div>
276
+ </div>
277
+
278
+ <div class="level-badge bg-purple-500 text-white text-3xl">
279
+ 3
280
+ </div>
281
+
282
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474093.png" alt="Map explorer" class="character">
283
+ </div>
284
+
285
+ <!-- Slide 5: Level 4 – Know Your Squad (Social Life) -->
286
+ <div class="slide flex items-center justify-center">
287
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
288
+ <div class="flex items-center mb-6">
289
+ <span class="bg-red-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 4</span>
290
+ <h2 class="title-font text-3xl text-red-700">Know Your Squad (Social Life)</h2>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
294
+ <div class="bg-red-100 p-4 rounded-lg">
295
+ <div class="flex items-center mb-2">
296
+ <i class="fas fa-crown text-2xl text-red-600 mr-2"></i>
297
+ <h3 class="font-bold">Kings & Priests</h3>
298
+ </div>
299
+ <p class="text-sm">The rulers and religious leaders at the top</p>
300
+ </div>
301
+ <div class="bg-yellow-100 p-4 rounded-lg">
302
+ <div class="flex items-center mb-2">
303
+ <i class="fas fa-hammer text-2xl text-yellow-600 mr-2"></i>
304
+ <h3 class="font-bold">Workers & Traders</h3>
305
+ </div>
306
+ <p class="text-sm">Farmers, craftsmen, merchants</p>
307
+ </div>
308
+ <div class="bg-gray-200 p-4 rounded-lg">
309
+ <div class="flex items-center mb-2">
310
+ <i class="fas fa-shield-alt text-2xl text-gray-600 mr-2"></i>
311
+ <h3 class="font-bold">Slaves</h3>
312
+ </div>
313
+ <p class="text-sm">Captured in wars, had few rights</p>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="bg-white p-4 rounded-lg border-l-4 border-red-500 mb-4">
318
+ <p class="text-gray-800">
319
+ <span class="font-bold">Family Life:</span> Women could own property and run businesses! Kids went to school to learn cuneiform writing.
320
+ </p>
321
+ </div>
322
+
323
+ <div class="flex justify-center">
324
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474089.png" alt="Social classes" class="w-64 h-auto">
325
+ </div>
326
+
327
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
328
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
329
+ </div>
330
+ </div>
331
+
332
+ <div class="level-badge bg-red-500 text-white text-3xl">
333
+ 4
334
+ </div>
335
+
336
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474099.png" alt="Family" class="character">
337
+ </div>
338
+
339
+ <!-- Slide 6: Level 5 – City Builder Mode -->
340
+ <div class="slide flex items-center justify-center">
341
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
342
+ <div class="flex items-center mb-6">
343
+ <span class="bg-orange-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 5</span>
344
+ <h2 class="title-font text-3xl text-orange-700">City Builder Mode</h2>
345
+ </div>
346
+
347
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
348
+ <div class="md:w-1/2">
349
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474097.png" alt="Ancient city" class="w-full h-auto rounded-lg">
350
+ </div>
351
+ <div class="md:w-1/2">
352
+ <p class="text-lg text-gray-800 mb-4">
353
+ Mesopotamians built amazing cities like Ur and Uruk. Each city had walls for protection, a ziggurat (huge temple) at the center, and was organized with different areas for different purposes.
354
+ </p>
355
+ <div class="bg-orange-100 p-4 rounded-lg">
356
+ <p class="text-orange-800">
357
+ <span class="font-bold">City-States:</span> Each city was like its own country with its own ruler and government!
358
+ </p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="flex justify-center">
364
+ <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
365
+ <i class="fas fa-info-circle text-blue-500 text-2xl mr-2"></i>
366
+ <p class="text-sm">Ziggurats were pyramid-like temples where people worshipped gods</p>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
371
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
372
+ </div>
373
+ </div>
374
+
375
+ <div class="level-badge bg-orange-500 text-white text-3xl">
376
+ 5
377
+ </div>
378
+
379
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474085.png" alt="Builder" class="character">
380
+ </div>
381
+
382
+ <!-- Slide 7: Level 6 – Gods, Temples, and Beliefs -->
383
+ <div class="slide flex items-center justify-center">
384
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
385
+ <div class="flex items-center mb-6">
386
+ <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 6</span>
387
+ <h2 class="title-font text-3xl text-indigo-700">Gods, Temples, and Beliefs</h2>
388
+ </div>
389
+
390
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
391
+ <div class="md:w-1/2">
392
+ <div class="grid grid-cols-2 gap-4 mb-4">
393
+ <div class="bg-indigo-100 p-3 rounded-lg text-center">
394
+ <i class="fas fa-star text-2xl text-indigo-600 mb-2"></i>
395
+ <p class="font-bold text-sm">Many Gods</p>
396
+ </div>
397
+ <div class="bg-indigo-100 p-3 rounded-lg text-center">
398
+ <i class="fas fa-mountain text-2xl text-indigo-600 mb-2"></i>
399
+ <p class="font-bold text-sm">Ziggurats</p>
400
+ </div>
401
+ <div class="bg-indigo-100 p-3 rounded-lg text-center">
402
+ <i class="fas fa-cloud-sun text-2xl text-indigo-600 mb-2"></i>
403
+ <p class="font-bold text-sm">Nature Gods</p>
404
+ </div>
405
+ <div class="bg-indigo-100 p-3 rounded-lg text-center">
406
+ <i class="fas fa-book-dead text-2xl text-indigo-600 mb-2"></i>
407
+ <p class="font-bold text-sm">Epic of Gilgamesh</p>
408
+ </div>
409
+ </div>
410
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474091.png" alt="Ziggurat" class="w-full h-auto rounded-lg">
411
+ </div>
412
+ <div class="md:w-1/2">
413
+ <p class="text-lg text-gray-800 mb-4">
414
+ Mesopotamians believed in many gods who controlled nature. Each city had its own special god. The most famous was Marduk, the god of Babylon.
415
+ </p>
416
+ <div class="bg-indigo-100 p-4 rounded-lg mb-4">
417
+ <p class="text-indigo-800">
418
+ Priests were very important because they could talk to the gods!
419
+ </p>
420
+ </div>
421
+ <p class="text-lg text-gray-800">
422
+ They believed in an afterlife where everyone went to the same dark place underground, so they buried people with their favorite things.
423
+ </p>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
428
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
429
+ </div>
430
+ </div>
431
+
432
+ <div class="level-badge bg-indigo-500 text-white text-3xl">
433
+ 6
434
+ </div>
435
+
436
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474101.png" alt="Priest" class="character">
437
+ </div>
438
+
439
+ <!-- Slide 8: Level 7 – Occupation Craft -->
440
+ <div class="slide flex items-center justify-center">
441
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
442
+ <div class="flex items-center mb-6">
443
+ <span class="bg-teal-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 7</span>
444
+ <h2 class="title-font text-3xl text-teal-700">Occupation Craft</h2>
445
+ </div>
446
+
447
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
448
+ <div class="bg-teal-100 p-4 rounded-lg text-center">
449
+ <i class="fas fa-seedling text-3xl text-teal-600 mb-2"></i>
450
+ <h3 class="font-bold">Farmers</h3>
451
+ <p class="text-sm">Grew barley, wheat, dates</p>
452
+ </div>
453
+ <div class="bg-teal-100 p-4 rounded-lg text-center">
454
+ <i class="fas fa-vial text-3xl text-teal-600 mb-2"></i>
455
+ <h3 class="font-bold">Potters</h3>
456
+ <p class="text-sm">Made pottery using wheels</p>
457
+ </div>
458
+ <div class="bg-teal-100 p-4 rounded-lg text-center">
459
+ <i class="fas fa-ship text-3xl text-teal-600 mb-2"></i>
460
+ <h3 class="font-bold">Traders</h3>
461
+ <p class="text-sm">Traded with India, Egypt</p>
462
+ </div>
463
+ <div class="bg-teal-100 p-4 rounded-lg text-center">
464
+ <i class="fas fa-horse text-3xl text-teal-600 mb-2"></i>
465
+ <h3 class="font-bold">Animal Herders</h3>
466
+ <p class="text-sm">Raised sheep, goats, cattle</p>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="flex flex-col md:flex-row gap-6">
471
+ <div class="md:w-1/2">
472
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474103.png" alt="Farmers" class="w-full h-auto rounded-lg">
473
+ </div>
474
+ <div class="md:w-1/2">
475
+ <p class="text-lg text-gray-800 mb-4">
476
+ Mesopotamians invented the wheel, the plow, and irrigation systems to help with farming. They were the first to domesticate animals!
477
+ </p>
478
+ <div class="bg-yellow-100 p-4 rounded-lg">
479
+ <p class="text-yellow-800">
480
+ <span class="font-bold">Trade Fact:</span> Mesopotamians traded grain for wood, metals, and precious stones from faraway lands.
481
+ </p>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
487
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
488
+ </div>
489
+ </div>
490
+
491
+ <div class="level-badge bg-teal-500 text-white text-3xl">
492
+ 7
493
+ </div>
494
+
495
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474105.png" alt="Farmer" class="character">
496
+ </div>
497
+
498
+ <!-- Slide 9: Level 8 – Art & Architecture -->
499
+ <div class="slide flex items-center justify-center">
500
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
501
+ <div class="flex items-center mb-6">
502
+ <span class="bg-pink-500 text-white px-4 py-2 rounded-full text-xl mr-4">Level 8</span>
503
+ <h2 class="title-font text-3xl text-pink-700">Art & Architecture</h2>
504
+ </div>
505
+
506
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
507
+ <div class="md:w-1/2">
508
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474107.png" alt="Hanging Gardens" class="w-full h-auto rounded-lg">
509
+ </div>
510
+ <div class="md:w-1/2">
511
+ <p class="text-lg text-gray-800 mb-4">
512
+ Mesopotamians built amazing structures like the Hanging Gardens of Babylon (one of the 7 Wonders of the Ancient World) and huge ziggurats. They invented arches, domes, and columns!
513
+ </p>
514
+ <div class="bg-pink-100 p-4 rounded-lg mb-4">
515
+ <p class="text-pink-800">
516
+ <span class="font-bold">Fun Fact:</span> The Hanging Gardens were probably built by King Nebuchadnezzar II for his homesick wife who missed the mountains.
517
+ </p>
518
+ </div>
519
+ <p class="text-lg text-gray-800">
520
+ They made beautiful jewelry, statues, and carved stone reliefs showing their gods and kings.
521
+ </p>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="flex justify-center">
526
+ <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
527
+ <i class="fas fa-lightbulb text-yellow-500 text-2xl mr-2"></i>
528
+ <p class="text-sm">Mesopotamian architecture influenced later Greek and Roman styles!</p>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
533
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
534
+ </div>
535
+ </div>
536
+
537
+ <div class="level-badge bg-pink-500 text-white text-3xl">
538
+ 8
539
+ </div>
540
+
541
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474109.png" alt="Artist" class="character">
542
+ </div>
543
+
544
+ <!-- Slide 10: Level 9 – Achievement Unlocked -->
545
+ <div class="slide flex items-center justify-center">
546
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
547
+ <div class="flex items-center mb-6">
548
+ <span class="bg-yellow-600 text-white px-4 py-2 rounded-full text-xl mr-4">Level 9</span>
549
+ <h2 class="title-font text-3xl text-yellow-700">Achievement Unlocked</h2>
550
+ </div>
551
+
552
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
553
+ <div class="md:w-1/2">
554
+ <div class="grid grid-cols-2 gap-4 mb-4">
555
+ <div class="bg-yellow-100 p-3 rounded-lg text-center">
556
+ <i class="fas fa-book text-2xl text-yellow-600 mb-2"></i>
557
+ <p class="font-bold text-sm">First Writing</p>
558
+ </div>
559
+ <div class="bg-yellow-100 p-3 rounded-lg text-center">
560
+ <i class="fas fa-tablet text-2xl text-yellow-600 mb-2"></i>
561
+ <p class="font-bold text-sm">Cuneiform</p>
562
+ </div>
563
+ <div class="bg-yellow-100 p-3 rounded-lg text-center">
564
+ <i class="fas fa-scroll text-2xl text-yellow-600 mb-2"></i>
565
+ <p class="font-bold text-sm">Epic of Gilgamesh</p>
566
+ </div>
567
+ <div class="bg-yellow-100 p-3 rounded-lg text-center">
568
+ <i class="fas fa-university text-2xl text-yellow-600 mb-2"></i>
569
+ <p class="font-bold text-sm">First Library</p>
570
+ </div>
571
+ </div>
572
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474111.png" alt="Clay tablet" class="w-full h-auto rounded-lg">
573
+ </div>
574
+ <div class="md:w-1/2">
575
+ <p class="text-lg text-gray-800 mb-4">
576
+ Mesopotamians invented the world's first writing system - cuneiform - pressing wedge shapes into clay tablets. They wrote the Epic of Gilgamesh, the oldest known story!
577
+ </p>
578
+ <div class="bg-blue-100 p-4 rounded-lg mb-4">
579
+ <p class="text-blue-800">
580
+ <span class="font-bold">Library Fact:</span> King Ashurbanipal created the first library in Nineveh with over 30,000 clay tablets!
581
+ </p>
582
+ </div>
583
+ <p class="text-lg text-gray-800">
584
+ Henry Rawlinson decoded cuneiform in the 1800s by studying the Behistun Inscription.
585
+ </p>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
590
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
591
+ </div>
592
+ </div>
593
+
594
+ <div class="level-badge bg-yellow-600 text-white text-3xl">
595
+ 9
596
+ </div>
597
+
598
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474113.png" alt="Scribe" class="character">
599
+ </div>
600
+
601
+ <!-- Slide 11: Level 10 – Law & Order Time -->
602
+ <div class="slide flex items-center justify-center">
603
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
604
+ <div class="flex items-center mb-6">
605
+ <span class="bg-gray-600 text-white px-4 py-2 rounded-full text-xl mr-4">Level 10</span>
606
+ <h2 class="title-font text-3xl text-gray-700">Law & Order Time</h2>
607
+ </div>
608
+
609
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
610
+ <div class="md:w-1/2">
611
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474115.png" alt="Hammurabi" class="w-full h-auto rounded-lg">
612
+ </div>
613
+ <div class="md:w-1/2">
614
+ <p class="text-lg text-gray-800 mb-4">
615
+ King Hammurabi of Babylon created one of the first written law codes with 282 rules carved on a giant stone. The laws followed "an eye for an eye" justice.
616
+ </p>
617
+ <div class="bg-gray-200 p-4 rounded-lg mb-4">
618
+ <p class="text-gray-800">
619
+ <span class="font-bold">Example Law:</span> If a builder builds a house that collapses and kills the owner, the builder shall be put to death!
620
+ </p>
621
+ </div>
622
+ <p class="text-lg text-gray-800">
623
+ Hammurabi also built beautiful temples like the one for Marduk, Babylon's chief god.
624
+ </p>
625
+ </div>
626
+ </div>
627
+
628
+ <div class="flex justify-center">
629
+ <div class="bg-white p-3 rounded-lg shadow-md flex items-center">
630
+ <i class="fas fa-balance-scale text-gray-600 text-2xl mr-2"></i>
631
+ <p class="text-sm">Hammurabi's Code treated rich and poor differently!</p>
632
+ </div>
633
+ </div>
634
+
635
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
636
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
637
+ </div>
638
+ </div>
639
+
640
+ <div class="level-badge bg-gray-600 text-white text-3xl">
641
+ 10
642
+ </div>
643
+
644
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474117.png" alt="King" class="character">
645
+ </div>
646
+
647
+ <!-- Slide 12: Level 11 – The Final Level: Decline -->
648
+ <div class="slide flex items-center justify-center">
649
+ <div class="slide-content p-8 max-w-4xl mx-auto parchment-bg">
650
+ <div class="flex items-center mb-6">
651
+ <span class="bg-red-600 text-white px-4 py-2 rounded-full text-xl mr-4">Final Level</span>
652
+ <h2 class="title-font text-3xl text-red-700">The Decline</h2>
653
+ </div>
654
+
655
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
656
+ <div class="md:w-1/2">
657
+ <div class="grid grid-cols-2 gap-4 mb-4">
658
+ <div class="bg-red-100 p-3 rounded-lg text-center">
659
+ <i class="fas fa-water text-2xl text-red-600 mb-2"></i>
660
+ <p class="font-bold text-sm">River Shift</p>
661
+ </div>
662
+ <div class="bg-red-100 p-3 rounded-lg text-center">
663
+ <i class="fas fa-sword text-2xl text-red-600 mb-2"></i>
664
+ <p class="font-bold text-sm">Invasions</p>
665
+ </div>
666
+ <div class="bg-red-100 p-3 rounded-lg text-center">
667
+ <i class="fas fa-tree text-2xl text-red-600 mb-2"></i>
668
+ <p class="font-bold text-sm">Deforestation</p>
669
+ </div>
670
+ <div class="bg-red-100 p-3 rounded-lg text-center">
671
+ <i class="fas fa-salt text-2xl text-red-600 mb-2"></i>
672
+ <p class="font-bold text-sm">Soil Salinity</p>
673
+ </div>
674
+ </div>
675
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474119.png" alt="Decline" class="w-full h-auto rounded-lg">
676
+ </div>
677
+ <div class="md:w-1/2">
678
+ <p class="text-lg text-gray-800 mb-4">
679
+ Mesopotamia declined because of invasions by Persians and others, rivers changing course, soil becoming too salty for farming, and deforestation.
680
+ </p>
681
+ <div class="bg-red-100 p-4 rounded-lg mb-4">
682
+ <p class="text-red-800">
683
+ <span class="font-bold">Legacy:</span> Even though Mesopotamia fell, its inventions (writing, laws, cities) spread and influenced later civilizations!
684
+ </p>
685
+ </div>
686
+ <p class="text-lg text-gray-800">
687
+ The last Mesopotamian empire was conquered by the Persians in 539 BCE.
688
+ </p>
689
+ </div>
690
+ </div>
691
+
692
+ <div class="text-center mt-8">
693
+ <h3 class="title-font text-3xl text-yellow-700 mb-4">🎉 Mission Complete! 🎉</h3>
694
+ <p class="text-xl mb-6">You've successfully traveled through time to learn about Mesopotamia!</p>
695
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105">
696
+ Play Again?
697
+ </button>
698
+ </div>
699
+
700
+ <div class="absolute bottom-5 left-0 right-0 text-center text-sm text-gray-600">
701
+ Designed for young explorers by Aryan's Ed-Tech Mission 🚀
702
+ </div>
703
+ </div>
704
+
705
+ <div class="level-badge bg-red-600 text-white text-3xl">
706
+ 11
707
+ </div>
708
+
709
+ <img src="https://cdn-icons-png.flaticon.com/512/4474/4474121.png" alt="Sad explorer" class="character">
710
+ </div>
711
+
712
+ <script>
713
+ document.addEventListener('DOMContentLoaded', function() {
714
+ const slides = document.querySelectorAll('.slide');
715
+ const dots = document.querySelectorAll('.nav-dot');
716
+ let currentSlide = 0;
717
+
718
+ // Initialize first slide
719
+ showSlide(currentSlide);
720
+
721
+ // Dot navigation
722
+ dots.forEach(dot => {
723
+ dot.addEventListener('click', function() {
724
+ const slideIndex = parseInt(this.getAttribute('data-slide'));
725
+ currentSlide = slideIndex;
726
+ showSlide(currentSlide);
727
+ });
728
+ });
729
+
730
+ // Keyboard navigation
731
+ document.addEventListener('keydown', function(e) {
732
+ if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
733
+ nextSlide();
734
+ } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
735
+ prevSlide();
736
+ }
737
+ });
738
+
739
+ // Touch/swipe support
740
+ let touchStartX = 0;
741
+ let touchEndX = 0;
742
+
743
+ document.addEventListener('touchstart', function(e) {
744
+ touchStartX = e.changedTouches[0].screenX;
745
+ }, false);
746
+
747
+ document.addEventListener('touchend', function(e) {
748
+ touchEndX = e.changedTouches[0].screenX;
749
+ handleSwipe();
750
+ }, false);
751
+
752
+ function handleSwipe() {
753
+ if (touchEndX < touchStartX) {
754
+ nextSlide();
755
+ }
756
+ if (touchEndX > touchStartX) {
757
+ prevSlide();
758
+ }
759
+ }
760
+
761
+ function nextSlide() {
762
+ currentSlide = (currentSlide + 1) % slides.length;
763
+ showSlide(currentSlide);
764
+ }
765
+
766
+ function prevSlide() {
767
+ currentSlide = (currentSlide - 1 + slides.length) % slides.length;
768
+ showSlide(currentSlide);
769
+ }
770
+
771
+ function showSlide(index) {
772
+ slides.forEach(slide => {
773
+ slide.style.display = 'none';
774
+ });
775
+
776
+ dots.forEach(dot => {
777
+ dot.classList.remove('active');
778
+ });
779
+
780
+ slides[index].style.display = 'flex';
781
+ dots[index].classList.add('active');
782
+
783
+ // Scroll to top of slide
784
+ window.scrollTo({
785
+ top: index * window.innerHeight,
786
+ behavior: 'smooth'
787
+ });
788
+ }
789
+
790
+ // Auto-scroll for demo purposes (can be removed)
791
+ // setInterval(nextSlide, 10000);
792
+ });
793
+ </script>
794
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aryansrk/studies" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
795
+ </html>