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);
}
2026-01-05 17:38:39 +01:00
/* ==========================================
TRACKING TAB
========================================== */
swp-tab-content[data-tab="tracking"] {
display: none;
}
swp-tab-content[data-tab="tracking"].active {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.tracking-card {
margin-bottom: 0;
}
.tracking-card.full-width,
.code-preview-card {
grid-column: 1 / -1;
}
.tracking-card swp-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.tracking-card[data-tracker] swp-card-content {
transition: opacity 200ms ease, max-height 300ms ease;
}
.tracking-card[data-tracker].disabled swp-card-content {
opacity: 0.5;
pointer-events: none;
}
swp-tracking-hint {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: color-mix(in srgb, var(--color-blue) 8%, transparent);
border-radius: 6px;
font-size: 12px;
color: var(--color-text-secondary);
}
swp-tracking-hint i {
font-size: 16px;
color: var(--color-blue);
}
swp-tracking-hint.privacy {
background: color-mix(in srgb, var(--color-green) 8%, transparent);
}
swp-tracking-hint.privacy i {
color: var(--color-green);
}
swp-script-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
swp-script-section:last-child {
margin-bottom: 0;
}
swp-script-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
}
swp-script-label i {
font-size: 16px;
color: var(--color-text-secondary);
}
.script-textarea {
width: 100%;
min-height: 100px;
padding: 12px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
color: var(--color-text);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 6px;
resize: vertical;
}
.script-textarea::placeholder {
color: var(--color-text-secondary);
}
.script-textarea:focus {
outline: none;
border-color: var(--color-teal);
}
.code-preview-card {
margin-top: 24px;
border: 2px dashed var(--color-teal);
background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
}
.code-preview-card swp-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.code-preview-card swp-card-title {
color: var(--color-teal);
}
swp-code-info {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
color: var(--color-text-secondary);
}
swp-code-info i {
font-size: 16px;
color: var(--color-teal);
}
.code-preview {
margin: 0;
padding: 16px;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 6px;
overflow-x: auto;
max-height: 400px;
overflow-y: auto;
}
.code-preview code {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.6;
color: var(--color-text);
white-space: pre;
}
.code-preview .comment {
color: var(--color-green);
}
.code-preview .tag {
color: var(--color-blue);
}
.code-preview .attr {
color: var(--color-purple);
}
.code-preview .string {
color: var(--color-teal);
}
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 >
2026-01-05 17:38:39 +01:00
< swp-tab data-tab = "tracking" >
< i class = "ph ph-chart-line-up" > < / i >
Tracking
< / 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 >
2026-01-07 22:12:25 +01:00
< 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 >
< / swp-modules-grid >
< / swp-modules-section >
<!-- Integrationer sektion -->
< swp-modules-section >
< swp-modules-header >
< swp-modules-title >
< i class = "ph ph-plugs-connected" > < / i >
Integrationer
< / swp-modules-title >
< / swp-modules-header >
< swp-modules-grid >
<!-- Sygeforsikring "danmark" -->
< swp-module-card class = "featured" >
< swp-module-header >
< swp-module-icon class = "green" >
< i class = "ph ph-heart-half" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Sygeforsikring "danmark"< / swp-module-title >
< swp-module-desc > Gør det nemt for dine kunder at få tilskud. Send automatisk kvitteringer til "danmark" så kunderne får deres penge tilbage uden selv at løfte en finger.< / 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 > Automatisk indsendelse af kvitteringer< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Direkte integration via API< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Kunden får tilskud uden besvær< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Øget kundetilfredshed< / span >
< / swp-module-feature >
< / swp-module-features >
< swp-module-stats >
< swp-module-stat >
< swp-module-stat-value > 2.1M< / swp-module-stat-value >
< swp-module-stat-label > Medlemmer i DK< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 100%< / swp-module-stat-value >
< swp-module-stat-label > Automatiseret< / swp-module-stat-label >
< / swp-module-stat >
< swp-module-stat >
< swp-module-stat-value > 0 kr< / swp-module-stat-value >
< swp-module-stat-label > Ekstra gebyr< / swp-module-stat-label >
< / swp-module-stat >
< / swp-module-stats >
< swp-module-footer >
< swp-module-tags >
< swp-module-tag class = "included" > Inkluderet< / swp-module-tag >
< / swp-module-tags >
< swp-btn class = "small primary" > Opsæt integration< / swp-btn >
< / swp-module-footer >
< / swp-module-card >
<!-- Kalenderintegration -->
< swp-module-card >
< swp-module-header >
< swp-module-icon class = "blue" >
< i class = "ph ph-calendar-check" > < / i >
< / swp-module-icon >
< swp-module-info >
< swp-module-title > Kalenderintegration< / swp-module-title >
< swp-module-desc > Få dine bookinger synkroniseret til din private kalender automatisk. Se alle aftaler samlet ét sted - også når du er offline.< / 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-features >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Google Kalender< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Apple iCloud Kalender< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Microsoft Outlook< / span >
< / swp-module-feature >
< swp-module-feature >
< i class = "ph ph-check-circle" > < / i >
< span > Tovejs-synkronisering< / span >
< / swp-module-feature >
< / swp-module-features >
2026-01-03 16:18:53 +01:00
< 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 >
2026-01-05 17:38:39 +01:00
<!-- ==========================================
TAB: TRACKING
========================================== -->
< swp-tab-content data-tab = "tracking" >
<!-- Meta Pixel -->
< swp-card class = "tracking-card" data-tracker = "meta" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-meta-logo" > < / i >
Meta Pixel (Facebook)
< / swp-card-title >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Pixel ID< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "metaPixelId" oninput = "updateTrackingPreview()" > 123456789012345< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint >
< i class = "ph ph-info" > < / i >
Bruges til Facebook og Instagram annoncering og remarketing
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Google Analytics -->
< swp-card class = "tracking-card" data-tracker = "ga4" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-chart-line" > < / i >
Google Analytics (GA4)
< / swp-card-title >
< swp-toggle-slider data-value = "yes" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Measurement ID< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "ga4Id" oninput = "updateTrackingPreview()" > G-ABC123XYZ< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint >
< i class = "ph ph-info" > < / i >
Google Analytics 4 til website trafik og brugeradfærd
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Google Tag Manager -->
< swp-card class = "tracking-card" data-tracker = "gtm" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-code" > < / i >
Google Tag Manager
< / swp-card-title >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Container ID< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "gtmId" oninput = "updateTrackingPreview()" > GTM-XXXXXXX< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint >
< i class = "ph ph-info" > < / i >
Central styring af alle tracking-tags
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Plausible -->
< swp-card class = "tracking-card" data-tracker = "plausible" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-leaf" > < / i >
Plausible Analytics
< / swp-card-title >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Domæne< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "plausibleDomain" oninput = "updateTrackingPreview()" > minside.dk< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint class = "privacy" >
< i class = "ph ph-shield-check" > < / i >
Privacy-venlig analytics uden cookies - GDPR compliant
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Fathom -->
< swp-card class = "tracking-card" data-tracker = "fathom" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-eye" > < / i >
Fathom Analytics
< / swp-card-title >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Site ID< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "fathomSiteId" oninput = "updateTrackingPreview()" > ABCDEFGH< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint class = "privacy" >
< i class = "ph ph-shield-check" > < / i >
Privacy-venlig analytics uden cookies - GDPR compliant
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Matomo -->
< swp-card class = "tracking-card" data-tracker = "matomo" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-database" > < / i >
Matomo
< / swp-card-title >
< swp-toggle-slider data-value = "no" >
< swp-toggle-option > Ja< / swp-toggle-option >
< swp-toggle-option > Nej< / swp-toggle-option >
< / swp-toggle-slider >
< / swp-card-header >
< swp-card-content >
< swp-edit-section >
< swp-edit-row >
< swp-edit-label > Server URL< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "matomoUrl" oninput = "updateTrackingPreview()" > https://matomo.minside.dk< / swp-edit-value >
< / swp-edit-row >
< swp-edit-row >
< swp-edit-label > Site ID< / swp-edit-label >
< swp-edit-value contenteditable = "true" class = "mono" id = "matomoSiteId" oninput = "updateTrackingPreview()" > 1< / swp-edit-value >
< / swp-edit-row >
< / swp-edit-section >
< swp-tracking-hint class = "privacy" >
< i class = "ph ph-shield-check" > < / i >
Self-hosted analytics - fuld kontrol over dine data
< / swp-tracking-hint >
< / swp-card-content >
< / swp-card >
<!-- Custom Scripts -->
< swp-card class = "tracking-card full-width" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-code-block" > < / i >
Brugerdefinerede Scripts
< / swp-card-title >
< / swp-card-header >
< swp-card-content >
< swp-script-section >
< swp-script-label >
< i class = "ph ph-file-code" > < / i >
Scripts i < head>
< / swp-script-label >
< textarea class = "script-textarea" id = "customHeadScripts" placeholder = "<!-- Indsæt custom tracking kode her -->" oninput = "updateTrackingPreview()" > < / textarea >
< / swp-script-section >
< swp-script-section >
< swp-script-label >
< i class = "ph ph-file-code" > < / i >
Scripts før < /body>
< / swp-script-label >
< textarea class = "script-textarea" id = "customBodyScripts" placeholder = "<!-- Indsæt custom kode her -->" > < / textarea >
< / swp-script-section >
< / swp-card-content >
< / swp-card >
<!-- Generated Code Preview -->
< swp-card class = "code-preview-card" >
< swp-card-header >
< swp-card-title >
< i class = "ph ph-terminal" > < / i >
Genereret Kode
< / swp-card-title >
< / swp-card-header >
< swp-card-content >
< swp-code-info >
< i class = "ph ph-info" > < / i >
Denne kode indsættes automatisk i < head> på din online booking side
< / swp-code-info >
< pre class = "code-preview" id = "trackingCodePreview" > < code > <!-- Ingen aktive tracking - koder --> < / code > < / pre >
< / swp-card-content >
< / swp-card >
< / 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();
}
2026-01-05 17:38:39 +01:00
// ==========================================
// TRACKING TAB
// ==========================================
function initTrackingToggles() {
document.querySelectorAll('.tracking-card swp-toggle-slider').forEach(slider => {
slider.querySelectorAll('swp-toggle-option').forEach((option, index) => {
option.addEventListener('click', () => {
slider.dataset.value = index === 0 ? 'yes' : 'no';
const card = slider.closest('.tracking-card');
if (slider.dataset.value === 'no') {
card.classList.add('disabled');
} else {
card.classList.remove('disabled');
}
updateTrackingPreview();
});
});
});
}
function updateTrackingPreview() {
const preview = document.getElementById('trackingCodePreview');
if (!preview) return;
let code = '';
// Meta Pixel
const metaCard = document.querySelector('[data-tracker="meta"]');
if (metaCard & & metaCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const pixelId = document.getElementById('metaPixelId')?.textContent?.trim() || '';
if (pixelId) {
code += `< span class = "comment" > < !-- Meta Pixel --> < / span >
< span class = "tag" > < script> < / span >
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq(< span class = "string" > 'init'< / span > , < span class = "string" > '${pixelId}'< / span > );
fbq(< span class = "string" > 'track'< / span > , < span class = "string" > 'PageView'< / span > );
< span class = "tag" > < /script> < / span >
`;
}
}
// Google Analytics
const ga4Card = document.querySelector('[data-tracker="ga4"]');
if (ga4Card & & ga4Card.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const measurementId = document.getElementById('ga4Id')?.textContent?.trim() || '';
if (measurementId) {
code += `< span class = "comment" > < !-- Google Analytics (GA4) --> < / span >
< span class = "tag" > < script< / span > < span class = "attr" > async< / span > < span class = "attr" > src< / span > =< span class = "string" > "https://www.googletagmanager.com/gtag/js?id=${measurementId}"< / span > < span class = "tag" > > < /script> < / span >
< span class = "tag" > < script> < / span >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(< span class = "string" > 'js'< / span > , new Date());
gtag(< span class = "string" > 'config'< / span > , < span class = "string" > '${measurementId}'< / span > );
< span class = "tag" > < /script> < / span >
`;
}
}
// Google Tag Manager
const gtmCard = document.querySelector('[data-tracker="gtm"]');
if (gtmCard & & gtmCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const containerId = document.getElementById('gtmId')?.textContent?.trim() || '';
if (containerId) {
code += `< span class = "comment" > < !-- Google Tag Manager --> < / span >
< span class = "tag" > < script> < / span >
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer',< span class = "string" > '${containerId}'< / span > );
< span class = "tag" > < /script> < / span >
`;
}
}
// Plausible
const plausibleCard = document.querySelector('[data-tracker="plausible"]');
if (plausibleCard & & plausibleCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const domain = document.getElementById('plausibleDomain')?.textContent?.trim() || '';
if (domain) {
code += `< span class = "comment" > < !-- Plausible Analytics --> < / span >
< span class = "tag" > < script< / span > < span class = "attr" > defer< / span > < span class = "attr" > data-domain< / span > =< span class = "string" > "${domain}"< / span > < span class = "attr" > src< / span > =< span class = "string" > "https://plausible.io/js/script.js"< / span > < span class = "tag" > > < /script> < / span >
`;
}
}
// Fathom
const fathomCard = document.querySelector('[data-tracker="fathom"]');
if (fathomCard & & fathomCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const siteId = document.getElementById('fathomSiteId')?.textContent?.trim() || '';
if (siteId) {
code += `< span class = "comment" > < !-- Fathom Analytics --> < / span >
< span class = "tag" > < script< / span > < span class = "attr" > src< / span > =< span class = "string" > "https://cdn.usefathom.com/script.js"< / span > < span class = "attr" > data-site< / span > =< span class = "string" > "${siteId}"< / span > < span class = "attr" > defer< / span > < span class = "tag" > > < /script> < / span >
`;
}
}
// Matomo
const matomoCard = document.querySelector('[data-tracker="matomo"]');
if (matomoCard & & matomoCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
const serverUrl = document.getElementById('matomoUrl')?.textContent?.trim() || '';
const siteId = document.getElementById('matomoSiteId')?.textContent?.trim() || '';
if (serverUrl & & siteId) {
code += `< span class = "comment" > < !-- Matomo Analytics --> < / span >
< span class = "tag" > < script> < / span >
var _paq = window._paq = window._paq || [];
_paq.push([< span class = "string" > 'trackPageView'< / span > ]);
_paq.push([< span class = "string" > 'enableLinkTracking'< / span > ]);
(function() {
var u=< span class = "string" > "${serverUrl}/"< / span > ;
_paq.push([< span class = "string" > 'setTrackerUrl'< / span > , u+< span class = "string" > 'matomo.php'< / span > ]);
_paq.push([< span class = "string" > 'setSiteId'< / span > , < span class = "string" > '${siteId}'< / span > ]);
var d=document, g=d.createElement(< span class = "string" > 'script'< / span > ), s=d.getElementsByTagName(< span class = "string" > 'script'< / span > )[0];
g.async=true; g.src=u+< span class = "string" > 'matomo.js'< / span > ; s.parentNode.insertBefore(g,s);
})();
< span class = "tag" > < /script> < / span >
`;
}
}
// Custom Head Scripts
const customHead = document.getElementById('customHeadScripts')?.value?.trim() || '';
if (customHead) {
code += `< span class = "comment" > < !-- Custom Scripts --> < / span >
${escapeHtml(customHead)}
`;
}
if (code) {
preview.querySelector('code').innerHTML = code.trim();
} else {
preview.querySelector('code').innerHTML = '< span class = "comment" > < !-- Ingen aktive tracking-koder --> < / span > ';
}
}
function escapeHtml(text) {
return text
.replace(/& /g, '& ')
.replace(/< /g, '< ')
.replace(/>/g, '> ');
}
function copyTrackingCode() {
const preview = document.getElementById('trackingCodePreview');
if (!preview) return;
// Get plain text version (strip HTML tags)
const code = preview.querySelector('code').innerHTML
.replace(/< span [ ^ > ]*>/g, '')
.replace(/< \/span>/g, '')
.replace(/< /g, '< ')
.replace(/> /g, '>')
.replace(/& /g, '&');
navigator.clipboard.writeText(code).then(() => {
const btn = document.querySelector('.code-preview-card swp-btn');
const originalText = btn.innerHTML;
btn.innerHTML = '< i class = "ph ph-check" > < / i > Kopieret!';
btn.style.color = 'var(--color-green)';
setTimeout(() => {
btn.innerHTML = originalText;
btn.style.color = '';
}, 2000);
});
}
// Initialize tracking preview on page load
document.addEventListener('DOMContentLoaded', () => {
// Initialize tracking toggles
initTrackingToggles();
// Update preview
updateTrackingPreview();
// Set initial disabled state for cards
document.querySelectorAll('.tracking-card[data-tracker]').forEach(card => {
const toggle = card.querySelector('swp-toggle-slider');
if (toggle & & toggle.dataset.value === 'no') {
card.classList.add('disabled');
}
});
});
2025-12-31 00:36:32 +01:00
< / script >
< / body >
< / html >
