Files
martinfencl.eu/klabava/index.html
T
2026-10-31 18:05:56 +01:00

126 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex,nofollow">
<meta name="theme-color" content="#e7ebe3">
<title>Klabava | Rodinný dům</title>
<link rel="stylesheet" href="./css/app.css?v=20261031b">
<link rel="stylesheet" href="./css/web.css?v=20261031b">
<link rel="stylesheet" href="./css/klabava.css?v=20261031b">
<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"}}
</script>
</head>
<body>
<canvas id="view" aria-label="Interaktivní trojrozměrný model rodinného domu v Klabavě"></canvas>
<svg id="measure" aria-hidden="true"></svg>
<header>
<div class="eyebrow"><span class="dot"></span>RODINNÝ DŮM · KLABAVA</div>
<h1>Klabava</h1>
<div class="sub">Rodinný dům · 3D studie a simulace slunce</div>
<div class="metrics">
<div class="metric"><strong>178,75 m²</strong><small>Zastavěná plocha</small></div>
<div class="metric"><strong>153,74 m²</strong><small>Užitná plocha</small></div>
<div class="metric"><strong>5,28 / 5,83 m</strong><small>Hřebeny střechy</small></div>
</div>
</header>
<div class="topright">
<button class="btn" id="infoButton" type="button" aria-expanded="false" title="Projekt a podklady">Projekt</button>
<button class="btn" id="sunToggle" type="button" aria-controls="sunPanel" aria-expanded="false" title="Ovládání slunce"><span class="solar-mark">☼</span><span class="toggle-word">Slunce</span></button>
<button class="btn primary" id="saveGlb" type="button">Stáhnout <span class="downloadText">model</span> GLB</button>
</div>
<aside class="panel" id="panel" aria-label="Informace o projektu">
<div class="panel-head">
<div><div class="panel-kicker">RODINNÝ DŮM · KLABAVA</div><h2>Dům a pozemek</h2></div>
<button class="panel-close" id="infoClose" type="button" aria-label="Zavřít panel">×</button>
</div>
<p>Pracovní 3D vizualizace podle dodaného půdorysu, pohledů, řezu, koordinační situace a výškopisu.</p>
<h3>Základní údaje</h3>
<div class="row"><span>Parcela</span><strong>66/17 · 1 037 m²</strong></div>
<div class="row"><span>Zastavěná plocha domu</span><strong>178,75 m²</strong></div>
<div class="row"><span>Včetně krytého vstupu a terasy</span><strong>206,54 m²</strong></div>
<div class="row"><span>Užitná plocha</span><strong>153,74 m²</strong></div>
<div class="row"><span>Rozměry obálky v půdorysu</span><strong>17,40 × 13,05 m</strong></div>
<div class="row"><span>Hřebeny / komín</span><strong>+5,275 a +5,832 / +6,500 m</strong></div>
<h3>Vzhled a vybavení</h3>
<p>Barvy fasády, krytiny, oken a další standardy zůstávají otevřené. Model používá neutrální dočasné materiály, aby bylo možné ověřit hmotu domu, umístění a stíny.</p>
<h3>Podklady</h3>
<div class="web-actions document-links">
<a class="btn" href="./references/KLABAVA_66_17.pdf" target="_blank" rel="noopener">Výškopis</a>
<a class="btn" href="./references/Situace.pdf" target="_blank" rel="noopener">Situace</a>
<a class="btn" href="./references/Pudorys%20prizemi%20(1).pdf" target="_blank" rel="noopener">Půdorys</a>
<a class="btn" href="./references/Pohled%20JV%20a%20JZ.pdf" target="_blank" rel="noopener">Pohledy JV/JZ</a>
<a class="btn" href="./references/Pohled%20SZ%20a%20SV.pdf" target="_blank" rel="noopener">Pohledy SZ/SV</a>
<a class="btn" href="./references/Rez.pdf" target="_blank" rel="noopener">Řez</a>
</div>
<details class="site-note" open>
<summary>Rozsah modelu a přesnost</summary>
<p>Půdorysná hmota, hlavní otvory a výšky vycházejí z dodaných výkresů. Střecha je schematicky složená z valbových ploch. Terén navazuje na zaměřené body přibližně od 349,5 m n. m. u komunikace k 347,2 m n. m. v zadní části parcely; mezi body je interpolovaný.</p>
<p>Hranice parcely je převzatá graficky z PDF situace, ne ze souřadnic pro vytyčení. Příjezd, parkovací plocha, okna a materiály jsou zjednodušené pro prostorovou orientaci. Model slouží k prezentaci a studii oslunění, nikoli jako BIM, geodetický nebo stavební podklad.</p>
</details>
<div class="status"><span class="dot"></span>Pracovní vizualizace · standardy doplníme po jejich výběru</div>
</aside>
<div id="direction"><span class="tag">AKTUÁLNÍ POHLED</span><span id="directionText">Dům / příjezd</span></div>
<div class="bottom">
<nav class="toolbar" aria-label="Ovládání modelu">
<button class="tool active" data-preset="entry" type="button">Příjezd</button>
<button class="tool" data-preset="garden" type="button">Zahrada</button>
<button class="tool" data-preset="top" type="button">Shora</button>
<span class="divider"></span>
<label class="site-switch"><input type="checkbox" id="siteTerrain" checked><span>Terén</span></label>
<label class="site-switch"><input type="checkbox" id="siteBoundary" checked><span>Parcela</span></label>
<label class="site-switch"><input type="checkbox" id="siteParking" checked><span>Parkování</span></label>
<span class="divider"></span>
<button class="tool" id="savePng" type="button">Uložit PNG</button>
<button class="tool" id="resetView" type="button">Reset</button>
</nav>
<div class="help">Tažením otáčej · kolečkem přibliž · pravým tlačítkem posuň</div>
</div>
<div class="compass" aria-label="Severka">
<svg viewBox="0 0 84 84">
<circle cx="42" cy="42" r="27" fill="none" stroke="#bec8b7" />
<g id="compassGroup"><line x1="42" y1="13" x2="42" y2="71"/><line x1="13" y1="42" x2="71" y2="42"/>
<path id="northArrow" d="M42 18 L37 32 L42 29 L47 32 Z"/><text x="42" y="8" text-anchor="middle">S</text><text x="42" y="81" text-anchor="middle">J</text><text x="3" y="45" text-anchor="middle">Z</text><text x="80" y="45" text-anchor="middle">V</text>
</g>
</svg>
</div>
<svg id="sunOverlay" aria-hidden="true"></svg>
<div id="sunStamp"><span>SLUNCE NAD DOMEM</span><br><strong id="sceneTime">21. 6. 2026 · 10:00</strong></div>
<section id="sunPanel" aria-label="Simulace slunce">
<div class="sun-panel-head"><div><div class="sun-kicker">STUDIE OSVĚTLENÍ</div><h2>Slunce a stíny</h2></div><button class="close-panel" id="sunClose" type="button" aria-label="Skrýt panel slunce">×</button></div>
<div class="sun-date-row"><label class="sun-field">Datum<input id="sunDate" type="date" min="2000-01-01" max="2100-12-31" value="2026-06-21"></label><label class="sun-field">Místní čas<input id="sunClock" type="text" inputmode="numeric" value="10:00" maxlength="5" placeholder="HH:MM" aria-label="Místní čas ve formátu HH:MM"></label></div>
<div class="sun-seasons" aria-label="Typické dny roku"><button type="button" data-season="03-20">Jaro</button><button type="button" data-season="06-21" class="active">Léto</button><button type="button" data-season="09-23">Podzim</button><button type="button" data-season="12-21">Zima</button></div>
<div class="sun-status-line"><span id="dayState">Slunce nad obzorem</span><span id="zoneLabel">SELČ · UTC+2</span></div>
<svg id="sunGraph" class="sun-graph" viewBox="0 0 304 86" role="img" aria-label="Výška slunce během dne. Kliknutím změníš čas."></svg>
<label class="sr-only" for="sunTime">Posun času</label><input class="sun-scrub" id="sunTime" type="range" min="0" max="1439" value="600" step="1" aria-valuetext="10:00">
<div class="sun-ticks"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div>
<div class="sun-play-row"><button id="sunPlay" type="button">▶ Přehrát den</button><select id="sunSpeed" aria-label="Rychlost simulace"><option value="15">15 min / s</option><option value="30" selected>30 min / s</option><option value="60">60 min / s</option></select><button id="sunNow" type="button" title="Aktuální datum a čas v Praze">Teď</button></div>
<div id="solarMessage" role="status"></div>
<div class="sun-readouts"><div class="sun-stat">Výška nad obzorem<strong id="sunElevation">—</strong><small>Střed slunečního kotouče</small></div><div class="sun-stat">Azimut slunce<strong id="sunAzimuth">—</strong><small id="sunDirection">Od severu po směru hodin</small></div></div>
<div class="sun-events"><span>Východ <b id="sunRise">—</b></span><span>Poledne <b id="sunNoon">—</b></span><span>Západ <b id="sunSet">—</b></span></div>
<div class="sun-options"><label><input type="checkbox" id="sunShadows" checked>Vržené stíny</label><label><input type="checkbox" id="sunPath">Dráha ve 3D</label></div>
<p class="sun-hint">Posouvej čas a sleduj, kam dopadá slunce na fasády a zahradu. Sever modelu vychází ze severky v situaci.</p>
<button class="sun-export" id="sunSavePng" type="button">Uložit obrázek s datem a časem</button>
<details class="sun-advanced"><summary>Poloha a orientace domu</summary>
<div class="fields"><label class="sun-field">Zeměpisná šířka (° N)<input id="sunLat" type="number" min="-89" max="89" step="0.0001" value="49.7536"></label><label class="sun-field">Zeměpisná délka (° E)<input id="sunLon" type="number" min="-180" max="180" step="0.0001" value="13.5394"></label><label class="sun-field full-row">Natočení pozemku vůči severu (°)<input id="siteBearing" type="number" min="0" max="359.9" step="0.1" value="0"></label></div>
<p>Výchozí poloha odpovídá přibližnému středu obce Klabava. Natočení je odečtené orientačně ze severky v situačním výkresu. Přesné souřadnice parcely a azimut stavby nebyly ve vstupních podkladech uvedeny.</p>
<p>Časové pásmo zůstává <b>Europe/Prague</b>. Letní čas se přepočítává podle zvoleného data a pravidel prohlížeče.</p>
<button class="mini-btn" id="sunResetSite" type="button">Obnovit polohu Klabavy</button>
</details>
<details class="sun-advanced"><summary>Metoda výpočtu a přesnost</summary><p>Sluneční poloha se počítá z data, času a zeměpisných souřadnic podle astronomických rovnic Meeus / NOAA. Model zobrazuje přímé sluneční světlo a geometrické stíny. Nezahrnuje oblačnost, odrazy okolních budov, profil horizontu ani skutečné vlastnosti zasklení.</p></details>
</section>
<div id="loading" role="status"><span class="loader-dot"></span><span>Načítám 3D model…</span></div>
<div id="toast" role="status" aria-live="polite"></div>
<div id="webStatus">Pracovní model · Klabava 66/17</div>
<script type="module" src="./js/klabava.js?v=20261031b"></script>
</body>
</html>