-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
1 lines (1 loc) · 4.08 KB
/
Copy path404.html
File metadata and controls
1 lines (1 loc) · 4.08 KB
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon.ico" type="image/x-icon"><link rel="icon" type="image/png" sizes="16x16" href="icons/16.png"><link rel="icon" type="image/png" sizes="32x32" href="icons/32.png"><link rel="icon" type="image/png" sizes="48x48" href="icons/48.png"><link rel="icon" type="image/png" sizes="64x64" href="icons/64.png"><title>404 - Page Not Found</title><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"><style>:root{ --primary: #f44234; --on-primary: #ffffff; --background: #140c0b; --on-background: #f1dfdd; --surface: #1c1110; --surface-container: #2d1f1e; --surface-container-high: #382928; --outline: #a08c8a; --outline-variant: #534341; --radius-large: 16px; --radius-xl: 28px; --shadow: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3);} *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;} body{ min-height: 100vh; background: var(--background); color: var(--on-background); display: flex; flex-direction: column;} .topbar{ height: 64px; background: var(--surface); border-bottom: 1px solid var(--outline-variant); display: flex; align-items: center; padding: 0 24px;} .brand{ display: flex; align-items: center; gap: 12px;} .brand-icon{ font-size: 28px; color: var(--primary);} .brand-title{ font-size: 20px; font-weight: 500;} .main{ flex: 1; display: flex; justify-content: center; align-items: center; padding: 24px;} .card{ width: 100%; max-width: 650px; background: var(--surface-container); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden;} .card-top{ text-align: center; padding: 40px 32px; background: var(--surface-container-high); border-bottom: 1px solid var(--outline-variant);} .error-code{ font-size: 110px; font-weight: 700; color: var(--primary); line-height: 1;} .title{ font-size: 30px; font-weight: 500; margin-top: 12px;} .content{ padding: 32px; text-align: center;} .description{ color: var(--outline); line-height: 1.7; margin-bottom: 24px;} .url-box{ background: var(--surface-container-high); border: 1px solid var(--outline-variant); border-radius: var(--radius-large); padding: 16px; margin-bottom: 28px;} .url-label{ font-size: 13px; color: var(--outline); margin-bottom: 6px;} .url-value{ color: var(--primary); font-weight: 500; word-break: break-word;} .actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;} .btn{ border: none; cursor: pointer; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 500; font-size: 14px; transition: .2s;} .btn-primary{ background: var(--primary); color: var(--on-primary);} .btn-primary:hover{ opacity: .92;} .btn-secondary{ background: transparent; color: var(--primary); border: 1px solid var(--outline);} .btn-secondary:hover{ background: rgba(244, 66, 52, .08);} .footer{ text-align: center; padding: 20px; color: var(--outline); font-size: 13px;} @media(max-width:600px){ .error-code{ font-size: 82px;} .title{ font-size: 24px;} .card-top, .content{ padding: 24px;} .actions{ flex-direction: column;} .btn{ width: 100%;}} </style></head><body><header class="topbar"><div class="brand"><img class="brand-icon" src="icons/48.png"/><div class="brand-title">Extract CRX</div></div></header><main class="main"><section class="card"><div class="card-top"><div class="error-code">404</div><h1 class="title">Page Not Found</h1></div><div class="content"><p class="description">The page you're looking for doesn't exist, may have been moved, renamed, or is temporarily unavailable. </p><div class="url-box"><div class="url-label">Requested Resource</div><div class="url-value" id="current-url"></div></div><div class="actions"><button class="btn btn-primary" onclick="window.location.href='./'">Go Home </button><button class="btn btn-secondary" onclick="history.back()">Go Back </button></div></div></section></main><footer class="footer">Error 404 • Resource Not Found </footer><script>document.getElementById('current-url').textContent=window.location.pathname || "/"; </script></body></html>