| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>403 Denied</title> |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>"> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #FFA8A8 0%, #8D96FF 100%); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .background-shapes { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| z-index: 1; |
| } |
| |
| .shape { |
| position: absolute; |
| background: rgba(255, 250, 240, 0.25); |
| border-radius: 50%; |
| animation: float 20s infinite ease-in-out; |
| } |
| |
| .shape:nth-child(1) { |
| width: 300px; |
| height: 300px; |
| top: -100px; |
| left: -100px; |
| animation-delay: 0s; |
| } |
| |
| .shape:nth-child(2) { |
| width: 200px; |
| height: 200px; |
| top: 50%; |
| right: -50px; |
| animation-delay: 3s; |
| } |
| |
| .shape:nth-child(3) { |
| width: 150px; |
| height: 150px; |
| bottom: -50px; |
| left: 30%; |
| animation-delay: 6s; |
| } |
| |
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0) rotate(0deg); |
| } |
| 50% { |
| transform: translateY(-50px) rotate(180deg); |
| } |
| } |
| |
| .container { |
| position: relative; |
| z-index: 2; |
| text-align: center; |
| padding: 40px; |
| background: rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(20px); |
| border-radius: 30px; |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| max-width: 550px; |
| animation: slideUp 0.8s ease-out; |
| } |
| |
| @keyframes slideUp { |
| from { |
| opacity: 0; |
| transform: translateY(50px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .error-code { |
| font-size: 120px; |
| font-weight: 700; |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin-bottom: 10px; |
| text-shadow: 0 4px 15px rgba(252, 182, 159, 0.3); |
| animation: glow 2s ease-in-out infinite; |
| filter: drop-shadow(0 0 20px rgba(255, 236, 210, 0.5)); |
| } |
| |
| @keyframes glow { |
| 0%, 100% { |
| filter: drop-shadow(0 0 20px rgba(255, 236, 210, 0.5)); |
| } |
| 50% { |
| filter: drop-shadow(0 0 35px rgba(252, 182, 159, 0.7)); |
| } |
| } |
| |
| .error-title { |
| font-size: 48px; |
| font-weight: 600; |
| color: #ffffff; |
| margin-bottom: 25px; |
| letter-spacing: 2px; |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| .error-description { |
| font-size: 16px; |
| font-weight: 300; |
| color: #ffffff; |
| line-height: 1.8; |
| margin-bottom: 40px; |
| opacity: 0.95; |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .button-group { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 15px 40px; |
| font-family: 'Poppins', sans-serif; |
| font-size: 16px; |
| font-weight: 500; |
| border: none; |
| border-radius: 50px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| display: inline-block; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .btn::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.3); |
| transform: translate(-50%, -50%); |
| transition: width 0.6s, height 0.6s; |
| } |
| |
| .btn:hover::before { |
| width: 300px; |
| height: 300px; |
| } |
| |
| .btn span { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .btn-home { |
| background: linear-gradient(135deg, #8D96FF 0%, #a8b0ff 100%); |
| color: white; |
| box-shadow: 0 10px 25px rgba(141, 150, 255, 0.3); |
| } |
| |
| .btn-home:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 15px 35px rgba(141, 150, 255, 0.4); |
| } |
| |
| .btn-dashboard { |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
| color: #8D96FF; |
| box-shadow: 0 10px 25px rgba(252, 182, 159, 0.3); |
| } |
| |
| .btn-dashboard:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 15px 35px rgba(252, 182, 159, 0.4); |
| } |
| |
| .lock-icon { |
| width: 80px; |
| height: 80px; |
| margin: 0 auto 20px; |
| animation: fadeInBounce 1s ease-out; |
| } |
| |
| @keyframes fadeInBounce { |
| 0% { |
| opacity: 0; |
| transform: scale(0.3) translateY(-50px); |
| } |
| 50% { |
| transform: scale(1.05) translateY(0); |
| } |
| 70% { |
| transform: scale(0.95); |
| } |
| 100% { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
| |
| @media (max-width: 600px) { |
| .container { |
| padding: 30px 20px; |
| } |
| |
| .error-code { |
| font-size: 80px; |
| } |
| |
| .error-title { |
| font-size: 32px; |
| } |
| |
| .error-description { |
| font-size: 14px; |
| } |
| |
| .btn { |
| padding: 12px 30px; |
| font-size: 14px; |
| } |
| |
| .button-group { |
| flex-direction: column; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="background-shapes"> |
| <div class="shape"></div> |
| <div class="shape"></div> |
| <div class="shape"></div> |
| </div> |
|
|
| <div class="container"> |
| <svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="3" y="11" width="18" height="11" rx="2" ry="2" fill="#fff" opacity="0.9"/> |
| <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="#8D96FF" stroke-width="2.5"/> |
| <circle cx="12" cy="16" r="1.5" fill="#FFA8A8"/> |
| </svg> |
| <div class="error-code">403</div> |
| <h1 class="error-title">Access Denied</h1> |
| <p class="error-description"> |
| Sorry, you can't access this page. Using Eruda, Inspect Element, or DevTools is not allowed according to our Terms of Service. Please respect our policies and use the platform as intended. |
| </p> |
| <div class="button-group"> |
| <a href="/" class="btn btn-home"> |
| <span>Home</span> |
| </a> |
| <a href="/dashboard" class="btn btn-dashboard"> |
| <span>Dashboard</span> |
| </a> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const container = document.querySelector('.container'); |
| |
| |
| document.addEventListener('mousemove', (e) => { |
| const moveX = (e.clientX - window.innerWidth / 2) * 0.01; |
| const moveY = (e.clientY - window.innerHeight / 2) * 0.01; |
| container.style.transform = `translate(${moveX}px, ${moveY}px)`; |
| }); |
| |
| |
| const buttons = document.querySelectorAll('.btn'); |
| buttons.forEach(btn => { |
| btn.addEventListener('click', function(e) { |
| let ripple = document.createElement('span'); |
| ripple.classList.add('ripple'); |
| this.appendChild(ripple); |
| |
| let x = e.clientX - e.target.offsetLeft; |
| let y = e.clientY - e.target.offsetTop; |
| |
| ripple.style.left = x + 'px'; |
| ripple.style.top = y + 'px'; |
| |
| setTimeout(() => { |
| ripple.remove(); |
| }, 600); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
