<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Inter, Arial, sans-serif;
background: #f5f5f3;
color: #111;
}
.admin-demo {
display: grid;
grid-template-columns: 260px 1fr 360px;
min-height: 100vh;
}
.admin-sidebar {
background: #ffffff;
border-right: 1px solid #e7e5df;
padding: 24px 18px;
}
.admin-logo {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.admin-subtitle {
font-size: 13px;
line-height: 1.5;
color: #6f6b64;
margin-bottom: 26px;
}
.admin-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-nav-link {
padding: 12px 14px;
border: 1px solid #ece8e1;
background: #fff;
font-size: 14px;
cursor: pointer;
transition: 0.2s ease;
}
.admin-nav-link:hover,
.admin-nav-link.is-active {
background: #111;
color: #fff;
border-color: #111;
}
.admin-main {
padding: 28px;
}
.admin-topbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
.admin-title {
font-size: 28px;
line-height: 1.1;
margin: 0 0 8px;
}
.admin-desc {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #6f6b64;
max-width: 620px;
}
.admin-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
appearance: none;
border: 1px solid #111;
background: #111;
color: #fff;
padding: 12px 16px;
font-size: 14px;
cursor: pointer;
}
.btn.btn-secondary {
background: #fff;
color: #111;
border-color: #d8d4cc;
}
.admin-section {
display: none;
gap: 18px;
}
.admin-section.is-active {
display: grid;
}
.card {
background: #fff;
border: 1px solid #e7e5df;
padding: 20px;
}
.card-title {
font-size: 18px;
margin: 0 0 16px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.field:last-child {
margin-bottom: 0;
}
.label {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6f6b64;
}
.input,
.select,
.textarea {
width: 100%;
min-height: 44px;
border: 1px solid #ddd7cf;
background: #fff;
padding: 10px 12px;
font-size: 14px;
outline: none;
}
.textarea {
min-height: 110px;
resize: vertical;
}
.checkbox-row,
.toggle-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
border: 1px solid #ddd7cf;
padding: 10px 12px;
font-size: 14px;
background: #fff;
}
.days {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.day-pill {
border: 1px solid #ddd7cf;
padding: 8px 10px;
font-size: 13px;
background: #fff;
}
.slot-list,
.simple-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.slot-item,
.simple-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border: 1px solid #ebe6de;
padding: 12px 14px;
background: #fcfbf9;
}
.slot-item-left,
.simple-item-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.slot-title,
.simple-title {
font-size: 14px;
font-weight: 600;
}
.slot-meta,
.simple-meta {
font-size: 12px;
color: #6f6b64;
}
.tag {
display: inline-block;
padding: 5px 8px;
border: 1px solid #ddd7cf;
font-size: 12px;
background: #fff;
}
.admin-preview {
background: #faf9f6;
border-left: 1px solid #e7e5df;
padding: 28px 20px;
}
.preview-title {
font-size: 18px;
margin: 0 0 14px;
}
.preview-box {
border: 1px solid #e1ddd6;
background: #fff;
padding: 16px;
overflow: auto;
max-height: calc(100vh - 120px);
}
.preview-box pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-size: 12px;
line-height: 1.6;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.section-stack {
display: flex;
flex-direction: column;
gap: 18px;
}
@media screen and (max-width: 1200px) {
.admin-demo {
grid-template-columns: 240px 1fr;
}
.admin-preview {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid #e7e5df;
}
}
@media screen and (max-width: 991px) {
.admin-demo {
grid-template-columns: 1fr;
}
.admin-sidebar {
border-right: 0;
border-bottom: 1px solid #e7e5df;
}
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}
</style>
<div class="admin-demo">
<aside class="admin-sidebar">
<div class="admin-logo">Be My Flower</div>
<div class="admin-subtitle">Panel demo do zarządzania kalendarzem, odbiorem osobistym i dostawą.</div>
<div class="admin-nav">
<button class="admin-nav-link is-active" data-section="general">Ogólne</button>
<button class="admin-nav-link" data-section="pickup">Odbiór osobisty</button>
<button class="admin-nav-link" data-section="delivery">Dostawa</button>
<button class="admin-nav-link" data-section="special">Daty specjalne</button>
<button class="admin-nav-link" data-section="blocked">Daty zablokowane</button>
<button class="admin-nav-link" data-section="fees">Dopłaty</button>
</div>
</aside>
<main class="admin-main">
<div class="admin-topbar">
<div>
<h1 class="admin-title">Panel ustawień checkout</h1>
<p class="admin-desc">
Це демо-версія адмінки, щоб ти побачила структуру. Тут можна уявити, як ти будеш керувати локалами, слотами, датами та правилами доступності.
</p>
</div>
<div class="admin-actions">
<button class="btn btn-secondary" type="button">Podgląd</button>
<button class="btn" type="button">Zapisz zmiany</button>
</div>
</div>
<section class="admin-section is-active" data-content="general">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Ogólne ustawienia</h2>
<div class="grid-2">
<div class="field">
<label class="label">Strefa czasowa</label>
<select class="select">
<option>Europe/Warsaw</option>
</select>
</div>
<div class="field">
<label class="label">Maks. liczba dni do przodu</label>
<input class="input" type="number" value="30">
</div>
<div class="field">
<label class="label">Kalendarz</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Włącz kalendarz</span>
</div>
</div>
<div class="field">
<label class="label">Wybór godziny</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Włącz wybór godziny</span>
</div>
</div>
</div>
</div>
<div class="card">
<h2 class="card-title">Tryby realizacji</h2>
<div class="grid-2">
<div class="field">
<label class="label">Dostawa</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Aktywna</span>
</div>
</div>
<div class="field">
<label class="label">Odbiór osobisty</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Aktywny</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="admin-section" data-content="pickup">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Lokale odbioru osobistego</h2>
<div class="simple-list">
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">Krzyki</div>
<div class="simple-meta">Aktywny lokal • Odbiór tego samego dnia dostępny</div>
</div>
<span class="tag">Edytuj</span>
</div>
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">Centrum</div>
<div class="simple-meta">Aktywny lokal • Odbiór tylko od jutra</div>
</div>
<span class="tag">Edytuj</span>
</div>
</div>
</div>
<div class="card">
<h2 class="card-title">Edycja lokalu: Krzyki</h2>
<div class="grid-2">
<div class="field">
<label class="label">Nazwa lokalu</label>
<input class="input" type="text" value="Krzyki">
</div>
<div class="field">
<label class="label">ID techniczne</label>
<input class="input" type="text" value="krzyki">
</div>
<div class="field">
<label class="label">Adres</label>
<input class="input" type="text" value="ul. Przykładowa 12, Wrocław">
</div>
<div class="field">
<label class="label">Status</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Lokal aktywny</span>
</div>
</div>
</div>
<div class="field">
<label class="label">Dostępne dni</label>
<div class="days">
<div class="day-pill">Pn</div>
<div class="day-pill">Wt</div>
<div class="day-pill">Śr</div>
<div class="day-pill">Czw</div>
<div class="day-pill">Pt</div>
<div class="day-pill">Sb</div>
</div>
</div>
<div class="grid-2">
<div class="field">
<label class="label">Odbiór na dziś</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Aktywny</span>
</div>
</div>
<div class="field">
<label class="label">Cutoff na dziś</label>
<input class="input" type="text" value="14:00">
</div>
</div>
<div class="field">
<label class="label">Domyślne przedziały godzinowe</label>
<div class="slot-list">
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">09:00–11:00</div>
<div class="slot-meta">Standardowy slot odbioru</div>
</div>
<span class="tag">Usuń</span>
</div>
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">11:00–13:00</div>
<div class="slot-meta">Standardowy slot odbioru</div>
</div>
<span class="tag">Usuń</span>
</div>
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">13:00–15:00</div>
<div class="slot-meta">Standardowy slot odbioru</div>
</div>
<span class="tag">Usuń</span>
</div>
</div>
</div>
<button class="btn btn-secondary" type="button">+ Dodaj przedział godzinowy</button>
</div>
</div>
</section>
<section class="admin-section" data-content="delivery">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Strefy dostawy</h2>
<div class="simple-list">
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">Wrocław</div>
<div class="simple-meta">Dostawa aktywna • 7 dni w tygodniu</div>
</div>
<span class="tag">Edytuj</span>
</div>
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">Poza Wrocławiem</div>
<div class="simple-meta">Dostawa aktywna • Ograniczone godziny</div>
</div>
<span class="tag">Edytuj</span>
</div>
</div>
</div>
<div class="card">
<h2 class="card-title">Edycja strefy: Wrocław</h2>
<div class="grid-2">
<div class="field">
<label class="label">Nazwa strefy</label>
<input class="input" type="text" value="Wrocław">
</div>
<div class="field">
<label class="label">Status</label>
<div class="toggle-row">
<input type="checkbox" checked>
<span>Strefa aktywna</span>
</div>
</div>
</div>
<div class="field">
<label class="label">Dostępne dni</label>
<div class="days">
<div class="day-pill">Pn</div>
<div class="day-pill">Wt</div>
<div class="day-pill">Śr</div>
<div class="day-pill">Czw</div>
<div class="day-pill">Pt</div>
<div class="day-pill">Sb</div>
<div class="day-pill">Nd</div>
</div>
</div>
<div class="field">
<label class="label">Godziny dostawy</label>
<div class="slot-list">
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">09:00–12:00</div>
<div class="slot-meta">Slot standardowy</div>
</div>
<span class="tag">Usuń</span>
</div>
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">12:00–15:00</div>
<div class="slot-meta">Slot standardowy</div>
</div>
<span class="tag">Usuń</span>
</div>
<div class="slot-item">
<div class="slot-item-left">
<div class="slot-title">15:00–18:00</div>
<div class="slot-meta">Slot standardowy</div>
</div>
<span class="tag">Usuń</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="admin-section" data-content="special">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Daty specjalne</h2>
<div class="simple-list">
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">08.03.2026 • Odbiór osobisty • Krzyki</div>
<div class="simple-meta">Specjalne godziny: 08:00–10:00, 10:00–12:00, 12:00–14:00</div>
</div>
<span class="tag">Edytuj</span>
</div>
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">14.02.2026 • Dostawa • Wrocław</div>
<div class="simple-meta">Wydłużone godziny dostawy</div>
</div>
<span class="tag">Edytuj</span>
</div>
</div>
<div style="margin-top:16px;">
<button class="btn btn-secondary" type="button">+ Dodaj datę specjalną</button>
</div>
</div>
</div>
</section>
<section class="admin-section" data-content="blocked">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Daty zablokowane</h2>
<div class="simple-list">
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">25.12.2026 • Wszystkie tryby</div>
<div class="simple-meta">Powód: Zamknięte na święta</div>
</div>
<span class="tag">Usuń</span>
</div>
<div class="simple-item">
<div class="simple-item-left">
<div class="simple-title">01.11.2026 • Dostawa • Poza Wrocławiem</div>
<div class="simple-meta">Powód: Brak realizacji</div>
</div>
<span class="tag">Usuń</span>
</div>
</div>
<div style="margin-top:16px;">
<button class="btn btn-secondary" type="button">+ Dodaj zablokowaną datę</button>
</div>
</div>
</div>
</section>
<section class="admin-section" data-content="fees">
<div class="section-stack">
<div class="card">
<h2 class="card-title">Dopłaty i progi</h2>
<div class="grid-2">
<div class="field">
<label class="label">Próg darmowej dostawy</label>
<input class="input" type="number" value="250">
</div>
<div class="field">
<label class="label">Dopłata za extra godziny</label>
<input class="input" type="number" value="50">
</div>
<div class="field">
<label class="label">Dopłata za wczesne godziny</label>
<input class="input" type="number" value="20">
</div>
<div class="field">
<label class="label">Dopłata za późne godziny</label>
<input class="input" type="number" value="25">
</div>
</div>
</div>
</div>
</section>
</main>
<aside class="admin-preview">
<h2 class="preview-title">Podgląd konfiguracji</h2>
<div class="preview-box">
<pre>{
"general": {
"timezone": "Europe/Warsaw",
"calendar_enabled": true,
"time_picker_enabled": true,
"max_days_ahead": 30
},
"pickup_locations": [
{
"id": "krzyki",
"name": "Krzyki",
"enabled": true,
"available_weekdays": [1,2,3,4,5,6],
"same_day_cutoff": "14:00",
"default_slots": [
"09:00-11:00",
"11:00-13:00",
"13:00-15:00"
]
}
],
"delivery_zones": [
{
"id": "wroclaw",
"name": "Wrocław",
"enabled": true,
"default_slots": [
"09:00-12:00",
"12:00-15:00",
"15:00-18:00"
]
}
]
}</pre>
</div>
</aside>
</div>
<script>
const navLinks = document.querySelectorAll(".admin-nav-link");
const sections = document.querySelectorAll(".admin-section");
navLinks.forEach((link) => {
link.addEventListener("click", () => {
const target = link.getAttribute("data-section");
navLinks.forEach((item) => item.classList.remove("is-active"));
sections.forEach((section) => section.classList.remove("is-active"));
link.classList.add("is-active");
document.querySelector(`.admin-section[data-content="${target}"]`)?.classList.add("is-active");
});
});
</script>