admGitAICDSandClaude Opus 5
b3fcd762e7
Deploy App / deploy (push) Successful in 28s
- Ein Klick faengt die Maus ein, danach dreht die blosse Mausbewegung den Blick. Maus nach rechts oben heisst Blick nach rechts oben. Esc gibt die Maus wieder frei, das Fadenkreuz zeigt den Zustand an. - Ohne Mausfang (direkt nach Esc oder wo er gesperrt ist, etwa in eingebetteten Vorschauen) dreht Ziehen den Blick in derselben Richtung - vorher zog man die Szene, was sich verkehrt anfuehlte. - Am Handy wischt man jetzt ebenfalls in die Blickrichtung statt dagegen. - Mit gefangener Maus fuehrt ein Klick zu dem Punkt unter dem Fadenkreuz, ohne Mausfang weiterhin zum angeklickten Punkt. - Beim Wechsel in die Uebersicht wird der Mausfang freigegeben. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="de-CH">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
|
|
<meta name="theme-color" content="#2c3a2a" />
|
|
<meta name="description" content="Begehbare 3D-Visualisierung des geplanten Gartens an der Egglihaldenstrasse 9a in Abtwil, massstäblich aus dem Gartenplan der Garten Design AG." />
|
|
<title>Garten Egglihaldenstrasse 9a · 3D-Visualisierung</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8C%B3%3C/text%3E%3C/svg%3E" />
|
|
</head>
|
|
<body>
|
|
<canvas id="view"></canvas>
|
|
|
|
<div id="loader">
|
|
<div class="loader-inner">
|
|
<div class="loader-title">Garten Egglihaldenstrasse 9a</div>
|
|
<div class="loader-bar"><span id="loader-fill"></span></div>
|
|
<div class="loader-note" id="loader-note">Gartenplan wird aufgebaut …</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hud" hidden>
|
|
<header id="topbar">
|
|
<div class="brand">
|
|
<strong>Garten Egglihaldenstrasse 9a</strong>
|
|
<span>Abtwil SG · Gartenplan 1, Garten Design AG</span>
|
|
</div>
|
|
<div id="ansicht" role="radiogroup" aria-label="Darstellung">
|
|
<button type="button" role="radio" data-ansicht="stil" title="Leichte, stilisierte Darstellung">Stilisiert</button>
|
|
<button type="button" role="radio" data-ansicht="foto" title="Hoch aufgelöste Materialien, echtes Laub und Gras, Himmelslicht">Fotorealistisch</button>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button id="btn-mode" type="button" title="Zwischen Rundgang und Übersicht wechseln">Übersicht</button>
|
|
<button id="btn-info" type="button" title="Informationen zum Plan">Info</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav id="views" aria-label="Standorte"></nav>
|
|
|
|
<div id="timebar">
|
|
<label for="time">Tageszeit <output id="time-out">14:00</output></label>
|
|
<input id="time" type="range" min="4" max="23" step="0.25" value="14" />
|
|
<label for="season">Datum <output id="season-out">21. Juni</output></label>
|
|
<input id="season" type="range" min="1" max="365" step="1" value="172" />
|
|
</div>
|
|
|
|
<div id="crosshair"></div>
|
|
|
|
<div id="hint">
|
|
<span class="desktop">Klicken: Maus übernimmt den Blick · <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> gehen · <kbd>Leertaste</kbd> springen · <kbd>Esc</kbd> Maus freigeben</span>
|
|
<span class="touch">Auf den Boden tippen: dorthin gehen · rechts wischen: umsehen</span>
|
|
</div>
|
|
|
|
<div id="joystick" hidden><div id="joystick-knob"></div></div>
|
|
|
|
<aside id="info" hidden>
|
|
<button id="info-close" type="button" aria-label="Schliessen">×</button>
|
|
<h2>Über diese Visualisierung</h2>
|
|
<div id="info-body"></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<noscript>
|
|
<p style="padding:2rem;font:16px system-ui">Für die 3D-Visualisierung wird JavaScript benötigt.</p>
|
|
</noscript>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|