Spaces:

Javedalam
/

sdof_simulator

Running

App Files Files Community

Javedalam commited on 23 days ago

Commit

27be395

verified ·

1 Parent(s): beca790

Upload 6 files

Browse files

Files changed (6) hide show

index.html +210 -0
project.md +39 -0
script.js +288 -0
server.js +47 -0
style.css +352 -28
test_solver.js +78 -0

index.html ADDED Viewed

	@@ -0,0 +1,210 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive SDOF Vibration Simulator</title>
+    <meta name="description"
+        content="Interactive simulation of a damped single-degree-of-freedom (SDOF) vibration system. Visualize displacement and velocity in real-time.">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@500&display=swap"
+        rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>SDOF Vibration Simulator</h1>
+            <p>Explore the dynamics of a Single-Degree-of-Freedom system. Adjust parameters to see real-time response.
+            </p>
+        </header>
+        <!-- Visual Panel -->
+        <section class="visual-panel">
+            <div class="diagram-container">
+                <!-- SVG Diagram -->
+                <svg viewBox="0 0 480 180" width="100%" role="img" aria-label="SDOF System Diagram">
+                    <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6">
+                        <path d="M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2" stroke="#4b5563" stroke-width="1" />
+                    </pattern>
+                    <rect x="0" y="150" width="480" height="20" fill="url(#hatch)" />
+                    <rect x="10" y="40" width="20" height="110" fill="#111827" stroke="#111827" stroke-width="2" />
+                    <g transform="translate(30,90)">
+                        <line x1="0" y1="0" x2="20" y2="0" stroke="#111827" stroke-width="2" />
+                        <polyline points="20,0 30,-10 40,10 50,-10 60,10 70,-10 80,10 90,-10 100,0" fill="none"
+                            stroke="#111827" stroke-width="2" />
+                        <line x1="100" y1="0" x2="120" y2="0" stroke="#111827" stroke-width="2" />
+                    </g>
+                    <g transform="translate(30,120)">
+                        <line x1="0" y1="0" x2="20" y2="0" stroke="#111827" stroke-width="2" />
+                        <rect x="20" y="-8" width="25" height="16" fill="none" stroke="#111827" stroke-width="2" />
+                        <line x1="45" y1="0" x2="70" y2="0" stroke="#111827" stroke-width="2" />
+                        <line x1="70" y1="-8" x2="70" y2="8" stroke="#111827" stroke-width="2" />
+                        <line x1="70" y1="-8" x2="80" y2="-8" stroke="#111827" stroke-width="2" />
+                        <line x1="70" y1="8" x2="80" y2="8" stroke="#111827" stroke-width="2" />
+                        <line x1="80" y1="-8" x2="80" y2="8" stroke="#111827" stroke-width="2" />
+                        <line x1="80" y1="0" x2="120" y2="0" stroke="#111827" stroke-width="2" />
+                    </g>
+                    <rect x="150" y="70" width="110" height="70" fill="#ffffff" stroke="#111827" stroke-width="2" />
+                    <circle cx="175" cy="145" r="8" fill="#ffffff" stroke="#111827" stroke-width="2" />
+                    <circle cx="235" cy="145" r="8" fill="#ffffff" stroke="#111827" stroke-width="2" />
+                    <defs>
+                        <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+                            <path d="M0,0 L8,4 L0,8 z" fill="#111827" />
+                        </marker>
+                    </defs>
+                    <line x1="150" y1="55" x2="230" y2="55" stroke="#111827" stroke-width="2"
+                        marker-end="url(#arrow)" />
+                    <text x="232" y="59" font-size="14" font-family="sans-serif">u(t)</text>
+                    <line x1="260" y1="105" x2="330" y2="105" stroke="#111827" stroke-width="2"
+                        marker-end="url(#arrow)" />
+                    <text x="332" y="93" font-size="14" font-family="sans-serif">F(t)</text>
+                </svg>
+            </div>
+        </section>
+        <!-- Theory Panel -->
+        <section class="theory-panel">
+            <h2>Theory & Guide</h2>
+            <div class="theory-content">
+                <div class="theory-block">
+                    <h3>System Parameters</h3>
+                    <ul>
+                        <li><strong>m (Mass):</strong> Inertia of the system (kg).</li>
+                        <li><strong>k (Stiffness):</strong> Resistance to deformation (N/m).</li>
+                        <li><strong>c (Damping):</strong> Energy dissipation coefficient (N·s/m).</li>
+                    </ul>
+                </div>
+                <div class="theory-block">
+                    <h3>Forcing</h3>
+                    <ul>
+                        <li><strong>F₀ (Amplitude):</strong> Magnitude of external force (N).</li>
+                        <li><strong>p (Frequency):</strong> Frequency of external force (rad/s).</li>
+                    </ul>
+                </div>
+                <div class="theory-block">
+                    <h3>Fundamental Equations</h3>
+                    <p>Natural Frequency: <span class="math">ωₙ = √(k/m)</span></p>
+                    <p>Damping Ratio: <span class="math">ζ = c / (2√(km))</span></p>
+                </div>
+                <div class="theory-block">
+                    <h3>Damping Regimes</h3>
+                    <ul>
+                        <li><strong>Underdamped (ζ < 1):</strong> Oscillates with decaying amplitude.</li>
+                        <li><strong>Critically Damped (ζ = 1):</strong> Fastest return to equilibrium without
+                            oscillation.</li>
+                        <li><strong>Overdamped (ζ > 1):</strong> Slow return to equilibrium without oscillation.</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="theory-footer">
+                <strong>Simulation Tip:</strong> For <em>Free Vibration</em>, set <strong>F₀ = 0</strong> and adjust
+                Initial Displacement (<strong>u₀</strong>) or Velocity (<strong>v₀</strong>).
+            </div>
+        </section>
+        <main class="dashboard">
+            <!-- Controls Panel (Left Column) -->
+            <section class="controls-panel">
+                <div class="control-group">
+                    <label for="mass-slider">Mass (m)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="mass-slider" min="0.5" max="5" step="0.1" value="1">
+                        <span class="slider-value" id="mass-val">1.0</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="stiffness-slider">Stiffness (k)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="stiffness-slider" min="20" max="800" step="10" value="100">
+                        <span class="slider-value" id="stiffness-val">100</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="damping-slider">Damping (c)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="damping-slider" min="0" max="60" step="0.5" value="5">
+                        <span class="slider-value" id="damping-val">5.0</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="force-slider">Forcing Amp (F0)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="force-slider" min="0" max="80" step="1" value="10">
+                        <span class="slider-value" id="force-val">10</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="p-slider">Forcing Freq (p)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="p-slider" min="0.5" max="20" step="0.5" value="5">
+                        <span class="slider-value" id="p-val">5.0</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="u0-slider">Initial Disp. (u0)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="u0-slider" min="-5" max="5" step="0.1" value="0">
+                        <span class="slider-value" id="u0-val">0.0</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="v0-slider">Initial Vel. (v0)</label>
+                    <div class="slider-wrapper">
+                        <input type="range" id="v0-slider" min="-10" max="10" step="0.1" value="0">
+                        <span class="slider-value" id="v0-val">0.0</span>
+                    </div>
+                </div>
+                <!-- Calculated Stats (Moved inside Controls Panel) -->
+                <div class="stats-panel"
+                    style="margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
+                    <div class="stat-card">
+                        <span class="stat-label">Natural Frequency (ωn)</span>
+                        <span class="stat-value" id="omega-n-val">--</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-label">Damping Ratio (ζ)</span>
+                        <span class="stat-value" id="zeta-val">--</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-label">Regime</span>
+                        <span class="stat-value highlight" id="regime-val">--</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-label">Peak Disp.</span>
+                        <span class="stat-value" id="peak-disp-val">--</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-label">Peak Vel.</span>
+                        <span class="stat-value" id="peak-vel-val">--</span>
+                    </div>
+                </div>
+            </section>
+            <!-- Charts Panel (Bottom Right) -->
+            <section class="charts-panel">
+                <div class="equation-container">
+                    <h3>System Equation</h3>
+                    <div id="math-equation"></div>
+                    <div id="math-solution"></div>
+                </div>
+                <div class="chart-container">
+                    <h3>Displacement u(t)</h3>
+                    <canvas id="disp-chart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <h3>Velocity u'(t)</h3>
+                    <canvas id="vel-chart"></canvas>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

project.md ADDED Viewed

	@@ -0,0 +1,39 @@

+# Interactive SDOF Vibration Simulator
+## Overview
+The **Interactive SDOF Vibration Simulator** is a web-based educational tool designed to help students and engineers visualize the dynamics of a **Single-Degree-of-Freedom (SDOF)** system. It provides real-time simulation and visualization of how a mass-spring-damper system responds to external forces and initial conditions.
+## Key Features
+### 1. Real-Time Simulation
+-   Powered by a custom **Runge-Kutta 4th Order (RK4)** solver for high accuracy.
+-   Solves the differential equation: $m\ddot{u} + c\dot{u} + ku = F(t)$.
+-   Updates continuously as you adjust parameters.
+### 2. Interactive Controls
+Adjust system parameters on the fly with responsive sliders:
+-   **System Properties**: Mass ($m$), Stiffness ($k$), Damping Coefficient ($c$).
+-   **Forcing**: Force Amplitude ($F_0$), Forcing Frequency ($p$).
+-   **Initial Conditions**: Initial Displacement ($u_0$), Initial Velocity ($v_0$).
+### 3. Dynamic Visualization
+-   **Animated Diagram**: A physics-based SVG representation of the mass, spring, and damper that moves in sync with the simulation.
+-   **Live Plots**: Real-time time-history graphs for **Displacement ($u$)** and **Velocity ($\dot{u}$)**.
+### 4. Instant Analysis
+Automatically calculates and displays key system characteristics:
+-   **Natural Frequency ($\omega_n$)**
+-   **Damping Ratio ($\zeta$)**
+-   **Damping Regime**: Automatically classifies the system as **Underdamped**, **Critically Damped**, or **Overdamped**.
+## Technical Details
+-   **Frontend**: Pure HTML5, CSS3, and Vanilla JavaScript.
+-   **Styling**: Modern, responsive dark-mode design using CSS Variables and Flexbox/Grid.
+-   **Performance**: Optimized canvas rendering for smooth 60fps plotting.
+-   **No Dependencies**: Runs entirely in the browser without external libraries.
+## Usage
+1.  Open `index.html` in a modern web browser.
+2.  Use the sliders on the left to modify the system.
+3.  Observe the diagram and plots update instantly.
+4.  To simulate **Free Vibration**, set the **Forcing Amp ($F_0$)** to `0` and adjust the **Initial Displacement** or **Velocity**.

script.js ADDED Viewed

	@@ -0,0 +1,288 @@

+/**
+ * Interactive SDOF Vibration Simulator
+ * Implements RK4 solver and real-time plotting
+ */
+// --- Constants & State ---
+const state = {
+    m: 1.0,
+    k: 100,
+    c: 5.0,
+    F0: 10,
+    p: 5.0, // Forcing frequency (rad/s)
+    u0: 0.0,
+    v0: 0.0,
+    tMax: 10.0,
+    dt: 0.001
+};
+// --- DOM Elements ---
+const elements = {
+    sliders: {
+        m: document.getElementById('mass-slider'),
+        k: document.getElementById('stiffness-slider'),
+        c: document.getElementById('damping-slider'),
+        F0: document.getElementById('force-slider'),
+        p: document.getElementById('p-slider'),
+        u0: document.getElementById('u0-slider'),
+        v0: document.getElementById('v0-slider')
+    },
+    values: {
+        m: document.getElementById('mass-val'),
+        k: document.getElementById('stiffness-val'),
+        c: document.getElementById('damping-val'),
+        F0: document.getElementById('force-val'),
+        p: document.getElementById('p-val'),
+        u0: document.getElementById('u0-val'),
+        v0: document.getElementById('v0-val')
+    },
+    stats: {
+        omegaN: document.getElementById('omega-n-val'),
+        zeta: document.getElementById('zeta-val'),
+        regime: document.getElementById('regime-val'),
+        peakDisp: document.getElementById('peak-disp-val'),
+        peakVel: document.getElementById('peak-vel-val')
+    },
+    canvas: {
+        disp: document.getElementById('disp-chart'),
+        vel: document.getElementById('vel-chart')
+    },
+    equation: {
+        math: document.getElementById('math-equation'),
+        sol: document.getElementById('math-solution')
+    }
+};
+// --- Physics Engine ---
+/**
+ * Differential equations for SDOF system
+ * u' = v
+ * v' = (F0 * sin(p * t) - c * v - k * u) / m
+ */
+function derivatives(t, u, v) {
+    const u_prime = v;
+    const v_prime = (state.F0 * Math.sin(state.p * t) - state.c * v - state.k * u) / state.m;
+    return { u_prime, v_prime };
+}
+function solve() {
+    let t = 0;
+    let u = state.u0; // Initial displacement
+    let v = state.v0; // Initial velocity
+    const results = {
+        t: [],
+        u: [],
+        v: []
+    };
+    const steps = Math.ceil(state.tMax / state.dt);
+    for (let i = 0; i <= steps; i++) {
+        // Store current state
+        if (i % 10 === 0) { // Downsample for plotting (store every 10th point)
+            results.t.push(t);
+            results.u.push(u);
+            results.v.push(v);
+        }
+        // RK4 Steps
+        const k1 = derivatives(t, u, v);
+        const t2 = t + state.dt / 2;
+        const u2 = u + k1.u_prime * state.dt / 2;
+        const v2 = v + k1.v_prime * state.dt / 2;
+        const k2 = derivatives(t2, u2, v2);
+        const t3 = t + state.dt / 2;
+        const u3 = u + k2.u_prime * state.dt / 2;
+        const v3 = v + k2.v_prime * state.dt / 2;
+        const k3 = derivatives(t3, u3, v3);
+        const t4 = t + state.dt;
+        const u4 = u + k3.u_prime * state.dt;
+        const v4 = v + k3.v_prime * state.dt;
+        const k4 = derivatives(t4, u4, v4);
+        // Update state
+        u += (state.dt / 6) * (k1.u_prime + 2 * k2.u_prime + 2 * k3.u_prime + k4.u_prime);
+        v += (state.dt / 6) * (k1.v_prime + 2 * k2.v_prime + 2 * k3.v_prime + k4.v_prime);
+        t += state.dt;
+    }
+    return results;
+}
+/**
+ * Calculate system properties
+ */
+function calculateProperties() {
+    const omegaN = Math.sqrt(state.k / state.m);
+    const zeta = state.c / (2 * Math.sqrt(state.k * state.m));
+    let regime = '';
+    if (zeta < 0) regime = 'Unstable';
+    else if (zeta >= 0 && zeta < 1) regime = 'Underdamped';
+    else if (zeta === 1) regime = 'Critically Damped';
+    else regime = 'Overdamped';
+    return { omegaN, zeta, regime };
+}
+function updateEquationDisplay(props) {
+    // 1. Governing Equation
+    // mu'' + cu' + ku = F0sin(pt)
+    // mu'' + cu' + ku = F0sin(pt)
+    const eq = `${state.m.toFixed(1)}u'' + ${state.c.toFixed(1)}u' + ${state.k.toFixed(0)}u = ${state.F0 > 0 ? `${state.F0}sin(${state.p.toFixed(1)}t)` : '0'}`;
+    elements.equation.math.textContent = eq;
+    // 2. Solution Form
+    let solText = "";
+    if (state.F0 === 0) {
+        // Free Vibration
+        if (props.zeta < 1) {
+            solText = `Free Underdamped: u(t) = e^(-${(props.zeta * props.omegaN).toFixed(2)}t) * (A cos(${(props.omegaN * Math.sqrt(1 - props.zeta ** 2)).toFixed(2)}t) + B sin(...))`;
+        } else if (props.zeta === 1) {
+            solText = `Free Critically Damped: u(t) = (A + Bt) * e^(-${props.omegaN.toFixed(2)}t)`;
+        } else {
+            solText = `Free Overdamped: u(t) = A * e^(s1*t) + B * e^(s2*t)`;
+        }
+    } else {
+        // Forced Vibration
+        solText = `Forced Response: u(t) = u_h(t) [Transient] + u_p(t) [Steady State]`;
+    }
+    elements.equation.sol.textContent = solText;
+}
+// --- Rendering ---
+function drawChart(canvas, timeData, valueData, color, label) {
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height);
+    // Setup scaling
+    const padding = 40;
+    const plotWidth = width - 2 * padding;
+    const plotHeight = height - 2 * padding;
+    const minVal = Math.min(...valueData);
+    const maxVal = Math.max(...valueData);
+    const range = maxVal - minVal || 1; // Avoid division by zero
+    // Helper to map coordinates
+    const mapX = (t) => padding + (t / state.tMax) * plotWidth;
+    const mapY = (val) => height - padding - ((val - minVal) / range) * plotHeight;
+    // Draw Grid
+    ctx.strokeStyle = '#334155';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    // Zero line
+    if (minVal < 0 && maxVal > 0) {
+        const yZero = mapY(0);
+        ctx.moveTo(padding, yZero);
+        ctx.lineTo(width - padding, yZero);
+    }
+    ctx.stroke();
+    // Draw Curve
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(mapX(timeData[0]), mapY(valueData[0]));
+    for (let i = 1; i < timeData.length; i++) {
+        ctx.lineTo(mapX(timeData[i]), mapY(valueData[i]));
+    }
+    ctx.stroke();
+    // Draw Axes Labels (Simple)
+    ctx.fillStyle = '#94a3b8';
+    ctx.font = '12px Inter';
+    ctx.fillText('0', padding, height - padding + 15);
+    ctx.fillText(state.tMax + 's', width - padding - 20, height - padding + 15);
+    ctx.fillText(maxVal.toFixed(2), 5, padding + 5);
+    ctx.fillText(minVal.toFixed(2), 5, height - padding + 5);
+}
+let isUpdating = false;
+function updateUI() {
+    if (isUpdating) return;
+    isUpdating = true;
+    requestAnimationFrame(() => {
+        // 1. Solve
+        console.log("Solving with state:", JSON.stringify(state));
+        const data = solve();
+        const props = calculateProperties();
+        console.log("Properties:", props);
+        updateEquationDisplay(props);
+        // 2. Update Stats
+        elements.stats.omegaN.textContent = props.omegaN.toFixed(2) + ' rad/s';
+        elements.stats.zeta.textContent = props.zeta.toFixed(3);
+        elements.stats.regime.textContent = props.regime;
+        // Peak values
+        const maxDisp = Math.max(...data.u.map(Math.abs));
+        const maxVel = Math.max(...data.v.map(Math.abs));
+        elements.stats.peakDisp.textContent = maxDisp.toFixed(3);
+        elements.stats.peakVel.textContent = maxVel.toFixed(3);
+        // 3. Draw Charts
+        // Resize canvas to match display size
+        [elements.canvas.disp, elements.canvas.vel].forEach(canvas => {
+            const rect = canvas.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                canvas.width = rect.width;
+                canvas.height = rect.height;
+            }
+        });
+        drawChart(elements.canvas.disp, data.t, data.u, '#38bdf8', 'Displacement');
+        drawChart(elements.canvas.vel, data.t, data.v, '#4ade80', 'Velocity');
+        isUpdating = false;
+    });
+}
+// --- Event Listeners ---
+function handleSliderChange(key) {
+    return (e) => {
+        const val = parseFloat(e.target.value);
+        state[key] = val;
+        elements.values[key].textContent = val;
+        updateUI();
+    };
+}
+function init() {
+    console.log("Initializing SDOF Simulator v2");
+    // Attach listeners
+    elements.sliders.m.addEventListener('input', handleSliderChange('m'));
+    elements.sliders.k.addEventListener('input', handleSliderChange('k'));
+    elements.sliders.c.addEventListener('input', handleSliderChange('c'));
+    elements.sliders.F0.addEventListener('input', handleSliderChange('F0'));
+    elements.sliders.p.addEventListener('input', handleSliderChange('p'));
+    elements.sliders.u0.addEventListener('input', handleSliderChange('u0'));
+    elements.sliders.v0.addEventListener('input', handleSliderChange('v0'));
+    // Initial render
+    updateUI();
+    // Handle resize
+    window.addEventListener('resize', updateUI);
+}
+// Start
+init();

server.js ADDED Viewed

	@@ -0,0 +1,47 @@

+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const PORT = 8080;
+const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'text/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+};
+const server = http.createServer((req, res) => {
+    console.log(`request ${req.url}`);
+    let filePath = '.' + req.url;
+    if (filePath === './') {
+        filePath = './index.html';
+    }
+    const extname = String(path.extname(filePath)).toLowerCase();
+    const contentType = mimeTypes[extname] || 'application/octet-stream';
+    fs.readFile(filePath, (error, content) => {
+        if (error) {
+            if (error.code == 'ENOENT') {
+                res.writeHead(404);
+                res.end('404 Not Found');
+            } else {
+                res.writeHead(500);
+                res.end('Sorry, check with the site admin for error: ' + error.code + ' ..\n');
+            }
+        } else {
+            res.writeHead(200, { 'Content-Type': contentType });
+            res.end(content, 'utf-8');
+        }
+    });
+});
+server.listen(PORT, () => {
+    console.log(`Server running at http://localhost:${PORT}/`);
+});

style.css CHANGED Viewed

@@ -1,28 +1,352 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+:root {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --accent-primary: #38bdf8;
+    --accent-secondary: #818cf8;
+    --success: #4ade80;
+    --warning: #fbbf24;
+    --danger: #f87171;
+    --border: #334155;
+    --radius: 12px;
+    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.5;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.container {
+    max-width: 1000px;
+    /* Reduced max-width for vertical layout readability */
+    margin: 0 auto;
+    padding: 2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+header {
+    text-align: center;
+    /* margin-bottom handled by container gap */
+}
+header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+header p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+}
+/* Dashboard Grid Layout (Controls + Charts) */
+.dashboard {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: 1fr;
+}
+@media (min-width: 1024px) {
+    .dashboard {
+        grid-template-columns: 350px 1fr;
+        /* Fixed width controls, flexible charts */
+        grid-template-areas: "controls charts";
+        align-items: start;
+    }
+    .controls-panel {
+        grid-area: controls;
+    }
+    .charts-panel {
+        grid-area: charts;
+    }
+}
+/* Panels Common Styles */
+.visual-panel,
+.controls-panel,
+.charts-panel,
+.theory-panel {
+    background-color: var(--bg-secondary);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border);
+}
+/* Visual Panel */
+.diagram-container {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    height: 250px;
+    /* Fixed height */
+}
+.diagram-container svg {
+    max-height: 100%;
+    max-width: 100%;
+}
+/* Theory Panel */
+.theory-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.theory-panel h2 {
+    font-size: 1.25rem;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.5rem;
+}
+.theory-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+.theory-block h3 {
+    font-size: 1rem;
+    color: var(--accent-secondary);
+    margin-bottom: 0.25rem;
+}
+.theory-block ul {
+    list-style: none;
+    padding: 0;
+}
+.theory-block li {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.25rem;
+}
+.theory-block li strong {
+    color: var(--text-primary);
+}
+.theory-block p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.25rem;
+}
+.math {
+    font-family: 'Times New Roman', serif;
+    font-style: italic;
+    color: var(--accent-primary);
+    font-size: 1.1rem;
+}
+.theory-footer {
+    margin-top: auto;
+    padding: 0.75rem;
+    background-color: var(--bg-tertiary);
+    border-radius: 6px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    border-left: 4px solid var(--success);
+}
+.theory-footer strong {
+    color: var(--success);
+}
+/* Controls Panel */
+.controls-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.control-group label {
+    font-weight: 500;
+    color: var(--text-primary);
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.95rem;
+}
+.slider-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+input[type="range"] {
+    flex: 1;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+    appearance: none;
+    cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.1s, background-color 0.2s;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    background-color: var(--accent-secondary);
+}
+.slider-value {
+    font-family: 'Fira Code', monospace;
+    min-width: 3.5rem;
+    text-align: right;
+    color: var(--accent-primary);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+/* Stats Panel (Inside Controls) */
+.stats-panel {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+}
+.stat-card {
+    background-color: var(--bg-tertiary);
+    padding: 0.75rem;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+.stat-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+.stat-value {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+.stat-value.highlight {
+    color: var(--accent-primary);
+}
+/* Charts Panel */
+.charts-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+.equation-container {
+    padding: 1rem;
+    background: var(--bg-tertiary);
+    border-radius: 8px;
+    border-left: 4px solid var(--accent-primary);
+}
+.equation-container h3 {
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+#math-equation {
+    font-family: 'Times New Roman', serif;
+    font-style: italic;
+    font-size: 1.3rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+#math-solution {
+    font-family: 'Times New Roman', serif;
+    font-size: 1.1rem;
+    color: var(--accent-secondary);
+}
+.chart-container {
+    position: relative;
+    width: 100%;
+    height: 300px;
+    /* Taller charts */
+    background: var(--bg-primary);
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    padding: 10px;
+}
+.chart-container h3 {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    padding: 2px 6px;
+    border-radius: 4px;
+    z-index: 10;
+}
+canvas {
+    width: 100%;
+    height: 100%;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+    header h1 {
+        font-size: 1.75rem;
+    }
+}

test_solver.js ADDED Viewed

	@@ -0,0 +1,78 @@

+const state = {
+    m: 1.0,
+    k: 100,
+    c: 5.0,
+    F0: 10,
+    p: 5.0,
+    u0: 0.0,
+    v0: 0.0,
+    tMax: 10.0,
+    dt: 0.001
+};
+function derivatives(t, u, v) {
+    const u_prime = v;
+    const v_prime = (state.F0 * Math.sin(state.p * t) - state.c * v - state.k * u) / state.m;
+    return { u_prime, v_prime };
+}
+function solve() {
+    let t = 0;
+    let u = state.u0;
+    let v = state.v0;
+    let maxU = 0;
+    const steps = Math.ceil(state.tMax / state.dt);
+    for (let i = 0; i <= steps; i++) {
+        const k1 = derivatives(t, u, v);
+        const t2 = t + state.dt / 2;
+        const u2 = u + k1.u_prime * state.dt / 2;
+        const v2 = v + k1.v_prime * state.dt / 2;
+        const k2 = derivatives(t2, u2, v2);
+        const t3 = t + state.dt / 2;
+        const u3 = u + k2.u_prime * state.dt / 2;
+        const v3 = v + k2.v_prime * state.dt / 2;
+        const k3 = derivatives(t3, u3, v3);
+        const t4 = t + state.dt;
+        const u4 = u + k3.u_prime * state.dt;
+        const v4 = v + k3.v_prime * state.dt;
+        const k4 = derivatives(t4, u4, v4);
+        u += (state.dt / 6) * (k1.u_prime + 2 * k2.u_prime + 2 * k3.u_prime + k4.u_prime);
+        v += (state.dt / 6) * (k1.v_prime + 2 * k2.v_prime + 2 * k3.v_prime + k4.v_prime);
+        t += state.dt;
+        if (Math.abs(u) > maxU) maxU = Math.abs(u);
+    }
+    return { finalU: u, maxU: maxU };
+}
+function runTest(name, params) {
+    Object.assign(state, params);
+    const res = solve();
+    console.log(`Test: ${name}`);
+    console.log(`  Params: ${JSON.stringify(params)}`);
+    console.log(`  Result: Max |u| = ${res.maxU.toFixed(5)}, Final u = ${res.finalU.toFixed(5)}`);
+    return res;
+}
+console.log("--- Verification Suite ---");
+// 1. Zero Values
+runTest("Zero Values", { m: 1, k: 100, c: 5, F0: 0, p: 0, u0: 0, v0: 0 });
+// 2. Resonance (omega_n = 10)
+// Low damping to see large amplitude
+runTest("Resonance", { m: 1, k: 100, c: 1, F0: 10, p: 10, u0: 0, v0: 0 });
+// 3. Underdamped Free Vibration (zeta = 0.25)
+runTest("Underdamped Free", { m: 1, k: 100, c: 5, F0: 0, p: 0, u0: 1, v0: 0 });
+// 4. Critically Damped Free Vibration (zeta = 1.0)
+// c = 2 * sqrt(1 * 100) = 20
+runTest("Critically Damped Free", { m: 1, k: 100, c: 20, F0: 0, p: 0, u0: 1, v0: 0 });
+// 5. Overdamped Free Vibration (zeta = 2.0)
+// c = 40
+runTest("Overdamped Free", { m: 1, k: 100, c: 40, F0: 0, p: 0, u0: 1, v0: 0 });