2025-12-31 00:36:32 +01:00
|
|
|
|
<!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);
|
2025-12-31 10:57:28 +01:00
|
|
|
|
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);
|
2025-12-31 00:36:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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;
|
2025-12-31 10:57:28 +01:00
|
|
|
|
transition: all 150ms ease;
|
2025-12-31 00:36:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-12-31 10:57:28 +01:00
|
|
|
|
/* Highlight in email preview - only on hover */
|
2025-12-31 00:36:32 +01:00
|
|
|
|
swp-email-preview .editable {
|
|
|
|
|
|
padding: 1px 3px;
|
|
|
|
|
|
border-radius: 2px;
|
2025-12-31 10:57:28 +01:00
|
|
|
|
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);
|
2025-12-31 00:36:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
</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">
|
2025-12-31 10:57:28 +01:00
|
|
|
|
Hej <span class="highlight" data-var="{kunde_navn}">Anna Jensen</span>!<br><br>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
Din tid er bekræftet:<br>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<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>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
</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>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable" data-var="{kunde_navn}">Anna</span>,</swp-email-greeting>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
|
|
|
|
|
|
<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>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<span><strong class="editable" data-var="{behandling}">Dameklip + Føn</strong></span>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
</swp-email-appointment-row>
|
|
|
|
|
|
<swp-email-appointment-row>
|
|
|
|
|
|
<i class="ph ph-calendar"></i>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<span><span class="editable" data-var="{dato}">Torsdag d. 2. januar 2025</span></span>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
</swp-email-appointment-row>
|
|
|
|
|
|
<swp-email-appointment-row>
|
|
|
|
|
|
<i class="ph ph-clock"></i>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<span>Kl. <span class="editable" data-var="{tid}">14:30</span> – <span class="editable" data-var="{tid}">15:15</span></span>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
</swp-email-appointment-row>
|
|
|
|
|
|
<swp-email-appointment-row>
|
|
|
|
|
|
<i class="ph ph-user-circle"></i>
|
2025-12-31 10:57:28 +01:00
|
|
|
|
<span>Hos <strong class="editable" data-var="{medarbejder}">Maria</strong></span>
|
2025-12-31 00:36:32 +01:00
|
|
|
|
</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;
|
|
|
|
|
|
});
|
2025-12-31 10:57:28 +01:00
|
|
|
|
|
|
|
|
|
|
// 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');
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2025-12-31 00:36:32 +01:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
|
// 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>
|
