682 lines
19 KiB
HTML
682 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mobilkvitto</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #0f172a;
|
|
--card: #1e293b;
|
|
--border: #334155;
|
|
--text: #f1f5f9;
|
|
--text-dim: #94a3b8;
|
|
--accent: #3b82f6;
|
|
--green: #22c55e;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.logo span { color: var(--accent); }
|
|
|
|
.lang-toggle {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lang-btn {
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.lang-btn.active {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Card */
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card-header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* Fields */
|
|
.field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.field label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.field input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
background: rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.field input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.field input::placeholder {
|
|
color: #475569;
|
|
}
|
|
|
|
.field-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.divider {
|
|
border: none;
|
|
border-top: 1px dashed var(--border);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Summary */
|
|
.summary {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.summary-row:last-child {
|
|
margin-bottom: 0;
|
|
padding-top: 10px;
|
|
border-top: 1px solid rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary-total .summary-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.summary-total .summary-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--green);
|
|
}
|
|
|
|
.price-input-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-input-wrap input {
|
|
padding-right: 50px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
width: 130px;
|
|
text-align: right;
|
|
}
|
|
|
|
.price-input-wrap::after {
|
|
content: 'SEK';
|
|
position: absolute;
|
|
right: 14px;
|
|
color: var(--text-dim);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Print Button */
|
|
.print-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: #1e293b;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.print-btn:hover { background: #334155; }
|
|
|
|
/* Footer */
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 11px;
|
|
color: #475569;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.date-field {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.date-field .field { flex: 1; }
|
|
|
|
@media (max-width: 400px) {
|
|
body { padding: 12px; }
|
|
.card { padding: 16px; }
|
|
.field-row { grid-template-columns: 1fr; }
|
|
.date-field { flex-direction: column; gap: 0; }
|
|
}
|
|
|
|
/* =================== */
|
|
/* RECEIPT PRINT STYLES */
|
|
/* =================== */
|
|
@media print {
|
|
@page {
|
|
size: A4;
|
|
margin: 10mm 15mm 15mm 15mm;
|
|
}
|
|
@page:not(:first) {
|
|
margin-top: 10mm;
|
|
}
|
|
@page:first {
|
|
margin-top: 0;
|
|
}
|
|
|
|
body {
|
|
background: white !important;
|
|
color: #000 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
font-size: 12px !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
width: 100% !important;
|
|
}
|
|
html { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
|
body::before { content: '' !important; }
|
|
body::after { content: '' !important; }
|
|
@page { margin: 10mm 15mm 15mm 15mm !important; }
|
|
.card-subtitle { font-size: 11px !important; color: #000 !important; }
|
|
#lblSeller, #lblBuyer, #lblModel, #lblIMEI, #lblCondition, #lblDate, #lblLocation, #lblTotal, #lblNotes { color: #000 !important; font-weight: 600 !important; }
|
|
|
|
.container {
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.no-print { display: none !important; }
|
|
|
|
.header { display: none !important; }
|
|
|
|
.card {
|
|
background: white !important;
|
|
border: 2px solid #1e293b !important;
|
|
border-radius: 8px !important;
|
|
padding: 30px !important;
|
|
margin: 0 auto !important;
|
|
max-width: 170mm !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.card-header {
|
|
text-align: center;
|
|
padding: 0 0 20px 0 !important;
|
|
margin-bottom: 20px !important;
|
|
border-bottom: 2px solid #1e293b !important;
|
|
border-top: none !important;
|
|
}
|
|
|
|
.receipt-icon { display: none !important; }
|
|
|
|
.card-title {
|
|
font-size: 24px !important;
|
|
font-weight: 700 !important;
|
|
text-transform: uppercase !important;
|
|
margin-bottom: 4px !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 12px !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.field-row {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1fr !important;
|
|
gap: 15px !important;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
.field label {
|
|
font-size: 10px !important;
|
|
font-weight: 600 !important;
|
|
color: #000 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.5px !important;
|
|
margin-bottom: 6px !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.field input {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-bottom: 1px solid #ccc !important;
|
|
padding: 6px 0 !important;
|
|
color: #000 !important;
|
|
font-size: 13px !important;
|
|
font-family: inherit !important;
|
|
border-radius: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.divider {
|
|
border: none !important;
|
|
border-top: 1px solid #e5e7eb !important;
|
|
margin: 20px 0 !important;
|
|
}
|
|
|
|
.summary {
|
|
background: #f8fafc !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
border-radius: 8px !important;
|
|
padding: 20px !important;
|
|
margin: 20px 0 !important;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 13px !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.summary-total .summary-label {
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.summary-total .summary-value {
|
|
font-size: 28px !important;
|
|
font-weight: 700 !important;
|
|
color: #16a34a !important;
|
|
}
|
|
|
|
.price-input-wrap::after {
|
|
content: 'SEK' !important;
|
|
right: 0 !important;
|
|
position: static !important;
|
|
margin-left: 4px !important;
|
|
}
|
|
|
|
.price-input-wrap input {
|
|
width: 120px !important;
|
|
text-align: right !important;
|
|
padding: 4px 8px 4px 4px !important;
|
|
font-size: 20px !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.footer {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Receipt footer */
|
|
.receipt-footer {
|
|
display: block !important;
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed #000;
|
|
font-size: 9px;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.receipt-footer { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Screen Header -->
|
|
<div class="header no-print">
|
|
<div class="logo">Host<span>Pioneers</span></div>
|
|
<div class="lang-toggle">
|
|
<button class="lang-btn active" onclick="setLang('sv')" id="btnSv">SV</button>
|
|
<button class="lang-btn" onclick="setLang('en')" id="btnEn">EN</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receipt Card (shown on screen + print) -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="receipt-icon" style="display:none">📱</div>
|
|
<h1 class="card-title" id="title">Mobilkvitto</h1>
|
|
<p class="card-subtitle" id="subtitle">Kvitto för försäljning av begagnad mobiltelefon</p>
|
|
</div>
|
|
|
|
<!-- Parties -->
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label id="lblSeller">Säljare</label>
|
|
<input type="text" id="seller" placeholder="Namn">
|
|
</div>
|
|
<div class="field">
|
|
<label id="lblBuyer">Köpare</label>
|
|
<input type="text" id="buyer" placeholder="Namn">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Phone Details -->
|
|
<div class="field">
|
|
<label id="lblModel">Mobilmodell</label>
|
|
<input type="text" id="model" placeholder="t.ex. iPhone 15 Pro">
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label id="lblIMEI">IMEI-nummer</label>
|
|
<input type="text" id="imei" placeholder="15 siffror">
|
|
</div>
|
|
<div class="field">
|
|
<label id="lblCondition">Skick</label>
|
|
<input type="text" id="condition" placeholder="Bra/God">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Date & Location -->
|
|
<div class="date-field">
|
|
<div class="field">
|
|
<label id="lblDate">Datum</label>
|
|
<input type="date" id="date">
|
|
</div>
|
|
<div class="field">
|
|
<label id="lblLocation">Plats</label>
|
|
<input type="text" id="location" placeholder="Stad">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Price -->
|
|
<div class="summary">
|
|
<div class="summary-row summary-total">
|
|
<span class="summary-label" id="lblTotal">Att betala</span>
|
|
<div class="price-input-wrap">
|
|
<input type="number" id="price" placeholder="0" oninput="updatePrice()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="field">
|
|
<label id="lblNotes">Anteckningar</label>
|
|
<input type="text" id="notes" style="color:#94a3b8;">
|
|
</div>
|
|
|
|
<!-- Print Button -->
|
|
<button class="print-btn no-print" onclick="window.print()" style="background:#1e293b;">
|
|
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
|
|
<span id="btnPrint">Spara som PDF / Skriv ut</span>
|
|
</button>
|
|
|
|
<!-- Receipt Footer (only visible when printing) -->
|
|
<div class="receipt-footer">
|
|
Detta kvitto är en privat överenskommelse mellan säljare och köpare. Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits.
|
|
</div>
|
|
|
|
<!-- Signature -->
|
|
<div class="sig-section" style="margin-top: 20px;">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;">
|
|
<!-- Säljare - Haitham's signature -->
|
|
<div>
|
|
<label style="font-size:10px;color:#000;font-weight:600;">Säljare</label>
|
|
<div style="padding-bottom:6px;">
|
|
<svg viewBox="0 0 280 55" style="width:100%;height:50px;overflow:visible;">
|
|
<text x="5" y="42" font-family="'Caveat', cursive" font-size="34" font-style="italic" fill="#1e3a5f" font-weight="400">Haitham Khalifa</text>
|
|
</svg>
|
|
</div>
|
|
<div style="font-size:11px;color:#000;">Haitham Khalifa</div>
|
|
</div>
|
|
<!-- Köpare - Empty for buyer -->
|
|
<div>
|
|
<label style="font-size:10px;color:#000;font-weight:600;">Köpare</label>
|
|
<div style="border-bottom:1px solid #334155;height:50px;"></div>
|
|
<div style="font-size:10px;color:#94a3b8;margin-top:4px;"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer no-print">
|
|
<p>Fyll i uppgifterna och spara som PDF eller skriv ut direkt.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-fill date
|
|
document.getElementById('date').valueAsDate = new Date();
|
|
|
|
const texts = {
|
|
sv: {
|
|
title: "Mobilkvitto",
|
|
subtitle: "Kvitto för försäljning av begagnad mobiltelefon",
|
|
lblSeller: "Säljare",
|
|
lblBuyer: "Köpare",
|
|
lblModel: "Mobilmodell",
|
|
lblIMEI: "IMEI-nummer",
|
|
lblCondition: "Skick",
|
|
lblDate: "Datum",
|
|
lblLocation: "Plats",
|
|
lblTotal: "Att betala",
|
|
lblNotes: "Anteckningar",
|
|
btnPrint: "Spara som PDF / Skriv ut",
|
|
sellerPlaceholder: "Namn",
|
|
buyerPlaceholder: "Namn",
|
|
modelPlaceholder: "t.ex. iPhone 15 Pro",
|
|
imeiPlaceholder: "15 siffror",
|
|
conditionPlaceholder: "Bra/God",
|
|
locationPlaceholder: "Stad",
|
|
notesPlaceholder: "Valfritt",
|
|
footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
|
|
footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
|
|
},
|
|
en: {
|
|
title: "Mobile Receipt",
|
|
subtitle: "Receipt for sale of used mobile phone",
|
|
lblSeller: "Seller",
|
|
lblBuyer: "Buyer",
|
|
lblModel: "Phone Model",
|
|
lblIMEI: "IMEI Number",
|
|
lblCondition: "Condition",
|
|
lblDate: "Date",
|
|
lblLocation: "Location",
|
|
lblTotal: "Total",
|
|
lblNotes: "Notes",
|
|
btnPrint: "Save as PDF / Print",
|
|
sellerPlaceholder: "Full Name",
|
|
buyerPlaceholder: "Full Name",
|
|
modelPlaceholder: "e.g. iPhone 15 Pro",
|
|
imeiPlaceholder: "15 digits",
|
|
conditionPlaceholder: "Good/Fair",
|
|
locationPlaceholder: "City",
|
|
notesPlaceholder: "Optional",
|
|
footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
|
|
footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
|
|
}
|
|
};
|
|
|
|
function setLang(lang) {
|
|
const t = texts[lang];
|
|
|
|
document.getElementById('title').innerText = t.title;
|
|
document.getElementById('subtitle').innerText = t.subtitle;
|
|
document.getElementById('lblSeller').innerText = t.lblSeller;
|
|
document.getElementById('lblBuyer').innerText = t.lblBuyer;
|
|
document.getElementById('lblModel').innerText = t.lblModel;
|
|
document.getElementById('lblIMEI').innerText = t.lblIMEI;
|
|
document.getElementById('lblCondition').innerText = t.lblCondition;
|
|
document.getElementById('lblDate').innerText = t.lblDate;
|
|
document.getElementById('lblLocation').innerText = t.lblLocation;
|
|
document.getElementById('lblTotal').innerText = t.lblTotal;
|
|
document.getElementById('lblNotes').innerText = t.lblNotes;
|
|
document.getElementById('btnPrint').innerText = t.btnPrint;
|
|
|
|
document.getElementById('seller').placeholder = t.sellerPlaceholder;
|
|
document.getElementById('buyer').placeholder = t.buyerPlaceholder;
|
|
document.getElementById('model').placeholder = t.modelPlaceholder;
|
|
document.getElementById('imei').placeholder = t.imeiPlaceholder;
|
|
document.getElementById('condition').placeholder = t.conditionPlaceholder;
|
|
document.getElementById('location').placeholder = t.locationPlaceholder;
|
|
document.getElementById('notes').placeholder = t.notesPlaceholder;
|
|
|
|
document.getElementById('btnSv').classList.toggle('active', lang === 'sv');
|
|
document.getElementById('btnEn').classList.toggle('active', lang === 'en');
|
|
|
|
document.documentElement.lang = lang;
|
|
}
|
|
|
|
// Save/Load from localStorage
|
|
const FIELDS = ['seller', 'buyer', 'model', 'imei', 'condition', 'date', 'location', 'price', 'notes'];
|
|
|
|
function saveData() {
|
|
FIELDS.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) localStorage.setItem('receipt_' + id, el.value);
|
|
});
|
|
// Update signature seller display
|
|
const sellerEl = document.getElementById('seller');
|
|
const display = document.getElementById('sigSellerDisplay');
|
|
if (sellerEl && display) display.textContent = sellerEl.value || '—';
|
|
}
|
|
|
|
function loadData() {
|
|
FIELDS.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
const val = localStorage.getItem('receipt_' + id);
|
|
if (val) el.value = val;
|
|
}
|
|
});
|
|
// Update signature seller display
|
|
const sellerVal = localStorage.getItem('receipt_seller');
|
|
if (sellerVal) {
|
|
const display = document.getElementById('sigSellerDisplay');
|
|
if (display) display.textContent = sellerVal;
|
|
}
|
|
}
|
|
|
|
// Load on page load
|
|
document.addEventListener('DOMContentLoaded', loadData);
|
|
|
|
// Save on input
|
|
FIELDS.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.addEventListener('input', saveData);
|
|
});
|
|
|
|
function updatePrice() {}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |