Hugging Face's logo

Spaces:
AntDX316
/
HF-Bike
Running

App Files Community
HF-Bike / index.html
AntDX316
updated to index.html
d80df21
raw
history blame contribute delete
37.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Interactive Bike Geometry Visualizer</title>
 <style>
 html, body {
 height: 100%; /* Ensure body takes full height */
 margin: 0;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background-color: #f8f9fa;
 color: #333;
 }
 body {
 display: flex;
 flex-direction: column; /* Stack title above main content */
 padding: 20px;
 box-sizing: border-box;
 min-height: 100vh;
 }
 h1 {
 text-align: center;
 margin-bottom: 10px;
 flex-shrink: 0; /* Prevent title from shrinking */
 color: #2c3e50;
 font-weight: 600;
 font-size: 2.2rem;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
 }
.tool-description {
 text-align: center;
 margin: 0 auto 25px auto;
 max-width: 600px;
 color: #7f8c8d;
 font-size: 1.1rem;
 line-height: 1.5;
 }
 /* Main layout container */
 #main-layout {
 display: flex;
 flex-direction: row; /* Arrange children side-by-side */
 width: 100%;
 flex-grow: 1; /* Allow this container to fill remaining vertical space */
 gap: 30px; /* Increased space between SVG and controls */
 align-items: flex-start; /* Align items to the top */
 max-width: 1800px;
 margin: 0 auto;
 }
 /* Bike container */
 #bike-container {
 flex: 1 1 65%; /* Grow, shrink, basis 65% */
 max-width: 1200px; /* Max width for SVG */
 border: none;
 background-color: #fff;
 border-radius: 12px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 padding: 20px;
 align-self: stretch; /* Make it stretch to the height of the flex container if needed */
 display: flex; /* To center SVG if it's smaller */
 justify-content: center;
 align-items: center;
 transition: all 0.3s ease;
 }
 #bike-container:hover {
 box-shadow: 0 12px 32px rgba(0,0,0,0.12);
 }
 svg {
 display: block;
 width: 100%;
 height: auto; /* Maintain aspect ratio */
 max-height: 95%; /* Prevent SVG overflow if container is constrained */
 }
 /* Controls container */
 #controls {
 flex: 0 0 380px; /* Don't grow, don't shrink, fixed basis */
 padding: 25px;
 background-color: #fff;
 border-radius: 12px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 /* Layout within controls */
 display: grid;
 grid-template-columns: auto 1fr auto; /* Label | Slider | Value */
 gap: 14px 18px;
 align-items: center;
 align-content: start; /* Prevent items stretching vertically */
 /* Make controls scrollable if they exceed viewport height */
 max-height: calc(100vh - 120px);
 overflow-y: auto;
 overflow-x: hidden; /* Hide horizontal scrollbar */
 scrollbar-width: thin;
 scrollbar-color: #ccc #f8f9fa;
 }
 #controls::-webkit-scrollbar {
 width: 8px;
 }
 #controls::-webkit-scrollbar-track {
 background: #f8f9fa;
 }
 #controls::-webkit-scrollbar-thumb {
 background-color: #ccc;
 border-radius: 10px;
 border: 2px solid #f8f9fa;
 }
 /* SVG Styles - Enhanced for visual appeal */
 .frame-tube {
 stroke: #2980b9;
 stroke-width: 8;
 stroke-linecap: round;
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25));
 transition: stroke 0.3s ease;
 }
 /* Different frame tube colors for visual interest */
 #seat-tube { stroke: #2980b9; }
 #top-tube { stroke: #3498db; }
 #down-tube { stroke: #2c3e50; }
 #chainstay { stroke: #34495e; }
 #seatstay { stroke: #3498db; }
 .wheel {
 stroke: #34495e;
 stroke-width: 6;
 fill: none;
 filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.2));
 transition: all 0.3s ease;
 }
 .spokes {
 stroke: #bdc3c7;
 stroke-width: 1.2;
 transition: stroke 0.3s ease;
 }
 .component {
 stroke: #7f8c8d;
 stroke-width: 5;
 stroke-linecap: round;
 filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.15));
 transition: stroke 0.3s ease;
 }
/* Component-specific styling */
 #fork { stroke: #8e44ad; }
 #head-tube { stroke: #16a085; }
 #stem { stroke: #d35400; }
 #handlebar { stroke: #c0392b; }
 #seatpost { stroke: #27ae60; }
.headset-spacer {
 stroke: #95a5a6;
 stroke-width: 9;
 stroke-linecap: butt;
 }
 .drivetrain {
 stroke: #7f8c8d;
 stroke-width: 5;
 fill: none;
 stroke-linecap: round;
 transition: stroke 0.3s ease;
 }
 .pedal {
 fill: #2c3e50;
 transition: fill 0.3s ease;
 }
 .joint {
 fill: #e74c3c;
 stroke: none;
 filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.2));
 }
 .axle {
 fill: #3498db;
 stroke: none;
 filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.2));
 }
 .saddle {
 fill: #2c3e50;
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25));
 transition: fill 0.3s ease;
 }
 /* Enhanced Control Styling */
 label {
 text-align: right;
 font-size: 0.9em;
 color: #555;
 font-weight: 500;
 }
input[type="range"] {
 width: 100%;
 cursor: grab;
 -webkit-appearance: none;
 background: transparent;
 margin: 7px 0;
 }
input[type="range"]:focus {
 outline: none;
 }
/* Webkit (Chrome, Safari, Edge) styling */
 input[type="range"]::-webkit-slider-runnable-track {
 width: 100%;
 height: 6px;
 cursor: pointer;
 background: #e0e0e0;
 border-radius: 3px;
 border: none;
 }
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 18px;
 width: 18px;
 border-radius: 50%;
 background: #3a6ea5;
 cursor: grab;
 margin-top: -6px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 transition: background 0.15s ease;
 }
input[type="range"]::-webkit-slider-thumb:hover {
 background: #2980b9;
 }
input[type="range"]::-webkit-slider-thumb:active {
 cursor: grabbing;
 background: #2471a3;
 }
/* Firefox styling */
 input[type="range"]::-moz-range-track {
 width: 100%;
 height: 6px;
 cursor: pointer;
 background: #e0e0e0;
 border-radius: 3px;
 border: none;
 }
input[type="range"]::-moz-range-thumb {
 height: 18px;
 width: 18px;
 border-radius: 50%;
 background: #3a6ea5;
 cursor: grab;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 border: none;
 }
input[type="range"]:active::-moz-range-thumb {
 cursor: grabbing;
 background: #2471a3;
 }
.value-display {
 font-weight: 600;
 min-width: 60px;
 text-align: left;
 font-family: monospace;
 font-size: 0.95em;
 background: #f5f7fa;
 padding: 4px 8px;
 border-radius: 4px;
 color: #34495e;
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
 }
/* Section headers for control groups */
 .control-section {
 grid-column: 1 / -1;
 margin-top: 10px;
 margin-bottom: 5px;
 padding-bottom: 5px;
 border-bottom: 1px solid #e0e0e0;
 font-weight: 600;
 color: #2c3e50;
 font-size: 1.05em;
 }
 /* Make the first section header not have the top margin */
 .control-section:first-of-type {
 margin-top: 0;
 }
/* End of styling */
input[type="range"]:active {
 cursor: grabbing;
 }
.value-display {
 font-weight: bold;
 min-width: 60px;
 text-align: left;
 font-family: 'Consolas', monospace;
 font-size: 0.9em;
 color: #2c3e50;
 background: #f5f5f5;
 padding: 3px 6px;
 border-radius: 4px;
 }
 /* Media Query for responsive design */
 @media (max-width: 1000px) {
 body {
 padding: 15px;
 }
h1 {
 font-size: 1.8rem;
 margin-bottom: 15px;
 }
#main-layout {
 flex-direction: column; /* Stack SVG and controls vertically */
 align-items: center; /* Center items horizontally */
 height: auto; /* Let content define height */
 gap: 20px;
 }
#bike-container {
 width: 100%;
 flex-basis: auto; /* Reset basis */
 margin-bottom: 10px; /* Add space below SVG */
 align-self: auto; /* Reset self alignment */
 max-height: 60vh; /* Limit height on small screens */
 }
#controls {
 width: 100%;
 max-width: 600px; /* Wider controls when stacked */
 flex-basis: auto; /* Reset basis */
 max-height: none; /* Don't limit height */
 padding: 20px;
 gap: 12px 15px; /* Slightly reduce gap on small screens */
 }
 }
/* Extra small screens */
 @media (max-width: 600px) {
 body {
 padding: 10px;
 }
h1 {
 font-size: 1.5rem;
 margin-bottom: 12px;
 }
#bike-container {
 padding: 10px;
 }
#controls {
 padding: 15px;
 gap: 10px 10px;
 }
label {
 font-size: 0.8em;
 }
.value-display {
 font-size: 0.8em;
 min-width: 50px;
 }
 }
/* Remove all footer styling as it's no longer needed */
 </style>
</head>
<body>
<h1>Interactive Bike Geometry Visualizer</h1>
 <p class="tool-description">Adjust the sliders to customize your bike's geometry and see changes in real-time.</p>
<!-- NEW: Main layout wrapper -->
 <div id="main-layout">
<div id="bike-container">
 <svg id="bike-svg" viewBox="-425 -225 2000 1500" preserveAspectRatio="xMidYMid meet">
 <!-- Groups for organization -->
 <g id="bike-elements">
 <!-- Wheels -->
 <g id="rear-wheel-group">
 <circle id="rear-wheel" class="wheel" r="340" />
 <line class="spokes" /> <line class="spokes" /> <line class="spokes" /> <line class="spokes" />
 <circle id="rear-axle" class="axle" r="8" />
 </g>
 <g id="front-wheel-group">
 <circle id="front-wheel" class="wheel" r="340" />
 <line class="spokes" /> <line class="spokes" /> <line class="spokes" /> <line class="spokes" />
 <circle id="front-axle" class="axle" r="8" />
 </g>
<!-- Frame -->
 <g id="frame">
 <line id="seat-tube" class="frame-tube" />
 <line id="top-tube" class="frame-tube" />
 <line id="down-tube" class="frame-tube" />
 <line id="chainstay" class="frame-tube" />
 <line id="seatstay" class="frame-tube" />
 </g>
<!-- Components -->
 <g id="components">
 <line id="fork" class="component" />
 <line id="head-tube" class="component" stroke-width="9"/>
 <line id="headset-spacers" class="headset-spacer" /> <!-- Visual for stack -->
 <line id="stem" class="component" />
 <line id="handlebar" class="component" />
 <line id="seatpost" class="component" />
 <g id="saddle-group">
 <path id="saddle" class="saddle" d="M-35,0 Q0,-25 35,0 L 45,-15 L -45,-15 Z" />
 </g>
 <!-- Drivetrain -->
 <line id="crank-arm" class="drivetrain" />
 <circle id="pedal" class="pedal" r="6" />
 </g>
<!-- Joints (drawn last to be on top) -->
 <g id="joints">
 <circle id="bottom-bracket" class="joint" r="12" />
 <circle id="seat-cluster" class="joint" r="8" />
 <circle id="head-tube-top" class="joint" r="8" />
 <circle id="head-tube-bottom" class="joint" r="8" />
 <circle id="stem-clamp" class="joint" r="5" /> <!-- Where stem clamps bar -->
 </g>
 </g>
 </svg>
 </div>
<div id="controls">
 <!-- Geometry -->
 <div class="control-section">Frame Geometry</div>
<label for="wheelRadius">Wheel Radius:</label>
 <input type="range" id="wheelRadius" min="250" max="400" value="340" step="5">
 <span class="value-display" id="wheelRadiusValue">340mm</span>
<label for="seatTubeLength">Seat Tube (C-T):</label>
 <input type="range" id="seatTubeLength" min="350" max="650" value="520" step="10">
 <span class="value-display" id="seatTubeLengthValue">520mm</span>
<label for="effectiveTopTube">Eff. Top Tube:</label>
 <input type="range" id="effectiveTopTube" min="450" max="650" value="550" step="10">
 <span class="value-display" id="effectiveTopTubeValue">550mm</span>
<label for="chainstayLength">Chainstay:</label>
 <input type="range" id="chainstayLength" min="380" max="480" value="425" step="5">
 <span class="value-display" id="chainstayLengthValue">425mm</span>
<label for="headTubeAngle">Head Angle:</label>
 <input type="range" id="headTubeAngle" min="65" max="78" value="72" step="0.5">
 <span class="value-display" id="headTubeAngleValue">72.0°</span>
<label for="seatTubeAngle">Seat Angle:</label>
 <input type="range" id="seatTubeAngle" min="68" max="78" value="73.5" step="0.5">
 <span class="value-display" id="seatTubeAngleValue">73.5°</span>
<label for="bbDrop">BB Drop:</label>
 <input type="range" id="bbDrop" min="50" max="90" value="70" step="2">
 <span class="value-display" id="bbDropValue">70mm</span>
<label for="headTubeLength">Head Tube:</label>
 <input type="range" id="headTubeLength" min="80" max="220" value="140" step="5">
 <span class="value-display" id="headTubeLengthValue">140mm</span>
<!-- Fork/Front End -->
 <div class="control-section">Front End</div>
<label for="forkLength">Fork (Axle-Crown):</label>
 <input type="range" id="forkLength" min="350" max="500" value="400" step="5">
 <span class="value-display" id="forkLengthValue">400mm</span>
<label for="forkRake">Fork Rake:</label>
 <input type="range" id="forkRake" min="30" max="65" value="45" step="1">
 <span class="value-display" id="forkRakeValue">45mm</span>
<!-- Cockpit -->
 <div class="control-section">Cockpit</div>
<label for="stemStackHeight">Stem Stack:</label>
 <input type="range" id="stemStackHeight" min="0" max="50" value="10" step="2">
 <span class="value-display" id="stemStackHeightValue">10mm</span>
<label for="stemLength">Stem Length:</label>
 <input type="range" id="stemLength" min="50" max="140" value="90" step="5">
 <span class="value-display" id="stemLengthValue">90mm</span>
<label for="stemAngle">Stem Angle:</label>
 <input type="range" id="stemAngle" min="-20" max="30" value="6" step="1">
 <span class="value-display" id="stemAngleValue">6°</span>
<label for="handlebarWidth">Handlebar Width:</label>
 <input type="range" id="handlebarWidth" min="360" max="800" value="420" step="10">
 <span class="value-display" id="handlebarWidthValue">420mm</span>
<label for="handlebarRise">Handlebar Rise:</label>
 <input type="range" id="handlebarRise" min="-30" max="50" value="15" step="5">
 <span class="value-display" id="handlebarRiseValue">15mm</span>
<!-- Seat -->
 <div class="control-section">Saddle & Seatpost</div>
<label for="seatpostExposure">Seatpost Exposure:</label>
 <input type="range" id="seatpostExposure" min="50" max="300" value="150" step="10">
 <span class="value-display" id="seatpostExposureValue">150mm</span>
<label for="saddleSetback">Saddle Setback:</label>
 <input type="range" id="saddleSetback" min="-10" max="40" value="20" step="2">
 <span class="value-display" id="saddleSetbackValue">20mm</span>
<!-- Drivetrain -->
 <div class="control-section">Drivetrain</div>
<label for="crankLength">Crank Length:</label>
 <input type="range" id="crankLength" min="150" max="180" value="172.5" step="2.5">
 <span class="value-display" id="crankLengthValue">172.5mm</span>
 </div> <!-- End controls -->
</div> <!-- End main-layout -->
<!-- Footer removed as requested -->
<script>
 // --- JavaScript remains exactly the same as before ---
 const svg = document.getElementById('bike-svg');
 const bikeElements = document.getElementById('bike-elements');
 // --- DOM Element References ---
 const rearWheel = document.getElementById('rear-wheel');
 const frontWheel = document.getElementById('front-wheel');
 const rearAxleCircle = document.getElementById('rear-axle');
 const frontAxleCircle = document.getElementById('front-axle');
 const seatTubeLine = document.getElementById('seat-tube');
 const topTubeLine = document.getElementById('top-tube');
 const downTubeLine = document.getElementById('down-tube');
 const chainstayLine = document.getElementById('chainstay');
 const seatstayLine = document.getElementById('seatstay');
 const forkLine = document.getElementById('fork');
 const headTubeLine = document.getElementById('head-tube');
 const headsetSpacersLine = document.getElementById('headset-spacers');
 const stemLine = document.getElementById('stem');
 const handlebarLine = document.getElementById('handlebar');
 const seatpostLine = document.getElementById('seatpost');
 const saddleGroup = document.getElementById('saddle-group');
 const saddlePath = document.getElementById('saddle'); // Path itself for potential scaling if needed
 const crankArmLine = document.getElementById('crank-arm');
 const pedalCircle = document.getElementById('pedal');
 const bbCircle = document.getElementById('bottom-bracket');
 const seatClusterCircle = document.getElementById('seat-cluster');
 const headTubeTopCircle = document.getElementById('head-tube-top');
 const headTubeBottomCircle = document.getElementById('head-tube-bottom');
 const stemClampCircle = document.getElementById('stem-clamp');
 const rearWheelGroup = document.getElementById('rear-wheel-group');
 const frontWheelGroup = document.getElementById('front-wheel-group');
 const rearSpokes = rearWheelGroup.querySelectorAll('.spokes');
 const frontSpokes = frontWheelGroup.querySelectorAll('.spokes');
 // --- Input Controls ---
 const controls = {
 wheelRadius: document.getElementById('wheelRadius'),
 seatTubeLength: document.getElementById('seatTubeLength'),
 effectiveTopTube: document.getElementById('effectiveTopTube'),
 chainstayLength: document.getElementById('chainstayLength'),
 headTubeAngle: document.getElementById('headTubeAngle'),
 seatTubeAngle: document.getElementById('seatTubeAngle'),
 bbDrop: document.getElementById('bbDrop'),
 forkLength: document.getElementById('forkLength'),
 forkRake: document.getElementById('forkRake'),
 headTubeLength: document.getElementById('headTubeLength'),
 stemStackHeight: document.getElementById('stemStackHeight'),
 stemLength: document.getElementById('stemLength'),
 stemAngle: document.getElementById('stemAngle'),
 handlebarWidth: document.getElementById('handlebarWidth'),
 handlebarRise: document.getElementById('handlebarRise'),
 seatpostExposure: document.getElementById('seatpostExposure'),
 saddleSetback: document.getElementById('saddleSetback'),
 crankLength: document.getElementById('crankLength'),
 };
 // --- Value Displays ---
 const displays = { // Map IDs to display elements
 wheelRadius: document.getElementById('wheelRadiusValue'),
 seatTubeLength: document.getElementById('seatTubeLengthValue'),
 effectiveTopTube: document.getElementById('effectiveTopTubeValue'),
 chainstayLength: document.getElementById('chainstayLengthValue'),
 headTubeAngle: document.getElementById('headTubeAngleValue'),
 seatTubeAngle: document.getElementById('seatTubeAngleValue'),
 bbDrop: document.getElementById('bbDropValue'),
 forkLength: document.getElementById('forkLengthValue'),
 forkRake: document.getElementById('forkRakeValue'),
 headTubeLength: document.getElementById('headTubeLengthValue'),
 stemStackHeight: document.getElementById('stemStackHeightValue'),
 stemLength: document.getElementById('stemLengthValue'),
 stemAngle: document.getElementById('stemAngleValue'),
 handlebarWidth: document.getElementById('handlebarWidthValue'),
 handlebarRise: document.getElementById('handlebarRiseValue'),
 seatpostExposure: document.getElementById('seatpostExposureValue'),
 saddleSetback: document.getElementById('saddleSetbackValue'),
 crankLength: document.getElementById('crankLengthValue'),
 };
 // --- Constants ---
 const SVG_OFFSET_X = 100; // Minimal offset to properly center the bike
 const SVG_OFFSET_Y = 550; // Centered vertically in the viewbox
 const CRANK_ANGLE_DEG = 45; // Fixed angle for crank arm visualization
 // --- Calculation and Update Function ---
 function updateBike() {
 // 1. Read values
 const params = {};
 for (const key in controls) {
 params[key] = parseFloat(controls[key].value);
 // Update display
 let displayValue = params[key];
 let unit = 'mm';
 if (key.includes('Angle')) {
 unit = '°';
 displays[key].textContent = `${displayValue.toFixed(1)}${unit}`;
 } else if (key === 'crankLength') {
 displays[key].textContent = `${displayValue.toFixed(1)}${unit}`;
 }
 else {
 displays[key].textContent = `${displayValue}${unit}`;
 }
 }
 // 2. Convert angles to radians
 const headAngleRad = params.headTubeAngle * Math.PI / 180;
 const seatAngleRad = params.seatTubeAngle * Math.PI / 180;
 const stemAngleRad = params.stemAngle * Math.PI / 180; // Angle relative to horizontal
 const crankAngleRad = CRANK_ANGLE_DEG * Math.PI / 180;
 // 3. Calculate Key Point Coordinates (relative to rear axle)
 const rearAxle = { x: 0, y: 0 };
 const bb = { x: params.chainstayLength, y: params.bbDrop };
 const seatCluster = {
 x: bb.x - params.seatTubeLength * Math.cos(seatAngleRad),
 y: bb.y - params.seatTubeLength * Math.sin(seatAngleRad)
 };
 // Estimate Head Tube Top based on ETT and Seat Cluster
 const ettPointOnSeatpostLine = {
 x: seatCluster.x,
 y: seatCluster.y // Approx horizontal from seat cluster
 };
 const headTubeTopInitial = { // Point on steerer axis BEFORE stack
 x: ettPointOnSeatpostLine.x + params.effectiveTopTube,
 y: ettPointOnSeatpostLine.y
 };
 // Calculate Head Tube Bottom from Initial Top based on HT Length & Angle
 const headTubeBottom = {
 x: headTubeTopInitial.x + params.headTubeLength * Math.cos(headAngleRad),
 y: headTubeTopInitial.y + params.headTubeLength * Math.sin(headAngleRad)
 };
 // Front Axle: Use Fork Length (Axle-Crown) and Rake
 const steererPointAxleLevel = {
 x: headTubeBottom.x + params.forkLength * Math.cos(headAngleRad),
 y: headTubeBottom.y + params.forkLength * Math.sin(headAngleRad)
 };
 const rakeAngleRad = headAngleRad + Math.PI / 2; // 90 deg offset
 const rakeVector = {
 x: params.forkRake * Math.cos(rakeAngleRad),
 y: params.forkRake * Math.sin(rakeAngleRad)
 };
 const frontAxle = {
 x: steererPointAxleLevel.x + rakeVector.x,
 y: steererPointAxleLevel.y + rakeVector.y
 };
 // --- Cockpit Calculations ---
 const steererVec = {
 x: -Math.cos(headAngleRad), // Points up along steerer
 y: -Math.sin(headAngleRad)
 };
 const stemStartPoint = { // Base of stem on steerer
 x: headTubeTopInitial.x + params.stemStackHeight * steererVec.x,
 y: headTubeTopInitial.y + params.stemStackHeight * steererVec.y
 };
 const stemEnd = { // Handlebar Clamp Center
 x: stemStartPoint.x + params.stemLength * Math.cos(stemAngleRad),
 y: stemStartPoint.y - params.stemLength * Math.sin(stemAngleRad) // Positive angle = UP (smaller Y)
 };
 const halfBarWidth = params.handlebarWidth / 2;
 const handlebarCenter = {
 x: stemEnd.x,
 y: stemEnd.y - params.handlebarRise // Positive rise = UP (smaller Y)
 };
 const handlebarLeft = { x: handlebarCenter.x - halfBarWidth, y: handlebarCenter.y };
 const handlebarRight = { x: handlebarCenter.x + halfBarWidth, y: handlebarCenter.y };
 // --- Seat Calculations ---
 const seatpostTopNominal = { // Point along seat tube axis
 x: seatCluster.x - params.seatpostExposure * Math.cos(seatAngleRad),
 y: seatCluster.y - params.seatpostExposure * Math.sin(seatAngleRad)
 };
 const seatpostTop = { // Apply Saddle Setback
 x: seatpostTopNominal.x - params.saddleSetback, // positive = rearward = smaller X
 y: seatpostTopNominal.y
 };
 // --- Drivetrain Calculation ---
 const crankEnd = {
 x: bb.x + params.crankLength * Math.cos(crankAngleRad),
 y: bb.y + params.crankLength * Math.sin(crankAngleRad) // Y positive is down
 };
 // 4. Apply SVG Offsets
 const applyOffset = (point) => ({ x: point.x + SVG_OFFSET_X, y: point.y + SVG_OFFSET_Y });
 const svgRearAxle = applyOffset(rearAxle);
 const svgBB = applyOffset(bb);
 const svgSeatCluster = applyOffset(seatCluster);
 const svgHeadTubeTopInitial = applyOffset(headTubeTopInitial); // For HT line start
 const svgHeadTubeBottom = applyOffset(headTubeBottom);
 const svgFrontAxle = applyOffset(frontAxle);
 const svgStemStartPoint = applyOffset(stemStartPoint); // Where stem visually starts
 const svgStemEnd = applyOffset(stemEnd); // Where bar clamps
 const svgHandlebarLeft = applyOffset(handlebarLeft);
 const svgHandlebarRight = applyOffset(handlebarRight);
 const svgSeatpostTop = applyOffset(seatpostTop); // Saddle clamp position
 const svgCrankEnd = applyOffset(crankEnd);
 // 5. Update SVG Element Attributes
 // Update Wheels & Axles
 rearWheel.setAttribute('cx', svgRearAxle.x); rearWheel.setAttribute('cy', svgRearAxle.y);
 rearWheel.setAttribute('r', params.wheelRadius);
 rearAxleCircle.setAttribute('cx', svgRearAxle.x); rearAxleCircle.setAttribute('cy', svgRearAxle.y);
 frontWheel.setAttribute('cx', svgFrontAxle.x); frontWheel.setAttribute('cy', svgFrontAxle.y);
 frontWheel.setAttribute('r', params.wheelRadius);
 frontAxleCircle.setAttribute('cx', svgFrontAxle.x); frontAxleCircle.setAttribute('cy', svgFrontAxle.y);
 // Update Spokes
 const updateSpokes = (spokes, center, radius) => {
 spokes[0].setAttribute('x1', center.x - radius); spokes[0].setAttribute('y1', center.y);
 spokes[0].setAttribute('x2', center.x + radius); spokes[0].setAttribute('y2', center.y);
 spokes[1].setAttribute('x1', center.x); spokes[1].setAttribute('y1', center.y - radius);
 spokes[1].setAttribute('x2', center.x); spokes[1].setAttribute('y2', center.y + radius);
 spokes[2].setAttribute('x1', center.x - radius * 0.707); spokes[2].setAttribute('y1', center.y - radius * 0.707);
 spokes[2].setAttribute('x2', center.x + radius * 0.707); spokes[2].setAttribute('y2', center.y + radius * 0.707);
 spokes[3].setAttribute('x1', center.x - radius * 0.707); spokes[3].setAttribute('y1', center.y + radius * 0.707);
 spokes[3].setAttribute('x2', center.x + radius * 0.707); spokes[3].setAttribute('y2', center.y - radius * 0.707);
 };
 updateSpokes(rearSpokes, svgRearAxle, params.wheelRadius);
 updateSpokes(frontSpokes, svgFrontAxle, params.wheelRadius);
 // Update Frame Tubes
 seatTubeLine.setAttribute('x1', svgBB.x); seatTubeLine.setAttribute('y1', svgBB.y);
 seatTubeLine.setAttribute('x2', svgSeatCluster.x); seatTubeLine.setAttribute('y2', svgSeatCluster.y);
 topTubeLine.setAttribute('x1', svgSeatCluster.x); topTubeLine.setAttribute('y1', svgSeatCluster.y);
 topTubeLine.setAttribute('x2', svgHeadTubeTopInitial.x); topTubeLine.setAttribute('y2', svgHeadTubeTopInitial.y); // Connects to initial HT top
 downTubeLine.setAttribute('x1', svgBB.x); downTubeLine.setAttribute('y1', svgBB.y);
 downTubeLine.setAttribute('x2', svgHeadTubeBottom.x); downTubeLine.setAttribute('y2', svgHeadTubeBottom.y);
 chainstayLine.setAttribute('x1', svgBB.x); chainstayLine.setAttribute('y1', svgBB.y);
 chainstayLine.setAttribute('x2', svgRearAxle.x); chainstayLine.setAttribute('y2', svgRearAxle.y);
 seatstayLine.setAttribute('x1', svgSeatCluster.x); seatstayLine.setAttribute('y1', svgSeatCluster.y);
 seatstayLine.setAttribute('x2', svgRearAxle.x); seatstayLine.setAttribute('y2', svgRearAxle.y);
 // Update Components
 headTubeLine.setAttribute('x1', svgHeadTubeTopInitial.x); headTubeLine.setAttribute('y1', svgHeadTubeTopInitial.y);
 headTubeLine.setAttribute('x2', svgHeadTubeBottom.x); headTubeLine.setAttribute('y2', svgHeadTubeBottom.y);
 forkLine.setAttribute('x1', svgHeadTubeBottom.x); forkLine.setAttribute('y1', svgHeadTubeBottom.y);
 forkLine.setAttribute('x2', svgFrontAxle.x); forkLine.setAttribute('y2', svgFrontAxle.y);
 // Headset Spacers
 if (params.stemStackHeight > 0) {
 headsetSpacersLine.setAttribute('x1', svgHeadTubeTopInitial.x); headsetSpacersLine.setAttribute('y1', svgHeadTubeTopInitial.y);
 headsetSpacersLine.setAttribute('x2', svgStemStartPoint.x); headsetSpacersLine.setAttribute('y2', svgStemStartPoint.y);
 headsetSpacersLine.style.display = 'inline';
 } else {
 headsetSpacersLine.style.display = 'none';
 }
 stemLine.setAttribute('x1', svgStemStartPoint.x); stemLine.setAttribute('y1', svgStemStartPoint.y);
 stemLine.setAttribute('x2', svgStemEnd.x); stemLine.setAttribute('y2', svgStemEnd.y);
 handlebarLine.setAttribute('x1', svgHandlebarLeft.x); handlebarLine.setAttribute('y1', svgHandlebarLeft.y);
 handlebarLine.setAttribute('x2', svgHandlebarRight.x); handlebarLine.setAttribute('y2', svgHandlebarRight.y);
 seatpostLine.setAttribute('x1', svgSeatCluster.x); seatpostLine.setAttribute('y1', svgSeatCluster.y);
 seatpostLine.setAttribute('x2', svgSeatpostTop.x); // Use the setback-adjusted top point
 seatpostLine.setAttribute('y2', svgSeatpostTop.y); // for the visible post line end
 // Update Saddle Position (Group transform)
 const saddleAngleDeg = (seatAngleRad * 180 / Math.PI) - 90; // Approx align with seat tube
 saddleGroup.setAttribute('transform', `translate(${svgSeatpostTop.x}, ${svgSeatpostTop.y}) rotate(${saddleAngleDeg})`);
 // Update Drivetrain
 crankArmLine.setAttribute('x1', svgBB.x); crankArmLine.setAttribute('y1', svgBB.y);
 crankArmLine.setAttribute('x2', svgCrankEnd.x); crankArmLine.setAttribute('y2', svgCrankEnd.y);
 pedalCircle.setAttribute('cx', svgCrankEnd.x); pedalCircle.setAttribute('cy', svgCrankEnd.y);
 // Update Joint Markers
 bbCircle.setAttribute('cx', svgBB.x); bbCircle.setAttribute('cy', svgBB.y);
 seatClusterCircle.setAttribute('cx', svgSeatCluster.x); seatClusterCircle.setAttribute('cy', svgSeatCluster.y);
 headTubeTopCircle.setAttribute('cx', svgHeadTubeTopInitial.x); headTubeTopCircle.setAttribute('cy', svgHeadTubeTopInitial.y);
 headTubeBottomCircle.setAttribute('cx', svgHeadTubeBottom.x); headTubeBottomCircle.setAttribute('cy', svgHeadTubeBottom.y);
 stemClampCircle.setAttribute('cx', svgStemEnd.x); stemClampCircle.setAttribute('cy', svgStemEnd.y);
 }
 // --- Event Listeners ---
 for (const key in controls) {
 controls[key].addEventListener('input', updateBike);
 }
 // --- Initial Draw ---
 updateBike();
// Function to reset all slider controls to default values
 function resetToDefaults() {
 // Reset each slider to its default value
 for (const key in controls) {
 controls[key].value = controls[key].defaultValue;
 }
 // Update the visualization
 updateBike();
 }
 </script>
</body>
</html>