ro
8af00573db
- Add segmented 3D/2D toggle bar at top of views area (hidden on desktop) - Mobile (≤768px) starts in 3D view by default - CSS data-mobile-view attribute controls panel visibility on mobile - Remove redundant detectMobileLayout() JS function and .app.mobile-layout CSS - Remove verbose logViewportInfo() logging - Single isMobileViewport() helper replaces multiple JS-based detections - apply3DVisibility() now desktop-only; mobile uses CSS for panel switching - Graceful fallback: if WebGL unavailable, hide toggle and force 2D
52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Walker Linkage Simulator</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.161.0/build/three.module.js",
|
|
"tweakpane": "https://esm.sh/tweakpane@4.0.4"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<section class="views-wrap">
|
|
<div class="mobile-view-toggle" id="mobile-view-toggle">
|
|
<button class="toggle-btn active" data-view="3d">3D View</button>
|
|
<button class="toggle-btn" data-view="2d">2D View</button>
|
|
</div>
|
|
|
|
<section class="view-panel" id="view-2d-panel">
|
|
<h2>2D View</h2>
|
|
<div class="canvas-container">
|
|
<canvas id="sim-canvas"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view-panel" id="view-3d-panel">
|
|
<h2>3D View</h2>
|
|
<div id="sim-3d" class="sim-3d" aria-label="3D mechanism viewport"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<aside class="panel" id="controls-panel">
|
|
<h1>Walker Sim (Kinematic)</h1>
|
|
<div id="tweakpane-root"></div>
|
|
|
|
<section class="diag">
|
|
<h2>Diagnostics</h2>
|
|
<pre id="diag">loading…</pre>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
</html>
|