+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Page Not Found (404) — ColorPickUp</title><meta name="description" content="The page you are looking for does not exist. Return to the ColorPickUp workspace."><meta name="robots" content="noindex, follow"><meta property="og:type" content="website"><meta property="og:title" content="Page Not Found (404) — ColorPickUp"><meta property="og:description" content="The page you are looking for does not exist. Return to the ColorPickUp workspace."><meta property="og:image" content="./src/social-.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Page Not Found (404) — ColorPickUp"><meta name="twitter:description" content="The page you are looking for does not exist. Return to the ColorPickUp workspace."><meta name="twitter:image" content="./src/social-.png"><style>:root{ --primary: #2563eb; --primary-light: #eff6ff; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --radius: 18px; --shadow: 0 15px 40px rgba(15, 23, 42, .08); --container: 1180px; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;} *{ margin: 0; padding: 0; box-sizing: border-box;} body{ background: radial-gradient(circle at top right, #dbeafe 0%, transparent 35%), #fff; color: var(--text); font-size: 15px; line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column;} .icon{ width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none;} header{ position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border);} .navbar{ max-width: var(--container); height: 72px; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 30px;} .logo{ display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 800; text-decoration: none; color: var(--text);} .logo-icon{ width: 42px; height: 42px; object-fit: contain;} .nav-links{ display: flex; gap: 10px;} .nav-links a{ text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 600; color: var(--muted); transition: .25s;} .nav-links a:hover{ background: var(--primary-light); color: var(--primary);} main{ flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 30px;} .error-card{ max-width: 520px; width: 100%; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 50px 40px;} .art-container{ position: relative; width: 140px; height: 140px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center;} .error-code{ position: absolute; font-size: 32px; font-weight: 800; color: var(--text); z-index: 2;} .color-wheel{ width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7, #ef4444); mask: radial-gradient(circle, transparent 40%, black 40%); -webkit-mask: radial-gradient(circle, transparent 40%, black 40%); opacity: 0.15; animation: rotateWheel 25s linear infinite;} @keyframes rotateWheel{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);}} h1{ font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; line-height: 1.2;} p{ color: var(--muted); font-size: 16px; margin-bottom: 30px;} .btn-group{ display: flex; flex-direction: column; gap: 12px;} .primary-btn{ display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 12px; font-weight: 600; transition: .2s;} .primary-btn:hover{ background: var(--primary-hover);} .secondary-btn{ display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text); text-decoration: none; padding: 11px 24px; border-radius: 12px; font-weight: 600; transition: .2s;} .secondary-btn:hover{ background: var(--primary-light); border-color: var(--primary); color: var(--primary);} footer{ border-top: 1px solid var(--border); padding: 24px; text-align: center; color: var(--muted); font-size: 14px;} @media(max-width: 600px){ .nav-links{ display: none;} .error-card{ padding: 40px 24px;}} </style></head><body><header><nav class="navbar"><a href="./" class="logo"><img class="logo-icon" src="./src/512.png" alt="ColorPickUp Logo">ColorPickUp </a><div class="nav-links"><a href="./">Quick Start</a><a href="./demos/">Demos</a><a href="./setup/">Sandbox Builder</a><a href="./config/">Schema & Events</a></div></nav></header><main><div class="error-card"><div class="art-container"><div class="error-code">404</div><div class="color-wheel"></div></div><h1>Color Space Error</h1><p>The system parameters for this target resource could not be loaded or parsed correctly.</p><div class="btn-group"><a href="./" class="primary-btn">Return to Workspace</a><a href="./setup/" class="secondary-btn">Interactive Sandbox</a></div></div></main><footer>© <span id="year">2026</span> <a style="color: var(--primary);text-decoration: none;" href="https://MainRoute-Core.github.io">MainRoute Core</a>• All Rights Reserved. • <a style="color: var(--primary);text-decoration: none;" href="https://Pro-Bandey.github.io">Pro Bandey</a></footer><script>document.getElementById('year').textContent=new Date().getFullYear(); </script></body></html>
0 commit comments