Hugging Face's logo

Spaces:
Boody123
/
my-awesome-space
Running

App Files Community
Boody123 commited on
Commit
7c1c335
·
verified ·
1 Parent(s): ee1d83b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +922 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Awesome Space
3
- emoji: 🏢
4
- colorFrom: indigo
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-awesome-space
3
+ emoji: 🐳
4
+ colorFrom: green
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,922 @@
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>The World in 2070 - A Futuristic Vision</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=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: #0f172a;
15
+ color: #e2e8f0;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ .futuristic-font {
20
+ font-family: 'Orbitron', sans-serif;
21
+ }
22
+
23
+ .gradient-text {
24
+ background: linear-gradient(90deg, #3b82f6, #10b981, #ec4899);
25
+ -webkit-background-clip: text;
26
+ background-clip: text;
27
+ color: transparent;
28
+ }
29
+
30
+ .card-hover {
31
+ transition: all 0.3s ease;
32
+ border: 1px solid rgba(255, 255, 255, 0.1);
33
+ }
34
+
35
+ .card-hover:hover {
36
+ transform: translateY(-10px);
37
+ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
38
+ border-color: #3b82f6;
39
+ }
40
+
41
+ .timeline-item::before {
42
+ content: '';
43
+ position: absolute;
44
+ left: -38px;
45
+ top: 0;
46
+ width: 20px;
47
+ height: 20px;
48
+ border-radius: 50%;
49
+ background: #3b82f6;
50
+ border: 3px solid #0f172a;
51
+ }
52
+
53
+ .futuristic-bg {
54
+ background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.05) 90%);
55
+ }
56
+
57
+ @keyframes float {
58
+ 0%, 100% {
59
+ transform: translateY(0);
60
+ }
61
+ 50% {
62
+ transform: translateY(-10px);
63
+ }
64
+ }
65
+
66
+ .floating {
67
+ animation: float 6s ease-in-out infinite;
68
+ }
69
+
70
+ .typewriter {
71
+ overflow: hidden;
72
+ border-right: .15em solid #3b82f6;
73
+ white-space: nowrap;
74
+ margin: 0 auto;
75
+ letter-spacing: .15em;
76
+ animation:
77
+ typing 3.5s steps(40, end),
78
+ blink-caret .75s step-end infinite;
79
+ }
80
+
81
+ @keyframes typing {
82
+ from { width: 0 }
83
+ to { width: 100% }
84
+ }
85
+
86
+ @keyframes blink-caret {
87
+ from, to { border-color: transparent }
88
+ 50% { border-color: #3b82f6; }
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="min-h-screen">
93
+ <!-- Navigation -->
94
+ <nav class="fixed w-full bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-800">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="flex items-center justify-between h-16">
97
+ <div class="flex items-center">
98
+ <div class="flex-shrink-0">
99
+ <span class="text-2xl font-bold gradient-text futuristic-font">2070</span>
100
+ </div>
101
+ <div class="hidden md:block">
102
+ <div class="ml-10 flex items-baseline space-x-4">
103
+ <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium hover:text-blue-400 transition">Home</a>
104
+ <a href="#predictions" class="px-3 py-2 rounded-md text-sm font-medium hover:text-emerald-400 transition">Predictions</a>
105
+ <a href="#technology" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-400 transition">Technology</a>
106
+ <a href="#environment" class="px-3 py-2 rounded-md text-sm font-medium hover:text-green-400 transition">Environment</a>
107
+ <a href="#quiz" class="px-3 py-2 rounded-md text-sm font-medium hover:text-purple-400 transition">Quiz</a>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="-mr-2 flex md:hidden">
112
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none">
113
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
114
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
115
+ </svg>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Mobile menu -->
122
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900/95 pb-3 border-t border-gray-800">
123
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
124
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-400 transition">Home</a>
125
+ <a href="#predictions" class="block px-3 py-2 rounded-md text-base font-medium hover:text-emerald-400 transition">Predictions</a>
126
+ <a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-400 transition">Technology</a>
127
+ <a href="#environment" class="block px-3 py-2 rounded-md text-base font-medium hover:text-green-400 transition">Environment</a>
128
+ <a href="#quiz" class="block px-3 py-2 rounded-md text-base font-medium hover:text-purple-400 transition">Quiz</a>
129
+ </div>
130
+ </div>
131
+ </nav>
132
+
133
+ <!-- Hero Section -->
134
+ <section id="home" class="relative pt-24 pb-32 px-4 sm:px-6 lg:px-8 flex items-center justify-center min-h-screen futuristic-bg">
135
+ <div class="max-w-7xl mx-auto">
136
+ <div class="text-center">
137
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text futuristic-font">
138
+ <span class="typewriter">The World in 2070</span>
139
+ </h1>
140
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-gray-300">
141
+ A visionary exploration of how technology, society, and the environment might evolve by the year 2070
142
+ </p>
143
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
144
+ <a href="#predictions" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition transform hover:scale-105">
145
+ Explore Predictions <i class="fas fa-arrow-down ml-2"></i>
146
+ </a>
147
+ <a href="#quiz" class="px-8 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition transform hover:scale-105">
148
+ Take the Quiz <i class="fas fa-question-circle ml-2"></i>
149
+ </a>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
154
+ <div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
155
+ <i class="fas fa-robot text-4xl mb-3 text-blue-400"></i>
156
+ <h3 class="font-bold text-lg">AI Integration</h3>
157
+ </div>
158
+ <div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
159
+ <i class="fas fa-leaf text-4xl mb-3 text-emerald-400"></i>
160
+ <h3 class="font-bold text-lg">Green Cities</h3>
161
+ </div>
162
+ <div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
163
+ <i class="fas fa-brain text-4xl mb-3 text-purple-400"></i>
164
+ <h3 class="font-bold text-lg">Mind Tech</h3>
165
+ </div>
166
+ <div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
167
+ <i class="fas fa-globe-americas text-4xl mb-3 text-pink-400"></i>
168
+ <h3 class="font-bold text-lg">Global Unity</h3>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
174
+ <a href="#predictions" class="text-gray-400 hover:text-white animate-bounce">
175
+ <i class="fas fa-chevron-down text-3xl"></i>
176
+ </a>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Predictions Section -->
181
+ <section id="predictions" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
182
+ <div class="max-w-7xl mx-auto">
183
+ <div class="text-center mb-16">
184
+ <h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Our Predictions for 2070</h2>
185
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
186
+ Based on current trends and technological advancements, here's what we envision for the world in 2070
187
+ </p>
188
+ </div>
189
+
190
+ <div class="relative">
191
+ <!-- Timeline -->
192
+ <div class="border-l-2 border-blue-400/50 pl-8 ml-4 space-y-16">
193
+ <!-- Item 1 -->
194
+ <div class="timeline-item relative">
195
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
196
+ <div class="flex flex-col md:flex-row gap-6">
197
+ <div class="md:w-1/3">
198
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
199
+ alt="AI Integration"
200
+ class="w-full h-auto rounded-lg object-cover">
201
+ </div>
202
+ <div class="md:w-2/3">
203
+ <div class="flex items-center mb-4">
204
+ <span class="bg-blue-900/50 text-blue-400 px-3 py-1 rounded-full text-sm font-medium">Technology</span>
205
+ <span class="ml-3 text-gray-400 text-sm">2045-2070</span>
206
+ </div>
207
+ <h3 class="text-2xl font-bold mb-3">Full AI Integration</h3>
208
+ <p class="text-gray-300 mb-4">
209
+ By 2070, artificial intelligence will be seamlessly integrated into every aspect of daily life.
210
+ AI personal assistants will anticipate our needs, manage our schedules, and even make decisions
211
+ on our behalf based on deep learning of our preferences.
212
+ </p>
213
+ <div class="flex flex-wrap gap-2">
214
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Neural Interfaces</span>
215
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Predictive Systems</span>
216
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Automation</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Item 2 -->
224
+ <div class="timeline-item relative">
225
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
226
+ <div class="flex flex-col md:flex-row gap-6">
227
+ <div class="md:w-1/3">
228
+ <img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
229
+ alt="Sustainable Cities"
230
+ class="w-full h-auto rounded-lg object-cover">
231
+ </div>
232
+ <div class="md:w-2/3">
233
+ <div class="flex items-center mb-4">
234
+ <span class="bg-emerald-900/50 text-emerald-400 px-3 py-1 rounded-full text-sm font-medium">Environment</span>
235
+ <span class="ml-3 text-gray-400 text-sm">2030-2070</span>
236
+ </div>
237
+ <h3 class="text-2xl font-bold mb-3">Sustainable Megacities</h3>
238
+ <p class="text-gray-300 mb-4">
239
+ Urban areas will transform into self-sustaining ecosystems with vertical farms,
240
+ renewable energy grids, and advanced waste management systems. Buildings will be
241
+ constructed with smart materials that adapt to weather conditions and generate energy.
242
+ </p>
243
+ <div class="flex flex-wrap gap-2">
244
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Vertical Farming</span>
245
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Carbon Capture</span>
246
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Smart Infrastructure</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Item 3 -->
254
+ <div class="timeline-item relative">
255
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
256
+ <div class="flex flex-col md:flex-row gap-6">
257
+ <div class="md:w-1/3">
258
+ <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
259
+ alt="Space Colonization"
260
+ class="w-full h-auto rounded-lg object-cover">
261
+ </div>
262
+ <div class="md:w-2/3">
263
+ <div class="flex items-center mb-4">
264
+ <span class="bg-purple-900/50 text-purple-400 px-3 py-1 rounded-full text-sm font-medium">Space</span>
265
+ <span class="ml-3 text-gray-400 text-sm">2060-2070</span>
266
+ </div>
267
+ <h3 class="text-2xl font-bold mb-3">Moon and Mars Colonies</h3>
268
+ <p class="text-gray-300 mb-4">
269
+ Permanent human settlements will exist on the Moon and Mars, serving as research bases
270
+ and stepping stones for deeper space exploration. These colonies will test technologies
271
+ for sustainable living in extreme environments.
272
+ </p>
273
+ <div class="flex flex-wrap gap-2">
274
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Space Tourism</span>
275
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Terraforming</span>
276
+ <span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Off-World Mining</span>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Technology Section -->
288
+ <section id="technology" class="py-20 px-4 sm:px-6 lg:px-8 futuristic-bg">
289
+ <div class="max-w-7xl mx-auto">
290
+ <div class="text-center mb-16">
291
+ <h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Technological Advancements</h2>
292
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
293
+ Revolutionary technologies that will reshape human existence by 2070
294
+ </p>
295
+ </div>
296
+
297
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
298
+ <!-- Card 1 -->
299
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
300
+ <div class="flex items-center justify-center w-16 h-16 bg-blue-900/30 rounded-lg mb-4 text-blue-400">
301
+ <i class="fas fa-brain text-3xl"></i>
302
+ </div>
303
+ <h3 class="text-2xl font-bold mb-3">Brain-Computer Interfaces</h3>
304
+ <p class="text-gray-300 mb-4">
305
+ Direct neural connections will allow thought-controlled devices, instant knowledge downloads,
306
+ and enhanced cognitive abilities through brain augmentation.
307
+ </p>
308
+ <div class="flex items-center text-sm text-blue-400">
309
+ <span>Estimated arrival: 2055</span>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Card 2 -->
314
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
315
+ <div class="flex items-center justify-center w-16 h-16 bg-emerald-900/30 rounded-lg mb-4 text-emerald-400">
316
+ <i class="fas fa-dna text-3xl"></i>
317
+ </div>
318
+ <h3 class="text-2xl font-bold mb-3">Genetic Engineering</h3>
319
+ <p class="text-gray-300 mb-4">
320
+ CRISPR and advanced gene therapies will eliminate hereditary diseases, extend lifespan,
321
+ and allow for biological enhancements tailored to individual needs.
322
+ </p>
323
+ <div class="flex items-center text-sm text-emerald-400">
324
+ <span>Widespread by: 2060</span>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Card 3 -->
329
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
330
+ <div class="flex items-center justify-center w-16 h-16 bg-purple-900/30 rounded-lg mb-4 text-purple-400">
331
+ <i class="fas fa-atom text-3xl"></i>
332
+ </div>
333
+ <h3 class="text-2xl font-bold mb-3">Quantum Computing</h3>
334
+ <p class="text-gray-300 mb-4">
335
+ Quantum computers will solve problems in seconds that would take current supercomputers millennia,
336
+ revolutionizing medicine, materials science, and cryptography.
337
+ </p>
338
+ <div class="flex items-center text-sm text-purple-400">
339
+ <span>Commercial use: 2045+</span>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Card 4 -->
344
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
345
+ <div class="flex items-center justify-center w-16 h-16 bg-pink-900/30 rounded-lg mb-4 text-pink-400">
346
+ <i class="fas fa-robot text-3xl"></i>
347
+ </div>
348
+ <h3 class="text-2xl font-bold mb-3">Humanoid Robotics</h3>
349
+ <p class="text-gray-300 mb-4">
350
+ Advanced androids with human-like appearance and intelligence will serve as companions,
351
+ caregivers, and coworkers, blurring the line between human and machine.
352
+ </p>
353
+ <div class="flex items-center text-sm text-pink-400">
354
+ <span>Commonplace by: 2065</span>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Card 5 -->
359
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
360
+ <div class="flex items-center justify-center w-16 h-16 bg-yellow-900/30 rounded-lg mb-4 text-yellow-400">
361
+ <i class="fas fa-vr-cardboard text-3xl"></i>
362
+ </div>
363
+ <h3 class="text-2xl font-bold mb-3">Full-Dive Virtual Reality</h3>
364
+ <p class="text-gray-300 mb-4">
365
+ Neural VR systems will provide fully immersive experiences indistinguishable from reality,
366
+ enabling virtual travel, education, and social interactions with complete sensory feedback.
367
+ </p>
368
+ <div class="flex items-center text-sm text-yellow-400">
369
+ <span>Consumer version: 2050</span>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Card 6 -->
374
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
375
+ <div class="flex items-center justify-center w-16 h-16 bg-red-900/30 rounded-lg mb-4 text-red-400">
376
+ <i class="fas fa-syringe text-3xl"></i>
377
+ </div>
378
+ <h3 class="text-2xl font-bold mb-3">Medical Nanobots</h3>
379
+ <p class="text-gray-300 mb-4">
380
+ Microscopic robots will patrol our bloodstream, repairing cellular damage,
381
+ eliminating pathogens, and continuously monitoring health at the molecular level.
382
+ </p>
383
+ <div class="flex items-center text-sm text-red-400">
384
+ <span>First applications: 2040</span>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="mt-16 text-center">
390
+ <button id="tech-more-btn" class="px-6 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition">
391
+ Show More Technologies <i class="fas fa-chevron-down ml-2"></i>
392
+ </button>
393
+
394
+ <div id="more-tech" class="hidden mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
395
+ <!-- Additional hidden tech cards would go here -->
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- Environment Section -->
402
+ <section id="environment" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
403
+ <div class="max-w-7xl mx-auto">
404
+ <div class="text-center mb-16">
405
+ <h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Environmental Transformation</h2>
406
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
407
+ How humanity will restore and coexist with nature in 2070
408
+ </p>
409
+ </div>
410
+
411
+ <div class="flex flex-col lg:flex-row gap-12 items-center">
412
+ <div class="lg:w-1/2">
413
+ <div class="relative">
414
+ <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
415
+ alt="Future Earth"
416
+ class="w-full rounded-xl shadow-2xl floating">
417
+ <div class="absolute -bottom-6 -right-6 bg-blue-900/80 p-4 rounded-xl border border-blue-400 w-2/3">
418
+ <h4 class="font-bold text-lg mb-2">Earth Restoration Projects</h4>
419
+ <p class="text-sm text-gray-300">Global efforts successfully reversed climate change by 2065</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="lg:w-1/2">
425
+ <div class="space-y-6">
426
+ <div class="flex items-start">
427
+ <div class="flex-shrink-0 bg-green-900/30 rounded-lg p-3 text-green-400 mr-4">
428
+ <i class="fas fa-solar-panel text-2xl"></i>
429
+ </div>
430
+ <div>
431
+ <h3 class="text-2xl font-bold mb-2">100% Renewable Energy</h3>
432
+ <p class="text-gray-300">
433
+ Fossil fuels will be completely phased out in favor of fusion power, advanced solar,
434
+ and orbital energy collection systems providing clean, abundant energy worldwide.
435
+ </p>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="flex items-start">
440
+ <div class="flex-shrink-0 bg-teal-900/30 rounded-lg p-3 text-teal-400 mr-4">
441
+ <i class="fas fa-recycle text-2xl"></i>
442
+ </div>
443
+ <div>
444
+ <h3 class="text-2xl font-bold mb-2">Circular Economy</h3>
445
+ <p class="text-gray-300">
446
+ Zero-waste manufacturing and complete material recycling will be standard,
447
+ with AI-optimized resource flows eliminating pollution and minimizing extraction.
448
+ </p>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="flex items-start">
453
+ <div class="flex-shrink-0 bg-emerald-900/30 rounded-lg p-3 text-emerald-400 mr-4">
454
+ <i class="fas fa-tree text-2xl"></i>
455
+ </div>
456
+ <div>
457
+ <h3 class="text-2xl font-bold mb-2">Rewilded Landscapes</h3>
458
+ <p class="text-gray-300">
459
+ Vast areas will be returned to wilderness, with de-extinction projects restoring
460
+ lost species and smart conservation systems protecting biodiversity hotspots.
461
+ </p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="mt-10 bg-gray-800/50 p-6 rounded-xl border border-gray-700">
467
+ <h3 class="text-xl font-bold mb-4">Environmental Progress Timeline</h3>
468
+ <div class="space-y-4">
469
+ <div>
470
+ <div class="flex justify-between mb-1">
471
+ <span class="text-sm font-medium text-blue-400">Carbon Neutrality</span>
472
+ <span class="text-sm text-gray-400">2040 Achieved</span>
473
+ </div>
474
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
475
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div>
476
+ </div>
477
+ </div>
478
+ <div>
479
+ <div class="flex justify-between mb-1">
480
+ <span class="text-sm font-medium text-emerald-400">Ocean Cleanup</span>
481
+ <span class="text-sm text-gray-400">2055 Completed</span>
482
+ </div>
483
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
484
+ <div class="bg-emerald-600 h-2.5 rounded-full" style="width: 85%"></div>
485
+ </div>
486
+ </div>
487
+ <div>
488
+ <div class="flex justify-between mb-1">
489
+ <span class="text-sm font-medium text-purple-400">Species Restoration</span>
490
+ <span class="text-sm text-gray-400">2068 Ongoing</span>
491
+ </div>
492
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
493
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </section>
502
+
503
+ <!-- Quiz Section -->
504
+ <section id="quiz" class="py-20 px-4 sm:px-6 lg:px-8 futuristic-bg">
505
+ <div class="max-w-4xl mx-auto">
506
+ <div class="text-center mb-16">
507
+ <h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">2070 Future Quiz</h2>
508
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
509
+ Test your knowledge about our predictions for the world in 2070
510
+ </p>
511
+ </div>
512
+
513
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
514
+ <div id="quiz-container">
515
+ <div id="quiz-intro" class="text-center">
516
+ <i class="fas fa-question-circle text-6xl mb-6 text-purple-400"></i>
517
+ <h3 class="text-2xl font-bold mb-4">How Well Do You Know the Future?</h3>
518
+ <p class="text-gray-300 mb-8">
519
+ Take this 5-question quiz to see how aligned your vision of 2070 is with our predictions.
520
+ You'll get immediate feedback on each answer!
521
+ </p>
522
+ <button id="start-quiz" class="px-8 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition transform hover:scale-105">
523
+ Start Quiz <i class="fas fa-play ml-2"></i>
524
+ </button>
525
+ </div>
526
+
527
+ <div id="quiz-questions" class="hidden">
528
+ <!-- Question 1 -->
529
+ <div class="question hidden" data-question="1">
530
+ <h3 class="text-xl font-bold mb-6">1. What percentage of jobs do we predict will be automated by 2070?</h3>
531
+ <div class="space-y-3">
532
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
533
+ A. 30-40%
534
+ </button>
535
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
536
+ B. 50-60%
537
+ </button>
538
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
539
+ C. 70-80%
540
+ </button>
541
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
542
+ D. 90-100%
543
+ </button>
544
+ </div>
545
+ <div class="mt-6 feedback hidden">
546
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
547
+ <i class="fas fa-check-circle mr-2"></i> Correct! We predict 70-80% automation as many jobs will still require human creativity and oversight.
548
+ </div>
549
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
550
+ <i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is C. While automation will be extensive, many jobs will still require human creativity and oversight.
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Question 2 -->
556
+ <div class="question hidden" data-question="2">
557
+ <h3 class="text-xl font-bold mb-6">2. Which energy source will likely dominate by 2070?</h3>
558
+ <div class="space-y-3">
559
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
560
+ A. Fossil fuels with carbon capture
561
+ </button>
562
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
563
+ B. Nuclear fusion
564
+ </button>
565
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
566
+ C. Traditional nuclear fission
567
+ </button>
568
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
569
+ D. Biofuels
570
+ </button>
571
+ </div>
572
+ <div class="mt-6 feedback hidden">
573
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
574
+ <i class="fas fa-check-circle mr-2"></i> Right! Fusion power is expected to become commercially viable by 2050 and dominant by 2070.
575
+ </div>
576
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
577
+ <i class="fas fa-times-circle mr-2"></i> Actually, the correct answer is B. Fusion power is expected to become commercially viable by 2050 and dominant by 2070.
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Question 3 -->
583
+ <div class="question hidden" data-question="3">
584
+ <h3 class="text-xl font-bold mb-6">3. What will be the average human lifespan in 2070?</h3>
585
+ <div class="space-y-3">
586
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
587
+ A. 75-80 years (similar to today)
588
+ </button>
589
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
590
+ B. 85-90 years
591
+ </button>
592
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
593
+ C. 95-100 years
594
+ </button>
595
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
596
+ D. 110-120 years
597
+ </button>
598
+ </div>
599
+ <div class="mt-6 feedback hidden">
600
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
601
+ <i class="fas fa-check-circle mr-2"></i> Correct! Advances in medicine and biotechnology will likely push average lifespans beyond 110 years.
602
+ </div>
603
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
604
+ <i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is D. Advances in medicine and biotechnology will likely push average lifespans beyond 110 years.
605
+ </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Question 4 -->
610
+ <div class="question hidden" data-question="4">
611
+ <h3 class="text-xl font-bold mb-6">4. Which technology will be most impactful for education in 2070?</h3>
612
+ <div class="space-y-3">
613
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
614
+ A. Augmented reality classrooms
615
+ </button>
616
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
617
+ B. AI tutors
618
+ </button>
619
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
620
+ C. Neural knowledge implants
621
+ </button>
622
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
623
+ D. Global education networks
624
+ </button>
625
+ </div>
626
+ <div class="mt-6 feedback hidden">
627
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
628
+ <i class="fas fa-check-circle mr-2"></i> Right! While all will be important, direct neural knowledge transfer will revolutionize learning.
629
+ </div>
630
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
631
+ <i class="fas fa-times-circle mr-2"></i> Actually, the correct answer is C. While all will be important, direct neural knowledge transfer will revolutionize learning.
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Question 5 -->
637
+ <div class="question hidden" data-question="5">
638
+ <h3 class="text-xl font-bold mb-6">5. How will climate change be addressed by 2070?</h3>
639
+ <div class="space-y-3">
640
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
641
+ A. Geoengineering projects to cool the planet
642
+ </button>
643
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
644
+ B. Adaptation to warmer temperatures
645
+ </button>
646
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
647
+ C. Combination of carbon capture and renewable energy
648
+ </button>
649
+ <button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
650
+ D. Climate change will be largely unresolved
651
+ </button>
652
+ </div>
653
+ <div class="mt-6 feedback hidden">
654
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
655
+ <i class="fas fa-check-circle mr-2"></i> Correct! A multi-pronged approach will successfully reverse climate change by 2070.
656
+ </div>
657
+ <div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
658
+ <i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is C. A multi-pronged approach will successfully reverse climate change by 2070.
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+
664
+ <div id="quiz-results" class="hidden text-center">
665
+ <i class="fas fa-chart-line text-6xl mb-6 text-blue-400"></i>
666
+ <h3 class="text-2xl font-bold mb-4">Your Future Knowledge Score</h3>
667
+ <div class="text-5xl font-bold mb-6 gradient-text futuristic-font" id="score-display">0/5</div>
668
+ <p class="text-gray-300 mb-8" id="result-message">
669
+ Based on your answers, you have some learning to do about our future predictions!
670
+ </p>
671
+ <div class="flex justify-center gap-4">
672
+ <button id="retake-quiz" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
673
+ <i class="fas fa-redo mr-2"></i> Try Again
674
+ </button>
675
+ <a href="#home" class="px-6 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition">
676
+ <i class="fas fa-home mr-2"></i> Back to Home
677
+ </a>
678
+ </div>
679
+ </div>
680
+
681
+ <div class="mt-8 flex justify-between items-center">
682
+ <div id="quiz-progress" class="text-sm text-gray-400 hidden">
683
+ Question <span id="current-question">1</span> of 5
684
+ </div>
685
+ <button id="next-question" class="hidden px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition ml-auto">
686
+ Next <i class="fas fa-arrow-right ml-2"></i>
687
+ </button>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </section>
693
+
694
+ <!-- Footer -->
695
+ <footer class="bg-gray-900/80 border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8">
696
+ <div class="max-w-7xl mx-auto">
697
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
698
+ <div>
699
+ <h3 class="text-xl font-bold mb-4 gradient-text futuristic-font">2070 Future Vision</h3>
700
+ <p class="text-gray-400">
701
+ A school project exploring possible futures based on current technological, environmental, and social trends.
702
+ </p>
703
+ </div>
704
+
705
+ <div>
706
+ <h3 class="text-lg font-bold mb-4 text-gray-300">Quick Links</h3>
707
+ <ul class="space-y-2">
708
+ <li><a href="#home" class="text-gray-400 hover:text-blue-400 transition">Home</a></li>
709
+ <li><a href="#predictions" class="text-gray-400 hover:text-emerald-400 transition">Predictions</a></li>
710
+ <li><a href="#technology" class="text-gray-400 hover:text-pink-400 transition">Technology</a></li>
711
+ <li><a href="#environment" class="text-gray-400 hover:text-green-400 transition">Environment</a></li>
712
+ <li><a href="#quiz" class="text-gray-400 hover:text-purple-400 transition">Quiz</a></li>
713
+ </ul>
714
+ </div>
715
+
716
+ <div>
717
+ <h3 class="text-lg font-bold mb-4 text-gray-300">Connect</h3>
718
+ <div class="flex space-x-4">
719
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition text-xl">
720
+ <i class="fab fa-twitter"></i>
721
+ </a>
722
+ <a href="#" class="text-gray-400 hover:text-pink-400 transition text-xl">
723
+ <i class="fab fa-instagram"></i>
724
+ </a>
725
+ <a href="#" class="text-gray-400 hover:text-blue-600 transition text-xl">
726
+ <i class="fab fa-linkedin"></i>
727
+ </a>
728
+ <a href="#" class="text-gray-400 hover:text-red-500 transition text-xl">
729
+ <i class="fab fa-youtube"></i>
730
+ </a>
731
+ </div>
732
+ <div class="mt-4">
733
+ <p class="text-gray-400 text-sm">
734
+ <i class="fas fa-envelope mr-2"></i> future2070@schoolproject.edu
735
+ </p>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
741
+ <p>© 2023 Future Vision Project. All predictions are speculative and for educational purposes only.</p>
742
+ </div>
743
+ </div>
744
+ </footer>
745
+
746
+ <script>
747
+ // Mobile menu toggle
748
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
749
+ const menu = document.getElementById('mobile-menu');
750
+ menu.classList.toggle('hidden');
751
+ });
752
+
753
+ // Smooth scrolling for navigation links
754
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
755
+ anchor.addEventListener('click', function (e) {
756
+ e.preventDefault();
757
+
758
+ const targetId = this.getAttribute('href');
759
+ const targetElement = document.querySelector(targetId);
760
+
761
+ if (targetElement) {
762
+ // Close mobile menu if open
763
+ const mobileMenu = document.getElementById('mobile-menu');
764
+ mobileMenu.classList.add('hidden');
765
+
766
+ window.scrollTo({
767
+ top: targetElement.offsetTop - 80,
768
+ behavior: 'smooth'
769
+ });
770
+ }
771
+ });
772
+ });
773
+
774
+ // Show more technologies
775
+ document.getElementById('tech-more-btn').addEventListener('click', function() {
776
+ const moreTech = document.getElementById('more-tech');
777
+ const icon = this.querySelector('i');
778
+
779
+ if (moreTech.classList.contains('hidden')) {
780
+ moreTech.classList.remove('hidden');
781
+ icon.classList.remove('fa-chevron-down');
782
+ icon.classList.add('fa-chevron-up');
783
+ this.textContent = 'Show Less Technologies ';
784
+ } else {
785
+ moreTech.classList.add('hidden');
786
+ icon.classList.remove('fa-chevron-up');
787
+ icon.classList.add('fa-chevron-down');
788
+ this.textContent = 'Show More Technologies ';
789
+ }
790
+
791
+ // Append the icon back to the button
792
+ this.appendChild(icon);
793
+ });
794
+
795
+ // Quiz functionality
796
+ let currentQuestion = 1;
797
+ let score = 0;
798
+ const totalQuestions = 5;
799
+
800
+ document.getElementById('start-quiz').addEventListener('click', function() {
801
+ document.getElementById('quiz-intro').classList.add('hidden');
802
+ document.getElementById('quiz-questions').classList.remove('hidden');
803
+ document.querySelector(`[data-question="1"]`).classList.remove('hidden');
804
+ document.getElementById('quiz-progress').classList.remove('hidden');
805
+ });
806
+
807
+ document.querySelectorAll('.answer-btn').forEach(button => {
808
+ button.addEventListener('click', function() {
809
+ const isCorrect = this.getAttribute('data-correct') === 'true';
810
+ const questionDiv = this.closest('.question');
811
+ const feedbackDiv = questionDiv.querySelector('.feedback');
812
+
813
+ // Show feedback
814
+ if (isCorrect) {
815
+ questionDiv.querySelector('.correct-feedback').classList.remove('hidden');
816
+ score++;
817
+ } else {
818
+ questionDiv.querySelector('.incorrect-feedback').classList.remove('hidden');
819
+ }
820
+
821
+ feedbackDiv.classList.remove('hidden');
822
+
823
+ // Disable all answer buttons for this question
824
+ questionDiv.querySelectorAll('.answer-btn').forEach(btn => {
825
+ btn.disabled = true;
826
+ if (btn.getAttribute('data-correct') === 'true') {
827
+ btn.classList.add('border-green-500', 'bg-green-900/20');
828
+ } else {
829
+ btn.classList.add('border-red-500', 'bg-red-900/20');
830
+ }
831
+ });
832
+
833
+ // Show next button or finish quiz
834
+ if (currentQuestion < totalQuestions) {
835
+ document.getElementById('next-question').classList.remove('hidden');
836
+ } else {
837
+ document.getElementById('next-question').classList.add('hidden');
838
+ setTimeout(showQuizResults, 1500);
839
+ }
840
+ });
841
+ });
842
+
843
+ document.getElementById('next-question').addEventListener('click', function() {
844
+ // Hide current question
845
+ document.querySelector(`[data-question="${currentQuestion}"]`).classList.add('hidden');
846
+
847
+ // Show next question
848
+ currentQuestion++;
849
+ document.querySelector(`[data-question="${currentQuestion}"]`).classList.remove('hidden');
850
+ document.getElementById('current-question').textContent = currentQuestion;
851
+
852
+ // Hide next button until answer is selected
853
+ this.classList.add('hidden');
854
+ });
855
+
856
+ document.getElementById('retake-quiz').addEventListener('click', function() {
857
+ resetQuiz();
858
+ });
859
+
860
+ function showQuizResults() {
861
+ document.getElementById('quiz-questions').classList.add('hidden');
862
+ document.getElementById('quiz-results').classList.remove('hidden');
863
+
864
+ // Set score and message
865
+ document.getElementById('score-display').textContent = `${score}/${totalQuestions}`;
866
+
867
+ let message = '';
868
+ if (score === totalQuestions) {
869
+ message = "Perfect! You're a true futurist with excellent knowledge of potential future developments.";
870
+ } else if (score >= 3) {
871
+ message = "Good job! You have a solid understanding of potential future trends.";
872
+ } else {
873
+ message = "Keep exploring! The future holds many possibilities worth learning about.";
874
+ }
875
+
876
+ document.getElementById('result-message').textContent = message;
877
+ }
878
+
879
+ function resetQuiz() {
880
+ currentQuestion = 1;
881
+ score = 0;
882
+
883
+ // Reset all questions
884
+ document.querySelectorAll('.question').forEach(question => {
885
+ question.classList.add('hidden');
886
+ question.querySelector('.feedback').classList.add('hidden');
887
+ question.querySelector('.correct-feedback').classList.add('hidden');
888
+ question.querySelector('.incorrect-feedback').classList.add('hidden');
889
+
890
+ question.querySelectorAll('.answer-btn').forEach(btn => {
891
+ btn.disabled = false;
892
+ btn.classList.remove('border-green-500', 'bg-green-900/20', 'border-red-500', 'bg-red-900/20');
893
+ });
894
+ });
895
+
896
+ // Show first question
897
+ document.querySelector(`[data-question="1"]`).classList.remove('hidden');
898
+ document.getElementById('current-question').textContent = '1';
899
+ document.getElementById('quiz-results').classList.add('hidden');
900
+ document.getElementById('quiz-questions').classList.remove('hidden');
901
+ document.getElementById('next-question').classList.add('hidden');
902
+ }
903
+
904
+ // Add floating animation to elements with .floating class
905
+ const floatingElements = document.querySelectorAll('.floating');
906
+ floatingElements.forEach(el => {
907
+ // Randomize delay to create wave effect
908
+ el.style.animationDelay = `${Math.random() * 2}s`;
909
+ });
910
+
911
+ // Typewriter effect for the hero heading
912
+ setTimeout(() => {
913
+ const typewriter = document.querySelector('.typewriter');
914
+ typewriter.style.animation = 'none';
915
+ setTimeout(() => {
916
+ typewriter.style.animation = '';
917
+ typewriter.style.borderRight = 'none';
918
+ }, 10);
919
+ }, 3500);
920
+ </script>
921
+ <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=Boody123/my-awesome-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
922
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build an interactive website about my school presentation about how we think the world will be in 2070