2499 lines
78 KiB
HTML
2499 lines
78 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="da">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Checkout POC</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Regular.woff') format('woff');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Medium.woff') format('woff');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-SemiBold.woff') format('woff');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Bold.woff') format('woff');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
--color-border: #e0e0e0;
|
||
--color-surface: #fff;
|
||
--color-background: #f5f5f5;
|
||
--color-background-hover: #f0f0f0;
|
||
--color-background-alt: #fafafa;
|
||
--color-text: #333;
|
||
--color-text-secondary: #666;
|
||
--color-teal: #00897b;
|
||
--color-red: #e53935;
|
||
--transition-fast: 150ms ease;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--color-background);
|
||
font-size: 14px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.demo-trigger { padding: 20px; }
|
||
|
||
.demo-btn {
|
||
padding: 12px 24px;
|
||
background: var(--color-teal);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Overlay & Panel */
|
||
.overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.25);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 200ms, visibility 200ms;
|
||
z-index: 100;
|
||
}
|
||
.overlay.open { opacity: 1; visibility: visible; }
|
||
|
||
.panel {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 80%;
|
||
background: var(--color-background);
|
||
transform: translateX(100%);
|
||
transition: transform 200ms ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 101;
|
||
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
|
||
}
|
||
.panel.open { transform: translateX(0); }
|
||
|
||
/* Header */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
padding: 20px 28px;
|
||
background: var(--color-surface);
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.header-field { display: flex; align-items: center; gap: 10px; }
|
||
.header-label { color: var(--color-text-secondary); font-size: 13px; }
|
||
.header-value { font-weight: 500; font-size: 15px; }
|
||
.header-link { color: var(--color-teal); cursor: pointer; font-size: 13px; }
|
||
|
||
.header-select {
|
||
padding: 6px 28px 6px 10px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
|
||
appearance: none;
|
||
}
|
||
|
||
.header-close {
|
||
margin-left: auto;
|
||
background: none;
|
||
border: none;
|
||
font-size: 20px;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
/* Main layout */
|
||
.main {
|
||
flex: 1;
|
||
display: grid;
|
||
grid-template-columns: 20% 1fr 35%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar {
|
||
border-right: 1px solid var(--color-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--color-surface);
|
||
}
|
||
|
||
.search-box {
|
||
padding: 20px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 12px 14px 12px 40px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
|
||
}
|
||
|
||
.menu-section {
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.menu-item:hover { background: var(--color-background-hover); }
|
||
.menu-item.active { color: var(--color-teal); font-weight: 500; }
|
||
|
||
.categories {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.category {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.category:hover { background: var(--color-background-hover); color: var(--color-text); }
|
||
|
||
/* Cart area */
|
||
.cart-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background: var(--color-background);
|
||
}
|
||
|
||
.cart-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.cart-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.cart-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.cart-section-header {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--color-text-secondary);
|
||
padding: 0 4px 10px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cart-section-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* Cart footer with totals */
|
||
.cart-footer {
|
||
padding: 20px 24px;
|
||
background: var(--color-surface);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.cart-totals {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cart-total-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.cart-total-row .label {
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.cart-total-row .value {
|
||
font-family: var(--font-mono);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cart-total-row.grand {
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--color-border);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.cart-total-row.grand .label {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.cart-total-row.grand .value {
|
||
font-family: var(--font-mono);
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Cart item card */
|
||
.cart-item {
|
||
background: var(--color-surface);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
transition: box-shadow 200ms ease;
|
||
}
|
||
|
||
.cart-item.expanded {
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.cart-item-main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
transition: background 150ms ease;
|
||
}
|
||
|
||
.cart-item-main:hover {
|
||
background: var(--color-background-hover);
|
||
}
|
||
|
||
.cart-item.expanded .cart-item-main {
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.cart-item-main::after {
|
||
content: '';
|
||
width: 8px;
|
||
height: 8px;
|
||
border-right: 2px solid var(--color-text-secondary);
|
||
border-bottom: 2px solid var(--color-text-secondary);
|
||
transform: rotate(45deg);
|
||
transition: transform 200ms ease;
|
||
margin-left: 4px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.cart-item:hover .cart-item-main::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.cart-item.expanded .cart-item-main::after {
|
||
transform: rotate(-135deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Expandable edit section */
|
||
.cart-item-edit {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 250ms ease,
|
||
padding 300ms ease;
|
||
padding: 0 16px;
|
||
background: var(--color-background-alt);
|
||
}
|
||
|
||
.cart-item.expanded .cart-item-edit {
|
||
max-height: 200px;
|
||
opacity: 1;
|
||
padding: 16px;
|
||
}
|
||
|
||
.edit-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.edit-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.edit-field {
|
||
flex: 1;
|
||
}
|
||
|
||
.edit-field-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.edit-field-input {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
transition: border-color 150ms ease;
|
||
}
|
||
|
||
.edit-field-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
.edit-field-input.mono {
|
||
font-family: var(--font-mono);
|
||
text-align: right;
|
||
}
|
||
|
||
.edit-field-select {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
background: var(--color-surface);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.edit-field-select:focus {
|
||
outline: none;
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
.discount-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.discount-type {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.discount-type-btn {
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
.discount-type-btn:first-child {
|
||
border-radius: 4px 0 0 4px;
|
||
}
|
||
|
||
.discount-type-btn:last-child {
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
.discount-type-btn.active {
|
||
background: var(--color-teal);
|
||
border-color: var(--color-teal);
|
||
color: white;
|
||
}
|
||
|
||
.item-qty {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.qty-btn {
|
||
width: 26px;
|
||
height: 26px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.qty-btn:hover { background: var(--color-background-hover); }
|
||
|
||
.qty-val {
|
||
width: 24px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.item-meta {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.item-price {
|
||
text-align: right;
|
||
}
|
||
|
||
.item-original-price {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
text-decoration: line-through;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 200ms ease, opacity 150ms ease;
|
||
}
|
||
|
||
.item-original-price.visible {
|
||
max-height: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.item-total {
|
||
font-family: var(--font-mono);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
transition: color 200ms ease;
|
||
}
|
||
|
||
.cart-item:has(.item-discount.visible) .item-total {
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
.item-discount {
|
||
font-size: 11px;
|
||
color: var(--color-teal);
|
||
font-weight: 500;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 200ms ease, opacity 150ms ease;
|
||
}
|
||
|
||
.item-discount.visible {
|
||
max-height: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.item-remove {
|
||
background: none;
|
||
border: none;
|
||
font-size: 16px;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
opacity: 0.3;
|
||
padding: 4px;
|
||
}
|
||
.item-remove:hover { opacity: 1; color: var(--color-red); }
|
||
|
||
/* Payment Panel */
|
||
.payment-panel {
|
||
background: var(--color-surface);
|
||
border-left: 1px solid var(--color-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.payment-total {
|
||
padding: 24px 28px;
|
||
text-align: center;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.payment-total-amount {
|
||
font-family: var(--font-mono);
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
letter-spacing: -2px;
|
||
}
|
||
|
||
.payment-total-label {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 4px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.payment-methods {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.method-btn {
|
||
flex: 1 1 auto;
|
||
min-width: 70px;
|
||
padding: 12px 8px;
|
||
border: 2px solid var(--color-border);
|
||
border-radius: 6px;
|
||
background: var(--color-surface);
|
||
cursor: pointer;
|
||
text-align: center;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.method-btn:hover {
|
||
border-color: #ccc;
|
||
}
|
||
|
||
.method-btn.active {
|
||
border-color: var(--color-teal);
|
||
background: rgba(0, 137, 123, 0.05);
|
||
}
|
||
|
||
.method-btn-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: block;
|
||
margin: 0 auto 4px;
|
||
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
|
||
}
|
||
|
||
.method-btn-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.method-btn.active .method-btn-label {
|
||
color: var(--color-teal);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.payment-input-section {
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.payment-input-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.payment-input-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.payment-input {
|
||
flex: 1;
|
||
padding: 12px 16px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
font-family: var(--font-mono);
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
text-align: right;
|
||
}
|
||
|
||
.payment-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
.btn-pay-rest {
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
background: var(--color-surface);
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-pay-rest:hover {
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
.btn-add-payment {
|
||
width: 100%;
|
||
padding: 12px;
|
||
margin-top: 12px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--color-teal);
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 200ms ease, opacity 200ms ease, transform 150ms ease;
|
||
}
|
||
|
||
.btn-add-payment:hover:not(:disabled) {
|
||
background: #00796b;
|
||
}
|
||
|
||
.btn-add-payment:active:not(:disabled) {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-add-payment:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Giftcard lookup */
|
||
.giftcard-lookup {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 250ms ease,
|
||
margin-bottom 300ms ease,
|
||
padding-bottom 300ms ease;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
|
||
.giftcard-lookup.visible {
|
||
max-height: 150px;
|
||
opacity: 1;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 16px;
|
||
border-bottom-color: var(--color-border);
|
||
}
|
||
|
||
.giftcard-lookup-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.giftcard-lookup-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.giftcard-input {
|
||
flex: 1;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.giftcard-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
.btn-lookup {
|
||
padding: 10px 16px;
|
||
border: 1px solid var(--color-teal);
|
||
border-radius: 6px;
|
||
background: var(--color-surface);
|
||
color: var(--color-teal);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 150ms ease, transform 150ms ease;
|
||
}
|
||
|
||
.btn-lookup:hover {
|
||
background: rgba(0, 137, 123, 0.08);
|
||
}
|
||
|
||
.btn-lookup:active {
|
||
transform: scale(0.97);
|
||
}
|
||
|
||
.giftcard-result {
|
||
margin-top: 0;
|
||
padding: 0 12px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition: max-height 250ms ease,
|
||
opacity 200ms ease,
|
||
margin-top 250ms ease,
|
||
padding 250ms ease;
|
||
}
|
||
|
||
.giftcard-result.visible {
|
||
max-height: 50px;
|
||
opacity: 1;
|
||
margin-top: 10px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.giftcard-result.success {
|
||
background: rgba(0, 137, 123, 0.1);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
.giftcard-result.error {
|
||
background: rgba(229, 57, 53, 0.1);
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.giftcard-balance {
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Registered payments */
|
||
.registered-payments {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
.registered-payments-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.payment-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.payment-entry-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
|
||
}
|
||
|
||
.payment-entry-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.payment-entry-method {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.payment-entry-detail {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.payment-entry-amount {
|
||
font-family: var(--font-mono);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
.payment-entry-remove {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
opacity: 0.5;
|
||
padding: 4px;
|
||
}
|
||
|
||
.payment-entry-remove:hover {
|
||
opacity: 1;
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.no-payments {
|
||
color: var(--color-text-secondary);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
/* Payment footer */
|
||
.payment-footer {
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--color-border);
|
||
background: var(--color-background-alt);
|
||
}
|
||
|
||
.remaining-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.remaining-label {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.remaining-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.remaining-value.zero {
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
.btn-complete {
|
||
width: 100%;
|
||
padding: 16px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--color-teal);
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-complete:hover {
|
||
background: #00796b;
|
||
}
|
||
|
||
.btn-complete:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.payment-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.btn-secondary {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
background: var(--color-surface);
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
border-color: #ccc;
|
||
}
|
||
|
||
/* ==========================================
|
||
BARCODE SCANNER
|
||
========================================== */
|
||
.scan-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
padding: 14px 20px;
|
||
margin-top: 12px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--color-teal);
|
||
background: color-mix(in srgb, var(--color-teal) 8%, white);
|
||
border: 2px dashed var(--color-teal);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 200ms ease;
|
||
}
|
||
|
||
.scan-btn:hover {
|
||
background: color-mix(in srgb, var(--color-teal) 15%, white);
|
||
border-style: solid;
|
||
}
|
||
|
||
.scan-btn.scanning {
|
||
border-color: #1976d2;
|
||
color: #1976d2;
|
||
background: color-mix(in srgb, #1976d2 8%, white);
|
||
animation: pulse-border 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-border {
|
||
0%, 100% { border-color: #1976d2; }
|
||
50% { border-color: #64b5f6; }
|
||
}
|
||
|
||
.scan-btn svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.scanner-input-hidden {
|
||
position: absolute;
|
||
left: -9999px;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Debug codes in sidebar */
|
||
.debug-codes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 12px 16px;
|
||
border-top: 1px solid var(--color-border);
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.debug-codes strong {
|
||
color: var(--color-text);
|
||
margin-bottom: 4px;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.debug-codes div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.debug-codes code {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
background: var(--color-surface);
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
user-select: all;
|
||
}
|
||
|
||
.debug-codes code:hover {
|
||
background: var(--color-teal);
|
||
color: white;
|
||
}
|
||
|
||
/* ==========================================
|
||
RECEIPT
|
||
========================================== */
|
||
.receipt-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.3);
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 20px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 300ms ease, visibility 300ms ease;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.receipt-container.visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.receipt {
|
||
width: 280px;
|
||
background: #fff;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
color: #000;
|
||
padding: 20px 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||
transform: translateY(-100%);
|
||
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.receipt-container.visible .receipt {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Torn paper effect at bottom */
|
||
.receipt::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 10px;
|
||
background: linear-gradient(135deg, #fff 25%, transparent 25%),
|
||
linear-gradient(-135deg, #fff 25%, transparent 25%);
|
||
background-size: 10px 10px;
|
||
}
|
||
|
||
.receipt-header {
|
||
text-align: center;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px dashed #000;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.receipt-logo {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.receipt-address {
|
||
font-size: 10px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.receipt-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 10px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px dashed #000;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.receipt-items {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.receipt-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 4px 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.receipt-item-name {
|
||
flex: 1;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.receipt-item-qty {
|
||
width: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.receipt-item-price {
|
||
width: 70px;
|
||
text-align: right;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.receipt-divider {
|
||
border-top: 1px dashed #000;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.receipt-totals {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.receipt-total-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 3px 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.receipt-total-row.grand {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
padding: 8px 0;
|
||
border-top: 2px solid #000;
|
||
border-bottom: 2px solid #000;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.receipt-payment {
|
||
font-size: 10px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px dashed #000;
|
||
}
|
||
|
||
.receipt-payment-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.receipt-footer {
|
||
text-align: center;
|
||
padding-top: 12px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.receipt-footer-msg {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.receipt-qr {
|
||
margin: 12px auto 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.receipt-qr svg {
|
||
border: 2px solid #000;
|
||
}
|
||
|
||
.receipt-id {
|
||
font-size: 9px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.receipt-close {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border: none;
|
||
background: #f0f0f0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.receipt-close:hover {
|
||
background: #e0e0e0;
|
||
}
|
||
|
||
.receipt-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.receipt-actions button {
|
||
flex: 1;
|
||
padding: 8px;
|
||
font-size: 11px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-family: var(--font-family);
|
||
}
|
||
|
||
.receipt-actions .btn-print {
|
||
background: #000;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
.receipt-actions .btn-close {
|
||
background: #fff;
|
||
border: 1px solid #ccc;
|
||
color: #333;
|
||
}
|
||
|
||
/* ==========================================
|
||
PRINT STYLES
|
||
========================================== */
|
||
@media print {
|
||
/* White background */
|
||
html, body {
|
||
background: white !important;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
/* Hide everything by default */
|
||
.demo-trigger,
|
||
.overlay,
|
||
.header,
|
||
.sidebar,
|
||
.cart-area,
|
||
.payment-total,
|
||
.payment-methods,
|
||
.payment-input-section,
|
||
.registered-payments,
|
||
.payment-footer {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Reset panel positioning */
|
||
.panel {
|
||
position: static !important;
|
||
width: 100% !important;
|
||
transform: none !important;
|
||
box-shadow: none !important;
|
||
background: white !important;
|
||
}
|
||
|
||
.main {
|
||
display: block !important;
|
||
}
|
||
|
||
.payment-panel {
|
||
display: block !important;
|
||
position: static !important;
|
||
border: none !important;
|
||
background: white !important;
|
||
}
|
||
|
||
/* Show receipt */
|
||
.receipt-container {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
visibility: visible !important;
|
||
opacity: 1 !important;
|
||
position: static !important;
|
||
background: white !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.receipt {
|
||
display: block !important;
|
||
margin: 0 !important;
|
||
box-shadow: none !important;
|
||
transform: none !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
/* Preserve item layout */
|
||
.receipt-item {
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
.receipt-item-name {
|
||
text-align: left !important;
|
||
}
|
||
|
||
.receipt-item-price {
|
||
text-align: right !important;
|
||
}
|
||
|
||
.receipt-total-row {
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
}
|
||
|
||
/* Hide buttons in receipt */
|
||
.receipt-close,
|
||
.receipt-actions {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Remove torn paper effect */
|
||
.receipt::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-trigger">
|
||
<button class="demo-btn" onclick="openPanel()">Gå til betaling</button>
|
||
</div>
|
||
|
||
<div class="overlay" id="overlay" onclick="closePanel()"></div>
|
||
|
||
<div class="panel" id="panel">
|
||
<div class="header">
|
||
<div class="header-field">
|
||
<span class="header-label">Kunde</span>
|
||
<span class="header-value">Sofie Nielsen</span>
|
||
<span class="header-link">Fjern</span>
|
||
</div>
|
||
<div class="header-field">
|
||
<span class="header-label">Dato</span>
|
||
<span class="header-value">16. dec 2025</span>
|
||
</div>
|
||
<div class="header-field">
|
||
<span class="header-label">Betjent af</span>
|
||
<select class="header-select">
|
||
<option>Emma Larsen</option>
|
||
<option>Anett Davidsson</option>
|
||
</select>
|
||
</div>
|
||
<button class="header-close" onclick="closePanel()">✕</button>
|
||
</div>
|
||
|
||
<div class="main">
|
||
<div class="sidebar">
|
||
<div class="search-box">
|
||
<input type="text" class="search-input" placeholder="Søg varer...">
|
||
</div>
|
||
<div class="menu-section">
|
||
<div class="menu-item"><span>Brugerdefineret linje</span></div>
|
||
<div class="menu-item"><span>Tidligere salg</span></div>
|
||
<div class="menu-item"><span>Refunder</span></div>
|
||
<div class="menu-item active"><span>Services</span></div>
|
||
</div>
|
||
<div class="categories">
|
||
<div class="category"><span>Acidic Bonding</span><span>›</span></div>
|
||
<div class="category"><span>Amino Mint</span><span>›</span></div>
|
||
<div class="category"><span>Color Gloss</span><span>›</span></div>
|
||
<div class="category"><span>Conditioner</span><span>›</span></div>
|
||
<div class="category"><span>Styling</span><span>›</span></div>
|
||
<div class="category"><span>Olaplex</span><span>›</span></div>
|
||
</div>
|
||
<div class="debug-codes">
|
||
<strong>Test EAN-koder:</strong>
|
||
<div><code>5012345678900</code> Olaplex No.4</div>
|
||
<div><code>8710447489109</code> Redken Shampoo</div>
|
||
<div><code>3474636610143</code> Kérastase</div>
|
||
<div><code>0000000000000</code> Ukendt</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cart-area">
|
||
<div class="cart-list">
|
||
<!-- Services -->
|
||
<div class="cart-section">
|
||
<div class="cart-section-header">Services</div>
|
||
<div class="cart-section-items">
|
||
<div class="cart-item" onclick="toggleCartItem(this)" data-base-price="725" data-duration="45 min">
|
||
<div class="cart-item-main">
|
||
<div class="item-qty" onclick="event.stopPropagation()">
|
||
<button class="qty-btn">−</button>
|
||
<span class="qty-val">1</span>
|
||
<button class="qty-btn">+</button>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-name">Dameklip</div>
|
||
<div class="item-meta"><span class="item-employee">Emma Larsen</span> · 45 min</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<div class="item-original-price">725 kr</div>
|
||
<div class="item-total">725 kr</div>
|
||
<div class="item-discount">-0 kr rabat</div>
|
||
</div>
|
||
<button class="item-remove" onclick="event.stopPropagation()">✕</button>
|
||
</div>
|
||
<div class="cart-item-edit" onclick="event.stopPropagation()">
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Pris</div>
|
||
<input type="text" class="edit-field-input mono edit-price" value="725" oninput="updateCartItemDisplay(this)">
|
||
</div>
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Udført af</div>
|
||
<select class="edit-field-select edit-employee" onchange="updateCartItemDisplay(this)">
|
||
<option selected>Emma Larsen</option>
|
||
<option>Anett Davidsson</option>
|
||
<option>Maria Jensen</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Rabat</div>
|
||
<div class="discount-row">
|
||
<input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
|
||
<div class="discount-type">
|
||
<button class="discount-type-btn active" data-type="kr">kr</button>
|
||
<button class="discount-type-btn" data-type="pct">%</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cart-item" onclick="toggleCartItem(this)" data-base-price="900" data-duration="90 min">
|
||
<div class="cart-item-main">
|
||
<div class="item-qty" onclick="event.stopPropagation()">
|
||
<button class="qty-btn">−</button>
|
||
<span class="qty-val">1</span>
|
||
<button class="qty-btn">+</button>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-name">Gloss extra langt/tykt hår</div>
|
||
<div class="item-meta"><span class="item-employee">Emma Larsen</span> · 90 min</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<div class="item-original-price">900 kr</div>
|
||
<div class="item-total">900 kr</div>
|
||
<div class="item-discount">-0 kr rabat</div>
|
||
</div>
|
||
<button class="item-remove" onclick="event.stopPropagation()">✕</button>
|
||
</div>
|
||
<div class="cart-item-edit" onclick="event.stopPropagation()">
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Pris</div>
|
||
<input type="text" class="edit-field-input mono edit-price" value="900" oninput="updateCartItemDisplay(this)">
|
||
</div>
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Udført af</div>
|
||
<select class="edit-field-select edit-employee" onchange="updateCartItemDisplay(this)">
|
||
<option selected>Emma Larsen</option>
|
||
<option>Anett Davidsson</option>
|
||
<option>Maria Jensen</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Rabat</div>
|
||
<div class="discount-row">
|
||
<input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
|
||
<div class="discount-type">
|
||
<button class="discount-type-btn active" data-type="kr">kr</button>
|
||
<button class="discount-type-btn" data-type="pct">%</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Produkter -->
|
||
<div class="cart-section">
|
||
<div class="cart-section-header">Produkter</div>
|
||
<div class="cart-section-items">
|
||
<div class="cart-item" onclick="toggleCartItem(this)" data-base-price="300">
|
||
<div class="cart-item-main">
|
||
<div class="item-qty" onclick="event.stopPropagation()">
|
||
<button class="qty-btn">−</button>
|
||
<span class="qty-val">1</span>
|
||
<button class="qty-btn">+</button>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-name">Olaplex No. 3</div>
|
||
<div class="item-meta">100ml</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<div class="item-original-price">300 kr</div>
|
||
<div class="item-total">300 kr</div>
|
||
<div class="item-discount">-0 kr rabat</div>
|
||
</div>
|
||
<button class="item-remove" onclick="event.stopPropagation()">✕</button>
|
||
</div>
|
||
<div class="cart-item-edit" onclick="event.stopPropagation()">
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Pris</div>
|
||
<input type="text" class="edit-field-input mono edit-price" value="300" oninput="updateCartItemDisplay(this)">
|
||
</div>
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Rabat</div>
|
||
<div class="discount-row">
|
||
<input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
|
||
<div class="discount-type">
|
||
<button class="discount-type-btn active" data-type="kr">kr</button>
|
||
<button class="discount-type-btn" data-type="pct">%</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cart-item" onclick="toggleCartItem(this)" data-base-price="175">
|
||
<div class="cart-item-main">
|
||
<div class="item-qty" onclick="event.stopPropagation()">
|
||
<button class="qty-btn">−</button>
|
||
<span class="qty-val">2</span>
|
||
<button class="qty-btn">+</button>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-name">India supercharged mask</div>
|
||
<div class="item-meta">250ml</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<div class="item-original-price">350 kr</div>
|
||
<div class="item-total">350 kr</div>
|
||
<div class="item-discount">-0 kr rabat</div>
|
||
</div>
|
||
<button class="item-remove" onclick="event.stopPropagation()">✕</button>
|
||
</div>
|
||
<div class="cart-item-edit" onclick="event.stopPropagation()">
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Pris</div>
|
||
<input type="text" class="edit-field-input mono edit-price" value="175" oninput="updateCartItemDisplay(this)">
|
||
</div>
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Rabat</div>
|
||
<div class="discount-row">
|
||
<input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
|
||
<div class="discount-type">
|
||
<button class="discount-type-btn active" data-type="kr">kr</button>
|
||
<button class="discount-type-btn" data-type="pct">%</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scan Button -->
|
||
<button class="scan-btn" id="scanButton">
|
||
<svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
|
||
SCAN PRODUKT
|
||
</button>
|
||
<!-- Hidden scanner input -->
|
||
<input type="text" id="scannerInput" class="scanner-input-hidden" autocomplete="off" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cart-footer">
|
||
<div class="cart-totals">
|
||
<div class="cart-total-row">
|
||
<span class="label">Subtotal</span>
|
||
<span class="value">1.820 kr</span>
|
||
</div>
|
||
<div class="cart-total-row">
|
||
<span class="label">Moms (25%)</span>
|
||
<span class="value">455 kr</span>
|
||
</div>
|
||
<div class="cart-total-row grand">
|
||
<span class="label">Total</span>
|
||
<span class="value">2.275 kr</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Payment Panel -->
|
||
<div class="payment-panel" style="position: relative;">
|
||
<!-- Receipt overlay -->
|
||
<div class="receipt-container" id="receiptContainer">
|
||
<div class="receipt">
|
||
<button class="receipt-close" onclick="hideReceipt()">✕</button>
|
||
|
||
<div class="receipt-header">
|
||
<div class="receipt-logo">SALON BELLEZZA</div>
|
||
<div class="receipt-address">
|
||
Østergade 42, 1. sal<br>
|
||
1100 København K<br>
|
||
Tlf: 33 12 34 56<br>
|
||
CVR: 12345678
|
||
</div>
|
||
</div>
|
||
|
||
<div class="receipt-info">
|
||
<div>
|
||
<div>Dato: 16-12-2025</div>
|
||
<div>Tid: 14:32</div>
|
||
</div>
|
||
<div style="text-align: right;">
|
||
<div>Kvit: #4521</div>
|
||
<div>Kasse: 1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="receipt-items">
|
||
<div class="receipt-item" style="font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 4px;">
|
||
<span class="receipt-item-name">Vare</span>
|
||
<span class="receipt-item-qty">Antal</span>
|
||
<span class="receipt-item-price">Pris</span>
|
||
</div>
|
||
<div class="receipt-item">
|
||
<span class="receipt-item-name">Dameklip</span>
|
||
<span class="receipt-item-qty">1</span>
|
||
<span class="receipt-item-price">725,00</span>
|
||
</div>
|
||
<div class="receipt-item">
|
||
<span class="receipt-item-name">Gloss langt hår</span>
|
||
<span class="receipt-item-qty">1</span>
|
||
<span class="receipt-item-price">900,00</span>
|
||
</div>
|
||
<div class="receipt-item">
|
||
<span class="receipt-item-name">Olaplex No. 3</span>
|
||
<span class="receipt-item-qty">1</span>
|
||
<span class="receipt-item-price">300,00</span>
|
||
</div>
|
||
<div class="receipt-item">
|
||
<span class="receipt-item-name">India mask 250ml</span>
|
||
<span class="receipt-item-qty">2</span>
|
||
<span class="receipt-item-price">350,00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="receipt-divider"></div>
|
||
|
||
<div class="receipt-totals">
|
||
<div class="receipt-total-row">
|
||
<span>Subtotal</span>
|
||
<span>1.820,00</span>
|
||
</div>
|
||
<div class="receipt-total-row">
|
||
<span>Moms (25%)</span>
|
||
<span>455,00</span>
|
||
</div>
|
||
<div class="receipt-total-row grand">
|
||
<span>TOTAL</span>
|
||
<span>2.275,00 DKK</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="receipt-payment">
|
||
<div class="receipt-payment-row">
|
||
<span>Betalt med Kort</span>
|
||
<span>2.275,00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="receipt-footer">
|
||
<div class="receipt-footer-msg">TAK FOR BESØGET!</div>
|
||
<div>Kunde: Sofie Nielsen</div>
|
||
<div>Betjent af: Emma Larsen</div>
|
||
|
||
<div class="receipt-qr">
|
||
<svg viewBox="0 0 29 29" width="80" height="80">
|
||
<!-- QR Code pattern -->
|
||
<rect width="29" height="29" fill="white"/>
|
||
<!-- Position patterns (corners) -->
|
||
<rect x="0" y="0" width="7" height="7" fill="black"/>
|
||
<rect x="1" y="1" width="5" height="5" fill="white"/>
|
||
<rect x="2" y="2" width="3" height="3" fill="black"/>
|
||
<rect x="22" y="0" width="7" height="7" fill="black"/>
|
||
<rect x="23" y="1" width="5" height="5" fill="white"/>
|
||
<rect x="24" y="2" width="3" height="3" fill="black"/>
|
||
<rect x="0" y="22" width="7" height="7" fill="black"/>
|
||
<rect x="1" y="23" width="5" height="5" fill="white"/>
|
||
<rect x="2" y="24" width="3" height="3" fill="black"/>
|
||
<!-- Timing patterns -->
|
||
<rect x="8" y="6" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="6" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="6" width="1" height="1" fill="black"/>
|
||
<rect x="6" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="6" y="10" width="1" height="1" fill="black"/>
|
||
<rect x="6" y="12" width="1" height="1" fill="black"/>
|
||
<!-- Data modules (random pattern) -->
|
||
<rect x="8" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="9" y="9" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="11" y="10" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="9" width="1" height="1" fill="black"/>
|
||
<rect x="13" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="8" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="9" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="11" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="13" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="15" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="16" y="9" width="1" height="1" fill="black"/>
|
||
<rect x="17" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="18" y="10" width="1" height="1" fill="black"/>
|
||
<rect x="19" y="9" width="1" height="1" fill="black"/>
|
||
<rect x="20" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="15" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="17" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="19" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="16" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="18" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="20" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="8" y="14" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="14" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="15" width="1" height="1" fill="black"/>
|
||
<rect x="9" y="16" width="1" height="1" fill="black"/>
|
||
<rect x="11" y="16" width="1" height="1" fill="black"/>
|
||
<rect x="13" y="17" width="1" height="1" fill="black"/>
|
||
<rect x="8" y="18" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="18" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="19" width="1" height="1" fill="black"/>
|
||
<rect x="15" y="14" width="1" height="1" fill="black"/>
|
||
<rect x="17" y="15" width="1" height="1" fill="black"/>
|
||
<rect x="19" y="14" width="1" height="1" fill="black"/>
|
||
<rect x="16" y="16" width="1" height="1" fill="black"/>
|
||
<rect x="18" y="17" width="1" height="1" fill="black"/>
|
||
<rect x="20" y="16" width="1" height="1" fill="black"/>
|
||
<rect x="22" y="8" width="1" height="1" fill="black"/>
|
||
<rect x="24" y="9" width="1" height="1" fill="black"/>
|
||
<rect x="23" y="10" width="1" height="1" fill="black"/>
|
||
<rect x="25" y="11" width="1" height="1" fill="black"/>
|
||
<rect x="22" y="12" width="1" height="1" fill="black"/>
|
||
<rect x="24" y="13" width="1" height="1" fill="black"/>
|
||
<rect x="8" y="22" width="1" height="1" fill="black"/>
|
||
<rect x="10" y="23" width="1" height="1" fill="black"/>
|
||
<rect x="9" y="24" width="1" height="1" fill="black"/>
|
||
<rect x="11" y="25" width="1" height="1" fill="black"/>
|
||
<rect x="12" y="22" width="1" height="1" fill="black"/>
|
||
<rect x="13" y="24" width="1" height="1" fill="black"/>
|
||
<!-- Alignment pattern -->
|
||
<rect x="20" y="20" width="5" height="5" fill="black"/>
|
||
<rect x="21" y="21" width="3" height="3" fill="white"/>
|
||
<rect x="22" y="22" width="1" height="1" fill="black"/>
|
||
</svg>
|
||
</div>
|
||
<div class="receipt-id">4521-161225-1432</div>
|
||
</div>
|
||
|
||
<div class="receipt-actions">
|
||
<button class="btn-print" onclick="window.print()">🖨️ Print</button>
|
||
<button class="btn-close" onclick="hideReceipt()">Luk</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="payment-total">
|
||
<div class="payment-total-amount" id="totalAmount">2.275 kr</div>
|
||
<div class="payment-total-label">Total at betale</div>
|
||
</div>
|
||
|
||
<div class="payment-methods">
|
||
<button class="method-btn active" onclick="selectMethod('kort')">
|
||
<img class="method-btn-icon" src="icons/credit-card.svg" alt="">
|
||
<span class="method-btn-label">Kort</span>
|
||
</button>
|
||
<button class="method-btn" onclick="selectMethod('kontant')">
|
||
<img class="method-btn-icon" src="icons/coins.svg" alt="">
|
||
<span class="method-btn-label">Kontant</span>
|
||
</button>
|
||
<button class="method-btn" onclick="selectMethod('mobilepay')">
|
||
<img class="method-btn-icon" src="icons/mobilepay.svg" alt="">
|
||
<span class="method-btn-label">MobilePay</span>
|
||
</button>
|
||
<button class="method-btn" onclick="selectMethod('bank')">
|
||
<img class="method-btn-icon" src="icons/bank.svg" alt="">
|
||
<span class="method-btn-label">Bank</span>
|
||
</button>
|
||
<button class="method-btn" onclick="selectMethod('gavekort')">
|
||
<img class="method-btn-icon" src="icons/gift-card.svg" alt="">
|
||
<span class="method-btn-label">Gavekort</span>
|
||
</button>
|
||
<button class="method-btn" onclick="selectMethod('tilgode')">
|
||
<img class="method-btn-icon" src="icons/loan.svg" alt="">
|
||
<span class="method-btn-label">Tilgode</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="payment-input-section">
|
||
<!-- Gavekort lookup -->
|
||
<div class="giftcard-lookup" id="giftcardLookup">
|
||
<div class="giftcard-lookup-label">Indtast gavekortnummer</div>
|
||
<div class="giftcard-lookup-row">
|
||
<input type="text" class="giftcard-input" id="giftcardInput" placeholder="XXXX-XXXX-XXXX" onkeydown="if(event.key==='Enter')lookupGiftcard()">
|
||
<button class="btn-lookup" onclick="lookupGiftcard()">Slå op</button>
|
||
</div>
|
||
<div class="giftcard-result" id="giftcardResult"></div>
|
||
</div>
|
||
|
||
<div class="payment-input-label" id="inputLabel">Beløb at betale med Kort</div>
|
||
<div class="payment-input-row">
|
||
<input type="text" class="payment-input" id="paymentInput" value="2.275" inputmode="decimal">
|
||
<button class="btn-pay-rest" onclick="payRest()">Betal rest<br><span id="restAmount">(2.275 kr)</span></button>
|
||
</div>
|
||
<button class="btn-add-payment" id="btnAddPayment" onclick="addPayment()">+ Tilføj betaling</button>
|
||
</div>
|
||
|
||
<div class="registered-payments">
|
||
<div class="registered-payments-label">Registrerede betalinger</div>
|
||
<div id="paymentsList">
|
||
<div class="no-payments">Ingen betalinger registreret</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-footer">
|
||
<div class="remaining-row">
|
||
<span class="remaining-label">Restbeløb</span>
|
||
<span class="remaining-value" id="remainingAmount">2.275 kr</span>
|
||
</div>
|
||
<button class="btn-complete" id="btnComplete" disabled>Afslut salg</button>
|
||
<div class="payment-actions">
|
||
<button class="btn-secondary" onclick="showReceipt()">Print kvittering</button>
|
||
<button class="btn-secondary">Send på mail</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const total = 2275;
|
||
const payments = [];
|
||
let currentMethod = 'kort';
|
||
let currentGiftcard = null; // { number, balance }
|
||
|
||
const methodLabels = {
|
||
'kort': 'Kort',
|
||
'kontant': 'Kontant',
|
||
'mobilepay': 'MobilePay',
|
||
'bank': 'Bank',
|
||
'gavekort': 'Gavekort',
|
||
'tilgode': 'Tilgode'
|
||
};
|
||
|
||
const methodIcons = {
|
||
'kort': 'icons/credit-card.svg',
|
||
'kontant': 'icons/coins.svg',
|
||
'mobilepay': 'icons/mobilepay.svg',
|
||
'bank': 'icons/bank.svg',
|
||
'gavekort': 'icons/gift-card.svg',
|
||
'tilgode': 'icons/loan.svg'
|
||
};
|
||
|
||
function openPanel() {
|
||
document.getElementById('overlay').classList.add('open');
|
||
document.getElementById('panel').classList.add('open');
|
||
}
|
||
|
||
function closePanel() {
|
||
document.getElementById('overlay').classList.remove('open');
|
||
document.getElementById('panel').classList.remove('open');
|
||
}
|
||
|
||
function toggleCartItem(item) {
|
||
// Close other expanded items
|
||
document.querySelectorAll('.cart-item.expanded').forEach(el => {
|
||
if (el !== item) el.classList.remove('expanded');
|
||
});
|
||
// Toggle this item
|
||
item.classList.toggle('expanded');
|
||
}
|
||
|
||
function toggleDiscountType(btn) {
|
||
const container = btn.closest('.discount-type');
|
||
const previousType = container.querySelector('.discount-type-btn.active')?.dataset.type;
|
||
const newType = btn.dataset.type;
|
||
|
||
// Don't do anything if clicking the same button
|
||
if (previousType === newType) return;
|
||
|
||
container.querySelectorAll('.discount-type-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
// Convert discount value
|
||
const cartItem = btn.closest('.cart-item');
|
||
const discountInput = cartItem.querySelector('.edit-discount');
|
||
const priceInput = cartItem.querySelector('.edit-price');
|
||
|
||
if (discountInput && priceInput) {
|
||
const currentValue = parseFloat(discountInput.value.replace(/\./g, '').replace(',', '.')) || 0;
|
||
const basePrice = parseFloat(priceInput.value.replace(/\./g, '').replace(',', '.')) || 0;
|
||
|
||
if (basePrice > 0 && currentValue > 0) {
|
||
let newValue;
|
||
if (previousType === 'pct' && newType === 'kr') {
|
||
// Converting from % to kr
|
||
newValue = Math.round(basePrice * currentValue / 100);
|
||
} else if (previousType === 'kr' && newType === 'pct') {
|
||
// Converting from kr to %
|
||
newValue = Math.round((currentValue / basePrice) * 100 * 10) / 10; // 1 decimal
|
||
}
|
||
discountInput.value = newValue;
|
||
}
|
||
|
||
updateCartItemDisplay(discountInput);
|
||
}
|
||
}
|
||
|
||
function updateCartItemDisplay(inputEl) {
|
||
const cartItem = inputEl.closest('.cart-item');
|
||
if (!cartItem) return;
|
||
|
||
// Get elements
|
||
const priceInput = cartItem.querySelector('.edit-price');
|
||
const employeeSelect = cartItem.querySelector('.edit-employee');
|
||
const discountInput = cartItem.querySelector('.edit-discount');
|
||
const discountTypeBtn = cartItem.querySelector('.discount-type-btn.active');
|
||
|
||
const itemTotal = cartItem.querySelector('.item-total');
|
||
const itemOriginalPrice = cartItem.querySelector('.item-original-price');
|
||
const itemDiscount = cartItem.querySelector('.item-discount');
|
||
const itemEmployee = cartItem.querySelector('.item-employee');
|
||
|
||
// Get values
|
||
const basePrice = parseFloat(priceInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
|
||
const discountValue = parseFloat(discountInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
|
||
const discountType = discountTypeBtn?.dataset.type || 'kr';
|
||
const qty = parseInt(cartItem.querySelector('.qty-val')?.textContent) || 1;
|
||
|
||
// Calculate discount
|
||
let discountAmount = 0;
|
||
if (discountType === 'kr') {
|
||
discountAmount = discountValue;
|
||
} else {
|
||
discountAmount = (basePrice * discountValue / 100);
|
||
}
|
||
|
||
const finalPrice = Math.max(0, (basePrice - discountAmount) * qty);
|
||
const totalBeforeDiscount = basePrice * qty;
|
||
|
||
// Update display
|
||
itemTotal.textContent = formatNumber(finalPrice) + ' kr';
|
||
|
||
// Show original price and discount if there's a discount
|
||
if (discountAmount > 0) {
|
||
itemOriginalPrice.textContent = formatNumber(totalBeforeDiscount) + ' kr';
|
||
itemOriginalPrice.classList.add('visible');
|
||
|
||
if (discountType === 'pct') {
|
||
itemDiscount.textContent = `-${discountValue}% rabat`;
|
||
} else {
|
||
itemDiscount.textContent = `-${formatNumber(discountAmount * qty)} kr rabat`;
|
||
}
|
||
itemDiscount.classList.add('visible');
|
||
} else {
|
||
itemOriginalPrice.classList.remove('visible');
|
||
itemDiscount.classList.remove('visible');
|
||
}
|
||
|
||
// Update employee if exists
|
||
if (employeeSelect && itemEmployee) {
|
||
itemEmployee.textContent = employeeSelect.value;
|
||
}
|
||
}
|
||
|
||
// Setup discount type button handlers
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
document.querySelectorAll('.discount-type-btn').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
toggleDiscountType(btn);
|
||
});
|
||
});
|
||
});
|
||
|
||
function selectMethod(method) {
|
||
currentMethod = method;
|
||
|
||
// Update active button
|
||
document.querySelectorAll('.method-btn').forEach(btn => btn.classList.remove('active'));
|
||
event.currentTarget.classList.add('active');
|
||
|
||
// Update label
|
||
document.getElementById('inputLabel').textContent = `Beløb at betale med ${methodLabels[method]}`;
|
||
|
||
// Show/hide giftcard lookup
|
||
const giftcardLookup = document.getElementById('giftcardLookup');
|
||
const btnAddPayment = document.getElementById('btnAddPayment');
|
||
|
||
if (method === 'gavekort') {
|
||
giftcardLookup.classList.add('visible');
|
||
// Disable add payment until giftcard is looked up
|
||
if (!currentGiftcard) {
|
||
btnAddPayment.disabled = true;
|
||
}
|
||
} else {
|
||
giftcardLookup.classList.remove('visible');
|
||
currentGiftcard = null;
|
||
resetGiftcardLookup();
|
||
btnAddPayment.disabled = false;
|
||
}
|
||
|
||
// Set input to remaining amount
|
||
payRest();
|
||
}
|
||
|
||
function lookupGiftcard() {
|
||
const input = document.getElementById('giftcardInput');
|
||
const result = document.getElementById('giftcardResult');
|
||
const cardNumber = input.value.trim();
|
||
|
||
if (!cardNumber) {
|
||
result.className = 'giftcard-result visible error';
|
||
result.innerHTML = 'Indtast venligst et gavekortnummer';
|
||
return;
|
||
}
|
||
|
||
// Simulate lookup - in real app this would be an API call
|
||
// For demo: simulate different balances based on card number
|
||
const simulatedBalance = simulateGiftcardBalance(cardNumber);
|
||
|
||
if (simulatedBalance === null) {
|
||
result.className = 'giftcard-result visible error';
|
||
result.innerHTML = 'Gavekort ikke fundet';
|
||
currentGiftcard = null;
|
||
document.getElementById('btnAddPayment').disabled = true;
|
||
return;
|
||
}
|
||
|
||
// Success - card found
|
||
currentGiftcard = {
|
||
number: cardNumber,
|
||
balance: simulatedBalance
|
||
};
|
||
|
||
result.className = 'giftcard-result visible success';
|
||
result.innerHTML = `Gavekort fundet! Saldo: <span class="giftcard-balance">${formatNumber(simulatedBalance)} kr</span>`;
|
||
|
||
// Enable payment button
|
||
document.getElementById('btnAddPayment').disabled = false;
|
||
|
||
// Set payment input to min of remaining and giftcard balance
|
||
const remaining = getRemaining();
|
||
const maxPayment = Math.min(remaining, simulatedBalance);
|
||
const paymentInput = document.getElementById('paymentInput');
|
||
paymentInput.value = formatNumber(maxPayment);
|
||
|
||
// Focus payment input and select the value
|
||
setTimeout(() => {
|
||
paymentInput.focus();
|
||
paymentInput.select();
|
||
}, 50);
|
||
}
|
||
|
||
function simulateGiftcardBalance(cardNumber) {
|
||
// Demo simulation: different cards have different balances
|
||
// Cards starting with "1" = 500 kr, "2" = 1000 kr, "3" = 1500 kr
|
||
// Any other = 750 kr, empty/invalid = not found
|
||
|
||
if (cardNumber.length < 4) return null;
|
||
|
||
const firstChar = cardNumber.charAt(0);
|
||
switch (firstChar) {
|
||
case '1': return 500;
|
||
case '2': return 1000;
|
||
case '3': return 1500;
|
||
case '0': return null; // Not found
|
||
default: return 750;
|
||
}
|
||
}
|
||
|
||
function resetGiftcardLookup() {
|
||
document.getElementById('giftcardInput').value = '';
|
||
const result = document.getElementById('giftcardResult');
|
||
result.className = 'giftcard-result';
|
||
result.innerHTML = '';
|
||
}
|
||
|
||
function payRest() {
|
||
const remaining = getRemaining();
|
||
let maxPayment = remaining;
|
||
|
||
// For giftcard, limit to available balance
|
||
if (currentMethod === 'gavekort' && currentGiftcard) {
|
||
maxPayment = Math.min(remaining, currentGiftcard.balance);
|
||
}
|
||
|
||
document.getElementById('paymentInput').value = formatNumber(maxPayment);
|
||
}
|
||
|
||
function addPayment() {
|
||
let amount = parseAmount(document.getElementById('paymentInput').value);
|
||
if (amount <= 0) return;
|
||
|
||
// For giftcard payments, validate and limit to balance
|
||
if (currentMethod === 'gavekort') {
|
||
if (!currentGiftcard) {
|
||
alert('Slå gavekortet op først');
|
||
return;
|
||
}
|
||
// Limit to available balance
|
||
if (amount > currentGiftcard.balance) {
|
||
amount = currentGiftcard.balance;
|
||
}
|
||
}
|
||
|
||
const payment = {
|
||
method: currentMethod,
|
||
amount: amount
|
||
};
|
||
|
||
// Add giftcard details if applicable
|
||
if (currentMethod === 'gavekort' && currentGiftcard) {
|
||
payment.giftcardNumber = currentGiftcard.number;
|
||
payment.giftcardOriginalBalance = currentGiftcard.balance;
|
||
|
||
// Reduce the giftcard balance (simulate using it)
|
||
currentGiftcard.balance -= amount;
|
||
|
||
// If balance is 0, reset the giftcard lookup for next use
|
||
if (currentGiftcard.balance <= 0) {
|
||
currentGiftcard = null;
|
||
resetGiftcardLookup();
|
||
document.getElementById('btnAddPayment').disabled = true;
|
||
} else {
|
||
// Update displayed balance
|
||
const result = document.getElementById('giftcardResult');
|
||
result.innerHTML = `Gavekort fundet! Resterende saldo: <span class="giftcard-balance">${formatNumber(currentGiftcard.balance)} kr</span>`;
|
||
}
|
||
}
|
||
|
||
payments.push(payment);
|
||
|
||
updatePaymentsList();
|
||
updateTotals();
|
||
|
||
// Reset input to new remaining
|
||
payRest();
|
||
}
|
||
|
||
function removePayment(index) {
|
||
payments.splice(index, 1);
|
||
updatePaymentsList();
|
||
updateTotals();
|
||
payRest();
|
||
}
|
||
|
||
function updatePaymentsList() {
|
||
const container = document.getElementById('paymentsList');
|
||
|
||
if (payments.length === 0) {
|
||
container.innerHTML = '<div class="no-payments">Ingen betalinger registreret</div>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = payments.map((p, i) => {
|
||
const detail = p.giftcardNumber ? `Kort: ${p.giftcardNumber}` : '';
|
||
return `
|
||
<div class="payment-entry">
|
||
<img class="payment-entry-icon" src="${methodIcons[p.method]}" alt="">
|
||
<div class="payment-entry-info">
|
||
<div class="payment-entry-method">${methodLabels[p.method]}</div>
|
||
${detail ? `<div class="payment-entry-detail">${detail}</div>` : ''}
|
||
</div>
|
||
<span class="payment-entry-amount">+${formatNumber(p.amount)} kr</span>
|
||
<button class="payment-entry-remove" onclick="removePayment(${i})">✕</button>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
function updateTotals() {
|
||
const remaining = getRemaining();
|
||
|
||
// Update remaining display
|
||
const remainingEl = document.getElementById('remainingAmount');
|
||
remainingEl.textContent = formatNumber(remaining) + ' kr';
|
||
|
||
// Update rest button
|
||
document.getElementById('restAmount').textContent = `(${formatNumber(remaining)} kr)`;
|
||
|
||
// Toggle styling and button state
|
||
const btnComplete = document.getElementById('btnComplete');
|
||
if (remaining <= 0) {
|
||
remainingEl.classList.add('zero');
|
||
btnComplete.disabled = false;
|
||
} else {
|
||
remainingEl.classList.remove('zero');
|
||
btnComplete.disabled = true;
|
||
}
|
||
}
|
||
|
||
function getRemaining() {
|
||
const paid = payments.reduce((sum, p) => sum + p.amount, 0);
|
||
return Math.max(0, total - paid);
|
||
}
|
||
|
||
function formatNumber(num) {
|
||
return num.toLocaleString('da-DK');
|
||
}
|
||
|
||
function parseAmount(str) {
|
||
if (!str) return 0;
|
||
const cleaned = str.replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
|
||
return parseFloat(cleaned) || 0;
|
||
}
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'Escape') closePanel();
|
||
});
|
||
|
||
// ==========================================
|
||
// BARCODE SCANNER
|
||
// ==========================================
|
||
|
||
// Mock product database for scanning
|
||
const scanProducts = {
|
||
'5012345678900': {
|
||
name: 'Olaplex No.4 Bond Maintenance Shampoo',
|
||
price: 299,
|
||
size: '250ml'
|
||
},
|
||
'8710447489109': {
|
||
name: 'Redken All Soft Shampoo',
|
||
price: 249,
|
||
size: '300ml'
|
||
},
|
||
'3474636610143': {
|
||
name: 'Kérastase Elixir Ultime',
|
||
price: 425,
|
||
size: '100ml'
|
||
},
|
||
'0850018802239': {
|
||
name: 'Olaplex No.7 Bonding Oil',
|
||
price: 319,
|
||
size: '30ml'
|
||
}
|
||
};
|
||
|
||
// Scanner elements
|
||
const scanButton = document.getElementById('scanButton');
|
||
const scannerInput = document.getElementById('scannerInput');
|
||
|
||
let isScanning = false;
|
||
let scannedCode = '';
|
||
let scanTimeout = null;
|
||
|
||
// Start scanning
|
||
scanButton.addEventListener('click', () => {
|
||
if (isScanning) return;
|
||
|
||
isScanning = true;
|
||
scannedCode = '';
|
||
scanButton.classList.add('scanning');
|
||
scanButton.innerHTML = `
|
||
<svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
|
||
SCANNING...
|
||
`;
|
||
scannerInput.value = '';
|
||
scannerInput.focus();
|
||
});
|
||
|
||
// Handle scanner input
|
||
scannerInput.addEventListener('input', (e) => {
|
||
scannedCode = e.target.value;
|
||
|
||
if (scanTimeout) clearTimeout(scanTimeout);
|
||
|
||
// After 200ms of no input, consider scan complete
|
||
scanTimeout = setTimeout(() => {
|
||
if (scannedCode.length >= 8) {
|
||
processScannedCode(scannedCode);
|
||
}
|
||
}, 200);
|
||
});
|
||
|
||
// Handle Enter key from scanner
|
||
scannerInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === 'Tab') {
|
||
e.preventDefault();
|
||
if (scannedCode.length >= 8) {
|
||
clearTimeout(scanTimeout);
|
||
processScannedCode(scannedCode);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Handle blur - reset if no code scanned
|
||
scannerInput.addEventListener('blur', () => {
|
||
if (isScanning && scannedCode.length === 0) {
|
||
setTimeout(() => {
|
||
if (isScanning && scannedCode.length === 0) {
|
||
resetScanner();
|
||
}
|
||
}, 300);
|
||
}
|
||
});
|
||
|
||
// Reset scanner to ready state
|
||
function resetScanner() {
|
||
isScanning = false;
|
||
scannedCode = '';
|
||
scanButton.classList.remove('scanning');
|
||
scanButton.innerHTML = `
|
||
<svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
|
||
SCAN PRODUKT
|
||
`;
|
||
}
|
||
|
||
// Process scanned code
|
||
async function processScannedCode(code) {
|
||
// Show loading state
|
||
scanButton.innerHTML = `
|
||
<svg viewBox="0 0 24 24" style="animation: spin 1s linear infinite;"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
|
||
HENTER...
|
||
`;
|
||
|
||
// Simulate API delay
|
||
await new Promise(r => setTimeout(r, 600));
|
||
|
||
// Look up product
|
||
const foundProduct = scanProducts[code] || null;
|
||
|
||
if (foundProduct) {
|
||
// Add to cart
|
||
addScannedProductToCart(foundProduct, code);
|
||
|
||
// Show success briefly
|
||
scanButton.style.borderColor = '#43a047';
|
||
scanButton.style.color = '#43a047';
|
||
scanButton.innerHTML = `
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||
TILFØJET!
|
||
`;
|
||
|
||
setTimeout(() => {
|
||
scanButton.style.borderColor = '';
|
||
scanButton.style.color = '';
|
||
resetScanner();
|
||
}, 800);
|
||
} else {
|
||
// Show not found
|
||
scanButton.style.borderColor = '#f59e0b';
|
||
scanButton.style.color = '#f59e0b';
|
||
scanButton.innerHTML = `
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
||
IKKE FUNDET
|
||
`;
|
||
|
||
setTimeout(() => {
|
||
scanButton.style.borderColor = '';
|
||
scanButton.style.color = '';
|
||
resetScanner();
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
// Add scanned product to cart visually
|
||
function addScannedProductToCart(product, ean) {
|
||
const cartSectionItems = document.querySelector('.cart-section:last-of-type .cart-section-items');
|
||
|
||
const newItem = document.createElement('div');
|
||
newItem.className = 'cart-item';
|
||
newItem.setAttribute('onclick', 'toggleCartItem(this)');
|
||
newItem.setAttribute('data-base-price', product.price);
|
||
newItem.innerHTML = `
|
||
<div class="cart-item-main">
|
||
<div class="item-qty" onclick="event.stopPropagation()">
|
||
<button class="qty-btn">−</button>
|
||
<span class="qty-val">1</span>
|
||
<button class="qty-btn">+</button>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-name">${product.name}</div>
|
||
<div class="item-meta">${product.size}</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<div class="item-original-price">${product.price} kr</div>
|
||
<div class="item-total">${product.price} kr</div>
|
||
<div class="item-discount">-0 kr rabat</div>
|
||
</div>
|
||
<button class="item-remove" onclick="event.stopPropagation(); this.closest('.cart-item').remove();">✕</button>
|
||
</div>
|
||
<div class="cart-item-edit" onclick="event.stopPropagation()">
|
||
<div class="edit-row">
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Pris</div>
|
||
<input type="text" class="edit-field-input mono edit-price" value="${product.price}" oninput="updateCartItemDisplay(this)">
|
||
</div>
|
||
<div class="edit-field">
|
||
<div class="edit-field-label">Rabat</div>
|
||
<div class="discount-row">
|
||
<input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
|
||
<div class="discount-type">
|
||
<button class="discount-type-btn active" data-type="kr">kr</button>
|
||
<button class="discount-type-btn" data-type="pct">%</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Insert at end of items list
|
||
cartSectionItems.appendChild(newItem);
|
||
|
||
// Flash the new item
|
||
newItem.style.animation = 'flash 0.5s ease';
|
||
|
||
// Re-attach discount type handlers
|
||
newItem.querySelectorAll('.discount-type-btn').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
toggleDiscountType(btn);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Add animations
|
||
const scannerStyle = document.createElement('style');
|
||
scannerStyle.textContent = `
|
||
@keyframes flash {
|
||
0% { background-color: rgba(0, 137, 123, 0.2); }
|
||
100% { background-color: transparent; }
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
`;
|
||
document.head.appendChild(scannerStyle);
|
||
|
||
// ==========================================
|
||
// RECEIPT
|
||
// ==========================================
|
||
|
||
function showReceipt() {
|
||
const receiptContainer = document.getElementById('receiptContainer');
|
||
receiptContainer.classList.add('visible');
|
||
}
|
||
|
||
function hideReceipt() {
|
||
const receiptContainer = document.getElementById('receiptContainer');
|
||
receiptContainer.classList.remove('visible');
|
||
}
|
||
|
||
// Close receipt on Escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
const receiptContainer = document.getElementById('receiptContainer');
|
||
if (receiptContainer.classList.contains('visible')) {
|
||
hideReceipt();
|
||
e.stopPropagation();
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|