blazing fast link redirects on cloudflare kv
hop.dunkirk.sh/u/tacy
dunkirk.sh
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>404 - hop</title>
8 <link rel="icon"
9 href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛎️</text></svg>" />
10 <style>
11 :root {
12 --bg-primary: oklch(23.17% 0.0113 115.0);
13 --text-primary: oklch(0.77 0.05 177.41);
14 --text-muted: oklch(61.43% 0.0603 149.4);
15 --accent-primary: oklch(82.83% 0.0539 158.7);
16 --accent-bright: oklch(0.81 0.05 164.12);
17 }
18
19 * {
20 margin: 0;
21 padding: 0;
22 box-sizing: border-box;
23 }
24
25 html {
26 background: var(--bg-primary);
27 }
28
29 body {
30 font-family: "Courier New", monospace;
31 background: var(--bg-primary);
32 color: var(--text-primary);
33 min-height: 100vh;
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 padding: 1.25rem;
38 flex-direction: column;
39 text-align: center;
40 }
41
42 .error-container {
43 max-width: 31.25rem;
44 width: 100%;
45 }
46
47 .error-code {
48 font-size: 6rem;
49 font-weight: 700;
50 background: linear-gradient(135deg, var(--text-muted), var(--accent-primary), var(--accent-bright));
51 -webkit-background-clip: text;
52 -webkit-text-fill-color: transparent;
53 background-clip: text;
54 letter-spacing: -0.125rem;
55 margin-bottom: 1rem;
56 }
57
58 h1 {
59 font-size: 1.5rem;
60 margin-bottom: 0.5rem;
61 color: var(--text-primary);
62 }
63
64 p {
65 color: var(--text-muted);
66 margin-bottom: 2rem;
67 font-size: 0.875rem;
68 line-height: 1.5;
69 }
70
71 a {
72 color: var(--accent-primary);
73 text-decoration: none;
74 transition: color 0.15s;
75 font-size: 0.875rem;
76 }
77
78 a:hover {
79 color: var(--accent-bright);
80 text-decoration: underline;
81 }
82
83 .short-code {
84 background: oklch(28.59% 0.0107 114.8);
85 padding: 0.25rem 0.5rem;
86 border-radius: 0.1875rem;
87 color: var(--accent-bright);
88 font-weight: 700;
89 font-family: "Courier New", monospace;
90 }
91 </style>
92</head>
93
94<body style="background-color: var(--bg-primary)">
95 <div class="error-container">
96 <div class="error-code">404</div>
97 <h1>short url not found</h1>
98 <p>
99 the short code <span class="short-code" id="shortCode"></span> doesn't exist or has been deleted.
100 </p>
101 <a href="/">← back to hop</a>
102 </div>
103
104 <script>
105 // Extract short code from URL
106 const shortCode = window.location.pathname.slice(1);
107 if (shortCode) {
108 document.getElementById('shortCode').textContent = '/' + shortCode;
109 } else {
110 document.getElementById('shortCode').textContent = 'unknown';
111 }
112 </script>
113</body>
114
115</html>