11338012cd
Enhances message and email previews by adding hover-based variable highlighting Implements interactive feature that: - Adds data attributes to preview elements - Creates hover effects for variables - Provides visual feedback when selecting message variables
2363 lines
72 KiB
HTML
2363 lines
72 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 {
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
cursor: pointer;
|
||
}
|
||
|
||
swp-message-preview .highlight.active {
|
||
background: color-mix(in srgb, var(--color-teal) 35%, transparent);
|
||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-teal) 20%, transparent);
|
||
}
|
||
|
||
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 {
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
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 - only on hover */
|
||
swp-email-preview .editable {
|
||
padding: 1px 3px;
|
||
border-radius: 2px;
|
||
transition: all 150ms ease;
|
||
}
|
||
|
||
swp-email-preview .editable.active {
|
||
background: rgba(0, 137, 123, 0.35);
|
||
box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.2);
|
||
}
|
||
</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" data-var="{kunde_navn}">Anna Jensen</span>!<br><br>
|
||
Din tid er bekræftet:<br>
|
||
<span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
|
||
<span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
|
||
Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
|
||
<span class="highlight" data-var="{firma_navn}">Salon Beauty</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
|
||
Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">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" data-var="{kunde_navn}">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" data-var="{behandling}">Dameklip + Føn</strong></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-calendar"></i>
|
||
<span><span class="editable" data-var="{dato}">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" data-var="{tid}">14:30</span> – <span class="editable" data-var="{tid}">15:15</span></span>
|
||
</swp-email-appointment-row>
|
||
<swp-email-appointment-row>
|
||
<i class="ph ph-user-circle"></i>
|
||
<span>Hos <strong class="editable" data-var="{medarbejder}">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;
|
||
});
|
||
|
||
// Highlight preview on hover
|
||
tag.addEventListener('mouseenter', () => {
|
||
const varName = tag.dataset.var;
|
||
const preview = document.getElementById('messagePreview');
|
||
preview.querySelectorAll(`.highlight[data-var="${varName}"]`).forEach(span => {
|
||
span.classList.add('active');
|
||
});
|
||
});
|
||
|
||
tag.addEventListener('mouseleave', () => {
|
||
const preview = document.getElementById('messagePreview');
|
||
preview.querySelectorAll('.highlight.active').forEach(span => {
|
||
span.classList.remove('active');
|
||
});
|
||
});
|
||
});
|
||
|
||
// ==========================================
|
||
// HIGHLIGHT EMAIL PREVIEW ON HOVER
|
||
// ==========================================
|
||
document.querySelectorAll('#emailDrawer swp-variable-tag').forEach(tag => {
|
||
tag.addEventListener('mouseenter', () => {
|
||
const varName = tag.dataset.var;
|
||
const preview = document.querySelector('swp-email-preview');
|
||
preview.querySelectorAll(`.editable[data-var="${varName}"]`).forEach(span => {
|
||
span.classList.add('active');
|
||
});
|
||
});
|
||
|
||
tag.addEventListener('mouseleave', () => {
|
||
const preview = document.querySelector('swp-email-preview');
|
||
preview.querySelectorAll('.editable.active').forEach(span => {
|
||
span.classList.remove('active');
|
||
});
|
||
});
|
||
});
|
||
|
||
// ==========================================
|
||
// 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>
|