Hugging Face's logo

Spaces:
AARIFSHABIR
/
change
Running

App Files Community
AARIFSHABIR commited on
Commit
18bc64d
·
verified ·
1 Parent(s): ba3d207

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +743 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Change
3
- emoji: 🏃
4
- colorFrom: green
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: change
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,743 @@
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>Science Explorers - DCPS LAR</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
+ .flip-card {
11
+ perspective: 1000px;
12
+ }
13
+ .flip-card-inner {
14
+ transition: transform 0.6s;
15
+ transform-style: preserve-3d;
16
+ }
17
+ .flip-card:hover .flip-card-inner {
18
+ transform: rotateY(180deg);
19
+ }
20
+ .flip-card-front, .flip-card-back {
21
+ backface-visibility: hidden;
22
+ }
23
+ .flip-card-back {
24
+ transform: rotateY(180deg);
25
+ }
26
+
27
+ .lesson-pulse:hover {
28
+ animation: pulse 1.5s infinite;
29
+ }
30
+ @keyframes pulse {
31
+ 0% { transform: scale(1); }
32
+ 50% { transform: scale(1.05); }
33
+ 100% { transform: scale(1); }
34
+ }
35
+
36
+ .search-highlight {
37
+ background-color: #f0f9ff;
38
+ border-left: 4px solid #60a5fa;
39
+ }
40
+
41
+ .tab-content {
42
+ display: none;
43
+ }
44
+ .tab-content.active {
45
+ display: block;
46
+ animation: fadeIn 0.5s;
47
+ }
48
+ @keyframes fadeIn {
49
+ from { opacity: 0; }
50
+ to { opacity: 1; }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 font-sans">
55
+ <!-- Header -->
56
+ <header class="bg-blue-600 text-white shadow-lg">
57
+ <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
58
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
59
+ <i class="fas fa-atom text-3xl"></i>
60
+ <h1 class="text-2xl font-bold">Science Explorers</h1>
61
+ </div>
62
+ <p class="text-blue-100">DCPS Learning Activity Resource</p>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Main Content -->
67
+ <main class="container mx-auto px-4 py-8">
68
+ <!-- Hero Section -->
69
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 mb-10 text-white shadow-lg">
70
+ <div class="flex flex-col md:flex-row items-center">
71
+ <div class="md:w-2/3 mb-6 md:mb-0">
72
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Discover the Wonders of Science!</h2>
73
+ <p class="text-xl mb-6">Interactive lessons for grades K-5 covering earth science, life science, physical science, and space science.</p>
74
+ <div class="relative max-w-md">
75
+ <input type="text" placeholder="Search science topics..." class="w-full py-3 px-4 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300">
76
+ <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700"><i class="fas fa-search"></i></button>
77
+ </div>
78
+ </div>
79
+ <div class="md:w-1/3 flex justify-center">
80
+ <img src="https://cdn-icons-png.flaticon.com/512/1869/1869225.png" alt="Science experiment" class="h-48 w-auto">
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- Quick Nav -->
86
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
87
+ <a href="#life-science" class="bg-green-100 hover:bg-green-200 rounded-xl pWhen creating a responsive web app for DCPS LAR (Learning Activity Resource) focusing on science core concepts for up to 5th grade students, we'll design an interactive and engaging interface with multiple learning modules.
88
+
89
+ Here's a complete HTML file with all the functionality built in:
90
+
91
+ ```html
92
+ <!DOCTYPE html>
93
+ <html lang="en">
94
+ <head>
95
+ <meta charset="UTF-8">
96
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
97
+ <title>Science Adventures - DCPS LAR</title>
98
+ <script src="https://cdn.tailwindcss.com"></script>
99
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
100
+ <style>
101
+ /* Custom styles */
102
+ .interactive-card {
103
+ transition: all 0.3s ease;
104
+ cursor: pointer;
105
+ perspective: 1000px;
106
+ }
107
+ .interactive-card:hover {
108
+ transform: translateY(-5px);
109
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
110
+ }
111
+
112
+ .flip-card {
113
+ background-color: transparent;
114
+ perspective: 1000px;
115
+ }
116
+
117
+ .flip-card-inner {
118
+ position: relative;
119
+ width: 100%;
120
+ height: 100%;
121
+ transition: transform 0.6s;
122
+ transform-style: preserve-3d;
123
+ }
124
+
125
+ .flip-card:hover .flip-card-inner {
126
+ transform: rotateY(180deg);
127
+ }
128
+
129
+ .flip-card-front, .flip-card-back {
130
+ position: absolute;
131
+ width: 100%;
132
+ height: 100%;
133
+ backface-visibility: hidden;
134
+ display: flex;
135
+ flex-direction: column;
136
+ justify-content: center;
137
+ align-items: center;
138
+ border-radius: 0.5rem;
139
+ padding: 1.5rem;
140
+ }
141
+
142
+ .flip-card-back {
143
+ transform: rotateY(180deg);
144
+ }
145
+
146
+ .tab-content {
147
+ display: none;
148
+ }
149
+
150
+ .tab-content.active {
151
+ display: block;
152
+ animation: fadeIn 0.5s;
153
+ }
154
+
155
+ @keyframes fadeIn {
156
+ from { opacity: 0; }
157
+ to { opacity: 1; }
158
+ }
159
+
160
+ .progress-bar {
161
+ height: 10px;
162
+ border-radius: 5px;
163
+ transition: width 0.5s ease;
164
+ }
165
+
166
+ .science-animation {
167
+ animation: float 3s ease-in-out infinite;
168
+ }
169
+
170
+ @keyframes float {
171
+ 0%, 100% { transform: translateY(0); }
172
+ 50% { transform: translateY(-10px); }
173
+ }
174
+
175
+ .search-highlight {
176
+ background-color: rgba(59, 130, 246, 0.1);
177
+ border-left: 4px solid rgb(59, 130, 246);
178
+ padding-left: 0.5rem;
179
+ }
180
+ </style>
181
+ </head>
182
+ <body class="bg-gray-50 font-sans min-h-screen">
183
+ <!-- Header -->
184
+ <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg">
185
+ <div class="container mx-auto px-4 py-4">
186
+ <div class="flex flex-col md:flex-row justify-between items-center">
187
+ <div class="flex items-center space-x-3">
188
+ <i class="fas fa-flask text-3xl text-yellow-300 science-animation"></i>
189
+ <div>
190
+ <h1 class="text-2xl md:text-3xl font-bold">Science Adventures</h1>
191
+ <p class="text-blue-100 text-sm">DCPS Learning Activity Resource</p>
192
+ </div>
193
+ </div>
194
+ <div class="mt-4 md:mt-0 relative w-full md:w-auto">
195
+ <div class="relative">
196
+ <input type="text" id="searchInput" placeholder="Search science topics..."
197
+ class="py-2 px-4 pr-10 rounded-full text-gray-800 w-full md:w-64 focus:outline-none focus:ring-2 focus:ring-blue-300">
198
+ <button class="absolute right-3 top-2 text-gray-500">
199
+ <i class="fas fa-search"></i>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </header>
206
+
207
+ <!-- Main Navigation -->
208
+ <nav class="bg-white shadow-md sticky top-0 z-10">
209
+ <div class="container mx-auto px-4 py-3">
210
+ <div class="flex overflow-x-auto space-x-6 hide-scrollbar">
211
+ <a href="#" class="tab-link active px-2 py-1 whitespace-nowrap text-blue-600 border-b-2 border-blue-600 font-medium" data-tab="home">Home</a>
212
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="earth">Earth Science</a>
213
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="life">Life Science</a>
214
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="physical">Physical Science</a>
215
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="space">Space Science</a>
216
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="experiments">Experiments</a>
217
+ <a href="#" class="tab-link px-2 py-1 whitespace-nowrap text-gray-600 hover:text-blue-600" data-tab="quizzes">Quizzes</a>
218
+ </div>
219
+ </div>
220
+ </nav>
221
+
222
+ <!-- Main Content -->
223
+ <main class="container mx-auto px-4 py-8">
224
+ <!-- Home Tab -->
225
+ <div id="home" class="tab-content active">
226
+ <!-- Welcome Section -->
227
+ <section class="mb-12 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 md:p-8 shadow-sm">
228
+ <div class="flex flex-col md:flex-row items-center">
229
+ <div class="md:w-2/3 mb-6 md:mb-0 md:pr-8">
230
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Welcome Young Scientists!</h2>
231
+ <p class="text-lg text-gray-700 mb-6">Explore the exciting world of science through interactive lessons, fun experiments, and challenging quizzes. Designed specifically for K-5 students in Duval County.</p>
232
+ <div class="flex flex-col sm:flex-row gap-3">
233
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-md transition duration-300">
234
+ <i class="fas fa-play mr-2"></i> Start Learning
235
+ </button>
236
+ <button class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-lg shadow-sm transition duration-300">
237
+ <i class="fas fa-graduation-cap mr-2"></i> Teacher Resources
238
+ </button>
239
+ </div>
240
+ </div>
241
+ <div class="md:w-1/3">
242
+ <img src="https://cdn-icons-png.flaticon.com/512/1869/1869379.png" alt="Kids learning science" class="w-64 h-64 mx-auto">
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Progress Tracker -->
248
+ <section class="mb-12 bg-white rounded-xl p-6 shadow-sm">
249
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Your Learning Progress</h3>
250
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
251
+ <div class="bg-blue-50 rounded-lg p-4">
252
+ <div class="flex justify-between mb-2">
253
+ <span class="font-medium">Earth Science</span>
254
+ <span>25%</span>
255
+ </div>
256
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
257
+ <div class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div>
258
+ </div>
259
+ </div>
260
+ <div class="bg-green-50 rounded-lg p-4">
261
+ <div class="flex justify-between mb-2">
262
+ <span class="font-medium">Life Science</span>
263
+ <span>40%</span>
264
+ </div>
265
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
266
+ <div class="progress-bar bg-green-600 h-2.5 rounded-full" style="width: 40%"></div>
267
+ </div>
268
+ </div>
269
+ <div class="bg-purple-50 rounded-lg p-4">
270
+ <div class="flex justify-between mb-2">
271
+ <span class="font-medium">Physical Science</span>
272
+ <span>10%</span>
273
+ </div>
274
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
275
+ <div class="progress-bar bg-purple-600 h-2.5 rounded-full" style="width: 10%"></div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Science News -->
282
+ <section class="mb-12">
283
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Science News for Kids</h3>
284
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
285
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
286
+ <div class="h-40 bg-blue-100 flex items-center justify-center">
287
+ <i class="fas fa-leaf text-5xl text-green-600"></i>
288
+ </div>
289
+ <div class="p-4">
290
+ <h4 class="font-bold text-lg mb-2 text-gray-800">New Green Energy Discovery</h4>
291
+ <p class="text-gray-600 mb-3">Scientists have found a new way to make energy from plants that could help our planet.</p>
292
+ <button class="text-blue-600 hover:text-blue-800 font-medium">Read More</button>
293
+ </div>
294
+ </div>
295
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
296
+ <div class="h-40 bg-purple-100 flex items-center justify-center">
297
+ <i class="fas fa-rocket text-5xl text-purple-600"></i>
298
+ </div>
299
+ <div class="p-4">
300
+ <h4 class="font-bold text-lg mb-2 text-gray-800">Mission to Mars</h4>
301
+ <p class="text-gray-600 mb-3">The first kids might visit Mars in 2030! Learn about the amazing plans.</p>
302
+ <button class="text-blue-600 hover:text-blue-800 font-medium">Read More</button>
303
+ </div>
304
+ </div>
305
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
306
+ <div class="h-40 bg-yellow-100 flex items-center justify-center">
307
+ <i class="fas fa-dna text-5xl text-blue-600"></i>
308
+ </div>
309
+ <div class="p-4">
310
+ <h4 class="font-bold text-lg mb-2 text-gray-800">Dinosaur DNA Discovered</h4>
311
+ <p class="text-gray-600 mb-3">Scientists found tiny clues about dinosaur DNA that could change what we know.</p>
312
+ <button class="text-blue-600 hover:text-blue-800 font-medium">Read More</button>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Popular Lessons -->
319
+ <section class="mb-12">
320
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Popular Science Lessons</h3>
321
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
322
+ <!-- Lesson 1 -->
323
+ <div class="interactive-card bg-white rounded-lg overflow-hidden shadow-md">
324
+ <div class="h-40 bg-green-100 flex items-center justify-center">
325
+ <i class="fas fa-seedling text-6xl text-green-600"></i>
326
+ </div>
327
+ <div class="p-4">
328
+ <h4 class="font-bold mb-2 text-gray-800">Plant Life Cycle</h4>
329
+ <p class="text-gray-600 text-sm mb-3">Learn how plants grow from tiny seeds to big trees.</p>
330
+ <div class="flex justify-between items-center">
331
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Grade K-2</span>
332
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Start ></button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Lesson 2 -->
338
+ <div class="interactive-card bg-white rounded-lg overflow-hidden shadow-md">
339
+ <div class="h-40 bg-red-100 flex items-center justify-center">
340
+ <i class="fas fa-volcano text-6xl text-red-600"></i>
341
+ </div>
342
+ <div class="p-4">
343
+ <h4 class="font-bold mb-2 text-gray-800">Volcanoes Explained</h4>
344
+ <p class="text-gray-600 text-sm mb-3">Discover what makes volcanoes erupt and why.</p>
345
+ <div class="flex justify-between items-center">
346
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Grade 3-5</span>
347
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Start ></button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Lesson 3 -->
353
+ <div class="interactive-card bg-white rounded-lg overflow-hidden shadow-md">
354
+ <div class="h-40 bg-yellow-100 flex items-center justify-center">
355
+ <i class="fas fa-atom text-6xl text-yellow-600"></i>
356
+ </div>
357
+ <div class="p-4">
358
+ <h4 class="font-bold mb-2 text-gray-800">Simple Molecules</h4>
359
+ <p class="text-gray-600 text-sm mb-3">Find out how tiny atoms join to make everything.</p>
360
+ <div class="flex justify-between items-center">
361
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Grade 2-4</span>
362
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Start ></button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Lesson 4 -->
368
+ <div class="interactive-card bg-white rounded-lg overflow-hidden shadow-md">
369
+ <div class="h-40 bg-indigo-100 flex items-center justify-center">
370
+ <i class="fas fa-moon text-6xl text-indigo-600"></i>
371
+ </div>
372
+ <div class="p-4">
373
+ <h4 class="font-bold mb-2 text-gray-800">Moon Phases</h4>
374
+ <p class="text-gray-600 text-sm mb-3">Understand why the moon looks different each night.</p>
375
+ <div class="flex justify-between items-center">
376
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Grade 1-3</span>
377
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Start ></button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Fun Science Facts -->
385
+ <section class="mb-12">
386
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Fun Science Facts</h3>
387
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
388
+ <!-- Flip Card 1 -->
389
+ <div class="flip-card h-48">
390
+ <div class="flip-card-inner rounded-xl shadow-md">
391
+ <div class="flip-card-front bg-blue-100 p-4 flex flex-col items-center justify-center">
392
+ <i class="fas fa-water text-4xl text-blue-600 mb-3"></i>
393
+ <h4 class="font-bold text-center">Did you know?</h4>
394
+ </div>
395
+ <div class="flip-card-back bg-blue-600 text-white p-4">
396
+ <p class="text-center">Water is the only substance on Earth that naturally exists in all three states: solid, liquid, and gas.</p>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Flip Card 2 -->
402
+ <div class="flip-card h-48">
403
+ <div class="flip-card-inner rounded-xl shadow-md">
404
+ <div class="flip-card-front bg-green-100 p-4 flex flex-col items-center justify-center">
405
+ <i class="fas fa-tree text-4xl text-green-600 mb-3"></i>
406
+ <h4 class="font-bold text-center">Did you know?</h4>
407
+ </div>
408
+ <div class="flip-card-back bg-green-600 text-white p-4">
409
+ <p class="text-center">A single tree can provide a day's supply of oxygen for up to four people!</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Flip Card 3 -->
415
+ <div class="flip-card h-48">
416
+ <div class="flip-card-inner rounded-xl shadow-md">
417
+ <div class="flip-card-front bg-purple-100 p-4 flex flex-col items-center justify-center">
418
+ <i class="fas fa-bolt text-4xl text-purple-600 mb-3"></i>
419
+ <h4 class="font-bold text-center">Did you know?</h4>
420
+ </div>
421
+ <div class="flip-card-back bg-purple-600 text-white p-4">
422
+ <p class="text-center">Lightning can heat the air it passes through to 30,000°C - that's hotter than the surface of the sun!</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Flip Card 4 -->
428
+ <div class="flip-card h-48">
429
+ <div class="flip-card-inner rounded-xl shadow-md">
430
+ <div class="flip-card-front bg-yellow-100 p-4 flex flex-col items-center justify-center">
431
+ <i class="fas fa-heartbeat text-4xl text-red-600 mb-3"></i>
432
+ <h4 class="font-bold text-center">Did you know?</h4>
433
+ </div>
434
+ <div class="flip-card-back bg-red-600 text-white p-4">
435
+ <p class="text-center">Your heart beats about 100,000 times every day, pumping about 7,500 liters of blood!</p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+ </div>
442
+
443
+ <!-- Earth Science Tab -->
444
+ <div id="earth" class="tab-content">
445
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Earth Science</h2>
446
+ <div class="bg-white rounded-xl p-6 shadow-sm mb-8">
447
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Lesson Modules</h3>
448
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
449
+ <!-- Lesson Module 1 -->
450
+ <div class="bg-blue-50 hover:bg-blue-100 rounded-lg p-4 border border-blue-200 transition duration-300 cursor-pointer">
451
+ <div class="flex items-start">
452
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
453
+ <i class="fas fa-mountain text-blue-600 text-xl"></i>
454
+ </div>
455
+ <div>
456
+ <h4 class="font-bold mb-1 text-gray-800">Rocks & Minerals</h4>
457
+ <p class="text-gray-600 text-sm mb-2">Learn about different types of rocks and how minerals form the Earth's crust.</p>
458
+ <div class="flex items-center text-sm text-gray-500">
459
+ <i class="fas fa-clock mr-1"></i>
460
+ <span>15 min</span>
461
+ <span class="mx-2">•</span>
462
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
463
+ <span>4.8</span>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Lesson Module 2 -->
470
+ <div class="bg-green-50 hover:bg-green-100 rounded-lg p-4 border border-green-200 transition duration-300 cursor-pointer">
471
+ <div class="flex items-start">
472
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
473
+ <i class="fas fa-water text-green-600 text-xl"></i>
474
+ </div>
475
+ <div>
476
+ <h4 class="font-bold mb-1 text-gray-800">Water Cycle</h4>
477
+ <p class="text-gray-600 text-sm mb-2">Discover how water moves through evaporation, condensation, and precipitation.</p>
478
+ <div class="flex items-center text-sm text-gray-500">
479
+ <i class="fas fa-clock mr-1"></i>
480
+ <span>20 min</span>
481
+ <span class="mx-2">•</span>
482
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
483
+ <span>4.7</span>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Lesson Module 3 -->
490
+ <div class="bg-yellow-50 hover:bg-yellow-100 rounded-lg p-4 border border-yellow-200 transition duration-300 cursor-pointer">
491
+ <div class="flex items-start">
492
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
493
+ <i class="fas fa-wind text-yellow-600 text-xl"></i>
494
+ </div>
495
+ <div>
496
+ <h4 class="font-bold mb-1 text-gray-800">Weather Patterns</h4>
497
+ <p class="text-gray-600 text-sm mb-2">Understand how temperature, wind, and moisture create different weather conditions.</p>
498
+ <div class="flex items-center text-sm text-gray-500">
499
+ <i class="fas fa-clock mr-1"></i>
500
+ <span>25 min</span>
501
+ <span class="mx-2">•</span>
502
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
503
+ <span>4.9</span>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Lesson Module 4 -->
510
+ <div class="bg-red-50 hover:bg-red-100 rounded-lg p-4 border border-red-200 transition duration-300 cursor-pointer">
511
+ <div class="flex items-start">
512
+ <div class="bg-red-100 p-3 rounded-lg mr-4">
513
+ <i class="fas fa-volcano text-red-600 text-xl"></i>
514
+ </div>
515
+ <div>
516
+ <h4 class="font-bold mb-1 text-gray-800">Volcanoes & Earthquakes</h4>
517
+ <p class="text-gray-600 text-sm mb-2">Explore the powerful forces that shape the Earth's surface.</p>
518
+ <div class="flex items-center text-sm text-gray-500">
519
+ <i class="fas fa-clock mr-1"></i>
520
+ <span>30 min</span>
521
+ <span class="mx-2">•</span>
522
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
523
+ <span>4.6</span>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Lesson Module 5 -->
530
+ <div class="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-4 border border-indigo-200 transition duration-300 cursor-pointer">
531
+ <div class="flex items-start">
532
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
533
+ <i class="fas fa-globe-americas text-indigo-600 text-xl"></i>
534
+ </div>
535
+ <div>
536
+ <h4 class="font-bold mb-1 text-gray-800">Continents & Oceans</h4>
537
+ <p class="text-gray-600 text-sm mb-2">Learn about the major landmasses and water bodies that make up our planet.</p>
538
+ <div class="flex items-center text-sm text-gray-500">
539
+ <i class="fas fa-clock mr-1"></i>
540
+ <span>15 min</span>
541
+ <span class="mx-2">•</span>
542
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
543
+ <span>4.5</span>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Lesson Module 6 -->
550
+ <div class="bg-purple-50 hover:bg-purple-100 rounded-lg p-4 border border-purple-200 transition duration-300 cursor-pointer">
551
+ <div class="flex items-start">
552
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
553
+ <i class="fas fa-recycle text-purple-600 text-xl"></i>
554
+ </div>
555
+ <div>
556
+ <h4 class="font-bold mb-1 text-gray-800">Recycling & Conservation</h4>
557
+ <p class="text-gray-600 text-sm mb-2">Discover how to protect Earth's resources through reduce, reuse, and recycle.</p>
558
+ <div class="flex items-center text-sm text-gray-500">
559
+ <i class="fas fa-clock mr-1"></i>
560
+ <span>20 min</span>
561
+ <span class="mx-2">•</span>
562
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
563
+ <span>4.8</span>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="bg-white rounded-xl p-6 shadow-sm">
572
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Interactive Activities</h3>
573
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
574
+ <div class="bg-blue-50 rounded-xl p-6">
575
+ <h4 class="font-bold mb-3 text-gray-800">Build a Volcano</h4>
576
+ <p class="text-gray-600 mb-4">Create your own working volcano model and make it erupt with baking soda and vinegar!</p>
577
+ <div class="flex items-center">
578
+ <div class="w-20 h-20 bg-blue-100 rounded-lg mr-4 flex items-center justify-center">
579
+ <i class="fas fa-vial text-3xl text-blue-600"></i>
580
+ </div>
581
+ <div>
582
+ <p class="text-sm text-gray-500 mb-2"><i class="fas fa-clock mr-1"></i> 30 minutes</p>
583
+ <p class="text-sm text-gray-500"><i class="fas fa-user-graduate mr-1"></i> Difficulty: Medium</p>
584
+ </div>
585
+ </div>
586
+ <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-sm transition duration-300">
587
+ View Instructions
588
+ </button>
589
+ </div>
590
+
591
+ <div class="bg-green-50 rounded-xl p-6">
592
+ <h4 class="font-bold mb-3 text-gray-800">Water Cycle in a Bag</h4>
593
+ <p class="text-gray-600 mb-4">Watch the water cycle happen right before your eyes with this simple experiment.</p>
594
+ <div class="flex items-center">
595
+ <div class="w-20 h-20 bg-green-100 rounded-lg mr-4 flex items-center justify-center">
596
+ <i class="fas fa-tint text-3xl text-green-600"></i>
597
+ </div>
598
+ <div>
599
+ <p class="text-sm text-gray-500 mb-2"><i class="fas fa-clock mr-1"></i> 15 minutes</p>
600
+ <p class="text-sm text-gray-500"><i class="fas fa-user-graduate mr-1"></i> Difficulty: Easy</p>
601
+ </div>
602
+ </div>
603
+ <button class="mt-4 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg shadow-sm transition duration-300">
604
+ View Instructions
605
+ </button>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- Other tabs would follow the same pattern -->
612
+ <!-- For brevity, I've included only Home and Earth Science tabs as examples -->
613
+ <!-- The other tabs (Life Science, Physical Science, Space Science, Experiments, Quizzes) -->
614
+ <!-- would have similar structures customized for their specific content areas -->
615
+
616
+ <!-- Placeholder content for other tabs -->
617
+ <div id="life" class="tab-content">
618
+ <div class="flex flex-col items-center justify-center h-64 bg-green-50 rounded-xl">
619
+ <i class="fas fa-leaf text-5xl text-green-600 mb-4"></i>
620
+ <h2 class="text-2xl font-bold text-gray-800">Life Science</h2>
621
+ <p class="text-gray-600">Plant and animal biology coming soon!</p>
622
+ </div>
623
+ </div>
624
+
625
+ <div id="physical" class="tab-content">
626
+ <div class="flex flex-col items-center justify-center h-64 bg-yellow-50 rounded-xl">
627
+ <i class="fas fa-atom text-5xl text-yellow-600 mb-4"></i>
628
+ <h2 class="text-2xl font-bold text-gray-800">Physical Science</h2>
629
+ <p class="text-gray-600">Chemistry and physics coming soon!</p>
630
+ </div>
631
+ </div>
632
+
633
+ <div id="space" class="tab-content">
634
+ <div class="flex flex-col items-center justify-center h-64 bg-purple-50 rounded-xl">
635
+ <i class="fas fa-rocket text-5xl text-purple-600 mb-4"></i>
636
+ <h2 class="text-2xl font-bold text-gray-800">Space Science</h2>
637
+ <p class="text-gray-600">Astronomy and space exploration coming soon!</p>
638
+ </div>
639
+ </div>
640
+
641
+ <div id="experiments" class="tab-content">
642
+ <div class="flex flex-col items-center justify-center h-64 bg-red-50 rounded-xl">
643
+ <i class="fas fa-flask text-5xl text-red-600 mb-4"></i>
644
+ <h2 class="text-2xl font-bold text-gray-800">Science Experiments</h2>
645
+ <p class="text-gray-600">Hands-on experiments coming soon!</p>
646
+ </div>
647
+ </div>
648
+
649
+ <div id="quizzes" class="tab-content">
650
+ <div class="flex flex-col items-center justify-center h-64 bg-indigo-50 rounded-xl">
651
+ <i class="fas fa-question-circle text-5xl text-indigo-600 mb-4"></i>
652
+ <h2 class="text-2xl font-bold text-gray-800">Science Quizzes</h2>
653
+ <p class="text-gray-600">Test your knowledge - coming soon!</p>
654
+ </div>
655
+ </div>
656
+ </main>
657
+
658
+ <!-- Footer -->
659
+ <footer class="bg-gray-800 text-white py-8">
660
+ <div class="container mx-auto px-4">
661
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
662
+ <div>
663
+ <h4 class="font-bold text-lg mb-4">Science Explorers</h4>
664
+ <p class="text-gray-300">An official DCPS Learning Activity Resource for K-5 science education.</p>
665
+ </div>
666
+ <div>
667
+ <h4 class="font-bold text-lg mb-4">Quick Links</h4>
668
+ <ul class="space-y-2">
669
+ <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
670
+ <li><a href="#" class="text-gray-300 hover:text-white">Earth Science</a></li>
671
+ <li><a href="#" class="text-gray-300 hover:text-white">Life Science</a></li>
672
+ <li><a href="#" class="text-gray-300 hover:text-white">Physical Science</a></li>
673
+ </ul>
674
+ </div>
675
+ <div>
676
+ <h4 class="font-bold text-lg mb-4">Resources</h4>
677
+ <ul class="space-y-2">
678
+ <li><a href="#" class="text-gray-300 hover:text-white">Teacher Guides</a></li>
679
+ <li><a href="#" class="text-gray-300 hover:text-white">Printable Worksheets</a></li>
680
+ <li><a href="#" class="text-gray-300 hover:text-white">Science Standards</a></li>
681
+ <li><a href="#" class="text-gray-300 hover:text-white">Experiments</a></li>
682
+ </ul>
683
+ </div>
684
+ <div>
685
+ <h4 class="font-bold text-lg mb-4">Connect</h4>
686
+ <p class="text-gray-300 mb-4">Questions? Contact your science teacher or:</p>
687
+ <div class="flex space-x-4">
688
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
689
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
690
+ <a href="#" class="text-gray-300 hover:text-white text-xl"><i class="fas fa-envelope"></i></a>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
695
+ <p>© 2023 Duval County Public Schools - Science Explorers Program. All rights reserved.</p>
696
+ </div>
697
+ </div>
698
+ </footer>
699
+
700
+ <script>
701
+ // Tab switching functionality
702
+ document.addEventListener('DOMContentLoaded', function() {
703
+ const tabLinks = document.querySelectorAll('.tab-link');
704
+ const tabContents = document.querySelectorAll('.tab-content');
705
+
706
+ tabLinks.forEach(link => {
707
+ link.addEventListener('click', function(e) {
708
+ e.preventDefault();
709
+
710
+ // Remove active class from all links and contents
711
+ tabLinks.forEach(l => l.classList.remove('active', 'text-blue-600', 'border-blue-600'));
712
+ tabContents.forEach(c => c.classList.remove('active'));
713
+
714
+ // Add active class to clicked link and corresponding content
715
+ const tabId = this.getAttribute('data-tab');
716
+ this.classList.add('active', 'text-blue-600', 'border-blue-600');
717
+ document.getElementById(tabId).classList.add('active');
718
+ });
719
+ });
720
+
721
+ // Simple search functionality
722
+ const searchInput = document.getElementById('searchInput');
723
+ searchInput.addEventListener('input', function() {
724
+ const searchTerm = this.value.toLowerCase();
725
+ if (searchTerm.length > 0) {
726
+ // In a real app, this would search through lessons and highlight matches
727
+ console.log('Searching for:', searchTerm);
728
+ }
729
+ });
730
+
731
+ // Interactive progress bar animation
732
+ const progressBars = document.querySelectorAll('.progress-bar');
733
+ progressBars.forEach(bar => {
734
+ const targetWidth = bar.style.width;
735
+ bar.style.width = '0%';
736
+ setTimeout(() => {
737
+ bar.style.width = targetWidth;
738
+ }, 100);
739
+ });
740
+ });
741
+ </script>
742
+ <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=AARIFSHABIR/change" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
743
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Please make an app for free for DCPS LAR checking core concepts of science covering innovative concepts with precesion upto 5 grade students