:root {
    --primary: #b44b29;
    --primary-hover: #9e3f1f;
    --bg-main: #fcfbfa;
    --text-main: #2d231e;
    --text-muted: #665c54;
    --border-color: #e2d9cd;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Jednotná hlavička pro všechny stránky */
.navbar {
    padding: 25px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    overflow: visible;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    width: 100%;
}

.navbar .logo-img, .logo-img {
    height: 115px !important;
    max-height: none !important;
    width: auto !important;
    object-fit: contain;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Jednotný styl pro všechny odkazy v navigaci včetně hoveru a aktivního stavu */
.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 10px 18px;
    border-radius: 14px;
    border: 2px solid transparent;
    background-color: transparent;
    transition: all 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
    background-color: #fff3ec;
    border: 2px solid var(--primary);
    box-shadow: 0 8px 24px rgba(184, 75, 41, 0.25);
    transform: translateY(-2px);
}
```[cite: 14]

---

### 2. `index.html`
```html
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Papanito | Kouzlo domácí kuchyně u sousedů</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styl.css">
    <style>
        /* Velké karty – celá plocha klikací s výrazným stínem */
        .hero-options-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 40px;
        }

        .option-card {
            display: block;
            text-decoration: none;
            color: inherit;
            background: #fff;
            border-radius: 20px;
            padding: 35px;
            border: 2px solid #e2d9cd;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
            position: relative;
        }

        .option-card:hover {
            transform: translateY(-8px);
            border-color: var(--primary);
            background-color: #fffaf7;
            box-shadow: 0 20px 40px rgba(184, 75, 41, 0.25), 0 0 0 4px rgba(184, 75, 41, 0.15);
        }

        @media (max-width: 1024px) {
            .hero-options-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <a href="index.html">
            <img src="logo.png" alt="Papanito" class="logo-img" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=250';">
        </a>
        <div class="nav-links">
            <a href="index.html" class="active">Domů</a>
            <a href="galerie.html">Co se vaří</a>
            <a href="uvarit.html">Zveřejnit jídlo</a>
            <a href="prihlaseni.html">Přihlásit se</a>
        </div>
    </nav>

    <main class="container" style="padding: 40px 5%;">
        <div style="text-align: center; max-width: 800px; margin: 0 auto;">
            <span style="background: #fff3ec; color: var(--primary); padding: 6px 14px; border-radius: 20px; font-weight: 600; font-size: 0.9rem;">KOUZLO DOMÁCÍ KUCHYNĚ 🍲</span>
            <h1 style="font-size: 2.8rem; margin: 20px 0 15px 0; color: #2d231e;">Objevte kouzlo stolování u souseda</h1>
            <p style="color: #665c54; font-size: 1.1rem; line-height: 1.6;">Ušetřete za jídlo a poznejte skvělé sousedy u jednoho stolu. Zároveň pro ty, kteří rádi vaří – ušetřete za suroviny tím, že se podělíte o poctivé domácí jídlo na několik dní dopředu.</p>
        </div>

        <div class="hero-options-grid">
            <a href="galerie.html?type=stul" class="option-card">
                <div style="font-size: 2.5rem; margin-bottom: 15px;">🍽️</div>
                <h3 style="font-size: 1.4rem; margin-bottom: 10px; color: #2d231e;">Chci ke stolu</h3>
                <p style="color: #665c54; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5;">Přisedněte si k rodinnému stolu souseda, zažijte vřelou atmosféru a vychutnejte si čerstvé jídlo.</p>
                <span style="color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">Zobrazit nabídky u stolu →</span>
            </a>

            <a href="galerie.html?type=krabicka" class="option-card">
                <div style="font-size: 2.5rem; margin-bottom: 15px;">🥡</div>
                <h3 style="font-size: 1.4rem; margin-bottom: 10px; color: #2d231e;">Chci jídlo do krabičky</h3>
                <p style="color: #665c54; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5;">Nemáte čas na posezení? Skočte si pro svou porci poctivého domácího vaření s sebou do vlastní krabičky.</p>
                <span style="color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">Zobrazit jídla s sebou →</span>
            </a>

            <a href="uvarit.html" class="option-card">
                <div style="font-size: 2.5rem; margin-bottom: 15px;">🧑‍🍳</div>
                <h3 style="font-size: 1.4rem; margin-bottom: 10px; color: #2d231e;">Chci uvařit jídlo někomu</h3>
                <p style="color: #665c54; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5;">Uvařili jste víc, nebo plánujete vařit na týden dopředu? Podělte se, ušetřete a potěšte sousedy.</p>
                <span style="color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">Zveřejnit jídlo →</span>
            </a>
        </div>
    </main>

</body>
</html>
```[cite: 18]

---

### 3. `galerie.html` (Aktualizovaná s podporou porcí, modálním oknem profilu a vyprodaným stavem)
```html
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Co se vaří | Papanito</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="styl.css">
    <style>
        .gallery-container {
            max-width: 1200px;
            margin: 30px auto 60px auto;
            padding: 0 20px;
        }

        .gallery-header {
            margin-bottom: 30px;
        }

        .gallery-header h1 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 8px;
        }

        .gallery-header p {
            color: var(--text-muted);
            font-size: 1rem;
        }

        .filter-panel {
            background: #fff;
            padding: 22px 25px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            box-shadow: 0 6px 20px rgba(0,0,0,0.03);
            margin-bottom: 30px;
        }

        .filter-row-days {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            margin-bottom: 18px;
            padding-bottom: 18px;
            border-bottom: 1px solid #f2ede4;
        }

        .day-checkbox-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #faf7f2;
            border: 1px solid var(--border-color);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-all-days {
            padding: 6px 14px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .filter-row-bottom {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: center;
            justify-content: space-between;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .filter-select {
            padding: 12px 18px;
            border-radius: 10px;
            border: 2px solid var(--border-color);
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            background-color: #fff;
            color: var(--primary);
            cursor: pointer;
        }

        .btn-view-toggle {
            padding: 12px 20px;
            background: #fff;
            border: 2px solid var(--primary);
            color: var(--primary);
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .recipes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
        }

        .recipe-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.04);
            display: flex;
            flex-direction: column;
            transition: transform 0.2s;
        }

        .recipe-card:hover {
            transform: translateY(-4px);
        }

        /* VYPRODÁNO / ZESEDLÝ STAV */
        .recipe-card.sold-out {
            filter: grayscale(85%);
            opacity: 0.75;
            background: #f0ede6;
        }

        .sold-out-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-10deg);
            background: #e74c3c;
            color: white;
            padding: 10px 24px;
            font-size: 1.4rem;
            font-weight: 800;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            letter-spacing: 2px;
            z-index: 5;
        }

        .recipe-img-container {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .recipe-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .recipe-price-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(45, 43, 42, 0.85);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .recipe-content {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .recipe-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 8px;
        }

        .recipe-desc {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 16px;
            flex: 1;
        }

        .chef-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chef-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }

        .btn-order {
            display: block;
            width: 100%;
            padding: 12px;
            background: #fff3ec;
            color: var(--primary);
            text-align: center;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.95rem;
            text-decoration: none;
            border: 1px solid rgba(180, 75, 41, 0.2);
            margin-top: 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-order:hover {
            background: var(--primary);
            color: #fff;
        }
        .btn-order.disabled {
            background: #e2d9cd;
            color: #777;
            border-color: #ccc;
            cursor: not-allowed;
        }

        /* MODÁLNÍ OKNO PROFILU A OBJEDNÁVKY */
        #orderModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 15px;
            box-sizing: border-box;
        }

        .modal-card {
            background: #fff;
            width: 100%;
            max-width: 550px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            animation: modalPopup 0.3s ease;
        }

        @keyframes modalPopup {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .modal-header-img {
            height: 220px;
            position: relative;
        }

        .modal-header-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .modal-body {
            padding: 25px;
            overflow-y: auto;
        }

        .modal-chef-box {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #faf7f2;
            padding: 14px;
            border-radius: 12px;
            margin: 15px 0;
            border: 1px solid var(--border-color);
        }

        .modal-chef-avatar {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary);
        }

        .portions-selector-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff3ec;
            padding: 14px 18px;
            border-radius: 12px;
            margin: 20px 0;
            border: 1px solid rgba(180, 75, 41, 0.2);
        }

        .portions-selector-row input {
            width: 70px;
            padding: 8px;
            font-size: 1.1rem;
            text-align: center;
            font-weight: 700;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .btn-confirm-order {
            width: 100%;
            padding: 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-confirm-order:hover {
            background: var(--primary-hover);
        }

        .btn-close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        #mapViewContainer {
            display: none;
            background: #fff;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            padding: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.04);
        }

        #largeMap {
            width: 100%;
            height: 550px;
            border-radius: 12px;
            z-index: 10;
        }

        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 50px 20px;
            color: var(--text-muted);
            background: #fff;
            border-radius: 16px;
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <a href="index.html">
            <img src="logo.png" alt="Papanito" class="logo-img">
        </a>
        <div class="nav-links">
            <a href="index.html">Domů</a>
            <a href="galerie.html" class="active">Co se vaří</a>
            <a href="uvarit.html">Zveřejnit jídlo</a>
            <a href="prihlaseni.html">Přihlásit se</a>
        </div>
    </nav>

    <div class="gallery-container">
        <div class="gallery-header">
            <h1>Aktuální nabídka u sousedů</h1>
            <p>Vyberte dny, které vás zajímají, zvolte způsob předání a objednejte si u sousedů.</p>
        </div>

        <div class="filter-panel">
            <div class="filter-row-days">
                <label>Filtrovat dny:</label>
                <div id="dayCheckboxesContainer" style="display: flex; flex-wrap: wrap; gap: 8px;"></div>
                <button type="button" class="btn-all-days" onclick="checkAllDays()">Všechny dny</button>
            </div>

            <div class="filter-row-bottom">
                <div class="filter-group">
                    <label>Způsob předání:</label>
                    <select id="servingFilter" class="filter-select" onchange="applyFilters()">
                        <option value="all">Všechny způsoby</option>
                        <option value="stul">U stolu</option>
                        <option value="krabicka">Do krabičky</option>
                    </select>
                </div>

                <div class="filter-group">
                    <button id="toggleViewBtn" class="btn-view-toggle" onclick="toggleViewMode()">
                        📍 Zobrazit velkou mapu
                    </button>
                </div>
            </div>
        </div>

        <div id="cardsViewContainer">
            <div id="recipesGrid" class="recipes-grid"></div>
        </div>

        <div id="mapViewContainer">
            <h2 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 15px;">Mapa výdeje jídla</h2>
            <div id="largeMap"></div>
        </div>
    </div>

    <!-- MODÁLNÍ OKNO PRO OBJEDNÁVKU A PROFIL KUCHAŘE -->
    <div id="orderModal">
        <div class="modal-card">
            <div class="modal-header-img">
                <button class="btn-close-modal" onclick="closeOrderModal()">×</button>
                <img id="modalFoodImg" src="" alt="Jídlo">
                <div id="modalPriceTag" class="recipe-price-tag">0 Kč</div>
            </div>
            <div class="modal-body">
                <h2 id="modalFoodTitle" style="font-size: 1.5rem; margin-bottom: 8px; color: var(--text-main);">Název</h2>
                <p id="modalFoodDesc" style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 15px;"></p>
                <div style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px;">📍 <span id="modalFoodAddress">Adresa</span></div>
                <div style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px;">🕒 <span id="modalFoodTime">Čas</span></div>

                <!-- Profil kuchaře, fotka, jméno, hodnocení a recenze -->
                <div class="modal-chef-box">
                    <img id="modalChefAvatar" src="" class="modal-chef-avatar" alt="Kuchař">
                    <div style="flex: 1;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <strong id="modalChefName" style="font-size: 1.05rem;">Jméno kuchaře</strong>
                            <span id="modalChefRating" style="color: #e67e22; font-weight: 700;">5.0 ★</span>
                        </div>
                        <p id="modalChefBio" style="font-size: 0.82rem; color: var(--text-muted); margin: 4px 0 0 0;">O kuchaři...</p>
                    </div>
                </div>

                <!-- Výběr porcí -->
                <div class="portions-selector-row">
                    <div>
                        <strong style="display: block; font-size: 0.95rem;">Vyberte počet porcí:</strong>
                        <span id="modalRemainingText" style="font-size: 0.82rem; color: var(--primary); font-weight: 600;">Zbývá X porcí</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <button type="button" onclick="changeModalPortions(-1)" style="width: 32px; height: 32px; font-weight: 700; border-radius: 6px; border: 1px solid var(--border-color); background: white; cursor: pointer;">-</button>
                        <input type="number" id="modalPortionsInput" value="1" min="1" max="1" onchange="validateModalPortions()">
                        <button type="button" onclick="changeModalPortions(1)" style="width: 32px; height: 32px; font-weight: 700; border-radius: 6px; border: 1px solid var(--border-color); background: white; cursor: pointer;">+</button>
                    </div>
                </div>

                <button type="button" class="btn-confirm-order" onclick="confirmOrder()">Potvrdit objednávku</button>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const defaultRecipes = [
            {
                id: 1,
                title: "Domácí křupavý bramborák se zelím",
                description: "Poctivý staročeský bramborák s uzeným masem.",
                dateFrom: "2026-08-04",
                dateTo: "2026-08-15",
                servingTime: "12:00 - 14:00",
                servingType: "U stolu",
                totalPortions: 6,
                orderedPortions: 2,
                price: 130,
                address: "Karlínské náměstí, Praha",
                lat: 50.0915,
                lng: 14.4532,
                chefName: "Marie Kovářová",
                chefRating: "4.9 ★",
                chefBio: "Vařím s láskou pro sousedy již 3 roky. Využívám čerstvé suroviny z trhu.",
                chefAvatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100",
                foodImage: "https://images.unsplash.com/photo-1543339308-43e59d6b73a6?w=400"
            }
        ];

        let mapInstance = null;
        let markersLayer = null;
        let isMapView = false;
        let currentSelectedRecipeId = null;

        window.addEventListener('DOMContentLoaded', () => {
            initDaysFilter();
            renderRecipes();
        });

        function initDaysFilter() {
            const container = document.getElementById('dayCheckboxesContainer');
            const today = new Date();
            for (let i = 0; i < 7; i++) {
                const d = new Date(today);
                d.setDate(today.getDate() + i);
                const dateStr = d.toISOString().split('T')[0];
                const label = document.createElement('label');
                label.className = 'day-checkbox-label';
                label.innerHTML = `<input type="checkbox" value="${dateStr}" checked onchange="applyFilters()"> ${d.getDate()}.${d.getMonth()+1}.`;
                container.appendChild(label);
            }
        }

        function checkAllDays() {
            document.querySelectorAll('#dayCheckboxesContainer input[type="checkbox"]').forEach(cb => cb.checked = true);
            applyFilters();
        }

        function getAllRecipes() {
            let recipes = JSON.parse(localStorage.getItem('papanito_active_recipes') || '[]');
            if (!recipes || recipes.length === 0) {
                recipes = defaultRecipes;
                localStorage.setItem('papanito_active_recipes', JSON.stringify(recipes));
            }
            return recipes;
        }

        function getFilteredRecipes() {
            const recipes = getAllRecipes();
            const servingVal = document.getElementById('servingFilter').value;
            const checkedDays = Array.from(document.querySelectorAll('#dayCheckboxesContainer input[type="checkbox"]:checked')).map(cb => cb.value);

            return recipes.filter(recipe => {
                const type = (recipe.servingType || "").toLowerCase();
                let matchesServing = true;
                if (servingVal === 'stul') matchesServing = type.includes('stolu') || type.includes('obě');
                else if (servingVal === 'krabicka') matchesServing = type.includes('krabič') || type.includes('obě');
                if (!matchesServing) return false;

                if (checkedDays.length === 0) return false;
                return checkedDays.some(day => day >= (recipe.dateFrom || "2026-08-04") && day <= (recipe.dateTo || "2026-08-15"));
            });
        }

        function renderRecipes() {
            const grid = document.getElementById('recipesGrid');
            const filtered = getFilteredRecipes();

            if (filtered.length === 0) {
                grid.innerHTML = `<div class="no-results">Žádné nabídky neodpovídají zvoleným filtrům.</div>`;
                return;
            }

            grid.innerHTML = filtered.map(r => {
                const total = r.totalPortions || 4;
                const ordered = r.orderedPortions || 0;
                const remaining = total - ordered;
                const isSoldOut = remaining <= 0;

                return `
                    <div class="recipe-card ${isSoldOut ? 'sold-out' : ''}">
                        <div class="recipe-img-container">
                            ${isSoldOut ? '<div class="sold-out-badge">VYPRODÁNO</div>' : ''}
                            <img src="${r.foodImage}" alt="${r.title}" class="recipe-img">
                            <div class="recipe-price-tag">${r.price} Kč</div>
                        </div>
                        <div class="recipe-content">
                            <h3 class="recipe-title">${r.title}</h3>
                            <p class="recipe-desc">${r.description || ''}</p>
                            
                            <!-- Rychlý přehled prodejů a porcí -->
                            <div style="background: ${isSoldOut ? '#e5e0d8' : '#faf7f2'}; border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
                                <span>🔥 Ostatní koupili: <strong>${ordered}x</strong></span>
                                <span style="font-weight: 700; color: ${isSoldOut ? '#e74c3c' : 'var(--primary)'};">${isSoldOut ? 'Vyprodáno' : `Zbývá: ${remaining} porcí`}</span>
                            </div>

                            <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px;">📍 ${r.address}</div>
                            <div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; padding-top: 12px; border-top: 1px solid #f2ede4;">
                                <span>🕒 ${r.servingTime}</span>
                                <span style="font-weight: 600; color: var(--primary);">🍽️ ${r.servingType}</span>
                            </div>
                            <div class="chef-info">
                                <img src="${r.chefAvatar || 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100'}" class="chef-avatar" alt="Kuchař">
                                <div>
                                    <div style="font-weight: 600; font-size: 0.9rem;">${r.chefName || 'Sousední kuchař'}</div>
                                    <div style="font-size: 0.8rem; color: #e67e22; font-weight: 600;">${r.chefRating || '5.0 ★'}</div>
                                </div>
                            </div>
                            <button type="button" onclick="openOrderModal(${r.id})" class="btn-order ${isSoldOut ? 'disabled' : ''}">
                                ${isSoldOut ? 'Vyprodáno (Zesednuto)' : 'Objednat porci'}
                            </button>
                        </div>
                    </div>
                `;
            }).join('');

            if (isMapView) updateMapMarkers(filtered);
        }

        function applyFilters() { renderRecipes(); }

        function toggleViewMode() {
            isMapView = !isMapView;
            document.getElementById('cardsViewContainer').style.display = isMapView ? 'none' : 'block';
            document.getElementById('mapViewContainer').style.display = isMapView ? 'block' : 'none';
            document.getElementById('toggleViewBtn').innerHTML = isMapView ? '📋 Zobrazit karty' : '📍 Zobrazit velkou mapu';
            if (isMapView) initLargeMap();
        }

        function initLargeMap() {
            if (!mapInstance) {
                mapInstance = L.map('largeMap').setView([50.0915, 14.4532], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(mapInstance);
                markersLayer = L.layerGroup().addTo(mapInstance);
            }
            updateMapMarkers(getFilteredRecipes());
            setTimeout(() => { mapInstance.invalidateSize(); }, 200);
        }

        function updateMapMarkers(recipes) {
            if (!markersLayer) return;
            markersLayer.clearLayers();

            recipes.forEach(r => {
                const lat = r.lat || 50.0915;
                const lng = r.lng || 14.4532;
                const total = r.totalPortions || 4;
                const ordered = r.orderedPortions || 0;
                const remaining = total - ordered;
                const isSoldOut = remaining <= 0;

                const marker = L.marker([lat, lng]);
                marker.bindPopup(`
                    <div style="font-family: 'Poppins', sans-serif; max-width: 230px; padding: 4px;">
                        <img src="${r.foodImage}" style="width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 6px;">
                        <strong style="font-size: 0.95rem;">${r.title}</strong><br>
                        <div style="color: #b44b29; font-weight: 700; font-size: 1.05rem; margin: 4px 0;">${r.price} Kč</div>
                        <div style="font-size: 0.8rem; color: #666; font-weight: 600; margin-bottom: 4px;">${isSoldOut ? '🔴 VYPRODÁNO' : `🟢 Zbývá: ${remaining} porcí`}</div>
                        <div style="font-size: 0.8rem; color: #666; margin-bottom: 8px;">📍 ${r.address}</div>
                        <button onclick="openOrderModal(${r.id})" ${isSoldOut ? 'disabled style="background: #ccc; cursor: not-allowed;"' : ''} style="width: 100%; padding: 8px; background: #b44b29; color: white; border: none; border-radius: 6px; font-weight: 700; cursor: pointer;">
                            ${isSoldOut ? 'Vyprodáno' : 'Detail a objednat'}
                        </button>
                    </div>
                `);
                markersLayer.addLayer(marker);
            });
        }

        // PRÁCE S MODÁLNÍM OKNEM A OBJEDNÁVKAMI
        function openOrderModal(recipeId) {
            let recipes = getAllRecipes();
            let recipe = recipes.find(item => item.id === recipeId);
            if (!recipe) return;

            currentSelectedRecipeId = recipeId;
            const total = recipe.totalPortions || 4;
            const ordered = recipe.orderedPortions || 0;
            const remaining = total - ordered;

            if (remaining <= 0) {
                alert('Tento pokrm je již zcela vyprodán!');
                return;
            }

            document.getElementById('modalFoodImg').src = recipe.foodImage;
            document.getElementById('modalPriceTag').innerText = `${recipe.price} Kč / porce`;
            document.getElementById('modalFoodTitle').innerText = recipe.title;
            document.getElementById('modalFoodDesc').innerText = recipe.description || '';
            document.getElementById('modalFoodAddress').innerText = recipe.address;
            document.getElementById('modalFoodTime').innerText = recipe.servingTime;

            document.getElementById('modalChefAvatar').src = recipe.chefAvatar || "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100";
            document.getElementById('modalChefName').innerText = recipe.chefName || "Sousední kuchař";
            document.getElementById('modalChefRating').innerText = recipe.chefRating || "5.0 ★";
            document.getElementById('modalChefBio').innerText = recipe.chefBio || "Soused vášnivě peče a vaří s poctivými ingrediencemi.";

            const input = document.getElementById('modalPortionsInput');
            input.value = 1;
            input.max = remaining;
            document.getElementById('modalRemainingText').innerText = `Dostupných porcí k objednání: ${remaining}`;

            document.getElementById('orderModal').style.display = 'flex';
        }

        function closeOrderModal() {
            document.getElementById('orderModal').style.display = 'none';
            currentSelectedRecipeId = null;
        }

        function changeModalPortions(delta) {
            const input = document.getElementById('modalPortionsInput');
            let val = parseInt(input.value) || 1;
            val += delta;
            let max = parseInt(input.max) || 1;
            if (val < 1) val = 1;
            if (val > max) val = max;
            input.value = val;
        }

        function validateModalPortions() {
            const input = document.getElementById('modalPortionsInput');
            let val = parseInt(input.value) || 1;
            let max = parseInt(input.max) || 1;
            if (val < 1) input.value = 1;
            if (val > max) input.value = max;
        }

        function confirmOrder() {
            if (!currentSelectedRecipeId) return;
            const input = document.getElementById('modalPortionsInput');
            const requestedPortions = parseInt(input.value) || 1;

            let recipes = getAllRecipes();
            let recipeIndex = recipes.findIndex(item => item.id === currentSelectedRecipeId);
            if (recipeIndex === -1) return;

            let recipe = recipes[recipeIndex];
            recipe.totalPortions = recipe.totalPortions || 4;
            recipe.orderedPortions = (recipe.orderedPortions || 0) + requestedPortions;

            // Uložení zpět do localStorage
            localStorage.setItem('papanito_active_recipes', JSON.stringify(recipes));

            alert(`Úspěšně jste objednali ${requestedPortions} porci(í) pokrmu: ${recipe.title}!`);
            closeOrderModal();
            renderRecipes();
        }
    </script>
</body>
</html>
```[cite: 17]

---

### 4. `uvarit.html` (Upravená pro správné zadávání a ukládání porcí)
```html
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zveřejnit jídlo | Papanito</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styl.css">
    <style>
        .form-container {
            max-width: 800px;
            margin: 20px auto 60px auto;
            background: #fff;
            padding: 35px 45px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }

        .form-group {
            margin-bottom: 22px;
            position: relative;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-main);
            font-size: 0.9rem;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            box-sizing: border-box;
            background-color: #fff;
            color: var(--text-main);
            transition: all 0.2s ease;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(184, 75, 41, 0.12);
        }

        .suggestions-box {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 0 0 10px 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            z-index: 50;
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }

        .suggestion-item {
            padding: 10px 16px;
            cursor: pointer;
            font-size: 0.9rem;
            border-bottom: 1px solid #f2ede4;
        }

        .suggestion-item:hover {
            background-color: #fff3ec;
            color: var(--primary);
        }

        .time-wrapper-horizontal {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            background: #faf7f2;
            border: 1px solid var(--border-color);
            padding: 18px;
            border-radius: 14px;
        }

        .time-box-side {
            background: #ffffff;
            border: 1px solid var(--border-color);
            padding: 14px;
            border-radius: 10px;
        }

        .time-side-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f2ede4;
            padding-bottom: 6px;
        }

        .slider-row-compact {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .slider-row-compact:last-child {
            margin-bottom: 0;
        }

        .slider-row-compact label {
            width: 42px;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0 !important;
        }

        .slider-row-compact input[type="range"] {
            flex: 1;
            accent-color: var(--primary);
            cursor: pointer;
            height: 6px;
        }

        .slider-val-compact {
            width: 28px;
            text-align: right;
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text-main);
        }

        .form-row-triple {
            display: grid;
            grid-template-columns: 120px 125px 1fr;
            gap: 15px;
        }

        .form-row-address {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }

        .btn-publish-red {
            display: block;
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #ff3838, #e74c3c);
            color: #ffffff;
            font-size: 1.15rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            border: none;
            border-radius: 35px;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(231, 76, 60, 0.45);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            margin-top: 25px;
            text-align: center;
        }

        .btn-publish-red:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 14px 35px rgba(231, 76, 60, 0.65);
            background: linear-gradient(135deg, #ff4d4d, #c0392b);
        }

        @media(max-width: 768px) {
            .form-row-triple, .form-row-address, .time-wrapper-horizontal {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <a href="index.html">
            <img src="logo.png" alt="Papanito" class="logo-img" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=250';">
        </a>
        <div class="nav-links">
            <a href="index.html">Domů</a>
            <a href="galerie.html">Co se vaří</a>
            <a href="uvarit.html" class="active">Zveřejnit jídlo</a>
            <a href="prihlaseni.html">Přihlásit se</a>
        </div>
    </nav>

    <main class="container" style="padding: 0 5%;">
        <div class="form-container">
            <h1 style="margin-bottom: 6px; color: var(--text-main); font-size: 1.6rem;">Zveřejnit nabídku jídla</h1>
            <p style="color: var(--text-muted); margin-bottom: 25px; font-size: 0.95rem;">Zadejte kolik porcí máte k dispozici na den či týden a nabídněte vaření sousedům.</p>

            <div id="publishForm">
                <div class="form-group">
                    <label>Název jídla</label>
                    <input type="text" id="foodTitle" placeholder="např. Pizza Margherita, Svíčková..." autocomplete="off" oninput="handleFoodInput(this.value)">
                    <div id="foodSuggestions" class="suggestions-box"></div>
                </div>

                <div class="form-group">
                    <label>Popis jídla</label>
                    <textarea id="foodDesc" rows="3" placeholder="Napište co dobrého vaříte..."></textarea>
                </div>

                <div class="form-row-triple">
                    <div class="form-group">
                        <label>Celkem porcí</label>
                        <input type="number" id="portionsCount" value="6" min="1">
                    </div>

                    <div class="form-group">
                        <label>Cena/porce (Kč)</label>
                        <input type="number" id="foodPrice" value="140" min="0">
                    </div>

                    <div class="form-group">
                        <label>Způsob předání</label>
                        <select id="servingType">
                            <option value="U stolu">U stolu (přisednutí)</option>
                            <option value="Do krabičky">Do krabičky (s sebou)</option>
                            <option value="Obě možnosti">Obě možnosti</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>Čas výdeje (max. rozmezí 2 hodiny)</label>
                    <div class="time-wrapper-horizontal">
                        <div class="time-box-side">
                            <div class="time-side-title">
                                <span>Od</span>
                                <span id="labelTimeFrom" style="color: var(--primary);">12:00</span>
                            </div>
                            <div class="slider-row-compact">
                                <label>Hod:</label>
                                <input type="range" id="fromHour" min="0" max="23" value="12" oninput="updateTimes('from')">
                                <span id="valFromHour" class="slider-val-compact">12</span>
                            </div>
                            <div class="slider-row-compact">
                                <label>Min:</label>
                                <input type="range" id="fromMinute" min="0" max="55" step="5" value="0" oninput="updateTimes('from')">
                                <span id="valFromMinute" class="slider-val-compact">00</span>
                            </div>
                        </div>

                        <div class="time-box-side">
                            <div class="time-side-title">
                                <span>Do</span>
                                <span id="labelTimeTo" style="color: var(--primary);">14:00</span>
                            </div>
                            <div class="slider-row-compact">
                                <label>Hod:</label>
                                <input type="range" id="toHour" min="0" max="23" value="14" oninput="updateTimes('to')">
                                <span id="valToHour" class="slider-val-compact">14</span>
                            </div>
                            <div class="slider-row-compact">
                                <label>Min:</label>
                                <input type="range" id="toMinute" min="0" max="55" step="5" value="0" oninput="updateTimes('to')">
                                <span id="valToMinute" class="slider-val-compact">00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-row-address">
                    <div class="form-group">
                        <label>Adresa (zadejte ulici a město/obci)</label>
                        <input type="text" id="foodAddress" value="Karlínské náměstí, Praha" autocomplete="off" oninput="handleAddressInput(this.value)">
                        <div id="addressSuggestions" class="suggestions-box"></div>
                        <small id="addressStatus" style="color: #27ae60; font-weight: 600; display: block; margin-top: 6px;">📍 Adresa se automaticky spáruje s mapou</small>
                    </div>

                    <div class="form-group">
                        <label>Instrukce k nalezení</label>
                        <input type="text" id="foodInstructions" placeholder="3. patro, zvonek...">
                    </div>
                </div>

                <div class="form-group">
                    <label>Fotka jídla (vybrat z počítače / telefonu)</label>
                    <input type="file" id="foodImageFile" accept="image/*">
                </div>

                <button type="button" class="btn-publish-red" onclick="handlePublish()">
                    Zveřejnit nabídku
                </button>
            </div>
        </div>
    </main>

    <script>
        let selectedLat = 50.0915;
        let selectedLng = 14.4532;

        let addressTimeout = null;
        function handleAddressInput(query) {
            const box = document.getElementById('addressSuggestions');
            const status = document.getElementById('addressStatus');
            if (!query || query.trim().length < 3) {
                box.style.display = 'none';
                return;
            }

            clearTimeout(addressTimeout);
            addressTimeout = setTimeout(() => {
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=cz&limit=5`)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.length > 0) {
                            box.innerHTML = data.map(item => `
                                <div class="suggestion-item" onclick="selectAddressSuggestion('${item.display_name.replace(/'/g, "")}', ${item.lat}, ${item.lon})">
                                    📍 ${item.display_name}
                                </div>
                            `).join('');
                            box.style.display = 'block';
                            status.innerText = "📍 Vyberte adresu ze seznamu pro přesnou pozici";
                            status.style.color = "#e67e22";
                        } else {
                            box.style.display = 'none';
                        }
                    })
                    .catch(err => console.error(err));
            }, 350);
        }

        function selectAddressSuggestion(displayName, lat, lon) {
            document.getElementById('foodAddress').value = displayName;
            document.getElementById('addressSuggestions').style.display = 'none';
            selectedLat = parseFloat(lat);
            selectedLng = parseFloat(lon);
            const status = document.getElementById('addressStatus');
            status.innerText = "📍 Adresa úspěšně propojena s mapou";
            status.style.color = "#27ae60";
        }

        document.addEventListener('click', function(e) {
            if (!e.target.closest('#foodAddress') && !e.target.closest('#addressSuggestions')) {
                document.getElementById('addressSuggestions').style.display = 'none';
            }
        });

        const baseFoods = [            "Pizza Margherita", "Pizza Salami", "Pizza Quattro Formaggi", "Pizza Prosciutto", "Pizza Hawai", "Pizza Diavola",            "Svíčková na smetaně", "Domácí bramborák se zelím", "Hovězí guláš s knedlíkem", "Lasagne Bolognese",            "Kuřecí řízek s bramborovou kaší", "Rajská omáčka s hovězím", "Vepřo knedlo zelo", "Těstoviny Carbonara"        ];

        function handleFoodInput(query) {
            const box = document.getElementById('foodSuggestions');
            if (!query || query.trim().length === 0) {
                box.style.display = 'none';
                return;
            }
            const q = query.toLowerCase().trim();
            const matches = baseFoods.filter(item => item.toLowerCase().includes(q));
            if (matches.length > 0) {
                box.innerHTML = matches.map(m => `<div class="suggestion-item" onclick="document.getElementById('foodTitle').value='${m}'; document.getElementById('foodSuggestions').style.display='none';">${m}</div>`).join('');
                box.style.display = 'block';
            } else {
                box.style.display = 'none';
            }
        }

        function updateTimes(changedBy) {
            let fh = parseInt(document.getElementById('fromHour').value);
            let fm = parseInt(document.getElementById('fromMinute').value);
            let th = parseInt(document.getElementById('toHour').value);
            let tm = parseInt(document.getElementById('toMinute').value);

            let fromMins = fh * 60 + fm;
            let toMins = th * 60 + tm;

            if (toMins < fromMins) {
                toMins = fromMins;
                th = Math.floor(toMins / 60);
                tm = toMins % 60;
                document.getElementById('toHour').value = th;
                document.getElementById('toMinute').value = tm;
            }

            if (toMins - fromMins > 120) {
                toMins = fromMins + 120;
                th = Math.floor(toMins / 60);
                tm = toMins % 60;
                document.getElementById('toHour').value = th;
                document.getElementById('toMinute').value = tm;
            }

            const fhStr = String(fh).padStart(2, '0');
            const fmStr = String(fm).padStart(2, '0');
            const thStr = String(th).padStart(2, '0');
            const tmStr = String(tm).padStart(2, '0');

            document.getElementById('valFromHour').innerText = fhStr;
            document.getElementById('valFromMinute').innerText = fmStr;
            document.getElementById('valToHour').innerText = thStr;
            document.getElementById('valToMinute').innerText = tmStr;
            document.getElementById('labelTimeFrom').innerText = `${fhStr}:${fmStr}`;
            document.getElementById('labelTimeTo').innerText = `${thStr}:${tmStr}`;
        }

        function handlePublish() {
            const titleInput = document.getElementById('foodTitle');
            const descInput = document.getElementById('foodDesc');
            
            const title = titleInput.value.trim();
            const description = descInput.value.trim();
            const servingType = document.getElementById('servingType').value;
            const totalPortions = parseInt(document.getElementById('portionsCount').value) || 4;
            const price = parseInt(document.getElementById('foodPrice').value) || 0;
            const servingTime = `${document.getElementById('labelTimeFrom').innerText} - ${document.getElementById('labelTimeTo').innerText}`;
            const address = document.getElementById('foodAddress').value.trim();
            const fileInput = document.getElementById('foodImageFile');

            if (!title) {
                alert('Prosím zadejte název jídla.');
                titleInput.focus();
                return;
            }
            if (!description) {
                alert('Prosím zadejte popis jídla.');
                descInput.focus();
                return;
            }

            const finishPublishing = (imgUrl) => {
                const newRecipe = {
                    id: Date.now(),
                    title: title,
                    description: description,
                    dateFrom: new Date().toISOString().split('T')[0],
                    dateTo: new Date(Date.now() + 7*86400000).toISOString().split('T')[0],
                    servingTime: servingTime,
                    servingType: servingType,
                    totalPortions: totalPortions,
                    orderedPortions: 0,
                    price: price,
                    address: address || "Karlínské náměstí, Praha",
                    lat: selectedLat,
                    lng: selectedLng,
                    chefName: "Ilona Sousedská",
                    chefRating: "5.0 ★",
                    chefBio: "Jsem vášnivá kuchařka ze sousedství a vařím pro radost ostatních.",
                    chefAvatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100",
                    foodImage: imgUrl
                };

                try {
                    let existingRecipes = JSON.parse(localStorage.getItem('papanito_active_recipes') || '[]');
                    existingRecipes.unshift(newRecipe);
                    localStorage.setItem('papanito_active_recipes', JSON.stringify(existingRecipes));
                } catch (e) {
                    console.error("Chyba úložiště:", e);
                    newRecipe.foodImage = "https://images.unsplash.com/photo-1543339308-43e59d6b73a6?w=400";
                    let existingRecipes = JSON.parse(localStorage.getItem('papanito_active_recipes') || '[]');
                    existingRecipes.unshift(newRecipe);
                    localStorage.setItem('papanito_active_recipes', JSON.stringify(existingRecipes));
                }

                alert('Nabídka byla úspěšně zveřejněna!');
                window.location.href = 'galerie.html';
            };

            if (fileInput && fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        let width = img.width;
                        let height = img.height;
                        const maxDim = 800;
                        if (width > height && width > maxDim) {
                            height *= maxDim / width;
                            width = maxDim;
                        } else if (height > maxDim) {
                            width *= maxDim / height;
                            height = maxDim;
                        }
                        canvas.width = width;
                        canvas.height = height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, width, height);
                        
                        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
                        finishPublishing(compressedDataUrl);
                    };
                    img.onerror = function() {
                        finishPublishing(e.target.result);
                    };
                    img.src = e.target.result;
                };
                reader.onerror = function() {
                    finishPublishing("https://images.unsplash.com/photo-1543339308-43e59d6b73a6?w=400");
                };
                reader.readAsDataURL(fileInput.files[0]);
            } else {
                finishPublishing("https://images.unsplash.com/photo-1543339308-43e59d6b73a6?w=400");
            }
        }
    </script>
</body>
</html>
```[cite: 15]

---

### 5. `prihlaseni.html`
```html
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kompletní profil a ověření | Papanito</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Cropper.js CSS pro interaktivní ořez fotky -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
    <link rel="stylesheet" href="styl.css">
    <style>
        .auth-container {
            max-width: 650px;
            margin: 40px auto 60px auto;
            padding: 0 20px;
        }

        .auth-card {
            background: #fff;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        }

        .quick-login-box {
            background: #faf7f2;
            border: 1px solid var(--border-color);
            padding: 20px;
            border-radius: 14px;
            margin-bottom: 25px;
            text-align: center;
        }

        .quick-btn-row {
            display: flex;
            gap: 12px;
            margin-top: 12px;
        }

        .btn-quick {
            flex: 1;
            padding: 10px;
            border: 2px solid var(--primary);
            background: #fff;
            color: var(--primary);
            font-weight: 700;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.9rem;
        }

        .btn-quick:hover {
            background: var(--primary);
            color: #fff;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-main);
            font-size: 0.9rem;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 12px 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            box-sizing: border-box;
            background-color: #fff;
            color: var(--text-main);
        }

        .form-group input:focus, .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(184, 75, 41, 0.12);
        }

        .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f2ede4;
        }

        .profile-avatar-wrapper {
            position: relative;
            cursor: pointer;
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary);
        }

        .avatar-edit-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .badge-role {
            display: inline-block;
            background: #fff3ec;
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.8rem;
            margin-top: 5px;
        }

        .verification-box {
            background: #f4fbf7;
            border: 1px solid #d1fae5;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .verification-box.unverified {
            background: #fffdf4;
            border-color: #fef3c7;
        }

        .btn-verify {
            background: #10b981;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .btn-verify:hover {
            background: #059669;
        }

        /* Modální okno pro ořez fotky */
        #cropModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.75);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .crop-content {
            background: white;
            padding: 25px;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        .img-container {
            max-height: 350px;
            margin-bottom: 20px;
            overflow: hidden;
            background: #000;
            border-radius: 10px;
        }

        .img-container img {
            max-width: 100%;
        }

        .btn-logout {
            background: #e74c3c !important;
            margin-top: 15px;
        }
        .btn-logout:hover {
            background: #c0392b !important;
        }
    </style>
</head>
<body>

    <!-- Horní navigace -->
    <nav class="navbar">
        <a href="index.html">
            <img src="logo.png" alt="Papanito" class="logo-img" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=250';">
        </a>
        <div class="nav-links">
            <a href="index.html">Domů</a>
            <a href="galerie.html">Co se vaří</a>
            <a href="uvarit.html">Zveřejnit jídlo</a>
            <a href="prihlaseni.html" class="active">Přihlásit se</a>
        </div>
    </nav>

    <main class="auth-container">
        
        <!-- PŘIHLAŠOVACÍ FORMULÁŘ -->
        <div id="loginSection" class="auth-card">
            <h1 style="font-size: 1.8rem; margin-bottom: 8px; text-align: center;">Vítejte v Papanitu</h1>
            <p style="color: var(--text-muted); margin-bottom: 25px; text-align: center; font-size: 0.95rem;">Přihlaste se ke svému účtu nebo zvolte testovací profil</p>
            
            <div class="quick-login-box">
                <span style="font-size: 0.85rem; font-weight: 700; color: var(--text-main);">⚡ Rychlý vstup do předpřipravených profilů:</span>
                <div class="quick-btn-row">
                    <button type="button" class="btn-quick" onclick="quickLogin('kuchar')">🧑‍🍳 Kuchař</button>
                    <button type="button" class="btn-quick" onclick="quickLogin('zakaznik')">👤 Zákazník</button>
                </div>
            </div>

            <form onsubmit="handleLogin(event)">
                <div class="form-group">
                    <label>E-mailová adresa</label>
                    <input type="email" id="loginEmail" placeholder="vas@email.cz" required>
                </div>
                <div class="form-group">
                    <label>Heslo</label>
                    <input type="password" id="loginPassword" placeholder="••••••••" required>
                </div>
                <button type="submit" class="btn-primary" style="width: 100%; padding: 15px; border-radius: 12px; margin-top: 10px; border: none; cursor: pointer; font-size: 1rem; background: var(--primary); color: white; font-weight: 700;">Přihlásit se</button>
            </form>
        </div>

        <!-- EDITOVATELNÝ PROFIL -->
        <div id="profileSection" class="auth-card" style="display: none;">
            <div class="profile-header">
                <div class="profile-avatar-wrapper" onclick="document.getElementById('photoInput').click()" title="Klikněte pro nahrání nové fotky">
                    <img id="profAvatar" src="" alt="Avatar" class="profile-avatar">
                    <div class="avatar-edit-badge">📷</div>
                </div>
                <div>
                    <h1 id="profTitleName" style="font-size: 1.5rem; margin-bottom: 2px;">Jméno</h1>
                    <span id="profRoleBadge" class="badge-role">Role</span>
                </div>
            </div>

            <input type="file" id="photoInput" accept="image/*" style="display: none;" onchange="initCropperModal(event)">

            <div id="verificationBox" class="verification-box">
                <div>
                    <strong id="verifyStatusTitle" style="font-size: 0.95rem; display: block;">Ověření totožnosti (BankID)</strong>
                    <span id="verifyStatusText" style="font-size: 0.85rem; color: #047857;">Účet je plně ověřený</span>
                </div>
                <button type="button" id="verifyBtn" class="btn-verify" onclick="startVerification()" style="display: none;">Ověřit přes BankID</button>
            </div>

            <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: var(--text-main);">✏️ Úprava osobních údajů</h3>
            
            <form onsubmit="handleSaveProfile(event)">
                <div class="form-group">
                    <label>Celé jméno</label>
                    <input type="text" id="editName" required>
                </div>

                <div class="form-group">
                    <label>E-mail</label>
                    <input type="email" id="editEmail" required>
                </div>

                <div class="form-group">
                    <label>Rok narození</label>
                    <input type="number" id="editBirthYear" min="1920" max="2010" placeholder="např. 1990" required>
                </div>

                <div class="form-group">
                    <label>O mně / Kuchařské zkušenosti</label>
                    <textarea id="editBio" rows="3"></textarea>
                </div>

                <button type="submit" class="btn-primary" style="width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; background: var(--primary); color: white; margin-bottom: 10px;">Uložit změny profilu</button>
                <button type="button" class="btn-primary btn-logout" onclick="handleLogout()" style="width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; color: white;">Odhlásit se</button>
            </form>
        </div>

    </main>

    <div id="cropModal">
        <div class="crop-content">
            <h3 style="margin-bottom: 10px; font-size: 1.2rem;">Upravit výřez obličeje</h3>
            <p style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 15px;">Přetahujte fotku prstem nebo myší a přibližte ji tak, aby byl vidět pouze obličej.</p>
            <div class="img-container">
                <img id="imageToCrop" src="">
            </div>
            <div style="display: flex; gap: 10px;">
                <button type="button" class="btn-primary" onclick="saveCroppedImage()" style="flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; background: var(--primary); color: white;">Oříznout a uložit</button>
                <button type="button" onclick="closeCropModal()" style="flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border-color); background: #fff; cursor: pointer; font-weight: 600;">Zrušit</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
    <script>
        let cropper = null;

        const defaultProfiles = {
            kuchar: {
                role: "kuchar",
                roleTitle: "Kuchař jídla 🧑‍🍳",
                email: "kuchar@papanito.cz",
                password: "heslo123",
                name: "Pavel Novák",
                birthYear: 1986,
                verified: true,
                bio: "Miluji poctivou českou kuchyni, pečení masa a vaření pro své sousedy v Karlíně.",
                avatar: "https://images.unsplash.com/photo-1556157382-97eda2d62296?w=300"
            },
            zakaznik: {
                role: "zakaznik",
                roleTitle: "Zákazník / Klient 👤",
                email: "zakaznik@papanito.cz",
                password: "heslo123",
                name: "Jana Horáková",
                birthYear: 1995,
                verified: false,
                bio: "Ráda si pochutnám na domácím jídle od sousedů a oceňuji skvělou atmosféru u stolu.",
                avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300"
            }
        };

        function getProfiles() {
            let saved = localStorage.getItem('papanito_users_v3');
            if (!saved) {
                localStorage.setItem('papanito_users_v3', JSON.stringify(defaultProfiles));
                return defaultProfiles;
            }
            return JSON.parse(saved);
        }

        window.addEventListener('DOMContentLoaded', () => {
            checkAuthStatus();
        });

        function quickLogin(roleKey) {
            let profiles = getProfiles();
            let user = profiles[roleKey];
            document.getElementById('loginEmail').value = user.email;
            document.getElementById('loginPassword').value = user.password;
            localStorage.setItem('papanito_logged_user', roleKey);
            checkAuthStatus();
        }

        function handleLogin(e) {
            e.preventDefault();
            const email = document.getElementById('loginEmail').value.trim();
            const pass = document.getElementById('loginPassword').value.trim();

            let profiles = getProfiles();
            let foundKey = null;

            for (let key in profiles) {
                if (profiles[key].email === email && profiles[key].password === pass) {
                    foundKey = key;
                    break;
                }
            }

            if (foundKey) {
                localStorage.setItem('papanito_logged_user', foundKey);
                checkAuthStatus();
            } else {
                alert('Nesprávný e-mail nebo heslo! Vyzkoušejte tlačítka rychlého přihlášení nahoře.');
            }
        }

        function checkAuthStatus() {
            const loggedKey = localStorage.getItem('papanito_logged_user');
            const loginSection = document.getElementById('loginSection');
            const profileSection = document.getElementById('profileSection');

            if (loggedKey) {
                let profiles = getProfiles();
                let user = profiles[loggedKey];

                document.getElementById('profAvatar').src = user.avatar;
                document.getElementById('profTitleName').innerText = user.name;
                document.getElementById('profRoleBadge').innerText = user.roleTitle;

                document.getElementById('editName').value = user.name;
                document.getElementById('editEmail').value = user.email;
                document.getElementById('editBirthYear').value = user.birthYear || '';
                document.getElementById('editBio').value = user.bio;

                updateVerificationUI(user.verified);

                loginSection.style.display = 'none';
                profileSection.style.display = 'block';
            } else {
                loginSection.style.display = 'block';
                profileSection.style.display = 'none';
            }
        }

        function updateVerificationUI(isVerified) {
            const box = document.getElementById('verificationBox');
            const title = document.getElementById('verifyStatusTitle');
            const text = document.getElementById('verifyStatusText');
            const btn = document.getElementById('verifyBtn');

            if (isVerified) {
                box.className = 'verification-box';
                title.innerText = 'Ověření totožnosti (BankID) ✅';
                text.innerText = 'Váš účet je úspěšně ověřen.';
                text.style.color = '#047857';
                btn.style.display = 'none';
            } else {
                box.className = 'verification-box unverified';
                title.innerText = 'Ověření totožnosti (BankID) ⚠️';
                text.innerText = 'Účet ještě není ověřený. Ověřte se pro větší důvěru.';
                text.style.color = '#b45309';
                btn.style.display = 'inline-block';
            }
        }

        function startVerification() {
            if (confirm('Spustit zabezpečené ověření totožnosti přes BankID?')) {
                const loggedKey = localStorage.getItem('papanito_logged_user');
                let profiles = getProfiles();
                profiles[loggedKey].verified = true;
                localStorage.setItem('papanito_users_v3', JSON.stringify(profiles));
                alert('Účet byl úspěšně ověřen!');
                checkAuthStatus();
            }
        }

        function initCropperModal(e) {
            const files = e.target.files;
            if (files && files.length > 0) {
                const file = files[0];
                const reader = new FileReader();
                reader.onload = function(event) {
                    const imageElement = document.getElementById('imageToCrop');
                    imageElement.src = event.target.result;
                    document.getElementById('cropModal').style.display = 'flex';

                    if (cropper) {
                        cropper.destroy();
                    }
                    
                    cropper = new Cropper(imageElement, {
                        aspectRatio: 1,
                        viewMode: 1,
                        dragMode: 'move',
                        autoCropArea: 0.9,
                        restore: false,
                        guides: false,
                        center: true,
                        highlight: false,
                        cropBoxMovable: true,
                        cropBoxResizable: true,
                    });
                };
                reader.readAsDataURL(file);
            }
        }

        function closeCropModal() {
            document.getElementById('cropModal').style.display = 'none';
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
            document.getElementById('photoInput').value = '';
        }

        function saveCroppedImage() {
            if (!cropper) return;
            
            const canvas = cropper.getCroppedCanvas({
                width: 300,
                height: 300
            });
            const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.85);

            const loggedKey = localStorage.getItem('papanito_logged_user');
            let profiles = getProfiles();
            profiles[loggedKey].avatar = croppedDataUrl;
            localStorage.setItem('papanito_users_v3', JSON.stringify(profiles));

            document.getElementById('profAvatar').src = croppedDataUrl;
            closeCropModal();
            alert('Fotka byla úspěšně upravena a uložena!');
        }

        function handleSaveProfile(e) {
            e.preventDefault();
            const loggedKey = localStorage.getItem('papanito_logged_user');
            if (!loggedKey) return;

            let profiles = getProfiles();
            profiles[loggedKey].name = document.getElementById('editName').value;
            profiles[loggedKey].email = document.getElementById('editEmail').value;
            profiles[loggedKey].birthYear = parseInt(document.getElementById('editBirthYear').value) || 2000;
            profiles[loggedKey].bio = document.getElementById('editBio').value;

            localStorage.setItem('papanito_users_v3', JSON.stringify(profiles));
            alert('Změny profilu byly úspěšně uloženy!');
            checkAuthStatus();
        }

        function handleLogout() {
            localStorage.removeItem('papanito_logged_user');
            checkAuthStatus();
        }
    </script>
</body>
</html>
```[cite: 13]