Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/wwwroot/poc-konto.html
Janus C. H. Knudsen fac7754d7a Refactors design system documentation and layout 
Updates design system documentation with comprehensive component overview
Enhances UI layout across multiple pages with consistent styling and new components
Adds support for charts, pagination, and responsive design elements

Improves overall system documentation and visual consistency
2026-01-07 22:12:25 +01:00

433 lines
14 KiB
HTML
Raw Permalink Blame History

<!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>
Reference in a new issue View git blame Copy permalink