Spaces:

AARIFSHABIR
/

anycoder-e5aaefb7

Running

App Files Files Community

AARIFSHABIR commited on 20 days ago

Commit

f5096be

verified ·

1 Parent(s): c5734cb

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +776 -19

index.html CHANGED Viewed

@@ -1,19 +1,776 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kinematics Master: Motion in One Dimension</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        brand: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            900: '#0c4a6e',
+                        },
+                        dark: {
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    },
+                    animation: {
+                        'bounce-slow': 'bounce 3s infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #0f172a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #334155;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #475569;
+        }
+        /* Glassmorphism Utilities */
+        .glass {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .glass-panel {
+            background: rgba(15, 23, 42, 0.6);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(148, 163, 184, 0.1);
+        }
+        /* Input Range Styling */
+        input[type=range] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: #38bdf8;
+            cursor: pointer;
+            margin-top: -6px;
+            box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            background: #334155;
+            border-radius: 2px;
+        }
+        /* Canvas Container */
+        .canvas-container {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
+            border-radius: 0.75rem;
+            overflow: hidden;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+        }
+    </style>
+</head>
+<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">
+    <!-- Header -->
+    <header class="fixed top-0 w-full z-50 glass border-b border-slate-700/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <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">
+                    <i class="fa-solid fa-atom text-white text-xl animate-spin-slow"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-white tracking-tight">Kinematics<span class="text-brand-500">Master</span></h1>
+                    <p class="text-xs text-slate-400">Class 11 Physics | NEET & JEE Prep</p>
+                </div>
+            </div>
+            <nav class="hidden md:flex gap-6 text-sm font-medium text-slate-300">
+                <a href="#theory" class="hover:text-brand-400 transition-colors">Theory</a>
+                <a href="#calculator" class="hover:text-brand-400 transition-colors">Solver</a>
+                <a href="#simulator" class="hover:text-brand-400 transition-colors">Simulator</a>
+                <a href="#formulas" class="hover:text-brand-400 transition-colors">Formulas</a>
+            </nav>
+            <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">
+                Built with anycoder
+            </a>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <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">
+        <!-- Hero Section -->
+        <section class="text-center space-y-6 py-10">
+            <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">
+                <span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
+                Interactive Learning Module
+            </div>
+            <h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight">
+                Master <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-purple-400">Motion in One Dimension</span>
+            </h2>
+            <p class="max-w-2xl mx-auto text-lg text-slate-400">
+                Solve complex kinematics problems instantly. Visualize velocity, acceleration, and displacement with our interactive simulator. Designed for competitive exam aspirants.
+            </p>
+        </section>
+        <!-- Theory Section -->
+        <section id="theory" class="grid md:grid-cols-2 gap-8">
+            <div class="glass-panel p-6 rounded-2xl space-y-4">
+                <h3 class="text-xl font-bold text-white flex items-center gap-2">
+                    <i class="fa-solid fa-book-open text-brand-500"></i> Core Concepts
+                </h3>
+                <ul class="space-y-3 text-slate-300">
+                    <li class="flex items-start gap-3">
+                        <i class="fa-solid fa-check text-green-400 mt-1"></i>
+                        <span><strong>Distance vs Displacement:</strong> Distance is scalar (path length), Displacement is vector (change in position).</span>
+                    </li>
+                    <li class="flex items-start gap-3">
+                        <i class="fa-solid fa-check text-green-400 mt-1"></i>
+                        <span><strong>Speed vs Velocity:</strong> Speed is scalar (distance/time), Velocity is vector (displacement/time).</span>
+                    </li>
+                    <li class="flex items-start gap-3">
+                        <i class="fa-solid fa-check text-green-400 mt-1"></i>
+                        <span><strong>Acceleration:</strong> Rate of change of velocity. Uniform acceleration implies constant change in velocity.</span>
+                    </li>
+                </ul>
+            </div>
+            <div class="glass-panel p-6 rounded-2xl space-y-4">
+                <h3 class="text-xl font-bold text-white flex items-center gap-2">
+                    <i class="fa-solid fa-triangle-exclamation text-yellow-500"></i> Common Mistakes (JEE/NEET)
+                </h3>
+                <ul class="space-y-3 text-slate-300">
+                    <li class="flex items-start gap-3">
+                        <i class="fa-solid fa-xmark text-red-400 mt-1"></i>
+                        <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>
+                    </li>
+                    <li class="flex items-start gap-3">
+                        <i class="fa-solid fa-xmark text-red-400 mt-1"></i>
+                        <span><strong>Stopping Distance:</strong> When a vehicle stops, final velocity v = 0. Do not assume time is given.</span>
+                    </li>
+                </ul>
+            </div>
+        </section>
+        <!-- Interactive Solver Section -->
+        <section id="calculator" class="space-y-8">
+            <div class="flex items-center justify-between">
+                <h2 class="text-3xl font-bold text-white">Smart Problem Solver</h2>
+                <div class="text-sm text-slate-400">Select variables you know</div>
+            </div>
+            <div class="grid lg:grid-cols-3 gap-8">
+                <!-- Inputs -->
+                <div class="lg:col-span-1 glass-panel p-6 rounded-2xl space-y-6">
+                    <div class="space-y-4">
+                        <!-- Input Group: u -->
+                        <div class="relative group">
+                            <label class="block text-xs font-mono text-brand-400 mb-1">Initial Velocity (u)</label>
+                            <div class="flex items-center gap-2">
+                                <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')">
+                                <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">
+                                <span class="text-slate-500 text-sm w-12">m/s</span>
+                            </div>
+                        </div>
+                        <!-- Input Group: v -->
+                        <div class="relative group">
+                            <label class="block text-xs font-mono text-brand-400 mb-1">Final Velocity (v)</label>
+                            <div class="flex items-center gap-2">
+                                <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')">
+                                <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">
+                                <span class="text-slate-500 text-sm w-12">m/s</span>
+                            </div>
+                        </div>
+                        <!-- Input Group: a -->
+                        <div class="relative group">
+                            <label class="block text-xs font-mono text-brand-400 mb-1">Acceleration (a)</label>
+                            <div class="flex items-center gap-2">
+                                <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')">
+                                <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">
+                                <span class="text-slate-500 text-sm w-12">m/s²</span>
+                            </div>
+                        </div>
+                        <!-- Input Group: t -->
+                        <div class="relative group">
+                            <label class="block text-xs font-mono text-brand-400 mb-1">Time (t)</label>
+                            <div class="flex items-center gap-2">
+                                <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')">
+                                <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">
+                                <span class="text-slate-500 text-sm w-12">s</span>
+                            </div>
+                        </div>
+                        <!-- Input Group: s -->
+                        <div class="relative group">
+                            <label class="block text-xs font-mono text-brand-400 mb-1">Displacement (s)</label>
+                            <div class="flex items-center gap-2">
+                                <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')">
+                                <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">
+                                <span class="text-slate-500 text-sm w-12">m</span>
+                            </div>
+                        </div>
+                    </div>
+                    <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">
+                        <i class="fa-solid fa-calculator mr-2"></i> Solve Problem
+                    </button>
+                    <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">
+                        Reset
+                    </button>
+                </div>
+                <!-- Results & Visualization -->
+                <div class="lg:col-span-2 space-y-6">
+                    <!-- Result Card -->
+                    <div id="result-card" class="hidden glass-panel p-6 rounded-2xl border-l-4 border-brand-500 animate-fade-in-up">
+                        <h3 class="text-lg font-bold text-white mb-4">Solution Steps</h3>
+                        <div id="solution-steps" class="space-y-3 font-mono text-sm text-slate-300">
+                            <!-- Steps injected via JS -->
+                        </div>
+                    </div>
+                    <!-- Placeholder State -->
+                    <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">
+                        <i class="fa-solid fa-wave-square text-4xl mb-4 opacity-50"></i>
+                        <p>Select at least 3 variables to solve</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Simulator Section -->
+        <section id="simulator" class="space-y-6">
+            <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
+                <div>
+                    <h2 class="text-3xl font-bold text-white">Motion Simulator</h2>
+                    <p class="text-slate-400">Visualize velocity-time graphs and particle motion.</p>
+                </div>
+                <div class="flex gap-2">
+                    <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>
+                    <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>
+                    <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>
+                </div>
+            </div>
+            <div class="grid lg:grid-cols-3 gap-6">
+                <!-- Controls -->
+                <div class="glass-panel p-6 rounded-2xl space-y-6">
+                    <div class="space-y-4">
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <label class="text-xs text-slate-400">Initial Velocity (u)</label>
+                                <span id="sim_u_val" class="text-xs font-mono text-brand-400">0 m/s</span>
+                            </div>
+                            <input type="range" id="sim_u" min="-50" max="50" value="0" step="1" oninput="updateSimParams()">
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <label class="text-xs text-slate-400">Acceleration (a)</label>
+                                <span id="sim_a_val" class="text-xs font-mono text-brand-400">2 m/s²</span>
+                            </div>
+                            <input type="range" id="sim_a" min="-20" max="20" value="2" step="0.5" oninput="updateSimParams()">
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <label class="text-xs text-slate-400">Simulation Time</label>
+                                <span id="sim_t_val" class="text-xs font-mono text-brand-400">10 s</span>
+                            </div>
+                            <input type="range" id="sim_t" min="1" max="20" value="10" step="1" oninput="updateSimParams()">
+                        </div>
+                    </div>
+                    <div class="pt-4 border-t border-slate-700 grid grid-cols-2 gap-4">
+                        <div class="text-center p-2 bg-slate-800/50 rounded">
+                            <div class="text-xs text-slate-500">Max Velocity</div>
+                            <div id="stat_vmax" class="text-lg font-bold text-white">20 m/s</div>
+                        </div>
+                        <div class="text-center p-2 bg-slate-800/50 rounded">
+                            <div class="text-xs text-slate-500">Total Distance</div>
+                            <div id="stat_dist" class="text-lg font-bold text-white">100 m</div>
+                        </div>
+                    </div>
+                    <div class="flex gap-3">
+                        <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">
+                            <i class="fa-solid fa-play mr-1"></i> Start
+                        </button>
+                        <button onclick="resetSimulation()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition-colors">
+                            <i class="fa-solid fa-rotate-right"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Canvas -->
+                <div class="lg:col-span-2 space-y-4">
+                    <div class="canvas-container border border-slate-700">
+                        <canvas id="simCanvas"></canvas>
+                        <!-- Overlay Info -->
+                        <div class="absolute top-4 left-4 pointer-events-none">
+                            <div class="text-xs font-mono text-brand-300 bg-slate-900/80 px-2 py-1 rounded border border-brand-500/30">
+                                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
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex justify-center gap-6 text-xs text-slate-400">
+                        <div class="flex items-center gap-2"><span class="w-3 h-3 bg-brand-500 rounded-full"></span> Position (x)</div>
+                        <div class="flex items-center gap-2"><span class="w-3 h-3 bg-purple-500 rounded-full"></span> Velocity (v)</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Formula Sheet -->
+        <section id="formulas" class="glass-panel p-8 rounded-2xl">
+            <h2 class="text-2xl font-bold text-white mb-6">Essential Formula Sheet</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
+                    <div class="text-slate-400 mb-2">// Velocity & Acceleration</div>
+                    <div class="text-white">v = u + at</div>
+                    <div class="text-slate-500 text-xs mt-1">Final velocity equals initial velocity plus acceleration times time.</div>
+                </div>
+                <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
+                    <div class="text-slate-400 mb-2">// Displacement (Time known)</div>
+                    <div class="text-white">s = ut + ½at²</div>
+                    <div class="text-slate-500 text-xs mt-1">Distance covered under constant acceleration.</div>
+                </div>
+                <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
+                    <div class="text-slate-400 mb-2">// Displacement (Time unknown)</div>
+                    <div class="text-white">v² = u² + 2as</div>
+                    <div class="text-slate-500 text-xs mt-1">Useful when time is not given in the problem.</div>
+                </div>
+                <div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 font-mono text-sm">
+                    <div class="text-slate-400 mb-2">// Average Velocity</div>
+                    <div class="text-white">s = ½(u + v)t</div>
+                    <div class="text-slate-500 text-xs mt-1">Displacement equals average velocity multiplied by time.</div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="border-t border-slate-800 bg-dark-900 py-8">
+        <div class="max-w-7xl mx-auto px-4 text-center">
+            <p class="text-slate-500 text-sm">
+                &copy; 2023 Kinematics Master. Built for Educational Purposes.
+            </p>
+            <div class="mt-4 flex justify-center gap-4">
+                <a href="#" class="text-slate-600 hover:text-brand-500 transition-colors"><i class="fa-brands fa-github"></i></a>
+                <a href="#" class="text-slate-600 hover:text-blue-500 transition-colors"><i class="fa-brands fa-twitter"></i></a>
+            </div>
+        </div>
+    </footer>
+    <!-- Application Logic -->
+    <script>
+        // --- Solver Logic ---
+        const variables = ['u', 'v', 'a', 't', 's'];
+        function toggleInput(id) {
+            const checkbox = document.getElementById(`chk_${id}`);
+            const input = document.getElementById(`val_${id}`);
+            input.disabled = !checkbox.checked;
+            if (!checkbox.checked) input.value = '';
+            else input.focus();
+        }
+        function resetSolver() {
+            variables.forEach(v => {
+                document.getElementById(`chk_${v}`).checked = false;
+                document.getElementById(`val_${v}`).value = '';
+                document.getElementById(`val_${v}`).disabled = true;
+            });
+            document.getElementById('result-card').classList.add('hidden');
+            document.getElementById('empty-state').classList.remove('hidden');
+        }
+        function solveKinematics() {
+            // 1. Collect Data
+            let vals = {};
+            let knowns = [];
+            variables.forEach(v => {
+                if (document.getElementById(`chk_${v}`).checked) {
+                    let val = parseFloat(document.getElementById(`val_${v}`).value);
+                    if (isNaN(val)) {
+                        alert(`Please enter a valid number for ${v}`);
+                        return;
+                    }
+                    vals[v] = val;
+                    knowns.push(v);
+                }
+            });
+            if (knowns.length < 3) {
+                alert("Please provide at least 3 variables to solve.");
+                return;
+            }
+            // 2. Logic to solve for unknowns
+            let results = {};
+            let steps = [];
+            // Helper to add step
+            const addStep = (html) => steps.push(`<div class="p-3 bg-slate-800/50 rounded border-l-2 border-brand-500">${html}</div>`);
+            // Iterative solving until all found (simple logic for 5 vars)
+            // We try to find missing vars based on knowns.
+            let found = {...vals};
+            let changed = true;
+            let iterations = 0;
+            while(changed && iterations < 10) {
+                changed = false;
+                iterations++;
+                // Logic: v = u + at
+                if (found.v === undefined && found.u !== undefined && found.a !== undefined && found.t !== undefined) {
+                    found.v = found.u + found.a * found.t;
+                    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>`);
+                    changed = true;
+                }
+                else if (found.u === undefined && found.v !== undefined && found.a !== undefined && found.t !== undefined) {
+                    found.u = found.v - found.a * found.t;
+                    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>`);
+                    changed = true;
+                }
+                else if (found.a === undefined && found.v !== undefined && found.u !== undefined && found.t !== undefined) {
+                    found.a = (found.v - found.u) / found.t;
+                    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>`);
+                    changed = true;
+                }
+                else if (found.t === undefined && found.v !== undefined && found.u !== undefined && found.a !== undefined && found.a !== 0) {
+                    found.t = (found.v - found.u) / found.a;
+                    addStep(`<strong>Found t:</strong> Rearranging v = u + at<br>t = (${found.v} - ${found.u}) / ${found.a} = <strong>${found.t.toFixed(2)} s</strong>`);
+                    changed = true;
+                }
+                // Logic: s = ut + 0.5at^2
+                if (found.s === undefined && found.u !== undefined && found.t !== undefined && found.a !== undefined) {
+                    found.s = found.u * found.t + 0.5 * found.a * Math.pow(found.t, 2);
+                    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>`);
+                    changed = true;
+                }
+                else if (found.u === undefined && found.s !== undefined && found.t !== undefined && found.a !== undefined) {
+                    // s - 0.5at^2 = ut => u = (s - 0.5at^2)/t
+                    if(found.t !== 0) {
+                        found.u = (found.s - 0.5 * found.a * Math.pow(found.t, 2)) / found.t;
+                        addStep(`<strong>Found u:</strong> Rearranging s = ut + ½at²<br>u = <strong>${found.u.toFixed(2)} m/s</strong>`);
+                        changed = true;
+                    }
+                }
+                // Logic: v^2 = u^2 + 2as
+                if (found.v === undefined && found.u !== undefined && found.a !== undefined && found.s !== undefined) {
+                    let v_sq = Math.pow(found.u, 2) + 2 * found.a * found.s;
+                    if (v_sq >= 0) {
+                        found.v = Math.sqrt(v_sq); // Assuming positive root for simplicity in basic solver, or could be -sqrt
+                        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>`);
+                        changed = true;
+                    }
+                }
+                else if (found.s === undefined && found.v !== undefined && found.u !== undefined && found.a !== undefined && found.a !== 0) {
+                    found.s = (Math.pow(found.v, 2) - Math.pow(found.u, 2)) / (2 * found.a);
+                    addStep(`<strong>Found s:</strong> Rearranging v² = u² + 2as<br>s = <strong>${found.s.toFixed(2)} m</strong>`);
+                    changed = true;
+                }
+                // Logic: s = 0.5(u+v)t
+                if (found.s === undefined && found.u !== undefined && found.v !== undefined && found.t !== undefined) {
+                    found.s = 0.5 * (found.u + found.v) * found.t;
+                    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>`);
+                    changed = true;
+                }
+                else if (found.t === undefined && found.s !== undefined && found.u !== undefined && found.v !== undefined && (found.u+found.v) !== 0) {
+                    found.t = (2 * found.s) / (found.u + found.v);
+                    addStep(`<strong>Found t:</strong> Rearranging s = ½(u+v)t<br>t = <strong>${found.t.toFixed(2)} s</strong>`);
+                    changed = true;
+                }
+            }
+            // 3. Display Results
+            const resultCard = document.getElementById('result-card');
+            const stepsDiv = document.getElementById('solution-steps');
+            const emptyState = document.getElementById('empty-state');
+            emptyState.classList.add('hidden');
+            resultCard.classList.remove('hidden');
+            let finalHTML = steps.join('');
+            // Check if we solved everything
+            let allSolved = true;
+            variables.forEach(v => {
+                if (found[v] === undefined) allSolved = false;
+            });
+            if (!allSolved) {
+                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>`;
+            }
+            stepsDiv.innerHTML = finalHTML;
+        }
+        // --- Simulator Logic ---
+        const canvas = document.getElementById('simCanvas');
+        const ctx = canvas.getContext('2d');
+        let animationId;
+        let isPlaying = false;
+        let simTime = 0;
+        let simData = { u: 0, a: 2, t_total: 10 };
+        function resizeCanvas() {
+            const parent = canvas.parentElement;
+            canvas.width = parent.clientWidth;
+            canvas.height = parent.clientHeight;
+            drawScene();
+        }
+        window.addEventListener('resize', resizeCanvas);
+        function updateSimParams() {
+            simData.u = parseFloat(document.getElementById('sim_u').value);
+            simData.a = parseFloat(document.getElementById('sim_a').value);
+            simData.t_total = parseFloat(document.getElementById('sim_t').value);
+            // Update UI Labels
+            document.getElementById('sim_u_val').innerText = simData.u + " m/s";
+            document.getElementById('sim_a_val').innerText = simData.a + " m/s²";
+            document.getElementById('sim_t_val').innerText = simData.t_total + " s";
+            // Update Stats
+            const v_final = simData.u + simData.a * simData.t_total;
+            const s_final = simData.u * simData.t_total + 0.5 * simData.a * Math.pow(simData.t_total, 2);
+            document.getElementById('stat_vmax').innerText = Math.abs(v_final).toFixed(1) + " m/s";
+            document.getElementById('stat_dist').innerText = Math.abs(s_final).toFixed(1) + " m";
+            if (!isPlaying) {
+                drawScene();
+            }
+        }
+        function setPreset(type) {
+            if (isPlaying) toggleSimulation();
+            simTime = 0;
+            if (type === 'freefall') {
+                document.getElementById('sim_u').value = 0;
+                document.getElementById('sim_a').value = -9.8;
+                document.getElementById('sim_t').value = 5;
+            } else if (type === 'acceleration') {
+                document.getElementById('sim_u').value = 5;
+                document.getElementById('sim_a').value = 2;
+                document.getElementById('sim_t').value = 10;
+            } else if (type === 'deceleration') {
+                document.getElementById('sim_u').value = 20;
+                document.getElementById('sim_a').value = -4;
+                document.getElementById('sim_t').value = 5;
+            }
+            updateSimParams();
+        }
+        function drawScene() {
+            const w = canvas.width;
+            const h = canvas.height;
+            const pad = 40;
+            ctx.clearRect(0, 0, w, h);
+            // Grid
+            ctx.strokeStyle = '#334155';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for(let i=pad; i<w; i+=40) { ctx.moveTo(i, 0); ctx.lineTo(i, h); }
+            for(let i=pad; i<h; i+=40) { ctx.moveTo(0, i); ctx.lineTo(w, i); }
+            ctx.stroke();
+            // Axes
+            ctx.strokeStyle = '#94a3b8';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(pad, h/2); ctx.lineTo(w, h/2); // X axis (Time)
+            ctx.moveTo(pad, 0); ctx.lineTo(pad, h);   // Y axis
+            ctx.stroke();
+            // Labels
+            ctx.fillStyle = '#94a3b8';
+            ctx.font = '12px Inter';
+            ctx.fillText('Time (s)', w - 50, h/2 - 10);
+            ctx.fillText('Position / Velocity', pad + 10, 15);
+            // Calculate Scale Factors
+            // We need to fit the entire motion into the canvas
+            const t_max = simData.t_total;
+            const s_max = Math.max(
+                Math.abs(simData.u * t_max + 0.5 * simData.a * t_max * t_max),
+                Math.abs(simData.u * t_max) // rough check
+            ) * 1.2; // add padding
+            const v_max = Math.max(Math.abs(simData.u), Math.abs(simData.u + simData.a * t_max)) * 1.2;
+            const scaleX = (w - pad) / t_max;
+            // Use two scales? No, let's normalize Y to fit both graphs
+            // Actually, let's just draw graphs relative to center line.
+            // Center line is 0.
+            // Draw Velocity Graph (Purple)
+            ctx.beginPath();
+            ctx.strokeStyle = '#a855f7'; // Purple
+            ctx.lineWidth = 3;
+            let first = true;
+            for (let t = 0; t <= simTime; t += 0.05) {
+                const v = simData.u + simData.a * t;
+                // Map v to Y.
+                // Let's say max height represents max velocity magnitude.
+                // But if velocity is negative, it goes down.
+                // Let's normalize: 0 is center. Top is +v_max, Bottom is -v_max.
+                // To make it look good, let's just map velocity to a portion of the screen
+                // Or better: Map Position to top half, Velocity to bottom half?
+                // Let's stick to: X axis is time. Y axis is value.
+                // We need a dynamic range.
+                // Let's just plot Position (x) on top half and Velocity (v) on bottom half?
+                // No, standard is usually Position vs Time.
+                // Let's plot Position vs Time (Brand Color) and Velocity Vector (Arrow).
+                // Actually, let's plot the Position graph (s vs t)
+                const s = simData.u * t + 0.5 * simData.a * t * t;
+                // Mapping:
+                // X = pad + t * scaleX
+                // Y = h/2 - s * scaleS
+                // We need scaleS such that s_max fits in h/2 - pad
+                const scaleS = (h/2 - pad) / (s_max || 1);
+                const x = pad + t * scaleX;
+                const y = h/2 - s * scaleS;
+                if (first) { ctx.moveTo(x, y); first = false; }
+                else { ctx.lineTo(x, y); }
+            }
+            ctx.stroke();
+            // Draw Particle
+            const currentS = simData.u * simTime + 0.5 * simData.a * simTime * simTime;
+            const currentV = simData.u + simData.a * simTime;
+            const scaleS = (h/2 - pad) / (s_max || 1);
+            const pX = pad + simTime * scaleX;
+            const pY = h/2 - currentS * scaleS;
+            // Particle Body
+            ctx.fillStyle = '#38bdf8';
+            ctx.beginPath();
+            ctx.arc(pX, pY, 8, 0, Math.PI * 2);
+            ctx.fill();
+            // Velocity Vector
+            if (Math.abs(currentV) > 0.1) {
+                ctx.beginPath();
+                ctx.strokeStyle = '#f472b6'; // Pink
+                ctx.lineWidth = 2;
+                const vScale = 5; // Visual scaling for arrow
+                ctx.moveTo(pX, pY);
+                ctx.lineTo(pX + currentV * vScale, pY);
+                ctx.stroke();
+                // Arrowhead
+                // ... (simplified)
+            }
+            // Update Live Stats
+            document.getElementById('live_t').innerText = simTime.toFixed(1);
+            document.getElementById('live_v').innerText = currentV.toFixed(1);
+            document.getElementById('live_s').innerText = currentS.toFixed(1);
+        }
+        function loop() {
+            if (!isPlaying) return;
+            simTime += 0.05; // Time step
+            if (simTime > simData.t_total) {
+                simTime = simData.t_total;
+                isPlaying = false;
+                document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play mr-1"></i> Replay';
+            }
+            drawScene();
+            animationId = requestAnimationFrame(loop);
+        }
+        function toggleSimulation() {
+            const btn = document.getElementById('btn-play');
+            if (isPlaying) {
+                isPlaying = false;
+                cancelAnimationFrame(animationId);
+                btn.innerHTML = '<i class="fa-solid fa-play mr-1"></i> Resume';
+                btn.classList.remove('bg-red-600', 'hover:bg-red-500');
+                btn.classList.add('bg-green-600', 'hover:bg-green-500');
+            } else {
+                if (simTime >= simData.t_total) simTime = 0;
+                isPlaying = true;
+                btn.innerHTML = '<i class="fa-solid fa-pause mr-1"></i> Pause';
+                btn.classList.remove('bg-green-600', 'hover:bg-green-500');
+                btn.classList.add('bg-red-600', 'hover:bg-red-500');
+                loop();
+            }
+        }
+        function resetSimulation() {
+            isPlaying = false;
+            cancelAnimationFrame(animationId);
+            simTime = 0;
+            document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play mr-1"></i> Start';
+            document.getElementById('btn-play').classList.remove('bg-red-600', 'hover:bg-red-500');
+            document.getElementById('btn-play').classList.add('bg-green-600', 'hover:bg-green-500');
+            drawScene();
+        }
+        // Init
+        window.onload = () => {
+            resizeCanvas();
+            updateSimParams();
+        };
+    </script>
+</body>
+</html>