D4rkst3randClaude Opus 5
30c40c9f69
Statt zweier Zahlenfelder jetzt zwei Zeigerinstrumente links und rechts vom Luft-Ring - wie eine echte Tauchkonsole. Der Ring bleibt in der Mitte, weil die Restzeit die Zahl ist, auf die es ankommt. - Finimeter 0-300 bar, roter Bereich = Reserve unter reservePressure - Tiefenmesser 0-depthDialMax, roter Bereich = Tiefengrenze des Atemgases. Der faengt bei Pressluft bei 45 m an und bei Trimix erst bei 100 m - der Gefahrenbereich haengt also an der getragenen Flasche. Gibt es real nicht, hilft im Spiel aber sofort beim Einschaetzen - Skalenzahlen bewusst weggelassen: bei 96 px kollidieren sie mit allem und liest ohnehin niemand. Zeiger zeigt die Tendenz, die Zahl in der Uhr den Wert - Zeiger und Wert faerben sich rot, sobald der rote Bereich erreicht ist Beim Bauen gefunden: CSS transform-origin auf dem Zeiger wird zusaetzlich zum rotate(winkel 50 50) im Attribut angewendet, der Drehpunkt wandert dadurch doppelt und der Zeiger landet ausserhalb der Uhr. transform-origin ist raus. README-Renderings auf die Konsole umgebaut. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="hud" class="hidden">
|
|
<!-- Finimeter: Restdruck der Flasche, roter Bereich = Reserve -->
|
|
<div class="dial" id="pressure">
|
|
<div class="dial-face">
|
|
<svg viewBox="0 0 100 100" aria-hidden="true">
|
|
<circle class="face" cx="50" cy="50" r="46"></circle>
|
|
<path class="zone" id="pressure-zone"></path>
|
|
<g class="ticks" id="pressure-ticks"></g>
|
|
<g class="needle" id="pressure-needle">
|
|
<line x1="50" y1="58" x2="50" y2="17"></line>
|
|
<circle cx="50" cy="50" r="3.4"></circle>
|
|
</g>
|
|
</svg>
|
|
<div class="dial-value"><span id="pressure-value">0</span><span class="unit">bar</span></div>
|
|
</div>
|
|
<span id="pressure-label" class="caption">DRUCK</span>
|
|
</div>
|
|
|
|
<!-- Restluft als Ring, die Zahl auf die es ankommt -->
|
|
<div class="gauge">
|
|
<svg viewBox="0 0 120 120" aria-hidden="true">
|
|
<circle class="gauge-track" cx="60" cy="60" r="52"></circle>
|
|
<circle id="gauge-fill" class="gauge-fill" cx="60" cy="60" r="52"></circle>
|
|
</svg>
|
|
<div class="gauge-inner">
|
|
<span id="air-value">--:--</span>
|
|
<span id="air-label" class="caption">LUFT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tiefenmesser: roter Bereich = Tiefengrenze des Atemgases -->
|
|
<div class="dial" id="depth">
|
|
<div class="dial-face">
|
|
<svg viewBox="0 0 100 100" aria-hidden="true">
|
|
<circle class="face" cx="50" cy="50" r="46"></circle>
|
|
<path class="zone" id="depth-zone"></path>
|
|
<g class="ticks" id="depth-ticks"></g>
|
|
<g class="needle" id="depth-needle">
|
|
<line x1="50" y1="58" x2="50" y2="17"></line>
|
|
<circle cx="50" cy="50" r="3.4"></circle>
|
|
</g>
|
|
</svg>
|
|
<div class="dial-value"><span id="depth-value">0.0</span><span class="unit">m</span></div>
|
|
</div>
|
|
<span id="depth-label" class="caption">TIEFE</span>
|
|
</div>
|
|
|
|
<div id="lamp" class="lamp">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"></path>
|
|
</svg>
|
|
<span id="lamp-label">LAMPE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|