Die Seite befindet sich noch im Aufbau.
<!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>Lager-Profi | Share Edition</title>
<style>
:root {
--primary-color: #2563eb;
--whatsapp-color: #25D366;
--success-color: #059669;
--bg-color: #f3f4f6;
--card-bg: #ffffff;
--text-main: #1f2937;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=1000') no-repeat center center fixed;
background-size: cover;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 15px;
}
.card {
background: var(--card-bg);
width: 100%;
max-width: 450px;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
padding: 25px;
background-color: rgba(255, 255, 255, 0.98);
}
h2 { text-align: center; color: var(--text-main); margin: 0 0 20px 0; font-size: 1.5rem; }
.input-group { margin-bottom: 12px; }
label { display: block; font-size: 0.85rem; font-weight: 700; color: #4b5563; margin-bottom: 5px; }
input, select {
width: 100%;
height: 48px;
padding: 10px 15px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #fff;
transition: border-color 0.2s;
}
input:focus { border-color: var(--primary-color); outline: none; }
.btn-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
button {
width: 100%;
height: 54px;
border: none;
border-radius: 14px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.2s;
}
.btn-calc { background-color: var(--primary-color); color: white; }
.btn-whatsapp { background-color: var(--whatsapp-color); color: white; display: none; }
.btn-share-app { background-color: #f3f4f6; color: #374151; margin-top: 10px; font-size: 0.9rem; height: 44px; }
button:active { transform: scale(0.96); opacity: 0.9; }
.results {
margin-top: 25px;
padding-top: 20px;
border-top: 2px solid #f3f4f6;
display: none;
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-box { background: #f8fafc; padding: 15px; border-radius: 12px; border: 1px solid #e2e8f0; text-align: center; }
.res-label { display: block; font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.res-val { display: block; font-size: 1.2rem; font-weight: 800; color: var(--text-main); margin-top: 4px; }
.highlight { color: var(--success-color); }
.footer-note { text-align: center; font-size: 0.75rem; color: #9ca3af; margin-top: 20px; }
</style>
</head>
<body>
<div class="card">
<h2>Lager-Verwaltung</h2>
<div class="input-group">
<label>Ist-Bestand (Geliefert)</label>
<input type="number" id="quantity" inputmode="numeric" placeholder="z.B. 2400">
</div>
<div class="input-group">
<label>Stück pro Karton</label>
<input type="number" id="perBox" inputmode="numeric" placeholder="z.B. 12">
</div>
<div class="input-group">
<label>Verbrauchte Menge</label>
<input type="number" id="toProcess" inputmode="numeric" placeholder="z.B. 400">
</div>
<div class="input-group">
<label>Paletten-Schema (Kartons/Reihe)</label>
<select id="stacking">
<option value="4">4er Reihe (Standard)</option>
<option value="7">7er Reihe (Spezial)</option>
<option value="9">9er Reihe (Groß)</option>
</select>
</div>
<div class="btn-stack">
<button class="btn-calc" onclick="calculate()">🚀 Berechnen</button>
<button class="btn-whatsapp" id="waBtn" onclick="sendResultWhatsApp()">
📲 Ergebnis an Team senden
</button>
</div>
<div id="results" class="results">
<div class="res-grid">
<div class="res-box">
<span class="res-label">Rest Flaschen</span>
<span class="res-val" id="r1">-</span>
</div>
<div class="res-box">
<span class="res-label">Volle Boxen</span>
<span class="res-val" id="r2">-</span>
</div>
<div class="res-box">
<span class="res-label">Einzel-Rest</span>
<span class="res-val highlight" id="r3">-</span>
</div>
<div class="res-box">
<span class="res-label">Reihen Pal.</span>
<span class="res-val" id="r4">-</span>
</div>
</div>
<button class="btn-share-app" onclick="shareAppLink()">
🔗 Tool mit Kollegen teilen
</button>
</div>
<div class="footer-note">Profi-Tool für iOS & Android</div>
</div>
<script>
let resultText = "";
function calculate() {
const q = parseInt(document.getElementById('quantity').value) || 0;
const pb = parseInt(document.getElementById('perBox').value) || 0;
const tp = parseInt(document.getElementById('toProcess').value) || 0;
const st = parseInt(document.getElementById('stacking').value);
if (pb <= 0) { alert("Bitte Stück pro Karton eingeben."); return; }
const remBottles = Math.max(0, q - tp);
const remBoxes = Math.floor(remBottles / pb);
const singleBottles = remBottles % pb;
const rows = Math.ceil(remBoxes / st);
const lastRowBoxes = remBoxes % st === 0 && remBoxes > 0 ? st : (remBoxes % st);
// UI Update
document.getElementById('r1').innerText = remBottles.toLocaleString();
document.getElementById('r2').innerText = remBoxes.toLocaleString();
document.getElementById('r3').innerText = singleBottles;
document.getElementById('r4').innerText = rows;
document.getElementById('results').style.display = 'block';
document.getElementById('waBtn').style.display = 'flex';
// Nachricht für WhatsApp (Ergebnis)
resultText = `📦 *LOGISTIK-CHECK* %0A` +
`--------------------------%0A` +
`✅ *Restbestand:* ${remBottles} Flaschen%0A` +
`📦 *Boxen:* ${remBoxes} voll%0A` +
`🍾 *Einzel:* ${singleBottles} Stück%0A` +
`--------------------------%0A` +
`🏗️ *Paletten-Reihen:* ${rows}%0A` +
`📍 *Letzte Reihe:* ${remBoxes > 0 ? lastRowBoxes : 0} Boxen`;
}
function sendResultWhatsApp() {
if (!resultText) return;
window.open(`https://wa.me/?text=${resultText}`, '_blank');
}
function shareAppLink() {
const url = window.location.href;
const text = `Hey, schau dir mal dieses praktische Tool für die Flaschen-Rücklagerung an: ${url}`;
window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
}
</script>
</body>
</html>