197 lines
9.5 KiB
HTML
197 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>Top 3 Forslag – Kommentarfelt</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:#fff;--border:#e3e7eb;--muted:#6c757d}
|
||
body{background:var(--bg);color:#1f2937;font:.875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;margin:0}
|
||
.wrap{max-width:920px;margin:20px auto 60px;padding:0 14px}
|
||
h1{font-size:1.05rem;color:var(--accent);font-weight:700;margin:0 0 2px}
|
||
.sub{color:var(--muted);font-size:.78rem;margin-bottom:18px}
|
||
|
||
/* Tabs */
|
||
.tab-row{display:flex;gap:6px;margin-bottom:14px}
|
||
.tab-btn{padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--card);font-size:.8rem;font-weight:600;cursor:pointer;color:#555;transition:all .15s}
|
||
.tab-btn:hover{background:#edf2f7}
|
||
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||
.panel{display:none}
|
||
.panel.active{display:block}
|
||
|
||
/* Fælles */
|
||
.box{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
|
||
.input-bar{padding:6px 8px;border-top:1px solid var(--border);background:#fafbfc;display:flex;gap:6px}
|
||
.input-bar textarea{flex:1;resize:none;border:1px solid #d1d5db;border-radius:4px;padding:5px 8px;font-size:.84rem;font-family:inherit}
|
||
.input-bar button{background:var(--accent);color:#fff;border:none;border-radius:4px;padding:4px 12px;font-size:.82rem;cursor:pointer}
|
||
|
||
/* === FORSLAG 1: THREAD === */
|
||
.t-row{padding:5px 10px;border-bottom:1px solid #f0f2f4}
|
||
.t-row:last-of-type{border-bottom:none}
|
||
.t-head{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#64748b}
|
||
.t-av{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:.58rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.t-av.sys{background:#94a3b8}
|
||
.t-name{font-weight:600;color:#0f172a}
|
||
.t-time{margin-left:auto;font-size:.7rem;color:#a1a8b3}
|
||
.t-body{padding-left:26px;color:#1e293b;line-height:1.4;font-size:.84rem}
|
||
.t-row.is-sys{background:#f8fafc}
|
||
.t-row.is-sys .t-body{color:#64748b;font-style:italic;font-size:.8rem}
|
||
|
||
/* === FORSLAG 2: LOG === */
|
||
.l-row{display:flex;border-bottom:1px solid #f0f2f4}
|
||
.l-row:last-of-type{border-bottom:none}
|
||
.l-stripe{width:3px;flex-shrink:0;background:#d1d5db}
|
||
.l-stripe.tech{background:var(--accent)}
|
||
.l-stripe.sys{background:#94a3b8}
|
||
.l-inner{padding:4px 9px;flex:1}
|
||
.l-meta{font-size:.72rem;color:#64748b}
|
||
.l-meta b{color:#0f172a;font-weight:600}
|
||
.l-text{color:#1e293b;font-size:.84rem;line-height:1.4}
|
||
.l-row.is-sys .l-text{color:#64748b;font-style:italic;font-size:.8rem}
|
||
|
||
/* === FORSLAG 3: INBOX === */
|
||
.ib-feed{display:flex;flex-direction:column;gap:5px;padding:8px 10px}
|
||
.ib-m{max-width:78%}
|
||
.ib-m.left{align-self:flex-start}
|
||
.ib-m.right{align-self:flex-end}
|
||
.ib-m.ctr{align-self:center;max-width:90%}
|
||
.ib-b{padding:5px 9px;border-radius:6px;font-size:.84rem;line-height:1.4;color:#1e293b}
|
||
.ib-m.left .ib-b{background:#eef3f8;border:1px solid #d4e0ed}
|
||
.ib-m.right .ib-b{background:#e2ecf5;border:1px solid #c1d4e8}
|
||
.ib-m.ctr .ib-b{background:#f3f3f3;border:1px solid #ddd;color:#64748b;font-style:italic;font-size:.78rem;text-align:center}
|
||
.ib-info{font-size:.68rem;color:#94a3b8;margin-top:2px;padding:0 2px}
|
||
.ib-m.right .ib-info{text-align:right}
|
||
.ib-m.ctr .ib-info{text-align:center}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h1>Mine 3 bedste forslag til kommentarfeltet</h1>
|
||
<p class="sub">Klik på fanerne for at skifte mellem forslagene. Alle er kompakte og klar til at implementere direkte.</p>
|
||
|
||
<div class="tab-row">
|
||
<button class="tab-btn active" onclick="show(0)">1 · Thread</button>
|
||
<button class="tab-btn" onclick="show(1)">2 · Activity Log</button>
|
||
<button class="tab-btn" onclick="show(2)">3 · Split Inbox</button>
|
||
</div>
|
||
|
||
<!-- ========== FORSLAG 1: THREAD ========== -->
|
||
<div class="panel active" id="p0">
|
||
<div class="box">
|
||
<div class="t-row">
|
||
<div class="t-head"><span class="t-av">JJ</span><span class="t-name">Jens Jensen</span><span class="t-time">21/03 10:00</span></div>
|
||
<div class="t-body">Vi har et problem med vores to printere – de melder offline siden fredag.</div>
|
||
</div>
|
||
<div class="t-row">
|
||
<div class="t-head"><span class="t-av">CT</span><span class="t-name">Christian Thomas</span><span class="t-time">21/03 10:15</span></div>
|
||
<div class="t-body">Port 4 og 5 var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP?</div>
|
||
</div>
|
||
<div class="t-row is-sys">
|
||
<div class="t-head"><span class="t-av sys">⚙</span><span class="t-name" style="color:var(--muted)">System</span><span class="t-time">21/03 10:20</span></div>
|
||
<div class="t-body">Status ændret: Åben → Under behandling</div>
|
||
</div>
|
||
<div class="t-row">
|
||
<div class="t-head"><span class="t-av">JJ</span><span class="t-name">Jens Jensen</span><span class="t-time">21/03 10:35</span></div>
|
||
<div class="t-body">HP'en virker stadig ikke – den anden kom op igen efter genstart.</div>
|
||
</div>
|
||
<div class="t-row">
|
||
<div class="t-head"><span class="t-av">CT</span><span class="t-name">Christian Thomas</span><span class="t-time">21/03 10:45</span></div>
|
||
<div class="t-body">Jeg logger på jeres firewall nu og tjekker MAC-filteret.</div>
|
||
</div>
|
||
<div class="input-bar">
|
||
<textarea rows="1" placeholder="Skriv en kommentar..."></textarea>
|
||
<button>Send</button>
|
||
</div>
|
||
</div>
|
||
<p style="margin:8px 0 0;font-size:.76rem;color:var(--muted)"><b>Fordel:</b> Bedste balance mellem kompakt og læsbar. Lille initial-cirkel gør det nemt at følge hvem der skriver. Virker godt med mange beskeder.</p>
|
||
</div>
|
||
|
||
<!-- ========== FORSLAG 2: LOG ========== -->
|
||
<div class="panel" id="p1">
|
||
<div class="box">
|
||
<div class="l-row">
|
||
<div class="l-stripe"></div>
|
||
<div class="l-inner">
|
||
<div class="l-meta"><b>Jens Jensen</b> · 21/03 10:00</div>
|
||
<div class="l-text">Vi har et problem med vores to printere – de melder offline siden fredag.</div>
|
||
</div>
|
||
</div>
|
||
<div class="l-row">
|
||
<div class="l-stripe tech"></div>
|
||
<div class="l-inner">
|
||
<div class="l-meta"><b>Christian Thomas</b> · 21/03 10:15</div>
|
||
<div class="l-text">Port 4 og 5 var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP?</div>
|
||
</div>
|
||
</div>
|
||
<div class="l-row is-sys">
|
||
<div class="l-stripe sys"></div>
|
||
<div class="l-inner">
|
||
<div class="l-meta"><b>System</b> · 21/03 10:20</div>
|
||
<div class="l-text">Status ændret: Åben → Under behandling</div>
|
||
</div>
|
||
</div>
|
||
<div class="l-row">
|
||
<div class="l-stripe"></div>
|
||
<div class="l-inner">
|
||
<div class="l-meta"><b>Jens Jensen</b> · 21/03 10:35</div>
|
||
<div class="l-text">HP'en virker stadig ikke – den anden kom op igen efter genstart.</div>
|
||
</div>
|
||
</div>
|
||
<div class="l-row">
|
||
<div class="l-stripe tech"></div>
|
||
<div class="l-inner">
|
||
<div class="l-meta"><b>Christian Thomas</b> · 21/03 10:45</div>
|
||
<div class="l-text">Jeg logger på jeres firewall nu og tjekker MAC-filteret.</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-bar">
|
||
<textarea rows="1" placeholder="Skriv en kommentar..."></textarea>
|
||
<button>Send</button>
|
||
</div>
|
||
</div>
|
||
<p style="margin:8px 0 0;font-size:.76rem;color:var(--muted)"><b>Fordel:</b> Absolut tættest muligt. Blå streg = intern tekniker, grå = system, ingen streg = kunde. Perfekt til teknikere der scanner hurtigt.</p>
|
||
</div>
|
||
|
||
<!-- ========== FORSLAG 3: INBOX ========== -->
|
||
<div class="panel" id="p2">
|
||
<div class="box">
|
||
<div class="ib-feed">
|
||
<div class="ib-m left">
|
||
<div class="ib-b">Vi har et problem med vores to printere – de melder offline siden fredag.</div>
|
||
<div class="ib-info">Jens Jensen · 21/03 10:00</div>
|
||
</div>
|
||
<div class="ib-m right">
|
||
<div class="ib-b">Port 4 og 5 var nede kort i nat. Har I prøvet at genstarte printerne?</div>
|
||
<div class="ib-info">Christian Thomas · 21/03 10:15</div>
|
||
</div>
|
||
<div class="ib-m ctr">
|
||
<div class="ib-b">Status ændret: Åben → Under behandling</div>
|
||
<div class="ib-info">System · 21/03 10:20</div>
|
||
</div>
|
||
<div class="ib-m left">
|
||
<div class="ib-b">HP'en virker stadig ikke – den anden kom op igen efter genstart.</div>
|
||
<div class="ib-info">Jens Jensen · 21/03 10:35</div>
|
||
</div>
|
||
<div class="ib-m right">
|
||
<div class="ib-b">Jeg logger på jeres firewall nu og tjekker MAC-filteret.</div>
|
||
<div class="ib-info">Christian Thomas · 21/03 10:45</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-bar">
|
||
<textarea rows="1" placeholder="Skriv en kommentar..."></textarea>
|
||
<button>Send</button>
|
||
</div>
|
||
</div>
|
||
<p style="margin:8px 0 0;font-size:.76rem;color:var(--muted)"><b>Fordel:</b> Gør kunde/tekniker-retningen tydelig uden farver eller headers. System-beskeder centreres. Godt til dialog-tunge sager.</p>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
function show(i){
|
||
document.querySelectorAll('.panel').forEach((p,j)=>p.classList.toggle('active',j===i));
|
||
document.querySelectorAll('.tab-btn').forEach((b,j)=>b.classList.toggle('active',j===i));
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |