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" >
2026-01-01 19:57:05 +01:00
< title > Indstillinger - KARINA KNUDSEN®< / title >
2025-12-31 00:36:32 +01:00
< 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;
}
2026-01-02 21:19:10 +01:00
/* ==========================================
CLOSED DAYS LIST
========================================== */
swp-closed-days-list {
display: flex;
flex-direction: column;
gap: 0;
}
swp-closed-day-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
swp-closed-day-item:last-child {
border-bottom: none;
}
swp-closed-day-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
swp-closed-day-date {
font-size: 13px;
font-weight: 500;
color: var(--color-text);
}
swp-closed-day-name {
font-size: 12px;
color: var(--color-text-secondary);
}
swp-closed-day-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
border-radius: 4px;
flex-shrink: 0;
}
swp-closed-day-badge.holiday {
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-closed-day-badge.custom {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
swp-closed-day-item swp-icon-btn {
width: 32px;
height: 32px;
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;
flex-shrink: 0;
}
swp-closed-day-item swp-icon-btn i {
font-size: 16px;
}
swp-closed-day-item swp-icon-btn.edit:hover {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
swp-closed-day-item swp-icon-btn.delete:hover {
background: color-mix(in srgb, var(--color-red) 15%, transparent);
color: var(--color-red);
}
2025-12-31 00:36:32 +01:00
/* ==========================================
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;
2026-01-01 19:57:05 +01:00
position: relative;
}
/* Onboarding popover */
#variablesHint[popover] {
margin: 0;
border: none;
padding: 0;
background: transparent;
overflow: visible;
inset: unset;
}
#variablesHint[popover]:popover-open {
display: block;
}
swp-onboarding-hint {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
color: white;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}
swp-onboarding-hint i.ph-lightbulb {
font-size: 18px;
}
swp-onboarding-hint::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #8b5cf6;
}
swp-onboarding-hint swp-hint-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
font-size: 12px;
transition: background 150ms ease;
}
swp-onboarding-hint swp-hint-close:hover {
background: rgba(255, 255, 255, 0.3);
2025-12-31 00:36:32 +01:00
}
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
}
2026-01-02 21:19:10 +01:00
/* ==========================================
MODULES TAB STYLES
========================================== */
swp-modules-section {
display: block;
margin-bottom: 32px;
}
swp-modules-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
swp-modules-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: var(--color-text);
}
swp-modules-title i {
font-size: 20px;
color: var(--color-teal);
}
swp-modules-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 20px;
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-modules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
swp-modules-grid {
grid-template-columns: 1fr;
}
}
swp-module-card {
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
transition: all 150ms ease;
}
2026-01-03 16:18:53 +01:00
swp-module-card.full-width {
grid-column: 1 / -1;
}
2026-01-02 21:19:10 +01:00
swp-module-card:hover {
border-color: var(--color-teal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
swp-module-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
}
swp-module-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
swp-module-icon i {
font-size: 24px;
}
swp-module-icon.teal {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
color: var(--color-teal);
}
swp-module-icon.purple {
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-module-icon.blue {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
swp-module-icon.amber {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
swp-module-icon.green {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-module-info {
flex: 1;
min-width: 0;
}
swp-module-title {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
swp-module-desc {
display: block;
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.4;
}
swp-module-toggle {
flex-shrink: 0;
}
swp-module-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
}
swp-module-tags {
display: flex;
align-items: center;
gap: 8px;
}
swp-module-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
background: var(--color-background);
color: var(--color-text-secondary);
}
swp-module-tag.included {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-module-tag.price {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
swp-module-tag.new {
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
color: var(--color-purple);
}
swp-module-tag.coming {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
/* Featured module card */
swp-module-card.featured {
border: 2px solid var(--color-green);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-green) 3%, var(--color-surface)) 0%, var(--color-surface) 100%);
}
swp-module-card.featured:hover {
border-color: var(--color-green);
box-shadow: 0 4px 16px rgba(67, 160, 71, 0.15);
}
swp-module-features {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 0 20px 16px;
}
swp-module-feature {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-text-secondary);
}
swp-module-feature i {
font-size: 16px;
color: var(--color-green);
}
swp-module-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px 20px;
background: color-mix(in srgb, var(--color-green) 6%, transparent);
border-top: 1px solid color-mix(in srgb, var(--color-green) 20%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-green) 20%, transparent);
}
swp-module-stat {
text-align: center;
}
swp-module-stat-value {
display: block;
font-size: 20px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--color-green);
}
swp-module-stat-label {
display: block;
font-size: 11px;
color: var(--color-text-secondary);
margin-top: 2px;
}
/* Purple featured variant */
swp-module-card.featured.purple {
border-color: var(--color-purple);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 3%, var(--color-surface)) 0%, var(--color-surface) 100%);
}
swp-module-card.featured.purple:hover {
border-color: var(--color-purple);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}
swp-module-feature.purple i {
color: var(--color-purple);
}
swp-module-stats.purple {
background: color-mix(in srgb, var(--color-purple) 6%, transparent);
border-top-color: color-mix(in srgb, var(--color-purple) 20%, transparent);
border-bottom-color: color-mix(in srgb, var(--color-purple) 20%, transparent);
}
swp-module-stats.purple swp-module-stat-value {
color: var(--color-purple);
}
swp-btn.primary.purple {
background: var(--color-purple);
}
swp-btn.primary.purple:hover {
background: color-mix(in srgb, var(--color-purple) 85%, black);
}
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 >
2026-01-02 07:39:53 +01:00
< swp-tab data-tab = "payments" >
< i class = "ph ph-credit-card" > < / i >
Betalinger
< / swp-tab >
2026-01-02 21:19:10 +01:00
< swp-tab data-tab = "modules" >
< i class = "ph ph-puzzle-piece" > < / i >
Moduler
< / swp-tab >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-01 19:57:05 +01:00
< swp-edit-value contenteditable = "true" > KARINA KNUDSEN®< / swp-edit-value >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-02 21:19:10 +01:00
< swp-card >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-calendar-x" > < / i >
Helligdage & lukkedage
< / swp-card-title >
< swp-btn class = "small secondary" id = "addClosedDayBtn" >
< i class = "ph ph-plus" > < / i >
Tilføj lukkedag
< / swp-btn >
< / swp-card-header >
< swp-card-content >
< swp-toggle-row >
< swp-toggle-info >
< swp-toggle-label > Luk automatisk på helligdage< / swp-toggle-label >
< swp-toggle-desc > Salonen lukkes automatisk på danske helligdage< / 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-closed-days-list >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 5. april 2026< / swp-closed-day-date >
< swp-closed-day-name > Påskedag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 1. maj 2026< / swp-closed-day-date >
< swp-closed-day-name > Store bededag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 14. maj 2026< / swp-closed-day-date >
< swp-closed-day-name > Kristi Himmelfart< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 24. maj 2026< / swp-closed-day-date >
< swp-closed-day-name > Pinsedag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 25. maj 2026< / swp-closed-day-date >
< swp-closed-day-name > 2. pinsedag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 5. juni 2026< / swp-closed-day-date >
< swp-closed-day-name > Grundlovsdag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 24. december 2026< / swp-closed-day-date >
< swp-closed-day-name > Juleaften< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 25. december 2026< / swp-closed-day-date >
< swp-closed-day-name > 1. juledag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 26. december 2026< / swp-closed-day-date >
< swp-closed-day-name > 2. juledag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 1. januar 2027< / swp-closed-day-date >
< swp-closed-day-name > Nytårsdag< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "holiday" > Helligdag< / swp-closed-day-badge >
< swp-icon-btn class = "edit" title = "Rediger åbningstid" >
< i class = "ph ph-pencil-simple" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 14. - 28. juli 2026< / swp-closed-day-date >
< swp-closed-day-name > Sommerferie< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "custom" > Lukkedag< / swp-closed-day-badge >
< swp-icon-btn class = "delete" title = "Fjern" >
< i class = "ph ph-trash" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< swp-closed-day-item >
< swp-closed-day-info >
< swp-closed-day-date > 24. - 26. december 2026< / swp-closed-day-date >
< swp-closed-day-name > Julelukning< / swp-closed-day-name >
< / swp-closed-day-info >
< swp-closed-day-badge class = "custom" > Lukkedag< / swp-closed-day-badge >
< swp-icon-btn class = "delete" title = "Fjern" >
< i class = "ph ph-trash" > < / i >
< / swp-icon-btn >
< / swp-closed-day-item >
< / swp-closed-days-list >
< / swp-card-content >
< / swp-card >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-01 19:57:05 +01:00
< swp-edit-value contenteditable = "true" > KARINA KNUDSEN® ApS< / swp-edit-value >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-02 07:39:53 +01:00
< swp-edit-value contenteditable = "true" > Amager Strandvej 22f, 2300 København S< / swp-edit-value >
2025-12-31 00:36:32 +01:00
< / 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
2026-01-02 21:19:10 +01:00
< swp-notification-price > (0,30 kr.)< / swp-notification-price >
2025-12-31 00:36:32 +01:00
< / 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
2026-01-02 21:19:10 +01:00
< swp-notification-price > (0,30 kr.)< / swp-notification-price >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-02 07:39:53 +01:00
<!-- ==========================================
TAB: BETALINGER
========================================== -->
< swp-tab-content data-tab = "payments" >
< swp-card >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-wallet" > < / i >
Betalingsmetoder i butik
< / swp-card-title >
< / swp-card-header >
< swp-card-content >
< swp-section-intro > Vælg hvilke betalingsmetoder dine kunder kan bruge ved checkout i butikken.< / swp-section-intro >
< swp-toggle-row >
< swp-toggle-info >
< swp-toggle-label > Kontant< / swp-toggle-label >
< swp-toggle-desc > Modtag kontant betaling< / 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 > Dankort / Visa / Mastercard< / swp-toggle-label >
< swp-toggle-desc > Betalingskort via terminal< / 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 > MobilePay< / swp-toggle-label >
< swp-toggle-desc > Betaling via MobilePay< / 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 > Gavekort< / swp-toggle-label >
< swp-toggle-desc > Indløs gavekort som betaling< / 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 > Faktura< / swp-toggle-label >
< swp-toggle-desc > Send faktura til kunden< / 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-card-content >
< / swp-card >
< swp-card >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-globe" > < / i >
Online betaling
< / swp-card-title >
< / swp-card-header >
< swp-card-content >
< swp-toggle-row >
< swp-toggle-info >
< swp-toggle-label > Modtag betaling ved online booking< / swp-toggle-label >
< swp-toggle-desc > Kunder betaler når de booker online< / swp-toggle-desc >
< / swp-toggle-info >
< swp-toggle-slider data-value = "no" id = "onlinePaymentToggle" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-toggle-row >
< div id = "onlinePaymentSettings" style = "display: none;" >
< swp-section-divider > < / swp-section-divider >
< swp-info-box >
< i class = "ph ph-info" > < / i >
< p > Online betalinger håndteres via Stripe. Beløbet overføres automatisk til din bankkonto efter den valgte periode.< / p >
< / swp-info-box >
< swp-edit-section >
< swp-edit-row class = "wide-label" >
< swp-edit-label > Registreringsnummer< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" > 1234< / swp-edit-value >
< / swp-edit-row >
< swp-edit-row class = "wide-label" >
< swp-edit-label > Kontonummer< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" > 12345678< / swp-edit-value >
< / swp-edit-row >
< swp-edit-row class = "wide-label" >
< swp-edit-label > Udbetaling< / swp-edit-label >
< swp-edit-select >
< select >
< option value = "7" selected > Hver uge< / option >
< option value = "14" > Hver 2. uge< / option >
< option value = "28" > Hver 4. uge< / option >
< / select >
< / swp-edit-select >
< / swp-edit-row >
< / swp-edit-section >
< / div >
< / swp-card-content >
< / swp-card >
< swp-card >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-percent" > < / i >
Gebyr & tillæg
< / swp-card-title >
< / swp-card-header >
< swp-card-content >
< swp-toggle-row >
< swp-toggle-info >
< swp-toggle-label > Vis kortgebyr til kunden< / swp-toggle-label >
< swp-toggle-desc > Vis kortgebyr som separat linje på kvittering< / swp-toggle-desc >
< / swp-toggle-info >
< 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-card-content >
< / swp-card >
< / swp-tab-content >
2026-01-02 21:19:10 +01:00
<!-- ==========================================
TAB: MODULER
========================================== -->
< swp-tab-content data-tab = "modules" >
<!-- Løn & Økonomi sektion -->
< swp-modules-section >
< swp-modules-header >
< swp-modules-title >
< i class = "ph ph-wallet" > < / i >
Løn & Økonomi
< / swp-modules-title >
< / swp-modules-header >
< swp-modules-grid >
<!-- Lønberegning -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "teal" >
< i class = "ph ph-calculator" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Lønberegning< / swp-module-title >
< swp-module-desc > Beregn løn, overtid, provision og ferie automatisk. Grundmodul for løneksport til eksterne systemer.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Intect -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-export" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Intect< / swp-module-title >
< swp-module-desc > Eksporter direkte til Intect lønsystem i StandardMapping-format.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Proløn -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-export" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Proløn< / swp-module-title >
< swp-module-desc > Eksporter direkte til Proløn lønsystem.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "coming" > Kommer< / swp-module-tag >
< / swp-module-tags >
< / swp-module-footer >
< / swp-module-card >
<!-- Danløn -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-export" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Danløn< / swp-module-title >
< swp-module-desc > Eksporter direkte til Danløn lønsystem.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "coming" > Kommer< / swp-module-tag >
< / swp-module-tags >
< / swp-module-footer >
< / swp-module-card >
<!-- Salary.dk -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-export" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Salary.dk< / swp-module-title >
< swp-module-desc > Eksporter direkte til Salary.dk lønsystem.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "coming" > Kommer< / swp-module-tag >
< / swp-module-tags >
< / swp-module-footer >
< / swp-module-card >
<!-- Zenegy -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "teal" >
< i class = "ph ph-export" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Zenegy< / swp-module-title >
< swp-module-desc > Eksporter direkte til Zenegy lønsystem. Automatisk overførsel af timer og provision.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "coming" > Kommer< / swp-module-tag >
< / swp-module-tags >
< / swp-module-footer >
< / swp-module-card >
< / swp-modules-grid >
< / swp-modules-section >
<!-- AI & Analyse sektion -->
< swp-modules-section >
< swp-modules-header >
< swp-modules-title >
< i class = "ph ph-brain" > < / i >
AI & Analyse
< / swp-modules-title >
< swp-modules-badge > Nyt< / swp-modules-badge >
< / swp-modules-header >
< swp-modules-grid >
<!-- AI Dashboard -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "purple" >
< i class = "ph ph-sparkle" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > AI Dashboard< / swp-module-title >
< swp-module-desc > Din personlige AI-assistent på dashboardet. Få daglige indsigter, anbefalinger og svar på spørgsmål om din forretning.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- AI Virksomhedsanalyse -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "purple" >
< i class = "ph ph-chart-line-up" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > AI Virksomhedsanalyse< / swp-module-title >
< swp-module-desc > Dybdegående AI-analyse af timer vs. omsætning, belægningsgrad og identificer mønstre og vækstmuligheder.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "price" > +49 kr/md< / swp-module-tag >
< swp-module-tag class = "new" > Beta< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Læs mere< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- AI Produktsalg -->
< swp-module-card class = "featured purple" >
< swp-module-header >
< swp-module-icon class = "purple" >
< i class = "ph ph-shopping-bag" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > AI Produktsalg< / swp-module-title >
< swp-module-desc > Øg dit produktsalg med intelligente anbefalinger. AI'en lærer dine kunders præferencer og foreslår de rigtige produkter på det rigtige tidspunkt.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-features >
< swp-module-feature class = "purple" >
< i class = "ph ph-check-circle" > < / i >
< span > Personlige produktanbefalinger< / span >
< / swp-module-feature >
< swp-module-feature class = "purple" >
< i class = "ph ph-check-circle" > < / i >
< span > Automatisk mersalg ved kassen< / span >
< / swp-module-feature >
< swp-module-feature class = "purple" >
< i class = "ph ph-check-circle" > < / i >
< span > Kundeprofilanalyse< / span >
< / swp-module-feature >
< swp-module-feature class = "purple" >
< i class = "ph ph-check-circle" > < / i >
< span > Sæson- og trendbaserede forslag< / span >
< / swp-module-feature >
< / swp-module-features >
< swp-module-stats class = "purple" >
< swp-module-stat >
< swp-module-stat-value > +23%< / swp-module-stat-value >
< swp-module-stat-label > Mersalg pr. kunde< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 4.2x< / swp-module-stat-value >
< swp-module-stat-label > Højere konvertering< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 89%< / swp-module-stat-value >
< swp-module-stat-label > Relevante forslag< / swp-module-stat-label >
< / swp-module-stat >
< / swp-module-stats >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "price" > +49 kr/md< / swp-module-tag >
< swp-module-tag class = "new" > Beta< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small primary purple" > Prøv gratis i 14 dage< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- AI Kalenderoptimering -->
< swp-module-card class = "featured" >
< swp-module-header >
< swp-module-icon class = "green" >
< i class = "ph ph-sparkle" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > AI Kalenderoptimering< / swp-module-title >
< swp-module-desc > Maksimer din kalenderudnyttelse og reducer tabt omsætning. AI'en foreslår optimale tider til kunder og identificerer huller der kan fyldes.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-features >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Smart tidsforslag ved booking< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Automatisk hul-identifikation< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > SMS-tilbud til flytning af tider< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Dashboard med optimeringsscore< / span >
< / swp-module-feature >
< / swp-module-features >
< swp-module-stats >
< swp-module-stat >
< swp-module-stat-value > 52x< / swp-module-stat-value >
< swp-module-stat-label > ROI i gennemsnit< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 15%< / swp-module-stat-value >
< swp-module-stat-label > Færre tomme slots< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 312k< / swp-module-stat-value >
< swp-module-stat-label > Ekstra oms./år*< / swp-module-stat-label >
< / swp-module-stat >
< / swp-module-stats >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "price" > +99 kr/md< / swp-module-tag >
< swp-module-tag class = "new" > Ny< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small primary" > Prøv gratis i 14 dage< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
< / swp-modules-grid >
< / swp-modules-section >
<!-- Tillægsmoduler sektion -->
< swp-modules-section >
< swp-modules-header >
< swp-modules-title >
< i class = "ph ph-plus-circle" > < / i >
Tillægsmoduler
< / swp-modules-title >
< / swp-modules-header >
< swp-modules-grid >
<!-- Online Booking -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "teal" >
< i class = "ph ph-globe" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Online Booking< / swp-module-title >
< swp-module-desc > Lad kunder booke tider online via din egen bookingside. Integreres med kalender og påmindelser.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Gavekort -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "amber" >
< i class = "ph ph-gift" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Gavekort< / swp-module-title >
< swp-module-desc > Sælg og administrer digitale gavekort. Kunderne kan købe online eller i butikken, og indløse ved betaling.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Kasseafstemning -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-calculator" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Kasseafstemning< / swp-module-title >
< swp-module-desc > Daglig kasseopgørelse og afstemning. Hold styr på kontanter, kort og andre betalingsmetoder.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Leverandører -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "green" >
< i class = "ph ph-truck" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Leverandører< / swp-module-title >
< swp-module-desc > Bestil varer direkte fra dine leverandører. Hold styr på ordrer, leveringer og lagerbeholdning.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Stregkodescanner -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "purple" >
< i class = "ph ph-barcode" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Stregkodescanner< / swp-module-title >
< swp-module-desc > Scan EAN-koder og få AI-genererede produktbeskrivelser automatisk. Opret nye produkter på sekunder.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< swp-module-tag class = "new" > AI< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
2026-01-03 16:18:53 +01:00
<!-- Website Builder -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "teal" >
< i class = "ph ph-layout" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Website Builder< / swp-module-title >
< swp-module-desc > Byg din salons hjemmeside med drag-and-drop blokke. Vælg mellem færdige designs, tilpas farver og fonte, og integrer din booking.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "price" > +149 kr/md< / swp-module-tag >
< swp-module-tag class = "new" > Ny< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" onclick = "window.open('poc-website-builder.html', '_blank')" > Åbn Builder< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- HR & Dokumenter -->
< swp-module-card class = "full-width" >
< swp-module-header >
< swp-module-icon class = "purple" >
< i class = "ph ph-folder-user" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > HR & Dokumenter< / swp-module-title >
< swp-module-desc > Komplet medarbejderstyring: Kontrakter, certificeringer, kurser, ferie-saldo, sygefravær og barsel. Upload dokumenter og få påmindelser om udløbsdatoer.< / swp-module-desc >
< / swp-module-info >
< swp-module-toggle >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Til< / swp-toggle-option >
< swp-toggle-option > Fra< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-module-toggle >
< / swp-module-header >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small secondary" > Indstillinger< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
2026-01-02 21:19:10 +01:00
< / swp-modules-grid >
< / swp-modules-section >
< / swp-tab-content >
2025-12-31 00:36:32 +01:00
<!-- ==========================================
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 >
2026-01-01 19:57:05 +01:00
< swp-variables-grid id = "smsVariablesGrid" >
2025-12-31 00:36:32 +01:00
< 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 >
2026-01-01 19:57:05 +01:00
< span class = "highlight" data-var = "{firma_navn}" > KARINA KNUDSEN®< / span > , < span class = "highlight" data-var = "{firma_adresse}" > Hovedgaden 123< / span > < br > < br >
2025-12-31 10:57:28 +01:00
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 >
2026-01-01 19:57:05 +01:00
< swp-edit-value contenteditable = "true" id = "emailSubject" > Din tid hos KARINA KNUDSEN® er bekræftet< / swp-edit-value >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-01 19:57:05 +01:00
< p > KARINA KNUDSEN®< / p >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-02 07:39:53 +01:00
< span > Amager Strandvej 22f, 2300 København S< / span >
2025-12-31 00:36:32 +01:00
< / 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 >
2026-01-01 19:57:05 +01:00
< swp-email-footer-logo > KARINA KNUDSEN®< / swp-email-footer-logo >
2026-01-02 07:39:53 +01:00
< p > Amager Strandvej 22f, 2300 København S< / p >
2025-12-31 00:36:32 +01:00
< 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 >
2026-01-01 19:57:05 +01:00
<!-- Onboarding Popover -->
< div id = "variablesHint" popover = "manual" >
< swp-onboarding-hint >
< i class = "ph ph-lightbulb" > < / i >
< span > Klik for at indsætte, hold musen over for at se i preview< / span >
< swp-hint-close > < i class = "ph ph-x" > < / i > < / swp-hint-close >
< / swp-onboarding-hint >
< / div >
2025-12-31 00:36:32 +01:00
< 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';
2026-01-01 19:57:05 +01:00
// Show onboarding hint if not seen before
if (!localStorage.getItem('variablesHintSeen')) {
setTimeout(() => {
showVariablesHint();
}, 600);
}
}
function showVariablesHint() {
const hint = document.getElementById('variablesHint');
const anchor = document.getElementById('smsVariablesGrid');
if (!hint || !anchor) return;
const anchorRect = anchor.getBoundingClientRect();
hint.style.position = 'fixed';
hint.style.top = `${anchorRect.top - 60}px`;
hint.style.left = `${anchorRect.left - 80}px`;
hint.showPopover();
}
function hideVariablesHint() {
const hint = document.getElementById('variablesHint');
if (hint) {
hint.hidePopover();
localStorage.setItem('variablesHintSeen', 'true');
}
2025-12-31 00:36:32 +01:00
}
function closeSmsDrawer() {
smsDrawer.classList.remove('open');
smsOverlay.classList.remove('open');
document.body.style.overflow = '';
2026-01-01 19:57:05 +01:00
// Hide hint without marking as seen (will show again next time)
const hint = document.getElementById('variablesHint');
if (hint) {
try { hint.hidePopover(); } catch(e) {}
}
2025-12-31 00:36:32 +01:00
}
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');
2026-01-01 19:57:05 +01:00
// Dismiss onboarding hint on first click
hideVariablesHint();
2025-12-31 00:36:32 +01:00
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
});
2026-01-01 19:57:05 +01:00
// ==========================================
// ONBOARDING HINT CLOSE
// ==========================================
document.querySelectorAll('swp-hint-close').forEach(closeBtn => {
closeBtn.addEventListener('click', () => {
hideVariablesHint();
});
});
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();
}
});
2026-01-02 07:39:53 +01:00
// ==========================================
// ONLINE PAYMENT TOGGLE
// ==========================================
const onlinePaymentToggle = document.getElementById('onlinePaymentToggle');
const onlinePaymentSettings = document.getElementById('onlinePaymentSettings');
function updateOnlinePaymentVisibility() {
if (onlinePaymentToggle & & onlinePaymentSettings) {
const isEnabled = onlinePaymentToggle.dataset.value === 'yes';
onlinePaymentSettings.style.display = isEnabled ? 'block' : 'none';
}
}
if (onlinePaymentToggle) {
onlinePaymentToggle.querySelectorAll('swp-toggle-option').forEach((option, index) => {
option.addEventListener('click', () => {
onlinePaymentToggle.dataset.value = index === 0 ? 'yes' : 'no';
updateOnlinePaymentVisibility();
});
});
// Initial state
updateOnlinePaymentVisibility();
}
2025-12-31 00:36:32 +01:00
< / script >
< / body >
< / html >
