<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relay URL Shortener</title>
<style>
:root {
color-scheme: dark;
--bg: #0d1117;
--card: #161b22;
--border: #30363d;
--text: #c9d1d9;
--muted: #8b949e;
--accent: #58a6ff;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: radial-gradient(circle at top left, #1f2733 0%, var(--bg) 45%);
color: var(--text);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
padding: 24px;
}
main {
width: 100%;
max-width: 680px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}
h1 {
margin: 0 0 10px;
font-size: 1.2rem;
}
p {
margin: 0 0 16px;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.4;
}
form {
display: flex;
gap: 10px;
}
input {
flex: 1;
border: 1px solid var(--border);
border-radius: 8px;
background: #0f141b;
color: var(--text);
padding: 10px 12px;
font: inherit;
}
button {
border: 1px solid #2f81f7;
background: var(--accent);
color: #0d1117;
border-radius: 8px;
font: inherit;
font-weight: 700;
padding: 10px 14px;
cursor: pointer;
}
code {
background: #0f141b;
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 6px;
color: #9ecbff;
}
@media (max-width: 600px) {
form { flex-direction: column; }
button { width: 100%; }
}
</style>
</head>
<body>
<main>
<h1>Relay URL Shortener</h1>
<p>Paste a URL to create a short link.</p>
<form method="post" action="/">
<input name="url" type="url" placeholder="https://example.com/some/long/path" required />
<input name="csrf_token" type="hidden" value="{{ csrf_token }}" />
<button type="submit">Shorten</button>
</form>
<p style="margin-top: 14px;">
API: <code>POST /api/v1/shorten</code> with JSON <code>{"url":"https://example.com"}</code>
</p>
</main>
</body>
</html>