Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>404 Page is not found ( CC PROJECTS APIS )</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: 'Segoe UI', sans-serif; | |
| background: linear-gradient(to top, #c1e1c1, #f4f3ef); | |
| color: #3b3b3b; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| position: relative; | |
| text-align: center; | |
| } | |
| .background { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| .sun { | |
| width: 100px; | |
| height: 100px; | |
| background: #FFD700; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 50px; | |
| left: 50px; | |
| animation: rotate 30s linear infinite; | |
| } | |
| .cloud { | |
| position: absolute; | |
| background: #fff; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: moveClouds 60s linear infinite; | |
| } | |
| .cloud::before, | |
| .cloud::after { | |
| content: ''; | |
| position: absolute; | |
| background: #fff; | |
| border-radius: 50%; | |
| } | |
| .cloud::before { | |
| width: 60px; | |
| height: 60px; | |
| top: -20px; | |
| left: 30px; | |
| } | |
| .cloud::after { | |
| width: 50px; | |
| height: 50px; | |
| top: -15px; | |
| left: -25px; | |
| } | |
| .cloud1 { top: 100px; left: -100px; width: 120px; height: 60px; } | |
| .cloud2 { top: 180px; left: 300px; width: 100px; height: 50px; animation-delay: 10s; } | |
| @keyframes moveClouds { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(120vw); } | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .container { | |
| max-width: 600px; | |
| padding: 20px; | |
| z-index: 1; | |
| } | |
| .error-code { | |
| font-size: 100px; | |
| font-weight: bold; | |
| color: #6b8e23; | |
| } | |
| .message { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .desc { | |
| font-size: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .btn { | |
| text-decoration: none; | |
| background-color: #6b8e23; | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| } | |
| .btn:hover { | |
| background-color: #587a1f; | |
| } | |
| .icon { | |
| margin-bottom: 20px; | |
| } | |
| .icon svg { | |
| width: 100px; | |
| height: auto; | |
| } | |
| .plants { | |
| position: absolute; | |
| bottom: 0; | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| width: 100%; | |
| pointer-events: none; | |
| } | |
| .plant { | |
| width: 60px; | |
| transition: transform 0.3s ease; | |
| } | |
| .watermark { | |
| position: absolute; | |
| bottom: 10px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 12px; | |
| color: #888; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="background"> | |
| <div class="sun"></div> | |
| <div class="cloud cloud1"></div> | |
| <div class="cloud cloud2"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="icon"> | |
| <!-- Farmer SVG --> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="#6b8e23"> | |
| <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"/> | |
| <path d="M12 40h40v4H12zM18 44h28l-2 16H20z"/> | |
| </svg> | |
| </div> | |
| <div class="error-code">404</div> | |
| <div class="message">This field is empty...</div> | |
| <div class="desc">Looks like the page you're sowing for doesn't exist on our land.</div> | |
| <a class="btn" href="/">Return to Homepage 🏡</a> | |
| </div> | |
| <div class="plants"> | |
| <svg class="plant" viewBox="0 0 64 64" fill="none"> | |
| <rect x="30" y="30" width="4" height="34" fill="#228B22"/> | |
| <path d="M32 32 C25 28, 22 20, 30 18" stroke="#6b8e23" stroke-width="3"/> | |
| <path d="M32 34 C39 30, 42 22, 34 20" stroke="#6b8e23" stroke-width="3"/> | |
| </svg> | |
| <svg class="plant" viewBox="0 0 64 64" fill="none"> | |
| <rect x="30" y="30" width="4" height="34" fill="#2E8B57"/> | |
| <circle cx="32" cy="28" r="6" fill="#d4af37"/> | |
| <path d="M32 34 C28 36, 24 44, 28 46" stroke="#556b2f" stroke-width="2"/> | |
| <path d="M32 34 C36 36, 40 44, 36 46" stroke="#556b2f" stroke-width="2"/> | |
| </svg> | |
| <svg class="plant" viewBox="0 0 64 64" fill="none"> | |
| <rect x="30" y="30" width="4" height="34" fill="#006400"/> | |
| <path d="M32 32 C26 29, 20 24, 26 20" stroke="#3cb371" stroke-width="3"/> | |
| <path d="M32 36 C38 33, 44 28, 38 24" stroke="#3cb371" stroke-width="3"/> | |
| </svg> | |
| </div> | |
| <div class="watermark">Dev Jonell Hutchin Magallanes</div> | |
| <script> | |
| window.addEventListener('deviceorientation', (event) => { | |
| const tiltX = event.gamma || 0; | |
| const tiltY = event.beta || 0; | |
| const plants = document.querySelectorAll('.plant'); | |
| plants.forEach(plant => { | |
| plant.style.transform = `rotate(${tiltX / 3}deg) skewX(${tiltX / 5}deg)`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |