195 lines
9.5 KiB
HTML
195 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kompakte Designforslag - Sagsdetaljer</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
padding-bottom: 50px;
|
|
font-size: 0.9rem; /* Generelt lidt mindre tekststørrelse for helheden */
|
|
}
|
|
.container { max-width: 900px; }
|
|
.section-title {
|
|
color: #0f4c75;
|
|
border-bottom: 2px solid #0f4c75;
|
|
padding-bottom: 4px;
|
|
margin-top: 40px;
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Værktøjs-klasser for at fjerne default p-margins */
|
|
p:last-child { margin-bottom: 0; }
|
|
|
|
/* ---------------------------------------------------
|
|
Forslag 1: Inline Chat / Slack Kompakt
|
|
Alt på (næsten) én linje, nul spildplads.
|
|
--------------------------------------------------- */
|
|
.f1-container { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 10px; }
|
|
.f1-row { padding: 4px 8px; border-radius: 4px; line-height: 1.4; border-bottom: 1px dashed #f0f0f0; }
|
|
.f1-row:last-child { border-bottom: none; }
|
|
.f1-row:hover { background-color: #f8f9fa; }
|
|
.f1-meta { color: #888; font-size: 0.8rem; margin-right: 8px; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
.f1-author { font-weight: 600; margin-right: 8px; }
|
|
.f1-author.tech { color: #0f4c75; }
|
|
.f1-author.cust { color: #b33939; }
|
|
.f1-content { color: #222; }
|
|
|
|
/* ---------------------------------------------------
|
|
Forslag 2: Helpdesk Split (Venstre/Højre)
|
|
Tydelig opdeling mellem forfatter og tekst, men kompakt font.
|
|
--------------------------------------------------- */
|
|
.f2-container { border: 1px solid #dee2e6; border-radius: 4px; background: white; }
|
|
.f2-row { display: flex; border-bottom: 1px solid #e9ecef; }
|
|
.f2-row:last-child { border-bottom: none; }
|
|
.f2-left { width: 140px; background: #f8f9fa; padding: 8px 10px; flex-shrink: 0; border-right: 1px solid #e9ecef; }
|
|
.f2-right { padding: 8px 12px; flex-grow: 1; color: #333; }
|
|
.f2-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; }
|
|
.f2-time { font-size: 0.75rem; color: #6c757d; }
|
|
.f2-badge-tech { color: #0f4c75; font-size: 0.75rem; font-weight: bold; }
|
|
.f2-badge-cust { color: #6c757d; font-size: 0.75rem; font-weight: bold; }
|
|
|
|
/* ---------------------------------------------------
|
|
Forslag 3: Minimalistisk Logbog
|
|
Information-dense liste. Små headere, tekst umiddelbart under.
|
|
--------------------------------------------------- */
|
|
.f3-container { background: white; border: 1px solid #ccc; border-radius: 4px; }
|
|
.f3-item { border-bottom: 1px solid #eee; }
|
|
.f3-item:last-child { border-bottom: none; }
|
|
.f3-header { display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; padding: 3px 8px; border-left: 3px solid #ccc; font-size: 0.85rem; font-weight: 600; color: #444; }
|
|
.f3-header.tech { border-left-color: #0f4c75; background: #f0f4f8; }
|
|
.f3-body { padding: 6px 8px 8px 11px; color: #222; }
|
|
.f3-small { font-weight: normal; color: #777; font-size: 0.75rem; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container mt-4">
|
|
<h2 class="mb-4 text-center">Fokuseret på Minimal Plads (Kompakt)</h2>
|
|
<p class="text-muted text-center mb-5">Her er 3 designs uden store ikoner, uden navnebobler og med minimal whitespace, præcis som i en professionel log eller et tæt ticket-system.</p>
|
|
|
|
<!-- ==============================================
|
|
FORSLAG 1: INLINE CHAT (SLACK KOMPAKT STYLE)
|
|
============================================== -->
|
|
<h3 class="section-title">Forslag 1: Inline Log (Slack Kompakt style)</h3>
|
|
<p class="text-muted small mb-2">Minder om terminal-output eller kompakt chat. Alt udover teksten står på én linje, og marginer er næsten fjernet.</p>
|
|
|
|
<div class="f1-container">
|
|
<div class="f1-row">
|
|
<span class="f1-meta">I dag 10:00</span>
|
|
<span class="f1-author cust">Jens Jensen:</span>
|
|
<span class="f1-content">Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.</span>
|
|
</div>
|
|
<div class="f1-row">
|
|
<span class="f1-meta">I dag 10:15</span>
|
|
<span class="f1-author tech">Christian Thomas:</span>
|
|
<span class="f1-content">Hej Jens. Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?</span>
|
|
</div>
|
|
<div class="f1-row">
|
|
<span class="f1-meta">I dag 10:35</span>
|
|
<span class="f1-author cust">Jens Jensen:</span>
|
|
<span class="f1-content">Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.</span>
|
|
</div>
|
|
<div class="f1-row">
|
|
<span class="f1-meta">I dag 10:45</span>
|
|
<span class="f1-author tech">Christian Thomas:</span>
|
|
<span class="f1-content">Jeg logger lige på jeres firewall udefra om 5 minutter og tjekker om HP'en er blokeret i MAC-filteret.</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ==============================================
|
|
FORSLAG 2: HELPDESK SPLIT (2-KOLONNER)
|
|
============================================== -->
|
|
<h3 class="section-title">Forslag 2: Helpdesk Split (ITSM style)</h3>
|
|
<p class="text-muted small mb-2">Klassisk 2-kolonne layout. Venstre side har fast bredde til metadata, højre side udnytter hele bredden til ren tekst. Ingen tidsspilde vertikalt.</p>
|
|
|
|
<div class="f2-container">
|
|
<!-- Oprindelig sag -->
|
|
<div class="f2-row">
|
|
<div class="f2-left">
|
|
<div class="f2-name">Jens Jensen</div>
|
|
<div class="f2-badge-cust">KUNDE</div>
|
|
<div class="f2-time mt-1">I dag, kl. 10:00</div>
|
|
</div>
|
|
<div class="f2-right">
|
|
Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Svar -->
|
|
<div class="f2-row">
|
|
<div class="f2-left">
|
|
<div class="f2-name text-primary">Christian Thomas</div>
|
|
<div class="f2-badge-tech">BMC NETWORKS</div>
|
|
<div class="f2-time mt-1">I dag, kl. 10:15</div>
|
|
</div>
|
|
<div class="f2-right">
|
|
Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Svar -->
|
|
<div class="f2-row">
|
|
<div class="f2-left">
|
|
<div class="f2-name">Jens Jensen</div>
|
|
<div class="f2-badge-cust">KUNDE</div>
|
|
<div class="f2-time mt-1">I dag, kl. 10:35</div>
|
|
</div>
|
|
<div class="f2-right">
|
|
Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ==============================================
|
|
FORSLAG 3: MINIMALISTISK LOGBOG
|
|
============================================== -->
|
|
<h3 class="section-title">Forslag 3: Minimalistisk Logbog</h3>
|
|
<p class="text-muted small mb-2">Hver tråd adskilles af en meget tynd grå overskrift. Ingen kasser rundt om teksten, den flyder frit for maksimal informationsdensitet.</p>
|
|
|
|
<div class="f3-container">
|
|
|
|
<div class="f3-item">
|
|
<div class="f3-header">
|
|
<span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
|
|
<span class="f3-small">I dag, kl. 10:00</span>
|
|
</div>
|
|
<div class="f3-body">
|
|
Vi har et problem med at vores to printere på kontoret ikke vil forbinde til netværket siden fredag. Skærmene lyser, men de melder offline på printserveren.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="f3-item">
|
|
<div class="f3-header tech">
|
|
<span>Christian Thomas <span class="fw-normal text-muted" style="color: #0f4c75 !important;">(Tekniker)</span></span>
|
|
<span class="f3-small">I dag, kl. 10:15</span>
|
|
</div>
|
|
<div class="f3-body">
|
|
Hej Jens.<br>Jeg kan se at switchen port 4 & 5 var nede hurtigt i nat. Har I prøvet at genstarte dem, så de fanger ny DHCP IP?
|
|
</div>
|
|
</div>
|
|
|
|
<div class="f3-item">
|
|
<div class="f3-header">
|
|
<span>Jens Jensen <span class="fw-normal text-muted">(Kunde)</span></span>
|
|
<span class="f3-small">I dag, kl. 10:35</span>
|
|
</div>
|
|
<div class="f3-body">
|
|
Ja, det har vi nu og det løste det mærkeligt nok for den ene, men HP printeren driller stadig.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |