martinfencl.eu/klabava/index.html

<!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=20261102-interior">
  <link rel="stylesheet" href="./css/web.css?v=20261102-interior">
  <link rel="stylesheet" href="./css/klabava.css?v=20261102-interior">
  <script type="importmap">
    {"imports":{"three":"./vendor/three/build/three.module.js","three/addons/":"./vendor/three/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. Interiér nabízí dispozici a orientační vybavení podle půdorysu, pohled bez střechy i procházení.</p>
    <details class="site-note" open>
      <summary>Rozsah modelu a přesnost</summary>
      <p>Půdorysná hmota, poloha a rozměry otvorů a výšky střech vycházejí z kót půdorysu, pohledů a řezu. Střechu tvoří dvě valbové střechy se sklonem 23° a přesahem 0,6 m; vyšší kryje i terasu a krytý vstup, nižší křídlo s ložnicemi. Terén je rovina proložená zaměřenými body výškopisu, přibližně 349,2 m n. m. u komunikace a 347,1 m n. m. u zadní hranice.</p>
      <p>Hranice parcely je převzatá graficky z PDF situace a výškopisu, ne ze souřadnic pro vytyčení. Rámy oken a dveří, nosná konstrukce terasy a vstupu, auta 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 je zeměpisný sever přepočtený ze souřadnic S-JTSK.</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.7520"></label><label class="sun-field">Zeměpisná délka (° E)<input id="sunLon" type="number" min="-180" max="180" step="0.0001" value="13.5440"></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="1.5"></label></div>
      <p>Výchozí poloha je střed parcely 66/17 podle souřadnicové sítě S-JTSK ve výškopisu. Severka v situaci ukazuje sever sítě S-JTSK, který je tady o 8,5° západněji než zeměpisný sever. Uliční strana domu proto míří 1,5° východně od zeměpisného severu; kladné natočení otáčí pozemek po směru hodinových ručiček.</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>

  <button id="interiorLaunch" type="button" aria-controls="interiorPanel" aria-expanded="false">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 11 12 4 21 11M5 10v10h14V10M10 20v-7h5v7"/></svg>
    <span>Prohlédnout interiér<small>Půdorys · 3D bez střechy · procházení</small></span>
  </button>
  <div class="interior-heading"><button class="btn" id="interiorExit" type="button">← Exteriér</button><div><div class="eyebrow">KLABAVA / INTERIÉR PŘÍZEMÍ</div><h2 id="interiorViewTitle">Dům bez střechy</h2></div></div>
  <section id="interiorPanel" aria-label="Pohledy a nastavení interiéru">
    <div class="interior-panel-title"><h3>Uvnitř domu</h3><span>11 místností · 153,74 m²</span></div>
    <svg id="interiorMap" viewBox="0 0 348 270" role="group" aria-label="Mapa místností; výběrem vstoupíte dovnitř"></svg>
    <p class="int-map-hint">Vyberte místnost v mapě nebo připravený pohled.</p>
    <div class="int-kicker">Připravené pohledy</div>
    <div class="int-views"><button type="button" data-interior-view="kitchen">Kuchyň</button><button type="button" data-interior-view="living">Obývací pokoj</button><button type="button" data-interior-view="entry">Od vstupu</button><button type="button" data-interior-view="master">Ložnice</button></div>
    <div class="int-kicker">Přejít do místnosti</div>
    <select id="interiorRoom" aria-label="Přejít do vybrané místnosti"><option value="">Vyberte místnost…</option></select>
    <div class="int-options">
      <label><input type="checkbox" id="interiorFurniture" checked>Vybavení podle půdorysu</label>
      <label><input type="checkbox" id="interiorRoomLabels" checked>Názvy a plochy místností</label>
      <label><input type="checkbox" id="interiorFill" checked>Přisvětlení interiéru</label>
      <label class="wall-paint">Barva vnitřních příček <input id="interiorWallColor" type="color" value="#eeeae1" aria-label="Barva vnitřních příček"></label>
    </div>
    <p>V půdorysu a 3D pohledu je střecha skrytá a stěny zkrácené na 1,12 m. Při procházení mají stěny i rovný podhled výšku 2,60 m.</p>
    <details class="int-source"><summary>Podklady a přesnost</summary>
      <p>Dispozice, plochy, poloha příček a průchody vycházejí z dodaného půdorysu přízemí. Světlá výška 2,60 m je převzatá z řezu. Názvy místností jsou odvozené ze zakresleného vybavení.</p>
      <p>Místnost 7,05 m² nemá ve výkresu uvedený účel a zůstává prázdná. Vstupuje se do ní přes šatnu. Ložnice 22,35 m² zahrnuje vlastní šatnovou část.</p>
      <p>Nábytek, sanita, spotřebiče a materiály jsou orientační. Uspořádání kuchyně do U, lůžka, skříně a technické vybavení odpovídají schématu v půdorysu. Vnitřní dveře jsou zobrazené jako volné průchody se zárubněmi; výška otvoru 2,10 m je předpoklad.</p>
      <p>Přisvětlení pomáhá čitelnosti interiéru. Pohled bez střechy ani přisvětlený interiér neslouží k posouzení skutečného denního osvětlení.</p>
      <div class="int-source-buttons"><a href="./references/Pudorys%20prizemi%20(1).pdf" target="_blank" rel="noopener">Původní půdorys ↗</a><a href="./references/Rez.pdf" target="_blank" rel="noopener">Řez ↗</a></div>
    </details>
    <button class="int-export" id="interiorSavePng" type="button">Uložit aktuální pohled PNG</button>
    <button class="int-export" id="interiorSaveGlb" type="button">Stáhnout zobrazený model GLB</button>
  </section>
  <div id="interiorLabels" aria-label="Místnosti v půdorysu"></div>
  <div id="interiorTools"><div id="interiorHint">Tažením otáčejte · kolečkem přibližujte · výběrem místnosti vstupte dovnitř</div><nav class="int-mode-bar" aria-label="Režim interiéru"><button type="button" data-interior-mode="plan">Půdorys</button><button type="button" data-interior-mode="axon" class="active">3D bez střechy</button><button type="button" data-interior-mode="walk">Procházet</button><button id="interiorFit" type="button" class="int-nav-button" title="Zarámovat dům nebo obnovit pohled">⌖</button><button id="interiorPanelToggle" type="button" class="int-nav-button" title="Skrýt nebo zobrazit panel" aria-expanded="true" aria-controls="interiorPanel">☷</button></nav></div>
  <div id="walkPad" aria-label="Ovládání chůze"><button type="button" data-walk="forward" aria-label="Jít vpřed">↑</button><button type="button" data-walk="left" aria-label="Krok vlevo">←</button><button type="button" data-walk="back" aria-label="Jít vzad">↓</button><button type="button" data-walk="right" aria-label="Krok vpravo">→</button></div>

  <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=20261102-interior"></script>
</body>
</html>