SvalTech.github.io/404.html at main · SvalTech/SvalTech.github.io · 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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>404 - Page Not Found | sval.tech</title>

    <!-- Fonts -->
    <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=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Icons & Tailwind -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind Config (Matching Main Site) -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                    },
                    colors: {
                        quantum: {
                            bg: '#030305',
                            violet: '#7c3aed',
                            cyan: '#06b6d4',
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            background-color: #030305;
            color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }

        .ambient-glow {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
            z-index: -1;
            pointer-events: none;
        }
    </style>
</head>

<body class="min-h-screen flex flex-col items-center justify-center p-6 selection:bg-quantum-violet/30 selection:text-white">

    <div class="ambient-glow"></div>

    <main class="w-full max-w-2xl text-center relative z-10">
        <!-- 404 Header -->
        <h1 class="text-7xl md:text-9xl font-black font-display text-transparent bg-clip-text bg-gradient-to-br from-quantum-violet to-quantum-cyan mb-4">
            404
        </h1>
        <h2 class="text-2xl md:text-3xl font-bold font-display tracking-tight mb-2">Page Not Found</h2>

        <!-- Primary Action -->
        <a href="https://sval.tech" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white text-black font-bold text-sm hover:bg-zinc-200 hover:scale-105 transition-all mb-12 shadow-[0_0_20px_rgba(255,255,255,0.1)]">
            <i data-lucide="home" class="w-4 h-4"></i> Return to Base (sval.tech)
        </a>

        <!-- Links Directory -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">

            <!-- Tools Column -->
            <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800/50 backdrop-blur-sm">
                <h3 class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4 flex items-center gap-2">
                    <i data-lucide="wrench" class="w-3 h-3"></i> Available Tools
                </h3>
                <ul class="space-y-3">
                    <li>
                        <a href="https://sval.tech/chaos" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-quantum-violet transition-colors group">
                            <i data-lucide="calendar-days" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> ChaosPrep
                        </a>
                    </li>
                    <li>
                        <a href="https://sval.tech/studylocus/" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-quantum-cyan transition-colors group">
                            <i data-lucide="target" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> StudyLocus
                        </a>
                    </li>
                    <li>
                        <a href="https://sval.tech/syllabustracker/" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-white transition-colors group">
                            <i data-lucide="book-open" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> Syllabus Tracker (JEE)
                        </a>
                    </li>
                    <li>
                        <a href="https://sval.tech/neet/" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-white transition-colors group">
                            <i data-lucide="activity" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> Syllabus Tracker (NEET)
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Connect Column -->
            <div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800/50 backdrop-blur-sm">
                <h3 class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4 flex items-center gap-2">
                    <i data-lucide="link" class="w-3 h-3"></i> Connect
                </h3>
                <ul class="space-y-3">
                    <li>
                        <a href="https://github.com/svalordev" target="_blank" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-white transition-colors group">
                            <i data-lucide="github" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> GitHub
                        </a>
                    </li>
                    <li>
                        <a href="https://discord.gg/mKXPpSY6Dz" target="_blank" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-white transition-colors group">
                            <i data-lucide="message-square" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> Discord Server
                        </a>
                    </li>
                    <li>
                        <a href="mailto:contact@sval.tech" class="flex items-center gap-3 text-sm font-medium text-zinc-300 hover:text-white transition-colors group">
                            <i data-lucide="mail" class="w-4 h-4 group-hover:scale-110 transition-transform"></i> Email Contact
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </main>

    <script>
        // Initialize Icons
        lucide.createIcons();
    </script>
</body>
</html>