127 lines
3.5 KiB
HTML
127 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>
|
|
<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;
|
|
--danger: #d93d3d;
|
|
--danger-soft: rgba(217, 61, 61, 0.16);
|
|
--danger-text: #ffd1d1;
|
|
--text: #eceff4;
|
|
--muted: #9aa3b2;
|
|
--radius: 14px;
|
|
}
|
|
|
|
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.25rem;
|
|
}
|
|
|
|
.card {
|
|
width: min(560px, 100%);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 22px;
|
|
padding: 2rem;
|
|
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.timer {
|
|
display: inline-flex;
|
|
margin-bottom: 1rem;
|
|
color: var(--danger-text);
|
|
border: 1px solid var(--danger);
|
|
border-radius: 999px;
|
|
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.55rem, 4vw, 2.1rem);
|
|
letter-spacing: -0.035em;
|
|
margin-bottom: 0.55rem;
|
|
}
|
|
|
|
p {
|
|
color: var(--muted);
|
|
line-height: 1.55;
|
|
margin-bottom: 1.25rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.choices {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
background: var(--surface-soft);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.05rem;
|
|
transition: transform 0.15s, border-color 0.15s, background 0.15s;
|
|
}
|
|
|
|
a:hover {
|
|
transform: translateY(-1px);
|
|
border-color: var(--accent);
|
|
background: #242936;
|
|
}
|
|
|
|
.role-title { font-weight: 700; font-size: 1rem; }
|
|
.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.35rem; border-radius: 18px; align-self: center; }
|
|
.timer { width: 100%; justify-content: center; }
|
|
}
|
|
</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>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|