Hugging Face's logo

Spaces:
SHIMSHAM2009
/
quantum-tutor
Running

App Files Community
SHIMSHAM2009 commited on
Commit
7e9d6bb
·
verified ·
1 Parent(s): 566bb35

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +900 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quantum Tutor
3
- emoji: 📊
4
- colorFrom: green
5
- colorTo: purple
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: quantum-tutor
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,900 @@
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>Quantum Tutor - AI Physics Learning Platform</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
+ /* Custom styles */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ }
14
+ .topic-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+ .chat-message.ai {
19
+ background-color: #f0f4ff;
20
+ border-radius: 18px 18px 18px 4px;
21
+ }
22
+ .chat-message.user {
23
+ background-color: #e3f2fd;
24
+ border-radius: 18px 18px 4px 18px;
25
+ }
26
+ .simulation-window {
27
+ min-height: 300px;
28
+ background-color: #f8fafc;
29
+ border: 1px solid #e2e8f0;
30
+ }
31
+ .tab-active {
32
+ border-bottom: 3px solid #4f46e5;
33
+ color: #4f46e5;
34
+ font-weight: 600;
35
+ }
36
+ .formula-box {
37
+ background-color: #f5f3ff;
38
+ border-left: 4px solid #8b5cf6;
39
+ }
40
+ .progress-ring {
41
+ transition: stroke-dashoffset 0.5s;
42
+ transform: rotate(-90deg);
43
+ transform-origin: 50% 50%;
44
+ }
45
+ .dark .gradient-bg {
46
+ background: linear-gradient(135deg, #4b6cb7, #182848);
47
+ }
48
+ .dark .chat-message.ai {
49
+ background-color: #1e293b;
50
+ }
51
+ .dark .chat-message.user {
52
+ background-color: #334155;
53
+ }
54
+ .dark .formula-box {
55
+ background-color: #1e1b4b;
56
+ border-left: 4px solid #7c3aed;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-200">
61
+ <!-- Navigation -->
62
+ <nav class="gradient-bg text-white shadow-lg">
63
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
64
+ <div class="flex items-center space-x-2">
65
+ <i class="fas fa-atom text-2xl"></i>
66
+ <span class="text-xl font-bold">Quantum Tutor</span>
67
+ </div>
68
+ <div class="hidden md:flex space-x-6">
69
+ <a href="#features" class="hover:text-gray-200 transition">Features</a>
70
+ <a href="#tutor" class="hover:text-gray-200 transition">Tutor</a>
71
+ <a href="#practice" class="hover:text-gray-200 transition">Practice</a>
72
+ <a href="#progress" class="hover:text-gray-200 transition">Progress</a>
73
+ </div>
74
+ <div class="flex items-center space-x-4">
75
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-white/10">
76
+ <i class="fas fa-moon hidden dark:block"></i>
77
+ <i class="fas fa-sun block dark:hidden"></i>
78
+ </button>
79
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
80
+ Sign In
81
+ </button>
82
+ <button class="md:hidden" id="mobile-menu-button">
83
+ <i class="fas fa-bars text-xl"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ <!-- Mobile menu -->
88
+ <div class="md:hidden hidden bg-indigo-700 px-4 py-2" id="mobile-menu">
89
+ <div class="flex flex-col space-y-3">
90
+ <a href="#features" class="text-white hover:text-gray-200 transition">Features</a>
91
+ <a href="#tutor" class="text-white hover:text-gray-200 transition">Tutor</a>
92
+ <a href="#practice" class="text-white hover:text-gray-200 transition">Practice</a>
93
+ <a href="#progress" class="text-white hover:text-gray-200 transition">Progress</a>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+
98
+ <!-- Hero Section -->
99
+ <section class="gradient-bg text-white py-16">
100
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
101
+ <div class="md:w-1/2 mb-8 md:mb-0">
102
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Master Physics with AI</h1>
103
+ <p class="text-xl mb-6">Your personalized AI tutor for all physics topics, from Newton's laws to quantum mechanics.</p>
104
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
105
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">
106
+ Start Learning Now
107
+ </button>
108
+ <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-bold hover:bg-white/10 transition">
109
+ Take a Tour
110
+ </button>
111
+ </div>
112
+ </div>
113
+ <div class="md:w-1/2 flex justify-center">
114
+ <div class="relative w-full max-w-md">
115
+ <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
116
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
117
+ <div class="relative bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-xl">
118
+ <div class="flex items-center mb-4">
119
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
120
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
121
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
122
+ <p class="text-sm ml-2">AI Physics Tutor</p>
123
+ </div>
124
+ <div class="chat-message ai mb-4 p-4">
125
+ <p>Hi! I'm your AI Physics Tutor. What would you like to learn today?</p>
126
+ <p class="text-xs text-gray-300 mt-1">Just now</p>
127
+ </div>
128
+ <div class="flex space-x-2">
129
+ <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Newton's Laws</button>
130
+ <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Quantum Physics</button>
131
+ <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Electromagnetism</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Features Section -->
140
+ <section id="features" class="py-16 bg-white dark:bg-gray-800">
141
+ <div class="container mx-auto px-4">
142
+ <h2 class="text-3xl font-bold text-center mb-12">Powerful Learning Tools</h2>
143
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
144
+ <!-- Feature 1 -->
145
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
146
+ <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mb-4">
147
+ <i class="fas fa-robot text-indigo-600 dark:text-indigo-300 text-xl"></i>
148
+ </div>
149
+ <h3 class="text-xl font-semibold mb-2">Smart Teaching Engine</h3>
150
+ <p class="text-gray-600 dark:text-gray-300">Adapts to your learning style with visual, auditory, or hands-on explanations tailored just for you.</p>
151
+ </div>
152
+ <!-- Feature 2 -->
153
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
154
+ <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
155
+ <i class="fas fa-comments text-blue-600 dark:text-blue-300 text-xl"></i>
156
+ </div>
157
+ <h3 class="text-xl font-semibold mb-2">Physics Chatbot</h3>
158
+ <p class="text-gray-600 dark:text-gray-300">Get instant answers to any physics question with clear explanations and relevant examples.</p>
159
+ </div>
160
+ <!-- Feature 3 -->
161
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
162
+ <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
163
+ <i class="fas fa-tasks text-purple-600 dark:text-purple-300 text-xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-semibold mb-2">Practice Generator</h3>
166
+ <p class="text-gray-600 dark:text-gray-300">Customized practice problems with detailed solutions for every topic and difficulty level.</p>
167
+ </div>
168
+ <!-- Feature 4 -->
169
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
170
+ <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
171
+ <i class="fas fa-book text-green-600 dark:text-green-300 text-xl"></i>
172
+ </div>
173
+ <h3 class="text-xl font-semibold mb-2">Note Maker</h3>
174
+ <p class="text-gray-600 dark:text-gray-300">Beautiful, organized notes with formulas, diagrams, and examples that you can export.</p>
175
+ </div>
176
+ <!-- Feature 5 -->
177
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
178
+ <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mb-4">
179
+ <i class="fas fa-layer-group text-yellow-600 dark:text-yellow-300 text-xl"></i>
180
+ </div>
181
+ <h3 class="text-xl font-semibold mb-2">Flashcards</h3>
182
+ <p class="text-gray-600 dark:text-gray-300">Smart flashcards with spaced repetition to help you memorize key concepts effectively.</p>
183
+ </div>
184
+ <!-- Feature 6 -->
185
+ <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition">
186
+ <div class="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mb-4">
187
+ <i class="fas fa-chart-line text-red-600 dark:text-red-300 text-xl"></i>
188
+ </div>
189
+ <h3 class="text-xl font-semibold mb-2">Progress Tracking</h3>
190
+ <p class="text-gray-600 dark:text-gray-300">Detailed analytics and personalized study plans based on your strengths and weaknesses.</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- AI Tutor Section -->
197
+ <section id="tutor" class="py-16 bg-gray-50 dark:bg-gray-900">
198
+ <div class="container mx-auto px-4">
199
+ <h2 class="text-3xl font-bold text-center mb-12">Interactive AI Physics Tutor</h2>
200
+ <div class="flex flex-col lg:flex-row gap-8">
201
+ <!-- Topics List -->
202
+ <div class="lg:w-1/3">
203
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 sticky top-4">
204
+ <h3 class="text-xl font-semibold mb-4">Physics Topics</h3>
205
+ <div class="space-y-2">
206
+ <div class="accordion-group">
207
+ <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left">
208
+ <span>Classical Mechanics</span>
209
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
210
+ </button>
211
+ <div class="accordion-content hidden pl-4 mt-2">
212
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Newton's Laws</a>
213
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Work & Energy</a>
214
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Momentum</a>
215
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Rotational Motion</a>
216
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Gravitation</a>
217
+ </div>
218
+ </div>
219
+ <div class="accordion-group">
220
+ <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left">
221
+ <span>Electromagnetism</span>
222
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
223
+ </button>
224
+ <div class="accordion-content hidden pl-4 mt-2">
225
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Electric Fields</a>
226
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Magnetism</a>
227
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Circuits</a>
228
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Electromagnetic Waves</a>
229
+ </div>
230
+ </div>
231
+ <div class="accordion-group">
232
+ <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left">
233
+ <span>Thermodynamics</span>
234
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
235
+ </button>
236
+ <div class="accordion-content hidden pl-4 mt-2">
237
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Laws of Thermodynamics</a>
238
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Heat Transfer</a>
239
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Entropy</a>
240
+ </div>
241
+ </div>
242
+ <div class="accordion-group">
243
+ <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left">
244
+ <span>Modern Physics</span>
245
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
246
+ </button>
247
+ <div class="accordion-content hidden pl-4 mt-2">
248
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Quantum Mechanics</a>
249
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Relativity</a>
250
+ <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Nuclear Physics</a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ <!-- Tutor Content -->
257
+ <div class="lg:w-2/3">
258
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
259
+ <!-- Tutor Header -->
260
+ <div class="bg-indigo-600 text-white p-4 flex items-center">
261
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3">
262
+ <i class="fas fa-robot"></i>
263
+ </div>
264
+ <div>
265
+ <h3 class="font-semibold">AI Physics Tutor</h3>
266
+ <p class="text-xs opacity-80">Teaching: Newton's Laws of Motion</p>
267
+ </div>
268
+ <div class="ml-auto flex space-x-2">
269
+ <button class="p-2 rounded-full hover:bg-indigo-500">
270
+ <i class="fas fa-volume-up"></i>
271
+ </button>
272
+ <button class="p-2 rounded-full hover:bg-indigo-500">
273
+ <i class="fas fa-ellipsis-v"></i>
274
+ </button>
275
+ </div>
276
+ </div>
277
+ <!-- Tutor Body -->
278
+ <div class="p-4">
279
+ <div class="flex items-start mb-4">
280
+ <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3 flex-shrink-0">
281
+ <i class="fas fa-robot text-indigo-600 dark:text-indigo-300"></i>
282
+ </div>
283
+ <div class="chat-message ai p-4 max-w-3xl">
284
+ <h4 class="font-bold mb-2">Newton's First Law (Law of Inertia)</h4>
285
+ <p class="mb-3">An object at rest stays at rest and an object in motion stays in motion with the same speed and in the same direction unless acted upon by an unbalanced force.</p>
286
+ <div class="formula-box p-3 mb-3 rounded">
287
+ <p class="font-mono">ΣF = 0 ⇒ a = 0</p>
288
+ </div>
289
+ <p class="mb-3">This means if the net force on an object is zero, its acceleration is zero, maintaining its current state of motion.</p>
290
+ <div class="flex justify-center my-4">
291
+ <div class="w-full max-w-md bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
292
+ <div class="flex items-center justify-center mb-2">
293
+ <div class="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-4">
294
+ <i class="fas fa-cube text-2xl"></i>
295
+ </div>
296
+ <div>
297
+ <p class="text-sm">Try pushing a heavy box on a frictionless surface. It would keep moving forever!</p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <div class="flex space-x-2 mt-4">
303
+ <button class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full text-sm hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">
304
+ <i class="fas fa-question-circle mr-1"></i> Ask a Question
305
+ </button>
306
+ <button class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full text-sm hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">
307
+ <i class="fas fa-lightbulb mr-1"></i> Real-world Example
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <!-- Simulation -->
313
+ <div class="simulation-window rounded-lg p-4 mb-4">
314
+ <h4 class="font-semibold mb-3">Interactive Simulation: Inertia Demonstration</h4>
315
+ <div class="flex flex-col md:flex-row items-center justify-between">
316
+ <div class="w-full md:w-1/2 mb-4 md:mb-0">
317
+ <div class="relative h-48 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden">
318
+ <div id="cart" class="absolute bottom-4 left-4 w-24 h-12 bg-blue-500 rounded flex items-center justify-center transition-transform duration-300">
319
+ <div id="block" class="w-8 h-8 bg-red-500 rounded absolute -top-4 left-1/2 transform -translate-x-1/2 transition-transform duration-300"></div>
320
+ </div>
321
+ </div>
322
+ <div class="mt-3 flex justify-center space-x-4">
323
+ <button id="start-sim" class="bg-indigo-600 text-white px-4 py-1 rounded hover:bg-indigo-700 transition">
324
+ Start
325
+ </button>
326
+ <button id="reset-sim" class="bg-gray-300 dark:bg-gray-600 px-4 py-1 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">
327
+ Reset
328
+ </button>
329
+ </div>
330
+ </div>
331
+ <div class="w-full md:w-1/2 pl-0 md:pl-4">
332
+ <p class="text-sm mb-2">Observe how the block behaves when the cart suddenly stops:</p>
333
+ <ul class="text-sm list-disc pl-5 space-y-1">
334
+ <li>When moving at constant velocity (no acceleration), the block stays centered</li>
335
+ <li>When the cart stops suddenly, the block continues moving forward due to inertia</li>
336
+ <li>This demonstrates Newton's First Law in action</li>
337
+ </ul>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <!-- Learning Style Selector -->
342
+ <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 mb-4">
343
+ <h4 class="font-semibold mb-2">How would you like to learn this concept?</h4>
344
+ <div class="flex flex-wrap gap-2">
345
+ <button class="learning-style-btn px-3 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition">
346
+ <i class="fas fa-eye mr-1"></i> Visual
347
+ </button>
348
+ <button class="learning-style-btn px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 border border-blue-300 dark:border-blue-700 hover:bg-blue-200 dark:hover:bg-blue-800 transition">
349
+ <i class="fas fa-headphones mr-1"></i> Auditory
350
+ </button>
351
+ <button class="learning-style-btn px-3 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 border border-green-300 dark:border-green-700 hover:bg-green-200 dark:hover:bg-green-800 transition">
352
+ <i class="fas fa-hands mr-1"></i> Kinesthetic
353
+ </button>
354
+ <button class="learning-style-btn px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 border border-purple-300 dark:border-purple-700 hover:bg-purple-200 dark:hover:bg-purple-800 transition">
355
+ <i class="fas fa-book mr-1"></i> Reading/Writing
356
+ </button>
357
+ </div>
358
+ </div>
359
+ <!-- Chat Input -->
360
+ <div class="mt-6">
361
+ <div class="flex">
362
+ <input type="text" placeholder="Ask a question about Newton's Laws..." class="flex-grow px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
363
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition">
364
+ <i class="fas fa-paper-plane"></i>
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </section>
374
+
375
+ <!-- Practice Generator Section -->
376
+ <section id="practice" class="py-16 bg-white dark:bg-gray-800">
377
+ <div class="container mx-auto px-4">
378
+ <h2 class="text-3xl font-bold text-center mb-12">Practice Problem Generator</h2>
379
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md p-6 max-w-4xl mx-auto">
380
+ <div class="flex flex-col md:flex-row gap-6">
381
+ <!-- Controls -->
382
+ <div class="md:w-1/3">
383
+ <h3 class="text-xl font-semibold mb-4">Customize Your Practice</h3>
384
+ <div class="space-y-4">
385
+ <div>
386
+ <label class="block text-sm font-medium mb-1">Topic</label>
387
+ <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
388
+ <option>Classical Mechanics</option>
389
+ <option>Electromagnetism</option>
390
+ <option>Thermodynamics</option>
391
+ <option>Waves & Optics</option>
392
+ <option>Modern Physics</option>
393
+ </select>
394
+ </div>
395
+ <div>
396
+ <label class="block text-sm font-medium mb-1">Sub-topic</label>
397
+ <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
398
+ <option>Newton's Laws</option>
399
+ <option>Work & Energy</option>
400
+ <option>Momentum</option>
401
+ <option>Rotational Motion</option>
402
+ <option>Gravitation</option>
403
+ </select>
404
+ </div>
405
+ <div>
406
+ <label class="block text-sm font-medium mb-1">Difficulty</label>
407
+ <div class="flex space-x-2">
408
+ <button class="difficulty-btn active px-3 py-1 rounded-full bg-indigo-600 text-white">Easy</button>
409
+ <button class="difficulty-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Medium</button>
410
+ <button class="difficulty-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Hard</button>
411
+ </div>
412
+ </div>
413
+ <div>
414
+ <label class="block text-sm font-medium mb-1">Question Type</label>
415
+ <div class="flex flex-wrap gap-2">
416
+ <button class="type-btn active px-3 py-1 rounded-full bg-indigo-600 text-white">MCQ</button>
417
+ <button class="type-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Numerical</button>
418
+ <button class="type-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Conceptual</button>
419
+ </div>
420
+ </div>
421
+ <div>
422
+ <label class="block text-sm font-medium mb-1">Curriculum</label>
423
+ <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
424
+ <option>General Physics</option>
425
+ <option>AP Physics</option>
426
+ <option>IB Physics</option>
427
+ <option>A-Level Physics</option>
428
+ <option>SAT Physics</option>
429
+ </select>
430
+ </div>
431
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
432
+ <i class="fas fa-bolt mr-2"></i> Generate Practice
433
+ </button>
434
+ </div>
435
+ </div>
436
+ <!-- Problem Display -->
437
+ <div class="md:w-2/3">
438
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
439
+ <div class="flex justify-between items-center mb-4">
440
+ <div class="flex items-center">
441
+ <span class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-2 py-1 rounded text-xs font-medium mr-2">MCQ</span>
442
+ <span class="bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 px-2 py-1 rounded text-xs font-medium">Easy</span>
443
+ </div>
444
+ <div class="text-sm text-gray-500">Newton's Laws • Classical Mechanics</div>
445
+ </div>
446
+ <div class="mb-6">
447
+ <h4 class="font-semibold mb-3">A 2 kg object is moving at a constant velocity of 5 m/s. What is the net force acting on the object?</h4>
448
+ <div class="space-y-3">
449
+ <div class="flex items-center">
450
+ <input type="radio" id="option1" name="mcq" class="mr-3">
451
+ <label for="option1" class="select-none">0 N</label>
452
+ </div>
453
+ <div class="flex items-center">
454
+ <input type="radio" id="option2" name="mcq" class="mr-3">
455
+ <label for="option2" class="select-none">2 N</label>
456
+ </div>
457
+ <div class="flex items-center">
458
+ <input type="radio" id="option3" name="mcq" class="mr-3">
459
+ <label for="option3" class="select-none">5 N</label>
460
+ </div>
461
+ <div class="flex items-center">
462
+ <input type="radio" id="option4" name="mcq" class="mr-3">
463
+ <label for="option4" class="select-none">10 N</label>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <div class="flex justify-between">
468
+ <button class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-800 dark:hover:text-indigo-200 flex items-center">
469
+ <i class="fas fa-lightbulb mr-1"></i> Hint
470
+ </button>
471
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
472
+ Check Answer
473
+ </button>
474
+ </div>
475
+ </div>
476
+ <!-- Solution (initially hidden) -->
477
+ <div class="mt-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 hidden" id="solution">
478
+ <h4 class="font-semibold mb-2 flex items-center">
479
+ <i class="fas fa-check-circle text-green-500 mr-2"></i> Correct Answer: 0 N
480
+ </h4>
481
+ <div class="text-sm">
482
+ <p class="mb-2">According to Newton's First Law, an object moving at constant velocity has no net force acting on it.</p>
483
+ <div class="formula-box p-3 mb-2 rounded">
484
+ <p class="font-mono">ΣF = ma</p>
485
+ </div>
486
+ <p class="mb-2">Since velocity is constant, acceleration (a) = 0, therefore:</p>
487
+ <div class="formula-box p-3 rounded">
488
+ <p class="font-mono">ΣF = m × 0 = 0 N</p>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </section>
497
+
498
+ <!-- Progress Tracking Section -->
499
+ <section id="progress" class="py-16 bg-gray-50 dark:bg-gray-900">
500
+ <div class="container mx-auto px-4">
501
+ <h2 class="text-3xl font-bold text-center mb-12">Your Learning Progress</h2>
502
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
503
+ <!-- Progress Overview -->
504
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 md:col-span-2">
505
+ <h3 class="text-xl font-semibold mb-4">Physics Mastery</h3>
506
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
507
+ <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-4 text-center">
508
+ <div class="relative w-16 h-16 mx-auto mb-2">
509
+ <svg class="progress-ring w-full h-full" width="120" height="120">
510
+ <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
511
+ <circle class="progress-ring__circle text-indigo-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="65.312" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
512
+ </svg>
513
+ <div class="absolute inset-0 flex items-center justify-center">
514
+ <span class="text-xl font-bold">80%</span>
515
+ </div>
516
+ </div>
517
+ <p class="text-sm font-medium">Mechanics</p>
518
+ </div>
519
+ <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-center">
520
+ <div class="relative w-16 h-16 mx-auto mb-2">
521
+ <svg class="progress-ring w-full h-full" width="120" height="120">
522
+ <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
523
+ <circle class="progress-ring__circle text-blue-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="130.624" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
524
+ </svg>
525
+ <div class="absolute inset-0 flex items-center justify-center">
526
+ <span class="text-xl font-bold">60%</span>
527
+ </div>
528
+ </div>
529
+ <p class="text-sm font-medium">Electromagnetism</p>
530
+ </div>
531
+ <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 text-center">
532
+ <div class="relative w-16 h-16 mx-auto mb-2">
533
+ <svg class="progress-ring w-full h-full" width="120" height="120">
534
+ <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
535
+ <circle class="progress-ring__circle text-purple-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="195.936" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/>
536
+ </svg>
537
+ <div class="absolute inset-0 flex items-center justify-center">
538
+ <span class="text-xl font-bold">40%</span>
539
+ </div>
540
+ </div>
541
+ <p class="text-sm font-medium">Modern Physics</p>
542
+ </div>
543
+ </div>
544
+ <div class="mb-4">
545
+ <h4 class="font-semibold mb-2">Recent Activity</h4>
546
+ <div class="space-y-3">
547
+ <div class="flex items-start">
548
+ <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3 mt-1">
549
+ <i class="fas fa-check text-green-600 dark:text-green-300"></i>
550
+ </div>
551
+ <div>
552
+ <p class="font-medium">Completed Newton's Laws practice</p>
553
+ <p class="text-sm text-gray-500">10 problems • 90% accuracy • 15 mins ago</p>
554
+ </div>
555
+ </div>
556
+ <div class="flex items-start">
557
+ <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3 mt-1">
558
+ <i class="fas fa-book-open text-blue-600 dark:text-blue-300"></i>
559
+ </div>
560
+ <div>
561
+ <p class="font-medium">Studied Electromagnetic Induction</p>
562
+ <p class="text-sm text-gray-500">25 minutes • 1 hour ago</p>
563
+ </div>
564
+ </div>
565
+ <div class="flex items-start">
566
+ <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3 mt-1">
567
+ <i class="fas fa-flask text-yellow-600 dark:text-yellow-300"></i>
568
+ </div>
569
+ <div>
570
+ <p class="font-medium">Tried Quantum Mechanics simulation</p>
571
+ <p class="text-sm text-gray-500">3 experiments • 2 hours ago</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ <!-- Study Plan -->
578
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
579
+ <h3 class="text-xl font-semibold mb-4">Recommended Study Plan</h3>
580
+ <div class="mb-4">
581
+ <h4 class="font-medium mb-2">Today's Focus</h4>
582
+ <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-3 mb-2">
583
+ <div class="flex items-center">
584
+ <input type="checkbox" id="task1" class="mr-3">
585
+ <label for="task1" class="flex-1">Review Circular Motion concepts</label>
586
+ </div>
587
+ </div>
588
+ <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 mb-2">
589
+ <div class="flex items-center">
590
+ <input type="checkbox" id="task2" class="mr-3">
591
+ <label for="task2" class="flex-1">Practice 5 centripetal force problems</label>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ <div class="mb-6">
596
+ <h4 class="font-medium mb-2">Upcoming Topics</h4>
597
+ <div class="space-y-2">
598
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
599
+ <span>Gravitational Fields</span>
600
+ <span class="text-sm text-gray-500">Tomorrow</span>
601
+ </div>
602
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
603
+ <span>Electric Potential</span>
604
+ <span class="text-sm text-gray-500">In 2 days</span>
605
+ </div>
606
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
607
+ <span>Wave-Particle Duality</span>
608
+ <span class="text-sm text-gray-500">In 4 days</span>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
613
+ Generate New Study Plan
614
+ </button>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </section>
619
+
620
+ <!-- Flashcards Section -->
621
+ <section class="py-16 bg-white dark:bg-gray-800">
622
+ <div class="container mx-auto px-4">
623
+ <h2 class="text-3xl font-bold text-center mb-12">Smart Flashcards</h2>
624
+ <div class="max-w-2xl mx-auto">
625
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md p-6">
626
+ <div class="flex justify-between items-center mb-6">
627
+ <div>
628
+ <span class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-2 py-1 rounded text-xs font-medium mr-2">Mechanics</span>
629
+ <span class="text-sm text-gray-500">Card 12/25</span>
630
+ </div>
631
+ <div class="flex space-x-2">
632
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600">
633
+ <i class="fas fa-random"></i>
634
+ </button>
635
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600">
636
+ <i class="fas fa-cog"></i>
637
+ </button>
638
+ </div>
639
+ </div>
640
+ <div class="flashcard-container relative h-64 mb-6">
641
+ <div class="flashcard absolute inset-0 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center border-2 border-indigo-200 dark:border-indigo-900 transition-all duration-300 transform preserve-3d" id="flashcard">
642
+ <div class="flashcard-front flex flex-col items-center justify-center text-center">
643
+ <div class="w-16 h-16 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mb-4">
644
+ <i class="fas fa-bolt text-indigo-600 dark:text-indigo-300 text-xl"></i>
645
+ </div>
646
+ <h3 class="text-xl font-semibold mb-2">Newton's Second Law</h3>
647
+ <p class="text-gray-600 dark:text-gray-300">What is the mathematical expression of Newton's Second Law?</p>
648
+ </div>
649
+ <div class="flashcard-back absolute inset-0 flex flex-col items-center justify-center text-center bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-6 transform rotate-y-180 backface-hidden">
650
+ <div class="formula-box w-full p-4 mb-4 rounded">
651
+ <p class="font-mono text-lg">F = ma</p>
652
+ </div>
653
+ <p class="mb-2"><span class="font-semibold">F</span> = net force (N)</p>
654
+ <p class="mb-2"><span class="font-semibold">m</span> = mass (kg)</p>
655
+ <p><span class="font-semibold">a</span> = acceleration (m/s²)</p>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ <div class="flex justify-between">
660
+ <button class="bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-300 px-4 py-2 rounded-lg hover:bg-red-200 dark:hover:bg-red-800 transition">
661
+ <i class="fas fa-times mr-1"></i> Hard
662
+ </button>
663
+ <button class="bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-300 px-4 py-2 rounded-lg hover:bg-green-200 dark:hover:bg-green-800 transition">
664
+ <i class="fas fa-check mr-1"></i> Easy
665
+ </button>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </section>
671
+
672
+ <!-- Note Maker Section -->
673
+ <section class="py-16 bg-gray-50 dark:bg-gray-900">
674
+ <div class="container mx-auto px-4">
675
+ <h2 class="text-3xl font-bold text-center mb-12">Smart Note Maker</h2>
676
+ <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
677
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
678
+ <div class="flex space-x-2">
679
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
680
+ <i class="fas fa-bold"></i>
681
+ </button>
682
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
683
+ <i class="fas fa-italic"></i>
684
+ </button>
685
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
686
+ <i class="fas fa-list-ul"></i>
687
+ </button>
688
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
689
+ <i class="fas fa-image"></i>
690
+ </button>
691
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
692
+ <i class="fas fa-square-root-alt"></i>
693
+ </button>
694
+ </div>
695
+ <div class="flex space-x-2">
696
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
697
+ <i class="fas fa-file-pdf"></i>
698
+ </button>
699
+ <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
700
+ <i class="fas fa-download"></i>
701
+ </button>
702
+ </div>
703
+ </div>
704
+ <div class="p-6">
705
+ <input type="text" placeholder="Note Title" class="w-full text-2xl font-bold mb-4 px-2 py-1 border-b border-gray-200 dark:border-gray-700 focus:outline-none focus:border-indigo-500 dark:bg-gray-800">
706
+ <div class="flex mb-4">
707
+ <select class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg mr-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
708
+ <option>Physics</option>
709
+ <option>Mechanics</option>
710
+ <option>Electromagnetism</option>
711
+ <option>Thermodynamics</option>
712
+ <option>Modern Physics</option>
713
+ </select>
714
+ <select class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700">
715
+ <option>Newton's Laws</option>
716
+ <option>Work & Energy</option>
717
+ <option>Momentum</option>
718
+ <option>Rotational Motion</option>
719
+ </select>
720
+ </div>
721
+ <div class="prose dark:prose-invert max-w-none">
722
+ <div contenteditable="true" class="min-h-64 p-2 focus:outline-none">
723
+ <h3>Newton's First Law (Law of Inertia)</h3>
724
+ <p>An object at rest stays at rest and an object in motion stays in motion with the same speed and in the same direction unless acted upon by an unbalanced force.</p>
725
+ <div class="formula-box p-3 my-2 rounded">
726
+ <p class="font-mono">ΣF = 0 ⇒ a = 0</p>
727
+ </div>
728
+ <h3>Key Points:</h3>
729
+ <ul>
730
+ <li>Also called the law of inertia</li>
731
+ <li>Defines the concept of inertial reference frames</li>
732
+ <li>Objects resist changes to their state of motion</li>
733
+ </ul>
734
+ <h3>Examples:</h3>
735
+ <p><strong>1.</strong> A book on a table remains at rest until you push it.</p>
736
+ <p><strong>2.</strong> Passengers in a car lurch forward when the car stops suddenly.</p>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </section>
743
+
744
+ <!-- Footer -->
745
+ <footer class="gradient-bg text-white py-12">
746
+ <div class="container mx-auto px-4">
747
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
748
+ <div>
749
+ <h3 class="text-xl font-bold mb-4">Quantum Tutor</h3>
750
+ <p class="mb-4">The most advanced AI Physics learning platform for students at all levels.</p>
751
+ <div class="flex space-x-4">
752
+ <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-twitter"></i></a>
753
+ <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-facebook"></i></a>
754
+ <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-instagram"></i></a>
755
+ <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-linkedin"></i></a>
756
+ </div>
757
+ </div>
758
+ <div>
759
+ <h4 class="font-semibold mb-4">Features</h4>
760
+ <ul class="space-y-2">
761
+ <li><a href="#" class="hover:text-gray-200 transition">AI Tutor</a></li>
762
+ <li><a href="#" class="hover:text-gray-200 transition">Practice Problems</a></li>
763
+ <li><a href="#" class="hover:text-gray-200 transition">Flashcards</a></li>
764
+ <li><a href="#" class="hover:text-gray-200 transition">Progress Tracking</a></li>
765
+ </ul>
766
+ </div>
767
+ <div>
768
+ <h4 class="font-semibold mb-4">Physics Topics</h4>
769
+ <ul class="space-y-2">
770
+ <li><a href="#" class="hover:text-gray-200 transition">Classical Mechanics</a></li>
771
+ <li><a href="#" class="hover:text-gray-200 transition">Electromagnetism</a></li>
772
+ <li><a href="#" class="hover:text-gray-200 transition">Thermodynamics</a></li>
773
+ <li><a href="#" class="hover:text-gray-200 transition">Quantum Physics</a></li>
774
+ </ul>
775
+ </div>
776
+ <div>
777
+ <h4 class="font-semibold mb-4">Contact</h4>
778
+ <ul class="space-y-2">
779
+ <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@quantumtutor.com</li>
780
+ <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
781
+ <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> San Francisco, CA</li>
782
+ </ul>
783
+ </div>
784
+ </div>
785
+ <div class="border-t border-white/20 mt-8 pt-8 text-center">
786
+ <p>&copy; 2023 Quantum Tutor. All rights reserved.</p>
787
+ </div>
788
+ </div>
789
+ </footer>
790
+
791
+ <script>
792
+ // Mobile menu toggle
793
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
794
+ const mobileMenu = document.getElementById('mobile-menu');
795
+
796
+ mobileMenuButton.addEventListener('click', () => {
797
+ mobileMenu.classList.toggle('hidden');
798
+ });
799
+
800
+ // Theme toggle
801
+ const themeToggle = document.getElementById('theme-toggle');
802
+ const html = document.documentElement;
803
+
804
+ themeToggle.addEventListener('click', () => {
805
+ html.classList.toggle('dark');
806
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
807
+ });
808
+
809
+ // Check for saved theme preference
810
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
811
+ html.classList.add('dark');
812
+ } else {
813
+ html.classList.remove('dark');
814
+ }
815
+
816
+ // Accordion functionality
817
+ const accordionButtons = document.querySelectorAll('.accordion-button');
818
+
819
+ accordionButtons.forEach(button => {
820
+ button.addEventListener('click', () => {
821
+ const content = button.nextElementSibling;
822
+ const icon = button.querySelector('i');
823
+
824
+ content.classList.toggle('hidden');
825
+ icon.classList.toggle('rotate-180');
826
+ });
827
+ });
828
+
829
+ // Practice difficulty buttons
830
+ const difficultyBtns = document.querySelectorAll('.difficulty-btn');
831
+
832
+ difficultyBtns.forEach(btn => {
833
+ btn.addEventListener('click', () => {
834
+ difficultyBtns.forEach(b => b.classList.remove('active', 'bg-indigo-600', 'text-white'));
835
+ btn.classList.add('active', 'bg-indigo-600', 'text-white');
836
+ });
837
+ });
838
+
839
+ // Practice type buttons
840
+ const typeBtns = document.querySelectorAll('.type-btn');
841
+
842
+ typeBtns.forEach(btn => {
843
+ btn.addEventListener('click', () => {
844
+ typeBtns.forEach(b => b.classList.remove('active', 'bg-indigo-600', 'text-white'));
845
+ btn.classList.add('active', 'bg-indigo-600', 'text-white');
846
+ });
847
+ });
848
+
849
+ // Learning style buttons
850
+ const learningStyleBtns = document.querySelectorAll('.learning-style-btn');
851
+
852
+ learningStyleBtns.forEach(btn => {
853
+ btn.addEventListener('click', () => {
854
+ learningStyleBtns.forEach(b => {
855
+ b.classList.remove('bg-indigo-200', 'dark:bg-indigo-800', 'border-indigo-300', 'dark:border-indigo-700');
856
+ b.classList.add('bg-indigo-100', 'dark:bg-indigo-900', 'border-indigo-300', 'dark:border-indigo-700');
857
+ });
858
+ btn.classList.remove('bg-indigo-100', 'dark:bg-indigo-900');
859
+ btn.classList.add('bg-indigo-200', 'dark:bg-indigo-800');
860
+ });
861
+ });
862
+
863
+ // Simulation
864
+ const startSimBtn = document.getElementById('start-sim');
865
+ const resetSimBtn = document.getElementById('reset-sim');
866
+ const cart = document.getElementById('cart');
867
+ const block = document.getElementById('block');
868
+
869
+ startSimBtn.addEventListener('click', () => {
870
+ cart.style.transform = 'translateX(200px)';
871
+ setTimeout(() => {
872
+ cart.style.transform = 'translateX(180px)';
873
+ block.style.transform = 'translateX(20px) translateY(-20px)';
874
+ }, 1000);
875
+ });
876
+
877
+ resetSimBtn.addEventListener('click', () => {
878
+ cart.style.transform = 'translateX(0)';
879
+ block.style.transform = 'translateX(0) translateY(0)';
880
+ });
881
+
882
+ // Flashcard flip
883
+ const flashcard = document.getElementById('flashcard');
884
+
885
+ flashcard.addEventListener('click', () => {
886
+ flashcard.classList.toggle('flipped');
887
+ });
888
+
889
+ // Check answer button
890
+ const checkAnswerBtn = document.querySelector('.bg-indigo-600.text-white.px-4.py-2.rounded-lg');
891
+ const solution = document.getElementById('solution');
892
+
893
+ if (checkAnswerBtn && solution) {
894
+ checkAnswerBtn.addEventListener('click', () => {
895
+ solution.classList.toggle('hidden');
896
+ });
897
+ }
898
+ </script>
899
+ <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=SHIMSHAM2009/quantum-tutor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
900
+ </html>