198 lines
8.7 KiB
HTML
198 lines
8.7 KiB
HTML
<!doctype html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Laitica | Makieta konfiguratora zestawów szynowych</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-shape bg-shape-a"></div>
|
|
<div class="bg-shape bg-shape-b"></div>
|
|
|
|
<main class="shell">
|
|
<header class="hero">
|
|
<div class="brand">LAITICA</div>
|
|
<h1>Konfigurator zestawów szynowych</h1>
|
|
<p>Makieta UX/UI inspirowana konfiguratorami rynkowymi. Dane produktowe i ceny są przykładowe.</p>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<section class="wizard card">
|
|
<nav class="steps" aria-label="Etapy konfiguracji">
|
|
<button class="step-item is-active" data-goto-step="1"><span>1</span>System</button>
|
|
<button class="step-item" data-goto-step="2"><span>2</span>Kształt</button>
|
|
<button class="step-item" data-goto-step="3"><span>3</span>Wykończenie</button>
|
|
<button class="step-item" data-goto-step="4"><span>4</span>Oprawy</button>
|
|
<button class="step-item" data-goto-step="5"><span>5</span>Akcesoria</button>
|
|
<button class="step-item" data-goto-step="6"><span>6</span>Podsumowanie</button>
|
|
</nav>
|
|
|
|
<div class="step-panels">
|
|
<section class="step-panel is-active" data-step="1">
|
|
<h2>Wybierz system szynowy</h2>
|
|
<p class="muted">Dobierz rodzaj zasilania i poziom zaawansowania instalacji.</p>
|
|
<div class="option-grid three">
|
|
<label class="option-card">
|
|
<input type="radio" name="system" value="mono_230">
|
|
<strong>1-fazowy 230V</strong>
|
|
<span>Najprostsze rozwiązanie do mieszkań i małych pomieszczeń.</span>
|
|
<em>od 159 zł</em>
|
|
</label>
|
|
<label class="option-card">
|
|
<input type="radio" name="system" value="tri_230">
|
|
<strong>3-fazowy 230V</strong>
|
|
<span>Większa elastyczność i strefowanie obwodów oświetlenia.</span>
|
|
<em>od 249 zł</em>
|
|
</label>
|
|
<label class="option-card">
|
|
<input type="radio" name="system" value="magnetic_48">
|
|
<strong>Magnetyczny 48V</strong>
|
|
<span>Nowoczesny, minimalistyczny system premium.</span>
|
|
<em>od 399 zł</em>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step-panel" data-step="2">
|
|
<h2>Ustal kształt i wymiary</h2>
|
|
<p class="muted">Wybierz geometrię układu i orientacyjną długość szyn.</p>
|
|
|
|
<div class="option-grid four">
|
|
<label class="layout-card">
|
|
<input type="radio" name="layout" value="line">
|
|
<span class="shape line"></span>
|
|
<strong>Linia</strong>
|
|
</label>
|
|
<label class="layout-card">
|
|
<input type="radio" name="layout" value="l_shape">
|
|
<span class="shape l-shape"></span>
|
|
<strong>L</strong>
|
|
</label>
|
|
<label class="layout-card">
|
|
<input type="radio" name="layout" value="u_shape">
|
|
<span class="shape u-shape"></span>
|
|
<strong>U</strong>
|
|
</label>
|
|
<label class="layout-card">
|
|
<input type="radio" name="layout" value="rectangle">
|
|
<span class="shape rectangle"></span>
|
|
<strong>Prostokąt</strong>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-grid">
|
|
<label class="range-field">
|
|
<span>Długość całkowita szyn</span>
|
|
<input id="trackLength" type="range" min="1" max="12" step="0.5" value="4">
|
|
<strong><span id="trackLengthOut">4.0</span> m</strong>
|
|
</label>
|
|
<label class="range-field">
|
|
<span>Wysokość pomieszczenia (opcjonalnie)</span>
|
|
<input id="roomHeight" type="number" min="2.2" max="4.5" step="0.1" value="2.8">
|
|
<strong><span id="roomHeightOut">2.8</span> m</strong>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step-panel" data-step="3">
|
|
<h2>Dopasuj wykończenie</h2>
|
|
<p class="muted">Kolor szyny i barwa światła pod charakter wnętrza.</p>
|
|
|
|
<div class="split">
|
|
<div>
|
|
<h3>Kolor szyny</h3>
|
|
<div class="option-grid three">
|
|
<label class="option-card compact finish-card">
|
|
<input type="radio" name="trackColor" value="black">
|
|
<span class="finish-swatch swatch-black" aria-hidden="true"></span>
|
|
<strong>Czarny mat</strong>
|
|
<span class="finish-track swatch-black"></span>
|
|
</label>
|
|
<label class="option-card compact finish-card">
|
|
<input type="radio" name="trackColor" value="white">
|
|
<span class="finish-swatch swatch-white" aria-hidden="true"></span>
|
|
<strong>Biały mat</strong>
|
|
<span class="finish-track swatch-white"></span>
|
|
</label>
|
|
<label class="option-card compact finish-card">
|
|
<input type="radio" name="trackColor" value="champagne">
|
|
<span class="finish-swatch swatch-champagne" aria-hidden="true"></span>
|
|
<strong>Champagne</strong>
|
|
<span class="finish-track swatch-champagne"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Temperatura barwowa</h3>
|
|
<div class="option-grid three">
|
|
<label class="option-card compact temp-card temp-3000">
|
|
<input type="radio" name="temperature" value="3000">
|
|
<span class="temp-glow" aria-hidden="true"></span>
|
|
<strong>Ciepła 3000K</strong>
|
|
<span>Przytulne, domowe światło</span>
|
|
</label>
|
|
<label class="option-card compact temp-card temp-4000">
|
|
<input type="radio" name="temperature" value="4000">
|
|
<span class="temp-glow" aria-hidden="true"></span>
|
|
<strong>Neutralna 4000K</strong>
|
|
<span>Naturalne światło do pracy</span>
|
|
</label>
|
|
<label class="option-card compact temp-card temp-cct">
|
|
<input type="radio" name="temperature" value="cct">
|
|
<span class="temp-glow" aria-hidden="true"></span>
|
|
<strong>CCT 3000-6000K</strong>
|
|
<span>Regulacja od ciepłej do chłodnej</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step-panel" data-step="4">
|
|
<h2>Wybierz oprawy</h2>
|
|
<p class="muted">Przykładowa baza opraw wygenerowana losowo dla makiety.</p>
|
|
<div class="product-grid" id="fixtureGrid"></div>
|
|
</section>
|
|
|
|
<section class="step-panel" data-step="5">
|
|
<h2>Dodatki i akcesoria</h2>
|
|
<p class="muted">Zaznacz elementy dodatkowe do instalacji i montażu.</p>
|
|
<div class="accessories" id="accessoryList"></div>
|
|
</section>
|
|
|
|
<section class="step-panel" data-step="6">
|
|
<h2>Podsumowanie konfiguracji</h2>
|
|
<p class="muted">Końcowy podgląd zestawu i orientacyjna wycena.</p>
|
|
<div class="final-summary" id="finalSummary"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<footer class="wizard-actions">
|
|
<button id="prevBtn" class="btn btn-secondary" type="button">Wstecz</button>
|
|
<button id="nextBtn" class="btn btn-primary" type="button">Dalej</button>
|
|
</footer>
|
|
</section>
|
|
|
|
<aside class="summary card">
|
|
<h2>Twój zestaw</h2>
|
|
<div class="preview" id="previewCanvas"></div>
|
|
<ul class="summary-list" id="summaryList"></ul>
|
|
<div class="summary-total">
|
|
<span>Szacunkowa wartość</span>
|
|
<strong id="summaryTotal">0 zł</strong>
|
|
</div>
|
|
<p class="note">Makieta demonstracyjna: ceny i indeksy nie są ofertą handlową.</p>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|