summaryrefslogtreecommitdiff
path: root/index.php
diff options
context:
space:
mode:
authorhorus2026-01-01 23:19:05 +0100
committerhorus2026-01-01 23:19:05 +0100
commit746bd05d648780cff2dc476b0522619b3f9d89aa (patch)
tree5c2d0b296bb58e892dd4e5d62fb53f69bb016e34 /index.php
downloadSavoy-746bd05d648780cff2dc476b0522619b3f9d89aa.tar.gz
init
Diffstat (limited to 'index.php')
-rw-r--r--index.php753
1 files changed, 753 insertions, 0 deletions
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..e51ad61
--- /dev/null
+++ b/index.php
@@ -0,0 +1,753 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Savoy Cocktail Database</title>
+ <!-- Bootstrap 4 CDN -->
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+ <link rel="stylesheet" href="dark-mode.css">
+ <style>
+ .cocktail-card { transition: all 0.3s; }
+ .cocktail-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
+ .ingredient-badge { font-size: 0.8em; margin: 2px; }
+ .search-result { min-height: 100px; }
+.zutaten-preview {
+ max-height: 60px;
+ overflow: hidden;
+}
+.ingredient-badge {
+ font-size: 0.75em;
+ padding: 0.4em 0.6em;
+}
+
+/* Bootstrap 4: Gap zwischen Suchfeldern */
+.card-body .row > [class*="col-"] {
+ padding-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+ .card-body .row > [class*="col-md"] {
+ padding-bottom: 1rem;
+ }
+}
+.zutat-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.5rem;
+ padding: 0.25rem 0;
+ border-bottom: 1px solid #eee;
+}
+.zutat-item:last-child { border-bottom: none; }
+.zutat-item strong {
+ min-width: 70px;
+ color: #ffc107;
+ font-size: 0.95rem;
+}
+/* Badge + zutat_de PERFECT getrennt */
+.ingredient-badge {
+ font-size: 0.85rem !important;
+ padding: 0.45em 0.75em !important;
+ margin-right: 0.75rem !important;
+ font-weight: 600 !important;
+ min-width: 75px;
+ text-align: center;
+}
+
+.zutat-hilfe {
+ font-size: 0.88rem !important;
+ color: #adb5bd !important; /* Hellgrau */
+ font-style: italic;
+ padding-left: 0.25rem;
+ border-left: 2px solid #ffc107;
+ margin-left: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ background: rgba(255,193,7,0.1);
+ border-radius: 4px;
+}
+
+/* Hover-Effekt */
+.zutat-item:hover .zutat-hilfe {
+ color: #ffc107 !important;
+ background: rgba(255,193,7,0.2);
+}
+
+.zutat {
+ color: #000;
+}
+.dark-mode .zutat {
+ color: #ffffff !important;
+}
+.zutat-muted {
+ color: #cccccc;
+}
+.dark-mode .zutat-muted {
+ color: #6c757d !important;
+}
+
+/* Dark Mode Button */
+body.dark-mode .mode-btn {
+ border: 2px solid #ffffff !important;
+ color: #ffffff !important;
+ background: rgba(0,0,0,0.3) !important;
+}
+
+body.dark-mode .mode-btn:hover {
+ background: rgba(255,255,255,0.1) !important;
+}
+
+/* Light Mode Button */
+body:not(.dark-mode) .mode-btn {
+ border: 2px solid #212529 !important;
+ color: #212529 !important;
+ background: rgba(248,249,250,0.9) !important;
+}
+
+body:not(.dark-mode) .mode-btn:hover {
+ background: rgba(33,37,41,0.1) !important;
+}
+
+
+ </style>
+</head>
+<body class="dark-mode">
+ <div class="container-fluid py-4">
+ <!-- Header -->
+ <div class="row mb-5">
+ <div class="col-12 text-center">
+ <h1 class="display-4 mb-3"><i class="fas fa-cocktail text-warning"></i> Savoy Cocktail Book</h1>
+ <p class="lead text-muted">Die klassische Cocktail-Bibel von Harry Craddock (1930)</p>
+ </div>
+ </div>
+
+<!-- Toggle Button (oben rechts) -->
+<div id="themeToggle" class="position-fixed" style="top: 20px; right: 20px; z-index: 9999;">
+ <button id="darkModeBtn" class="mode-btn btn btn-sm btn-outline-light rounded-circle p-2 shadow">
+ <i class="fas fa-sun"></i>
+ </button>
+</div
+
+ <!-- Suchformular -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="card shadow">
+ <div class="card-body p-3 p-md-4">
+ <div class="row g-2 g-md-3">
+ <div class="col-md-3 col-12">
+ <div class="input-group">
+ <div class="input-group-prepend">
+ <span class="input-group-text"><i class="fas fa-search"></i></span>
+ </div>
+ <input type="text" class="form-control form-control-lg" id="searchName" placeholder="Cocktail suchen... (z.B. Martini, Daiquiri)">
+ </div>
+ </div>
+ <div class="col-md-3 col-12">
+ <div class="input-group">
+ <div class="input-group-prepend">
+ <span class="input-group-text"><i class="fas fa-utensils"></i></span>
+ </div>
+ <input type="text" class="form-control form-control-lg" id="searchZutaten"
+ placeholder="Zutaten (z.B. Gin Rum Zitrone)">
+ <div class="input-group-append">
+ <span class="input-group-text"><small>UND</small></span>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-2 col-12">
+ <select class="form-control form-control-lg" id="searchKategorie">
+ <option value="">Alle Kategorien</option>
+ <option value="Gin">Gin</option>
+ <option value="Rum">Rum</option>
+ <option value="Whisky">Whisky</option>
+ <option value="Bitter">Bitter</option>
+ <option value="Fruchtsaft">Fruchtsaft</option>
+ <option value="Kräuterlikör">Kräuterlikör</option>
+ </select>
+ </div>
+ <div class="col-md-2 col-12">
+ <input type="number" class="form-control form-control-lg" id="searchSeite" placeholder="Seite" min="1" max="300">
+ </div>
+ <div class="col-md-2 col-6 col-sm-4">
+ <button class="btn btn-warning btn-lg btn-block" onclick="searchCocktails()">
+ <i class="fas fa-search"></i> Suchen
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Filter-Ergebnisse -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex justify-content-between align-items-center">
+ <h4 id="resultsTitle" class="mb-0"><i class="fas fa-list"></i> Alle Cocktails</h4>
+ <span id="resultsCount" class="badge badge-secondary">0 Ergebnisse</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Ergebnisse -->
+ <div class="row" id="cocktailResults">
+ <div class="col-12 text-center py-5">
+ <div class="spinner-border text-warning" role="status">
+ <span class="sr-only">Laden...</span>
+ </div>
+ <p class="mt-3 text-muted">Cocktails werden geladen...</p>
+ </div>
+ </div>
+
+ <!-- Detail-Modal -->
+<!--
+ <div class="modal fade" id="cocktailModal" tabindex="-1">
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header bg-warning text-dark">
+ <h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5>
+ <button type="button" class="close" data-dismiss="modal">
+ <span>&times;</span>
+ </button>
+ </div>
+ <div class="modal-body" id="modalBody">
+ <div class="form-group mb-3">
+ <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+ <label class="btn btn-outline-primary active ml-view">
+ <input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml
+ </label>
+ <label class="btn btn-outline-secondary original-view">
+ <input type="radio" name="zutatenView" id="originalView"> Original
+ </label>
+ </div>
+ </div>
+
+ <div id="modalZutaten" class="zutaten-list"></div>
+
+ ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p>${cocktail.rezept}</p>` : ''}
+ </div>
+ </div>
+ </div>
+ </div>
+-->
+
+ <!-- Detail-Modal -->
+ <div class="modal fade" id="cocktailModal" tabindex="-1">
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header bg-warning text-dark">
+ <h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5>
+ <button type="button" class="close" data-dismiss="modal">
+ <span>&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <!-- TOGGLE (PERFEKT!) -->
+ <div class="form-group mb-3">
+ <!--
+ <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+ <label class="btn btn-outline-primary active ml-view">
+ <input type="radio" name="zutatenView" id="mlView" checked>
+ <i class="fas fa-tint"></i> ml
+ </label>
+ <label class="btn btn-outline-secondary original-view">
+ <input type="radio" name="zutatenView" id="originalView"> Original
+ </label>
+ </div>
+ -->
+ <div class="btn-group w-100 mb-3" id="zutatenToggle">
+ <button type="button" class="btn btn-outline-warning ml-view w-50" data-view="ml">
+ <i class="fas fa-tint"></i> ml (modern)
+ </button>
+ <button type="button" class="btn btn-outline-warning original-view w-50" data-view="original">
+ <i class="fas fa-balance-scale"></i>
+ <i class="fas fa-wine-glass"></i>
+ Parts & Glasses (original)
+ </button>
+ </div>
+
+ </div>
+
+ <!-- **Container zum Füllen (PERFEKT!)** -->
+ <div id="modalInfo" class="mb-3"></div>
+ <h6>Zutaten:</h6>
+ <div id="modalZutaten" class="zutaten-list mb-4"></div>
+ <div id="modalRezept"></div> <!-- ← Rezept hier! -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+<!-- Bootstrap 4 + VOLLSTÄNDIGES jQuery (NICHT slim!) -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+ <script>
+ let allCocktails = [];
+
+ function loadAllCocktails() {
+ $.getJSON('api_cocktails.php', function(data) {
+ allCocktails = data;
+ displayCocktails(allCocktails);
+ updateResultsCount(allCocktails.length);
+ }).fail(function() {
+ $('#cocktailResults').html('<div class="col-12 text-center py-5"><div class="alert alert-danger">Fehler beim Laden der Cocktails!</div></div>');
+ });
+ }
+
+
+function updateResultsCount(count) {
+ $('#resultsCount').html(`<i class="fas fa-cocktail"></i> ${count} Cocktails`);
+ //$('#resultsTitle').html(`<i class="fas fa-list"></i> Alle Cocktails (${count})`);
+}
+
+function searchCocktails() {
+ const name = $('#searchName').val().toLowerCase();
+ const kategorie = $('#searchKategorie').val();
+ const seite = $('#searchSeite').val();
+ const zutatenSuche = $('#searchZutaten').val().toLowerCase().trim();
+
+ const filtered = allCocktails.filter(cocktail => {
+ const matchesName = !name || cocktail.name.toLowerCase().includes(name);
+ const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie);
+ const matchesSeite = !seite || cocktail.seite == seite;
+
+ // 🔍 MULTI-ZUTATEN-SUCHE (jede Zutat muss vorkommen)
+ let matchesZutaten = true;
+ if (zutatenSuche) {
+ const gesuchteZutaten = zutatenSuche.split(/\s+/).filter(w => w.length > 0);
+ matchesZutaten = gesuchteZutaten.every(zutat =>
+ cocktail.zutaten.some(ing =>
+ ing.zutat.toLowerCase().includes(zutat) ||
+ ing.kategorie.toLowerCase().includes(zutat)
+ )
+ );
+ }
+
+ return matchesName && matchesKategorie && matchesSeite && matchesZutaten;
+ });
+
+ displayCocktails(filtered);
+ $('#resultsCount').text(filtered.length + ' Ergebnisse');
+ $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse');
+}
+
+/*
+ function searchCocktails() {
+ const name = $('#searchName').val().toLowerCase();
+ const kategorie = $('#searchKategorie').val();
+ const seite = $('#searchSeite').val();
+
+ const filtered = allCocktails.filter(cocktail => {
+ const matchesName = !name || cocktail.name.toLowerCase().includes(name);
+ const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie);
+ const matchesSeite = !seite || cocktail.seite == seite;
+
+ return matchesName && matchesKategorie && matchesSeite;
+ });
+
+ displayCocktails(filtered);
+ $('#resultsCount').text(filtered.length + ' Ergebnisse');
+ $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse');
+ }
+*/
+
+function formatiereZutaten(z) {
+ if (z.einheit === null && z.kategorie === 'Ei') {
+ output = '';
+ } else if (z.einheit === 'Dash') {
+ output = z.menge_anteil + " " + z.einheit;
+ } else if (z.einheit === 'piece') {
+ output = "";
+ } else {
+ output = z.menge_ml ? z.menge_ml + " ml" : (z.original_text || '—');
+ }
+
+ return output;
+}
+
+function displayCocktails(cocktails) {
+ let html = '';
+ cocktails.forEach(cocktail => {
+ // 🛡️ Sichere Zutaten-Anzahl
+ const zutatenCount = cocktail.zutaten ? cocktail.zutaten.length : (cocktail.zutaten_count || 0);
+
+ // Top 3 Zutaten für Vorschau
+ let topZutatenHtml = '';
+ if (cocktail.zutaten && cocktail.zutaten.length > 0) {
+ const top3 = cocktail.zutaten.slice(0, 3);
+ top3.forEach(z => {
+ output = formatiereZutaten(z);
+ topZutatenHtml += `
+ <span class="badge badge-${getKategorieColor(z.kategorie)} ingredient-badge mr-1 mb-1">
+ <span class="menge_ml">
+ ${output}
+ </span> ${z.zutat}
+ </span>
+ `;
+ });
+ if (cocktail.zutaten.length > 3) {
+ topZutatenHtml += `<span class="badge badge-light ingredient-badge mr-1 mb-1">+${zutatenCount-3}</span>`;
+ }
+ }
+
+ html += `
+ <div class="col-lg-4 col-md-6 mb-4">
+ <div class="card cocktail-card h-100 shadow-sm border-0">
+ <div class="card-body">
+ <h5 class="card-title">${cocktail.name}</h5>
+ <p class="text-muted small mb-2">
+ <i class="fas fa-utensils"></i> ${zutatenCount} Zutaten
+ <i class="fas fa-book"></i> Seite ${cocktail.seite || '?'} |
+ </p>
+
+ <!-- ZUTATEN VORSCHAU -->
+ <div class="zutaten-preview mb-3">
+ ${topZutatenHtml}
+ </div>
+
+ <p class="card-text small mb-3">${cocktail.zubereitung || cocktail.zubereitung}</p>
+
+ <button class="btn btn-warning btn-sm cocktail-detail-btn" data-action="cocktail-detail" data-id="${cocktail.id}">
+ <i class="fas fa-eye"></i> Alle Zutaten & Details
+ </button>
+ </div>
+ </div>
+ </div>
+ `;
+ });
+
+ if (cocktails.length === 0) {
+ html = '<div class="col-12"><div class="alert alert-info text-center">Keine Cocktails gefunden.</div></div>';
+ }
+
+ $('#cocktailResults').html(html);
+
+}
+
+
+ function showCocktailDetail(id) {
+$('#searchName, #searchZutaten, #searchKategorie, #searchSeite').off('input change');
+ $.getJSON(`api_cocktail.php?id=${id}`, function(cocktail) {
+
+ // **ML-Ansicht (KORREKT):**
+ currentCocktailMlZutaten = cocktail.zutaten.map(z => {
+ const output = formatiereZutaten(z);
+ return `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;">
+ <!-- Badge (kompakt) -->
+ <span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1"
+ style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;">
+ ${output || (z.menge_anteil + (z.einheit ? ` ${z.einheit}` : '')) || ''}
+ </span>
+ <!-- Zutat (HOHER KONTRAST) -->
+ <div class="flex-grow-1 pr-3" style="max-width: 300px;">
+ <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div>
+ <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small>
+ </div>
+ </div>`
+ }).join('');
+/*
+ ${z.einheit === 'Dash'
+ ? `${z.menge_anteil} ${z.einheit}`
+ : (z.menge_ml ? `${z.menge_ml} ml` : (z.original_text || '—'))}
+*/
+
+ currentCocktailOriginalZutaten = cocktail.zutaten.map(z =>
+ `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;">
+ <!-- Badge (kompakt) -->
+ <span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1"
+ style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;">
+ ${z.menge_anteil} ${z.einheit ? ` ${z.einheit}` : ''}
+ </span>
+ <!-- Zutat (HOHER KONTRAST) -->
+ <div class="flex-grow-1 pr-3" style="max-width: 300px;">
+ <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div>
+ <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small>
+ </div>
+ </div>`
+ ).join('');
+ //style="background: #ffc107 !important; color: #000 !important; min-width: 60px; font-size: 0.9rem;">
+ //${z.original_text || `${z.menge_anteil} ${z.einheit}`}
+
+
+ $('#modalTitle').html(`<i class="fas fa-cocktail"></i> ${cocktail.name}`);
+ $('#modalZutaten').html(currentCocktailMlZutaten);
+
+ // Info-Bereich
+ $('#modalInfo').html(`
+ <div class="row mb-4">
+ <div class="col-md-4">
+ <h6><i class="fas fa-utensils text-muted"></i> ${cocktail.zutaten.length} Zutaten</h6>
+ <h6><i class="fas fa-book text-muted"></i> Seite ${cocktail.seite}</h6>
+ </div>
+ </div>
+ `);
+
+ $('#modalRezept').html(`
+ <h6><i class="fas fa-concierge-bell"></i> Zubereitung:</h6>
+ <p class="lead">${cocktail.zubereitung}</p>
+ `);
+
+$('#zutatenToggle .btn').removeClass('active btn-warning')
+ .addClass('btn-outline-warning btn-outline-warning');
+$('#zutatenToggle .ml-view').addClass('active btn-warning')
+ .removeClass('btn-outline-warning');
+
+ $('#cocktailModal').modal('show');
+
+ // **Toggle sofort aktivieren**
+ setTimeout(() => {
+ $('#zutatenToggle .ml-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+ }, 100);
+ });
+
+// **WICHTIG: NACH Modal-ZU Events WIEDER AN!**
+ $('#cocktailModal').one('hidden.bs.modal', function() {
+ // Live-Suche WIEDER AKTIVIEREN
+ $('#searchName, #searchZutaten').on('input', function() {
+ let searchTimeout;
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(searchCocktails, 300);
+ });
+
+ $('#searchKategorie, #searchSeite').on('change', searchCocktails);
+ })
+
+ }
+
+ function getKategorieColor(kategorie) {
+ const colors = {
+ 'Gin': 'primary',
+ 'Rum': 'success',
+ 'Whisky': 'warning',
+ 'Bitter': 'danger',
+ 'Fruchtsaft': 'info',
+ 'Kräuterlikör': 'secondary'
+ };
+ //return colors[kategorie] || 'light';
+ return 'light';
+ }
+
+ // Enter-Taste für Suche
+ $('#searchName, #searchSeite').keypress(function(e) {
+ if (e.which == 13) searchCocktails();
+ });
+ // Live-Suche bei Eingabe
+ // ✅ RICHTIG - NUR 'input' für Text + 'change' für Select:
+ $('#searchName, #searchZutaten').on('input', function() {
+ searchCocktails();
+ });
+
+ $('#searchKategorie, #searchSeite').on('change', function() {
+ searchCocktails();
+ });
+
+ // Nach allCocktails laden:
+ async function loadKategorien() {
+ try {
+ const response = await fetch('api_kategorien.php');
+ const kategorien = await response.json();
+
+ const select = $('#searchKategorie');
+ select.empty();
+ select.append('<option value="">Alle Kategorien</option>');
+
+ kategorien.forEach(kat => {
+ select.append(`<option value="${kat}">${kat}</option>`);
+ });
+ } catch(e) {
+ console.log('Kategorien laden fehlgeschlagen');
+ }
+ }
+
+ // Beim Laden aufrufen:
+ $(document).ready(function() {
+ loadAllCocktails(); // Bestehende Funktion
+ loadKategorien(); // NEU!
+ // Bootstrap Buttons initialisieren
+ $('.btn-group-toggle').button();
+
+ // Toggle-Event für Zutaten-Wechsel
+ $(document).on('change', '[name="zutatenView"]', function() {
+ if ($(this).attr('id') === 'mlView') {
+ $('#modalZutaten').html(currentCocktailMlZutaten);
+ } else {
+ $('#modalZutaten').html(currentCocktailOriginalZutaten);
+ }
+ });
+ $(document).on('click', '#zutatenToggle .btn', function() {
+ // Active Klasse wechseln
+ $('#zutatenToggle .btn').removeClass('active btn-warning').addClass('btn-outline-warning btn-outline-warning');
+ $(this).addClass('active btn-warning').removeClass('btn-outline-warning btn-outline-warning');
+
+ // Zutaten wechseln
+ if ($(this).data('view') === 'ml') {
+ $('#modalZutaten').html(currentCocktailMlZutaten);
+ } else {
+ $('#modalZutaten').html(currentCocktailOriginalZutaten);
+ }
+ });
+ // NUR HIER - EINMALIG!
+ $(document).on('click', '.cocktail-detail-btn', function(e) {
+ e.preventDefault();
+ const id = $(this).data('id');
+ showCocktailDetail(id);
+ return false;
+ });
+ // **Nach DOM-Update Buttons "wecken"**
+ $(document).on('cocktails:updated', function() {
+ $('.cocktail-detail-btn').css('pointer-events', 'auto');
+ });
+$(document).off('click', '[data-id]');
+$(document).on('click', '[data-id]', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const id = $(this).data('id');
+ showCocktailDetail(id);
+ return false;
+});
+
+ // 1. DARK MODE BEIM LADEN (Default)
+ /*
+ $('body').addClass('dark-mode');
+ $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+ localStorage.setItem('darkMode', 'enabled');
+
+ // 2. TOGGLE: Dark → Light (SUN → MOON)
+ $('#darkModeBtn').on('click', function() {
+ $('body').toggleClass('dark-mode');
+
+ if ($('body').hasClass('dark-mode')) {
+ // Dark aktiv → Icon Sonne
+ localStorage.setItem('darkMode', 'enabled');
+ $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+ } else {
+ // **LIGHT MODUS!** → Icon Mond
+ localStorage.setItem('darkMode', 'disabled');
+ $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+ }
+});
+*/
+ // **1. LocalStorage prüfen**
+ const savedMode = localStorage.getItem('darkMode');
+
+ if (savedMode === 'enable') {
+ $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+ // Light Mode gespeichert
+ //$('body').removeClass('dark-mode');
+ } else if (savedMode === 'disabled'){
+ $('body').removeClass('dark-mode'); // Light aktiv
+ $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+ // **LIGHT MODE DEFAULT** (auch bei null/undefined/enabled)
+ //localStorage.setItem('darkMode', 'disabled'); // Default setzen
+ } else {
+ $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+ }
+
+
+ // **2. TOGGLE (Light ↔ Dark)**
+ $('#darkModeBtn').on('click', function() {
+ $('body').toggleClass('dark-mode');
+
+ if ($('body').hasClass('dark-mode')) {
+ // Dark aktiv → Sonne
+ localStorage.setItem('darkMode', 'enabled');
+ $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+ } else {
+ // Light aktiv → Mond
+ localStorage.setItem('darkMode', 'disabled');
+ $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+ }
+ });
+
+ });
+
+let currentModalView = 'ml'; // Globaler State
+
+// Globale Variablen für aktuelle Zutaten (Performance)
+let currentCocktailMlZutaten = '';
+let currentCocktailOriginalZutaten = '';
+
+function getMlZutaten() { return currentCocktailMlZutaten; }
+function getOriginalZutaten() { return currentCocktailOriginalZutaten; }
+
+function displayModal(cocktail) {
+ // Zutaten VORAB berechnen
+ currentCocktailMlZutaten = cocktail.zutaten.map(z =>
+ z.menge_ml > 0 ? `<div class="zutat-item"><strong>${z.menge_ml.toFixed(0)} ml</strong> ${z.zutat}</div>` : `<div class="zutat-item">${z.zutat}</div>`
+ ).join('');
+
+ currentCocktailOriginalZutaten = cocktail.zutaten.map(z =>
+ `<div class="zutat-item"><strong>${z.original_text || ''}</strong> ${z.zutat}</div>`
+ ).join('');
+
+ // Zutaten für BEIDE Ansichten vorbereiten
+ const mlZutaten = cocktail.zutaten.map(zutat => {
+ const menge_ml = zutat.menge_ml;
+ if (menge_ml && menge_ml > 0) {
+ return `<div class="zutat-item"><strong>${menge_ml.toFixed(0)} ml ${zutat.zutat}</strong> ${zutat.zutat_de}</div>`;
+ }
+ return `<div class="zutat-item">${zutat.zutat}</div>`;
+ }).join('');
+
+ const originalZutaten = cocktail.zutaten.map(zutat => {
+ return `<div class="zutat-item"><strong>${zutat.original_text || zutat.menge_anteil || ''}</strong> ${zutat.zutat}</div>`;
+ }).join('');
+
+ // Modal-HTML mit aktueller Ansicht
+ /*
+ const modalHtml = `
+ <div class="modal-header">
+ <h5 class="modal-title">${cocktail.name} <small class="text-muted">(Seite ${cocktail.seite})</small></h5>
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ </div>
+ <div class="modal-body">
+ <div class="form-group mb-3">
+ <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+ <label class="btn btn-outline-primary active ml-view">
+ <input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml
+ </label>
+ <label class="btn btn-outline-secondary original-view">
+ <input type="radio" name="zutatenView" id="originalView"> Original
+ </label>
+ </div>
+ </div>
+
+*/
+ const modalHtml = `
+ <div id="modalZutaten" class="zutaten-list">Hallo${currentModalView === 'ml' ? mlZutaten : originalZutaten}</div>
+ ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p class="small">${cocktail.rezept}</p>` : ''}
+ </div>
+ `;
+
+ //$('#cocktailModal .modal-content').html(modalHtml);
+ $('#cocktailModal .modalZutaten').html(modalHtml);
+ $('#cocktailModal').modal('show');
+
+ // Toggle-Event-Bindings
+ bindModalToggle();
+}
+
+function bindModalToggle() {
+ $('.ml-view').off('click').on('click', function() {
+ currentModalView = 'ml';
+ $('#modalZutaten').html(getMlZutaten()); // Funktion unten
+ $('.ml-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+ $('.original-view').removeClass('active btn-warning').addClass('btn-outline-warning');
+ });
+
+ $('.original-view').off('click').on('click', function() {
+ currentModalView = 'original';
+ $('#modalZutaten').html(getOriginalZutaten()); // Funktion unten
+ $('.original-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+ $('.ml-view').removeClass('active btn-warning').addClass('btn-outline-warning');
+ });
+}
+
+ </script>
+</body>
+</html>