dev-codelist.net/404.html at main · ARD0NIZ/dev-codelist.net · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
---
permalink: /404.html
---
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dev-codelist.net | 404 Not Found</title>

    <!-- Open Graph / Discord / WhatsApp -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="dev-codelist.net | 404 Not Found">
    <meta property="og:description" content="The page you are looking for could not be found.">
    <meta property="og:image" content="/assets/media/Logo.png">
    <meta property="og:site_name" content="dev-codelist.net">
    <meta name="theme-color" content="#5024F4">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="dev-codelist.net | 404 Not Found">
    <meta name="twitter:description" content="The page you are looking for could not be found.">
    <meta name="twitter:image" content="/assets/media/Logo.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/media/Logo.png">

    <script src="https://cdn.tailwindcss.com"></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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
    <script src="/assets/js/live-dev.js"></script>

    <style>
        /* 404 Glitch Animation */
        @keyframes glitch {
            0%   { clip-path: inset(0 0 98% 0); transform: translate(-4px, 0); }
            10%  { clip-path: inset(30% 0 50% 0); transform: translate(4px, 0); }
            20%  { clip-path: inset(70% 0 10% 0); transform: translate(-4px, 0); }
            30%  { clip-path: inset(20% 0 70% 0); transform: translate(4px, 0); }
            40%  { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
            50%  { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
            60%  { clip-path: inset(80% 0 5% 0);  transform: translate(-4px, 0); }
            70%  { clip-path: inset(45% 0 45% 0); transform: translate(4px, 0); }
            80%  { clip-path: inset(5% 0 90% 0);  transform: translate(-2px, 0); }
            90%  { clip-path: inset(90% 0 2% 0);  transform: translate(2px, 0); }
            100% { clip-path: inset(0 0 98% 0);   transform: translate(-4px, 0); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50%       { transform: translateY(-18px); }
        }

        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .error-code {
            position: relative;
            display: inline-block;
            animation: float 4s ease-in-out infinite;
        }

        .error-code::before,
        .error-code::after {
            content: '404';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
        }

        .error-code::before {
            color: #7B4FFF;
            animation: glitch 3s infinite linear alternate-reverse;
        }

        .error-code::after {
            color: #5024F4;
            animation: glitch 2.5s infinite linear alternate;
        }

        .fade-up {
            opacity: 0;
            animation: fade-in-up 0.7s ease forwards;
        }
        .fade-up.delay-1 { animation-delay: 0.15s; }
        .fade-up.delay-2 { animation-delay: 0.30s; }
        .fade-up.delay-3 { animation-delay: 0.45s; }

        /* Subtle background particle dots */
        .bg-dots {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .bg-dots span {
            position: absolute;
            border-radius: 50%;
            background: rgba(123, 79, 255, 0.35);
            animation: float 6s ease-in-out infinite;
        }
    </style>
</head>
<body class="selection:bg-[#5024F4]/30">

    <!-- Header -->
    {% include header.html %}

    <!-- Background decorative dots -->
    <div class="bg-dots" aria-hidden="true">
        <span style="width:6px;height:6px;top:15%;left:10%;animation-delay:0s;"></span>
        <span style="width:4px;height:4px;top:35%;left:80%;animation-delay:1s;"></span>
        <span style="width:8px;height:8px;top:65%;left:20%;animation-delay:2s;"></span>
        <span style="width:5px;height:5px;top:80%;left:70%;animation-delay:0.5s;"></span>
        <span style="width:3px;height:3px;top:50%;left:50%;animation-delay:1.5s;"></span>
        <span style="width:7px;height:7px;top:20%;left:60%;animation-delay:2.5s;"></span>
        <span style="width:4px;height:4px;top:75%;left:40%;animation-delay:3s;"></span>
    </div>

    <!-- Main Content -->
    <main class="relative z-10 min-h-screen flex flex-col items-center justify-center text-center px-6 py-32">

        <!-- 404 Glitch Title -->
        <div class="error-code text-[10rem] md:text-[14rem] font-extrabold tracking-tight text-white text-glow leading-none mb-6 select-none">
            404
        </div>

        <!-- Subtitle -->
        <h1 class="fade-up delay-1 text-3xl md:text-4xl font-bold text-white mb-4">
            Page Not Found
        </h1>

        <!-- Description -->
        <p class="fade-up delay-2 text-lg md:text-xl text-gray-400 max-w-xl leading-relaxed mb-10">
            The page you are looking for might have been removed, renamed, or never existed.
        </p>

        <!-- Return Button -->
        <a href="/"
           class="fade-up delay-3 bg-gradient-to-r from-[#5024F4] to-[#7B4FFF] text-white px-8 py-4 rounded-full hover:shadow-lg hover:shadow-[#5024F4]/50 transition-all font-semibold text-lg inline-block">
            Return to Homepage
        </a>

    </main>

    <!-- Footer -->
    {% include footer.html %}

</body>
</html>