777 lines
45 KiB
HTML
777 lines
45 KiB
HTML
<!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>
|