199 lines
8.0 KiB
HTML
199 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Extrakce místností z DWG | Colsys AI</title>
|
|
<base href="/apps/dwg/">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap">
|
|
<link rel="stylesheet" href="static/styles.css">
|
|
<script>
|
|
// Theme bootstrap — read source-of-truth in this order:
|
|
// ?theme= URL → portal_theme cookie → app_theme localStorage → OS
|
|
// The cookie is set by the portal landing on every resolvedTheme change,
|
|
// so it always reflects the portal's current state.
|
|
(function () {
|
|
var t = null;
|
|
try {
|
|
var p = new URL(window.location.href).searchParams.get("theme");
|
|
if (p === "dark" || p === "light") t = p;
|
|
} catch (e) {}
|
|
if (!t) {
|
|
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
|
if (m) t = decodeURIComponent(m[1]);
|
|
}
|
|
if (!t) { try { t = localStorage.getItem("app_theme"); } catch (e) {} }
|
|
if (!t && typeof matchMedia !== "undefined") {
|
|
try {
|
|
t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
} catch (e) {}
|
|
}
|
|
if (t === "dark" || t === "light") {
|
|
document.documentElement.classList.add(t);
|
|
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
|
}
|
|
})();
|
|
// bfcache rehydration — re-sync the class when the page is restored
|
|
// (e.g. user toggled theme on the portal, then hit Back).
|
|
// Same as pageshow, but fires when the user switches tabs.
|
|
// Covers: portal tab toggles theme → user comes back to app tab.
|
|
document.addEventListener("visibilitychange", function () {
|
|
if (document.visibilityState !== "visible") return;
|
|
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
|
if (!m) return;
|
|
var t = decodeURIComponent(m[1]);
|
|
if (t !== "dark" && t !== "light") return;
|
|
var cls = document.documentElement.classList;
|
|
if (cls.contains(t)) return;
|
|
cls.remove(t === "dark" ? "light" : "dark");
|
|
cls.add(t);
|
|
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
|
});
|
|
window.addEventListener("pageshow", function () {
|
|
var m = document.cookie.match(/(?:^|;\s*)portal_theme=([^;]+)/);
|
|
if (!m) return;
|
|
var t = decodeURIComponent(m[1]);
|
|
if (t !== "dark" && t !== "light") return;
|
|
var cls = document.documentElement.classList;
|
|
if (cls.contains(t)) return;
|
|
cls.remove(t === "dark" ? "light" : "dark");
|
|
cls.add(t);
|
|
try { localStorage.setItem("app_theme", t); } catch (e) {}
|
|
});
|
|
</script>
|
|
<style>
|
|
.back-link {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 12px 6px 10px; border-radius: 8px;
|
|
font-size: 13px; font-weight: 500; color: var(--text-tertiary);
|
|
text-decoration: none; border: 0.5px solid var(--border-default);
|
|
background: var(--bg-primary); flex-shrink: 0;
|
|
transition: color .15s, border-color .15s, background .15s;
|
|
}
|
|
.back-link:hover {
|
|
color: var(--primary); border-color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary));
|
|
}
|
|
.back-link svg { opacity: 0.8; }
|
|
@media (max-width: 640px) {
|
|
.back-link span { display: none; }
|
|
.back-link { padding: 6px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<a href="/" class="brand">
|
|
<span class="brand-icon">C</span>
|
|
<span class="brand-name">Colsys <span class="brand-ai">AI</span></span>
|
|
</a>
|
|
<span class="header-crumb">Extrakce místností z DWG / DXF</span>
|
|
<a href="/" class="back-link" title="Zpět na portál">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m15 18-6-6 6-6"/>
|
|
</svg>
|
|
<span>Zpět na portál</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
|
|
<!-- ── Upload ────────────────────────────── -->
|
|
<section id="s-upload">
|
|
<div class="section-intro">
|
|
<h1 class="section-title">Extrakce místností z výkresu</h1>
|
|
<p class="section-desc">
|
|
Nahrajte výkres ve formátu <strong>DWG</strong> nebo <strong>DXF</strong>.
|
|
Aplikace automaticky rozpozná čísla a názvy místností a připraví
|
|
editovatelnou tabulku pro export do Excelu.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Examples editor -->
|
|
<div class="examples-panel">
|
|
<div class="examples-header">
|
|
<span class="examples-title">Vzorová čísla místností</span>
|
|
<span class="examples-subtitle">Zadejte konkrétní příklad čísla z výkresu — cifry se nahradí libovolnými, ostatní znaky zůstanou doslovně.</span>
|
|
</div>
|
|
|
|
<div id="examples-list" class="examples-list"></div>
|
|
|
|
<form id="examples-form" class="examples-input-row">
|
|
<input type="text" id="example-input" class="example-input"
|
|
placeholder="např. 4-22408 nebo č.m. 0301" autocomplete="off" inputmode="text">
|
|
<button type="submit" class="btn btn-secondary example-add-btn">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
|
</svg>
|
|
Přidat
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="drop-zone" class="drop-zone">
|
|
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 16.5V4.5m0 0-3.75 3.75M12 4.5l3.75 3.75M4.5 19.5h15"/>
|
|
</svg>
|
|
<p class="drop-text">Přetáhněte soubor DWG nebo DXF sem</p>
|
|
<p class="drop-or">nebo</p>
|
|
<button class="btn btn-secondary" id="browse-btn" type="button">Vybrat soubor</button>
|
|
<p class="drop-formats">Podporované formáty: .dwg · .dxf</p>
|
|
<input type="file" id="file-input" accept=".dwg,.dxf" style="display:none">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Processing ────────────────────────── -->
|
|
<section id="s-processing" class="hidden">
|
|
<div class="processing-card">
|
|
<div class="spinner"></div>
|
|
<h2 class="processing-title">Zpracovávám výkres…</h2>
|
|
<div id="steps-list" class="steps-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Results ───────────────────────────── -->
|
|
<section id="s-results" class="hidden">
|
|
<div class="results-header">
|
|
<div>
|
|
<h2 class="results-title">Nalezené místnosti</h2>
|
|
<p class="results-meta" id="results-meta"></p>
|
|
</div>
|
|
<div class="results-actions">
|
|
<button class="btn btn-secondary" id="reset-btn" type="button">Nahrát jiný soubor</button>
|
|
<button class="btn btn-primary" id="export-btn" type="button">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v12m0 0-3.75-3.75M12 16.5l3.75-3.75M4.5 19.5h15"/>
|
|
</svg>
|
|
Exportovat Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:130px">Č. místnosti</th>
|
|
<th>Popis / účel</th>
|
|
<th style="width:110px">Zdroj</th>
|
|
<th style="width:100px">Spolehlivost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rooms-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
<p class="table-hint">Kliknutím na buňku ji upravíte — změny se projeví v exportu.</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html>
|