FLO/user-to-supporter-chat-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui cleanup mobile view also

Browse Source
This commit is contained in:
Bartal Læarsson
2026-06-18 22:25:52 +01:00
parent f24da78970
commit 9d9b04d01b
5 changed files with 342 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+24 -15
View File
@@ -14,6 +14,9 @@
--surface-soft: #20242c;
--border: #2b303a;
--accent: #8f9cff;
--danger: #d93d3d;
--danger-soft: rgba(217, 61, 61, 0.16);
--danger-text: #ffd1d1;
--text: #eceff4;
--muted: #9aa3b2;
--radius: 14px;
@@ -21,13 +24,14 @@
body {
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
color: var(--text);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
padding: 1.25rem;
}
.card {
@@ -42,24 +46,27 @@
.timer {
display: inline-flex;
margin-bottom: 1rem;
color: var(--muted);
border: 1px solid var(--border);
color: var(--danger-text);
border: 1px solid var(--danger);
border-radius: 999px;
padding: 0.35rem 0.75rem;
font-size: 0.78rem;
background: var(--bg);
padding: 0.38rem 0.8rem;
font-size: 0.82rem;
font-weight: 800;
background: var(--danger-soft);
box-shadow: 0 0 0 1px rgba(217, 61, 61, 0.08), 0 8px 24px rgba(217, 61, 61, 0.08);
}
h1 {
font-size: clamp(1.6rem, 4vw, 2.15rem);
font-size: clamp(1.55rem, 4vw, 2.1rem);
letter-spacing: -0.035em;
margin-bottom: 0.5rem;
margin-bottom: 0.55rem;
}
p {
color: var(--muted);
line-height: 1.6;
margin-bottom: 1.5rem;
line-height: 1.55;
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
.choices {
@@ -77,7 +84,7 @@
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem;
padding: 1.05rem;
transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
@@ -88,11 +95,13 @@
}
.role-title { font-weight: 700; font-size: 1rem; }
.role-detail { color: var(--muted); font-size: 0.88rem; }
.role-detail { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
@media (max-width: 560px) {
body { align-items: stretch; padding: 1rem; }
.choices { grid-template-columns: 1fr; }
.card { padding: 1.5rem; }
.card { padding: 1.35rem; border-radius: 18px; align-self: center; }
.timer { width: 100%; justify-content: center; }
}
</style>
</head>
@@ -100,12 +109,12 @@
<main class="card">
<span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
<h1>Support chat</h1>
<p>Open the side you want to test. Each option opens in a new tab.</p>
<p>A small in-memory chat demo with separate user and supporter views. Conversations, messages, and rate limits reset every 3 minutes.</p>
<div class="choices">
<a href="/user" target="_blank" rel="noopener noreferrer">
<span class="role-title">User</span>
<span class="role-detail">Start a new conversation</span>
<span class="role-detail">Start a conversation</span>
</a>
<a href="/supporter" target="_blank" rel="noopener noreferrer">
<span class="role-title">Supporter</span>