1750 lines
74 KiB
HTML
1750 lines
74 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SSAG Mockup - 3 nye forslag</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--accent: #0f4c75;
|
|
--accent-2: #1f6fa6;
|
|
--accent-soft: #e7f3fa;
|
|
--bg-page: #f1f4f8;
|
|
--bg-card: #ffffff;
|
|
--bg-muted: #f7f9fc;
|
|
--text-main: #1d2a36;
|
|
--text-soft: #607080;
|
|
--line: #d8e1ea;
|
|
--ok: #1f8d52;
|
|
--warn: #d97706;
|
|
--shadow: 0 12px 28px rgba(15, 76, 117, 0.08);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--accent: #75c2ef;
|
|
--accent-2: #94d4f7;
|
|
--accent-soft: #16384b;
|
|
--bg-page: #0f151b;
|
|
--bg-card: #16212c;
|
|
--bg-muted: #101a24;
|
|
--text-main: #ecf2f8;
|
|
--text-soft: #9eb1c3;
|
|
--line: #2a3c4c;
|
|
--ok: #64d393;
|
|
--warn: #f6b267;
|
|
--shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
background:
|
|
radial-gradient(1100px 460px at -6% -15%, rgba(15, 76, 117, 0.16), transparent 58%),
|
|
radial-gradient(840px 340px at 112% 0%, rgba(15, 76, 117, 0.11), transparent 62%),
|
|
var(--bg-page);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.page-wrap {
|
|
max-width: 1360px;
|
|
margin: 0 auto;
|
|
padding: 18px 16px 56px;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.top h1 {
|
|
margin: 0;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: clamp(1.15rem, 2vw, 1.55rem);
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.top p {
|
|
margin: 4px 0 0;
|
|
color: var(--text-soft);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.toggle-btn {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
padding: 8px 12px;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.analysis {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
box-shadow: var(--shadow);
|
|
padding: 12px 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.analysis h2 {
|
|
margin: 0 0 8px;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 0.95rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.analysis-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.analysis-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.chip-box {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--bg-muted);
|
|
padding: 9px 10px;
|
|
font-size: 0.83rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.chip-box b { color: var(--accent); }
|
|
|
|
.proposal {
|
|
margin-top: 16px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.proposal-head {
|
|
border-bottom: 1px solid var(--line);
|
|
background: linear-gradient(180deg, var(--accent-soft), transparent);
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.proposal-head .tag {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.proposal-head h3 {
|
|
margin: 0;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 1.02rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.proposal-head p {
|
|
margin: 3px 0 0;
|
|
font-size: 0.84rem;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.ssag {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.ssag {
|
|
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
|
|
}
|
|
}
|
|
|
|
.left-col {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--bg-card);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.right-col {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--bg-card);
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-self: start;
|
|
position: sticky;
|
|
top: 10px;
|
|
max-height: calc(100vh - 20px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.title-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.title-strip h4 {
|
|
margin: 0;
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.status-badges {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-badge {
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: var(--bg-card);
|
|
padding: 2px 8px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.section-card {
|
|
border-top: 1px solid var(--line);
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.section-card h5 {
|
|
margin: 0 0 8px;
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-soft);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.small-btn {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 4px 9px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text-soft);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.r-module {
|
|
border: 1px solid var(--line);
|
|
background: var(--bg-muted);
|
|
border-radius: 10px;
|
|
padding: 9px;
|
|
}
|
|
|
|
.r-module h6 {
|
|
margin: 0 0 7px;
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.r-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
|
|
.r-tag {
|
|
border-radius: 999px;
|
|
font-size: 0.71rem;
|
|
padding: 2px 8px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.t1 { background: #e9a800; color: #212121; }
|
|
.t2 { background: #4f5d75; }
|
|
.t3 { background: #5d6b8a; }
|
|
.t4 { background: #f26a4a; }
|
|
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.kpi {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 7px;
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.kpi .k {
|
|
font-size: 0.66rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.kpi .v {
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.comment-item {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--bg-card);
|
|
padding: 9px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.comment-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
font-size: 0.74rem;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.comment-meta b { color: var(--text-main); }
|
|
|
|
.avatar {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.composer {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.composer textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
min-height: 68px;
|
|
padding: 9px;
|
|
font-size: 0.86rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.send {
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
padding: 0 12px;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Variant A */
|
|
.a-description {
|
|
border: 1px solid var(--line);
|
|
background: var(--bg-muted);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
line-height: 1.7;
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
.a-description .lead {
|
|
color: var(--accent);
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 1.06rem;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Variant B */
|
|
.b-flow {
|
|
border-left: 3px solid var(--accent);
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.b-step {
|
|
position: relative;
|
|
border-bottom: 1px dashed var(--line);
|
|
padding: 0 0 8px 12px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.b-step:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.b-step::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 0.35em;
|
|
}
|
|
|
|
.b-step b {
|
|
display: block;
|
|
text-transform: uppercase;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.b-comments .comment-item {
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.b-comments .comment-item.tech { border-left-color: var(--accent); }
|
|
.b-comments .comment-item.sys { border-left-color: #9aa9b9; }
|
|
|
|
/* Variant C */
|
|
.c-canvas {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c-row {
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr;
|
|
border-bottom: 1px solid var(--line);
|
|
min-height: 52px;
|
|
}
|
|
|
|
.c-row:last-child { border-bottom: none; }
|
|
|
|
.c-k {
|
|
background: var(--bg-muted);
|
|
color: var(--text-soft);
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-weight: 700;
|
|
padding: 9px;
|
|
}
|
|
|
|
.c-v {
|
|
padding: 9px 11px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.c-comment {
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr;
|
|
gap: 9px;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.c-comment:last-child { border-bottom: none; }
|
|
|
|
.c-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Forsog 4, 5, 6 styles (D, E, F) */
|
|
.d-spotlight { background: linear-gradient(135deg, rgba(15,76,117,0.09) 0%, rgba(15,76,117,0.04) 100%); border: 1px solid rgba(15,76,117,0.22); border-radius: 14px; padding: 14px; position: relative; overflow: hidden; }
|
|
html[data-theme="dark"] .d-spotlight { background: linear-gradient(135deg, rgba(117,194,239,0.12) 0%, rgba(117,194,239,0.04) 100%); border-color: rgba(117,194,239,0.22); }
|
|
.d-spotlight::before { content: ""; position: absolute; top: -36px; right: -36px; width: 110px; height: 110px; border-radius: 50%; background: var(--accent); opacity: 0.07; }
|
|
.d-spotlight .d-title { font-family: "Manrope", sans-serif; font-size: 1.12rem; font-weight: 800; margin: 0 0 8px; }
|
|
.d-spotlight .d-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
|
|
.d-spotlight .d-chip { background: var(--accent); color: #fff; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px; padding: 2px 9px; opacity: 0.85; }
|
|
.d-spotlight .d-body { font-size: 0.93rem; line-height: 1.65; margin: 0; }
|
|
.d-feed .d-msg { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
|
|
.d-feed .d-msg:last-child { border-bottom: none; }
|
|
.d-av { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.d-av.sys { background: #7a8d9f; }
|
|
.d-av.cust { background: #4f756e; }
|
|
.d-msg-meta { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-soft); margin-bottom: 2px; }
|
|
.d-msg-meta b { color: var(--text-main); }
|
|
.d-msg-body { font-size: 0.88rem; line-height: 1.5; }
|
|
|
|
.e-header { border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 12px; }
|
|
.e-header .e-big { font-family: "Manrope", sans-serif; font-size: 1.14rem; font-weight: 800; display: flex; align-items: flex-start; gap: 10px; }
|
|
.e-header .e-num { background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 800; border-radius: 6px; padding: 2px 7px; margin-top: 3px; flex-shrink: 0; }
|
|
.e-alert { display: flex; gap: 9px; align-items: flex-start; background: rgba(220,53,69,0.07); border: 1px solid rgba(220,53,69,0.22); border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; font-size: 0.87rem; }
|
|
html[data-theme="dark"] .e-alert { background: rgba(220,53,69,0.13); border-color: rgba(220,53,69,0.28); }
|
|
.e-alert-icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
|
|
.e-alert-msg { font-weight: 700; color: #c0202e; line-height: 1.4; }
|
|
html[data-theme="dark"] .e-alert-msg { color: #e57f89; }
|
|
.e-desc-body { background: var(--bg-muted); border: 1px solid var(--line); border-radius: 10px; padding: 11px; font-size: 0.91rem; line-height: 1.66; }
|
|
.e-log-row { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
|
|
.e-log-row:last-child { border-bottom: none; }
|
|
.e-stripe { width: 3px; flex-shrink: 0; background: var(--line); }
|
|
.e-stripe.tech { background: var(--accent); }
|
|
.e-stripe.sys { background: #9aa9b9; }
|
|
.e-log-inner { padding: 7px 10px; }
|
|
.e-log-meta { font-size: 0.72rem; color: var(--text-soft); line-height: 1.3; margin-bottom: 2px; }
|
|
.e-log-meta strong { color: var(--text-main); }
|
|
.e-log-body { font-size: 0.89rem; line-height: 1.45; }
|
|
|
|
.f-wrap { padding: 12px 14px; }
|
|
.f-title { font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; }
|
|
.f-sub { font-size: 0.82rem; color: var(--text-soft); margin: 0 0 12px; }
|
|
.f-divider { border: none; border-top: 1px solid var(--line); margin: 10px 0; }
|
|
.f-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
|
|
.f-field { font-size: 0.82rem; }
|
|
.f-field .fk { color: var(--text-soft); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.f-field .fv { font-weight: 600; }
|
|
.f-note { border-left: 3px solid var(--accent); background: var(--bg-muted); padding: 8px 10px; border-radius: 0 8px 8px 0; font-size: 0.87rem; line-height: 1.6; margin-bottom: 10px; }
|
|
.f-note .fn-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-soft); margin-bottom: 3px; }
|
|
.f-timeline-row { display: flex; gap: 9px; font-size: 0.85rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
|
|
.f-timeline-row:last-child { border-bottom: none; }
|
|
.f-ts { color: var(--text-soft); font-size: 0.72rem; flex-shrink: 0; width: 38px; padding-top: 2px; }
|
|
.f-tname { font-weight: 600; margin-right: 4px; }
|
|
|
|
/* =====================================================
|
|
Runde 3 — Forslag 7, 8, 9
|
|
===================================================== */
|
|
|
|
/* Forslag 7 — Kanban Lane */
|
|
.kanban-lanes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
|
|
.kanban-lane { flex: 1; min-width: 200px; background: var(--bg-muted); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; }
|
|
.kanban-lane-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-soft); padding: 8px 10px 4px; border-bottom: 1px solid var(--line); }
|
|
.kanban-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; margin: 6px 8px; font-size: 0.86rem; line-height: 1.5; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
|
html[data-theme="dark"] .kanban-card { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
|
.kanban-card .kc-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 3px; }
|
|
.kanban-card .kc-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; padding: 1px 6px; background: var(--accent); color: #fff; margin-bottom: 4px; }
|
|
.kanban-card .kc-meta { font-size: 0.7rem; color: var(--text-soft); margin-top: 4px; }
|
|
.kanban-lane-footer { padding: 6px 10px; border-top: 1px solid var(--line); }
|
|
.kanban-lane-footer textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-card); color: var(--text-main); padding: 5px 8px; font-size: 0.8rem; resize: none; height: 32px; font-family: inherit; }
|
|
|
|
/* Forslag 8 — Terminal Log */
|
|
.term-wrap { background: #1a1d23; border-radius: 10px; overflow: hidden; border: 1px solid #2a2e36; }
|
|
html[data-theme="dark"] .term-wrap { background: #111318; border-color: #222630; }
|
|
.term-bar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #22252d; border-bottom: 1px solid #2e323c; }
|
|
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
.term-dot.r { background: #ff5f57; }
|
|
.term-dot.y { background: #febc2e; }
|
|
.term-dot.g { background: #28c840; }
|
|
.term-bar-title { font-family: "SF Mono", "Fira Code", monospace; font-size: 0.72rem; color: #7a8599; margin-left: 8px; }
|
|
.term-body { padding: 12px 14px; font-family: "SF Mono", "Fira Code", monospace; font-size: 0.82rem; line-height: 1.7; color: #c9d1d9; }
|
|
.term-line { display: flex; gap: 8px; margin-bottom: 2px; }
|
|
.term-prompt { color: #58a6ff; flex-shrink: 0; user-select: none; }
|
|
.term-prompt.sys { color: #6e7681; }
|
|
.term-prompt.warn { color: #d29922; }
|
|
.term-prompt.ok { color: #3fb950; }
|
|
.term-prompt.user { color: #bc8cff; }
|
|
.term-text { color: #c9d1d9; word-break: break-word; }
|
|
.term-text b { color: #f0f6fc; font-weight: 600; }
|
|
.term-text .hl { color: #58a6ff; }
|
|
.term-text .err { color: #f85149; }
|
|
.term-desc-block { background: #161920; border: 1px solid #2a2e36; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
|
|
.term-desc-block .td-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: #58a6ff; margin-bottom: 4px; }
|
|
.term-input { display: flex; gap: 6px; align-items: center; border-top: 1px solid #2a2e36; padding: 8px 14px; }
|
|
.term-input input { flex: 1; background: transparent; border: none; outline: none; color: #c9d1d9; font-family: "SF Mono", "Fira Code", monospace; font-size: 0.82rem; }
|
|
.term-input .ti-send { background: #238636; color: #fff; border: none; border-radius: 5px; padding: 3px 10px; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
|
|
|
|
/* Forslag 9 — Magazine Spread */
|
|
.mag-hero { position: relative; padding: 24px 20px 18px; border-bottom: 1px solid var(--line); }
|
|
.mag-hero::before { content: "\201C"; position: absolute; top: 6px; left: 10px; font-size: 4rem; line-height: 1; color: var(--accent); opacity: 0.12; font-family: Georgia, serif; }
|
|
.mag-hero .mag-quote { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 400; line-height: 1.55; font-style: italic; color: var(--text-main); margin: 0 0 8px 28px; }
|
|
.mag-hero .mag-byline { font-size: 0.76rem; color: var(--text-soft); margin-left: 28px; }
|
|
.mag-hero .mag-byline b { color: var(--text-main); }
|
|
.mag-details { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
|
|
.mag-detail-cell { flex: 1; padding: 8px 12px; border-right: 1px solid var(--line); }
|
|
.mag-detail-cell:last-child { border-right: none; }
|
|
.mag-detail-cell .mk { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-soft); margin-bottom: 1px; }
|
|
.mag-detail-cell .mv { font-size: 0.88rem; font-weight: 700; }
|
|
.mag-comments { padding: 12px 16px; }
|
|
.mag-comments .mag-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 2px; margin-bottom: 10px; }
|
|
.mag-entry { display: grid; grid-template-columns: 42px 1fr; gap: 0 10px; margin-bottom: 12px; }
|
|
.mag-entry .mag-time { font-size: 0.68rem; color: var(--text-soft); padding-top: 3px; text-align: right; grid-row: 1 / span 2; }
|
|
.mag-entry .mag-author { font-size: 0.82rem; font-weight: 700; }
|
|
.mag-entry .mag-author .mag-role { font-weight: 400; color: var(--text-soft); font-size: 0.74rem; margin-left: 4px; }
|
|
.mag-entry .mag-text { grid-column: 2; font-size: 0.88rem; line-height: 1.5; }
|
|
.mag-entry.system-note .mag-text { font-style: italic; color: var(--text-soft); }
|
|
.mag-compose { border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 8px; }
|
|
.mag-compose textarea { flex: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-muted); color: var(--text-main); padding: 6px 10px; font-size: 0.85rem; resize: none; height: 36px; font-family: inherit; }
|
|
.mag-compose button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
|
|
|
|
/* =====================================================
|
|
Forslag 7-9 (Original 3 comment threads)
|
|
===================================================== */
|
|
.g-thread { background: var(--bg-card); }
|
|
.g-msg { padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
.g-msg:last-child { border-bottom: none; }
|
|
.g-msg.system { background: var(--bg-muted); border-radius: 6px; padding: 10px; margin-bottom: 5px; }
|
|
.g-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
.g-av { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: white; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
|
.g-av.sys { background: #6c757d; }
|
|
.g-name { font-weight: 600; font-size: 0.85rem; color: var(--text-main); }
|
|
.g-time { font-size: 0.72rem; color: var(--text-soft); margin-left: auto; }
|
|
.g-body { margin-left: 30px; font-size: 0.88rem; line-height: 1.5; color: var(--text-main); }
|
|
|
|
.h-log { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-card); overflow: hidden; }
|
|
.h-row { display: flex; border-bottom: 1px solid var(--line); }
|
|
.h-row:last-child { border-bottom: none; }
|
|
.h-stripe { width: 4px; flex-shrink: 0; background: var(--line); }
|
|
.h-stripe.tech { background: var(--accent); }
|
|
.h-stripe.sys { background: #adb5bd; }
|
|
.h-inner { padding: 9px 12px; flex-grow: 1; }
|
|
.h-meta { font-size: 0.75rem; color: var(--text-soft); margin-bottom: 2px; }
|
|
.h-meta strong { color: var(--text-main); }
|
|
.h-text { font-size: 0.88rem; line-height: 1.45; }
|
|
|
|
.i-feed { display: flex; flex-direction: column; gap: 8px; background: var(--bg-muted); padding: 12px; border-radius: 8px; border: 1px solid var(--line); }
|
|
.i-msg { max-width: 82%; }
|
|
.i-msg.left { align-self: flex-start; }
|
|
.i-msg.right { align-self: flex-end; }
|
|
.i-bubble { padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; line-height: 1.45; border: 1px solid var(--line); background: var(--bg-card); color: var(--text-main); }
|
|
.i-msg.right .i-bubble { background: var(--accent-soft); border-color: transparent; }
|
|
.i-meta { font-size: 0.72rem; color: var(--text-soft); margin-top: 3px; padding: 0 4px; }
|
|
.i-msg.right .i-meta { text-align: right; }
|
|
|
|
/* =====================================================
|
|
Runde 4 — Forslag 10, 11, 12
|
|
===================================================== */
|
|
|
|
/* Forslag 10 — Chat Interface */
|
|
.j-chat-layout { display: flex; flex-direction: column; height: 500px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
|
|
.j-chat-header { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-muted); display: flex; justify-content: space-between; align-items: center; }
|
|
.j-chat-title { font-weight: 700; font-size: 0.95rem; }
|
|
.j-chat-status { font-size: 0.75rem; color: var(--ok); display: flex; align-items: center; gap: 6px; }
|
|
.j-chat-status::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 50%; }
|
|
.j-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-main); }
|
|
.j-bubble-row { display: flex; gap: 10px; max-width: 85%; }
|
|
.j-bubble-row.me { align-self: flex-end; flex-direction: row-reverse; }
|
|
.j-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
|
|
.j-bubble { background: var(--bg-muted); padding: 10px 14px; border-radius: 18px 18px 18px 4px; font-size: 0.9rem; line-height: 1.5; color: var(--text-main); position: relative; }
|
|
.j-bubble-row.me .j-bubble { background: var(--accent); color: white; border-radius: 18px 18px 4px 18px; }
|
|
.j-meta { font-size: 0.7rem; color: var(--text-soft); margin-top: 4px; margin-left: 4px; }
|
|
.j-bubble-row.me .j-meta { text-align: right; margin-right: 4px; }
|
|
.j-system-msg { text-align: center; font-size: 0.75rem; color: var(--text-soft); margin: 8px 0; font-style: italic; }
|
|
.j-input-area { padding: 12px; border-top: 1px solid var(--line); background: var(--bg-card); display: flex; gap: 10px; }
|
|
.j-input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px; font-size: 0.9rem; background: var(--bg-muted); color: var(--text-main); outline: none; }
|
|
.j-send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
|
|
/* Forslag 11 — Document View */
|
|
.k-doc-sheet { background: var(--bg-card); padding: 40px; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 680px; margin: 0 auto; min-height: 500px; position: relative; }
|
|
.k-doc-meta { position: absolute; top: 12px; right: 12px; font-size: 0.7rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.k-doc-title { font-family: "Georgia", serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; border-bottom: 2px solid var(--accent); padding-bottom: 12px; }
|
|
.k-doc-subtitle { font-family: "Georgia", serif; font-size: 1.1rem; color: var(--text-soft); margin-bottom: 24px; font-style: italic; }
|
|
.k-doc-body { font-size: 1rem; line-height: 1.7; margin-bottom: 32px; font-family: "Georgia", serif; }
|
|
.k-doc-section { margin-top: 24px; }
|
|
.k-doc-h3 { font-family: "Manrope", sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-soft); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 12px; }
|
|
.k-comment-thread { font-family: "Manrope", sans-serif; padding-left: 12px; border-left: 3px solid var(--line); }
|
|
.k-comment { margin-bottom: 16px; }
|
|
.k-comment-head { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; }
|
|
.k-comment-text { font-size: 0.9rem; color: var(--text-main); }
|
|
.k-comment-time { font-weight: 400; color: var(--text-soft); }
|
|
|
|
/* Forslag 12 — Dashboard Grid */
|
|
.l-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
|
.l-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; }
|
|
.l-card.full { grid-column: span 2; }
|
|
.l-card-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-soft); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
|
|
.l-stat-huge { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; }
|
|
.l-stat-label { font-size: 0.8rem; color: var(--text-soft); margin-top: 4px; }
|
|
.l-desc-text { font-size: 0.95rem; line-height: 1.5; }
|
|
.l-list-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
|
|
.l-list-item:last-child { border-bottom: none; }
|
|
.l-list-icon { width: 24px; height: 24px; background: var(--bg-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 0.8rem; }
|
|
.l-list-content { flex: 1; }
|
|
.l-list-time { font-size: 0.75rem; color: var(--text-soft); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrap">
|
|
<div class="top">
|
|
<div>
|
|
<h1>SSAG - 3 nye mock forslag (beskrivelse + kommentarer)</h1>
|
|
<p>Hojre side er holdt stabil. Fokus er kun redesign af venstre arbejdspanel.</p>
|
|
</div>
|
|
<button id="themeToggle" class="toggle-btn" type="button">Skift tema</button>
|
|
</div>
|
|
|
|
<section class="analysis">
|
|
<h2>Hurtig analyse af nuvaerende side</h2>
|
|
<div class="analysis-grid">
|
|
<div class="chip-box"><b>Det der virker:</b> Hojre kolonne med tags, kontakt, hardware og pipeline er kompakt og hurtigt scanbar.</div>
|
|
<div class="chip-box"><b>Det der halter:</b> Opgavebeskrivelse er for flad og uden informationshierarki, saa vigtigste signaler forsvinder.</div>
|
|
<div class="chip-box"><b>Kommentarer:</b> Feed mangler tydelig rolle/retning, og skriv-feltet inviterer ikke til hurtig opdatering.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 1</span>
|
|
<h3>Narrative Focus</h3>
|
|
<p>Laesbar premium-tekst + korte kunde/tekniker kort. God til den daglige support-flow.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="a-description">
|
|
<div class="lead">Printer virker ikke</div>
|
|
<div>Alle printere paa lokationen er ramt. Printserver er genstartet uden effekt. Ny info: fakturaen har fejl og skal med i fejlfindingen.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarer (6)</h5>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar">CT</span><b>Christian Thomas</b><span>06:31</span></div>
|
|
<div>Jeg starter med spooler og netvaerkstjek paa printserveren.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#6f7f8e;">KU</span><b>Kunde</b><span>06:44</span></div>
|
|
<div>Tak. Vi ser timeout paa alle printere lige nu.</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Skriv hurtig kommentar..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 2</span>
|
|
<h3>Operational Timeline</h3>
|
|
<p>Beskrivelsen bliver til tydelig problem-flow, og kommentarfeed farvekoder roller for hurtig triage.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgaveflow</h5>
|
|
<div class="b-flow">
|
|
<div class="b-step"><b>Symptom</b>Printer virker ikke.</div>
|
|
<div class="b-step"><b>Scope</b>Alle printere paa lokationen er paavirket.</div>
|
|
<div class="b-step"><b>Ekstra fejl</b>Faktura indeholder fejl.</div>
|
|
<div class="b-step"><b>Status nu</b>Printserver genstartet uden effekt.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card b-comments">
|
|
<h5>Aktivitetslog</h5>
|
|
<div class="comment-item tech">
|
|
<div class="comment-meta"><b>Christian Thomas</b><span>06:31</span></div>
|
|
<div>Portstatus tjekket, videre med spooler og job queue.</div>
|
|
</div>
|
|
<div class="comment-item sys">
|
|
<div class="comment-meta"><b>System</b><span>06:33</span></div>
|
|
<div>Status aendret: aaben -> under behandling.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><b>Kunde</b><span>06:44</span></div>
|
|
<div>Vi ser stadig timeout paa alle enheder.</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Log opdatering..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 3</span>
|
|
<h3>Structured Work Canvas</h3>
|
|
<p>Semistruktureret beskrivelse + punktbaseret kommentarspor. God naer data skal holdes skarp.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="c-canvas">
|
|
<div class="c-row">
|
|
<div class="c-k">Kort titel</div>
|
|
<div class="c-v"><b>Printer virker ikke</b></div>
|
|
</div>
|
|
<div class="c-row">
|
|
<div class="c-k">Scope</div>
|
|
<div class="c-v">Alle printere paa lokationen er paavirket.</div>
|
|
</div>
|
|
<div class="c-row">
|
|
<div class="c-k">Detaljer</div>
|
|
<div class="c-v">Printserver genstart gav ingen effekt. Faktura har ekstra fejl.</div>
|
|
</div>
|
|
<div class="c-row">
|
|
<div class="c-k">Prioritet</div>
|
|
<div class="c-v">Hoj - paavirker daglig drift.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarspor</h5>
|
|
<div class="c-comment">
|
|
<div class="c-dot"></div>
|
|
<div><b>06:31 - CT:</b> Tjekker spooler service og print queue nu.</div>
|
|
</div>
|
|
<div class="c-comment">
|
|
<div class="c-dot" style="background:#9aa9b9;"></div>
|
|
<div><b>06:33 - System:</b> Status sat til under behandling.</div>
|
|
</div>
|
|
<div class="c-comment">
|
|
<div class="c-dot" style="background:#6f7f8e;"></div>
|
|
<div><b>06:44 - Kunde:</b> Timeout ses stadig paa alle printere.</div>
|
|
</div>
|
|
<div class="composer" style="margin-top:10px;">
|
|
<textarea placeholder="Tilfoej ny kommentar..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="margin-top:16px; margin-bottom:6px; padding:10px 0 2px; border-top:2px solid var(--line);">
|
|
<span style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--accent);">Runde 2 — 3 nye forslag</span>
|
|
</div>
|
|
|
|
<!-- ===== FORSLAG 4 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 4</span>
|
|
<h3>Spotlight Card</h3>
|
|
<p>Frosted gradient baggrund med stor bold titel og keyword-chips. Kommentarer i clean avatar-thread.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="d-spotlight">
|
|
<p class="d-title">Printer virker ikke</p>
|
|
<div class="d-chips">
|
|
<span class="d-chip">Alle printere</span>
|
|
<span class="d-chip">Fakturaer</span>
|
|
<span class="d-chip">Printserver</span>
|
|
</div>
|
|
<p class="d-body">Brugerne faar timeout ved udskrift. Printserveren er genstartet uden effekt. Fakturaen indeholder desuden fejl og skal kontrolleres.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarer (6)</h5>
|
|
<div class="d-feed">
|
|
<div class="d-msg">
|
|
<div class="d-av">CT</div>
|
|
<div>
|
|
<div class="d-msg-meta"><b>Christian Thomas</b><span>06:31</span></div>
|
|
<div class="d-msg-body">Portstatus tjekket. Videre med spooler og print queue nu.</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-msg">
|
|
<div class="d-av sys">SYS</div>
|
|
<div>
|
|
<div class="d-msg-meta"><b>System</b><span>06:33</span></div>
|
|
<div class="d-msg-body" style="font-style:italic; color:var(--text-soft);">Status aendret: aaben → under behandling</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-msg">
|
|
<div class="d-av cust">KU</div>
|
|
<div>
|
|
<div class="d-msg-meta"><b>Kunde</b><span>06:44</span></div>
|
|
<div class="d-msg-body">Vi ser stadig timeout paa alle enheder.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Skriv hurtig kommentar..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 5 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 5</span>
|
|
<h3>Alert Callout + Stripe Log</h3>
|
|
<p>Roed alert-boks first, saa ren beskrivelse. Aktivitetslog med farvet venstre-stripe pr. rolle.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">hoj prioritet</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="e-header">
|
|
<div class="e-big">
|
|
<span class="e-num">#53</span>
|
|
Telefonsamtale - +4528901815
|
|
</div>
|
|
</div>
|
|
<div class="e-alert">
|
|
<span class="e-alert-icon">⚠</span>
|
|
<span class="e-alert-msg">Alle printere paa lokationen er nede — paavirker daglig drift.</span>
|
|
</div>
|
|
<div class="e-desc-body">
|
|
Printserveren er genstartet uden effekt. Brugerne kan ikke sende printjobs. Fakturaen er der desuden fejl i.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Aktivitetslog</h5>
|
|
<div>
|
|
<div class="e-log-row">
|
|
<div class="e-stripe tech"></div>
|
|
<div class="e-log-inner">
|
|
<div class="e-log-meta"><strong>Christian Thomas</strong> <span class="badge" style="font-size:0.63rem; background:var(--accent); color:#fff;">BMC</span> · 06:31</div>
|
|
<div class="e-log-body">Tjekker spooler og netvaerkskonfiguration paa printserveren.</div>
|
|
</div>
|
|
</div>
|
|
<div class="e-log-row">
|
|
<div class="e-stripe sys"></div>
|
|
<div class="e-log-inner">
|
|
<div class="e-log-meta"><strong>System</strong> · 06:33</div>
|
|
<div class="e-log-body" style="font-style:italic; color:var(--text-soft);">Status aendret: aaben → under behandling</div>
|
|
</div>
|
|
</div>
|
|
<div class="e-log-row">
|
|
<div class="e-stripe"></div>
|
|
<div class="e-log-inner">
|
|
<div class="e-log-meta"><strong>Kunde</strong> · 06:44</div>
|
|
<div class="e-log-body">Vi ser stadig timeout paa alle enheder.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="composer" style="margin-top:10px;">
|
|
<textarea placeholder="Log opdatering..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 6 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 6</span>
|
|
<h3>Condensed Workspace</h3>
|
|
<p>Ingen kortborder-chrome. Fri prosa, inline highlight-ord, og kompakt tidslinje-kommentarspor.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="f-wrap">
|
|
<div class="e-big" style="margin-bottom:2px;">
|
|
<span class="e-num">#53</span>
|
|
<p class="f-title" style="margin:0;">Printer virker ikke</p>
|
|
</div>
|
|
<p class="f-sub">Aaben · Opgave · Hoj prioritet · Redigeret 06:31</p>
|
|
|
|
<hr class="f-divider" />
|
|
|
|
<div class="f-fields">
|
|
<div class="f-field"><div class="fk">Scope</div><div class="fv">Alle printere</div></div>
|
|
<div class="f-field"><div class="fk">Ekstra fejl</div><div class="fv">Faktura fejl</div></div>
|
|
<div class="f-field"><div class="fk">Ansvarlig</div><div class="fv">Christian Thomas</div></div>
|
|
<div class="f-field"><div class="fk">Deadline</div><div class="fv">11/03-2026</div></div>
|
|
</div>
|
|
|
|
<div class="f-note">
|
|
<div class="fn-label">Beskrivelse</div>
|
|
Printserveren er genstartet uden effekt. Brugerne faar <strong>timeout</strong> ved udskrift. Fakturaen har desuden fejl og skal kontrolleres.
|
|
</div>
|
|
|
|
<hr class="f-divider" />
|
|
|
|
<h5 style="font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft); margin-bottom:8px;">Kommentarspor</h5>
|
|
|
|
<div class="f-timeline-row">
|
|
<div class="f-ts">06:31</div>
|
|
<div><span class="f-tname">CT:</span>Tjekker spooler service og print queue.</div>
|
|
</div>
|
|
<div class="f-timeline-row">
|
|
<div class="f-ts">06:33</div>
|
|
<div style="font-style:italic; color:var(--text-soft);"><span class="f-tname">System:</span>Status sat til under behandling.</div>
|
|
</div>
|
|
<div class="f-timeline-row">
|
|
<div class="f-ts">06:44</div>
|
|
<div><span class="f-tname">Kunde:</span>Timeout stadig paa alle enheder.</div>
|
|
</div>
|
|
|
|
<div class="composer" style="margin-top:10px;">
|
|
<textarea placeholder="Tilfoej note..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="margin-top:16px; margin-bottom:6px; padding:10px 0 2px; border-top:2px solid var(--line);">
|
|
<span style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--accent);">Runde 3 — 3 nye forslag</span>
|
|
</div>
|
|
|
|
<!-- ===== FORSLAG 7 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 7</span>
|
|
<h3>Kanban Lane</h3>
|
|
<p>Horisontalt swim-lane layout. Beskrivelse, status og kommentarer som kort i spalter — Trello-inspireret overblik.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="kanban-lanes">
|
|
<div class="kanban-lane">
|
|
<div class="kanban-lane-head">Beskrivelse</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-badge">Hoj prioritet</div>
|
|
<div class="kc-title">Printer virker ikke</div>
|
|
Alle printere paa lokationen er ramt. Printserver genstartet uden effekt. Fakturaen har fejl.
|
|
<div class="kc-meta">Oprettet 06:20 · CT</div>
|
|
</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-title">Scope</div>
|
|
3 printere + 1 printserver. Netvaerksprint via TCP/IP.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kanban-lane">
|
|
<div class="kanban-lane-head">Igangvaerende</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-badge" style="background:#d29922;">I gang</div>
|
|
<div class="kc-title">Spooler tjek</div>
|
|
Service genstartet, kø ryddet, venter paa test.
|
|
<div class="kc-meta">06:31 · CT</div>
|
|
</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-title">Netvaerkstjek</div>
|
|
Ping OK til alle printere. Port 9100 svarer.
|
|
<div class="kc-meta">06:35 · CT</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kanban-lane">
|
|
<div class="kanban-lane-head">Kommentarer</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-title" style="color:var(--accent);">CT</div>
|
|
Jeg starter med spooler og netvaerkstjek paa printserveren.
|
|
<div class="kc-meta">06:31</div>
|
|
</div>
|
|
<div class="kanban-card">
|
|
<div class="kc-title" style="color:#6f7f8e;">Kunde</div>
|
|
Tak. Vi ser timeout paa alle printere lige nu.
|
|
<div class="kc-meta">06:44</div>
|
|
</div>
|
|
<div class="kanban-card" style="border-style:dashed; color:var(--text-soft); font-style:italic;">
|
|
System · Status sat til under behandling.
|
|
<div class="kc-meta">06:33</div>
|
|
</div>
|
|
<div class="kanban-lane-footer">
|
|
<textarea placeholder="+ Ny kommentar..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 8 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 8</span>
|
|
<h3>Terminal Log</h3>
|
|
<p>Monospace developer-konsol i moerk tema. Beskrivelse som code-block, kommentarer som farvekodet log-output.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="term-wrap">
|
|
<div class="term-bar">
|
|
<div class="term-dot r"></div>
|
|
<div class="term-dot y"></div>
|
|
<div class="term-dot g"></div>
|
|
<span class="term-bar-title">sag-53.log — Printer virker ikke</span>
|
|
</div>
|
|
|
|
<div class="term-desc-block">
|
|
<div class="td-label">Opgavebeskrivelse</div>
|
|
<div class="term-line"><span class="term-prompt warn">!</span> <span class="term-text"><b>Alle printere</b> paa lokationen er <span class="err">nede</span>.</span></div>
|
|
<div class="term-line"><span class="term-prompt sys">#</span> <span class="term-text">Printserver genstartet uden effekt. Brugere faar timeout.</span></div>
|
|
<div class="term-line"><span class="term-prompt sys">#</span> <span class="term-text">Fakturaen har fejl og skal med i fejlfindingen.</span></div>
|
|
<div class="term-line"><span class="term-prompt ok">i</span> <span class="term-text">Scope: <span class="hl">3 printere</span> + <span class="hl">1 printserver</span> · Prioritet: <span class="err">Hoj</span></span></div>
|
|
</div>
|
|
|
|
<div class="term-body">
|
|
<div class="term-line"><span class="term-prompt">></span> <span class="term-text"><b>CT</b> [06:31] Jeg starter med spooler og netvaerkstjek paa printserveren.</span></div>
|
|
<div class="term-line"><span class="term-prompt sys">~</span> <span class="term-text" style="color:#6e7681; font-style:italic;">system [06:33] Status sat til under behandling.</span></div>
|
|
<div class="term-line"><span class="term-prompt user">></span> <span class="term-text"><b>Kunde</b> [06:44] Tak. Vi ser timeout paa alle printere lige nu.</span></div>
|
|
<div class="term-line"><span class="term-prompt">></span> <span class="term-text"><b>CT</b> [06:52] Driver geninstalleret. Test print sendt.</span></div>
|
|
<div class="term-line"><span class="term-prompt ok">✓</span> <span class="term-text" style="color:#3fb950;">Kunde [07:01] Det virker nu. Alle kan printe igen!</span></div>
|
|
</div>
|
|
|
|
<div class="term-input">
|
|
<span style="color:#58a6ff; user-select:none;">> </span>
|
|
<input type="text" placeholder="Skriv kommentar..." />
|
|
<button class="ti-send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 9 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 9</span>
|
|
<h3>Magazine Spread</h3>
|
|
<p>Redaktionel typografi med stor citat-beskrivelse, metadata-raekke og margin-noter som kommentarfeed.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="mag-hero">
|
|
<p class="mag-quote">Printer virker ikke — alle printere paa lokationen er ramt og printserveren er genstartet uden effekt. Fakturaen har desuden fejl og skal indgaa i fejlfindingen.</p>
|
|
<div class="mag-byline">Oprettet af <b>Christian Thomas</b> · 06:20 · Scope: 3 printere + 1 server</div>
|
|
</div>
|
|
|
|
<div class="mag-details">
|
|
<div class="mag-detail-cell"><div class="mk">Status</div><div class="mv" style="color:var(--ok);">Aaben</div></div>
|
|
<div class="mag-detail-cell"><div class="mk">Prioritet</div><div class="mv" style="color:#dc3545;">Hoj</div></div>
|
|
<div class="mag-detail-cell"><div class="mk">Type</div><div class="mv">Opgave</div></div>
|
|
<div class="mag-detail-cell"><div class="mk">Deadline</div><div class="mv">11/03</div></div>
|
|
</div>
|
|
|
|
<div class="mag-comments">
|
|
<div class="mag-section-title">Kommentarer</div>
|
|
|
|
<div class="mag-entry">
|
|
<div class="mag-time">06:31</div>
|
|
<div class="mag-author">CT<span class="mag-role">Tekniker</span></div>
|
|
<div class="mag-text">Jeg starter med spooler og netvaerkstjek paa printserveren.</div>
|
|
</div>
|
|
|
|
<div class="mag-entry system-note">
|
|
<div class="mag-time">06:33</div>
|
|
<div class="mag-author">System<span class="mag-role"></span></div>
|
|
<div class="mag-text">Status sat til under behandling.</div>
|
|
</div>
|
|
|
|
<div class="mag-entry">
|
|
<div class="mag-time">06:44</div>
|
|
<div class="mag-author">Kunde<span class="mag-role">Kontakt</span></div>
|
|
<div class="mag-text">Tak. Vi ser timeout paa alle printere lige nu.</div>
|
|
</div>
|
|
|
|
<div class="mag-entry">
|
|
<div class="mag-time">06:52</div>
|
|
<div class="mag-author">CT<span class="mag-role">Tekniker</span></div>
|
|
<div class="mag-text">Driver geninstalleret paa alle klienter. Test print bekraeftet OK.</div>
|
|
</div>
|
|
|
|
<div class="mag-entry">
|
|
<div class="mag-time">07:01</div>
|
|
<div class="mag-author">Kunde<span class="mag-role">Kontakt</span></div>
|
|
<div class="mag-text">Det virker nu. Alle kan printe igen - tak for hurtig hjaelp!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mag-compose">
|
|
<textarea placeholder="Skriv en kommentar..."></textarea>
|
|
<button>Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="margin-top:16px; margin-bottom:6px; padding:10px 0 2px; border-top:2px solid var(--line);">
|
|
<span style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--accent);">Runde 4 — 3 nye forslag</span>
|
|
</div>
|
|
|
|
<!-- ===== FORSLAG 10 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 10</span>
|
|
<h3>Narrative Focus - Incident Story</h3>
|
|
<p>Historien foldes ud i tydelige afsnit: Situation, Impact, Next Step. Kommentarer holdes korte og menneskelige.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="a-description">
|
|
<div class="lead">Situation: Printere svarer ikke i hele huset</div>
|
|
<div>Kl. 06:20 meldte kunden, at alle printere gik i timeout. Printserver er allerede genstartet uden effekt, og faktura-job fejler samtidig.</div>
|
|
<div style="margin-top:8px;"><strong>Impact:</strong> Fakturering og udskrivning er stoppet for hele lokationen.</div>
|
|
<div style="margin-top:8px;"><strong>Next step:</strong> Spooler, queue og driver-path valideres i prioriteret raekkefoelge.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarer (6)</h5>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar">CT</span><b>Christian Thomas</b><span>06:31</span></div>
|
|
<div>Starter med spooler og print queue. Logger hvert trin her i traden.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#6f7f8e;">KU</span><b>Kunde</b><span>06:44</span></div>
|
|
<div>Tak. Alle afdelinger melder stadig timeout ved print.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#8795a4;">SY</span><b>System</b><span>06:33</span></div>
|
|
<div style="font-style:italic; color:var(--text-soft);">Status sat til under behandling.</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Skriv hurtig opfoelgning..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 11 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 11</span>
|
|
<h3>Narrative Focus - Kunde Perspektiv</h3>
|
|
<p>Samme narrative ramme, men med fokus paa kundeoplevelse og konsekvens for drift, saa prioriteten staer tydeligt.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="a-description" style="border-left-color:#dc3545;">
|
|
<div class="lead">Kunden kan ikke printe fakturaer</div>
|
|
<div>Fejlen paavirker baade lager og kontor, da udskrivning stopper i hele lokationen. Fejlen opleves som timeout fra alle klienter.</div>
|
|
<div style="margin-top:8px;"><strong>Kritisk nu:</strong> Faktura-flowet er forsinket, hvilket rammer dagens afsendelser.</div>
|
|
<div style="margin-top:8px;"><strong>Maal:</strong> Midlertidig stabil drift inden kl. 08:00, derefter varig root-cause.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarer (6)</h5>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#6f7f8e;">KU</span><b>Kunde</b><span>06:44</span></div>
|
|
<div>Vi har 14 ventende printjobs. Kan I prioritere en hurtig workaround?</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar">CT</span><b>Christian Thomas</b><span>06:47</span></div>
|
|
<div>Ja. Midlertidigt skifter vi spooler profil og tester pa en enkelt printer om 5 min.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#8795a4;">SY</span><b>System</b><span>06:48</span></div>
|
|
<div style="font-style:italic; color:var(--text-soft);">Prioritet aendret til hoj pga. forretningspaavirkning.</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Skriv status til kunden..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FORSLAG 12 ===== -->
|
|
<section class="proposal">
|
|
<div class="proposal-head">
|
|
<span class="tag">Forslag 12</span>
|
|
<h3>Narrative Focus - Teknisk Journal</h3>
|
|
<p>Narrativ beskrivelse med mini-journal i teksten, saa teknikeren kan laese hele progressionen uden at skifte kontekst.</p>
|
|
</div>
|
|
<div class="ssag">
|
|
<div class="left-col">
|
|
<div class="title-strip">
|
|
<div>
|
|
<h4>Telefonsamtale - +4528901815</h4>
|
|
<div class="status-badges">
|
|
<span class="status-badge" style="color:var(--ok);">aaben</span>
|
|
<span class="status-badge">opgave</span>
|
|
</div>
|
|
</div>
|
|
<button class="small-btn">Rediger sag</button>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Opgavebeskrivelse</h5>
|
|
<div class="a-description">
|
|
<div class="lead">Printerincident med sporbar teknisk journal</div>
|
|
<div>Der er total printnedbrud i lokationen. Nedenfor er seneste handlinger skrevet ind i selve beskrivelsen, saa teamet hurtigt kan onboarde:</div>
|
|
<ul style="margin:10px 0 0 18px; padding:0; line-height:1.6;">
|
|
<li>06:31 - Spooler restart og queue cleanup uden varig effekt</li>
|
|
<li>06:41 - Driver-konflikt identificeret pa klientprofil</li>
|
|
<li>06:50 - Midlertidig rollback igangsat for at genskabe drift</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h5>Kommentarer (6)</h5>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar">CT</span><b>Christian Thomas</b><span>06:52</span></div>
|
|
<div>Rollback koerer nu. Forventer bekræftelse fra kunden indenfor 10 min.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#6f7f8e;">KU</span><b>Kunde</b><span>07:01</span></div>
|
|
<div>Bekraeftet. Faktura-print virker igen paa alle stationer.</div>
|
|
</div>
|
|
<div class="comment-item">
|
|
<div class="comment-meta"><span class="avatar" style="background:#8795a4;">SY</span><b>System</b><span>07:02</span></div>
|
|
<div style="font-style:italic; color:var(--text-soft);">Status sat til loest, afventer post-mortem note.</div>
|
|
</div>
|
|
<div class="composer">
|
|
<textarea placeholder="Skriv afsluttende note..."></textarea>
|
|
<button class="send">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="right-col">
|
|
<div class="r-module">
|
|
<h6>Tags</h6>
|
|
<div class="r-tags">
|
|
<span class="r-tag t1">Normal</span>
|
|
<span class="r-tag t2">AV udstyr</span>
|
|
<span class="r-tag t3">Invoice</span>
|
|
<span class="r-tag t4">Escalate</span>
|
|
</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Kontakter</h6>
|
|
<div class="muted">Christian Thomas - Blahund Import (TEST)</div>
|
|
</div>
|
|
<div class="r-module">
|
|
<h6>Salgspipeline</h6>
|
|
<div class="kpi-grid">
|
|
<div class="kpi"><div class="k">Sandsynlighed</div><div class="v">12%</div></div>
|
|
<div class="kpi"><div class="k">Belob</div><div class="v">122,00 kr.</div></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var root = document.documentElement;
|
|
var toggle = document.getElementById("themeToggle");
|
|
var saved = localStorage.getItem("ssagMockTheme");
|
|
|
|
if (saved === "dark" || saved === "light") {
|
|
root.setAttribute("data-theme", saved);
|
|
}
|
|
|
|
toggle.addEventListener("click", function () {
|
|
var next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
|
|
root.setAttribute("data-theme", next);
|
|
localStorage.setItem("ssagMockTheme", next);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|