Skip to content

Instantly share code, notes, and snippets.

@pksbogastro

pksbogastro/index.html

Created March 13, 2026 17:18
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save pksbogastro/0b99a844baaa059a2eff85f8d98ce155 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; -webkit-appearance: none; }
.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; gap: 8px; }
.btn-row { display: flex; justify-content: space-between; gap: 10px; }
.btn-small { width: 48%; padding: 12px; font-size: 14px; background: #e0e0e0; color: #333; }
.btn-red { background: #ff5252; }
.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; }
/* Das Item-Design exakt nach Screenshot */
.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: 85px; }
.item img { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; margin-right: 15px; background: #eee; flex-shrink: 0; }
.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: #000; flex-grow: 1; outline: none; width: 50%; }
/* Die Mengen-Box wie im Bild */
.edit-qty { width: 65px; height: 45px; border: 1px solid #ccc; border-radius: 10px; text-align: center; font-size: 1.1em; background: white; color: #333; outline: none; }
.shop-checked { opacity: 0.25; filter: grayscale(100%); text-decoration: line-through; }
/* Fullscreen Overlay für Bilder */
#img-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; justify-content: center; align-items: center; }
#img-overlay img { max-width: 95%; max-height: 95%; border-radius: 10px; box-shadow: 0 0 20px rgba(255,255,255,0.2); }
.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>
var K = 'foodTruckData_final_stable';
var d = JSON.parse(localStorage.getItem(K)) || { active: "Foodtruck", lists: { "Foodtruck": [] }, 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');
div.className = 'item' + (d.shop && it.done ? ' shop-checked' : '');
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:90px;height:70px;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);
});
}
window.showBig = function(src) {
document.getElementById('full-img').src = src;
document.getElementById('img-overlay').style.display = 'flex';
};
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]||"Foodtruck"; if(!d.lists[d.active]) d.lists["Foodtruck"]=[]; save(); } };
window.updateList = function() { d.active = document.getElementById('listSelect').value; save(); };
window.switchMode = function() { d.shop = !d.shop; save(); };
window.resetMarkers = function() { if(confirm("Alle auf Null setzen?")) { d.lists[d.active].forEach(function(it){it.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