Hugging Face's logo

Spaces:
AARIFSHABIR
/
anycoder-e5aaefb7
Running

App Files Community
AARIFSHABIR commited on
Commit
a967d7b
·
verified ·
1 Parent(s): 1724b05

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +589 -564
index.html CHANGED
@@ -1,12 +1,13 @@
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>Kinematics Master: Motion in One Dimension</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
@@ -19,18 +20,40 @@
19
  brand: {
20
  50: '#f0f9ff',
21
  100: '#e0f2fe',
 
 
 
22
  500: '#0ea5e9',
23
  600: '#0284c7',
 
 
24
  900: '#0c4a6e',
25
  },
26
  dark: {
27
  800: '#1e293b',
 
28
  900: '#0f172a',
 
29
  }
30
  },
31
  animation: {
32
- 'bounce-slow': 'bounce 3s infinite',
33
- 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
35
  }
36
  }
@@ -40,145 +63,407 @@
40
  /* Custom Scrollbar */
41
  ::-webkit-scrollbar {
42
  width: 8px;
 
43
  }
 
44
  ::-webkit-scrollbar-track {
45
- background: #0f172a;
46
  }
 
47
  ::-webkit-scrollbar-thumb {
48
- background: #334155;
49
  border-radius: 4px;
50
  }
 
51
  ::-webkit-scrollbar-thumb:hover {
52
- background: #475569;
53
  }
54
 
55
- /* Glassmorphism Utilities */
56
  .glass {
57
- background: rgba(30, 41, 59, 0.7);
 
 
 
 
 
 
 
58
  backdrop-filter: blur(12px);
59
- -webkit-backdrop-filter: blur(12px);
60
- border: 1px solid rgba(255, 255, 255, 0.1);
61
  }
62
 
63
  .glass-panel {
64
- background: rgba(15, 23, 42, 0.6);
65
  backdrop-filter: blur(8px);
66
- border: 1px solid rgba(148, 163, 184, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
 
69
- /* Input Range Styling */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  input[type=range] {
71
- -webkit-appearance: none;
72
- background: transparent;
73
  }
 
74
  input[type=range]::-webkit-slider-thumb {
75
  -webkit-appearance: none;
76
- height: 16px;
77
- width: 16px;
78
  border-radius: 50%;
79
- background: #38bdf8;
80
  cursor: pointer;
81
- margin-top: -6px;
82
- box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
 
 
 
 
 
 
83
  }
 
84
  input[type=range]::-webkit-slider-runnable-track {
85
  width: 100%;
86
  height: 4px;
87
  cursor: pointer;
88
- background: #334155;
89
  border-radius: 2px;
90
  }
91
-
92
  /* Canvas Container */
93
  .canvas-container {
94
  position: relative;
95
  width: 100%;
96
- height: 300px;
97
- background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
98
- border-radius: 0.75rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  overflow: hidden;
100
- box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  }
102
  </style>
103
  </head>
104
- <body class="bg-dark-900 text-slate-200 font-sans min-h-screen flex flex-col overflow-x-hidden selection:bg-brand-500 selection:text-white">
 
105
 
106
  <!-- Header -->
107
- <header class="fixed top-0 w-full z-50 glass border-b border-slate-700/50">
108
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
109
  <div class="flex items-center gap-3">
110
- <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center shadow-lg shadow-brand-500/20">
111
- <i class="fa-solid fa-atom text-white text-xl animate-spin-slow"></i>
112
  </div>
113
  <div>
114
- <h1 class="text-xl font-bold text-white tracking-tight">Kinematics<span class="text-brand-500">Master</span></h1>
 
 
115
  <p class="text-xs text-slate-400">Class 11 Physics | NEET & JEE Prep</p>
116
  </div>
117
  </div>
118
-
119
- <nav class="hidden md:flex gap-6 text-sm font-medium text-slate-300">
120
- <a href="#theory" class="hover:text-brand-400 transition-colors">Theory</a>
121
- <a href="#calculator" class="hover:text-brand-400 transition-colors">Solver</a>
122
- <a href="#simulator" class="hover:text-brand-400 transition-colors">Simulator</a>
123
- <a href="#formulas" class="hover:text-brand-400 transition-colors">Formulas</a>
124
  </nav>
125
 
126
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-mono text-slate-500 hover:text-brand-400 transition-colors hidden sm:block">
 
127
  Built with anycoder
128
  </a>
129
  </div>
130
  </header>
131
 
132
  <!-- Main Content -->
133
- <main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full space-y-16">
134
 
135
  <!-- Hero Section -->
136
- <section class="text-center space-y-6 py-10">
137
- <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-900/30 border border-brand-500/30 text-brand-300 text-xs font-medium mb-4">
138
- <span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
 
 
 
 
139
  Interactive Learning Module
140
  </div>
141
- <h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight">
142
- Master <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-purple-400">Motion in One Dimension</span>
 
 
143
  </h2>
144
- <p class="max-w-2xl mx-auto text-lg text-slate-400">
 
145
  Solve complex kinematics problems instantly. Visualize velocity, acceleration, and displacement with our interactive simulator. Designed for competitive exam aspirants.
146
  </p>
 
 
 
 
 
 
 
 
 
147
  </section>
148
 
149
  <!-- Theory Section -->
150
- <section id="theory" class="grid md:grid-cols-2 gap-8">
151
- <div class="glass-panel p-6 rounded-2xl space-y-4">
152
- <h3 class="text-xl font-bold text-white flex items-center gap-2">
153
- <i class="fa-solid fa-book-open text-brand-500"></i> Core Concepts
154
- </h3>
155
- <ul class="space-y-3 text-slate-300">
156
- <li class="flex items-start gap-3">
157
- <i class="fa-solid fa-check text-green-400 mt-1"></i>
158
- <span><strong>Distance vs Displacement:</strong> Distance is scalar (path length), Displacement is vector (change in position).</span>
 
 
 
 
 
 
 
 
 
159
  </li>
160
- <li class="flex items-start gap-3">
161
- <i class="fa-solid fa-check text-green-400 mt-1"></i>
162
- <span><strong>Speed vs Velocity:</strong> Speed is scalar (distance/time), Velocity is vector (displacement/time).</span>
 
 
 
 
 
163
  </li>
164
- <li class="flex items-start gap-3">
165
- <i class="fa-solid fa-check text-green-400 mt-1"></i>
166
- <span><strong>Acceleration:</strong> Rate of change of velocity. Uniform acceleration implies constant change in velocity.</span>
 
 
 
 
 
167
  </li>
168
  </ul>
169
  </div>
170
- <div class="glass-panel p-6 rounded-2xl space-y-4">
171
- <h3 class="text-xl font-bold text-white flex items-center gap-2">
172
- <i class="fa-solid fa-triangle-exclamation text-yellow-500"></i> Common Mistakes (JEE/NEET)
173
- </h3>
174
- <ul class="space-y-3 text-slate-300">
175
- <li class="flex items-start gap-3">
176
- <i class="fa-solid fa-xmark text-red-400 mt-1"></i>
177
- <span><strong>Sign Convention:</strong> Always define positive direction. If 'up' is positive, acceleration due to gravity (g) is negative (-9.8 m/s²).</span>
 
 
 
 
 
 
 
 
 
 
178
  </li>
179
- <li class="flex items-start gap-3">
180
- <i class="fa-solid fa-xmark text-red-400 mt-1"></i>
181
- <span><strong>Stopping Distance:</strong> When a vehicle stops, final velocity v = 0. Do not assume time is given.</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </li>
183
  </ul>
184
  </div>
@@ -186,150 +471,196 @@
186
 
187
  <!-- Interactive Solver Section -->
188
  <section id="calculator" class="space-y-8">
189
- <div class="flex items-center justify-between">
190
- <h2 class="text-3xl font-bold text-white">Smart Problem Solver</h2>
191
- <div class="text-sm text-slate-400">Select variables you know</div>
 
 
 
 
 
 
 
192
  </div>
193
 
194
- <div class="grid lg:grid-cols-3 gap-8">
195
  <!-- Inputs -->
196
- <div class="lg:col-span-1 glass-panel p-6 rounded-2xl space-y-6">
197
  <div class="space-y-4">
198
  <!-- Input Group: u -->
199
- <div class="relative group">
200
- <label class="block text-xs font-mono text-brand-400 mb-1">Initial Velocity (u)</label>
201
- <div class="flex items-center gap-2">
202
- <input type="checkbox" id="chk_u" class="w-4 h-4 rounded border-slate-600 text-brand-600 focus:ring-brand-500 bg-slate-700" onchange="toggleInput('u')">
203
- <input type="number" id="val_u" disabled placeholder="?" class="flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all">
204
- <span class="text-slate-500 text-sm w-12">m/s</span>
205
  </div>
206
  </div>
207
 
208
  <!-- Input Group: v -->
209
- <div class="relative group">
210
- <label class="block text-xs font-mono text-brand-400 mb-1">Final Velocity (v)</label>
211
- <div class="flex items-center gap-2">
212
- <input type="checkbox" id="chk_v" class="w-4 h-4 rounded border-slate-600 text-brand-600 focus:ring-brand-500 bg-slate-700" onchange="toggleInput('v')">
213
- <input type="number" id="val_v" disabled placeholder="?" class="flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all">
214
- <span class="text-slate-500 text-sm w-12">m/s</span>
215
  </div>
216
  </div>
217
 
218
  <!-- Input Group: a -->
219
- <div class="relative group">
220
- <label class="block text-xs font-mono text-brand-400 mb-1">Acceleration (a)</label>
221
- <div class="flex items-center gap-2">
222
- <input type="checkbox" id="chk_a" class="w-4 h-4 rounded border-slate-600 text-brand-600 focus:ring-brand-500 bg-slate-700" onchange="toggleInput('a')">
223
- <input type="number" id="val_a" disabled placeholder="?" class="flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all">
224
- <span class="text-slate-500 text-sm w-12">m/s²</span>
225
  </div>
226
  </div>
227
 
228
  <!-- Input Group: t -->
229
- <div class="relative group">
230
- <label class="block text-xs font-mono text-brand-400 mb-1">Time (t)</label>
231
- <div class="flex items-center gap-2">
232
- <input type="checkbox" id="chk_t" class="w-4 h-4 rounded border-slate-600 text-brand-600 focus:ring-brand-500 bg-slate-700" onchange="toggleInput('t')">
233
- <input type="number" id="val_t" disabled placeholder="?" class="flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all">
234
- <span class="text-slate-500 text-sm w-12">s</span>
235
  </div>
236
  </div>
237
 
238
  <!-- Input Group: s -->
239
- <div class="relative group">
240
- <label class="block text-xs font-mono text-brand-400 mb-1">Displacement (s)</label>
241
- <div class="flex items-center gap-2">
242
- <input type="checkbox" id="chk_s" class="w-4 h-4 rounded border-slate-600 text-brand-600 focus:ring-brand-500 bg-slate-700" onchange="toggleInput('s')">
243
- <input type="number" id="val_s" disabled placeholder="?" class="flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-all">
244
- <span class="text-slate-500 text-sm w-12">m</span>
245
  </div>
246
  </div>
247
  </div>
248
 
249
- <button onclick="solveKinematics()" class="w-full py-3 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-bold rounded-lg shadow-lg shadow-brand-500/25 transition-all transform hover:scale-[1.02] active:scale-95">
250
- <i class="fa-solid fa-calculator mr-2"></i> Solve Problem
251
- </button>
252
- <button onclick="resetSolver()" class="w-full py-2 border border-slate-600 text-slate-400 hover:text-white hover:border-slate-400 rounded-lg text-sm transition-colors">
253
- Reset
254
- </button>
 
 
 
 
255
  </div>
256
 
257
  <!-- Results & Visualization -->
258
- <div class="lg:col-span-2 space-y-6">
259
  <!-- Result Card -->
260
- <div id="result-card" class="hidden glass-panel p-6 rounded-2xl border-l-4 border-brand-500 animate-fade-in-up">
261
- <h3 class="text-lg font-bold text-white mb-4">Solution Steps</h3>
262
- <div id="solution-steps" class="space-y-3 font-mono text-sm text-slate-300">
 
 
 
 
 
 
 
 
263
  <!-- Steps injected via JS -->
264
  </div>
265
  </div>
266
 
267
  <!-- Placeholder State -->
268
- <div id="empty-state" class="h-full min-h-[300px] flex flex-col items-center justify-center glass-panel rounded-2xl border border-dashed border-slate-700 text-slate-500">
269
- <i class="fa-solid fa-wave-square text-4xl mb-4 opacity-50"></i>
270
- <p>Select at least 3 variables to solve</p>
 
 
 
271
  </div>
272
  </div>
273
  </div>
274
  </section>
275
 
276
  <!-- Simulator Section -->
277
- <section id="simulator" class="space-y-6">
278
  <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
279
  <div>
 
280
  <h2 class="text-3xl font-bold text-white">Motion Simulator</h2>
281
- <p class="text-slate-400">Visualize velocity-time graphs and particle motion.</p>
282
  </div>
283
- <div class="flex gap-2">
284
- <button onclick="setPreset('freefall')" class="px-3 py-1 text-xs bg-slate-800 border border-slate-600 rounded hover:bg-slate-700 text-brand-300">Free Fall</button>
285
- <button onclick="setPreset('acceleration')" class="px-3 py-1 text-xs bg-slate-800 border border-slate-600 rounded hover:bg-slate-700 text-brand-300">Car Acceleration</button>
286
- <button onclick="setPreset('deceleration')" class="px-3 py-1 text-xs bg-slate-800 border border-slate-600 rounded hover:bg-slate-700 text-brand-300">Braking</button>
 
 
 
 
 
 
287
  </div>
288
  </div>
289
 
290
  <div class="grid lg:grid-cols-3 gap-6">
291
  <!-- Controls -->
292
- <div class="glass-panel p-6 rounded-2xl space-y-6">
293
- <div class="space-y-4">
294
  <div>
295
- <div class="flex justify-between mb-1">
296
- <label class="text-xs text-slate-400">Initial Velocity (u)</label>
297
- <span id="sim_u_val" class="text-xs font-mono text-brand-400">0 m/s</span>
 
 
 
 
 
298
  </div>
299
- <input type="range" id="sim_u" min="-50" max="50" value="0" step="1" oninput="updateSimParams()">
300
  </div>
 
301
  <div>
302
- <div class="flex justify-between mb-1">
303
- <label class="text-xs text-slate-400">Acceleration (a)</label>
304
- <span id="sim_a_val" class="text-xs font-mono text-brand-400">2 m/s²</span>
 
 
 
 
 
305
  </div>
306
- <input type="range" id="sim_a" min="-20" max="20" value="2" step="0.5" oninput="updateSimParams()">
307
  </div>
 
308
  <div>
309
- <div class="flex justify-between mb-1">
310
- <label class="text-xs text-slate-400">Simulation Time</label>
311
- <span id="sim_t_val" class="text-xs font-mono text-brand-400">10 s</span>
 
 
 
 
 
312
  </div>
313
- <input type="range" id="sim_t" min="1" max="20" value="10" step="1" oninput="updateSimParams()">
314
  </div>
315
  </div>
316
 
317
- <div class="pt-4 border-t border-slate-700 grid grid-cols-2 gap-4">
318
- <div class="text-center p-2 bg-slate-800/50 rounded">
319
- <div class="text-xs text-slate-500">Max Velocity</div>
320
- <div id="stat_vmax" class="text-lg font-bold text-white">20 m/s</div>
 
321
  </div>
322
- <div class="text-center p-2 bg-slate-800/50 rounded">
323
- <div class="text-xs text-slate-500">Total Distance</div>
324
- <div id="stat_dist" class="text-lg font-bold text-white">100 m</div>
 
325
  </div>
326
  </div>
327
 
328
- <div class="flex gap-3">
329
- <button id="btn-play" onclick="toggleSimulation()" class="flex-1 py-2 bg-green-600 hover:bg-green-500 text-white rounded font-medium transition-colors">
330
- <i class="fa-solid fa-play mr-1"></i> Start
 
331
  </button>
332
- <button onclick="resetSimulation()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition-colors">
333
  <i class="fa-solid fa-rotate-right"></i>
334
  </button>
335
  </div>
@@ -337,46 +668,108 @@
337
 
338
  <!-- Canvas -->
339
  <div class="lg:col-span-2 space-y-4">
340
- <div class="canvas-container border border-slate-700">
341
  <canvas id="simCanvas"></canvas>
 
342
  <!-- Overlay Info -->
343
  <div class="absolute top-4 left-4 pointer-events-none">
344
- <div class="text-xs font-mono text-brand-300 bg-slate-900/80 px-2 py-1 rounded border border-brand-500/30">
345
- t = <span id="live_t">0.0</span>s | v = <span id="live_v">0.0</span>m/s | s = <span id="live_s">0.0</span>m
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  </div>
347
  </div>
348
- </div>
349
- <div class="flex justify-center gap-6 text-xs text-slate-400">
350
- <div class="flex items-center gap-2"><span class="w-3 h-3 bg-brand-500 rounded-full"></span> Position (x)</div>
351
- <div class="flex items-center gap-2"><span class="w-3 h-3 bg-purple-500 rounded-full"></span> Velocity (v)</div>
352
  </div>
353
  </div>
354
  </div>
355
  </section>
356
 
357
  <!-- Formula Sheet -->
358
- <section id="formulas" class="glass-panel p-8 rounded-2xl">
359
- <h2 class="text-2xl font-bold text-white mb-6">Essential Formula Sheet</h2>
360
- <div class="grid md:grid-cols-2 gap-6">
361
- <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
362
- <div class="text-slate-400 mb-2">// Velocity & Acceleration</div>
363
- <div class="text-white">v = u + at</div>
364
- <div class="text-slate-500 text-xs mt-1">Final velocity equals initial velocity plus acceleration times time.</div>
 
365
  </div>
366
- <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
367
- <div class="text-slate-400 mb-2">// Displacement (Time known)</div>
368
- <div class="text-white">s = ut + ½at²</div>
369
- <div class="text-slate-500 text-xs mt-1">Distance covered under constant acceleration.</div>
 
 
 
 
 
 
 
370
  </div>
371
- <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
372
- <div class="text-slate-400 mb-2">// Displacement (Time unknown)</div>
373
- <div class="text-white">v² = u² + 2as</div>
374
- <div class="text-slate-500 text-xs mt-1">Useful when time is not given in the problem.</div>
 
 
 
 
 
375
  </div>
376
- <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
377
- <div class="text-slate-400 mb-2">// Average Velocity</div>
378
- <div class="text-white">s = ½(u + v)t</div>
379
- <div class="text-slate-500 text-xs mt-1">Displacement equals average velocity multiplied by time.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
  </div>
381
  </div>
382
  </section>
@@ -384,393 +777,25 @@
384
  </main>
385
 
386
  <!-- Footer -->
387
- <footer class="border-t border-slate-800 bg-dark-900 py-8">
388
- <div class="max-w-7xl mx-auto px-4 text-center">
389
- <p class="text-slate-500 text-sm">
390
- &copy; 2023 Kinematics Master. Built for Educational Purposes.
391
- </p>
392
- <div class="mt-4 flex justify-center gap-4">
393
- <a href="#" class="text-slate-600 hover:text-brand-500 transition-colors"><i class="fa-brands fa-github"></i></a>
394
- <a href="#" class="text-slate-600 hover:text-blue-500 transition-colors"><i class="fa-brands fa-twitter"></i></a>
395
- </div>
396
- </div>
397
- </footer>
398
-
399
- <!-- Application Logic -->
400
- <script>
401
- // --- Solver Logic ---
402
-
403
- const variables = ['u', 'v', 'a', 't', 's'];
404
-
405
- function toggleInput(id) {
406
- const checkbox = document.getElementById(`chk_${id}`);
407
- const input = document.getElementById(`val_${id}`);
408
- input.disabled = !checkbox.checked;
409
- if (!checkbox.checked) input.value = '';
410
- else input.focus();
411
- }
412
-
413
- function resetSolver() {
414
- variables.forEach(v => {
415
- document.getElementById(`chk_${v}`).checked = false;
416
- document.getElementById(`val_${v}`).value = '';
417
- document.getElementById(`val_${v}`).disabled = true;
418
- });
419
- document.getElementById('result-card').classList.add('hidden');
420
- document.getElementById('empty-state').classList.remove('hidden');
421
- }
422
-
423
- function solveKinematics() {
424
- // 1. Collect Data
425
- let vals = {};
426
- let knowns = [];
427
-
428
- variables.forEach(v => {
429
- if (document.getElementById(`chk_${v}`).checked) {
430
- let val = parseFloat(document.getElementById(`val_${v}`).value);
431
- if (isNaN(val)) {
432
- alert(`Please enter a valid number for ${v}`);
433
- return;
434
- }
435
- vals[v] = val;
436
- knowns.push(v);
437
- }
438
- });
439
-
440
- if (knowns.length < 3) {
441
- alert("Please provide at least 3 variables to solve.");
442
- return;
443
- }
444
-
445
- // 2. Logic to solve for unknowns
446
- let results = {};
447
- let steps = [];
448
-
449
- // Helper to add step
450
- const addStep = (html) => steps.push(`<div class="p-3 bg-slate-800/50 rounded border-l-2 border-brand-500">${html}</div>`);
451
-
452
- // Iterative solving until all found (simple logic for 5 vars)
453
- // We try to find missing vars based on knowns.
454
-
455
- let found = {...vals};
456
- let changed = true;
457
- let iterations = 0;
458
-
459
- while(changed && iterations < 10) {
460
- changed = false;
461
- iterations++;
462
-
463
- // Logic: v = u + at
464
- if (found.v === undefined && found.u !== undefined && found.a !== undefined && found.t !== undefined) {
465
- found.v = found.u + found.a * found.t;
466
- addStep(`<strong>Found v:</strong> Using <span class="text-brand-400">v = u + at</span><br>v = ${found.u} + (${found.a})(${found.t}) = <strong>${found.v.toFixed(2)} m/s</strong>`);
467
- changed = true;
468
- }
469
- else if (found.u === undefined && found.v !== undefined && found.a !== undefined && found.t !== undefined) {
470
- found.u = found.v - found.a * found.t;
471
- addStep(`<strong>Found u:</strong> Rearranging v = u + at<br>u = ${found.v} - (${found.a})(${found.t}) = <strong>${found.u.toFixed(2)} m/s</strong>`);
472
- changed = true;
473
- }
474
- else if (found.a === undefined && found.v !== undefined && found.u !== undefined && found.t !== undefined) {
475
- found.a = (found.v - found.u) / found.t;
476
- addStep(`<strong>Found a:</strong> Rearranging v = u + at<br>a = (${found.v} - ${found.u}) / ${found.t} = <strong>${found.a.toFixed(2)} m/s²</strong>`);
477
- changed = true;
478
- }
479
- else if (found.t === undefined && found.v !== undefined && found.u !== undefined && found.a !== undefined && found.a !== 0) {
480
- found.t = (found.v - found.u) / found.a;
481
- addStep(`<strong>Found t:</strong> Rearranging v = u + at<br>t = (${found.v} - ${found.u}) / ${found.a} = <strong>${found.t.toFixed(2)} s</strong>`);
482
- changed = true;
483
- }
484
-
485
- // Logic: s = ut + 0.5at^2
486
- if (found.s === undefined && found.u !== undefined && found.t !== undefined && found.a !== undefined) {
487
- found.s = found.u * found.t + 0.5 * found.a * Math.pow(found.t, 2);
488
- addStep(`<strong>Found s:</strong> Using <span class="text-brand-400">s = ut + ½at²</span><br>s = (${found.u})(${found.t}) + 0.5(${found.a})(${found.t})² = <strong>${found.s.toFixed(2)} m</strong>`);
489
- changed = true;
490
- }
491
- else if (found.u === undefined && found.s !== undefined && found.t !== undefined && found.a !== undefined) {
492
- // s - 0.5at^2 = ut => u = (s - 0.5at^2)/t
493
- if(found.t !== 0) {
494
- found.u = (found.s - 0.5 * found.a * Math.pow(found.t, 2)) / found.t;
495
- addStep(`<strong>Found u:</strong> Rearranging s = ut + ½at²<br>u = <strong>${found.u.toFixed(2)} m/s</strong>`);
496
- changed = true;
497
- }
498
- }
499
-
500
- // Logic: v^2 = u^2 + 2as
501
- if (found.v === undefined && found.u !== undefined && found.a !== undefined && found.s !== undefined) {
502
- let v_sq = Math.pow(found.u, 2) + 2 * found.a * found.s;
503
- if (v_sq >= 0) {
504
- found.v = Math.sqrt(v_sq); // Assuming positive root for simplicity in basic solver, or could be -sqrt
505
- addStep(`<strong>Found v:</strong> Using <span class="text-brand-400">v² = u² + 2as</span><br>v = √(${found.u}² + 2(${found.a})(${found.s})) = <strong>${found.v.toFixed(2)} m/s</strong>`);
506
- changed = true;
507
- }
508
- }
509
- else if (found.s === undefined && found.v !== undefined && found.u !== undefined && found.a !== undefined && found.a !== 0) {
510
- found.s = (Math.pow(found.v, 2) - Math.pow(found.u, 2)) / (2 * found.a);
511
- addStep(`<strong>Found s:</strong> Rearranging v² = u² + 2as<br>s = <strong>${found.s.toFixed(2)} m</strong>`);
512
- changed = true;
513
- }
514
-
515
- // Logic: s = 0.5(u+v)t
516
- if (found.s === undefined && found.u !== undefined && found.v !== undefined && found.t !== undefined) {
517
- found.s = 0.5 * (found.u + found.v) * found.t;
518
- addStep(`<strong>Found s:</strong> Using <span class="text-brand-400">s = ½(u+v)t</span><br>s = 0.5(${found.u}+${found.v})(${found.t}) = <strong>${found.s.toFixed(2)} m</strong>`);
519
- changed = true;
520
- }
521
- else if (found.t === undefined && found.s !== undefined && found.u !== undefined && found.v !== undefined && (found.u+found.v) !== 0) {
522
- found.t = (2 * found.s) / (found.u + found.v);
523
- addStep(`<strong>Found t:</strong> Rearranging s = ½(u+v)t<br>t = <strong>${found.t.toFixed(2)} s</strong>`);
524
- changed = true;
525
- }
526
- }
527
-
528
- // 3. Display Results
529
- const resultCard = document.getElementById('result-card');
530
- const stepsDiv = document.getElementById('solution-steps');
531
- const emptyState = document.getElementById('empty-state');
532
-
533
- emptyState.classList.add('hidden');
534
- resultCard.classList.remove('hidden');
535
-
536
- let finalHTML = steps.join('');
537
-
538
- // Check if we solved everything
539
- let allSolved = true;
540
- variables.forEach(v => {
541
- if (found[v] === undefined) allSolved = false;
542
- });
543
-
544
- if (!allSolved) {
545
- finalHTML += `<div class="p-3 bg-yellow-900/30 text-yellow-200 rounded border border-yellow-600/50">Could not solve for all variables with current logic. Try providing different knowns (e.g., ensure time is given or can be derived).</div>`;
546
- }
547
-
548
- stepsDiv.innerHTML = finalHTML;
549
- }
550
-
551
- // --- Simulator Logic ---
552
- const canvas = document.getElementById('simCanvas');
553
- const ctx = canvas.getContext('2d');
554
- let animationId;
555
- let isPlaying = false;
556
- let simTime = 0;
557
- let simData = { u: 0, a: 2, t_total: 10 };
558
-
559
- function resizeCanvas() {
560
- const parent = canvas.parentElement;
561
- canvas.width = parent.clientWidth;
562
- canvas.height = parent.clientHeight;
563
- drawScene();
564
- }
565
- window.addEventListener('resize', resizeCanvas);
566
-
567
- function updateSimParams() {
568
- simData.u = parseFloat(document.getElementById('sim_u').value);
569
- simData.a = parseFloat(document.getElementById('sim_a').value);
570
- simData.t_total = parseFloat(document.getElementById('sim_t').value);
571
-
572
- // Update UI Labels
573
- document.getElementById('sim_u_val').innerText = simData.u + " m/s";
574
- document.getElementById('sim_a_val').innerText = simData.a + " m/s²";
575
- document.getElementById('sim_t_val').innerText = simData.t_total + " s";
576
-
577
- // Update Stats
578
- const v_final = simData.u + simData.a * simData.t_total;
579
- const s_final = simData.u * simData.t_total + 0.5 * simData.a * Math.pow(simData.t_total, 2);
580
-
581
- document.getElementById('stat_vmax').innerText = Math.abs(v_final).toFixed(1) + " m/s";
582
- document.getElementById('stat_dist').innerText = Math.abs(s_final).toFixed(1) + " m";
583
-
584
- if (!isPlaying) {
585
- drawScene();
586
- }
587
- }
588
-
589
- function setPreset(type) {
590
- if (isPlaying) toggleSimulation();
591
- simTime = 0;
592
-
593
- if (type === 'freefall') {
594
- document.getElementById('sim_u').value = 0;
595
- document.getElementById('sim_a').value = -9.8;
596
- document.getElementById('sim_t').value = 5;
597
- } else if (type === 'acceleration') {
598
- document.getElementById('sim_u').value = 5;
599
- document.getElementById('sim_a').value = 2;
600
- document.getElementById('sim_t').value = 10;
601
- } else if (type === 'deceleration') {
602
- document.getElementById('sim_u').value = 20;
603
- document.getElementById('sim_a').value = -4;
604
- document.getElementById('sim_t').value = 5;
605
- }
606
- updateSimParams();
607
- }
608
-
609
- function drawScene() {
610
- const w = canvas.width;
611
- const h = canvas.height;
612
- const pad = 40;
613
-
614
- ctx.clearRect(0, 0, w, h);
615
-
616
- // Grid
617
- ctx.strokeStyle = '#334155';
618
- ctx.lineWidth = 1;
619
- ctx.beginPath();
620
- for(let i=pad; i<w; i+=40) { ctx.moveTo(i, 0); ctx.lineTo(i, h); }
621
- for(let i=pad; i<h; i+=40) { ctx.moveTo(0, i); ctx.lineTo(w, i); }
622
- ctx.stroke();
623
-
624
- // Axes
625
- ctx.strokeStyle = '#94a3b8';
626
- ctx.lineWidth = 2;
627
- ctx.beginPath();
628
- ctx.moveTo(pad, h/2); ctx.lineTo(w, h/2); // X axis (Time)
629
- ctx.moveTo(pad, 0); ctx.lineTo(pad, h); // Y axis
630
- ctx.stroke();
631
-
632
- // Labels
633
- ctx.fillStyle = '#94a3b8';
634
- ctx.font = '12px Inter';
635
- ctx.fillText('Time (s)', w - 50, h/2 - 10);
636
- ctx.fillText('Position / Velocity', pad + 10, 15);
637
-
638
- // Calculate Scale Factors
639
- // We need to fit the entire motion into the canvas
640
- const t_max = simData.t_total;
641
- const s_max = Math.max(
642
- Math.abs(simData.u * t_max + 0.5 * simData.a * t_max * t_max),
643
- Math.abs(simData.u * t_max) // rough check
644
- ) * 1.2; // add padding
645
-
646
- const v_max = Math.max(Math.abs(simData.u), Math.abs(simData.u + simData.a * t_max)) * 1.2;
647
-
648
- const scaleX = (w - pad) / t_max;
649
- // Use two scales? No, let's normalize Y to fit both graphs
650
- // Actually, let's just draw graphs relative to center line.
651
- // Center line is 0.
652
-
653
- // Draw Velocity Graph (Purple)
654
- ctx.beginPath();
655
- ctx.strokeStyle = '#a855f7'; // Purple
656
- ctx.lineWidth = 3;
657
-
658
- let first = true;
659
- for (let t = 0; t <= simTime; t += 0.05) {
660
- const v = simData.u + simData.a * t;
661
- // Map v to Y.
662
- // Let's say max height represents max velocity magnitude.
663
- // But if velocity is negative, it goes down.
664
- // Let's normalize: 0 is center. Top is +v_max, Bottom is -v_max.
665
-
666
- // To make it look good, let's just map velocity to a portion of the screen
667
- // Or better: Map Position to top half, Velocity to bottom half?
668
- // Let's stick to: X axis is time. Y axis is value.
669
- // We need a dynamic range.
670
-
671
- // Let's just plot Position (x) on top half and Velocity (v) on bottom half?
672
- // No, standard is usually Position vs Time.
673
- // Let's plot Position vs Time (Brand Color) and Velocity Vector (Arrow).
674
-
675
- // Actually, let's plot the Position graph (s vs t)
676
- const s = simData.u * t + 0.5 * simData.a * t * t;
677
-
678
- // Mapping:
679
- // X = pad + t * scaleX
680
- // Y = h/2 - s * scaleS
681
- // We need scaleS such that s_max fits in h/2 - pad
682
- const scaleS = (h/2 - pad) / (s_max || 1);
683
-
684
- const x = pad + t * scaleX;
685
- const y = h/2 - s * scaleS;
686
-
687
- if (first) { ctx.moveTo(x, y); first = false; }
688
- else { ctx.lineTo(x, y); }
689
- }
690
- ctx.stroke();
691
-
692
- // Draw Particle
693
- const currentS = simData.u * simTime + 0.5 * simData.a * simTime * simTime;
694
- const currentV = simData.u + simData.a * simTime;
695
- const scaleS = (h/2 - pad) / (s_max || 1);
696
-
697
- const pX = pad + simTime * scaleX;
698
- const pY = h/2 - currentS * scaleS;
699
-
700
- // Particle Body
701
- ctx.fillStyle = '#38bdf8';
702
- ctx.beginPath();
703
- ctx.arc(pX, pY, 8, 0, Math.PI * 2);
704
- ctx.fill();
705
-
706
- // Velocity Vector
707
- if (Math.abs(currentV) > 0.1) {
708
- ctx.beginPath();
709
- ctx.strokeStyle = '#f472b6'; // Pink
710
- ctx.lineWidth = 2;
711
- const vScale = 5; // Visual scaling for arrow
712
- ctx.moveTo(pX, pY);
713
- ctx.lineTo(pX + currentV * vScale, pY);
714
- ctx.stroke();
715
 
716
- // Arrowhead
717
- // ... (simplified)
718
- }
719
-
720
- // Update Live Stats
721
- document.getElementById('live_t').innerText = simTime.toFixed(1);
722
- document.getElementById('live_v').innerText = currentV.toFixed(1);
723
- document.getElementById('live_s').innerText = currentS.toFixed(1);
724
- }
725
-
726
- function loop() {
727
- if (!isPlaying) return;
728
-
729
- simTime += 0.05; // Time step
730
- if (simTime > simData.t_total) {
731
- simTime = simData.t_total;
732
- isPlaying = false;
733
- document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play mr-1"></i> Replay';
734
- }
735
 
736
- drawScene();
737
- animationId = requestAnimationFrame(loop);
738
- }
739
-
740
- function toggleSimulation() {
741
- const btn = document.getElementById('btn-play');
742
- if (isPlaying) {
743
- isPlaying = false;
744
- cancelAnimationFrame(animationId);
745
- btn.innerHTML = '<i class="fa-solid fa-play mr-1"></i> Resume';
746
- btn.classList.remove('bg-red-600', 'hover:bg-red-500');
747
- btn.classList.add('bg-green-600', 'hover:bg-green-500');
748
- } else {
749
- if (simTime >= simData.t_total) simTime = 0;
750
- isPlaying = true;
751
- btn.innerHTML = '<i class="fa-solid fa-pause mr-1"></i> Pause';
752
- btn.classList.remove('bg-green-600', 'hover:bg-green-500');
753
- btn.classList.add('bg-red-600', 'hover:bg-red-500');
754
- loop();
755
- }
756
- }
757
-
758
- function resetSimulation() {
759
- isPlaying = false;
760
- cancelAnimationFrame(animationId);
761
- simTime = 0;
762
- document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play mr-1"></i> Start';
763
- document.getElementById('btn-play').classList.remove('bg-red-600', 'hover:bg-red-500');
764
- document.getElementById('btn-play').classList.add('bg-green-600', 'hover:bg-green-500');
765
- drawScene();
766
- }
767
-
768
- // Init
769
- window.onload = () => {
770
- resizeCanvas();
771
- updateSimParams();
772
- };
773
-
774
- </script>
775
- </body>
776
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Kinematics Master: Motion in One Dimension</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
11
  <script>
12
  tailwind.config = {
13
  theme: {
 
20
  brand: {
21
  50: '#f0f9ff',
22
  100: '#e0f2fe',
23
+ 200: '#bae6fd',
24
+ 300: '#7dd3fc',
25
+ 400: '#38bdf8',
26
  500: '#0ea5e9',
27
  600: '#0284c7',
28
+ 700: '#0369a1',
29
+ 800: '#075985',
30
  900: '#0c4a6e',
31
  },
32
  dark: {
33
  800: '#1e293b',
34
+ 850: '#162032',
35
  900: '#0f172a',
36
+ 950: '#020617',
37
  }
38
  },
39
  animation: {
40
+ 'float': 'float 6s ease-in-out infinite',
41
+ 'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
42
+ 'slide-up': 'slide-up 0.5s ease-out',
43
+ },
44
+ keyframes: {
45
+ float: {
46
+ '0%, 100%': { transform: 'translateY(0)' },
47
+ '50%': { transform: 'translateY(-10px)' },
48
+ },
49
+ 'pulse-glow': {
50
+ '0%, 100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.3)' },
51
+ '50%': { boxShadow: '0 0 40px rgba(14, 165, 233, 0.6)' },
52
+ },
53
+ 'slide-up': {
54
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
55
+ '100%': { opacity: '1', transform: 'translateY(0)' },
56
+ }
57
  }
58
  }
59
  }
 
63
  /* Custom Scrollbar */
64
  ::-webkit-scrollbar {
65
  width: 8px;
66
+ height: 8px;
67
  }
68
+
69
  ::-webkit-scrollbar-track {
70
+ background: #0f172a;
71
  }
72
+
73
  ::-webkit-scrollbar-thumb {
74
+ background: #334155;
75
  border-radius: 4px;
76
  }
77
+
78
  ::-webkit-scrollbar-thumb:hover {
79
+ background: #475569;
80
  }
81
 
82
+ /* Glassmorphism */
83
  .glass {
84
+ background: rgba(30, 41, 59, 0.6);
85
+ backdrop-filter: blur(16px);
86
+ -webkit-backdrop-filter: blur(16px);
87
+ border: 1px solid rgba(255, 255, 255, 0.08);
88
+ }
89
+
90
+ .glass-card {
91
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
92
  backdrop-filter: blur(12px);
93
+ border: 1px solid rgba(148, 163, 184, 0.1);
 
94
  }
95
 
96
  .glass-panel {
97
+ background: rgba(15, 23, 42, 0.5);
98
  backdrop-filter: blur(8px);
99
+ border: 1px solid rgba(148, 163, 184, 0.08);
100
+ }
101
+
102
+ /* Input Styling */
103
+ .input-group {
104
+ position: relative;
105
+ transition: all 0.3s ease;
106
+ }
107
+
108
+ .input-group:focus-within {
109
+ transform: translateX(4px);
110
+ }
111
+
112
+ .input-field {
113
+ background: rgba(15, 23, 42, 0.6);
114
+ border: 1px solid rgba(71, 85, 105, 0.5);
115
+ transition: all 0.3s ease;
116
+ }
117
+
118
+ .input-field:focus {
119
+ border-color: #0ea5e9;
120
+ box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
121
+ }
122
+
123
+ .input-field:disabled {
124
+ background: rgba(30, 41, 59, 0.3);
125
+ color: #64748b;
126
+ }
127
+
128
+ /* Custom Checkbox */
129
+ .custom-checkbox {
130
+ appearance: none;
131
+ width: 20px;
132
+ height: 20px;
133
+ border: 2px solid #475569;
134
+ border-radius: 6px;
135
+ background: rgba(15, 23, 42, 0.5);
136
+ cursor: pointer;
137
+ position: relative;
138
+ transition: all 0.2s ease;
139
  }
140
 
141
+ .custom-checkbox:checked {
142
+ background: #0ea5e9;
143
+ border-color: #0ea5e9;
144
+ }
145
+
146
+ .custom-checkbox:checked::after {
147
+ content: '\f00c';
148
+ font-family: 'Font Awesome 6 Free';
149
+ font-weight: 900;
150
+ position: absolute;
151
+ top: 50%;
152
+ left: 50%;
153
+ transform: translate(-50%, -50%);
154
+ color: white;
155
+ font-size: 10px;
156
+ }
157
+
158
+ /* Range Slider */
159
  input[type=range] {
160
+ -webkit-appearance: none;
161
+ background: transparent;
162
  }
163
+
164
  input[type=range]::-webkit-slider-thumb {
165
  -webkit-appearance: none;
166
+ height: 18px;
167
+ width: 18px;
168
  border-radius: 50%;
169
+ background: #0ea5e9;
170
  cursor: pointer;
171
+ margin-top: -7px;
172
+ box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
173
+ transition: all 0.2s ease;
174
+ }
175
+
176
+ input[type=range]::-webkit-slider-thumb:hover {
177
+ transform: scale(1.2);
178
+ box-shadow: 0 0 20px rgba(14, 165, 233, 0.8);
179
  }
180
+
181
  input[type=range]::-webkit-slider-runnable-track {
182
  width: 100%;
183
  height: 4px;
184
  cursor: pointer;
185
+ background: linear-gradient(90deg, #334155 0%, #475569 100%);
186
  border-radius: 2px;
187
  }
188
+
189
  /* Canvas Container */
190
  .canvas-container {
191
  position: relative;
192
  width: 100%;
193
+ height: 360px;
194
+ background: radial-gradient(ellipse at center, #1e293b 0%, #0f172a 70%);
195
+ border-radius: 16px;
196
+ overflow: hidden;
197
+ }
198
+
199
+ .canvas-container::before {
200
+ content: '';
201
+ position: absolute;
202
+ inset: 0;
203
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23334155' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
204
+ opacity: 0.5;
205
+ }
206
+
207
+ /* Formula Card */
208
+ .formula-card {
209
+ position: relative;
210
+ overflow: hidden;
211
+ }
212
+
213
+ .formula-card::before {
214
+ content: '';
215
+ position: absolute;
216
+ top: 0;
217
+ left: 0;
218
+ right: 0;
219
+ height: 2px;
220
+ background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #0ea5e9);
221
+ background-size: 200% 100%;
222
+ animation: gradient-shift 3s ease infinite;
223
+ }
224
+
225
+ @keyframes gradient-shift {
226
+ 0%, 100% { background-position: 0% 50%; }
227
+ 50% { background-position: 100% 50%; }
228
+ }
229
+
230
+ /* Button Effects */
231
+ .btn-primary {
232
+ background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
233
+ position: relative;
234
+ overflow: hidden;
235
+ }
236
+
237
+ .btn-primary::before {
238
+ content: '';
239
+ position: absolute;
240
+ top: 0;
241
+ left: -100%;
242
+ width: 100%;
243
+ height: 100%;
244
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
245
+ transition: left 0.5s ease;
246
+ }
247
+
248
+ .btn-primary:hover::before {
249
+ left: 100%;
250
+ }
251
+
252
+ /* Step Animation */
253
+ .solution-step {
254
+ animation: slide-up 0.4s ease-out forwards;
255
+ opacity: 0;
256
+ }
257
+
258
+ .solution-step:nth-child(1) { animation-delay: 0.1s; }
259
+ .solution-step:nth-child(2) { animation-delay: 0.2s; }
260
+ .solution-step:nth-child(3) { animation-delay: 0.3s; }
261
+ .solution-step:nth-child(4) { animation-delay: 0.4s; }
262
+ .solution-step:nth-child(5) { animation-delay: 0.5s; }
263
+
264
+ /* Particle Trail */
265
+ .particle-glow {
266
+ filter: drop-shadow(0 0 10px #38bdf8) drop-shadow(0 0 20px #0ea5e9);
267
+ }
268
+
269
+ /* Preset Button */
270
+ .preset-btn {
271
+ position: relative;
272
  overflow: hidden;
273
+ transition: all 0.3s ease;
274
+ }
275
+
276
+ .preset-btn::after {
277
+ content: '';
278
+ position: absolute;
279
+ inset: 0;
280
+ background: linear-gradient(135deg, transparent 0%, rgba(14, 165, 233, 0.1) 100%);
281
+ opacity: 0;
282
+ transition: opacity 0.3s ease;
283
+ }
284
+
285
+ .preset-btn:hover::after {
286
+ opacity: 1;
287
+ }
288
+
289
+ /* Nav Link */
290
+ .nav-link {
291
+ position: relative;
292
+ }
293
+
294
+ .nav-link::after {
295
+ content: '';
296
+ position: absolute;
297
+ bottom: -4px;
298
+ left: 0;
299
+ width: 0;
300
+ height: 2px;
301
+ background: #0ea5e9;
302
+ transition: width 0.3s ease;
303
+ }
304
+
305
+ .nav-link:hover::after {
306
+ width: 100%;
307
+ }
308
+
309
+ /* Stat Card */
310
+ .stat-card {
311
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
312
+ border: 1px solid rgba(71, 85, 105, 0.3);
313
+ }
314
+
315
+ /* Live Badge */
316
+ .live-badge {
317
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
318
+ }
319
+
320
+ @keyframes pulse {
321
+ 0%, 100% { opacity: 1; }
322
+ 50% { opacity: 0.5; }
323
  }
324
  </style>
325
  </head>
326
+
327
+ <body class="bg-dark-950 text-slate-200 font-sans min-h-screen flex flex-col overflow-x-hidden selection:bg-brand-500 selection:text-white">
328
 
329
  <!-- Header -->
330
+ <header class="fixed top-0 w-full z-50 glass border-b border-slate-700/30">
331
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
332
  <div class="flex items-center gap-3">
333
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/25 animate-pulse-glow">
334
+ <i class="fa-solid fa-atom text-white text-lg"></i>
335
  </div>
336
  <div>
337
+ <h1 class="text-lg font-bold text-white tracking-tight">
338
+ Kinematics<span class="text-brand-400">Master</span>
339
+ </h1>
340
  <p class="text-xs text-slate-400">Class 11 Physics | NEET & JEE Prep</p>
341
  </div>
342
  </div>
343
+
344
+ <nav class="hidden md:flex gap-8 text-sm font-medium text-slate-300">
345
+ <a href="#theory" class="nav-link hover:text-brand-400 transition-colors">Theory</a>
346
+ <a href="#calculator" class="nav-link hover:text-brand-400 transition-colors">Solver</a>
347
+ <a href="#simulator" class="nav-link hover:text-brand-400 transition-colors">Simulator</a>
348
+ <a href="#formulas" class="nav-link hover:text-brand-400 transition-colors">Formulas</a>
349
  </nav>
350
 
351
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
352
+ class="text-xs font-mono text-slate-500 hover:text-brand-400 transition-colors hidden sm:block px-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700/50">
353
  Built with anycoder
354
  </a>
355
  </div>
356
  </header>
357
 
358
  <!-- Main Content -->
359
+ <main class="flex-grow pt-20 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full space-y-20">
360
 
361
  <!-- Hero Section -->
362
+ <section class="text-center space-y-6 py-12 relative">
363
+ <div class="absolute inset-0 -z-10 overflow-hidden">
364
+ <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-brand-500/10 rounded-full blur-3xl"></div>
365
+ </div>
366
+
367
+ <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-900/40 border border-brand-500/30 text-brand-300 text-xs font-medium mb-4 backdrop-blur-sm">
368
+ <span class="w-2 h-2 rounded-full bg-brand-400 live-badge"></span>
369
  Interactive Learning Module
370
  </div>
371
+
372
+ <h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight leading-tight">
373
+ Master
374
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-400 via-cyan-400 to-violet-400 animate-float inline-block">Motion in One Dimension</span>
375
  </h2>
376
+
377
+ <p class="max-w-2xl mx-auto text-lg text-slate-400 leading-relaxed">
378
  Solve complex kinematics problems instantly. Visualize velocity, acceleration, and displacement with our interactive simulator. Designed for competitive exam aspirants.
379
  </p>
380
+
381
+ <div class="flex flex-wrap justify-center gap-4 pt-4">
382
+ <a href="#calculator" class="btn-primary px-6 py-3 rounded-xl text-white font-semibold shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transition-all transform hover:-translate-y-0.5">
383
+ <i class="fa-solid fa-calculator mr-2"></i> Start Solving
384
+ </a>
385
+ <a href="#simulator" class="px-6 py-3 rounded-xl bg-slate-800/80 border border-slate-700 text-slate-300 font-semibold hover:bg-slate-700/80 hover:text-white transition-all">
386
+ <i class="fa-solid fa-play mr-2"></i> Try Simulator
387
+ </a>
388
+ </div>
389
  </section>
390
 
391
  <!-- Theory Section -->
392
+ <section id="theory" class="grid md:grid-cols-2 gap-6">
393
+ <div class="glass-card p-8 rounded-2xl space-y-6 hover:border-brand-500/30 transition-all duration-500">
394
+ <div class="flex items-center gap-3 mb-2">
395
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500/20 to-emerald-600/10 border border-emerald-500/30 flex items-center justify-center">
396
+ <i class="fa-solid fa-book-open text-emerald-400 text-xl"></i>
397
+ </div>
398
+ <h3 class="text-xl font-bold text-white">Core Concepts</h3>
399
+ </div>
400
+
401
+ <ul class="space-y-4">
402
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
403
+ <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
404
+ <i class="fa-solid fa-arrow-right-arrow-left text-emerald-400 text-sm"></i>
405
+ </div>
406
+ <div>
407
+ <h4 class="text-white font-semibold mb-1">Distance vs Displacement</h4>
408
+ <p class="text-sm text-slate-400">Distance is scalar (path length), Displacement is vector (change in position).</p>
409
+ </div>
410
  </li>
411
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
412
+ <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
413
+ <i class="fa-solid fa-gauge-high text-blue-400 text-sm"></i>
414
+ </div>
415
+ <div>
416
+ <h4 class="text-white font-semibold mb-1">Speed vs Velocity</h4>
417
+ <p class="text-sm text-slate-400">Speed is scalar (distance/time), Velocity is vector (displacement/time).</p>
418
+ </div>
419
  </li>
420
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
421
+ <div class="w-8 h-8 rounded-lg bg-violet-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
422
+ <i class="fa-solid fa-forward text-violet-400 text-sm"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="text-white font-semibold mb-1">Acceleration</h4>
426
+ <p class="text-sm text-slate-400">Rate of change of velocity. Uniform acceleration implies constant change in velocity.</p>
427
+ </div>
428
  </li>
429
  </ul>
430
  </div>
431
+
432
+ <div class="glass-card p-8 rounded-2xl space-y-6 hover:border-amber-500/30 transition-all duration-500">
433
+ <div class="flex items-center gap-3 mb-2">
434
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-600/10 border border-amber-500/30 flex items-center justify-center">
435
+ <i class="fa-solid fa-triangle-exclamation text-amber-400 text-xl"></i>
436
+ </div>
437
+ <h3 class="text-xl font-bold text-white">Common Mistakes (JEE/NEET)</h3>
438
+ </div>
439
+
440
+ <ul class="space-y-4">
441
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
442
+ <div class="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
443
+ <i class="fa-solid fa-plus-minus text-red-400 text-sm"></i>
444
+ </div>
445
+ <div>
446
+ <h4 class="text-white font-semibold mb-1">Sign Convention</h4>
447
+ <p class="text-sm text-slate-400">Always define positive direction. If 'up' is positive, acceleration due to gravity (g) is negative (-9.8 m/s²).</p>
448
+ </div>
449
  </li>
450
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
451
+ <div class="w-8 h-8 rounded-lg bg-orange-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
452
+ <i class="fa-solid fa-car-burst text-orange-400 text-sm"></i>
453
+ </div>
454
+ <div>
455
+ <h4 class="text-white font-semibold mb-1">Stopping Distance</h4>
456
+ <p class="text-sm text-slate-400">When a vehicle stops, final velocity v = 0. Do not assume time is given.</p>
457
+ </div>
458
+ </li>
459
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/30 hover:bg-slate-800/50 transition-colors">
460
+ <div class="w-8 h-8 rounded-lg bg-pink-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
461
+ <i class="fa-solid fa-vector-square text-pink-400 text-sm"></i>
462
+ </div>
463
+ <div>
464
+ <h4 class="text-white font-semibold mb-1">Vector Direction</h4>
465
+ <p class="text-sm text-slate-400">Velocity and acceleration can have opposite signs — object slows down but still moves forward.</p>
466
+ </div>
467
  </li>
468
  </ul>
469
  </div>
 
471
 
472
  <!-- Interactive Solver Section -->
473
  <section id="calculator" class="space-y-8">
474
+ <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
475
+ <div>
476
+ <div class="text-brand-400 text-sm font-mono mb-2">PROBLEM SOLVER</div>
477
+ <h2 class="text-3xl font-bold text-white">Smart Problem Solver</h2>
478
+ <p class="text-slate-400 mt-1">Select variables you know, we'll solve for the rest</p>
479
+ </div>
480
+ <div class="flex items-center gap-2 text-sm text-slate-400 bg-slate-800/50 px-4 py-2 rounded-lg border border-slate-700/50">
481
+ <i class="fa-solid fa-circle-info text-brand-400"></i>
482
+ Need at least 3 variables
483
+ </div>
484
  </div>
485
 
486
+ <div class="grid lg:grid-cols-5 gap-6">
487
  <!-- Inputs -->
488
+ <div class="lg:col-span-2 glass-card p-6 rounded-2xl space-y-5">
489
  <div class="space-y-4">
490
  <!-- Input Group: u -->
491
+ <div class="input-group">
492
+ <label class="block text-xs font-mono text-brand-400 mb-2 uppercase tracking-wider">Initial Velocity (u)</label>
493
+ <div class="flex items-center gap-3">
494
+ <input type="checkbox" id="chk_u" class="custom-checkbox" onchange="toggleInput('u')">
495
+ <input type="number" id="val_u" disabled placeholder="Enter value" class="input-field flex-1 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none disabled:cursor-not-allowed font-mono">
496
+ <span class="text-slate-500 text-sm font-mono w-12">m/s</span>
497
  </div>
498
  </div>
499
 
500
  <!-- Input Group: v -->
501
+ <div class="input-group">
502
+ <label class="block text-xs font-mono text-brand-400 mb-2 uppercase tracking-wider">Final Velocity (v)</label>
503
+ <div class="flex items-center gap-3">
504
+ <input type="checkbox" id="chk_v" class="custom-checkbox" onchange="toggleInput('v')">
505
+ <input type="number" id="val_v" disabled placeholder="Enter value" class="input-field flex-1 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none disabled:cursor-not-allowed font-mono">
506
+ <span class="text-slate-500 text-sm font-mono w-12">m/s</span>
507
  </div>
508
  </div>
509
 
510
  <!-- Input Group: a -->
511
+ <div class="input-group">
512
+ <label class="block text-xs font-mono text-brand-400 mb-2 uppercase tracking-wider">Acceleration (a)</label>
513
+ <div class="flex items-center gap-3">
514
+ <input type="checkbox" id="chk_a" class="custom-checkbox" onchange="toggleInput('a')">
515
+ <input type="number" id="val_a" disabled placeholder="Enter value" class="input-field flex-1 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none disabled:cursor-not-allowed font-mono">
516
+ <span class="text-slate-500 text-sm font-mono w-12">m/s²</span>
517
  </div>
518
  </div>
519
 
520
  <!-- Input Group: t -->
521
+ <div class="input-group">
522
+ <label class="block text-xs font-mono text-brand-400 mb-2 uppercase tracking-wider">Time (t)</label>
523
+ <div class="flex items-center gap-3">
524
+ <input type="checkbox" id="chk_t" class="custom-checkbox" onchange="toggleInput('t')">
525
+ <input type="number" id="val_t" disabled placeholder="Enter value" class="input-field flex-1 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none disabled:cursor-not-allowed font-mono">
526
+ <span class="text-slate-500 text-sm font-mono w-12">s</span>
527
  </div>
528
  </div>
529
 
530
  <!-- Input Group: s -->
531
+ <div class="input-group">
532
+ <label class="block text-xs font-mono text-brand-400 mb-2 uppercase tracking-wider">Displacement (s)</label>
533
+ <div class="flex items-center gap-3">
534
+ <input type="checkbox" id="chk_s" class="custom-checkbox" onchange="toggleInput('s')">
535
+ <input type="number" id="val_s" disabled placeholder="Enter value" class="input-field flex-1 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none disabled:cursor-not-allowed font-mono">
536
+ <span class="text-slate-500 text-sm font-mono w-12">m</span>
537
  </div>
538
  </div>
539
  </div>
540
 
541
+ <div class="pt-4 space-y-3">
542
+ <button onclick="solveKinematics()" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold shadow-lg shadow-brand-500/25 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-2">
543
+ <i class="fa-solid fa-wand-magic-sparkles"></i>
544
+ Solve Problem
545
+ </button>
546
+ <button onclick="resetSolver()" class="w-full py-3 rounded-xl border border-slate-600 text-slate-400 hover:text-white hover:border-slate-400 hover:bg-slate-800/50 transition-all flex items-center justify-center gap-2">
547
+ <i class="fa-solid fa-rotate-left"></i>
548
+ Reset
549
+ </button>
550
+ </div>
551
  </div>
552
 
553
  <!-- Results & Visualization -->
554
+ <div class="lg:col-span-3 space-y-6">
555
  <!-- Result Card -->
556
+ <div id="result-card" class="hidden glass-card p-6 rounded-2xl border-l-4 border-brand-500">
557
+ <div class="flex items-center gap-3 mb-6">
558
+ <div class="w-10 h-10 rounded-lg bg-brand-500/20 flex items-center justify-center">
559
+ <i class="fa-solid fa-lightbulb text-brand-400"></i>
560
+ </div>
561
+ <div>
562
+ <h3 class="text-lg font-bold text-white">Solution Steps</h3>
563
+ <p class="text-xs text-slate-400">Step-by-step derivation</p>
564
+ </div>
565
+ </div>
566
+ <div id="solution-steps" class="space-y-3">
567
  <!-- Steps injected via JS -->
568
  </div>
569
  </div>
570
 
571
  <!-- Placeholder State -->
572
+ <div id="empty-state" class="h-full min-h-[400px] flex flex-col items-center justify-center glass-card rounded-2xl border border-dashed border-slate-700 text-slate-500">
573
+ <div class="w-20 h-20 rounded-2xl bg-slate-800/50 flex items-center justify-center mb-6">
574
+ <i class="fa-solid fa-wave-square text-4xl opacity-50"></i>
575
+ </div>
576
+ <p class="text-lg font-medium">Select at least 3 variables to solve</p>
577
+ <p class="text-sm mt-2">Check the boxes next to known values</p>
578
  </div>
579
  </div>
580
  </div>
581
  </section>
582
 
583
  <!-- Simulator Section -->
584
+ <section id="simulator" class="space-y-8">
585
  <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
586
  <div>
587
+ <div class="text-violet-400 text-sm font-mono mb-2">VISUALIZATION</div>
588
  <h2 class="text-3xl font-bold text-white">Motion Simulator</h2>
589
+ <p class="text-slate-400 mt-1">Visualize velocity-time graphs and particle motion</p>
590
  </div>
591
+ <div class="flex flex-wrap gap-2">
592
+ <button onclick="setPreset('freefall')" class="preset-btn px-4 py-2 text-sm bg-slate-800/80 border border-slate-700 rounded-lg hover:border-violet-500/50 text-violet-300 transition-all">
593
+ <i class="fa-solid fa-apple-whole mr-2"></i>Free Fall
594
+ </button>
595
+ <button onclick="setPreset('acceleration')" class="preset-btn px-4 py-2 text-sm bg-slate-800/80 border border-slate-700 rounded-lg hover:border-emerald-500/50 text-emerald-300 transition-all">
596
+ <i class="fa-solid fa-car mr-2"></i>Car Acceleration
597
+ </button>
598
+ <button onclick="setPreset('deceleration')" class="preset-btn px-4 py-2 text-sm bg-slate-800/80 border border-slate-700 rounded-lg hover:border-amber-500/50 text-amber-300 transition-all">
599
+ <i class="fa-solid fa-car-burst mr-2"></i>Braking
600
+ </button>
601
  </div>
602
  </div>
603
 
604
  <div class="grid lg:grid-cols-3 gap-6">
605
  <!-- Controls -->
606
+ <div class="glass-card p-6 rounded-2xl space-y-6">
607
+ <div class="space-y-6">
608
  <div>
609
+ <div class="flex justify-between items-center mb-3">
610
+ <label class="text-sm text-slate-300 font-medium">Initial Velocity (u)</label>
611
+ <span id="sim_u_val" class="text-sm font-mono text-brand-400 bg-brand-900/30 px-3 py-1 rounded-lg">0 m/s</span>
612
+ </div>
613
+ <input type="range" id="sim_u" min="-50" max="50" value="0" step="1" oninput="updateSimParams()" class="w-full">
614
+ <div class="flex justify-between text-xs text-slate-500 mt-1">
615
+ <span>-50</span>
616
+ <span>+50</span>
617
  </div>
 
618
  </div>
619
+
620
  <div>
621
+ <div class="flex justify-between items-center mb-3">
622
+ <label class="text-sm text-slate-300 font-medium">Acceleration (a)</label>
623
+ <span id="sim_a_val" class="text-sm font-mono text-violet-400 bg-violet-900/30 px-3 py-1 rounded-lg">2 m/s²</span>
624
+ </div>
625
+ <input type="range" id="sim_a" min="-20" max="20" value="2" step="0.5" oninput="updateSimParams()" class="w-full">
626
+ <div class="flex justify-between text-xs text-slate-500 mt-1">
627
+ <span>-20</span>
628
+ <span>+20</span>
629
  </div>
 
630
  </div>
631
+
632
  <div>
633
+ <div class="flex justify-between items-center mb-3">
634
+ <label class="text-sm text-slate-300 font-medium">Simulation Time</label>
635
+ <span id="sim_t_val" class="text-sm font-mono text-emerald-400 bg-emerald-900/30 px-3 py-1 rounded-lg">10 s</span>
636
+ </div>
637
+ <input type="range" id="sim_t" min="1" max="20" value="10" step="1" oninput="updateSimParams()" class="w-full">
638
+ <div class="flex justify-between text-xs text-slate-500 mt-1">
639
+ <span>1s</span>
640
+ <span>20s</span>
641
  </div>
 
642
  </div>
643
  </div>
644
 
645
+ <div class="pt-6 border-t border-slate-700/50 grid grid-cols-2 gap-4">
646
+ <div class="stat-card p-4 rounded-xl text-center">
647
+ <div class="text-xs text-slate-500 mb-1">Max Velocity</div>
648
+ <div id="stat_vmax" class="text-xl font-bold text-white font-mono">20.0</div>
649
+ <div class="text-xs text-slate-500">m/s</div>
650
  </div>
651
+ <div class="stat-card p-4 rounded-xl text-center">
652
+ <div class="text-xs text-slate-500 mb-1">Total Distance</div>
653
+ <div id="stat_dist" class="text-xl font-bold text-white font-mono">100.0</div>
654
+ <div class="text-xs text-slate-500">m</div>
655
  </div>
656
  </div>
657
 
658
+ <div class="flex gap-3 pt-2">
659
+ <button id="btn-play" onclick="toggleSimulation()" class="flex-1 py-3.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl font-semibold transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-emerald-500/20">
660
+ <i class="fa-solid fa-play"></i>
661
+ <span>Start</span>
662
  </button>
663
+ <button onclick="resetSimulation()" class="px-5 py-3.5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl transition-all flex items-center justify-center">
664
  <i class="fa-solid fa-rotate-right"></i>
665
  </button>
666
  </div>
 
668
 
669
  <!-- Canvas -->
670
  <div class="lg:col-span-2 space-y-4">
671
+ <div class="canvas-container border border-slate-700/50 shadow-2xl shadow-black/50">
672
  <canvas id="simCanvas"></canvas>
673
+
674
  <!-- Overlay Info -->
675
  <div class="absolute top-4 left-4 pointer-events-none">
676
+ <div class="glass px-4 py-2.5 rounded-xl border border-brand-500/30">
677
+ <div class="flex items-center gap-4 text-xs font-mono">
678
+ <div class="flex items-center gap-2">
679
+ <span class="w-2 h-2 rounded-full bg-brand-400"></span>
680
+ <span class="text-slate-400">t:</span>
681
+ <span id="live_t" class="text-brand-300 font-bold">0.0</span>
682
+ <span class="text-slate-500">s</span>
683
+ </div>
684
+ <div class="w-px h-4 bg-slate-600"></div>
685
+ <div class="flex items-center gap-2">
686
+ <span class="w-2 h-2 rounded-full bg-violet-400"></span>
687
+ <span class="text-slate-400">v:</span>
688
+ <span id="live_v" class="text-violet-300 font-bold">0.0</span>
689
+ <span class="text-slate-500">m/s</span>
690
+ </div>
691
+ <div class="w-px h-4 bg-slate-600"></div>
692
+ <div class="flex items-center gap-2">
693
+ <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
694
+ <span class="text-slate-400">s:</span>
695
+ <span id="live_s" class="text-emerald-300 font-bold">0.0</span>
696
+ <span class="text-slate-500">m</span>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+
702
+ <!-- Legend -->
703
+ <div class="absolute bottom-4 right-4 pointer-events-none">
704
+ <div class="glass px-4 py-2 rounded-lg border border-slate-700/50">
705
+ <div class="flex items-center gap-4 text-xs">
706
+ <div class="flex items-center gap-2">
707
+ <span class="w-3 h-3 rounded-full bg-brand-500"></span>
708
+ <span class="text-slate-300">Position</span>
709
+ </div>
710
+ <div class="flex items-center gap-2">
711
+ <span class="w-3 h-3 rounded-full bg-violet-500"></span>
712
+ <span class="text-slate-300">Velocity</span>
713
+ </div>
714
+ </div>
715
  </div>
716
  </div>
 
 
 
 
717
  </div>
718
  </div>
719
  </div>
720
  </section>
721
 
722
  <!-- Formula Sheet -->
723
+ <section id="formulas" class="glass-card p-8 rounded-2xl">
724
+ <div class="flex items-center gap-3 mb-8">
725
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-600/10 border border-pink-500/30 flex items-center justify-center">
726
+ <i class="fa-solid fa-file-invoice text-pink-400 text-xl"></i>
727
+ </div>
728
+ <div>
729
+ <h2 class="text-2xl font-bold text-white">Essential Formula Sheet</h2>
730
+ <p class="text-sm text-slate-400">Fundamental equations of motion</p>
731
  </div>
732
+ </div>
733
+
734
+ <div class="grid md:grid-cols-2 gap-5">
735
+ <div class="formula-card bg-slate-800/40 p-6 rounded-xl border border-slate-700/50 hover:bg-slate-800/60 transition-all">
736
+ <div class="text-slate-500 text-xs font-mono mb-3 uppercase tracking-wider">Velocity & Acceleration</div>
737
+ <div class="text-2xl text-white font-mono font-bold mb-3">v = u + at</div>
738
+ <div class="text-sm text-slate-400 leading-relaxed">Final velocity equals initial velocity plus acceleration times time.</div>
739
+ <div class="mt-4 flex gap-2">
740
+ <span class="px-2 py-1 bg-brand-500/10 text-brand-400 text-xs rounded">v = final velocity</span>
741
+ <span class="px-2 py-1 bg-brand-500/10 text-brand-400 text-xs rounded">u = initial velocity</span>
742
+ </div>
743
  </div>
744
+
745
+ <div class="formula-card bg-slate-800/40 p-6 rounded-xl border border-slate-700/50 hover:bg-slate-800/60 transition-all">
746
+ <div class="text-slate-500 text-xs font-mono mb-3 uppercase tracking-wider">Displacement (Time known)</div>
747
+ <div class="text-2xl text-white font-mono font-bold mb-3">s = ut + ½at²</div>
748
+ <div class="text-sm text-slate-400 leading-relaxed">Distance covered under constant acceleration with time known.</div>
749
+ <div class="mt-4 flex gap-2">
750
+ <span class="px-2 py-1 bg-violet-500/10 text-violet-400 text-xs rounded">s = displacement</span>
751
+ <span class="px-2 py-1 bg-violet-500/10 text-violet-400 text-xs rounded">t = time</span>
752
+ </div>
753
  </div>
754
+
755
+ <div class="formula-card bg-slate-800/40 p-6 rounded-xl border border-slate-700/50 hover:bg-slate-800/60 transition-all">
756
+ <div class="text-slate-500 text-xs font-mono mb-3 uppercase tracking-wider">Displacement (Time unknown)</div>
757
+ <div class="text-2xl text-white font-mono font-bold mb-3">v² = u² + 2as</div>
758
+ <div class="text-sm text-slate-400 leading-relaxed">Useful when time is not given or required in the problem.</div>
759
+ <div class="mt-4 flex gap-2">
760
+ <span class="px-2 py-1 bg-emerald-500/10 text-emerald-400 text-xs rounded">No time needed</span>
761
+ <span class="px-2 py-1 bg-emerald-500/10 text-emerald-400 text-xs rounded">Energy relation</span>
762
+ </div>
763
+ </div>
764
+
765
+ <div class="formula-card bg-slate-800/40 p-6 rounded-xl border border-slate-700/50 hover:bg-slate-800/60 transition-all">
766
+ <div class="text-slate-500 text-xs font-mono mb-3 uppercase tracking-wider">Average Velocity</div>
767
+ <div class="text-2xl text-white font-mono font-bold mb-3">s = ½(u + v)t</div>
768
+ <div class="text-sm text-slate-400 leading-relaxed">Displacement equals average velocity multiplied by time interval.</div>
769
+ <div class="mt-4 flex gap-2">
770
+ <span class="px-2 py-1 bg-amber-500/10 text-amber-400 text-xs rounded">Average velocity</span>
771
+ <span class="px-2 py-1 bg-amber-500/10 text-amber-400 text-xs rounded">(u+v)/2</span>
772
+ </div>
773
  </div>
774
  </div>
775
  </section>
 
777
  </main>
778
 
779
  <!-- Footer -->
780
+ <footer class="border-t border-slate-800/50 bg-dark-950 py-12">
781
+ <div class="max-w-7xl mx-auto px-4">
782
+ <div class="flex flex-col md:flex-row items-center justify-between gap-6">
783
+ <div class="flex items-center gap-3">
784
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center">
785
+ <i class="fa-solid fa-atom text-white"></i>
786
+ </div>
787
+ <div>
788
+ <h3 class="text-white font-bold">KinematicsMaster</h3>
789
+ <p class="text-xs text-slate-500">Master physics, one dimension at a time</p>
790
+ </div>
791
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
792
 
793
+ <div class="flex items-center gap-6">
794
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-slate-500 hover:text-brand-400 transition-colors flex items-center gap-2">
795
+ <i class="fa-solid fa-code"></i>
796
+ Built with anycoder
797
+ </a>
798
+ </div>
799
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
800
 
801
+ <div class="mt-8 pt-8 border-t border-slate-800/50 text