299 lines
17 KiB
HTML
299 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="da">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Mockups - Sagsvisning</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #0f4c75; /* Nordic Top Deep Blue */
|
||
|
|
--bg-body: #f4f6f8;
|
||
|
|
--card-border: #e2e8f0;
|
||
|
|
}
|
||
|
|
body { background-color: var(--bg-body); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
|
||
|
|
.top-nav { background-color: #fff; padding: 15px; border-bottom: 2px solid var(--primary-color); margin-bottom: 20px; }
|
||
|
|
.mockup-container { display: none; }
|
||
|
|
.mockup-container.active { display: block; }
|
||
|
|
.card { border: 1px solid var(--card-border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 1rem; border-radius: 8px; }
|
||
|
|
.card-header { background-color: #fff; border-bottom: 1px solid var(--card-border); font-weight: 600; color: var(--primary-color); }
|
||
|
|
.section-title { font-size: 0.85rem; text-transform: uppercase; color: #6c757d; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.5px; }
|
||
|
|
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
|
||
|
|
.badge-status { background-color: var(--primary-color); color: white; }
|
||
|
|
.timeline-item { border-left: 2px solid var(--card-border); padding-left: 15px; margin-bottom: 15px; position: relative; }
|
||
|
|
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-color); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="top-nav text-center">
|
||
|
|
<h4 class="mb-3" style="color: var(--primary-color);">Vælg Layout Mockup</h4>
|
||
|
|
<div class="btn-group" role="group">
|
||
|
|
<button type="button" class="btn btn-outline-primary active" onclick="showMockup('mockup1', this)">Forslag 1: Arbejdsstationen (3 Kolonner)</button>
|
||
|
|
<button type="button" class="btn btn-outline-primary" onclick="showMockup('mockup2', this)">Forslag 2: Tidslinjen (Inbox Flow)</button>
|
||
|
|
<button type="button" class="btn btn-outline-primary" onclick="showMockup('mockup3', this)">Forslag 3: Det Fokuserede Workspace (Store Faner)</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container-fluid px-4">
|
||
|
|
|
||
|
|
<!-- FORSLAG 1: TRE KOLONNER -->
|
||
|
|
<div id="mockup1" class="mockup-container active">
|
||
|
|
<h5 class="text-muted"><i class="fas fa-columns"></i> Forslag 1: Arbejdsstationen (Kontekst -> Arbejde -> Styring)</h5>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Header status -->
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-body py-2 d-flex justify-content-between align-items-center flex-wrap">
|
||
|
|
<div><strong>ID: 1</strong> <span class="badge badge-status">åben</span> | <strong>Kunde:</strong> Blåhund Import (TEST) | <strong>Kontakt:</strong> Janne Vinter</div>
|
||
|
|
<div><strong>Datoer:</strong> Opr: 01/03-26 | <strong>Deadline:</strong> <span class="text-danger border border-danger p-1 rounded"><i class="far fa-clock"></i> 03/03-26</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<!-- Kol 1: Kontekst (Venstre) -->
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="section-title">Kontekst & Stamdata</div>
|
||
|
|
<div class="card"><div class="card-header"><i class="fas fa-building"></i> Kunder</div><div class="card-body py-2"><small>Blåhund Import (TEST)</small></div></div>
|
||
|
|
<div class="card"><div class="card-header"><i class="fas fa-users"></i> Kontakter</div><div class="card-body py-2"><small>Janne Vinter</small></div></div>
|
||
|
|
<div class="card"><div class="card-header"><i class="fas fa-laptop"></i> Hardware</div><div class="card-body py-2"><span class="text-muted small">Ingen valgt</span></div></div>
|
||
|
|
<div class="card"><div class="card-header"><i class="fas fa-map-marker-alt"></i> Lokationer</div><div class="card-body py-2"><span class="text-muted small">Ingen valgt</span></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Kol 2: Arbejde (Midten) -->
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="section-title">Arbejdsflade</div>
|
||
|
|
|
||
|
|
<!-- Beskrivelse altid synlig -->
|
||
|
|
<div class="card border-primary mb-3">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">dette er en test sag</h5>
|
||
|
|
<p class="card-text text-muted mb-0">Ingen beskrivelse tilføjet.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Faner tager sig af resten -->
|
||
|
|
<ul class="nav nav-tabs mb-3">
|
||
|
|
<li class="nav-item"><a class="nav-link active" href="#">Sagsdetaljer</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-wrench"></i> Løsning</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-envelope"></i> E-mail</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-shopping-basket"></i> Varekøb & Salg</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h6><i class="fas fa-link"></i> Relationer</h6>
|
||
|
|
<div class="border rounded p-2 mb-3 bg-light"><small>#2 Undersag 1 -> Afledt af #1 dette er en test sag</small></div>
|
||
|
|
|
||
|
|
<h6><i class="fas fa-phone"></i> Opkaldshistorik</h6>
|
||
|
|
<div class="border rounded p-2 mb-3 text-center text-muted"><small>Ingen opkald registreret</small></div>
|
||
|
|
|
||
|
|
<h6><i class="fas fa-paperclip"></i> Filer & Dokumenter</h6>
|
||
|
|
<div class="border rounded p-3 text-center bg-light border-dashed"><small><i class="fas fa-cloud-upload-alt fs-4 d-block mb-1"></i> Træk filer hertil for at uploade</small></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Kol 3: Styring (Højre) -->
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="section-title">Sagstyring</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">Ansvar & Tildeling</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<label class="form-label small">Ansvarlig medarbejder</label>
|
||
|
|
<select class="form-select form-select-sm mb-2"><option>Ingen</option></select>
|
||
|
|
<label class="form-label small">Ansvarlig gruppe</label>
|
||
|
|
<select class="form-select form-select-sm mb-3"><option>Technicians</option></select>
|
||
|
|
<button class="btn btn-primary btn-sm w-100">Gem Tildeling</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><i class="fas fa-check-square text-success"></i> Todo-opgaver</div>
|
||
|
|
<div class="card-body text-center py-4 text-muted"><small>Ingen opgaver endnu</small><br><button class="btn btn-outline-secondary btn-sm mt-2"><i class="fas fa-plus"></i> Opret</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- FORSLAG 2: TIDSLINJEN -->
|
||
|
|
<div id="mockup2" class="mockup-container">
|
||
|
|
<h5 class="text-muted"><i class="fas fa-stream"></i> Forslag 2: Tidslinjen (Fokus på flow og kommunikation)</h5>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Sticky Kompakt Header -->
|
||
|
|
<div class="card shadow-sm border-0 mb-4 sticky-top" style="z-index: 1000; top: 0;">
|
||
|
|
<div class="card-body py-2 d-flex justify-content-between align-items-center fs-6 bg-white">
|
||
|
|
<div>
|
||
|
|
<span class="badge badge-status me-2">ID: 1</span>
|
||
|
|
<strong>Blåhund Import</strong> <span class="text-muted">/ Janne Vinter</span>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex align-items-center gap-3">
|
||
|
|
<select class="form-select form-select-sm" style="width: auto;"><option>Ingen (Technicians)</option></select>
|
||
|
|
<span class="badge bg-danger">Frist: 03/03-26</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<!-- Hoved feed (Venstre) -->
|
||
|
|
<div class="col-md-8">
|
||
|
|
|
||
|
|
<!-- Beskrivelse - Hero boks -->
|
||
|
|
<div class="p-4 rounded mb-4" style="background-color: #e3f2fd; border-left: 4px solid var(--primary-color);">
|
||
|
|
<h4 class="mb-1">dette er en test sag</h4>
|
||
|
|
<p class="mb-0 text-muted">Ingen beskrivelse angivet.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Handlingsmoduler - Inline tabs for inputs -->
|
||
|
|
<div class="card mb-4 bg-light">
|
||
|
|
<div class="card-body py-2">
|
||
|
|
<button class="btn btn-sm btn-outline-primary"><i class="fas fa-comment"></i> Nyt Svar/Notat</button>
|
||
|
|
<button class="btn btn-sm btn-outline-secondary"><i class="fas fa-wrench"></i> Registrer Løsning/Tid</button>
|
||
|
|
<button class="btn btn-sm btn-outline-secondary"><i class="fas fa-shopping-basket"></i> Tilføj Vare</button>
|
||
|
|
<button class="btn btn-sm btn-outline-secondary"><i class="fas fa-paperclip"></i> Vedhæft fil</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tidslinjen / Log -->
|
||
|
|
<h6 class="text-muted"><i class="fas fa-history"></i> Aktivitet & Historik</h6>
|
||
|
|
<div class="bg-white p-3 rounded border">
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="small fw-bold">System <span class="text-muted fw-normal float-end">01/03/2026 14:00</span></div>
|
||
|
|
<div>Sagen blev oprettet.</div>
|
||
|
|
<div class="mt-2 p-2 bg-light border rounded"><small>Relation: #2 Undersag 1 tilknyttet.</small></div>
|
||
|
|
</div>
|
||
|
|
<div class="text-center text-muted small mt-4"><i class="fas fa-check"></i> Slut på historik</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sidebar (Højre) -->
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-header">Sagsfakta & Stamdata</div>
|
||
|
|
<div class="accordion accordion-flush" id="accordionFakta">
|
||
|
|
<div class="accordion-item">
|
||
|
|
<h2 class="accordion-header"><button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#fakta1"><i class="fas fa-building me-2"></i> Kunde & Kontakt</button></h2>
|
||
|
|
<div id="fakta1" class="accordion-collapse collapse"><div class="accordion-body small">Blåhund Import (TEST)<br>Janne Vinter</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="accordion-item">
|
||
|
|
<h2 class="accordion-header"><button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#fakta2"><i class="fas fa-laptop me-2"></i> Hardware & Lokation</button></h2>
|
||
|
|
<div id="fakta2" class="accordion-collapse collapse"><div class="accordion-body small text-muted">Intet valgt</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><i class="fas fa-check-square"></i> Todo-opgaver & Wiki</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<input type="text" class="form-control form-control-sm mb-2" placeholder="Søg i Wiki...">
|
||
|
|
<hr>
|
||
|
|
<div class="text-center text-muted small"><small>Ingen Todo-opgaver</small></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- FORSLAG 3: DET FOKUSEREDE WORKSPACE -->
|
||
|
|
<div id="mockup3" class="mockup-container">
|
||
|
|
<h5 class="text-muted"><i class="fas fa-window-maximize"></i> Forslag 3: Fokuseret Workspace (Store kategoriserede faner)</h5>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<!-- Sidebar venstre (Lille) -->
|
||
|
|
<div class="col-md-2 border-end" style="min-height: 70vh;">
|
||
|
|
<div class="mb-4">
|
||
|
|
<div class="small fw-bold text-muted mb-2">Sags Info</div>
|
||
|
|
<div class="fs-5 text-primary fw-bold">#1 åben</div>
|
||
|
|
<div class="small mt-1 text-danger"><i class="far fa-clock"></i> 03/03-26</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-4">
|
||
|
|
<div class="small fw-bold text-muted mb-2">Tildeling</div>
|
||
|
|
<select class="form-select form-select-sm mb-1"><option>Ingen</option></select>
|
||
|
|
<select class="form-select form-select-sm"><option>Technicians</option></select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-4">
|
||
|
|
<div class="small fw-bold text-muted mb-2">Hurtige links</div>
|
||
|
|
<ul class="nav flex-column small">
|
||
|
|
<li class="nav-item"><a class="nav-link px-0 text-dark" href="#"><i class="fas fa-link me-1"></i> Relationer (1)</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link px-0 text-dark" href="#"><i class="fas fa-check-square me-1 text-success"></i> Todo (0)</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link px-0 text-dark" href="#"><i class="fas fa-book me-1"></i> Wiki søgning</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Hovedarbejdsflade -->
|
||
|
|
<div class="col-md-10">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
|
|
<h3 class="m-0">dette er en test sag</h3>
|
||
|
|
<button class="btn btn-outline-primary btn-sm"><i class="fas fa-edit"></i> Rediger</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- STORE arbejdsfaner -->
|
||
|
|
<ul class="nav nav-pills nav-fill mb-4 border rounded bg-white shadow-sm p-1">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active fw-bold" href="#"><i class="fas fa-eye"></i> 1. Overblik & Stamdata</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link text-dark fw-bold" href="#"><i class="fas fa-wrench"></i> 2. Løsning & Salg</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link text-dark fw-bold" href="#"><i class="fas fa-comments"></i> 3. Kommunikation (Mail/Log)</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- Indhold for aktiv fane (Overblik) -->
|
||
|
|
<div class="card border-0 shadow-sm">
|
||
|
|
<div class="card-body p-4">
|
||
|
|
<h5 class="text-primary border-bottom pb-2 mb-3">Beskrivelse</h5>
|
||
|
|
<p class="text-muted">Ingen beskrivelse tilføjet for denne sag. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||
|
|
|
||
|
|
<div class="row mt-5">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6 class="text-muted text-uppercase small fw-bold">Personer & Steder</h6>
|
||
|
|
<table class="table table-sm table-borderless">
|
||
|
|
<tr><td class="text-muted w-25">Kunde</td><td><strong>Blåhund Import (TEST)</strong></td></tr>
|
||
|
|
<tr><td class="text-muted">Kontakt</td><td>Janne Vinter</td></tr>
|
||
|
|
<tr><td class="text-muted">Lokation</td><td>-</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6 class="text-muted text-uppercase small fw-bold">Udstyr</h6>
|
||
|
|
<table class="table table-sm table-borderless">
|
||
|
|
<tr><td class="text-muted w-25">Hardware</td><td>-</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function showMockup(id, btnClicked) {
|
||
|
|
// Skjul alle
|
||
|
|
document.querySelectorAll('.mockup-container').forEach(el => el.classList.remove('active'));
|
||
|
|
// Fjern active state fra knapper
|
||
|
|
document.querySelectorAll('.btn-group .btn').forEach(btn => btn.classList.remove('active'));
|
||
|
|
|
||
|
|
// Vis valgte
|
||
|
|
document.getElementById(id).classList.add('active');
|
||
|
|
btnClicked.classList.add('active');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|