Skip to content

Commit cbe285e

Browse files
claudeclaude
committed
Add logviewer UI mockup for design preview
Self-contained HTML mockup of all logviewer pages (home, log view, raw, not found) with fake data and a page switcher, for previewing/redesigning the logviewer UI. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013vqQJQAud7rmfykwWKJACY
1 parent 3075ed5 commit cbe285e

1 file changed

Lines changed: 247 additions & 0 deletions

File tree

‎logviewer-mockup.html‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Logviewer — Mockup (fake data)</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
8+
<style>
9+
:root{
10+
--bg:#1f2129; --card:#2b2d36; --card2:#32343f; --hover:#34363f;
11+
--text:#dcddde; --muted:#9aa0a6; --blurple:#7289da; --btn:#7c83fd;
12+
--green:#3ba55d; --note:#3a2f1a; --note-border:#faa61a; --line:#3a3c45;
13+
}
14+
*{box-sizing:border-box}
15+
body{margin:0;background:var(--bg);color:var(--text);font-family:Roboto,Arial,sans-serif;}
16+
.page{display:none;min-height:100vh;}
17+
.page.active{display:block;}
18+
19+
/* ---- shared splash card ---- */
20+
.splash{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
21+
.card-panel{background:var(--card);border-radius:6px;padding:48px 40px;max-width:760px;width:100%;
22+
text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.45);}
23+
.logo-title{font-family:'Bowlby One SC',cursive;color:var(--blurple);font-size:64px;margin:0 0 6px;letter-spacing:1px;}
24+
.sub{color:var(--muted);font-weight:300;font-size:20px;margin:0 0 28px;}
25+
.my-button{display:inline-block;background:var(--btn);color:#fff;text-decoration:none;
26+
padding:10px 22px;border-radius:4px;margin:6px;font-size:14px;font-weight:500;letter-spacing:.5px;
27+
text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:filter .15s;}
28+
.my-button:hover{filter:brightness(1.12);}
29+
30+
/* ---- navbar ---- */
31+
.navbar{position:sticky;top:0;background:var(--card);height:56px;display:flex;align-items:center;
32+
padding:0 24px;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:10;}
33+
.navbar .home{color:var(--blurple);font-size:26px;text-decoration:none;}
34+
35+
/* ---- log page ---- */
36+
.wrap{max-width:920px;margin:0 auto;padding:24px 16px 80px;}
37+
.meta{background:var(--card);border-radius:8px;padding:22px 24px;display:flex;gap:20px;align-items:flex-start;
38+
box-shadow:0 4px 16px rgba(0,0,0,.35);margin-bottom:14px;}
39+
.meta img{width:72px;height:72px;border-radius:50%;flex:0 0 auto;}
40+
.meta h2{margin:0 0 4px;font-size:22px;}
41+
.meta .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 24px;margin-top:12px;}
42+
.meta .grid div span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
43+
.meta .grid div b{font-weight:500;font-size:14px;}
44+
.pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;}
45+
.pill.closed{background:rgba(237,66,69,.18);color:#f25b5e;}
46+
.toolbar{display:flex;justify-content:flex-end;margin-bottom:6px;}
47+
.toggle{background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:4px;
48+
padding:7px 14px;font-size:13px;cursor:pointer;}
49+
.toggle:hover{background:var(--hover);}
50+
51+
.chat{background:var(--card);border-radius:8px;padding:6px 0;box-shadow:0 4px 16px rgba(0,0,0,.35);}
52+
.msg{display:flex;gap:16px;padding:10px 22px;}
53+
.msg:hover{background:var(--hover);}
54+
.msg img.av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;}
55+
.msg .body{min-width:0;}
56+
.msg .head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
57+
.msg .name{font-weight:500;font-size:15px;}
58+
.msg .name.mod{color:#5865f2;}
59+
.msg .name.user{color:#43b581;}
60+
.msg .time{color:var(--muted);font-size:11px;}
61+
.msg .tag{background:var(--blurple);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;
62+
text-transform:uppercase;vertical-align:middle;}
63+
.msg .text{font-size:14px;line-height:1.45;}
64+
.att{margin-top:8px;}
65+
.att img{max-width:320px;border-radius:6px;display:block;}
66+
.att a.file{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
67+
border-radius:6px;padding:10px 14px;color:#7aa7ff;text-decoration:none;font-size:13px;margin-top:6px;}
68+
69+
.note{background:var(--note);border-left:3px solid var(--note-border);}
70+
.note .name{color:var(--note-border);}
71+
.note .label{color:var(--note-border);font-size:11px;font-weight:700;text-transform:uppercase;}
72+
73+
.system{text-align:center;color:var(--muted);font-size:12.5px;padding:10px 22px;font-style:italic;}
74+
.system.sep{border-top:1px solid var(--line);margin-top:4px;}
75+
.internal-hidden .note{display:none;}
76+
77+
/* ---- raw page ---- */
78+
.raw{max-width:920px;margin:0 auto;padding:30px 16px;}
79+
.raw pre{background:#002b36;color:#93a1a1;border-radius:8px;padding:22px;white-space:pre-wrap;
80+
font-family:'Roboto Mono',Consolas,monospace;font-size:13px;line-height:1.6;}
81+
82+
/* ---- mockup switcher popup ---- */
83+
.switcher{position:fixed;top:14px;right:14px;background:#15161c;border:1px solid var(--line);
84+
border-radius:10px;padding:12px 14px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.6);width:200px;}
85+
.switcher h4{margin:0 0 4px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--btn);}
86+
.switcher .hint{font-size:10px;color:var(--muted);margin:0 0 10px;}
87+
.switcher button{display:block;width:100%;text-align:left;background:var(--card2);color:var(--text);
88+
border:1px solid var(--line);border-radius:5px;padding:8px 10px;margin:5px 0;font-size:13px;cursor:pointer;}
89+
.switcher button.sel{background:var(--btn);color:#fff;border-color:var(--btn);}
90+
.badge{position:fixed;bottom:12px;left:12px;background:#ed4245;color:#fff;font-size:11px;font-weight:700;
91+
padding:5px 10px;border-radius:5px;z-index:100;letter-spacing:.5px;}
92+
</style>
93+
</head>
94+
<body>
95+
96+
<!-- ============ PAGE: HOME / SPLASH ============ -->
97+
<div class="page active" id="home">
98+
<div class="splash">
99+
<div class="card-panel">
100+
<h1 class="logo-title">Logviewer</h1>
101+
<p class="sub">This site is used to display Modmail log entries.</p>
102+
<a class="my-button" href="#">Discord</a>
103+
<a class="my-button" href="#">Github</a>
104+
<a class="my-button" href="#">Docs</a>
105+
<a class="my-button" href="#">Patreon</a>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<!-- ============ PAGE: LOG VIEW ============ -->
111+
<div class="page" id="log">
112+
<div class="navbar"><a class="home" href="#" title="Home">⌂</a></div>
113+
<div class="wrap">
114+
<div class="meta">
115+
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=Pebble&backgroundColor=7289da" alt="">
116+
<div style="flex:1">
117+
<h2>Thread with starlight_fox <span class="pill closed">Closed</span></h2>
118+
<div style="color:var(--muted);font-size:13px">User ID: 482910337554841600</div>
119+
<div class="grid">
120+
<div><span>Created</span><b>Jun 18, 2026 · 2:14 PM</b></div>
121+
<div><span>Closed by</span><b>Mod • aurora</b></div>
122+
<div><span>Messages</span><b>7</b></div>
123+
<div><span>Close reason</span><b>Resolved ✓</b></div>
124+
</div>
125+
</div>
126+
</div>
127+
128+
<div class="toolbar">
129+
<button class="toggle" id="noteToggle">Hide internal messages</button>
130+
</div>
131+
132+
<div class="chat" id="chat">
133+
<div class="system">starlight_fox created a Modmail thread · Jun 18, 2026 · 2:14 PM</div>
134+
135+
<div class="msg">
136+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=fox" alt="">
137+
<div class="body">
138+
<div class="head"><span class="name user">starlight_fox</span><span class="time">Today at 2:14 PM</span></div>
139+
<div class="text">hey, i think i was muted by mistake? i didn't post anything in #general 😕</div>
140+
</div>
141+
</div>
142+
143+
<div class="msg note">
144+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=aurora" alt="">
145+
<div class="body">
146+
<div class="head"><span class="name">aurora</span><span class="label">Internal note</span><span class="time">2:15 PM</span></div>
147+
<div class="text">Checking audit log — looks like an automod false positive on the link filter.</div>
148+
</div>
149+
</div>
150+
151+
<div class="msg">
152+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=aurora" alt="">
153+
<div class="body">
154+
<div class="head"><span class="name mod">aurora</span><span class="tag">Staff</span><span class="time">Today at 2:16 PM</span></div>
155+
<div class="text">Hi! Thanks for reaching out — you're right, that was an automod mistake. I've lifted the mute. Sorry about that!</div>
156+
</div>
157+
</div>
158+
159+
<div class="msg">
160+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=fox" alt="">
161+
<div class="body">
162+
<div class="head"><span class="name user">starlight_fox</span><span class="time">Today at 2:17 PM</span></div>
163+
<div class="text">oh amazing, thank you!! here's the screenshot i mentioned:</div>
164+
<div class="att"><img src="https://placehold.co/320x180/2b2d36/9aa0a6?text=screenshot.png" alt=""></div>
165+
</div>
166+
</div>
167+
168+
<div class="msg">
169+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=aurora" alt="">
170+
<div class="body">
171+
<div class="head"><span class="name mod">Anonymous</span><span class="tag">Anon reply</span><span class="time">Today at 2:18 PM</span></div>
172+
<div class="text">No problem at all. I've also whitelisted that domain so it won't happen again.</div>
173+
<div class="att"><a class="file" href="#">📎 automod_config.txt · 2.1 KB</a></div>
174+
</div>
175+
</div>
176+
177+
<div class="msg note">
178+
<img class="av" src="https://api.dicebear.com/7.x/thumbs/svg?seed=aurora" alt="">
179+
<div class="body">
180+
<div class="head"><span class="name">aurora</span><span class="label">Internal note</span><span class="time">2:19 PM</span></div>
181+
<div class="text">Domain added to allowlist. Closing as resolved.</div>
182+
</div>
183+
</div>
184+
185+
<div class="system sep">Thread closed by aurora · Jun 18, 2026 · 2:20 PM · “Resolved ✓”</div>
186+
</div>
187+
</div>
188+
</div>
189+
190+
<!-- ============ PAGE: NOT FOUND ============ -->
191+
<div class="page" id="notfound">
192+
<div class="splash">
193+
<div class="card-panel">
194+
<h1 class="logo-title">Not found</h1>
195+
<p class="sub">The page you are looking for is not here.</p>
196+
</div>
197+
</div>
198+
</div>
199+
200+
<!-- ============ PAGE: RAW LOG ============ -->
201+
<div class="page" id="raw">
202+
<div class="raw">
203+
<pre>Thread with starlight_fox (482910337554841600)
204+
Created: 2026-06-18 14:14 UTC | Closed by: aurora | Messages: 7
205+
206+
[14:14] starlight_fox: hey, i think i was muted by mistake?
207+
[14:15] (NOTE) aurora: automod false positive on link filter
208+
[14:16] aurora (staff): Hi! That was an automod mistake. Mute lifted.
209+
[14:17] starlight_fox: thank you!! [attachment: screenshot.png]
210+
[14:18] Anonymous (staff): Whitelisted the domain. [attachment: automod_config.txt]
211+
[14:19] (NOTE) aurora: Domain added to allowlist. Closing.
212+
[14:20] *** Thread closed by aurora — "Resolved" ***</pre>
213+
</div>
214+
</div>
215+
216+
<!-- ============ MOCKUP SWITCHER ============ -->
217+
<div class="switcher">
218+
<h4>Logviewer pages</h4>
219+
<p class="hint">Mockup with fake data — click to preview each page</p>
220+
<button data-go="home" class="sel">🏠 Home / splash</button>
221+
<button data-go="log">💬 Log view (thread)</button>
222+
<button data-go="raw">📄 Raw log (plain text)</button>
223+
<button data-go="notfound">🚫 Not found (404)</button>
224+
</div>
225+
<div class="badge">MOCKUP — NOT REAL DATA</div>
226+
227+
<script>
228+
const pages = document.querySelectorAll('.page');
229+
const btns = document.querySelectorAll('.switcher button');
230+
btns.forEach(b => b.addEventListener('click', () => {
231+
pages.forEach(p => p.classList.remove('active'));
232+
document.getElementById(b.dataset.go).classList.add('active');
233+
btns.forEach(x => x.classList.remove('sel'));
234+
b.classList.add('sel');
235+
window.scrollTo(0,0);
236+
}));
237+
// Internal-note toggle on the log page
238+
const t = document.getElementById('noteToggle');
239+
const chat = document.getElementById('chat');
240+
t.addEventListener('click', () => {
241+
chat.classList.toggle('internal-hidden');
242+
t.textContent = chat.classList.contains('internal-hidden')
243+
? 'Show internal messages' : 'Hide internal messages';
244+
});
245+
</script>
246+
</body>
247+
</html>

0 commit comments

Comments
 (0)