Karavan Yemeği Menüsü Planlayıcısı

Aşağıda, Karavan Yemeği Menüsü Planlayıcısı için geliştirdiğimiz bu aracın detaylı ve samimi bir açıklamasını alt kısımlarda bulabilirsiniz. Bu hesaplama aracımız, siz değerli karavancı dostlarımızın kullanıcıların karavan seyahatleri sırasında kolayca menü ve alışveriş listesi oluşturmasını sağlayacak şekilde tasarlanmıştır. Bu aracımız ilginizi çektiyse Arabam Karavan Çekebilir mi? Hesaplama Aracı ile Hemen Öğren içeriğimize veya Karavan kampı bulmakta zorlanıyormusunuz GEZİYOO.CO ana sayfamıza bakabilirsiniz. /* CSS İZOLASYONU */ #geziyoo-caravan-app { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #fcfcfc; color: #333; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #eee; display: flex; flex-direction: row; min-height: 600px; margin: 20px 0; position: relative; } /* Sol Panel (Ayarlar) */ #geziyoo-caravan-app .karavan-sidebar { width: 290px; background-color: #fff; padding: 25px; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; flex-shrink: 0; } /* Sağ Panel (Sonuçlar) */ #geziyoo-caravan-app .karavan-main { flex: 1; padding: 25px; background-color: #fff9f5; /* Hafif sıcak bir ton */ overflow-x: hidden; display: flex; flex-direction: column; } #geziyoo-caravan-app h2, #geziyoo-caravan-app h3 { color: #fe4641; /* Karavan Kırmızısı/Turuncusu */ margin-top: 0; } #geziyoo-caravan-app .k-group { margin-bottom: 25px; } /* Sayaç */ #geziyoo-caravan-app .k-counter { display: flex; align-items: center; background: #f0f0f0; border-radius: 8px; padding: 5px; } #geziyoo-caravan-app .k-counter button { background: #fe4641; color: white; border: none; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 16px; } #geziyoo-caravan-app .k-counter input { flex: 1; text-align: center; border: none; background: transparent; font-weight: bold; font-size: 16px; } /* Checkboxlar */ #geziyoo-caravan-app .k-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #geziyoo-caravan-app label { font-size: 13px; display: flex; align-items: center; cursor: pointer; color: #555; } #geziyoo-caravan-app label input { margin-right: 8px; accent-color: #fe4641; } /* Butonlar */ #geziyoo-caravan-app .k-btn { width: 100%; padding: 14px; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; transition: 0.2s; background-color: #fe4641; color: white; box-shadow: 0 4px 10px rgba(254, 70, 65, 0.2); } #geziyoo-caravan-app .k-btn:hover { background-color: #e0433e; transform: translateY(-2px); } #geziyoo-caravan-app .k-action-btn { background: white; border: 1px solid #ddd; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-left: 10px; color: #555; transition: 0.2s; } #geziyoo-caravan-app .k-action-btn:hover { border-color: #fe4641; color: #fe4641; } /* Yatay Kartlar */ #geziyoo-caravan-app .k-scroll-area { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: #ccc #fff9f5; } #geziyoo-caravan-app .k-card { min-width: 280px; max-width: 280px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; border: 1px solid #f9f9f9; } #geziyoo-caravan-app .k-card-header { background: linear-gradient(135deg, #fe4641, #ff7e5f); color: white; padding: 12px; text-align: center; font-weight: bold; font-size: 15px; } #geziyoo-caravan-app .k-meal-row { padding: 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; } #geziyoo-caravan-app .k-meal-title { font-size: 11px; color: #fe4641; text-transform: uppercase; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; } #geziyoo-caravan-app .k-meal-name { font-weight: 600; color: #333; margin-bottom: 3px; font-size: 14px; } #geziyoo-caravan-app .k-ing { font-size: 11px; color: #777; line-height: 1.4; } /* Alışveriş Listesi */ #geziyoo-caravan-app .k-shop-list { margin-top: 25px; background: white; padding: 20px; border-radius: 12px; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.04); } #geziyoo-caravan-app .k-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } #geziyoo-caravan-app .k-shop-item { padding: 8px 12px; background: #fdfdfd; border: 1px solid #eee; border-radius: 6px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; } #geziyoo-caravan-app .k-shop-item i { color: #fe4641; font-size: 14px; } #geziyoo-caravan-app .k-shop-item.checked { text-decoration: line-through; opacity: 0.5; background: #f0f0f0; } /* MOBİL */ @media (max-width: 800px) { #geziyoo-caravan-app { flex-direction: column; } #geziyoo-caravan-app .karavan-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; } #geziyoo-caravan-app .k-card { min-width: 100%; } } Karavan Menü Kişi Sayısı - + Seyahat Günleri Pzt Sal Çar Per Cum Cmt Paz Filtreler Vegan Glutensiz Tavuk Et Balık MENÜYÜ OLUŞTUR Planınız Karavan mutfağına uygun pratik tarifler. PDF İndir Sol taraftan gün seçip "MENÜYÜ OLUŞTUR" butonuna basınız. Karavan Alışveriş Listesi // VERİLER (Senin sağladığın Karavan Menü Verileri) // Formatı modern tasarıma uygun hale getirdim. const krv_recipes = { kahvalti: [ { name: "Fırında Menemen", tags: ["Vejetaryen", "Glutensiz"], ing: ["Yumurta", "domates", "sivri biber", "soğan", "zeytinyağı", "baharat"] }, { name: "Özel Omlet", tags: ["Vejetaryen", "Glutensiz"], ing: ["Yumurta", "mantar", "biber", "soğan", "maydanoz", "tereyağı"] }, { name: "Sucuklu Omlet", tags: ["Et", "Glutensiz"], ing: ["Yumurta", "sucuk", "biber", "soğan", "karabiber"] }, { name: "Peynirli Krep", tags: ["Vejetaryen"], ing: ["Un", "süt", "yumurta", "beyaz peynir", "maydanoz"] }, { name: "Tahin-Pekmez Tost", tags: ["Vegan"], ing: ["Tam buğday ekmeği", "tahin", "pekmez"] }, { name: "Kahvaltı Burritosu", tags: ["Vejetaryen"], ing: ["Yumurta", "tortilla", "siyah fasulye", "mısır", "avokado"] }, { name: "Klasik Türk Kahvaltısı", tags: ["Vejetaryen", "Glutensiz"], ing: ["Yumurta", "beyaz peynir", "zeytin", "domates", "bal"] } ], ogle: [ { name: "Izgara Tavuklu Sezar", tags: ["Tavuk", "Glutensiz"], ing: ["Izgara tavuk", "marul", "kruton", "parmesan", "Sezar sos"] }, { name: "Tonlu Kinoa Salata", tags: ["Balık", "Glutensiz"], ing: ["Ton balığı", "kinoa", "roka", "mısır", "limon"] }, { name: "Izgara Köfte Salatası", tags: ["Et", "Glutensiz"], ing: ["Izgara köfte", "yeşil salata", "domates", "salatalık"] }, { name: "Nohutlu Avokado Salata", tags: ["Vegan", "Glutensiz"], ing: ["Nohut", "avokado", "roka", "domates", "limon"] }, { name: "Peynirli Makarna", tags: ["Vejetaryen"], ing: ["Makarna", "peynir", "fesleğen", "domates"] } ], aksam: [ { name: "Izgara Tavuk Şiş", tags: ["Tavuk", "Glutensiz"], ing: ["Tavuk göğüs", "biber", "soğan", "kabak", "zeytinyağı"] }, { name: "Kıymalı Patates Güveci", tags: ["Et", "Glutensiz"], ing: ["Kıyma", "patates", "soğan", "biber", "domates"] }, { name: "Balık Buğulama", tags: ["Balık", "Glutensiz"], ing: ["Balık fileto", "domates", "biber", "soğan", "sarımsak"] }, { name: "Sebzeli Güveç", tags: ["Vegan", "Glutensiz"], ing: ["Patlıcan", "kabak", "biber", "domates", "soğan"] }, { name: "Izgara Köfte", tags: ["Et", "Glutensiz"], ing: ["Kıyma", "soğan", "baharat", "marul"] } ], tatli: [ { name: "Fırında Meyve Tatlısı", tags: ["Vegan", "Glutensiz"], ing: ["Elma", "armut", "tarçın", "bal", "ceviz"] }, { name: "Sütlaç", tags: ["Vejetaryen", "Glutensiz"], ing: ["Süt", "pirinç", "şeker", "tarçın"] }, { name: "İrmik Helvası", tags: ["Vejetaryen"], ing: ["İrmik", "şeker", "tereyağı", "fıstık"] }, { name: "Muzlu Çikolatalı Tatlı", tags: ["Vejetaryen"], ing: ["Muz", "bitter çikolata", "fındık"] } ] }; let krv_currentPlan = []; function krv_updatePeople(n) { const el = document.getElementById('krv-person-count'); let v = parseInt(el.value) + n; if(v < 1) v = 1; el.value = v; } function krv_getRandom(cat) { let pool = krv_recipes[cat] || []; // Filtreleme Mantığı const filters = []; if (document.getElementById("krv-vegan").checked) filters.push("Vegan"); if (document.getElementById("krv-glutensiz").checked) filters.push("Glutensiz"); if (document.getElementById("krv-tavuk").checked) filters.push("Tavuk"); if (document.getElementById("krv-et").checked) filters.push("Et"); if (document.getElementById("krv-balik").checked) filters.push("Balık"); if (filters.length > 0) { pool = pool.filter(recipe => { // Tarifin etiketleri arasında, seçili filtrelerden HERHANGİ BİRİ varsa getir. // Veya daha katı filtre için: filters.every(...) kullanılabilir. return filters.some(f => recipe.tags.includes(f)); }); } if(pool.length === 0) pool = krv_recipes[cat]; // Filtreye uygun yoksa genel havuzdan ver return pool[Math.floor(Math.random() * pool.length)]; } function krv_generateMenu() { const days = Array.from(document.querySelectorAll('.k-day-cb:checked')).map(c => c.value); const container = document.getElementById('krv-results-area'); const shopArea = document.getElementById('krv-shopping-area'); if(days.length === 0) { alert("Lütfen seyahat günlerinizi seçin."); return; } container.innerHTML = ""; krv_currentPlan = []; days.forEach(day => { const k = krv_getRandom('kahvalti'); const o = krv_getRandom('ogle'); const a = krv_getRandom('aksam'); const t = krv_getRandom('tatli'); krv_currentPlan.push({ day, k, o, a, t }); const html = ` ${day} KAHVALTI ${k.name} ${k.ing.join(", ")} ÖĞLE ${o.name} ${o.ing.join(", ")} AKŞAM ${a.name} ${a.ing.join(", ")} TATLI/ARA ${t.name} `; container.innerHTML += html; }); // Alışveriş Listesi const listGrid = document.getElementById('krv-shopping-grid'); listGrid.innerHTML = ""; let allIngs = {}; krv_currentPlan.forEach(p => { [p.k, p.o, p.a, p.t].forEach(m => { m.ing.forEach(i => { let cleanItem = i.trim(); allIngs[cleanItem] = (allIngs[cleanItem] || 0) + 1; }); }); }); Object.keys(allIngs).sort().forEach(ing => { const item = document.createElement('div'); item.className = 'k-shop-item'; // Miktarı da gösterebiliriz (x2 gibi) ama sade bıraktık item.innerHTML = ` ${ing}`; item.onclick = function() { this.classList.toggle('checked'); const icon = this.querySelector('i'); icon.className = this.classList.contains('checked') ? 'far fa-check-square' : 'far fa-square'; }; listGrid.appendChild(item); }); shopArea.style.display = 'block'; } function krv_downloadPDF() { if(!krv_currentPlan.length) return alert("Önce menüyü oluşturun."); const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); doc.setFontSize(18); doc.setTextColor(254, 70, 65); doc.text("Karavan Menüsü", 14, 20); doc.setFontSize(10); doc.setTextColor(100); doc.text(`Tarih: ${new Date().toLocaleDateString()} | Geziyoo.co`, 14, 26); const bodyData = krv_currentPlan.map(p => [ p.day, p.k.name, p.o.name, p.a.name, p.t.name ]); doc.autoTable({ head: [['Gün', 'Kahvaltı', 'Öğle', 'Akşam', 'Tatlı']], body: bodyData, startY: 35, theme: 'grid', headStyles: { fillColor: [254, 70, 65] } }); doc.save('Karavan_Menusu.pdf'); } Bunları da Sevebilirziniz;

Karavan Menü

Planınız

Karavan Alışveriş Listesi

Bunları da Sevebilirziniz;

İlgili Makaleler