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

add same look and feel as fló,fo

Browse Source
This commit is contained in:
Bartal Læarsson
2026-06-19 12:32:11 +01:00
parent fb9b719d52
commit 63cb3d36d4
5 changed files with 866 additions and 1083 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+313 -62
View File
@@ -3,70 +3,209 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>Support Chat</title>
<title>Support Chat — FLÓ</title>
<script>
(function () {
var stored = localStorage.getItem('poc-theme');
var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<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=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #111318;
--surface: #191c22;
--surface-soft: #20242c;
--border: #2b303a;
--accent: #8f9cff;
:root,
[data-theme="light"] {
--bg: #f4f1ec;
--bg-panel: rgba(255, 253, 250, 0.72);
--nav-bg: rgba(244, 241, 236, 0.6);
--ink: #1a1d22;
--ink-muted: #595f68;
--ink-dim: #9299a2;
--accent: #2c5a7a;
--border: rgba(26, 29, 34, 0.1);
--danger: #a03030;
--danger-soft: rgba(160, 48, 48, 0.08);
--danger-text: #a03030;
}
[data-theme="tokyo"] {
--bg: #07070d;
--bg-panel: rgba(15, 16, 28, 0.72);
--nav-bg: rgba(7, 7, 13, 0.65);
--ink: #e8f4ff;
--ink-muted: #a3b3cc;
--ink-dim: #7886a0;
--accent: #64dcff;
--border: rgba(100, 220, 255, 0.12);
--danger: #d93d3d;
--danger-soft: rgba(217, 61, 61, 0.16);
--danger-text: #ffd1d1;
--text: #eceff4;
--muted: #9aa3b2;
--radius: 14px;
}
html { scroll-behavior: smooth; }
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;
color: var(--ink);
font-family: 'JetBrains Mono', monospace;
font-size: 0.92rem;
font-weight: 300;
line-height: 1.65;
display: flex;
flex-direction: column;
transition: background 0.3s ease, color 0.3s ease;
}
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
a:hover { border-bottom-color: var(--accent); }
/* ---- Nav (subdomain pattern) ---- */
nav {
position: fixed; top: 0; left: 0;
width: 100%; z-index: 20;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 1.25rem 2.5rem;
background: var(--nav-bg);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-bottom: 1px solid var(--border);
transition: background 0.3s ease;
}
nav::before { content: none; display: none; }
.back-link {
grid-column: 1;
justify-self: start;
font-family: 'JetBrains Mono', monospace;
font-weight: 400;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-muted);
text-decoration: none;
padding: 0.35rem 0.6rem;
border: 1px solid var(--border);
border-radius: 2px;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.back-link:hover {
color: var(--ink);
border-color: var(--ink-muted);
background: var(--bg-panel);
border-bottom-color: var(--ink-muted);
}
.nav-brand {
grid-column: 2;
justify-self: center;
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
white-space: nowrap;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: -0.02em;
color: var(--ink);
text-decoration: none;
}
.nav-brand:hover { color: var(--accent); border-bottom: none; }
.brand-sep {
font-weight: 300;
color: var(--ink-dim);
}
.brand-sub {
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
align-self: center;
padding-top: 2px;
}
[data-theme="tokyo"] .nav-brand {
color: #e8f4ff;
text-shadow: 0 0 8px rgba(100, 220, 255, 0.3);
}
/* ---- Main content ---- */
.page-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
padding: calc(65px + 2.5rem) 2rem 4rem;
}
.card {
width: min(560px, 100%);
background: var(--surface);
background: var(--bg-panel);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--border);
border-radius: 22px;
padding: 2rem;
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
border-radius: 3px;
padding: 3rem 3.5rem;
box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
animation: panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
transform: translateY(10px);
transition: background 0.3s ease, border-color 0.3s ease;
}
.timer {
display: inline-flex;
margin-bottom: 1rem;
margin-bottom: 1.5rem;
color: var(--danger-text);
border: 1px solid var(--danger);
border-radius: 999px;
padding: 0.38rem 0.8rem;
font-size: 0.82rem;
font-weight: 800;
border-radius: 2px;
padding: 0.3rem 0.7rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
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.55rem, 4vw, 2.1rem);
letter-spacing: -0.035em;
margin-bottom: 0.55rem;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
color: var(--ink);
}
p {
color: var(--muted);
line-height: 1.55;
margin-bottom: 1.25rem;
font-size: 0.95rem;
[data-theme="tokyo"] h1 {
text-shadow: 0 0 10px rgba(100, 220, 255, 0.3);
}
.card > p {
color: var(--ink-muted);
line-height: 1.75;
margin-bottom: 2rem;
font-size: 0.88rem;
}
.choices {
@@ -75,52 +214,164 @@
gap: 0.9rem;
}
a {
.choices a {
display: flex;
flex-direction: column;
gap: 0.35rem;
text-decoration: none;
color: var(--text);
background: var(--surface-soft);
gap: 0.4rem;
color: var(--ink);
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.05rem;
transition: transform 0.15s, border-color 0.15s, background 0.15s;
border-radius: 3px;
padding: 1.1rem;
transition: border-color 0.2s ease, background 0.2s ease;
}
a:hover {
transform: translateY(-1px);
.choices a:hover {
border-color: var(--accent);
background: #242936;
background: var(--bg-panel);
border-bottom-color: var(--accent);
}
.role-title { font-weight: 700; font-size: 1rem; }
.role-detail { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.role-title {
font-weight: 700;
font-size: 0.88rem;
letter-spacing: -0.01em;
}
.role-detail {
color: var(--ink-muted);
font-size: 0.78rem;
font-weight: 300;
line-height: 1.5;
}
@media (max-width: 560px) {
body { align-items: stretch; padding: 1rem; }
/* ---- Footer ---- */
footer {
position: relative;
z-index: 10;
padding: 0.9rem 2rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
font-family: 'JetBrains Mono', monospace;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.05em;
color: var(--ink-muted);
border-top: 1px solid var(--border);
background: var(--nav-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.3s ease;
}
/* ---- Theme toggle ---- */
.theme-toggle {
position: fixed;
bottom: 4rem;
right: 1.5rem;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border);
cursor: pointer;
padding: 0;
z-index: 30;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.theme-toggle:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .theme-toggle {
background: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
border-color: rgba(26, 29, 34, 0.2);
}
[data-theme="tokyo"] .theme-toggle {
background: #f4f1ec;
border-color: rgba(100, 220, 255, 0.4);
box-shadow:
0 0 10px rgba(100, 220, 255, 0.5),
0 0 25px rgba(100, 220, 255, 0.3),
0 0 50px rgba(60, 180, 255, 0.2);
}
@keyframes panel-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
nav {
gap: 0.5rem;
padding: 0.85rem 0.85rem;
}
.back-link { font-size: 0.58rem; padding: 0.25rem 0.4rem; letter-spacing: 0.08em; }
.nav-brand { font-size: 0.9rem; }
.brand-sub { font-size: 0.6rem; letter-spacing: 0.1em; }
.page-body { padding: calc(55px + 1.25rem) 1rem 3rem; }
.card { padding: 2rem 1.5rem; }
h1 { font-size: 1.25rem; }
.choices { grid-template-columns: 1fr; }
.card { padding: 1.35rem; border-radius: 18px; align-self: center; }
.timer { width: 100%; justify-content: center; }
footer { font-size: 0.65rem; padding: 0.7rem 1rem; }
.theme-toggle { width: 20px; height: 20px; bottom: 3rem; right: 0.9rem; }
}
</style>
</head>
<body>
<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>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 conversation</span>
</a>
<a href="/supporter" target="_blank" rel="noopener noreferrer">
<span class="role-title">Supporter</span>
<span class="role-detail">View and reply to conversations</span>
</a>
<nav>
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
<a href="/" class="nav-brand">
FLÓ <span class="brand-sep">/</span> <span class="brand-sub">POC</span>
</a>
</nav>
<main class="page-body">
<div 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>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 conversation</span>
</a>
<a href="/supporter" target="_blank" rel="noopener noreferrer">
<span class="role-title">Supporter</span>
<span class="role-detail">View and reply to conversations</span>
</a>
</div>
</div>
</main>
<footer>
<span>&copy; 2025 FLÓ.FO</span>
</footer>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
<script>
(() => {
function currentSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
}
const btn = document.getElementById('theme-toggle');
if (btn) {
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme') || 'light';
const next = current === 'light' ? 'tokyo' : 'light';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('poc-theme', next);
});
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (!localStorage.getItem('poc-theme')) {
document.documentElement.setAttribute('data-theme', currentSystemTheme());
}
});
})();
</script>
</body>
</html>