Created
March 13, 2026 17:08
-
-
Save pksbogastro/2c70e81b8a0db6ca1eb46b2fbd664986 to your computer and use it in GitHub Desktop.
Einkaufen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Einkaufsliste Fix</title> | |
| <style> | |
| :root { --primary: #4CAF50; --secondary: #2196F3; --danger: #ff5252; --bg: #f4f4f9; } | |
| body { font-family: sans-serif; background: var(--bg); margin: 0; padding: 10px; text-align: center; } | |
| .header-area { background: white; padding: 12px; border-radius: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } | |
| select { width: 100%; padding: 12px; font-size: 18px; border: 2px solid var(--secondary); border-radius: 8px; margin-bottom: 10px; } | |
| .btn-row { display: flex; gap: 5px; margin-bottom: 5px; } | |
| button { padding: 15px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 14px; color: #333; -webkit-appearance: none; } | |
| .btn-add { background: var(--primary); color: white; width: 100%; margin: 5px 0; } | |
| .btn-mode { background: var(--secondary); color: white; width: 100%; margin: 5px 0; } | |
| .btn-multi { background: #673AB7; color: white; width: 100%; margin: 5px 0; } | |
| #admin-panel { background: #fff; padding: 15px; border-radius: 12px; border: 1px solid #ddd; display: none; margin-bottom: 15px; } | |
| input[type="text"] { width: 90%; padding: 12px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; } | |
| .card { background: white; border-radius: 12px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: left; } | |
| .card img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; margin-right: 15px; background: #eee; } | |
| .card b { flex-grow: 1; font-size: 1.1em; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header-area"> | |
| <select id="listSelect" onchange="changeList()"></select> | |
| <div class="btn-row"> | |
| <button style="flex:1; background:#eee;" onclick="newList()">+ Neu</button> | |
| <button style="flex:1; background:#eee;" onclick="renameList()">✏️ Name</button> | |
| <button style="flex:1; background:var(--danger); color:white;" onclick="delList()">🗑️</button> | |
| </div> | |
| </div> | |
| <button class="btn-add" onclick="toggleAdmin()">➕ Artikel hinzufügen</button> | |
| <div id="admin-panel"> | |
| <input type="text" id="pName" placeholder="Name..."> | |
| <input type="file" id="pImage" accept="image/*"> | |
| <button class="btn-add" onclick="saveProduct()">Speichern</button> | |
| </div> | |
| <button class="btn-multi" onclick="alert('Auswahl-Modus aktiviert (Logik folgt)')">📦 Mehrere kopieren</button> | |
| <button class="btn-mode" onclick="alert('Einkaufsmodus aktiviert')">➡️ Einkaufsmodus</button> | |
| <div id="list-container" style="margin-top:20px;"></div> | |
| <script> | |
| // Absolut minimaler Start | |
| let db = { active: "Standard", lists: { "Standard": [] } }; | |
| try { | |
| const saved = localStorage.getItem('shop_final_v1'); | |
| if (saved) db = JSON.parse(saved); | |
| } catch(e) { console.error("Speicherfehler"); } | |
| function render() { | |
| // Dropdown füllen | |
| const sel = document.getElementById('listSelect'); | |
| sel.innerHTML = ''; | |
| Object.keys(db.lists).forEach(l => { | |
| let o = document.createElement('option'); | |
| o.value = o.innerText = l; | |
| if(l === db.active) o.selected = true; | |
| sel.appendChild(o); | |
| }); | |
| // Liste anzeigen | |
| const cont = document.getElementById('list-container'); | |
| cont.innerHTML = ''; | |
| (db.lists[db.active] || []).forEach(p => { | |
| const card = document.createElement('div'); | |
| card.className = 'card'; | |
| card.innerHTML = ` | |
| <img src="${p.img || ''}" onerror="this.style.display='none'"> | |
| <b>${p.name}</b> | |
| <span>${p.count || 1}x</span> | |
| `; | |
| cont.appendChild(card); | |
| }); | |
| } | |
| function toggleAdmin() { | |
| const p = document.getElementById('admin-panel'); | |
| p.style.display = p.style.display === 'none' ? 'block' : 'none'; | |
| } | |
| function saveProduct() { | |
| const n = document.getElementById('pName').value; | |
| const f = document.getElementById('pImage').files[0]; | |
| if(!n) return; | |
| if(f) { | |
| const r = new FileReader(); | |
| r.onload = e => { | |
| db.lists[db.active].push({ name: n, img: e.target.result, count: 1 }); | |
| saveAndRefresh(); | |
| }; | |
| r.readAsDataURL(f); | |
| } else { | |
| db.lists[db.active].push({ name: n, img: '', count: 1 }); | |
| saveAndRefresh(); | |
| } | |
| } | |
| function saveAndRefresh() { | |
| localStorage.setItem('shop_final_v1', JSON.stringify(db)); | |
| document.getElementById('pName').value = ''; | |
| document.getElementById('admin-panel').style.display = 'none'; | |
| render(); | |
| } | |
| function newList() { | |
| const n = prompt("Name:"); | |
| if(n) { db.lists[n] = []; db.active = n; saveAndRefresh(); } | |
| } | |
| function renameList() { | |
| const old = db.active; | |
| const n = prompt("Neuer Name:", old); | |
| if(n && n !== old) { | |
| db.lists[n] = db.lists[old]; | |
| delete db.lists[old]; | |
| db.active = n; | |
| saveAndRefresh(); | |
| } | |
| } | |
| function changeList() { | |
| db.active = document.getElementById('listSelect').value; | |
| saveAndRefresh(); | |
| } | |
| function delList() { | |
| if(confirm("Löschen?")) { | |
| delete db.lists[db.active]; | |
| db.active = Object.keys(db.lists)[0] || "Standard"; | |
| if(!db.lists[db.active]) db.lists[db.active] = []; | |
| saveAndRefresh(); | |
| } | |
| } | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment