Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/poc-checkout.html

1630 lines
50 KiB
HTML
Raw Normal View History

Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
<!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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
<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">
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
<style>
:root {
--color-border: #e0e0e0;
--color-surface: #fff;
--color-background: #f5f5f5;
--color-background-hover: #f0f0f0;
--color-background-alt: #fafafa;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
--color-text: #333;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
--color-text-secondary: #666;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
--color-teal: #00897b;
--color-red: #e53935;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
--transition-fast: 150ms ease;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
--font-mono: 'JetBrains Mono', monospace;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--color-background);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
font-size: 14px;
color: var(--color-text);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.demo-trigger { padding: 20px; }
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
.demo-btn {
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
padding: 12px 24px;
background: var(--color-teal);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: white;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
border: none;
border-radius: 4px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-size: 14px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
cursor: pointer;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
/* Overlay & Panel */
.overlay {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
position: fixed;
inset: 0;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
background: rgba(0,0,0,0.25);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
opacity: 0;
visibility: hidden;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
transition: opacity 200ms, visibility 200ms;
z-index: 100;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.overlay.open { opacity: 1; visibility: visible; }
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.panel {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
position: fixed;
top: 0;
right: 0;
bottom: 0;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
width: 80%;
background: var(--color-background);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
transform: translateX(100%);
transition: transform 200ms ease;
display: flex;
flex-direction: column;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
z-index: 101;
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.panel.open { transform: translateX(0); }
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
/* Header */
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.header {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
align-items: center;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
gap: 40px;
padding: 20px 28px;
background: var(--color-surface);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
border-bottom: 1px solid var(--color-border);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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; }
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.header-close {
margin-left: auto;
background: none;
border: none;
font-size: 20px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-size: 14px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.menu-section {
border-bottom: 1px solid var(--color-border);
padding: 12px 0;
}
.menu-item {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
justify-content: space-between;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
align-items: center;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
cursor: pointer;
color: var(--color-text-secondary);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.category:hover { background: var(--color-background-hover); color: var(--color-text); }
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
/* Cart area */
.cart-area {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-background);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.cart-list {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
flex: 1;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
overflow-y: auto;
padding: 20px 24px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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 {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
flex-direction: column;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
gap: 8px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
/* Cart footer with totals */
.cart-footer {
padding: 20px 24px;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.cart-totals {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
flex-direction: column;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
gap: 8px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
.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 {
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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 {
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
background: var(--color-surface);
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
.item-qty {
display: flex;
align-items: center;
gap: 4px;
}
.qty-btn {
width: 26px;
height: 26px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
border: 1px solid var(--color-border);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
background: var(--color-surface);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
border-radius: 4px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.item-info {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
flex: 1;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
.item-name {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-size: 14px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
font-weight: 500;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.item-meta {
font-size: 12px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.item-price {
text-align: right;
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
.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;
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.item-total {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
.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);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
flex-direction: column;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
gap: 8px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
padding: 16px 24px;
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.method-btn {
flex: 1 1 auto;
min-width: 70px;
padding: 12px 8px;
border: 2px solid var(--color-border);
border-radius: 6px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
background: var(--color-surface);
cursor: pointer;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
text-align: center;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
transition: all var(--transition-fast);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.method-btn:hover {
border-color: #ccc;
}
.method-btn.active {
border-color: var(--color-teal);
background: rgba(0, 137, 123, 0.05);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.method-btn-icon {
width: 24px;
height: 24px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: block;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
margin: 0 auto 4px;
filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.method-btn-label {
font-size: 11px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.method-btn.active .method-btn-label {
color: var(--color-teal);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-weight: 500;
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-input-row {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
gap: 10px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-input {
flex: 1;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
padding: 12px 16px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
cursor: pointer;
white-space: nowrap;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-pay-rest:hover {
border-color: var(--color-teal);
color: var(--color-teal);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-add-payment {
width: 100%;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
padding: 12px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
margin-top: 12px;
border: none;
border-radius: 6px;
background: var(--color-teal);
color: white;
font-size: 14px;
font-weight: 500;
cursor: pointer;
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
transition: background 200ms ease, opacity 200ms ease, transform 150ms ease;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
.btn-add-payment:hover:not(:disabled) {
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
background: #00796b;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
.btn-add-payment:active:not(:disabled) {
transform: scale(0.98);
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-add-payment:disabled {
background: #ccc;
cursor: not-allowed;
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
/* Registered payments */
.registered-payments {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
flex: 1;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
overflow-y: auto;
padding: 16px 24px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.registered-payments-label {
font-size: 11px;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-entry {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
align-items: center;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-weight: 500;
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-entry-detail {
font-size: 12px;
color: var(--color-text-secondary);
}
.payment-entry-amount {
font-family: var(--font-mono);
font-size: 16px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-weight: 600;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
color: var(--color-teal);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-entry-remove {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
background: none;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
border: none;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
cursor: pointer;
font-size: 16px;
opacity: 0.5;
padding: 4px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-entry-remove:hover {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
opacity: 1;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
color: var(--color-red);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.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 {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
display: flex;
justify-content: space-between;
align-items: center;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
margin-bottom: 16px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.remaining-label {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-size: 14px;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
color: var(--color-text-secondary);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.remaining-value {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 700;
color: var(--color-red);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.remaining-value.zero {
color: var(--color-teal);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-complete {
width: 100%;
padding: 16px;
border: none;
border-radius: 6px;
background: var(--color-teal);
color: white;
font-size: 16px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
font-weight: 500;
cursor: pointer;
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-complete:hover {
background: #00796b;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-complete:disabled {
background: #ccc;
cursor: not-allowed;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.payment-actions {
display: flex;
gap: 12px;
margin-top: 16px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-secondary {
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
flex: 1;
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
padding: 10px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
font-size: 13px;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
color: var(--color-text-secondary);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
cursor: pointer;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
.btn-secondary:hover {
border-color: #ccc;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
</style>
</head>
<body>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
<div class="demo-trigger">
<button class="demo-btn" onclick="openPanel()">Gå til betaling</button>
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
</div>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
<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>
<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">
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
</div>
</div>
</div>
<!-- Produkter -->
<div class="cart-section">
<div class="cart-section-header">Produkter</div>
<div class="cart-section-items">
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
</div>
</div>
</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">
<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">
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<!-- 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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
<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>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
<button class="btn-add-payment" id="btnAddPayment" onclick="addPayment()">+ Tilføj betaling</button>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</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">Print kvittering</button>
<button class="btn-secondary">Send på mail</button>
</div>
</div>
</div>
</div>
</div>
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
<script>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
const total = 2275;
const payments = [];
let currentMethod = 'kort';
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
let currentGiftcard = null; // { number, balance }
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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'
};
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function openPanel() {
document.getElementById('overlay').classList.add('open');
document.getElementById('panel').classList.add('open');
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function closePanel() {
document.getElementById('overlay').classList.remove('open');
document.getElementById('panel').classList.remove('open');
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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);
});
});
});
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function selectMethod(method) {
currentMethod = method;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
// 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]}`;
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
// 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;
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
// Set input to remaining amount
payRest();
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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 = '';
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function payRest() {
const remaining = getRemaining();
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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);
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function addPayment() {
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
let amount = parseAmount(document.getElementById('paymentInput').value);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
if (amount <= 0) return;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
// 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 = {
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
method: currentMethod,
amount: amount
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
};
// 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);
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
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;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
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>
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
</div>
Enhances cart and payment interaction UI Adds interactive cart item editing with expandable sections Introduces dynamic discount calculation and display Implements giftcard lookup and balance tracking functionality Improves user experience with smooth transitions and more flexible item management
2025-12-19 18:21:55 +01:00
`;
}).join('');
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
}
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;
}
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function getRemaining() {
const paid = payments.reduce((sum, p) => sum + p.amount, 0);
return Math.max(0, total - paid);
}
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function formatNumber(num) {
return num.toLocaleString('da-DK');
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
function parseAmount(str) {
if (!str) return 0;
const cleaned = str.replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
return parseFloat(cleaned) || 0;
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
}
Adds checkout proof of concept with payment UI Creates a responsive and interactive checkout prototype demonstrating a comprehensive payment flow Includes: - Multi-method payment selection - Dynamic cart and total calculation - Intuitive user interface for transaction management
2025-12-19 15:47:27 +01:00
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closePanel();
Adds proof-of-concept checkout page prototype Creates an interactive HTML-based checkout overlay with dynamic cart functionality Implements features: - Product catalog with search capability - Add/remove cart items - Total price calculation - Responsive design with modern UI components
2025-12-18 15:30:53 +01:00
});
</script>
</body>
</html>
Reference in a new issue Copy permalink