Upload files to "/"
This commit is contained in:
155
index.html
Normal file
155
index.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lauftest - Shuttle Run Timer</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Lauftest</h1>
|
||||
|
||||
<div class="settings-panel" id="settingsPanel">
|
||||
<h2>Einstellungen</h2>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="distance">Kegelabstand (m)</label>
|
||||
<input type="number" id="distance" value="20" min="1" step="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="startSpeed">Startgeschwindigkeit (km/h)</label>
|
||||
<input type="number" id="startSpeed" value="7" min="1" step="0.5">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="speedIncrement">Steigerung (km/h)</label>
|
||||
<input type="number" id="speedIncrement" value="1" min="0.5" step="0.5">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="intervalMinutes">Intervall (Minuten)</label>
|
||||
<input type="number" id="intervalMinutes" value="1" min="1" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<span class="info-label">Zeit pro Kegel (Start):</span>
|
||||
<span class="info-value" id="lapTimeInfo">10.29 s</span>
|
||||
</div>
|
||||
<button type="button" id="showForecastBtn" class="btn-forecast">Graph anzeigen</button>
|
||||
<div class="forecast-panel" id="forecastPanel">
|
||||
<div class="forecast-header">
|
||||
<h3>Prognose</h3>
|
||||
<button type="button" id="closeForecastBtn" class="btn-close">×</button>
|
||||
</div>
|
||||
<canvas id="forecastGraph" width="500" height="300"></canvas>
|
||||
<div class="forecast-legend">
|
||||
<span><span class="legend-dot speed"></span> Geschwindigkeit (km/h)</span>
|
||||
<span><span class="legend-dot time"></span> Zeit pro Kegel (s)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-controls">
|
||||
<div class="sound-select">
|
||||
<label for="beepSound">Signalton</label>
|
||||
<select id="beepSound">
|
||||
<option value="sharp">Scharf (empfohlen)</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="low">Tief</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="volume-control">
|
||||
<label for="volume">Lautstärke</label>
|
||||
<input type="range" id="volume" min="0" max="100" value="50">
|
||||
<span id="volumeValue">50%</span>
|
||||
</div>
|
||||
<div class="toggle-control">
|
||||
<label for="guidance">Guidance</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="guidance">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-hint">Countdown vor Piepton</span>
|
||||
</div>
|
||||
<div class="toggle-control">
|
||||
<label for="doubleBeep">Double Beep</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="doubleBeep">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-hint">Bei Steigerung</span>
|
||||
</div>
|
||||
<div class="toggle-control">
|
||||
<label for="showLog">Protokoll</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="showLog">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-hint">Detailliertes Log anzeigen</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="startStopBtn" class="btn-start">Start</button>
|
||||
</div>
|
||||
|
||||
<div class="display-panel" id="displayPanel">
|
||||
<div class="stat-card primary">
|
||||
<span class="stat-label">Gesamtlaufzeit</span>
|
||||
<span class="stat-value" id="totalTime">00:00</span>
|
||||
</div>
|
||||
<div class="stat-card visual-card">
|
||||
<svg id="trackVisual" viewBox="0 0 300 80" class="track-visual">
|
||||
<!-- Left cone -->
|
||||
<polygon id="coneLeft" points="30,65 40,30 50,65" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
|
||||
<ellipse cx="40" cy="65" rx="12" ry="4" fill="#d97706"/>
|
||||
|
||||
<!-- Right cone -->
|
||||
<polygon id="coneRight" points="250,65 260,30 270,65" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
|
||||
<ellipse cx="260" cy="65" rx="12" ry="4" fill="#d97706"/>
|
||||
|
||||
<!-- Track line -->
|
||||
<line x1="55" y1="55" x2="245" y2="55" stroke="rgba(255,255,255,0.2)" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<!-- Progress line -->
|
||||
<line id="progressLine" x1="55" y1="55" x2="55" y2="55" stroke="#22c55e" stroke-width="4" stroke-linecap="round"/>
|
||||
|
||||
<!-- Runner dot -->
|
||||
<circle id="runnerDot" cx="55" cy="55" r="8" fill="#3b82f6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Aktuelle Geschwindigkeit</span>
|
||||
<span class="stat-value" id="currentSpeed">7.0 <small>km/h</small></span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Nächste Steigerung in</span>
|
||||
<span class="stat-value" id="nextIncrease">03:00</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Nächster Piepton in</span>
|
||||
<span class="stat-value" id="nextBeep">--</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Zeit pro Kegel</span>
|
||||
<span class="stat-value" id="lapTime">-- <small>s</small></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log-panel" id="logPanel">
|
||||
<div class="log-title-row">
|
||||
<h3>Protokoll</h3>
|
||||
<button id="downloadCsvBtn" class="btn-download" style="display: none;">CSV Download</button>
|
||||
</div>
|
||||
<div class="log-header">
|
||||
<span>Zeit</span>
|
||||
<span>Ereignis</span>
|
||||
<span>Geschw.</span>
|
||||
<span>Kegel-Zeit</span>
|
||||
<span>Distanz</span>
|
||||
</div>
|
||||
<div class="log-entries" id="logEntries">
|
||||
<!-- Log entries will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user