linkstack/404.html at main · jamestheakston/linkstack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>404 - Page Not Found | LinkStack</title>
    <meta name="description" content="The page you are looking for doesn't exist. Head back to LinkStack to create your own digital identity.">
    <meta name="robots" content="noindex, follow">

    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .float-animation { animation: float 6s ease-in-out infinite; }
        .glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased min-h-screen flex flex-col">

    <nav class="fixed top-0 w-full z-50 glass py-4 px-8 flex justify-between items-center border-b border-slate-200">
        <div class="flex items-center gap-2 font-black text-2xl text-indigo-600 cursor-pointer" onclick="location.href='https://link-stack.pages.dev/'">
            <i data-feather="layers"></i><span>LinkStack</span>
        </div>
    </nav>

    <main class="flex-grow flex items-center justify-center px-6 pt-20">
        <div class="max-w-xl w-full text-center">
            <div class="relative mb-8 flex justify-center">
                <div class="text-[10rem] md:text-[12rem] font-black text-slate-100 leading-none select-none">404</div>
                <div class="absolute inset-0 flex items-center justify-center float-animation">
                    <div class="p-6 bg-white rounded-[2.5rem] shadow-2xl shadow-indigo-200/50 border border-slate-100">
                        <i data-feather="layers" class="w-16 h-16 text-indigo-600"></i>
                    </div>
                </div>
            </div>

            <h1 class="text-4xl md:text-5xl font-black tracking-tighter mb-4">Lost in the stack?</h1>
            <p class="text-slate-500 text-lg mb-10 font-medium">The page you're looking for has moved, expired, or never existed.</p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
                <a href="https://link-stack.pages.dev/" class="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-100 hover:scale-105 transition flex items-center justify-center gap-2">
                    <i data-feather="home"></i> Back to Home
                </a>
                <a href="https://link-stack.pages.dev/?auth=true" class="px-8 py-4 bg-white border-2 border-slate-100 text-slate-900 font-black rounded-2xl hover:bg-slate-50 transition flex items-center justify-center gap-2">
                    <i data-feather="grid"></i> My Dashboard
                </a>
            </div>

            <div class="pt-8 border-t border-slate-200">
                <p class="text-slate-400 text-sm font-bold mb-6">Looking for a specific profile?</p>
                <div class="max-w-sm mx-auto">
                    <label for="search-handle" class="block text-xs font-black text-slate-400 uppercase tracking-widest mb-2">link-stack.pages.dev/?u=</label>
                    <div class="relative">
                        <input type="text" id="search-handle" class="w-full px-6 py-4 bg-white border-2 border-slate-100 rounded-2xl outline-none focus:border-indigo-600 transition font-black text-indigo-600 text-center text-lg shadow-sm" placeholder="username">
                        <button onclick="performSearch()" class="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-slate-300 hover:text-indigo-600 transition">
                            <i data-feather="arrow-right"></i>
                        </button>
                    </div>
                    <p class="mt-3 text-[10px] text-slate-400 font-bold uppercase tracking-widest">Type a username and press enter</p>
                </div>
            </div>
        </div>
    </main>

    <footer class="py-12 px-8">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4 opacity-50">
            <p class="text-slate-500 text-xs font-bold">© 2026 LinkStack by James Theakston</p>
            <div class="flex gap-6">
                <a href="https://link-stack.pages.dev/docs/verification.html" class="text-slate-500 hover:text-indigo-600 text-xs font-bold">Verification</a>
                <a href="https://link-stack.pages.dev/privacy" class="text-slate-500 hover:text-indigo-600 text-xs font-bold">Privacy</a>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();

        function performSearch() {
            const val = document.getElementById('search-handle').value.trim();
            if (val !== '') {
                window.location.href = 'https://link-stack.pages.dev/?u=' + val.toLowerCase();
            }
        }

        document.getElementById('search-handle').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    </script>
</body>
</html>