<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Short URL Stats</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: 760px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}
h1 { margin-top: 0; font-size: 1.2rem; }
p { color: var(--muted); }
.item {
margin: 14px 0;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: #0f141b;
overflow-wrap: anywhere;
}
.label {
font-size: 0.82rem;
color: var(--muted);
margin-bottom: 4px;
}
.value {
color: var(--text);
text-decoration: none;
}
a.value { color: #9ecbff; }
.clicks {
font-size: 1.1rem;
font-weight: 700;
color: #79c0ff;
}
.actions {
margin-top: 18px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
border: 1px solid #2f81f7;
background: var(--accent);
color: #0d1117;
text-decoration: none;
border-radius: 8px;
font-weight: 700;
padding: 10px 12px;
display: inline-block;
}
.btn.secondary {
background: transparent;
color: var(--text);
border-color: var(--border);
}
</style>
</head>
<body>
<main>
<h1>Link Stats</h1>
<p>Usage details for this short URL.</p>
<div class="item">
<div class="label">Short URL</div>
<a class="value" href="{{ short_url }}">{{ short_url }}</a>
</div>
<div class="item">
<div class="label">Destination URL</div>
<a class="value" href="{{ url }}">{{ url }}</a>
</div>
<div class="item">
<div class="label">Clicks</div>
<span class="clicks">{{ clicks }}</span>
</div>
<div class="actions">
<a class="btn" href="/">Shorten Another</a>
<a class="btn secondary" href="{{ short_url }}">Open Short URL</a>
</div>
</main>
</body>
</html>