Hugging Face's logo

Spaces:
api-ix
/
Gemini
Running

App Files Community
api-ix commited on
Commit
75c150e
·
verified ·
1 Parent(s): c807dac

Upload 404.html

Browse files
Files changed (1) hide show
  1. 404.html +191 -0
404.html ADDED
@@ -0,0 +1,191 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>Page Not Found</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ /* --- RESET & CORE STYLES --- */
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ font-family: 'Poppins', sans-serif;
17
+ -webkit-tap-highlight-color: transparent;
18
+ }
19
+
20
+ body {
21
+ min-height: 100vh;
22
+ min-height: -webkit-fill-available;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ background-color: #0f0f1a;
27
+ overflow: hidden;
28
+ position: relative;
29
+ touch-action: none;
30
+ }
31
+
32
+ /* --- AURORA BACKGROUND --- */
33
+ body::before {
34
+ content: '';
35
+ position: absolute;
36
+ top: -50%;
37
+ left: -50%;
38
+ width: 200%;
39
+ height: 200%;
40
+ background: radial-gradient(circle, #4F46E5 0%, #7C3AED 30%, #EC4899 60%, #0f0f1a 80%);
41
+ background-size: 200% 200%;
42
+ animation: auroraMove 15s ease infinite alternate;
43
+ opacity: 0.5;
44
+ z-index: -1;
45
+ filter: blur(80px);
46
+ }
47
+
48
+ @keyframes auroraMove {
49
+ 0% { transform: translate(0, 0) rotate(0deg); }
50
+ 50% { transform: translate(-10%, 5%) rotate(10deg); }
51
+ 100% { transform: translate(5%, -10%) rotate(-5deg); }
52
+ }
53
+
54
+ /* --- CARD STYLING --- */
55
+ .login-card-container {
56
+ perspective: 1500px;
57
+ width: 100%;
58
+ display: flex;
59
+ justify-content: center;
60
+ padding: 20px;
61
+ }
62
+
63
+ .login-card {
64
+ width: 100%;
65
+ max-width: 420px;
66
+ padding: 60px 30px;
67
+ border-radius: 40px;
68
+ background: rgba(255, 255, 255, 0.05);
69
+ backdrop-filter: blur(25px);
70
+ -webkit-backdrop-filter: blur(25px);
71
+ border: 1px solid rgba(255, 255, 255, 0.15);
72
+ box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
73
+ 0 20px 40px rgba(0, 0, 0, 0.3);
74
+ color: #fff;
75
+ text-align: center;
76
+ transition: transform 0.1s ease-out;
77
+ transform-style: preserve-3d;
78
+ will-change: transform;
79
+ position: relative;
80
+ }
81
+
82
+ /* --- 404 SPECIFIC STYLES --- */
83
+ .error-code {
84
+ font-size: 100px;
85
+ font-weight: 900;
86
+ line-height: 1;
87
+ margin-bottom: 10px;
88
+ background: linear-gradient(135deg, #4F46E5, #EC4899);
89
+ -webkit-background-clip: text;
90
+ -webkit-text-fill-color: transparent;
91
+ /* Subtle floating animation */
92
+ animation: float 4s ease-in-out infinite;
93
+ text-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
94
+ }
95
+
96
+ @keyframes float {
97
+ 0%, 100% { transform: translateY(0); }
98
+ 50% { transform: translateY(-10px); }
99
+ }
100
+
101
+ .login-card h2 {
102
+ font-size: 24px;
103
+ margin-bottom: 15px;
104
+ font-weight: 600;
105
+ }
106
+
107
+ .login-card p.subtitle {
108
+ font-size: 14px;
109
+ color: rgba(255, 255, 255, 0.6);
110
+ margin-bottom: 40px;
111
+ line-height: 1.6;
112
+ }
113
+
114
+ /* --- BUTTON --- */
115
+ .home-btn {
116
+ display: inline-block;
117
+ text-decoration: none;
118
+ width: 100%;
119
+ padding: 16px;
120
+ border-radius: 50px;
121
+ font-size: 16px;
122
+ font-weight: 600;
123
+ color: #fff;
124
+ background: rgba(255, 255, 255, 0.1);
125
+ border: 1px solid rgba(255, 255, 255, 0.2);
126
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
127
+ transition: all 0.3s ease;
128
+ }
129
+
130
+ .home-btn:hover {
131
+ background: linear-gradient(135deg, #4F46E5, #EC4899);
132
+ border-color: transparent;
133
+ transform: translateY(-2px);
134
+ box-shadow: 0 15px 30px rgba(124, 58, 237, 0.5);
135
+ }
136
+
137
+ .home-btn i {
138
+ margin-right: 8px;
139
+ }
140
+
141
+ /* Mobile Adjustments */
142
+ @media (max-width: 480px) {
143
+ .error-code { font-size: 80px; }
144
+ .login-card { padding: 40px 20px; }
145
+ }
146
+ </style>
147
+ </head>
148
+ <body>
149
+
150
+ <div class="login-card-container">
151
+ <div class="login-card" id="tiltCard">
152
+
153
+ <div class="error-code">404</div>
154
+
155
+ <h2>Oops! Page Not Found</h2>
156
+ <p class="subtitle">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
157
+
158
+ <a href="login.html" class="home-btn">
159
+ <i class="fa-solid fa-house"></i> Go to Homepage
160
+ </a>
161
+
162
+ </div>
163
+ </div>
164
+
165
+ <script>
166
+ /* --- LOGIC --- */
167
+
168
+ // 1. TILT EFFECT
169
+ const card = document.getElementById('tiltCard');
170
+ const container = document.querySelector('.login-card-container');
171
+
172
+ if (window.matchMedia("(pointer: fine)").matches) {
173
+ container.addEventListener('mousemove', (e) => {
174
+ const rect = container.getBoundingClientRect();
175
+ const x = e.clientX - rect.left - rect.width / 2;
176
+ const y = e.clientY - rect.top - rect.height / 2;
177
+
178
+ const multiple = 15;
179
+ const rotateX = (y / rect.height) * -multiple;
180
+ const rotateY = (x / rect.width) * multiple;
181
+
182
+ card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
183
+ });
184
+
185
+ container.addEventListener('mouseleave', () => {
186
+ card.style.transform = `rotateX(0deg) rotateY(0deg)`;
187
+ });
188
+ }
189
+ </script>
190
+ </body>
191
+ </html>