434 lines
14 KiB
HTML
434 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="da">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Abonnement & Konto - Salon OS</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||
|
|
<link rel="stylesheet" href="css/konto.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dark mode - system preference */
|
||
|
|
@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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Manual dark mode override */
|
||
|
|
: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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<swp-page-container>
|
||
|
|
|
||
|
|
<!-- Page Header -->
|
||
|
|
<swp-page-header>
|
||
|
|
<swp-page-title>
|
||
|
|
<h1>Abonnement & Konto</h1>
|
||
|
|
<p>Administrer dit abonnement og betalingsinfo</p>
|
||
|
|
</swp-page-title>
|
||
|
|
</swp-page-header>
|
||
|
|
|
||
|
|
<!-- ==========================================
|
||
|
|
SUBSCRIPTION SECTION
|
||
|
|
========================================== -->
|
||
|
|
<swp-section>
|
||
|
|
<swp-section-header>
|
||
|
|
<swp-section-title>
|
||
|
|
<i class="ph ph-crown"></i>
|
||
|
|
Dit abonnement
|
||
|
|
</swp-section-title>
|
||
|
|
</swp-section-header>
|
||
|
|
|
||
|
|
<swp-plan-grid>
|
||
|
|
<!-- Basis Plan -->
|
||
|
|
<swp-plan-card>
|
||
|
|
<swp-plan-name>Basis</swp-plan-name>
|
||
|
|
<swp-plan-users>1-3 brugere</swp-plan-users>
|
||
|
|
<swp-plan-price>
|
||
|
|
<swp-plan-price-amount>299</swp-plan-price-amount>
|
||
|
|
<swp-plan-price-period>kr/md</swp-plan-price-period>
|
||
|
|
</swp-plan-price>
|
||
|
|
<swp-plan-features>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Op til 3 brugere
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Online booking
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Kalender & aftalestyring
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Kundekartotek
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
SMS-påmindelser
|
||
|
|
</swp-plan-feature>
|
||
|
|
</swp-plan-features>
|
||
|
|
<swp-plan-action>
|
||
|
|
<swp-btn class="secondary">Skift til Basis</swp-btn>
|
||
|
|
</swp-plan-action>
|
||
|
|
</swp-plan-card>
|
||
|
|
|
||
|
|
<!-- Pro Plan (Current) -->
|
||
|
|
<swp-plan-card class="current">
|
||
|
|
<swp-plan-badge class="current">
|
||
|
|
<i class="ph ph-check"></i>
|
||
|
|
Nuværende plan
|
||
|
|
</swp-plan-badge>
|
||
|
|
<swp-plan-name>Pro</swp-plan-name>
|
||
|
|
<swp-plan-users>4-8 brugere</swp-plan-users>
|
||
|
|
<swp-plan-price>
|
||
|
|
<swp-plan-price-amount>599</swp-plan-price-amount>
|
||
|
|
<swp-plan-price-period>kr/md</swp-plan-price-period>
|
||
|
|
</swp-plan-price>
|
||
|
|
<swp-plan-features>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Op til 8 brugere
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Alt fra Basis
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Lagerstyring
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Avancerede rapporter
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Gavekort & klippekort
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Prioriteret support
|
||
|
|
</swp-plan-feature>
|
||
|
|
</swp-plan-features>
|
||
|
|
<swp-plan-action>
|
||
|
|
<swp-btn class="secondary">Nuværende plan</swp-btn>
|
||
|
|
</swp-plan-action>
|
||
|
|
</swp-plan-card>
|
||
|
|
|
||
|
|
<!-- Enterprise Plan -->
|
||
|
|
<swp-plan-card class="enterprise">
|
||
|
|
<swp-plan-badge class="popular">
|
||
|
|
<i class="ph ph-star"></i>
|
||
|
|
Til større saloner
|
||
|
|
</swp-plan-badge>
|
||
|
|
<swp-plan-name>Enterprise</swp-plan-name>
|
||
|
|
<swp-plan-users>8+ brugere</swp-plan-users>
|
||
|
|
<swp-plan-price>
|
||
|
|
<swp-plan-price-amount>Kontakt os</swp-plan-price-amount>
|
||
|
|
</swp-plan-price>
|
||
|
|
<swp-plan-features>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Ubegrænset antal brugere
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Alt fra Pro
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Flere lokationer
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Tilpasset integration
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Dedikeret kontaktperson
|
||
|
|
</swp-plan-feature>
|
||
|
|
<swp-plan-feature>
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
SLA & uptime garanti
|
||
|
|
</swp-plan-feature>
|
||
|
|
</swp-plan-features>
|
||
|
|
<swp-plan-action>
|
||
|
|
<swp-btn class="outline">Kontakt salg</swp-btn>
|
||
|
|
</swp-plan-action>
|
||
|
|
</swp-plan-card>
|
||
|
|
</swp-plan-grid>
|
||
|
|
</swp-section>
|
||
|
|
|
||
|
|
<!-- ==========================================
|
||
|
|
BILLING SECTION
|
||
|
|
========================================== -->
|
||
|
|
<swp-section>
|
||
|
|
<swp-section-header>
|
||
|
|
<swp-section-title>
|
||
|
|
<i class="ph ph-credit-card"></i>
|
||
|
|
Betaling & Fakturaer
|
||
|
|
</swp-section-title>
|
||
|
|
</swp-section-header>
|
||
|
|
|
||
|
|
<swp-billing-grid>
|
||
|
|
<!-- Payment Info -->
|
||
|
|
<swp-payment-card>
|
||
|
|
<swp-payment-method>
|
||
|
|
<swp-payment-icon>
|
||
|
|
<i class="ph ph-credit-card"></i>
|
||
|
|
</swp-payment-icon>
|
||
|
|
<swp-payment-info>
|
||
|
|
<swp-payment-type>Visa</swp-payment-type>
|
||
|
|
<swp-payment-number>**** **** **** 4582</swp-payment-number>
|
||
|
|
</swp-payment-info>
|
||
|
|
<swp-btn class="secondary" style="padding: 8px 12px; font-size: 12px;">
|
||
|
|
<i class="ph ph-pencil"></i>
|
||
|
|
Skift
|
||
|
|
</swp-btn>
|
||
|
|
</swp-payment-method>
|
||
|
|
|
||
|
|
<swp-payment-detail>
|
||
|
|
<swp-payment-label>Betalingsfrekvens</swp-payment-label>
|
||
|
|
<swp-payment-value>Månedlig</swp-payment-value>
|
||
|
|
</swp-payment-detail>
|
||
|
|
|
||
|
|
<swp-payment-detail>
|
||
|
|
<swp-payment-label>Næste betaling</swp-payment-label>
|
||
|
|
<swp-payment-value class="highlight">1. januar 2026</swp-payment-value>
|
||
|
|
</swp-payment-detail>
|
||
|
|
|
||
|
|
<swp-payment-detail>
|
||
|
|
<swp-payment-label>Beløb</swp-payment-label>
|
||
|
|
<swp-payment-value>599,00 kr</swp-payment-value>
|
||
|
|
</swp-payment-detail>
|
||
|
|
|
||
|
|
<swp-payment-detail>
|
||
|
|
<swp-payment-label>Kortudløb</swp-payment-label>
|
||
|
|
<swp-payment-value>08/2027</swp-payment-value>
|
||
|
|
</swp-payment-detail>
|
||
|
|
|
||
|
|
<swp-btn class="outline" style="margin-top: 8px;">
|
||
|
|
<i class="ph ph-arrows-clockwise"></i>
|
||
|
|
Skift til årlig betaling (spar 15%)
|
||
|
|
</swp-btn>
|
||
|
|
</swp-payment-card>
|
||
|
|
|
||
|
|
<!-- Invoices -->
|
||
|
|
<swp-invoices-card>
|
||
|
|
<swp-invoices-header>
|
||
|
|
<swp-invoices-title>Faktura-historik</swp-invoices-title>
|
||
|
|
</swp-invoices-header>
|
||
|
|
|
||
|
|
<swp-table>
|
||
|
|
<swp-table-header>
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>Dato</swp-table-cell>
|
||
|
|
<swp-table-cell>Fakturanr.</swp-table-cell>
|
||
|
|
<swp-table-cell>Beløb</swp-table-cell>
|
||
|
|
<swp-table-cell>Status</swp-table-cell>
|
||
|
|
<swp-table-cell></swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
</swp-table-header>
|
||
|
|
<swp-table-body>
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>1. dec 2025</swp-table-cell>
|
||
|
|
<swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0012</swp-table-cell>
|
||
|
|
<swp-table-cell>599,00 kr</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-invoice-status class="paid">
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Betalt
|
||
|
|
</swp-invoice-status>
|
||
|
|
</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-download-btn>
|
||
|
|
<i class="ph ph-download"></i>
|
||
|
|
PDF
|
||
|
|
</swp-download-btn>
|
||
|
|
</swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>1. nov 2025</swp-table-cell>
|
||
|
|
<swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0011</swp-table-cell>
|
||
|
|
<swp-table-cell>599,00 kr</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-invoice-status class="paid">
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Betalt
|
||
|
|
</swp-invoice-status>
|
||
|
|
</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-download-btn>
|
||
|
|
<i class="ph ph-download"></i>
|
||
|
|
PDF
|
||
|
|
</swp-download-btn>
|
||
|
|
</swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>1. okt 2025</swp-table-cell>
|
||
|
|
<swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0010</swp-table-cell>
|
||
|
|
<swp-table-cell>599,00 kr</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-invoice-status class="paid">
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Betalt
|
||
|
|
</swp-invoice-status>
|
||
|
|
</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-download-btn>
|
||
|
|
<i class="ph ph-download"></i>
|
||
|
|
PDF
|
||
|
|
</swp-download-btn>
|
||
|
|
</swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>1. sep 2025</swp-table-cell>
|
||
|
|
<swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0009</swp-table-cell>
|
||
|
|
<swp-table-cell>599,00 kr</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-invoice-status class="paid">
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Betalt
|
||
|
|
</swp-invoice-status>
|
||
|
|
</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-download-btn>
|
||
|
|
<i class="ph ph-download"></i>
|
||
|
|
PDF
|
||
|
|
</swp-download-btn>
|
||
|
|
</swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
|
||
|
|
<swp-table-row>
|
||
|
|
<swp-table-cell>1. aug 2025</swp-table-cell>
|
||
|
|
<swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0008</swp-table-cell>
|
||
|
|
<swp-table-cell>599,00 kr</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-invoice-status class="paid">
|
||
|
|
<i class="ph ph-check-circle"></i>
|
||
|
|
Betalt
|
||
|
|
</swp-invoice-status>
|
||
|
|
</swp-table-cell>
|
||
|
|
<swp-table-cell>
|
||
|
|
<swp-download-btn>
|
||
|
|
<i class="ph ph-download"></i>
|
||
|
|
PDF
|
||
|
|
</swp-download-btn>
|
||
|
|
</swp-table-cell>
|
||
|
|
</swp-table-row>
|
||
|
|
</swp-table-body>
|
||
|
|
</swp-table>
|
||
|
|
</swp-invoices-card>
|
||
|
|
</swp-billing-grid>
|
||
|
|
</swp-section>
|
||
|
|
|
||
|
|
</swp-page-container>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|