first commit
This commit is contained in:
17
.vscode/ftp-kr.json
vendored
Normal file
17
.vscode/ftp-kr.json
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"host": "host117523.hostido.net.pl",
|
||||
"username": "www@laitica.pagedev.pl",
|
||||
"password": "5M5dnyGsBxHubZXD5bkt",
|
||||
"remotePath": "/public_html",
|
||||
"protocol": "ftp",
|
||||
"port": 21,
|
||||
"fileNameEncoding": "utf8",
|
||||
"autoUpload": true,
|
||||
"autoDelete": false,
|
||||
"autoDownload": false,
|
||||
"ignoreRemoteModification": true,
|
||||
"ignore": [
|
||||
".git",
|
||||
"/.vscode"
|
||||
]
|
||||
}
|
||||
12
.vscode/sftp.json
vendored
Normal file
12
.vscode/sftp.json
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "host117523.hostido.net.pl",
|
||||
"host": "host117523.hostido.net.pl",
|
||||
"protocol": "ftp",
|
||||
"port": 21,
|
||||
"username": "www@laitica.pagedev.pl",
|
||||
"password": "5M5dnyGsBxHubZXD5bkt",
|
||||
"remotePath": "/public_html",
|
||||
"uploadOnSave": false,
|
||||
"useTempFile": false,
|
||||
"openSsh": false
|
||||
}
|
||||
197
index.html
Normal file
197
index.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<!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>
|
||||
490
script.js
Normal file
490
script.js
Normal file
@@ -0,0 +1,490 @@
|
||||
const stepCount = 6;
|
||||
|
||||
const catalogs = {
|
||||
systems: {
|
||||
mono_230: { name: "System 1-fazowy 230V", base: 159, meter: 89 },
|
||||
tri_230: { name: "System 3-fazowy 230V", base: 249, meter: 129 },
|
||||
magnetic_48: { name: "System magnetyczny 48V", base: 399, meter: 179 }
|
||||
},
|
||||
layouts: {
|
||||
line: { name: "Układ liniowy", surcharge: 0 },
|
||||
l_shape: { name: "Układ L", surcharge: 59 },
|
||||
u_shape: { name: "Układ U", surcharge: 99 },
|
||||
rectangle: { name: "Układ prostokątny", surcharge: 149 }
|
||||
},
|
||||
colors: {
|
||||
black: { name: "Czarny mat", surcharge: 0, line: "#252627" },
|
||||
white: { name: "Biały mat", surcharge: 0, line: "#f7f6f8" },
|
||||
champagne: { name: "Champagne", surcharge: 40, line: "#d7bd8b" }
|
||||
},
|
||||
temperatures: {
|
||||
"3000": "3000K ciepła",
|
||||
"4000": "4000K neutralna",
|
||||
cct: "CCT regulowana"
|
||||
}
|
||||
};
|
||||
|
||||
const state = {
|
||||
step: 1,
|
||||
system: null,
|
||||
layout: null,
|
||||
trackLength: 4,
|
||||
roomHeight: 2.8,
|
||||
trackColor: null,
|
||||
temperature: null,
|
||||
fixtures: {},
|
||||
accessories: new Set()
|
||||
};
|
||||
|
||||
const fixtureGrid = document.getElementById("fixtureGrid");
|
||||
const accessoryList = document.getElementById("accessoryList");
|
||||
const summaryList = document.getElementById("summaryList");
|
||||
const summaryTotal = document.getElementById("summaryTotal");
|
||||
const finalSummary = document.getElementById("finalSummary");
|
||||
const previewCanvas = document.getElementById("previewCanvas");
|
||||
const trackLengthInput = document.getElementById("trackLength");
|
||||
const trackLengthOut = document.getElementById("trackLengthOut");
|
||||
const roomHeightInput = document.getElementById("roomHeight");
|
||||
const roomHeightOut = document.getElementById("roomHeightOut");
|
||||
const prevBtn = document.getElementById("prevBtn");
|
||||
const nextBtn = document.getElementById("nextBtn");
|
||||
const toast = document.getElementById("toast");
|
||||
|
||||
const fixtures = buildFixtures();
|
||||
const accessories = buildAccessories();
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
renderFixtures();
|
||||
renderAccessories();
|
||||
bindBaseEvents();
|
||||
syncInputs();
|
||||
updateUI();
|
||||
}
|
||||
|
||||
function buildFixtures() {
|
||||
const names = [
|
||||
"Reflektor Punto",
|
||||
"Spot Slim Tube",
|
||||
"Lampa liniowa Aero",
|
||||
"Reflektor Move Pro",
|
||||
"Tubus Mono Flex",
|
||||
"Panel Linear Edge",
|
||||
"Oprawa Twist Mini"
|
||||
];
|
||||
|
||||
return names.slice(0, 6).map((name, i) => ({
|
||||
id: `fx_${i + 1}`,
|
||||
code: `LT-FX-${1200 + i}`,
|
||||
name,
|
||||
price: randomInt(85, 279)
|
||||
}));
|
||||
}
|
||||
|
||||
function buildAccessories() {
|
||||
const names = [
|
||||
"Zasilacz końcowy",
|
||||
"Łącznik prosty",
|
||||
"Łącznik narożny L",
|
||||
"Maskownica zasilania",
|
||||
"Pilot CCT",
|
||||
"Zawiesie sufitowe 1 m"
|
||||
];
|
||||
|
||||
return names.map((name, i) => ({
|
||||
id: `acc_${i + 1}`,
|
||||
name,
|
||||
price: randomInt(24, 119)
|
||||
}));
|
||||
}
|
||||
|
||||
function bindBaseEvents() {
|
||||
document.addEventListener("change", (event) => {
|
||||
const target = event.target;
|
||||
|
||||
if (target.name === "system") {
|
||||
state.system = target.value;
|
||||
}
|
||||
|
||||
if (target.name === "layout") {
|
||||
state.layout = target.value;
|
||||
}
|
||||
|
||||
if (target.name === "trackColor") {
|
||||
state.trackColor = target.value;
|
||||
}
|
||||
|
||||
if (target.name === "temperature") {
|
||||
state.temperature = target.value;
|
||||
}
|
||||
|
||||
if (target.matches("[data-accessory]")) {
|
||||
if (target.checked) {
|
||||
state.accessories.add(target.value);
|
||||
} else {
|
||||
state.accessories.delete(target.value);
|
||||
}
|
||||
}
|
||||
|
||||
updateUI();
|
||||
});
|
||||
|
||||
fixtureGrid.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("button[data-fixture-id]");
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const id = button.dataset.fixtureId;
|
||||
const action = button.dataset.action;
|
||||
const currentQty = state.fixtures[id] || 0;
|
||||
const nextQty = action === "inc" ? currentQty + 1 : Math.max(0, currentQty - 1);
|
||||
|
||||
state.fixtures[id] = nextQty;
|
||||
updateUI();
|
||||
});
|
||||
|
||||
trackLengthInput.addEventListener("input", () => {
|
||||
state.trackLength = Number(trackLengthInput.value);
|
||||
syncInputs();
|
||||
updateUI();
|
||||
});
|
||||
|
||||
roomHeightInput.addEventListener("input", () => {
|
||||
const clamped = Math.min(4.5, Math.max(2.2, Number(roomHeightInput.value || 2.8)));
|
||||
state.roomHeight = Number(clamped.toFixed(1));
|
||||
syncInputs();
|
||||
});
|
||||
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (state.step > 1) {
|
||||
state.step -= 1;
|
||||
updateUI();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (state.step < stepCount) {
|
||||
const valid = validateCurrentStep();
|
||||
if (!valid.ok) {
|
||||
showToast(valid.message);
|
||||
return;
|
||||
}
|
||||
|
||||
state.step += 1;
|
||||
updateUI();
|
||||
return;
|
||||
}
|
||||
|
||||
showToast("Makieta: zestaw został przykładowo dodany do koszyka.");
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-goto-step]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const goto = Number(button.dataset.gotoStep);
|
||||
if (goto <= state.step || goto === state.step + 1) {
|
||||
if (goto > state.step) {
|
||||
const valid = validateCurrentStep();
|
||||
if (!valid.ok) {
|
||||
showToast(valid.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
state.step = goto;
|
||||
updateUI();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderFixtures() {
|
||||
fixtureGrid.innerHTML = fixtures
|
||||
.map(
|
||||
(fixture) => `
|
||||
<article class="product-card">
|
||||
<div class="product-code">${fixture.code}</div>
|
||||
<div class="product-name">${fixture.name}</div>
|
||||
<div class="product-meta">
|
||||
<div class="price">${formatPLN(fixture.price)}</div>
|
||||
<div class="qty">
|
||||
<button type="button" data-fixture-id="${fixture.id}" data-action="dec">-</button>
|
||||
<span>${state.fixtures[fixture.id] || 0}</span>
|
||||
<button type="button" data-fixture-id="${fixture.id}" data-action="inc">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderAccessories() {
|
||||
accessoryList.innerHTML = accessories
|
||||
.map(
|
||||
(item) => `
|
||||
<article class="accessory-item">
|
||||
<label>
|
||||
<input type="checkbox" data-accessory value="${item.id}">
|
||||
<span>${item.name}</span>
|
||||
</label>
|
||||
<strong>${formatPLN(item.price)}</strong>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
updateStepPanels();
|
||||
updateStepButtons();
|
||||
updateActions();
|
||||
renderFixtures();
|
||||
refreshAccessoryChecks();
|
||||
renderSummary();
|
||||
renderFinalSummary();
|
||||
renderPreview();
|
||||
}
|
||||
|
||||
function updateStepPanels() {
|
||||
document.querySelectorAll(".step-panel").forEach((panel) => {
|
||||
panel.classList.toggle("is-active", Number(panel.dataset.step) === state.step);
|
||||
});
|
||||
}
|
||||
|
||||
function updateStepButtons() {
|
||||
document.querySelectorAll(".step-item").forEach((button) => {
|
||||
const step = Number(button.dataset.gotoStep);
|
||||
button.classList.toggle("is-active", step === state.step);
|
||||
button.classList.toggle("is-done", step < state.step);
|
||||
});
|
||||
}
|
||||
|
||||
function updateActions() {
|
||||
prevBtn.disabled = state.step === 1;
|
||||
nextBtn.textContent = state.step === stepCount ? "Dodaj do koszyka" : "Dalej";
|
||||
}
|
||||
|
||||
function renderSummary() {
|
||||
const breakdown = getBreakdown();
|
||||
summaryList.innerHTML = breakdown.items
|
||||
.map((item) => `<li><span>${item.label}</span><strong>${formatPLN(item.value)}</strong></li>`)
|
||||
.join("");
|
||||
summaryTotal.textContent = formatPLN(breakdown.total);
|
||||
}
|
||||
|
||||
function renderFinalSummary() {
|
||||
const breakdown = getBreakdown();
|
||||
finalSummary.innerHTML = `
|
||||
<ul>
|
||||
${breakdown.items
|
||||
.map((item) => `<li><span>${item.label}</span><strong>${formatPLN(item.value)}</strong></li>`)
|
||||
.join("")}
|
||||
<li><span><strong>Razem brutto</strong></span><strong>${formatPLN(breakdown.total)}</strong></li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
||||
function refreshAccessoryChecks() {
|
||||
document.querySelectorAll("[data-accessory]").forEach((input) => {
|
||||
input.checked = state.accessories.has(input.value);
|
||||
});
|
||||
}
|
||||
|
||||
function getBreakdown() {
|
||||
const items = [];
|
||||
let total = 0;
|
||||
|
||||
if (state.system) {
|
||||
const system = catalogs.systems[state.system];
|
||||
const value = system.base;
|
||||
items.push({ label: system.name, value });
|
||||
total += value;
|
||||
}
|
||||
|
||||
if (state.layout) {
|
||||
const layout = catalogs.layouts[state.layout];
|
||||
if (layout.surcharge > 0) {
|
||||
items.push({ label: layout.name, value: layout.surcharge });
|
||||
total += layout.surcharge;
|
||||
}
|
||||
}
|
||||
|
||||
if (state.system) {
|
||||
const system = catalogs.systems[state.system];
|
||||
const trackValue = Math.round(state.trackLength * system.meter);
|
||||
items.push({ label: `Szyny ${state.trackLength.toFixed(1)} m`, value: trackValue });
|
||||
total += trackValue;
|
||||
}
|
||||
|
||||
if (state.trackColor) {
|
||||
const color = catalogs.colors[state.trackColor];
|
||||
if (color.surcharge > 0) {
|
||||
items.push({ label: `Wykończenie ${color.name}`, value: color.surcharge });
|
||||
total += color.surcharge;
|
||||
}
|
||||
}
|
||||
|
||||
fixtures.forEach((fixture) => {
|
||||
const qty = state.fixtures[fixture.id] || 0;
|
||||
if (qty > 0) {
|
||||
const value = qty * fixture.price;
|
||||
items.push({ label: `${fixture.name} x${qty}`, value });
|
||||
total += value;
|
||||
}
|
||||
});
|
||||
|
||||
accessories.forEach((acc) => {
|
||||
if (state.accessories.has(acc.id)) {
|
||||
items.push({ label: acc.name, value: acc.price });
|
||||
total += acc.price;
|
||||
}
|
||||
});
|
||||
|
||||
if (items.length === 0) {
|
||||
items.push({ label: "Brak wybranych pozycji", value: 0 });
|
||||
}
|
||||
|
||||
return { items, total };
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
const colorToken = state.trackColor ? catalogs.colors[state.trackColor].line : "#f7f6f8";
|
||||
const spotCount = Math.max(1, Object.values(state.fixtures).reduce((sum, qty) => sum + qty, 0));
|
||||
const points = getPreviewPoints(state.layout || "line");
|
||||
|
||||
const circles = Array.from({ length: spotCount }, (_, i) => {
|
||||
const point = points[i % points.length];
|
||||
const tone = getPreviewLightTone(state.temperature, i);
|
||||
return `<circle cx="${point.x}" cy="${point.y}" r="5.2" fill="${tone.fill}" stroke="${tone.stroke}" stroke-width="2" />`;
|
||||
}).join("");
|
||||
|
||||
const lines = getPreviewPath(state.layout || "line", colorToken);
|
||||
|
||||
previewCanvas.innerHTML = `
|
||||
<svg viewBox="0 0 360 170" width="100%" height="170" aria-hidden="true">
|
||||
${lines}
|
||||
${circles}
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
function getPreviewPath(layout, color) {
|
||||
const stroke = `<g stroke="${color}" stroke-width="9" fill="none" stroke-linecap="round" stroke-linejoin="round">`;
|
||||
if (layout === "l_shape") {
|
||||
return `${stroke}<path d="M48 38 L48 130 L280 130" /></g>`;
|
||||
}
|
||||
if (layout === "u_shape") {
|
||||
return `${stroke}<path d="M45 38 L45 130 L300 130 L300 38" /></g>`;
|
||||
}
|
||||
if (layout === "rectangle") {
|
||||
return `${stroke}<path d="M60 40 L300 40 L300 130 L60 130 Z" /></g>`;
|
||||
}
|
||||
return `${stroke}<path d="M45 86 L315 86" /></g>`;
|
||||
}
|
||||
|
||||
function getPreviewPoints(layout) {
|
||||
if (layout === "l_shape") {
|
||||
return [
|
||||
{ x: 48, y: 54 },
|
||||
{ x: 48, y: 82 },
|
||||
{ x: 48, y: 112 },
|
||||
{ x: 98, y: 130 },
|
||||
{ x: 150, y: 130 },
|
||||
{ x: 205, y: 130 },
|
||||
{ x: 260, y: 130 }
|
||||
];
|
||||
}
|
||||
if (layout === "u_shape") {
|
||||
return [
|
||||
{ x: 45, y: 55 },
|
||||
{ x: 45, y: 100 },
|
||||
{ x: 95, y: 130 },
|
||||
{ x: 145, y: 130 },
|
||||
{ x: 195, y: 130 },
|
||||
{ x: 245, y: 130 },
|
||||
{ x: 300, y: 102 },
|
||||
{ x: 300, y: 58 }
|
||||
];
|
||||
}
|
||||
if (layout === "rectangle") {
|
||||
return [
|
||||
{ x: 76, y: 40 },
|
||||
{ x: 128, y: 40 },
|
||||
{ x: 196, y: 40 },
|
||||
{ x: 262, y: 40 },
|
||||
{ x: 300, y: 76 },
|
||||
{ x: 300, y: 114 },
|
||||
{ x: 250, y: 130 },
|
||||
{ x: 175, y: 130 },
|
||||
{ x: 100, y: 130 },
|
||||
{ x: 60, y: 96 }
|
||||
];
|
||||
}
|
||||
return [
|
||||
{ x: 64, y: 86 },
|
||||
{ x: 104, y: 86 },
|
||||
{ x: 146, y: 86 },
|
||||
{ x: 188, y: 86 },
|
||||
{ x: 230, y: 86 },
|
||||
{ x: 272, y: 86 },
|
||||
{ x: 312, y: 86 }
|
||||
];
|
||||
}
|
||||
|
||||
function getPreviewLightTone(temperature, index) {
|
||||
if (temperature === "3000") {
|
||||
return { fill: "#ffb766", stroke: "#ffd4a2" };
|
||||
}
|
||||
|
||||
if (temperature === "4000") {
|
||||
return { fill: "#fff3d2", stroke: "#fff9ea" };
|
||||
}
|
||||
|
||||
if (temperature === "cct") {
|
||||
return index % 2 === 0
|
||||
? { fill: "#ffbc77", stroke: "#ffe0b5" }
|
||||
: { fill: "#c8e8ff", stroke: "#e9f6ff" };
|
||||
}
|
||||
|
||||
return { fill: "#f7614d", stroke: "#ffd2cc" };
|
||||
}
|
||||
|
||||
function validateCurrentStep() {
|
||||
if (state.step === 1 && !state.system) {
|
||||
return { ok: false, message: "Wybierz system szynowy, aby przejść dalej." };
|
||||
}
|
||||
|
||||
if (state.step === 2 && !state.layout) {
|
||||
return { ok: false, message: "Wybierz kształt konfiguracji." };
|
||||
}
|
||||
|
||||
if (state.step === 3 && (!state.trackColor || !state.temperature)) {
|
||||
return { ok: false, message: "Uzupełnij kolor szyny i temperaturę barwową." };
|
||||
}
|
||||
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
function syncInputs() {
|
||||
trackLengthOut.textContent = state.trackLength.toFixed(1);
|
||||
roomHeightInput.value = state.roomHeight.toFixed(1);
|
||||
roomHeightOut.textContent = state.roomHeight.toFixed(1);
|
||||
}
|
||||
|
||||
function showToast(text) {
|
||||
toast.textContent = text;
|
||||
toast.classList.add("is-visible");
|
||||
clearTimeout(showToast.timer);
|
||||
showToast.timer = setTimeout(() => {
|
||||
toast.classList.remove("is-visible");
|
||||
}, 2100);
|
||||
}
|
||||
|
||||
function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function formatPLN(value) {
|
||||
return `${value.toLocaleString("pl-PL")} zł`;
|
||||
}
|
||||
680
styles.css
Normal file
680
styles.css
Normal file
@@ -0,0 +1,680 @@
|
||||
:root {
|
||||
--brand-green: #108474;
|
||||
--brand-accent: #f7614d;
|
||||
--brand-text: #3c393a;
|
||||
--brand-bg: #f7f6f8;
|
||||
--brand-soft: #e8e7eb;
|
||||
--brand-ink: #252627;
|
||||
--brand-white: #ffffff;
|
||||
--radius-lg: 22px;
|
||||
--radius-md: 14px;
|
||||
--shadow: 0 18px 50px rgba(60, 57, 58, 0.12);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: var(--brand-text);
|
||||
background: linear-gradient(135deg, #fff 0%, var(--brand-bg) 48%, #edf5f5 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.bg-shape {
|
||||
position: fixed;
|
||||
border-radius: 999px;
|
||||
filter: blur(24px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-shape-a {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
top: -120px;
|
||||
right: -80px;
|
||||
background: radial-gradient(circle at center, rgba(16, 132, 116, 0.28), rgba(16, 132, 116, 0));
|
||||
}
|
||||
|
||||
.bg-shape-b {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
bottom: -140px;
|
||||
left: -90px;
|
||||
background: radial-gradient(circle at center, rgba(247, 97, 77, 0.22), rgba(247, 97, 77, 0));
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1260px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 42px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 12px 6px 24px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--brand-soft);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 12px 0 10px;
|
||||
font-size: clamp(26px, 3.2vw, 46px);
|
||||
line-height: 1.06;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
margin: 0;
|
||||
max-width: 680px;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.35fr 0.65fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(7px);
|
||||
border: 1px solid rgba(37, 38, 39, 0.08);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.wizard {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background: var(--brand-soft);
|
||||
color: #5e5b5c;
|
||||
border-radius: 12px;
|
||||
padding: 9px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: 0.24s ease;
|
||||
}
|
||||
|
||||
.step-item span {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.step-item:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.step-item.is-active {
|
||||
background: var(--brand-green);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.step-item.is-active span {
|
||||
color: var(--brand-green);
|
||||
}
|
||||
|
||||
.step-item.is-done {
|
||||
background: #d6efeb;
|
||||
color: var(--brand-green);
|
||||
}
|
||||
|
||||
.step-panels {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.step-panel {
|
||||
display: none;
|
||||
animation: panel-enter 0.28s ease;
|
||||
}
|
||||
|
||||
.step-panel.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes panel-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 4px 0 8px;
|
||||
font-size: clamp(21px, 2.2vw, 30px);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0 0 14px;
|
||||
color: #6b696a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.option-grid.three {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.option-grid.four {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.option-card,
|
||||
.layout-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
border: 1px solid rgba(37, 38, 39, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
min-height: 122px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-card {
|
||||
min-height: 116px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.option-card input,
|
||||
.layout-card input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.option-card strong,
|
||||
.layout-card strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option-card span {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.option-card em {
|
||||
margin-top: auto;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
color: var(--brand-green);
|
||||
}
|
||||
|
||||
.option-card.compact {
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.finish-card {
|
||||
min-height: 124px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.finish-swatch {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(37, 38, 39, 0.2);
|
||||
}
|
||||
|
||||
.finish-track {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(37, 38, 39, 0.18);
|
||||
}
|
||||
|
||||
.swatch-black {
|
||||
background: #252627;
|
||||
}
|
||||
|
||||
.swatch-white {
|
||||
background: #f7f6f8;
|
||||
}
|
||||
|
||||
.swatch-champagne {
|
||||
background: #d7bd8b;
|
||||
}
|
||||
|
||||
.temp-card {
|
||||
min-height: 124px;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.temp-card .temp-glow {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(37, 38, 39, 0.15);
|
||||
animation: glow-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.temp-card.temp-3000 .temp-glow {
|
||||
background: linear-gradient(90deg, #ff9f45 0%, #ffd18c 100%);
|
||||
}
|
||||
|
||||
.temp-card.temp-4000 .temp-glow {
|
||||
background: linear-gradient(90deg, #fff1c7 0%, #fff9e9 100%);
|
||||
}
|
||||
|
||||
.temp-card.temp-cct .temp-glow {
|
||||
background: linear-gradient(90deg, #ffb66c 0%, #fff4d0 45%, #d2ecff 100%);
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0% {
|
||||
filter: saturate(0.9);
|
||||
}
|
||||
50% {
|
||||
filter: saturate(1.15);
|
||||
}
|
||||
100% {
|
||||
filter: saturate(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.shape {
|
||||
width: 62px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
border: 4px solid var(--brand-ink);
|
||||
}
|
||||
|
||||
.shape.line {
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
height: 12px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.shape.l-shape {
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.shape.u-shape {
|
||||
border-top: 0;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.shape.rectangle {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.option-card:has(input:checked),
|
||||
.layout-card:has(input:checked) {
|
||||
border-color: var(--brand-accent);
|
||||
box-shadow: 0 0 0 3px rgba(247, 97, 77, 0.12);
|
||||
}
|
||||
|
||||
.finish-card:has(input:checked) .finish-swatch {
|
||||
box-shadow: 0 0 0 4px rgba(247, 97, 77, 0.2);
|
||||
}
|
||||
|
||||
.finish-card:has(input:checked) .finish-track,
|
||||
.temp-card:has(input:checked) .temp-glow {
|
||||
box-shadow: 0 0 0 3px rgba(16, 132, 116, 0.14);
|
||||
}
|
||||
|
||||
.field-grid {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.range-field {
|
||||
border: 1px solid rgba(37, 38, 39, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.range-field span {
|
||||
font-size: 12px;
|
||||
color: #6b696a;
|
||||
}
|
||||
|
||||
.range-field input[type="number"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(37, 38, 39, 0.2);
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--brand-green);
|
||||
}
|
||||
|
||||
.split {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(37, 38, 39, 0.12);
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-code {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--brand-green);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
min-height: 38px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.qty {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(37, 38, 39, 0.2);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qty button {
|
||||
width: 27px;
|
||||
height: 26px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
color: var(--brand-text);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.qty span {
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.accessories {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.accessory-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(37, 38, 39, 0.11);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.accessory-item label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.accessory-item input {
|
||||
accent-color: var(--brand-accent);
|
||||
}
|
||||
|
||||
.wizard-actions {
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(37, 38, 39, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
min-height: 44px;
|
||||
padding: 0 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--brand-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--brand-soft);
|
||||
color: var(--brand-text);
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
border-radius: 14px;
|
||||
min-height: 185px;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(160deg, #242526 0%, #3a3d3f 100%);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px dashed rgba(37, 38, 39, 0.14);
|
||||
padding-bottom: 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary-total {
|
||||
margin-top: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(37, 38, 39, 0.12);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-total strong {
|
||||
font-size: 25px;
|
||||
color: var(--brand-green);
|
||||
}
|
||||
|
||||
.note {
|
||||
margin: 10px 0 0;
|
||||
color: #6b696a;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.final-summary {
|
||||
border: 1px solid rgba(37, 38, 39, 0.12);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.final-summary ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.final-summary li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%) translateY(22px);
|
||||
background: var(--brand-ink);
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
opacity: 0;
|
||||
transition: 0.24s ease;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.toast.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.wizard {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.option-grid.three,
|
||||
.option-grid.four,
|
||||
.field-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user