hjess/ti
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
ti/citti_indkoebsseddel.html

777 lines
45 KiB
HTML
Raw Permalink Normal View History

Nomad changes
2026-06-06 00:55:31 +02:00
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Citti Indkøbsseddel — Uge 23-25</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #f5f2ed;
--card: #ffffff;
--border: #e2ddd6;
--text: #1a1814;
--muted: #8a857c;
--accent: #c84b2f;
--accent-light: #f7ede9;
--green: #2d6a4f;
--green-light: #e8f4ee;
--amber: #92580a;
--amber-light: #fef3e2;
--blue: #1d4e89;
--blue-light: #e8f0f9;
--mono: 'DM Mono', monospace;
--sans: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.5;
padding: 2rem 1rem 4rem;
}
.page { max-width: 860px; margin: 0 auto; }
header {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--text);
}
.header-left h1 {
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 0.5rem;
}
.header-left h1 span { color: var(--accent); }
.header-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-size: 13px;
color: var(--muted);
}
.header-meta strong { color: var(--text); }
.savings-card {
background: var(--text);
color: white;
border-radius: 12px;
padding: 1rem 1.25rem;
text-align: right;
min-width: 180px;
}
.savings-card .label { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.savings-card .amount { font-size: 2rem; font-weight: 600; font-family: var(--mono); letter-spacing: -0.02em; color: #7de8b0; }
.savings-card .sublabel { font-size: 11px; opacity: 0.5; margin-top: 2px; }
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 2rem;
}
.stat {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.875rem 1rem;
}
.stat .s-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.stat .s-val { font-size: 1.5rem; font-weight: 600; font-family: var(--mono); letter-spacing: -0.02em; }
.stat .s-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.section { margin-bottom: 1.5rem; }
.section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 0.6rem 0.875rem;
background: var(--text);
color: white;
border-radius: 8px 8px 0 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.section-header .emoji { font-size: 16px; }
.section-header .est { margin-left: auto; font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.items-table {
background: var(--card);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.item-row {
display: grid;
grid-template-columns: 28px 1fr 60px 90px 90px;
align-items: center;
gap: 0;
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.item-row:last-child { border-bottom: none; }
.item-row:hover { background: #faf9f7; }
.item-row.checked { opacity: 0.45; }
.item-row.checked .item-name { text-decoration: line-through; }
.item-check {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0 0.75rem 0.875rem;
}
.item-check input[type=checkbox] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.item-name {
padding: 0.75rem 0.5rem;
font-size: 14px;
}
.item-name .note {
font-size: 11px;
color: var(--muted);
display: block;
margin-top: 1px;
}
.badge {
display: inline-block;
font-size: 10px;
padding: 1px 6px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
font-weight: 500;
}
.badge-card { background: var(--blue-light); color: var(--blue); }
.badge-kasse { background: var(--amber-light); color: var(--amber); }
.item-qty {
padding: 0.75rem 0.5rem;
font-size: 12px;
color: var(--muted);
font-family: var(--mono);
text-align: center;
}
.item-est {
padding: 0.75rem 0.5rem;
font-size: 13px;
font-family: var(--mono);
color: var(--muted);
text-align: right;
}
.item-actual {
padding: 0.5rem 0.875rem 0.5rem 0.5rem;
}
.item-actual input {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 8px;
font-size: 13px;
font-family: var(--mono);
background: var(--bg);
color: var(--text);
text-align: right;
outline: none;
transition: border-color 0.15s, background 0.15s;
}
.item-actual input:focus {
border-color: var(--accent);
background: white;
}
.item-actual input.has-value {
background: var(--green-light);
border-color: #a8d5bc;
color: var(--green);
font-weight: 500;
}
.section-total {
display: grid;
grid-template-columns: 28px 1fr 60px 90px 90px;
align-items: center;
background: #f7f5f2;
border-top: 1px solid var(--border);
padding: 0.5rem 0;
}
.section-total .st-label {
grid-column: 1/4;
padding: 0 0.5rem 0 0.875rem;
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-total .st-est {
font-size: 13px;
font-family: var(--mono);
font-weight: 500;
color: var(--muted);
text-align: right;
padding: 0 0.5rem;
}
.section-total .st-actual {
font-size: 13px;
font-family: var(--mono);
font-weight: 600;
color: var(--green);
text-align: right;
padding: 0 0.875rem 0 0.5rem;
}
.col-headers {
display: grid;
grid-template-columns: 28px 1fr 60px 90px 90px;
background: #f0ece6;
border: 1px solid var(--border);
border-top: none;
padding: 4px 0;
}
.col-h {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 500;
}
.col-h:nth-child(1) { padding-left: 0.875rem; }
.col-h:nth-child(2) { padding-left: 0.5rem; }
.col-h:nth-child(3) { text-align: center; padding: 0 0.5rem; }
.col-h:nth-child(4) { text-align: right; padding: 0 0.5rem; }
.col-h:nth-child(5) { text-align: right; padding: 0 0.875rem 0 0.5rem; }
.rema-section {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.rema-title {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 8px;
}
.rema-items { display: flex; flex-wrap: wrap; gap: 6px; }
.rema-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
transition: background 0.15s;
}
.rema-item:hover { background: #eae6e0; }
.rema-item.checked { opacity: 0.4; text-decoration: line-through; }
.rema-item input { width: 14px; height: 14px; accent-color: var(--accent); }
.freezer-section {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.freezer-header {
background: var(--blue);
color: white;
padding: 0.6rem 1rem;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 8px;
}
.freezer-grid {
display: grid;
grid-template-columns: 1fr 80px 100px 100px;
font-size: 13px;
}
.fh { padding: 6px 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; background: #f0ece6; border-bottom: 1px solid var(--border); }
.fc { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fc.num { text-align: right; font-family: var(--mono); }
.fc.bold { font-weight: 600; background: #faf9f7; }
.fc.highlight { color: var(--green); font-weight: 600; }
.notes-section {
background: var(--amber-light);
border: 1px solid #f0d8a0;
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.notes-title { font-size: 13px; font-weight: 500; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.notes-list { display: flex; flex-direction: column; gap: 4px; }
.notes-list li { font-size: 13px; color: #6b4a0a; list-style: none; padding-left: 1.25rem; position: relative; }
.notes-list li::before { content: '→'; position: absolute; left: 0; color: var(--amber); }
.summary-section {
background: var(--text);
color: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.summary-title { font-size: 13px; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; }
.summary-grid {
display: grid;
grid-template-columns: 1fr 100px 100px;
font-size: 13px;
gap: 0;
}
.sg-h { font-size: 11px; opacity: 0.4; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 8px; }
.sg-h.num { text-align: right; }
.sg-row { display: contents; }
.sg-label { padding: 5px 0; opacity: 0.75; border-top: 1px solid rgba(255,255,255,0.08); }
.sg-est { padding: 5px 0; text-align: right; font-family: var(--mono); opacity: 0.5; border-top: 1px solid rgba(255,255,255,0.08); }
.sg-actual { padding: 5px 0; text-align: right; font-family: var(--mono); color: #7de8b0; border-top: 1px solid rgba(255,255,255,0.08); }
.sg-total { padding: 10px 0 0; font-weight: 600; font-size: 15px; border-top: 2px solid rgba(255,255,255,0.2); margin-top: 4px; }
.sg-total-est { padding: 10px 0 0; text-align: right; font-family: var(--mono); font-weight: 600; font-size: 15px; border-top: 2px solid rgba(255,255,255,0.2); margin-top: 4px; }
.sg-total-actual { padding: 10px 0 0; text-align: right; font-family: var(--mono); font-weight: 600; font-size: 15px; color: #7de8b0; border-top: 2px solid rgba(255,255,255,0.2); margin-top: 4px; }
.savings-row {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255,255,255,0.15);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.sav-box { background: rgba(255,255,255,0.07); border-radius: 8px; padding: 0.875rem 1rem; }
.sav-box .sb-label { font-size: 11px; opacity: 0.5; margin-bottom: 4px; }
.sav-box .sb-val { font-size: 1.5rem; font-weight: 600; font-family: var(--mono); color: #7de8b0; letter-spacing: -0.02em; }
.sav-box .sb-sub { font-size: 11px; opacity: 0.4; margin-top: 2px; }
footer {
text-align: center;
font-size: 12px;
color: var(--muted);
padding-top: 1rem;
border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
.stats-row { grid-template-columns: repeat(2, 1fr); }
header { grid-template-columns: 1fr; }
.savings-card { text-align: left; }
.header-left h1 { font-size: 1.5rem; }
.savings-row { grid-template-columns: 1fr; }
.summary-grid { grid-template-columns: 1fr 80px 80px; }
}
</style>
</head>
<body>
<div class="page">
<header>
<div class="header-left">
<h1>Citti <span>Indkøbsseddel</span></h1>
<div class="header-meta">
<span><strong>Uge 23–25</strong> · 03.06–23.06.2026</span>
<span>Åbent man–lør 08–20</span>
<span>Langberger Weg 4, Flensburg</span>
<span>1 EUR ≈ 7,46 DKK</span>
</div>
</div>
<div class="savings-card">
<div class="label">Estimeret besparelse</div>
<div class="amount" id="total-savings">~1.800</div>
<div class="sublabel">kr. vs. dansk normalpris</div>
</div>
</header>
<div class="stats-row">
<div class="stat">
<div class="s-label">Aftensmadsdage</div>
<div class="s-val">~40</div>
<div class="s-sub">fra én tur</div>
</div>
<div class="stat">
<div class="s-label">Kødportioner</div>
<div class="s-val">24</div>
<div class="s-sub">à 500g i fryseren</div>
</div>
<div class="stat">
<div class="s-label">Estimeret total</div>
<div class="s-val" style="font-size:1.2rem">~4.400</div>
<div class="s-sub">kr. inkl. Rema</div>
</div>
<div class="stat">
<div class="s-label">Pr. aftensmad</div>
<div class="s-val">~110</div>
<div class="s-sub">kr. for 2–3 pers.</div>
</div>
</div>
<!-- KØD & FISK -->
<div class="section">
<div class="section-header"><span class="emoji">🥩</span> Kød & fisk <span class="est">est. ~1.580 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table" id="sec-koed">
<div class="item-row" data-est="605.94"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Entrecote ½ kg<span class="note">Frisk sydamerikansk <span class="badge badge-card">CITTI CARD</span></span></div><div class="item-qty">6 × ½ kg</div><div class="item-est">605,94</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="191.94"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Nakkekoteletter ½ kg<span class="note">Med/uden krydderi</span></div><div class="item-qty">6 × ½ kg</div><div class="item-est">191,94</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="359.94"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Kyllingebryst ½ kg<span class="note">Texas-marinade</span></div><div class="item-qty">6 × ½ kg</div><div class="item-est">359,94</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="240"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Hakket oksekød<span class="note">Køddisk — spørg personalet</span></div><div class="item-qty">3 kg</div><div class="item-est">~240</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="167.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Rumpsteak ½ kg<span class="note">Modnet, tyske kvier</span></div><div class="item-qty">1 × ½ kg</div><div class="item-est">167,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="112"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Lakseside premium<span class="note">15,99/100g · tag ~700g</span></div><div class="item-qty">~700g</div><div class="item-est">~112</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="74.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Gerstand grillpølser<span class="note">10 stk. à 100g</span></div><div class="item-qty">1 kg</div><div class="item-est">74,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="74.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Steinemann bacon i skiver<span class="note">Røget · fryseegnet</span></div><div class="item-qty">1 kg</div><div class="item-est">74,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- FROSTGRØNT -->
<div class="section">
<div class="section-header"><span class="emoji">🧊</span> Frostgrønt · 3 kg poser <span class="est">est. ~100 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="40"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Wok-mix blandede grøntsager</div><div class="item-qty">3 kg</div><div class="item-est">~35–45</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="30"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Ærter</div><div class="item-qty">3 kg</div><div class="item-est">~25–35</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="35"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Broccoli</div><div class="item-qty">3 kg</div><div class="item-est">~30–40</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="0"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Hvad der ellers frister<span class="note">Tjek frysedisken</span></div><div class="item-qty">—</div><div class="item-est">—</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- MEJERI & FROST -->
<div class="section">
<div class="section-header"><span class="emoji">🧀</span> Mejeri, ost & frost <span class="est">est. ~185 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="44.97"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Greco Schaffeta feta 150g<span class="note">70% fåremælk</span></div><div class="item-qty">3 stk.</div><div class="item-est">44,97</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="59.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Frutti di Mare<span class="note">Rejer, muslinger, blæksprutte</span></div><div class="item-qty">1 kg</div><div class="item-est">59,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="79.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Sorte tigerrejer frost<span class="note">Rå, pillede · wok/grill</span></div><div class="item-qty">1 kg</div><div class="item-est">79,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- PASTA -->
<div class="section">
<div class="section-header"><span class="emoji">🍝</span> Pasta frisk køl · Gut & Günstig ~800g <span class="est">est. ~160 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="55"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tortelloni Skinke</div><div class="item-qty">2 stk.</div><div class="item-est">~25–30</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="55"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tortelloni Spinat & ricotta</div><div class="item-qty">2 stk.</div><div class="item-est">~25–30</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="55"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tortelloni valgfri variant<span class="note">Svampe, tomaat-mozzarella o.l.</span></div><div class="item-qty">2 stk.</div><div class="item-est">~25–30</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- GRØNT & TØRVARER -->
<div class="section">
<div class="section-header"><span class="emoji">🥗</span> Grønt, olier & tørvarer <span class="est">est. ~245 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="74.95"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Avocado Hass<span class="note">Fra Peru, SanLucar</span></div><div class="item-qty">5 stk.</div><div class="item-est">74,95</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="99.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Bertolli olivenolie extra vergine</div><div class="item-qty">1L</div><div class="item-est">99,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="44.97"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Mutti passata<span class="note">Natur eller basilikum</span></div><div class="item-qty">3 × 700g</div><div class="item-est">44,97</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="75.96"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Rustichella d'Abruzzo pasta</div><div class="item-qty">4 × 500g</div><div class="item-est">75,96</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- KONSERVES -->
<div class="section">
<div class="section-header"><span class="emoji">🥫</span> Konserves — tomat & basis <span class="est">est. ~185 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="50"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Hakkede tomater 400g</div><div class="item-qty">8 dåser</div><div class="item-est">~50</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="25"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Flåede tomater 400g</div><div class="item-qty">4 dåser</div><div class="item-est">~25</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="35"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tomatpuré / koncentrat 200g</div><div class="item-qty">4 stk.</div><div class="item-est">~35</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="47"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tun i olie 80g</div><div class="item-qty">6 dåser</div><div class="item-est">~47</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="28"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Majs 340g</div><div class="item-qty">4 dåser</div><div class="item-est">~28</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- INDISK -->
<div class="section">
<div class="section-header"><span class="emoji">🌶️</span> Indisk & karry <span class="est">est. ~160 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="70"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tikka masala sauce<span class="note">350–500g · Taste of India / Deluxe</span></div><div class="item-qty">5 stk.</div><div class="item-est">~70</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="20"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Karrypasta rød 50g</div><div class="item-qty">2 stk.</div><div class="item-est">~20</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="20"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Karrypasta grøn 50g</div><div class="item-qty">2 stk.</div><div class="item-est">~20</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="20"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Karrypasta gul / mild 50g</div><div class="item-qty">2 stk.</div><div class="item-est">~20</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="24"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Mango chutney 300g</div><div class="item-qty">2 stk.</div><div class="item-est">~24</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="28"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Basmatiris 1 kg</div><div class="item-qty">2 stk.</div><div class="item-est">~28</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- MEXICANSK -->
<div class="section">
<div class="section-header"><span class="emoji">🌮</span> Mexicansk & asiatisk <span class="est">est. ~185 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="33"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tacokrydderi pakke</div><div class="item-qty">6 stk.</div><div class="item-est">~33</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="16"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Jalapeños på glas 200g</div><div class="item-qty">2 stk.</div><div class="item-est">~16</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="19"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Salsa / tomatdip 300g</div><div class="item-qty">2 stk.</div><div class="item-est">~19</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="24"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Tacoshells / tortilla wraps</div><div class="item-qty">2 stk.</div><div class="item-est">~24</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="47"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Kokosmælk 400ml</div><div class="item-qty">6 dåser</div><div class="item-est">~47</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="10"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Sojasauce 250ml</div><div class="item-qty">1 stk.</div><div class="item-est">~10</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="14"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Bambusskud / vandkastanjer</div><div class="item-qty">2 dåser</div><div class="item-est">~14</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- DRIKKEVARER -->
<div class="section">
<div class="section-header"><span class="emoji">🍺</span> Drikkevarer <span class="est">est. ~530 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="79"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Carlsberg / Carls Special 0,33L <span class="badge badge-kasse">Hel kasse</span></div><div class="item-qty">24 stk.</div><div class="item-est">79,00</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="49.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Pepsi Max 1,5L <span class="badge badge-kasse">Hel kasse</span></div><div class="item-qty">6 stk.</div><div class="item-est">49,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="54.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Faxe Kondi Appelsin 0,33L <span class="badge badge-kasse">Hel kasse</span></div><div class="item-qty">24 stk.</div><div class="item-est">54,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="159.96"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Kühling hvid-/rosévin 0,75L <span class="badge badge-card">CITTI CARD · øko</span></div><div class="item-qty">4 stk.</div><div class="item-est">159,96</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="59.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Grauburgunder hvidvin 1,5L <span class="badge badge-card">CITTI CARD</span></div><div class="item-qty">1 stk.</div><div class="item-est">59,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="104.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Eduscho Caffè Crema hele bønner</div><div class="item-qty">1 kg</div><div class="item-est">104,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- HUSHOLDNING -->
<div class="section">
<div class="section-header"><span class="emoji">🏠</span> Husholdning & skafferi <span class="est">est. ~535 kr.</span></div>
<div class="col-headers"><div class="col-h"></div><div class="col-h">Vare</div><div class="col-h">Antal</div><div class="col-h">Estimat</div><div class="col-h">Faktisk</div></div>
<div class="items-table">
<div class="item-row" data-est="199.90"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Ariel vaskemiddel<span class="note">100–111 vaske · fra 1,80 kr./vask</span></div><div class="item-qty">1 stk.</div><div class="item-est">199,90</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="59.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Finish opvasketabs<span class="note">64 stk. · 0,94 kr./stk.</span></div><div class="item-qty">1 stk.</div><div class="item-est">59,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="79.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">BASE Culinar cashewnødder</div><div class="item-qty">1 kg</div><div class="item-est">79,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="49.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Nutella 1 kg glas <span class="badge badge-card">CITTI CARD</span></div><div class="item-qty">1 stk.</div><div class="item-est">49,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="99.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Lotus Biscoff smørepålæg 1,6 kg <span class="badge badge-card">CITTI CARD</span></div><div class="item-qty">1 stk.</div><div class="item-est">99,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
<div class="item-row" data-est="44.99"><div class="item-check"><input type="checkbox" onchange="toggleRow(this)"></div><div class="item-name">Haribo vingummi / lakrids<span class="note">800–1000g</span></div><div class="item-qty">1 stk.</div><div class="item-est">44,99</div><div class="item-actual"><input type="number" placeholder="—" oninput="updateActual(this)" step="0.01"></div></div>
</div>
</div>
<!-- REMA -->
<div class="rema-section">
<div class="rema-title">🛒 Køb i Rema1000 / Netto</div>
<div class="rema-items">
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Frisk frugt & grøntsager</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Løg & hvidløg</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Kartofler</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Mælk, æg, smør</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Brød & pålæg</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Mel, gær, bagepulver</label>
<label class="rema-item"><input type="checkbox" onchange="this.closest('.rema-item').classList.toggle('checked')"> Vaniljesukker</label>
</div>
</div>
<!-- NOTER -->
<div class="notes-section">
<div class="notes-title">⚠ Noter</div>
<ul class="notes-list">
<li>Varer med "Hel kasse" sælges kun i hele kasser</li>
<li>CITTI CARD er gratis — hent ved kassen eller citti.dk/citti-card</li>
<li>Hakket oksekød: spørg i køddisken — ikke i tilbudsavisen</li>
<li>Karrypasta: tjek den asiatiske afdeling — ikke altid i fast sortiment</li>
<li>Husk fryseposer + marker hjemmefra — 500g portioner til kød, ~350g til grønt</li>
</ul>
</div>
<!-- FRYSER -->
<div class="freezer-section">
<div class="freezer-header">📦 Fryseroversigt</div>
<div class="freezer-grid">
<div class="fh">Vare</div><div class="fh" style="text-align:right">Total</div><div class="fh" style="text-align:right">Portioner</div><div class="fh" style="text-align:right">Aftensmadsdage</div>
<div class="fc">Entrecote</div><div class="fc num">3 kg</div><div class="fc num">6 poser</div><div class="fc num">6</div>
<div class="fc">Nakkekoteletter</div><div class="fc num">3 kg</div><div class="fc num">6 poser</div><div class="fc num">6</div>
<div class="fc">Kyllingebryst</div><div class="fc num">3 kg</div><div class="fc num">6 poser</div><div class="fc num">6</div>
<div class="fc">Hakket oksekød</div><div class="fc num">3 kg</div><div class="fc num">6 poser</div><div class="fc num">6</div>
<div class="fc">Tortelloni</div><div class="fc num">~4,8 kg</div><div class="fc num">6 pakker</div><div class="fc num">6</div>
<div class="fc">Wok-mix grønt</div><div class="fc num">3 kg</div><div class="fc num">~8 port.</div><div class="fc num" style="color:var(--muted)">tilbehør</div>
<div class="fc">Ærter</div><div class="fc num">3 kg</div><div class="fc num">~8 port.</div><div class="fc num" style="color:var(--muted)">tilbehør</div>
<div class="fc">Broccoli</div><div class="fc num">3 kg</div><div class="fc num">~8 port.</div><div class="fc num" style="color:var(--muted)">tilbehør</div>
<div class="fc bold">Total kød</div><div class="fc num bold">12 kg</div><div class="fc num bold">24 poser</div><div class="fc num highlight">~30 aftener</div>
</div>
</div>
<!-- SAMMENFATNING -->
<div class="summary-section">
<div class="summary-title">Prissammenfatning</div>
<div class="summary-grid">
<div class="sg-h">Kategori</div><div class="sg-h num">Estimat</div><div class="sg-h num">Faktisk</div>
<div class="sg-label">Kød & fisk</div><div class="sg-est">~1.580</div><div class="sg-actual" id="s-koed">—</div>
<div class="sg-label">Frostgrønt</div><div class="sg-est">~100</div><div class="sg-actual" id="s-frost">—</div>
<div class="sg-label">Mejeri, ost & frost</div><div class="sg-est">~185</div><div class="sg-actual" id="s-mejeri">—</div>
<div class="sg-label">Pasta (frisk)</div><div class="sg-est">~160</div><div class="sg-actual" id="s-pasta">—</div>
<div class="sg-label">Grønt, olier & tørvarer</div><div class="sg-est">~245</div><div class="sg-actual" id="s-groent">—</div>
<div class="sg-label">Konserves</div><div class="sg-est">~185</div><div class="sg-actual" id="s-konserves">—</div>
<div class="sg-label">Indisk & karry</div><div class="sg-est">~160</div><div class="sg-actual" id="s-indisk">—</div>
<div class="sg-label">Mexicansk & asiatisk</div><div class="sg-est">~185</div><div class="sg-actual" id="s-mex">—</div>
<div class="sg-label">Drikkevarer</div><div class="sg-est">~530</div><div class="sg-actual" id="s-drikke">—</div>
<div class="sg-label">Husholdning & skafferi</div><div class="sg-est">~535</div><div class="sg-actual" id="s-hus">—</div>
<div class="sg-total">Total Citti</div><div class="sg-total-est">~4.065</div><div class="sg-total-actual" id="s-total-citti">—</div>
<div class="sg-label" style="opacity:0.5">Rema1000 supplement</div><div class="sg-est">~350</div><div class="sg-actual">—</div>
<div class="sg-total">Samlet total</div><div class="sg-total-est">~4.400</div><div class="sg-total-actual" id="s-total-all">—</div>
</div>
<div class="savings-row">
<div class="sav-box">
<div class="sb-label">Faktisk betalt</div>
<div class="sb-val" id="sav-paid">—</div>
<div class="sb-sub">kr. hos Citti</div>
</div>
<div class="sav-box">
<div class="sb-label">Besparelse vs. DK normalpris</div>
<div class="sb-val" id="sav-saved">~1.800</div>
<div class="sb-sub">kr. estimeret</div>
</div>
<div class="sav-box">
<div class="sb-label">Pr. aftensmad</div>
<div class="sb-val" id="sav-permeal">~110</div>
<div class="sb-sub">kr. for 2–3 pers.</div>
</div>
</div>
</div>
<footer>Citti Flensborg · Langberger Weg 4 · citti.dk · Tilbud gælder 03.06–23.06.2026</footer>
</div>
<script>
function toggleRow(cb) {
cb.closest('.item-row').classList.toggle('checked', cb.checked);
}
function updateActual(input) {
const val = parseFloat(input.value);
input.classList.toggle('has-value', !isNaN(val) && val > 0);
recalcAll();
}
const sectionMap = [
{ id: 's-koed', rows: 8 },
{ id: 's-frost', rows: 4 },
{ id: 's-mejeri', rows: 3 },
{ id: 's-pasta', rows: 3 },
{ id: 's-groent', rows: 4 },
{ id: 's-konserves', rows: 5 },
{ id: 's-indisk', rows: 6 },
{ id: 's-mex', rows: 7 },
{ id: 's-drikke', rows: 6 },
{ id: 's-hus', rows: 6 },
];
const DK_SAVINGS_RATIO = 0.35;
function recalcAll() {
const allInputs = document.querySelectorAll('.item-actual input');
let totalActual = 0;
let totalEst = 0;
let hasAny = false;
allInputs.forEach(input => {
const row = input.closest('.item-row');
const est = parseFloat(row.dataset.est) || 0;
const val = parseFloat(input.value);
totalEst += est;
if (!isNaN(val) && val > 0) {
totalActual += val;
hasAny = true;
}
});
const sections = document.querySelectorAll('.items-table');
const secIds = ['s-koed','s-frost','s-mejeri','s-pasta','s-groent','s-konserves','s-indisk','s-mex','s-drikke','s-hus'];
sections.forEach((sec, i) => {
const inputs = sec.querySelectorAll('.item-actual input');
let secActual = 0; let secHas = false;
inputs.forEach(inp => {
const v = parseFloat(inp.value);
if (!isNaN(v) && v > 0) { secActual += v; secHas = true; }
});
const el = document.getElementById(secIds[i]);
if (el) el.textContent = secHas ? Math.round(secActual).toLocaleString('da-DK') : '—';
});
const cittiEl = document.getElementById('s-total-citti');
const allEl = document.getElementById('s-total-all');
const paidEl = document.getElementById('sav-paid');
const savedEl = document.getElementById('sav-saved');
const mealEl = document.getElementById('sav-permeal');
const headerSavings = document.getElementById('total-savings');
if (hasAny) {
const withRema = totalActual + 350;
cittiEl.textContent = Math.round(totalActual).toLocaleString('da-DK');
allEl.textContent = Math.round(withRema).toLocaleString('da-DK');
paidEl.textContent = Math.round(totalActual).toLocaleString('da-DK');
const saved = Math.round(totalActual * DK_SAVINGS_RATIO);
savedEl.textContent = saved.toLocaleString('da-DK');
headerSavings.textContent = saved.toLocaleString('da-DK');
mealEl.textContent = Math.round(withRema / 40);
} else {
cittiEl.textContent = '—';
allEl.textContent = '—';
paidEl.textContent = '—';
savedEl.textContent = '~1.800';
headerSavings.textContent = '~1.800';
mealEl.textContent = '~110';
}
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink