Hugging Face's logo

Spaces:
Jonell01
/
ccprojectsapihshs
Paused

App Files Community
Jonell01 commited on
Commit
c788adb
·
verified ·
1 Parent(s): 72859c1

Update public/404.html

Browse files
Files changed (1) hide show
  1. public/404.html +204 -12
public/404.html CHANGED
@@ -1,19 +1,211 @@
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">
6
- <title>404 - Page Not Found</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
- <body class="bg-gray-100 h-screen flex items-center justify-center">
10
- <div class="text-center">
11
- <h1 class="text-9xl font-bold text-gray-800">404</h1>
12
- <p class="text-2xl font-light text-gray-600 mt-4">Oops! Page not found</p>
13
- <p class="text-gray-500 mt-4 mb-8">The page you are looking for might have been removed or is temporarily unavailable.</p>
14
- <a href="/" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">
15
- Go back to homepage
16
- </a>
 
 
 
 
 
 
17
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </body>
19
  </html>
 
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"/>
6
+ <title>404 Page is not found ( CC PROJECTS APIS )</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ font-family: 'Segoe UI', sans-serif;
11
+ background: linear-gradient(to top, #c1e1c1, #f4f3ef);
12
+ color: #3b3b3b;
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ flex-direction: column;
17
+ height: 100vh;
18
+ overflow: hidden;
19
+ position: relative;
20
+ text-align: center;
21
+ }
22
+
23
+ .background {
24
+ position: absolute;
25
+ width: 100%;
26
+ height: 100%;
27
+ overflow: hidden;
28
+ top: 0;
29
+ left: 0;
30
+ z-index: -1;
31
+ }
32
+
33
+ .sun {
34
+ width: 100px;
35
+ height: 100px;
36
+ background: #FFD700;
37
+ border-radius: 50%;
38
+ position: absolute;
39
+ top: 50px;
40
+ left: 50px;
41
+ animation: rotate 30s linear infinite;
42
+ }
43
+
44
+ .cloud {
45
+ position: absolute;
46
+ background: #fff;
47
+ border-radius: 50%;
48
+ opacity: 0.8;
49
+ animation: moveClouds 60s linear infinite;
50
+ }
51
+
52
+ .cloud::before,
53
+ .cloud::after {
54
+ content: '';
55
+ position: absolute;
56
+ background: #fff;
57
+ border-radius: 50%;
58
+ }
59
+
60
+ .cloud::before {
61
+ width: 60px;
62
+ height: 60px;
63
+ top: -20px;
64
+ left: 30px;
65
+ }
66
+
67
+ .cloud::after {
68
+ width: 50px;
69
+ height: 50px;
70
+ top: -15px;
71
+ left: -25px;
72
+ }
73
+
74
+ .cloud1 { top: 100px; left: -100px; width: 120px; height: 60px; }
75
+ .cloud2 { top: 180px; left: 300px; width: 100px; height: 50px; animation-delay: 10s; }
76
+
77
+ @keyframes moveClouds {
78
+ 0% { transform: translateX(0); }
79
+ 100% { transform: translateX(120vw); }
80
+ }
81
+
82
+ @keyframes rotate {
83
+ from { transform: rotate(0deg); }
84
+ to { transform: rotate(360deg); }
85
+ }
86
+
87
+ .container {
88
+ max-width: 600px;
89
+ padding: 20px;
90
+ z-index: 1;
91
+ }
92
+
93
+ .error-code {
94
+ font-size: 100px;
95
+ font-weight: bold;
96
+ color: #6b8e23;
97
+ }
98
+
99
+ .message {
100
+ font-size: 24px;
101
+ margin-bottom: 10px;
102
+ }
103
+
104
+ .desc {
105
+ font-size: 16px;
106
+ margin-bottom: 20px;
107
+ }
108
+
109
+ .btn {
110
+ text-decoration: none;
111
+ background-color: #6b8e23;
112
+ color: white;
113
+ padding: 10px 20px;
114
+ border-radius: 5px;
115
+ font-weight: bold;
116
+ }
117
+
118
+ .btn:hover {
119
+ background-color: #587a1f;
120
+ }
121
+
122
+ .icon {
123
+ margin-bottom: 20px;
124
+ }
125
+
126
+ .icon svg {
127
+ width: 100px;
128
+ height: auto;
129
+ }
130
+
131
+ .plants {
132
+ position: absolute;
133
+ bottom: 0;
134
+ display: flex;
135
+ gap: 20px;
136
+ justify-content: center;
137
+ width: 100%;
138
+ pointer-events: none;
139
+ }
140
+
141
+ .plant {
142
+ width: 60px;
143
+ transition: transform 0.3s ease;
144
+ }
145
+
146
+ .watermark {
147
+ position: absolute;
148
+ bottom: 10px;
149
+ width: 100%;
150
+ text-align: center;
151
+ font-size: 12px;
152
+ color: #888;
153
+ font-style: italic;
154
+ }
155
+ </style>
156
  </head>
157
+ <body>
158
+ <div class="background">
159
+ <div class="sun"></div>
160
+ <div class="cloud cloud1"></div>
161
+ <div class="cloud cloud2"></div>
162
+ </div>
163
+
164
+ <div class="container">
165
+ <div class="icon">
166
+ <!-- Farmer SVG -->
167
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="#6b8e23">
168
+ <path d="M32 2c-6.627 0-12 5.373-12 12 0 2.172.577 4.206 1.58 5.97L16 26l4 4 6-5.5C27.671 24.833 29.766 25 32 25s4.329-.167 6-0.5L44 30l4-4-5.58-6.03A11.96 11.96 0 0044 14c0-6.627-5.373-12-12-12z"/>
169
+ <path d="M12 40h40v4H12zM18 44h28l-2 16H20z"/>
170
+ </svg>
171
  </div>
172
+ <div class="error-code">404</div>
173
+ <div class="message">This field is empty...</div>
174
+ <div class="desc">Looks like the page you're sowing for doesn't exist on our land.</div>
175
+ <a class="btn" href="/">Return to Homepage 🏡</a>
176
+ </div>
177
+
178
+ <div class="plants">
179
+ <svg class="plant" viewBox="0 0 64 64" fill="none">
180
+ <rect x="30" y="30" width="4" height="34" fill="#228B22"/>
181
+ <path d="M32 32 C25 28, 22 20, 30 18" stroke="#6b8e23" stroke-width="3"/>
182
+ <path d="M32 34 C39 30, 42 22, 34 20" stroke="#6b8e23" stroke-width="3"/>
183
+ </svg>
184
+ <svg class="plant" viewBox="0 0 64 64" fill="none">
185
+ <rect x="30" y="30" width="4" height="34" fill="#2E8B57"/>
186
+ <circle cx="32" cy="28" r="6" fill="#d4af37"/>
187
+ <path d="M32 34 C28 36, 24 44, 28 46" stroke="#556b2f" stroke-width="2"/>
188
+ <path d="M32 34 C36 36, 40 44, 36 46" stroke="#556b2f" stroke-width="2"/>
189
+ </svg>
190
+ <svg class="plant" viewBox="0 0 64 64" fill="none">
191
+ <rect x="30" y="30" width="4" height="34" fill="#006400"/>
192
+ <path d="M32 32 C26 29, 20 24, 26 20" stroke="#3cb371" stroke-width="3"/>
193
+ <path d="M32 36 C38 33, 44 28, 38 24" stroke="#3cb371" stroke-width="3"/>
194
+ </svg>
195
+ </div>
196
+
197
+ <div class="watermark">Dev Jonell Hutchin Magallanes</div>
198
+
199
+ <script>
200
+ window.addEventListener('deviceorientation', (event) => {
201
+ const tiltX = event.gamma || 0;
202
+ const tiltY = event.beta || 0;
203
+
204
+ const plants = document.querySelectorAll('.plant');
205
+ plants.forEach(plant => {
206
+ plant.style.transform = `rotate(${tiltX / 3}deg) skewX(${tiltX / 5}deg)`;
207
+ });
208
+ });
209
+ </script>
210
  </body>
211
  </html>