562 lines
29 KiB
HTML
562 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BMC Hub - Design System & Komponenter</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<style>
|
|
:root {
|
|
--accent: #0f4c75;
|
|
--accent-light: #eef2f5;
|
|
--text-primary: #2c3e50;
|
|
--text-secondary: #6c757d;
|
|
--bg-body: #f8f9fa;
|
|
--bg-card: #ffffff;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-body);
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
/* Navbar Styling */
|
|
.navbar {
|
|
background-color: var(--bg-card);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--accent);
|
|
background-color: var(--accent-light);
|
|
}
|
|
|
|
/* Card Styling */
|
|
.card {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.03);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: transparent;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
padding: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background-color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0b3a5b;
|
|
border-color: #0b3a5b;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Section Headers */
|
|
.section-title {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 100%;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 500;
|
|
font-size: 0.8rem;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top Navigation -->
|
|
<nav class="navbar navbar-expand-lg sticky-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<i class="bi bi-grid-3x3-gap-fill me-2"></i>BMC Hub
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html">Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="customers.html">Kunder</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="components.html">Design System</a>
|
|
</li>
|
|
</ul>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="dropdown">
|
|
<a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle text-dark" data-bs-toggle="dropdown">
|
|
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
|
|
<i class="bi bi-person-fill text-secondary"></i>
|
|
</div>
|
|
<span class="small fw-medium">Admin</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm">
|
|
<li><a class="dropdown-item" href="settings.html"><i class="bi bi-gear me-2"></i>Indstillinger</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="login.html"><i class="bi bi-box-arrow-right me-2"></i>Log ud</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h1 class="h3 fw-bold text-dark">Design System & Komponenter</h1>
|
|
<p class="text-secondary">En komplet oversigt over alle UI elementer i "Nordic Top" temaet.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Farver & Typografi -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="section-title">Farver & Typografi</h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Farvepalette</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #0f4c75;">#0f4c75</div>
|
|
<div class="small text-center fw-bold">Accent</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch text-dark" style="background-color: #eef2f5;">#eef2f5</div>
|
|
<div class="small text-center fw-bold">Accent Light</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #2c3e50;">#2c3e50</div>
|
|
<div class="small text-center fw-bold">Text Primary</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #6c757d;">#6c757d</div>
|
|
<div class="small text-center fw-bold">Text Secondary</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #198754;">#198754</div>
|
|
<div class="small text-center fw-bold">Success</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #ffc107; color: #000;">#ffc107</div>
|
|
<div class="small text-center fw-bold">Warning</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #dc3545;">#dc3545</div>
|
|
<div class="small text-center fw-bold">Danger</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="color-swatch" style="background-color: #0dcaf0;">#0dcaf0</div>
|
|
<div class="small text-center fw-bold">Info</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Typografi</div>
|
|
<div class="card-body">
|
|
<h1>H1 Overskrift (2.5rem)</h1>
|
|
<h2>H2 Overskrift (2rem)</h2>
|
|
<h3>H3 Overskrift (1.75rem)</h3>
|
|
<h4>H4 Overskrift (1.5rem)</h4>
|
|
<h5>H5 Overskrift (1.25rem)</h5>
|
|
<h6>H6 Overskrift (1rem)</h6>
|
|
<hr>
|
|
<p class="lead">Dette er en lead paragraph, der bruges til intro tekst.</p>
|
|
<p>Dette er almindelig brødtekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <small class="text-muted">Dette er lille tekst.</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Knapper & Badges -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="section-title">Knapper & Badges</h6>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">Knapper</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-light">Light</button>
|
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
<button type="button" class="btn btn-link">Link</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<button type="button" class="btn btn-outline-primary">Outline Primary</button>
|
|
<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
|
|
<button type="button" class="btn btn-outline-success">Outline Success</button>
|
|
<button type="button" class="btn btn-outline-danger">Outline Danger</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
|
|
<button type="button" class="btn btn-primary">Default Button</button>
|
|
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-primary"><i class="bi bi-plus-lg me-2"></i>Med Ikon</button>
|
|
<button type="button" class="btn btn-light border"><i class="bi bi-filter me-2"></i>Filter</button>
|
|
<button type="button" class="btn btn-light border rounded-circle p-2"><i class="bi bi-three-dots-vertical"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Badges & Alerts</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<span class="badge bg-primary">Primary</span>
|
|
<span class="badge bg-secondary">Secondary</span>
|
|
<span class="badge bg-success">Success</span>
|
|
<span class="badge bg-danger">Danger</span>
|
|
<span class="badge bg-warning text-dark">Warning</span>
|
|
<span class="badge bg-info text-dark">Info</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<span class="badge rounded-pill bg-primary">Pille Form</span>
|
|
<span class="badge rounded-pill bg-success">Aktiv</span>
|
|
<span class="badge rounded-pill bg-light text-dark border">Kladde</span>
|
|
</div>
|
|
<div class="alert alert-success py-2 mb-2" role="alert">
|
|
<i class="bi bi-check-circle-fill me-2"></i>Handling gennemført!
|
|
</div>
|
|
<div class="alert alert-warning py-2 mb-0" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>Tjek venligst input.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Formularer -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="section-title">Formular Elementer</h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Input Felter</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="exampleInputEmail1" class="form-label">Email adresse</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="navn@eksempel.dk">
|
|
<div class="form-text">Vi deler aldrig din email med andre.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleInputPassword1" class="form-label">Adgangskode</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="disabledInput" class="form-label">Deaktiveret input</label>
|
|
<input class="form-control" id="disabledInput" type="text" placeholder="Kan ikke ændres..." disabled>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Select Menu</label>
|
|
<select class="form-select">
|
|
<option selected>Vælg en mulighed</option>
|
|
<option value="1">Mulighed 1</option>
|
|
<option value="2">Mulighed 2</option>
|
|
<option value="3">Mulighed 3</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleFormControlTextarea1" class="form-label">Tekstområde</label>
|
|
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Checkboxes, Radios & Switches</div>
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<h6 class="small text-uppercase text-muted fw-bold">Checkboxes</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
Standard checkbox
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
|
|
<label class="form-check-label" for="flexCheckChecked">
|
|
Valgt checkbox
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="small text-uppercase text-muted fw-bold">Radio Buttons</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
|
|
<label class="form-check-label" for="flexRadioDefault1">
|
|
Mulighed 1
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
|
|
<label class="form-check-label" for="flexRadioDefault2">
|
|
Mulighed 2 (Valgt)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="small text-uppercase text-muted fw-bold">Switches</h6>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
|
<label class="form-check-label" for="flexSwitchCheckDefault">Standard switch</label>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
|
<label class="form-check-label" for="flexSwitchCheckChecked">Aktiv switch</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 class="small text-uppercase text-muted fw-bold">Input Groups</h6>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
<input type="text" class="form-control" placeholder="Brugernavn" aria-label="Username">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" placeholder="Beløb">
|
|
<span class="input-group-text">DKK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabeller -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="section-title">Tabeller</h6>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span>Data Tabel</span>
|
|
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-download me-1"></i>Eksportér</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">Kunde</th>
|
|
<th>Status</th>
|
|
<th>Oprettet</th>
|
|
<th>Beløb</th>
|
|
<th class="text-end pe-4">Handling</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; font-weight: 600;">
|
|
BN
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">BMC Networks</div>
|
|
<div class="small text-muted">CVR: 12345678</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3">Aktiv</span></td>
|
|
<td>01. Dec 2023</td>
|
|
<td>4.500 DKK</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-light border"><i class="bi bi-pencil"></i></button>
|
|
<button class="btn btn-sm btn-light border text-danger"><i class="bi bi-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; font-weight: 600;">
|
|
TC
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Tech Corp ApS</div>
|
|
<div class="small text-muted">CVR: 87654321</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-warning bg-opacity-10 text-warning rounded-pill px-3">Afventer</span></td>
|
|
<td>28. Nov 2023</td>
|
|
<td>12.000 DKK</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-light border"><i class="bi bi-pencil"></i></button>
|
|
<button class="btn btn-sm btn-light border text-danger"><i class="bi bi-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-secondary bg-opacity-10 text-secondary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; font-weight: 600;">
|
|
LL
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Lokal Lageret</div>
|
|
<div class="small text-muted">CVR: 11223344</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3">Opsagt</span></td>
|
|
<td>15. Okt 2023</td>
|
|
<td>2.100 DKK</td>
|
|
<td class="text-end pe-4">
|
|
<button class="btn btn-sm btn-light border"><i class="bi bi-pencil"></i></button>
|
|
<button class="btn btn-sm btn-light border text-danger"><i class="bi bi-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-white border-top-0 py-3">
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mb-0">
|
|
<li class="page-item disabled"><a class="page-link" href="#">Forrige</a></li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">Næste</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals & Toasts -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6 class="section-title">Modals & Overlays</h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">Modal Eksempel</div>
|
|
<div class="card-body text-center py-5">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
Åbn Demo Modal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">Kort Varianter</div>
|
|
<div class="card-body">
|
|
<div class="card bg-primary text-white mb-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Primary Card</h5>
|
|
<p class="card-text">Kort med accent farve baggrund.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-primary mb-0">
|
|
<div class="card-body text-primary">
|
|
<h5 class="card-title">Border Card</h5>
|
|
<p class="card-text">Kort med farvet kant.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal Titel</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Dette er en standard modal boks. Den bruges til bekræftelser, detaljer eller formularer der ligger "ovenpå" siden.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
|
|
<button type="button" class="btn btn-primary">Gem ændringer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |