381 lines
12 KiB
HTML
381 lines
12 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 — 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,
|
|
[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;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
background: var(--bg);
|
|
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: calc(65px + 2.5rem) 2rem 4rem;
|
|
}
|
|
|
|
.card {
|
|
width: min(560px, 100%);
|
|
background: var(--bg-panel);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border: 1px solid var(--border);
|
|
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: 1.5rem;
|
|
color: var(--danger-text);
|
|
border: 1px solid var(--danger);
|
|
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);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.6rem;
|
|
color: var(--ink);
|
|
}
|
|
|
|
[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 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.choices a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
padding: 1.1rem;
|
|
transition: border-color 0.2s ease, background 0.2s ease;
|
|
}
|
|
.choices a:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-panel);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ---- 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; }
|
|
footer { font-size: 0.65rem; padding: 0.7rem 1rem; }
|
|
.theme-toggle { width: 20px; height: 20px; bottom: 3rem; right: 0.9rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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>Chat demo with separate user and supporter views. Conversations, messages, and rate limits reset every 3 minutes. For instructions please go to the <a href="https://fló.fo/examples">examples section</a> on fló.fo</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>© <script>document.write(new Date().getFullYear())</script> FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ</span>
|
|
<a href="https://www.linkedin.com/in/bartal-l%C3%A6arsson-63793895/" target="_blank" rel="noopener" class="footer-icon" aria-label="LinkedIn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
</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>
|