290 lines
7.9 KiB
HTML
290 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>3 Kompakte Forslag - Sagsdetaljer</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--accent: #0f4c75;
|
|
--bg: #f4f6f8;
|
|
--card: #ffffff;
|
|
--muted: #6c757d;
|
|
--border: #e3e7eb;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: #1f2937;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.wrap {
|
|
max-width: 980px;
|
|
margin: 24px auto 48px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.hero {
|
|
background: linear-gradient(145deg, #fafdff, #eef5fb);
|
|
border: 1px solid #d7e7f7;
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 1.15rem;
|
|
margin: 0 0 4px;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.83rem;
|
|
}
|
|
|
|
.proposal {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
margin-bottom: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.proposal-head {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: #fbfdff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.proposal-head h2 {
|
|
margin: 0;
|
|
font-size: 0.84rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.proposal-head small {
|
|
color: #6b7280;
|
|
font-size: 0.73rem;
|
|
}
|
|
|
|
.proposal-body {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.example {
|
|
border: 1px solid #edf0f3;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.msg-row {
|
|
padding: 7px 10px;
|
|
border-bottom: 1px solid #f2f4f6;
|
|
}
|
|
|
|
.msg-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin-bottom: 2px;
|
|
font-size: 0.78rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.meta .name {
|
|
color: #0f172a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.meta .time {
|
|
margin-left: auto;
|
|
color: #9aa3ad;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.content {
|
|
color: #1f2937;
|
|
line-height: 1.43;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
/* Forslag 1 */
|
|
.avatar {
|
|
width: 21px;
|
|
height: 21px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.63rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
background: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sys {
|
|
background: #7d8793;
|
|
font-style: italic;
|
|
color: #5f6b76;
|
|
}
|
|
|
|
/* Forslag 2 */
|
|
.log-line {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
|
|
.log-line:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.stripe {
|
|
width: 3px;
|
|
background: #cfd6de;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stripe.tech {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.stripe.system {
|
|
background: #9da8b5;
|
|
}
|
|
|
|
.log-inner {
|
|
padding: 6px 9px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Forslag 3 */
|
|
.inbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
background: #fbfdff;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 78%;
|
|
border: 1px solid #dee5ed;
|
|
border-radius: 7px;
|
|
padding: 6px 9px;
|
|
font-size: 0.86rem;
|
|
line-height: 1.43;
|
|
}
|
|
|
|
.left { align-self: flex-start; background: #eef3f8; }
|
|
.right { align-self: flex-end; background: #e4eef8; border-color: #c7d9eb; }
|
|
.center { align-self: center; max-width: 90%; background: #f4f4f4; border-color: #e3e3e3; color: #69727d; font-style: italic; }
|
|
|
|
@media (max-width: 768px) {
|
|
.proposal-head {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 92%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="hero">
|
|
<h1>3 nye forslag på én side</h1>
|
|
<p>Fokus: kompakt layout, mindre vertikalt spild, hurtig læsning i drift.</p>
|
|
</div>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<h2>Forslag 1: Kompakt Thread</h2>
|
|
<small>Bedst balance mellem læsbarhed og tæthed</small>
|
|
</div>
|
|
<div class="proposal-body">
|
|
<div class="example">
|
|
<div class="msg-row">
|
|
<div class="meta"><span class="avatar">JJ</span><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
|
|
<div class="content" style="padding-left:28px;">Vi har et problem med printerne siden fredag. De melder offline.</div>
|
|
</div>
|
|
<div class="msg-row">
|
|
<div class="meta"><span class="avatar">CT</span><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
|
|
<div class="content" style="padding-left:28px;">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
|
|
</div>
|
|
<div class="msg-row sys">
|
|
<div class="meta"><span class="avatar" style="background:#7d8793;">SY</span><span class="name">System</span><span class="time">10:20</span></div>
|
|
<div class="content" style="padding-left:28px;">Status ændret: Åben -> Under behandling</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<h2>Forslag 2: Activity Log</h2>
|
|
<small>Maksimal informationsdensitet</small>
|
|
</div>
|
|
<div class="proposal-body">
|
|
<div class="example">
|
|
<div class="log-line">
|
|
<div class="stripe"></div>
|
|
<div class="log-inner">
|
|
<div class="meta"><span class="name">Jens Jensen</span><span class="time">10:00</span></div>
|
|
<div class="content">Vi har et problem med printerne siden fredag. De melder offline.</div>
|
|
</div>
|
|
</div>
|
|
<div class="log-line">
|
|
<div class="stripe tech"></div>
|
|
<div class="log-inner">
|
|
<div class="meta"><span class="name">Christian Thomas</span><span class="time">10:15</span></div>
|
|
<div class="content">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?</div>
|
|
</div>
|
|
</div>
|
|
<div class="log-line">
|
|
<div class="stripe system"></div>
|
|
<div class="log-inner">
|
|
<div class="meta"><span class="name">System</span><span class="time">10:20</span></div>
|
|
<div class="content" style="color:#6b7280; font-style:italic;">Status ændret: Åben -> Under behandling</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<h2>Forslag 3: Split Inbox</h2>
|
|
<small>Tydelig kunde/tekniker-retning</small>
|
|
</div>
|
|
<div class="proposal-body">
|
|
<div class="example inbox">
|
|
<div class="bubble left">Vi har et problem med printerne siden fredag. De melder offline.<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Jens Jensen</span><span class="time">10:00</span></div></div>
|
|
<div class="bubble right">Jeg kan se port 4 og 5 har været nede. Kan I genstarte printerne?<div class="meta" style="margin-top:4px; margin-bottom:0;"><span class="name">Christian Thomas</span><span class="time">10:15</span></div></div>
|
|
<div class="bubble center">Status ændret: Åben -> Under behandling<div class="meta" style="justify-content:center; margin-top:4px; margin-bottom:0;"><span class="name">System</span><span class="time">10:20</span></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html> |