Moves POC-files into PlanTempus
This commit is contained in:
Janus C. H. Knudsen
parent
51f3b92d69
commit
ea3ecdfb68
91 changed files with 59868 additions and 0 deletions
433
.workbench/POC/poc-konto.html
Normal file
433
.workbench/POC/poc-konto.html
Normal file
|
|
@ -0,0 +1,433 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue