ct/bmc_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
90a6496c48
bmc_hub/design_forslag_3_kort.html

142 lines
9.2 KiB
HTML
Raw Normal View History

Refactor UI components and layouts for improved user experience - Removed outdated design_forslag_top3_ny_side.html file. - Updated bottom-bar.js to add back button functionality for better navigation. - Introduced new sidebar layout in design_forslag_1_sidebar.html for enhanced information display. - Created design_forslag_2_kompakt.html featuring a compact action ribbon for streamlined interactions. - Developed design_forslag_3_kort.html implementing a widget cards dashboard for a cleaner overview of case details.
2026-04-24 23:12:51 +02:00
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design 3: Widget Cards Dashboard</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 { --bs-primary-rgb: 15, 76, 117; }
body { background-color: #f1f5f9; font-family: system-ui; }
.header-bg { background: linear-gradient(to right, #0f4c75, #1e3c72); color: white; padding: 2rem 0 3rem 0; margin-bottom: -2rem; }
.stat-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); height: 100%; border: 1px solid #e2e8f0; }
.stat-label { font-size: 0.75rem; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.widget-field { margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.widget-field label { margin: 0; font-size: 0.8rem; color: #475569; }
.widget-select { width: 60%; padding: 0.15rem 0.5rem; font-size: 0.8rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #f8fafc; }
.hero-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; }
</style>
</head>
<body>
<!-- CLEAN TOP UDEN INPUTS - BARE TITEL & ACTIONS (HELT NY HOVED STRUKTUR) -->
<div class="header-bg">
<div class="container-fluid px-4 px-xl-5">
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
<div class="d-flex align-items-center gap-3">
<span class="badge bg-white text-primary fs-6 rounded-pill px-3 shadow-sm">#9925</span>
<span class="badge bg-success fs-6 rounded-pill px-3 shadow-sm"><i class="bi bi-circle-fill me-1 small"></i>Åben</span>
</div>
<div class="d-flex gap-2">
<button class="btn btn-light rounded-pill fw-bold text-primary shadow-sm"><i class="bi bi-display me-2"></i>AnyDesk Quick Connect</button>
<button class="btn btn-outline-light rounded-pill"><i class="bi bi-printer me-2"></i>Print</button>
</div>
</div>
<h1 class="hero-title mb-1">Netværksnedbrud i afdeling 3 - Ingen forbindelse</h1>
<p class="text-white-50"><i class="bi bi-building me-1"></i>BMC Networks · <i class="bi bi-person me-1"></i>Christian Thomas · <i class="bi bi-plus-circle me-1 ms-2"></i>Oprettet: 12/04/2026</p>
</div>
</div>
<!-- WIDGET DASHBOARD SOM ERSTATTER DE 2 TOPBARER -->
<div class="container-fluid px-4 px-xl-5">
<div class="row g-3 mb-4 position-relative" style="z-index: 10;">
<!-- Widget 1: Klassifikation -->
<div class="col-md-6 col-xl-3">
<div class="stat-card">
<div class="stat-label"><i class="bi bi-tags-fill text-primary"></i> Klassifikation</div>
<div class="widget-field"><label>Status</label>
<select class="widget-select border-warning border-start border-3"><option>Åben</option><option>I gang</option></select>
</div>
<div class="widget-field"><label>Type</label>
<select class="widget-select border-success border-start border-3"><option>Ticket</option><option>Opgave</option></select>
</div>
<div class="widget-field"><label>Prioritet</label>
<select class="widget-select border-danger border-start border-3"><option>Normal</option><option>Høj</option></select>
</div>
</div>
</div>
<!-- Widget 2: Tildeling -->
<div class="col-md-6 col-xl-3">
<div class="stat-card">
<div class="stat-label"><i class="bi bi-people-fill text-success"></i> Tildeling</div>
<div class="widget-field"><label>Ansvarlig</label>
<select class="widget-select"><option>Christian</option><option>Ingen</option></select>
</div>
<div class="widget-field"><label>Gruppe</label>
<select class="widget-select"><option>Support</option><option>Salg</option></select>
</div>
<div class="widget-field mt-3">
<label class="w-100"><i class="bi bi-check2-square text-primary me-1"></i>Næste todo:</label>
</div>
<div class="text-primary fw-bold small text-truncate">Gennemgå switches (14:00)</div>
</div>
</div>
<!-- Widget 3: Tidslinje -->
<div class="col-md-6 col-xl-3">
<div class="stat-card">
<div class="stat-label"><i class="bi bi-calendar-event-fill text-info"></i> Tidslinje</div>
<div class="widget-field"><label>Arbejdsstart</label>
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control" value="2026-04-12"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
</div>
<div class="widget-field"><label title="Start senest (Trigger)">Start senest</label>
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control"><button class="btn btn-light bg-white border"><i class="bi bi-three-dots-vertical"></i></button></div>
</div>
<div class="widget-field"><label>Deadline</label>
<div class="input-group input-group-sm" style="width: 60%;"><input type="date" class="form-control text-danger"><button class="btn btn-outline-danger bg-white"><i class="bi bi-x"></i></button></div>
</div>
</div>
</div>
<!-- Widget 4: Links -->
<div class="col-md-6 col-xl-3">
<div class="stat-card bg-light">
<div class="stat-label"><i class="bi bi-chat-left-dots-fill text-secondary"></i> Hurtige links</div>
<div class="d-flex flex-column gap-2 mt-3">
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-building-gear me-2 text-primary"></i>Skift kunde/firma</button>
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-diagram-3 me-2 text-primary"></i>Ændre afdeling</button>
<button class="btn btn-sm btn-white bg-white border w-100 text-start shadow-sm"><i class="bi bi-plus-square me-2 text-success"></i>Opret underopgave</button>
</div>
</div>
</div>
</div>
<ul class="nav nav-tabs mb-4 px-2">
<li class="nav-item"><a class="nav-link active fw-bold px-4 border-bottom border-3 border-primary" href="#"><i class="bi bi-card-text me-2"></i>Sagsdetaljer</a></li>
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">Løsning</a></li>
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">E-mail</a></li>
<li class="nav-item"><a class="nav-link text-muted px-4" href="#">Tidsforbrug</a></li>
</ul>
<!-- DET OMDESIGNEDE VENSTRE SIDE INDHOLD: Nu er det ikke bombarderet med header støj -->
<div class="row g-4 mb-5">
<div class="col-xl-8">
<div class="card border-0 shadow-sm rounded-4">
<div class="card-body p-4 p-xl-5">
<h4 class="fw-bold mb-4">Beskrivelse</h4>
<p class="fs-5" style="color: #334155; line-height:1.6;">Netværket gik ned efter strømafbrydelse. Vi har brug for at tekniker gennemgår kablet setup i rack-skab D.</p>
<hr class="my-5">
<!-- Her ville chat thread ligge normalt som du bad om (venstre side) -->
<div class="p-4 rounded text-center text-muted" style="background:#f1f5f9;border:1px dashed #cbd5e1;height:250px;">
Den overordnede "Venstre side" føles meget mere åndbar nu.
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body p-4 text-center text-muted" style="background:#f8fafc;">
Sidestillet overblik over timer, tildelinger og vedhæftninger.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink