EchoFolio/404.html at master · harsh98trivedi/EchoFolio · 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
---
title: 404
layout: default
permalink: /404.html
image: https://github.com/harsh98trivedi/harsh98trivedi.github.io/raw/master/assets/img/meta.jpg
---

<!-- Client-side Redirect Fallback -->
<script>
    (function() {
        var redirects = {{ site.data.redirects | jsonify }};
        var currentPath = window.location.pathname;

        // Normalize: remove trailing slash for comparison
        var normalizedCurrent = currentPath.length > 1 && currentPath.endsWith('/')
            ? currentPath.slice(0, -1)
            : currentPath;

        if (redirects) {
            for (var i = 0; i < redirects.length; i++) {
                var entry = redirects[i];
                var fromPath = entry.from;

                // Ensure fromPath starts with /
                if (!fromPath.startsWith('/')) fromPath = '/' + fromPath;
                // Remove trailing slash from rule if present
                if (fromPath.length > 1 && fromPath.endsWith('/')) fromPath = fromPath.slice(0, -1);

                // Check match
                if (normalizedCurrent === fromPath || normalizedCurrent.endsWith(fromPath)) {
                    // Redirect matched! Perform redirect immediately.
                    window.location.replace(entry.to);
                    return;
                }
            }
        }

        // If we get here, no redirect matched.
        // We can safely show the 404 content.
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('error-container').style.visibility = 'visible';
            document.getElementById('error-container').style.opacity = '1';
        });
    })();
</script>

<style>
    /* Hide content initially to prevent flash of 404 on valid redirects */
    #error-container {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }
</style>

<section id="error-container" class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-[#030712] pt-32">

    <!-- Tech Grid Background -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] rounded-full bg-purple-900/20 blur-[120px] opacity-40"></div>
    </div>

    <!-- Main Content -->
    <div class="relative z-10 flex flex-col items-center text-center">
        <!-- Giant Background 404 -->
        <h1 class="font-display font-bold text-[12rem] md:text-[20rem] leading-none text-transparent bg-clip-text bg-gradient-to-b from-white/5 to-transparent select-none pb-10">
            404
        </h1>

        <!-- Overlay Message -->
        <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
            <div class="bg-[#030712]/50 backdrop-blur-sm p-8 rounded-3xl border border-white/5">
                <p class="font-mono text-purple-400 text-xs uppercase tracking-[0.3em] mb-4 animate-pulse">
                    Error Code: 404
                </p>
                <h2 class="text-3xl md:text-5xl font-display font-medium text-white mb-4">
                    Reality Glitch
                </h2>
                <p class="text-gray-500 font-light text-sm md:text-base max-w-sm mx-auto leading-relaxed">
                    The coordinates you entered don't exist in this dimension.
                </p>
                <div class="mt-8 pointer-events-auto">
                    <a href="{{ '/' | relative_url }}" class="px-6 py-3 border border-white/20 rounded-full text-sm uppercase tracking-widest text-white hover:bg-white hover:text-black transition-colors">
                        Return Home
                    </a>
                </div>
            </div>
        </div>
    </div>

</section>