7b2080a7bf
Moves inline styles to dedicated dashboard.css Updates HTML to reference external stylesheet Improves code organization and maintainability Relates to refac branch
2319 lines
70 KiB
HTML
2319 lines
70 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="da">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Indstillinger - Salon Beauty</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||
<style>
|
||
/* ==========================================
|
||
FONT FACE (Poppins)
|
||
========================================== */
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Regular.woff') format('woff');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Medium.woff') format('woff');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-SemiBold.woff') format('woff');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
@font-face {
|
||
font-family: 'Poppins';
|
||
src: url('fonts/Poppins-Bold.woff') format('woff');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* ==========================================
|
||
CSS VARIABLES (Design System)
|
||
========================================== */
|
||
:root {
|
||
--color-surface: #fff;
|
||
--color-background: #f5f5f5;
|
||
--color-background-hover: #f0f0f0;
|
||
--color-background-alt: #fafafa;
|
||
--color-border: #e0e0e0;
|
||
--color-text: #333;
|
||
--color-text-secondary: #666;
|
||
--color-teal: #00897b;
|
||
--color-blue: #1976d2;
|
||
--color-red: #e53935;
|
||
--color-amber: #f59e0b;
|
||
--color-purple: #8b5cf6;
|
||
--color-green: #43a047;
|
||
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not(.light-mode) {
|
||
--color-surface: #1e1e1e;
|
||
--color-background: #121212;
|
||
--color-background-hover: #2a2a2a;
|
||
--color-background-alt: #1a1a1a;
|
||
--color-border: #333;
|
||
--color-text: #e0e0e0;
|
||
--color-text-secondary: #999;
|
||
--color-teal: #26a69a;
|
||
--color-blue: #42a5f5;
|
||
--color-red: #ef5350;
|
||
--color-amber: #ffb74d;
|
||
--color-purple: #a78bfa;
|
||
--color-green: #66bb6a;
|
||
}
|
||
}
|
||
|
||
:root.dark-mode {
|
||
--color-surface: #1e1e1e;
|
||
--color-background: #121212;
|
||
--color-background-hover: #2a2a2a;
|
||
--color-background-alt: #1a1a1a;
|
||
--color-border: #333;
|
||
--color-text: #e0e0e0;
|
||
--color-text-secondary: #999;
|
||
--color-teal: #26a69a;
|
||
--color-blue: #42a5f5;
|
||
--color-red: #ef5350;
|
||
--color-amber: #ffb74d;
|
||
--color-purple: #a78bfa;
|
||
--color-green: #66bb6a;
|
||
}
|
||
|
||
/* ==========================================
|
||
RESET & BASE
|
||
========================================== */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
font-size: 14px;
|
||
color: var(--color-text);
|
||
background: var(--color-background);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ==========================================
|
||
TOPBAR
|
||
========================================== */
|
||
swp-topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 24px;
|
||
background: var(--color-surface);
|
||
border-bottom: 1px solid var(--color-border);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
swp-topbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
swp-topbar-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-topbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* ==========================================
|
||
TAB BAR
|
||
========================================== */
|
||
swp-tab-bar {
|
||
display: flex;
|
||
gap: 0;
|
||
background: var(--color-surface);
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding: 0 24px;
|
||
position: sticky;
|
||
top: 49px;
|
||
z-index: 80;
|
||
}
|
||
|
||
swp-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 24px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -1px;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-tab i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
swp-tab:hover {
|
||
color: var(--color-text);
|
||
background: var(--color-background-alt);
|
||
}
|
||
|
||
swp-tab.active {
|
||
color: var(--color-teal);
|
||
border-bottom-color: var(--color-teal);
|
||
}
|
||
|
||
/* ==========================================
|
||
TAB CONTENT
|
||
========================================== */
|
||
swp-tab-content {
|
||
display: none;
|
||
padding: 24px;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
swp-tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* ==========================================
|
||
CARDS & SECTIONS
|
||
========================================== */
|
||
swp-card {
|
||
display: block;
|
||
background: var(--color-surface);
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
swp-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
swp-card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-card-title i {
|
||
font-size: 20px;
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
swp-card-content {
|
||
display: block;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* ==========================================
|
||
EDIT SECTION (from poc-employee.html)
|
||
========================================== */
|
||
swp-edit-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
swp-edit-row {
|
||
display: grid;
|
||
grid-template-columns: 140px 1fr;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
swp-edit-row.wide-label {
|
||
grid-template-columns: 180px 1fr;
|
||
}
|
||
|
||
swp-edit-label {
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-edit-label .optional {
|
||
font-weight: 400;
|
||
color: var(--color-text-secondary);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
swp-edit-value {
|
||
font-size: 14px;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
background: var(--color-background-alt);
|
||
border: 1px solid transparent;
|
||
transition: all 150ms ease;
|
||
cursor: text;
|
||
}
|
||
|
||
swp-edit-value:hover {
|
||
background: var(--color-background);
|
||
}
|
||
|
||
swp-edit-value:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
swp-edit-value.mono {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* Edit Select */
|
||
swp-edit-select {
|
||
display: block;
|
||
}
|
||
|
||
swp-edit-select select {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
background: var(--color-background-alt);
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: all 150ms ease;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-edit-select select:hover {
|
||
background: var(--color-background);
|
||
}
|
||
|
||
swp-edit-select select:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
/* Textarea */
|
||
swp-edit-textarea {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
font-size: 14px;
|
||
font-family: var(--font-family);
|
||
color: var(--color-text);
|
||
background: var(--color-background-alt);
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-edit-textarea:hover {
|
||
background: var(--color-background);
|
||
}
|
||
|
||
swp-edit-textarea:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
/* ==========================================
|
||
TOGGLE SLIDER (Ja/Nej - from poc-employee.html)
|
||
========================================== */
|
||
swp-toggle-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
swp-toggle-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
swp-toggle-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
swp-toggle-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-toggle-desc {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-toggle-slider {
|
||
display: inline-flex;
|
||
width: fit-content;
|
||
background: var(--color-background);
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
swp-toggle-slider::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: calc(50% - 4px);
|
||
height: calc(100% - 4px);
|
||
background: color-mix(in srgb, var(--color-green) 18%, white);
|
||
border-radius: 4px;
|
||
transition: transform 200ms ease, background 200ms ease;
|
||
}
|
||
|
||
swp-toggle-slider[data-value="no"]::before {
|
||
transform: translateX(100%);
|
||
background: color-mix(in srgb, var(--color-red) 18%, white);
|
||
}
|
||
|
||
swp-toggle-option {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 5px 16px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
transition: color 150ms ease;
|
||
user-select: none;
|
||
}
|
||
|
||
swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
|
||
color: var(--color-green);
|
||
font-weight: 600;
|
||
}
|
||
|
||
swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
|
||
color: var(--color-red);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ==========================================
|
||
HOURS TABLE
|
||
========================================== */
|
||
swp-hours-table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
swp-hours-row {
|
||
display: grid;
|
||
grid-template-columns: 100px 80px 1fr;
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
swp-hours-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
swp-hours-day {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-hours-time {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
swp-hours-time span {
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-hours-time input[type="time"] {
|
||
width: 100px;
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
font-family: var(--font-mono);
|
||
background: var(--color-background-alt);
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
color: var(--color-text);
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-hours-time input[type="time"]:hover {
|
||
background: var(--color-background);
|
||
}
|
||
|
||
swp-hours-time input[type="time"]:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
swp-hours-closed {
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ==========================================
|
||
URL FIELD
|
||
========================================== */
|
||
swp-url-field {
|
||
display: flex;
|
||
align-items: stretch;
|
||
background: var(--color-background-alt);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
swp-url-field input {
|
||
flex: 1;
|
||
padding: 10px 14px;
|
||
font-size: 14px;
|
||
font-family: var(--font-mono);
|
||
color: var(--color-text);
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
}
|
||
|
||
swp-url-copy {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 14px;
|
||
background: var(--color-surface);
|
||
border-left: 1px solid var(--color-border);
|
||
cursor: pointer;
|
||
color: var(--color-text-secondary);
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-url-copy:hover {
|
||
background: var(--color-background-hover);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
swp-url-copy i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* ==========================================
|
||
INFO BOX
|
||
========================================== */
|
||
swp-info-box {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 14px 16px;
|
||
background: color-mix(in srgb, var(--color-blue) 8%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
swp-info-box i {
|
||
font-size: 20px;
|
||
color: var(--color-blue);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
swp-info-box p {
|
||
font-size: 13px;
|
||
color: var(--color-text);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ==========================================
|
||
BUTTONS
|
||
========================================== */
|
||
swp-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 18px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
font-family: var(--font-family);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 150ms ease;
|
||
border: none;
|
||
}
|
||
|
||
swp-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
swp-btn.primary {
|
||
background: var(--color-teal);
|
||
color: white;
|
||
}
|
||
|
||
swp-btn.primary:hover {
|
||
background: #00796b;
|
||
}
|
||
|
||
swp-btn.secondary {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-btn.secondary:hover {
|
||
background: var(--color-background-hover);
|
||
}
|
||
|
||
/* ==========================================
|
||
NOTIFICATION ITEMS
|
||
========================================== */
|
||
swp-notification-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
swp-notification-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
swp-notification-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
swp-notification-main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex: 1;
|
||
}
|
||
|
||
swp-notification-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
flex: 1;
|
||
}
|
||
|
||
swp-notification-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-notification-price {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
font-weight: 400;
|
||
}
|
||
|
||
swp-notification-price.free {
|
||
color: var(--color-green);
|
||
}
|
||
|
||
swp-notification-price.premium {
|
||
color: var(--color-purple);
|
||
}
|
||
|
||
swp-notification-desc {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-notification-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
swp-edit-link {
|
||
font-size: 13px;
|
||
color: var(--color-teal);
|
||
cursor: pointer;
|
||
transition: color 150ms ease;
|
||
}
|
||
|
||
swp-edit-link:hover {
|
||
color: #00796b;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
swp-section-intro {
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
swp-time-setting {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
swp-time-setting:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
swp-time-setting-label {
|
||
font-size: 14px;
|
||
color: var(--color-text);
|
||
min-width: 200px;
|
||
}
|
||
|
||
swp-time-range {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
swp-time-range span {
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-time-range input[type="time"] {
|
||
width: 100px;
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
font-family: var(--font-mono);
|
||
background: var(--color-background-alt);
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-time-range input[type="time"]:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
/* Section divider */
|
||
swp-section-divider {
|
||
display: block;
|
||
height: 1px;
|
||
background: var(--color-border);
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* ==========================================
|
||
TWO COLUMN GRID
|
||
========================================== */
|
||
swp-two-column-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
swp-two-column-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Card note */
|
||
swp-card-note {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 16px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* ==========================================
|
||
DRAWER
|
||
========================================== */
|
||
swp-drawer-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
z-index: 200;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 200ms ease, visibility 200ms ease;
|
||
}
|
||
|
||
swp-drawer-overlay.open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
swp-drawer {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 480px;
|
||
max-width: 100%;
|
||
background: var(--color-surface);
|
||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||
z-index: 201;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transform: translateX(100%);
|
||
transition: transform 250ms ease, width 250ms ease;
|
||
}
|
||
|
||
swp-drawer.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
swp-drawer.wide {
|
||
width: calc(100% - 420px);
|
||
min-width: 600px;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
swp-drawer.wide {
|
||
width: 100%;
|
||
min-width: unset;
|
||
}
|
||
}
|
||
|
||
swp-drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
swp-drawer-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
swp-drawer-title h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
margin: 0;
|
||
}
|
||
|
||
swp-drawer-title span {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-drawer-close {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
color: var(--color-text-secondary);
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-drawer-close:hover {
|
||
background: var(--color-background-hover);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-drawer-close i {
|
||
font-size: 22px;
|
||
}
|
||
|
||
swp-drawer-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
swp-drawer-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
border-top: 1px solid var(--color-border);
|
||
background: var(--color-background-alt);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Message editor */
|
||
swp-message-section {
|
||
display: block;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
swp-message-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
swp-message-section-title {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
swp-message-editor {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 14px;
|
||
font-size: 14px;
|
||
font-family: var(--font-family);
|
||
line-height: 1.6;
|
||
color: var(--color-text);
|
||
background: var(--color-background-alt);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
resize: vertical;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-message-editor:focus {
|
||
outline: none;
|
||
background: var(--color-surface);
|
||
border-color: var(--color-teal);
|
||
}
|
||
|
||
/* Variables */
|
||
swp-variables-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
swp-variable-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
font-family: var(--font-mono);
|
||
background: var(--color-background);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 150ms ease;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-variable-tag:hover {
|
||
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
swp-variable-tag i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Preview */
|
||
swp-message-preview {
|
||
display: block;
|
||
padding: 16px;
|
||
background: var(--color-background);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
swp-message-preview .highlight {
|
||
background: color-mix(in srgb, var(--color-teal) 20%, transparent);
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
color: var(--color-teal);
|
||
font-weight: 500;
|
||
}
|
||
|
||
swp-preview-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--color-border);
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
swp-preview-meta span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
swp-preview-meta i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ==========================================
|
||
EMAIL TEMPLATE EDITOR
|
||
========================================== */
|
||
swp-email-editor-layout {
|
||
display: grid;
|
||
grid-template-columns: 280px 1fr;
|
||
gap: 24px;
|
||
height: 100%;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
swp-email-editor-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
swp-email-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
swp-email-preview-container {
|
||
flex: 1;
|
||
background: var(--color-border);
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* Email preview - uses fixed light colors since emails are light-themed */
|
||
swp-email-preview {
|
||
width: 100%;
|
||
max-width: 520px;
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
color: #333;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
swp-email-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 28px 24px;
|
||
background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
|
||
swp-email-logo {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: #ffffff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 14px;
|
||
font-size: 24px;
|
||
color: #00897b;
|
||
font-weight: 700;
|
||
}
|
||
|
||
swp-email-header h2 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0 0 4px 0;
|
||
color: #ffffff;
|
||
}
|
||
|
||
swp-email-header p {
|
||
font-size: 12px;
|
||
opacity: 0.85;
|
||
margin: 0;
|
||
color: #ffffff;
|
||
}
|
||
|
||
swp-email-body {
|
||
display: block;
|
||
padding: 28px 32px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
swp-email-greeting {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
margin-bottom: 12px;
|
||
display: block;
|
||
color: #333333;
|
||
}
|
||
|
||
swp-email-text {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #555555;
|
||
display: block;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
swp-email-appointment-card {
|
||
display: block;
|
||
background: #f5f5f5;
|
||
border-radius: 0;
|
||
padding: 16px 20px;
|
||
margin-bottom: 24px;
|
||
border-left: 4px solid #00897b;
|
||
}
|
||
|
||
swp-email-appointment-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
swp-email-appointment-row:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
swp-email-appointment-row:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
swp-email-appointment-row i {
|
||
font-size: 18px;
|
||
color: #00897b;
|
||
width: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
swp-email-appointment-row span {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
swp-email-appointment-row strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
swp-email-button {
|
||
display: inline-block;
|
||
padding: 12px 24px;
|
||
background: #00897b;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
}
|
||
|
||
swp-email-button-container {
|
||
text-align: center;
|
||
margin: 20px 0 8px 0;
|
||
display: block;
|
||
}
|
||
|
||
swp-email-footer {
|
||
display: block;
|
||
padding: 20px 32px;
|
||
background: #f5f5f5;
|
||
text-align: center;
|
||
border-top: none;
|
||
}
|
||
|
||
swp-email-footer-logo {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
swp-email-footer p {
|
||
font-size: 12px;
|
||
color: #888888;
|
||
margin: 4px 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
swp-email-footer a {
|
||
color: #00897b;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Email sidebar - uses swp-edit-* pattern */
|
||
swp-email-sidebar swp-edit-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
}
|
||
|
||
swp-email-sidebar swp-edit-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* Color picker */
|
||
swp-color-picker-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
swp-color-picker-row input[type="color"] {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
background: none;
|
||
}
|
||
|
||
swp-color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
}
|
||
|
||
swp-color-picker-row input[type="color"]::-webkit-color-swatch {
|
||
border: 2px solid var(--color-border);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
swp-color-picker-row span {
|
||
font-size: 13px;
|
||
font-family: var(--font-mono);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
/* Highlight in email preview - subtle background only */
|
||
swp-email-preview .editable {
|
||
background: rgba(0, 137, 123, 0.12);
|
||
padding: 1px 3px;
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Topbar -->
|
||
<swp-topbar>
|
||
<swp-topbar-left>
|
||
<swp-topbar-title>Indstillinger</swp-topbar-title>
|
||
</swp-topbar-left>
|
||
<swp-topbar-actions>
|
||
<swp-btn class="primary" id="saveBtn">
|
||
<i class="ph ph-check"></i>
|
||
Gem alle ændringer
|
||
</swp-btn>
|
||
</swp-topbar-actions>
|
||
</swp-topbar>
|
||
|
||
<!-- Tab Bar -->
|
||
<swp-tab-bar>
|
||
<swp-tab class="active" data-tab="general">
|
||
<i class="ph ph-buildings"></i>
|
||
Virksomhed
|
||
</swp-tab>
|
||
<swp-tab data-tab="hours">
|
||
<i class="ph ph-clock"></i>
|
||
Åbningstider
|
||
</swp-tab>
|
||
<swp-tab data-tab="calendar">
|
||
<i class="ph ph-calendar"></i>
|
||
Kalender
|
||
</swp-tab>
|
||
<swp-tab data-tab="booking">
|
||
<i class="ph ph-globe"></i>
|
||
Online Booking
|
||
</swp-tab>
|
||
<swp-tab data-tab="billing">
|
||
<i class="ph ph-receipt"></i>
|
||
Faktura & Kvittering
|
||
</swp-tab>
|
||
<swp-tab data-tab="reminders">
|
||
<i class="ph ph-bell"></i>
|
||
Påmindelser
|
||
</swp-tab>
|
||
</swp-tab-bar>
|
||
|
||
<!-- ==========================================
|
||
TAB: VIRKSOMHED
|
||
========================================== -->
|
||
<swp-tab-content class="active" data-tab="general">
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-identification-card"></i>
|
||
Grundlæggende oplysninger
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Virksomhedsnavn</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">Salon Beauty</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>CVR-nummer</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Adresse</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">Hovedgaden 123</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Postnummer</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">2100</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>By</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">København Ø</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Telefon</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">70 20 30 40</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Email</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">info@salonbeauty.dk</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Website <span class="optional">(valgfri)</span></swp-edit-label>
|
||
<swp-edit-value contenteditable="true">https://salonbeauty.dk</swp-edit-value>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
TAB: ÅBNINGSTIDER
|
||
========================================== -->
|
||
<swp-tab-content data-tab="hours">
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-clock"></i>
|
||
Åbningstider
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-hours-table>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Mandag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="09:00">
|
||
<span>til</span>
|
||
<input type="time" value="18:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Tirsdag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="09:00">
|
||
<span>til</span>
|
||
<input type="time" value="18:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Onsdag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="09:00">
|
||
<span>til</span>
|
||
<input type="time" value="18:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Torsdag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="09:00">
|
||
<span>til</span>
|
||
<input type="time" value="20:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Fredag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="09:00">
|
||
<span>til</span>
|
||
<input type="time" value="17:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Lørdag</swp-hours-day>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-time>
|
||
<input type="time" value="10:00">
|
||
<span>til</span>
|
||
<input type="time" value="14:00">
|
||
</swp-hours-time>
|
||
</swp-hours-row>
|
||
<swp-hours-row>
|
||
<swp-hours-day>Søndag</swp-hours-day>
|
||
<swp-toggle-slider data-value="no">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-hours-closed>Lukket</swp-hours-closed>
|
||
</swp-hours-row>
|
||
</swp-hours-table>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
TAB: KALENDER
|
||
========================================== -->
|
||
<swp-tab-content data-tab="calendar">
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-calendar-blank"></i>
|
||
Kalenderindstillinger
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Standard visning</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="day">Dag</option>
|
||
<option value="week" selected>Uge</option>
|
||
<option value="month">Måned</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Første dag i ugen</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="monday" selected>Mandag</option>
|
||
<option value="sunday">Søndag</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Tidsinterval</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="15" selected>15 minutter</option>
|
||
<option value="30">30 minutter</option>
|
||
<option value="60">60 minutter</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Vis weekender</swp-edit-label>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Arbejdstid fra</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="06:00">06:00</option>
|
||
<option value="07:00">07:00</option>
|
||
<option value="08:00" selected>08:00</option>
|
||
<option value="09:00">09:00</option>
|
||
<option value="10:00">10:00</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Arbejdstid til</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="17:00">17:00</option>
|
||
<option value="18:00">18:00</option>
|
||
<option value="19:00">19:00</option>
|
||
<option value="20:00" selected>20:00</option>
|
||
<option value="21:00">21:00</option>
|
||
<option value="22:00">22:00</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
TAB: ONLINE BOOKING
|
||
========================================== -->
|
||
<swp-tab-content data-tab="booking">
|
||
<swp-info-box>
|
||
<i class="ph ph-info"></i>
|
||
<p>Din booking-side er tilgængelig for kunder. Del linket på din hjemmeside, sociale medier eller i din email-signatur.</p>
|
||
</swp-info-box>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-link"></i>
|
||
Booking URL
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-url-field>
|
||
<input type="text" value="https://book.plantempus.dk/salonbeauty" readonly>
|
||
<swp-url-copy title="Kopier link">
|
||
<i class="ph ph-copy"></i>
|
||
</swp-url-copy>
|
||
</swp-url-field>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-sliders"></i>
|
||
Booking-indstillinger
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-toggle-row>
|
||
<swp-toggle-info>
|
||
<swp-toggle-label>Aktivér online booking</swp-toggle-label>
|
||
<swp-toggle-desc>Tillad kunder at booke tider online</swp-toggle-desc>
|
||
</swp-toggle-info>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<swp-toggle-info>
|
||
<swp-toggle-label>Tillad online aflysning</swp-toggle-label>
|
||
<swp-toggle-desc>Kunder kan selv aflyse deres booking</swp-toggle-desc>
|
||
</swp-toggle-info>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
|
||
<swp-section-divider></swp-section-divider>
|
||
|
||
<swp-edit-section>
|
||
<swp-edit-row class="wide-label">
|
||
<swp-edit-label>Book frem i tiden</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="7">7 dage</option>
|
||
<option value="14">14 dage</option>
|
||
<option value="30" selected>30 dage</option>
|
||
<option value="60">60 dage</option>
|
||
<option value="90">90 dage</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row class="wide-label">
|
||
<swp-edit-label>Minimum tid før booking</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="0">Ingen begrænsning</option>
|
||
<option value="1">1 time</option>
|
||
<option value="2" selected>2 timer</option>
|
||
<option value="4">4 timer</option>
|
||
<option value="24">24 timer</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row class="wide-label">
|
||
<swp-edit-label>Aflysningsfrist</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="0">Ingen frist</option>
|
||
<option value="2">2 timer før</option>
|
||
<option value="4">4 timer før</option>
|
||
<option value="24" selected>24 timer før</option>
|
||
<option value="48">48 timer før</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
TAB: FAKTURA & KVITTERING (kombineret)
|
||
========================================== -->
|
||
<swp-tab-content data-tab="billing">
|
||
<swp-info-box>
|
||
<i class="ph ph-info"></i>
|
||
<p><strong>Kvittering</strong> printes efter betaling i butikken. <strong>Faktura</strong> sendes til kunder der betaler senere.</p>
|
||
</swp-info-box>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-identification-badge"></i>
|
||
Virksomhedsoplysninger
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">Salon Beauty ApS</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>CVR-nummer</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Adresse</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">Hovedgaden 123, 2100 København Ø</swp-edit-value>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-bank"></i>
|
||
Bankoplysninger (kun faktura)
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Registreringsnr.</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">1234</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Kontonummer</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>IBAN <span class="optional">(valgfri)</span></swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono" style="color: var(--color-text-secondary);">DK00 0000 0000 0000 00</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>MobilePay <span class="optional">(valgfri)</span></swp-edit-label>
|
||
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Betalingsbetingelser</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="0">Kontant</option>
|
||
<option value="8" selected>Netto 8 dage</option>
|
||
<option value="14">Netto 14 dage</option>
|
||
<option value="30">Netto 30 dage</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-eye"></i>
|
||
Vis på print
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-toggle-row>
|
||
<swp-toggle-label>Vis CVR-nummer</swp-toggle-label>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<swp-toggle-label>Vis telefonnummer</swp-toggle-label>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<swp-toggle-label>Vis website</swp-toggle-label>
|
||
<swp-toggle-slider data-value="no">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
<swp-toggle-row>
|
||
<swp-toggle-label>Vis logo</swp-toggle-label>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
</swp-toggle-row>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-text-align-left"></i>
|
||
Tekster
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Header-tekst</swp-edit-label>
|
||
<swp-edit-value contenteditable="true">Tak for dit besøg!</swp-edit-value>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
<div style="margin-top: 16px;">
|
||
<swp-edit-label style="display: block; margin-bottom: 8px;">Footer-tekst</swp-edit-label>
|
||
<swp-edit-textarea contenteditable="true">Åbningstider: Man-Fre 9-18, Lør 10-14
|
||
Vi glæder os til at se dig igen!</swp-edit-textarea>
|
||
</div>
|
||
<div style="margin-top: 16px;">
|
||
<swp-edit-label style="display: block; margin-bottom: 8px;">Faktura-tekst</swp-edit-label>
|
||
<swp-edit-textarea contenteditable="true">Ved betaling bedes fakturanummer angivet.
|
||
Tak for din handel!</swp-edit-textarea>
|
||
</div>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
TAB: PÅMINDELSER
|
||
========================================== -->
|
||
<swp-tab-content data-tab="reminders">
|
||
<swp-two-column-grid>
|
||
<!-- EMAIL COLUMN -->
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-envelope"></i>
|
||
Email
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-notification-list>
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>Bekræftelse</swp-notification-title>
|
||
<swp-notification-desc>Sendes når en aftale er booket</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>Påmindelse</swp-notification-title>
|
||
<swp-notification-desc>Sendes inden aftalen</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>Aflysning</swp-notification-title>
|
||
<swp-notification-desc>Sendes når en aftale er aflyst</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>Flytning</swp-notification-title>
|
||
<swp-notification-desc>Sendes når en aftale er flyttet</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
</swp-notification-list>
|
||
|
||
<swp-card-note>Email-påmindelser er gratis.</swp-card-note>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
|
||
<!-- SMS COLUMN -->
|
||
<swp-card>
|
||
<swp-card-header>
|
||
<swp-card-title>
|
||
<i class="ph ph-chat-text"></i>
|
||
SMS
|
||
</swp-card-title>
|
||
</swp-card-header>
|
||
<swp-card-content>
|
||
<swp-notification-list>
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="no">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>
|
||
Bekræftelse online
|
||
<swp-notification-price>(0,49 kr.)</swp-notification-price>
|
||
</swp-notification-title>
|
||
<swp-notification-desc>Sendes ved online booking</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>
|
||
Bekræftelse manuelt
|
||
<swp-notification-price>(0,49 kr.)</swp-notification-price>
|
||
</swp-notification-title>
|
||
<swp-notification-desc>Ved oprettelse i kalender</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
|
||
<swp-notification-item>
|
||
<swp-notification-main>
|
||
<swp-toggle-slider data-value="yes">
|
||
<swp-toggle-option>Ja</swp-toggle-option>
|
||
<swp-toggle-option>Nej</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-notification-info>
|
||
<swp-notification-title>
|
||
Påmindelse
|
||
<swp-notification-price class="premium">(Premium)</swp-notification-price>
|
||
</swp-notification-title>
|
||
<swp-notification-desc>Sendes inden aftalen</swp-notification-desc>
|
||
</swp-notification-info>
|
||
</swp-notification-main>
|
||
<swp-edit-link>Rediger</swp-edit-link>
|
||
</swp-notification-item>
|
||
</swp-notification-list>
|
||
|
||
<swp-section-divider></swp-section-divider>
|
||
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Påmindelse sendes</swp-edit-label>
|
||
<swp-edit-select>
|
||
<select>
|
||
<option value="2">2 timer før</option>
|
||
<option value="4">4 timer før</option>
|
||
<option value="12">12 timer før</option>
|
||
<option value="24" selected>24 timer før</option>
|
||
<option value="48">48 timer før</option>
|
||
</select>
|
||
</swp-edit-select>
|
||
</swp-edit-row>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Sendes mellem</swp-edit-label>
|
||
<swp-time-range>
|
||
<input type="time" value="08:00">
|
||
<span>–</span>
|
||
<input type="time" value="21:00">
|
||
</swp-time-range>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
</swp-card-content>
|
||
</swp-card>
|
||
</swp-two-column-grid>
|
||
</swp-tab-content>
|
||
|
||
<!-- ==========================================
|
||
DRAWER: REDIGER BESKED
|
||
========================================== -->
|
||
<swp-drawer-overlay id="drawerOverlay"></swp-drawer-overlay>
|
||
<swp-drawer id="messageDrawer">
|
||
<swp-drawer-header>
|
||
<swp-drawer-title>
|
||
<h3 id="drawerTitle">Bekræftelse</h3>
|
||
<span id="drawerSubtitle">SMS · Sendes ved booking</span>
|
||
</swp-drawer-title>
|
||
<swp-drawer-close id="drawerClose">
|
||
<i class="ph ph-x"></i>
|
||
</swp-drawer-close>
|
||
</swp-drawer-header>
|
||
|
||
<swp-drawer-body>
|
||
<swp-message-section>
|
||
<swp-message-section-title>Besked</swp-message-section-title>
|
||
<swp-message-editor contenteditable="true" id="messageEditor">Hej {kunde_navn}!
|
||
|
||
Din tid er bekræftet:
|
||
{behandling}
|
||
{dato} kl. {tid}
|
||
|
||
Hos {medarbejder}
|
||
{firma_navn}, {firma_adresse}
|
||
|
||
Vil du ændre din tid? {booking_link}</swp-message-editor>
|
||
</swp-message-section>
|
||
|
||
<swp-message-section>
|
||
<swp-message-section-title>Indsæt variabel</swp-message-section-title>
|
||
<swp-variables-grid>
|
||
<swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
|
||
<swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
|
||
<swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
|
||
<swp-variable-tag data-var="{tid}"><i class="ph ph-clock"></i> tid</swp-variable-tag>
|
||
<swp-variable-tag data-var="{medarbejder}"><i class="ph ph-user-circle"></i> medarbejder</swp-variable-tag>
|
||
<swp-variable-tag data-var="{firma_navn}"><i class="ph ph-buildings"></i> firma_navn</swp-variable-tag>
|
||
<swp-variable-tag data-var="{firma_adresse}"><i class="ph ph-map-pin"></i> firma_adresse</swp-variable-tag>
|
||
<swp-variable-tag data-var="{firma_tlf}"><i class="ph ph-phone"></i> firma_tlf</swp-variable-tag>
|
||
<swp-variable-tag data-var="{booking_link}"><i class="ph ph-link"></i> booking_link</swp-variable-tag>
|
||
</swp-variables-grid>
|
||
</swp-message-section>
|
||
|
||
<swp-message-section>
|
||
<swp-message-section-title>Forhåndsvisning</swp-message-section-title>
|
||
<swp-message-preview id="messagePreview">
|
||
Hej <span class="highlight">Anna Jensen</span>!<br><br>
|
||
Din tid er bekræftet:<br>
|
||
<span class="highlight">Dameklip + Føn</span><br>
|
||
<span class="highlight">Torsdag d. 2. januar</span> kl. <span class="highlight">14:30</span><br><br>
|
||
Hos <span class="highlight">Maria</span><br>
|
||
<span class="highlight">Salon Beauty</span>, <span class="highlight">Hovedgaden 123</span><br><br>
|
||
Vil du ændre din tid? <span class="highlight">book.plantempus.dk/x7k2</span>
|
||
</swp-message-preview>
|
||
<swp-preview-meta>
|
||
<span><i class="ph ph-chat-text"></i> 312 tegn</span>
|
||
<span><i class="ph ph-coin"></i> 2 SMS (0,98 kr.)</span>
|
||
</swp-preview-meta>
|
||
</swp-message-section>
|
||
</swp-drawer-body>
|
||
|
||
<swp-drawer-footer>
|
||
<swp-btn class="secondary" id="drawerCancel">Annuller</swp-btn>
|
||
<swp-btn class="primary" id="drawerSave">
|
||
<i class="ph ph-check"></i>
|
||
Gem besked
|
||
</swp-btn>
|
||
</swp-drawer-footer>
|
||
</swp-drawer>
|
||
|
||
<!-- ==========================================
|
||
DRAWER: EMAIL SKABELON (bred)
|
||
========================================== -->
|
||
<swp-drawer-overlay id="emailDrawerOverlay"></swp-drawer-overlay>
|
||
<swp-drawer class="wide" id="emailDrawer">
|
||
<swp-drawer-header>
|
||
<swp-drawer-title>
|
||
<h3 id="emailDrawerTitle">Bekræftelse</h3>
|
||
<span>Email · Sendes når en aftale er booket</span>
|
||
</swp-drawer-title>
|
||
<swp-drawer-close id="emailDrawerClose">
|
||
<i class="ph ph-x"></i>
|
||
</swp-drawer-close>
|
||
</swp-drawer-header>
|
||
|
||
<swp-drawer-body>
|
||
<swp-email-editor-layout>
|
||
<!-- Sidebar med felter -->
|
||
<swp-email-sidebar>
|
||
<swp-edit-section>
|
||
<swp-edit-row>
|
||
<swp-edit-label>Email emne</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" id="emailSubject">Din tid hos Salon Beauty er bekræftet</swp-edit-value>
|
||
</swp-edit-row>
|
||
|
||
<swp-edit-row>
|
||
<swp-edit-label>Overskrift</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" id="emailHeadline">Tid bekræftet!</swp-edit-value>
|
||
</swp-edit-row>
|
||
|
||
<swp-edit-row>
|
||
<swp-edit-label>Velkomst</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" id="emailGreeting">Hej {kunde_navn},</swp-edit-value>
|
||
</swp-edit-row>
|
||
|
||
<swp-edit-row>
|
||
<swp-edit-label>Brødtekst</swp-edit-label>
|
||
<swp-edit-textarea contenteditable="true" id="emailBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-edit-textarea>
|
||
</swp-edit-row>
|
||
|
||
<swp-edit-row>
|
||
<swp-edit-label>Knap tekst</swp-edit-label>
|
||
<swp-edit-value contenteditable="true" id="emailButtonText">Se eller ændr din tid</swp-edit-value>
|
||
</swp-edit-row>
|
||
|
||
<swp-edit-row>
|
||
<swp-edit-label>Primær farve</swp-edit-label>
|
||
<swp-color-picker-row>
|
||
<input type="color" value="#00897b" id="emailColor">
|
||
<span id="emailColorValue">#00897b</span>
|
||
</swp-color-picker-row>
|
||
</swp-edit-row>
|
||
</swp-edit-section>
|
||
|
||
<swp-message-section>
|
||
<swp-message-section-title>Variabler</swp-message-section-title>
|
||
<swp-variables-grid>
|
||
<swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
|
||
<swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
|
||
<swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
|
||
<swp-variable-tag data-var="{tid}"><i class="ph ph-clock"></i> tid</swp-variable-tag>
|
||
<swp-variable-tag data-var="{medarbejder}"><i class="ph ph-user-circle"></i> medarbejder</swp-variable-tag>
|
||
</swp-variables-grid>
|
||
</swp-message-section>
|
||
</swp-email-sidebar>
|
||
|
||
<!-- Live preview -->
|
||
<swp-email-preview-container>
|
||
<swp-email-preview>
|
||
<swp-email-header id="emailPreviewHeader">
|
||
<swp-email-logo>SB</swp-email-logo>
|
||
<h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
|
||
<p>Salon Beauty</p>
|
||
</swp-email-header>
|
||
|
||
<swp-email-body>
|
||
<swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable">Anna</span>,</swp-email-greeting>
|
||
|
||
<swp-email-text id="emailPreviewBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-email-text>
|
||
|
||
<swp-email-appointment-card>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-scissors"></i>
|
||
<span><strong class="editable">Dameklip + Føn</strong></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-calendar"></i>
|
||
<span><span class="editable">Torsdag d. 2. januar 2025</span></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-clock"></i>
|
||
<span>Kl. <span class="editable">14:30</span> – <span class="editable">15:15</span></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-user-circle"></i>
|
||
<span>Hos <strong class="editable">Maria</strong></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-map-pin"></i>
|
||
<span>Hovedgaden 123, 2100 København Ø</span>
|
||
</swp-email-appointment-row>
|
||
</swp-email-appointment-card>
|
||
|
||
<swp-email-button-container>
|
||
<swp-email-button id="emailPreviewButton">Se eller ændr din tid</swp-email-button>
|
||
</swp-email-button-container>
|
||
</swp-email-body>
|
||
|
||
<swp-email-footer>
|
||
<swp-email-footer-logo>Salon Beauty</swp-email-footer-logo>
|
||
<p>Hovedgaden 123, 2100 København Ø</p>
|
||
<p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
|
||
<p style="margin-top: 12px; font-size: 11px;">
|
||
<a href="#">Afmeld emails</a>
|
||
</p>
|
||
</swp-email-footer>
|
||
</swp-email-preview>
|
||
</swp-email-preview-container>
|
||
</swp-email-editor-layout>
|
||
</swp-drawer-body>
|
||
|
||
<swp-drawer-footer>
|
||
<swp-btn class="secondary" id="emailDrawerCancel">Annuller</swp-btn>
|
||
<swp-btn class="primary" id="emailDrawerSave">
|
||
<i class="ph ph-check"></i>
|
||
Gem skabelon
|
||
</swp-btn>
|
||
</swp-drawer-footer>
|
||
</swp-drawer>
|
||
|
||
<script>
|
||
// Tab switching
|
||
document.querySelectorAll('swp-tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
const tabName = tab.dataset.tab;
|
||
|
||
// Update active tab
|
||
document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
|
||
// Update active content
|
||
document.querySelectorAll('swp-tab-content').forEach(c => c.classList.remove('active'));
|
||
document.querySelector(`swp-tab-content[data-tab="${tabName}"]`).classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Toggle slider functionality
|
||
document.querySelectorAll('swp-toggle-slider').forEach(slider => {
|
||
slider.querySelectorAll('swp-toggle-option').forEach((option, index) => {
|
||
option.addEventListener('click', () => {
|
||
slider.dataset.value = index === 0 ? 'yes' : 'no';
|
||
});
|
||
});
|
||
});
|
||
|
||
// Copy URL
|
||
document.querySelector('swp-url-copy')?.addEventListener('click', () => {
|
||
const input = document.querySelector('swp-url-field input');
|
||
navigator.clipboard.writeText(input.value);
|
||
alert('Link kopieret!');
|
||
});
|
||
|
||
// ==========================================
|
||
// SMS DRAWER
|
||
// ==========================================
|
||
const smsDrawer = document.getElementById('messageDrawer');
|
||
const smsOverlay = document.getElementById('drawerOverlay');
|
||
const smsTitle = document.getElementById('drawerTitle');
|
||
const smsSubtitle = document.getElementById('drawerSubtitle');
|
||
|
||
function openSmsDrawer(title, subtitle) {
|
||
smsTitle.textContent = title;
|
||
smsSubtitle.textContent = subtitle;
|
||
smsDrawer.classList.add('open');
|
||
smsOverlay.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeSmsDrawer() {
|
||
smsDrawer.classList.remove('open');
|
||
smsOverlay.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.getElementById('drawerClose').addEventListener('click', closeSmsDrawer);
|
||
document.getElementById('drawerCancel').addEventListener('click', closeSmsDrawer);
|
||
smsOverlay.addEventListener('click', closeSmsDrawer);
|
||
document.getElementById('drawerSave').addEventListener('click', closeSmsDrawer);
|
||
|
||
// ==========================================
|
||
// EMAIL DRAWER
|
||
// ==========================================
|
||
const emailDrawer = document.getElementById('emailDrawer');
|
||
const emailOverlay = document.getElementById('emailDrawerOverlay');
|
||
const emailTitle = document.getElementById('emailDrawerTitle');
|
||
|
||
function openEmailDrawer(title) {
|
||
emailTitle.textContent = title;
|
||
emailDrawer.classList.add('open');
|
||
emailOverlay.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeEmailDrawer() {
|
||
emailDrawer.classList.remove('open');
|
||
emailOverlay.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.getElementById('emailDrawerClose').addEventListener('click', closeEmailDrawer);
|
||
document.getElementById('emailDrawerCancel').addEventListener('click', closeEmailDrawer);
|
||
emailOverlay.addEventListener('click', closeEmailDrawer);
|
||
document.getElementById('emailDrawerSave').addEventListener('click', closeEmailDrawer);
|
||
|
||
// ==========================================
|
||
// OPEN CORRECT DRAWER
|
||
// ==========================================
|
||
document.querySelectorAll('swp-edit-link').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
const item = link.closest('swp-notification-item');
|
||
const titleEl = item?.querySelector('swp-notification-title');
|
||
const title = titleEl?.childNodes[0]?.textContent.trim() || 'Besked';
|
||
const card = link.closest('swp-card');
|
||
const isEmail = card?.querySelector('swp-card-title')?.textContent.includes('Email');
|
||
const desc = item?.querySelector('swp-notification-desc')?.textContent || '';
|
||
|
||
if (isEmail) {
|
||
openEmailDrawer(title);
|
||
} else {
|
||
openSmsDrawer(title, `SMS · ${desc}`);
|
||
}
|
||
});
|
||
});
|
||
|
||
// ==========================================
|
||
// EMAIL LIVE PREVIEW
|
||
// ==========================================
|
||
const emailHeadline = document.getElementById('emailHeadline');
|
||
const emailBody = document.getElementById('emailBody');
|
||
const emailButtonText = document.getElementById('emailButtonText');
|
||
const emailColor = document.getElementById('emailColor');
|
||
const emailColorValue = document.getElementById('emailColorValue');
|
||
|
||
// Update headline (contenteditable)
|
||
emailHeadline?.addEventListener('input', () => {
|
||
document.getElementById('emailPreviewHeadline').textContent = emailHeadline.textContent;
|
||
});
|
||
|
||
// Update body text (contenteditable)
|
||
emailBody?.addEventListener('input', () => {
|
||
document.getElementById('emailPreviewBody').textContent = emailBody.textContent;
|
||
});
|
||
|
||
// Update button text (contenteditable)
|
||
emailButtonText?.addEventListener('input', () => {
|
||
document.getElementById('emailPreviewButton').textContent = emailButtonText.textContent;
|
||
});
|
||
|
||
// Update color
|
||
emailColor?.addEventListener('input', (e) => {
|
||
const color = e.target.value;
|
||
emailColorValue.textContent = color;
|
||
|
||
const header = document.getElementById('emailPreviewHeader');
|
||
header.style.background = `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -20)} 100%)`;
|
||
|
||
document.getElementById('emailPreviewButton').style.background = color;
|
||
|
||
document.querySelectorAll('swp-email-appointment-row i').forEach(icon => {
|
||
icon.style.color = color;
|
||
});
|
||
|
||
document.querySelector('swp-email-appointment-card').style.borderLeftColor = color;
|
||
|
||
// Update logo color
|
||
document.querySelector('swp-email-logo').style.color = color;
|
||
});
|
||
|
||
function adjustColor(hex, amount) {
|
||
const num = parseInt(hex.slice(1), 16);
|
||
const r = Math.max(0, Math.min(255, (num >> 16) + amount));
|
||
const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amount));
|
||
const b = Math.max(0, Math.min(255, (num & 0x0000FF) + amount));
|
||
return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
|
||
}
|
||
|
||
// ==========================================
|
||
// INSERT VARIABLE (SMS)
|
||
// ==========================================
|
||
document.querySelectorAll('#messageDrawer swp-variable-tag').forEach(tag => {
|
||
tag.addEventListener('click', () => {
|
||
const varText = tag.dataset.var;
|
||
const editor = document.getElementById('messageEditor');
|
||
|
||
const selection = window.getSelection();
|
||
if (selection.rangeCount > 0) {
|
||
const range = selection.getRangeAt(0);
|
||
if (editor.contains(range.commonAncestorContainer)) {
|
||
range.deleteContents();
|
||
range.insertNode(document.createTextNode(varText));
|
||
range.collapse(false);
|
||
return;
|
||
}
|
||
}
|
||
editor.textContent += varText;
|
||
});
|
||
});
|
||
|
||
// ==========================================
|
||
// ESCAPE KEY
|
||
// ==========================================
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
if (smsDrawer.classList.contains('open')) closeSmsDrawer();
|
||
if (emailDrawer.classList.contains('open')) closeEmailDrawer();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|