Skip to content

Instantly share code, notes, and snippets.

@pksbogastro

pksbogastro/index.html

Created March 13, 2026 17:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pksbogastro/1b79c7ffc6f493a9741c167e0cdde91a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pksbogastro/1b79c7ffc6f493a9741c167e0cdde91a to your computer and use it in GitHub Desktop.
Download ZIP
Einkaufen
Raw
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foodtruck Liste</title>
<style>
body { font-family: sans-serif; background: #f4f7f6; margin: 0; padding: 10px; text-align: center; }
.card { background: white; padding: 15px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 12px; }
select { width: 100%; padding: 14px; font-size: 18px; border: 2px solid #2196F3; border-radius: 12px; margin-bottom: 12px; background: white; }
.btn { width: 100%; padding: 16px; border: none; border-radius: 12px; font-weight: bold; font-size: 16px; margin: 6px 0; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; }
.btn-row { display: flex; justify-content: space-between; gap: 10px; }
.btn-small { width: 48%; background: #e0e0e0; color: #333; }
.btn-red { background: #ff5252; color: white; }
.btn-green { background: #4CAF50; }
.btn-blue { background: #2196F3; }
.btn-orange { background: #FF9800; }
#admin-area { display: none; padding: 15px; border: 2px dashed #ddd; border-radius: 12px; margin-top: 10px; background: #fafafa; }
input { width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; }
.item { background: white; padding: 12px; border-radius: 12px; margin-bottom: 8px; display: flex; align-items: center; text-align: left; border: 1px solid #e0e0e0; position: relative; min-height: 90px; }
.item img { width: 100px; height: 75px; object-fit: cover; border-radius: 8px; margin-right: 15px; background: #eee; flex-shrink: 0; cursor: pointer; }
.item-info { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; }
.edit-name { font-size: 1.2em; font-weight: bold; border: none; background: transparent; color: #333; flex-grow: 1; outline: none; }
.edit-qty { width: 60px; height: 45px; border: 1px solid #ccc; border-radius: 10px; text-align: center; font-size: 1.1em; background: white; color: #333; }
/* WICHTIG: Ausgrauen-Effekt */
.shop-checked { opacity: 0.25; filter: grayscale(100%); text-decoration: line-through; }
/* BILD OVERLAY - Damit es groß wird */
#img-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; }
#img-overlay img { max-width: 95%; max-height: 95%; border-radius: 10px; border: 2px solid white; }
.del-btn { position: absolute; top: -5px; right: -5px; background: #ff5252; color: white; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 26px; text-align: center; cursor: pointer; border: 2px solid white; z-index: 5; }
</style>
</head>
<body>
<div id="img-overlay" onclick="this.style.display='none'"><img id="full-img" src=""></div>
<div class="card">
<select id="listSelect" onchange="updateList()"></select>
<div class="btn-row">
<button class="btn btn-small" onclick="addList()">+ Neue Liste</button>
<button class="btn btn-red btn-small" onclick="removeList()">Liste löschen</button>
</div>
</div>
<div class="card">
<button class="btn btn-green" onclick="toggleAdd()">➕ Artikel hinzufügen</button>
<div id="admin-area">
<input type="text" id="nameInp" placeholder="Name">
<input type="file" id="imgInp" accept="image/*">
<button class="btn btn-green" onclick="saveNew()">SPEICHERN</button>
</div>
<button id="modeBtn" class="btn btn-blue" onclick="switchMode()">➡️ Einkaufsmodus</button>
<button class="btn btn-orange" onclick="resetMarkers()">🔄 Alle auf Null</button>
</div>
<div id="listCont"></div>
<script>
// Eindeutiger Key für den Speicher
var K = 'foodTruck_original_stable';
var d = JSON.parse(localStorage.getItem(K)) || { active: "Standard", lists: { "Standard": [] }, shop: false };
function render() {
var sel = document.getElementById('listSelect');
sel.innerHTML = '';
for (var n in d.lists) {
var o = document.createElement('option'); o.value = n; o.innerText = n;
if(n === d.active) o.selected = true;
sel.appendChild(o);
}
document.getElementById('modeBtn').innerText = d.shop ? "🛒 Planungsmodus" : "➡️ Einkaufsmodus";
var cont = document.getElementById('listCont');
cont.innerHTML = '';
var items = d.lists[d.active] || [];
items.forEach(function(it, idx) {
var div = document.createElement('div');
// Haken/Grau wird nur angezeigt, wenn shop aktiv ist UND it.done wahr ist
div.className = 'item' + (d.shop && it.done ? ' shop-checked' : '');
// Klick-Logik nur im Einkaufsmodus
if(d.shop) {
div.onclick = function() { it.done = !it.done; save(); };
}
div.innerHTML = (it.img ? '<img src="'+it.img+'" onclick="event.stopPropagation(); showBig(this.src)">' : '<div style="width:100px;height:75px;margin-right:15px;background:#eee;border-radius:8px;flex-shrink:0;"></div>') +
'<div class="item-info">' +
'<input type="text" class="edit-name" value="'+it.name+'" '+(d.shop ? 'disabled' : '')+' oninput="d.lists[d.active]['+idx+'].name=this.value; sync()">' +
'<input type="text" class="edit-qty" value="'+(it.qty||'0')+'" '+(d.shop ? 'disabled' : '')+' onclick="event.stopPropagation()" oninput="d.lists[d.active]['+idx+'].qty=this.value; sync()">' +
'</div>' +
'<span class="del-btn" onclick="event.stopPropagation(); delItem('+idx+')">×</span>';
cont.appendChild(div);
});
}
// Funktion für die große Bildanzeige
window.showBig = function(src) {
document.getElementById('full-img').src = src;
document.getElementById('img-overlay').style.display = 'flex';
};
// Speicher-Funktionen
function sync() { localStorage.setItem(K, JSON.stringify(d)); }
function save() { sync(); render(); }
window.toggleAdd = function() {
var a = document.getElementById('admin-area');
a.style.display = (a.style.display==='block'?'none':'block');
};
window.saveNew = function() {
var n = document.getElementById('nameInp'), f = document.getElementById('imgInp');
if(!n.value) return;
var add = function(img) { d.lists[d.active].push({name:n.value, qty:'0', img:img||'', done:false}); n.value=''; f.value=''; toggleAdd(); save(); };
if(f.files[0]) {
var r = new FileReader(); r.onload = function(e) {
var i = new Image(); i.onload = function() {
var c = document.createElement('canvas'); var m=400; var w=i.width, h=i.height;
if(w>h){if(w>m){h*=m/w; w=m;}}else{if(h>m){w*=m/h; h=m;}}
c.width=w; c.height=h; c.getContext('2d').drawImage(i,0,0,w,h);
add(c.toDataURL('image/jpeg',0.7));
}; i.src = e.target.result;
}; r.readAsDataURL(f.files[0]);
} else add();
};
window.delItem = function(i) { if(confirm("Löschen?")) { d.lists[d.active].splice(i,1); save(); } };
window.addList = function() { var n = prompt("Name:"); if(n) { d.lists[n]=[]; d.active=n; save(); } };
window.removeList = function() { if(confirm("Löschen?")) { delete d.lists[d.active]; d.active=Object.keys(d.lists)[0]||"Standard"; if(!d.lists[d.active]) d.lists["Standard"]=[]; save(); } };
window.updateList = function() { d.active = document.getElementById('listSelect').value; save(); };
window.switchMode = function() { d.shop = !d.shop; save(); };
// RESET FUNKTION - Alle auf Null
window.resetMarkers = function() {
if(confirm("Alle Markierungen zurücksetzen?")) {
var currentItems = d.lists[d.active];
for(var i=0; i<currentItems.length; i++) {
currentItems[i].done = false;
}
save();
}
};
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment