Spaces:

SilentShado
/

anycoder-e404f3ce

Running

App Files Files Community

SilentShado commited on Feb 25

Commit

21757ae

verified ·

1 Parent(s): ca1e512

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +489 -525

index.html CHANGED Viewed

@@ -1,535 +1,499 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Project Blue | Prototype</title>
-    <style>
-        /* --- RESET & VARIABLES --- */
-        :root {
-            --bg-dark: #020617;
-            --bg-panel: #0f172a;
-            --primary: #3b82f6;
-            --primary-glow: #60a5fa;
-            --accent: #0ea5e9;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --success: #10b981;
-            --font-mono: 'Courier New', Courier, monospace;
-            --font-sans: system-ui, -apple-system, sans-serif;
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            background-color: var(--bg-dark);
-            background-image:
-                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
-                radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
-                radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
-            background-size: 100% 100%;
-            color: var(--text-main);
-            font-family: var(--font-sans);
-            height: 100vh;
-            overflow: hidden; /* App-like feel */
-            display: flex;
-            flex-direction: column;
-        }
-        /* --- HEADER --- */
-        header {
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            z-index: 10;
-        }
-        .brand {
-            font-weight: 700;
-            font-size: 1.2rem;
-            letter-spacing: -0.05em;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .brand span {
-            color: var(--primary);
-        }
-        .anycoder-link {
-            font-size: 0.85rem;
-            color: var(--text-muted);
-            text-decoration: none;
-            padding: 0.5rem 1rem;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.05);
-        }
-        .anycoder-link:hover {
-            background: var(--primary);
-            color: white;
-            border-color: var(--primary);
-            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
-        }
-        /* --- MAIN CONTAINER --- */
-        main {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 2rem;
-            position: relative;
-        }
-        /* Background Grid Animation */
-        .grid-bg {
-            position: absolute;
-            width: 200%;
-            height: 200%;
-            background-image:
-                linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
-            background-size: 40px 40px;
-            transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
-            animation: gridMove 20s linear infinite;
-            z-index: 0;
-            pointer-events: none;
-        }
-        @keyframes gridMove {
-            0% { transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px); }
-            100% { transform: perspective(500px) rotateX(60deg) translateY(40px) translateZ(-200px); }
-        }
-        /* --- THE BROWSER WINDOW SIMULATION --- */
-        .browser-mockup {
-            width: 100%;
-            max-width: 900px;
-            height: 600px;
-            background: rgba(15, 23, 42, 0.6);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            box-shadow:
-                0 25px 50px -12px rgba(0, 0, 0, 0.5),
-                0 0 0 1px rgba(255, 255, 255, 0.05);
-            display: flex;
-            flex-direction: column;
-            z-index: 1;
-            overflow: hidden;
-            animation: float 6s ease-in-out infinite;
-            position: relative;
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-15px); }
-            100% { transform: translateY(0px); }
-        }
-        /* Window Controls */
-        .window-header {
-            padding: 12px 16px;
-            background: rgba(255, 255, 255, 0.03);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .window-controls {
-            display: flex;
-            gap: 8px;
-        }
-        .dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-        }
-        .dot.red { background: #ef4444; }
-        .dot.yellow { background: #f59e0b; }
-        .dot.green { background: #10b981; }
-        .url-bar {
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 6px;
-            padding: 4px 12px;
-            font-family: var(--font-mono);
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            flex: 1;
-            max-width: 400px;
-            margin: 0 auto;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            border: 1px solid transparent;
-            transition: border 0.3s;
-        }
-        .url-bar:hover {
-            border-color: rgba(59, 130, 246, 0.3);
-        }
-        .lock-icon {
-            color: var(--success);
-        }
-        /* Content Area */
-        .window-content {
-            flex: 1;
-            padding: 2rem;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            position: relative;
-        }
-        /* Glitch Text Effect */
-        .glitch-wrapper {
-            position: relative;
-            margin-bottom: 2rem;
-        }
-        .glitch {
-            font-size: 3rem;
-            font-weight: 800;
-            text-transform: uppercase;
-            position: relative;
-            color: var(--text-main);
-            letter-spacing: 2px;
-        }
-        .glitch::before, .glitch::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-        .glitch::before {
-            left: 2px;
-            text-shadow: -1px 0 #ff00c1;
-            clip: rect(44px, 450px, 56px, 0);
-            animation: glitch-anim 5s infinite linear alternate-reverse;
-        }
-        .glitch::after {
-            left: -2px;
-            text-shadow: -1px 0 #00fff9;
-            clip: rect(44px, 450px, 56px, 0);
-            animation: glitch-anim2 5s infinite linear alternate-reverse;
-        }
-        @keyframes glitch-anim {
-            0% { clip: rect(12px, 9999px, 5px, 0); }
-            20% { clip: rect(65px, 9999px, 80px, 0); }
-            40% { clip: rect(20px, 9999px, 90px, 0); }
-            60% { clip: rect(80px, 9999px, 5px, 0); }
-            80% { clip: rect(10px, 9999px, 40px, 0); }
-            100% { clip: rect(50px, 9999px, 70px, 0); }
-        }
-        @keyframes glitch-anim2 {
-            0% { clip: rect(60px, 9999px, 10px, 0); }
-            20% { clip: rect(10px, 9999px, 50px, 0); }
-            40% { clip: rect(90px, 9999px, 20px, 0); }
-            60% { clip: rect(15px, 9999px, 80px, 0); }
-            80% { clip: rect(40px, 9999px, 30px, 0); }
-            100% { clip: rect(70px, 9999px, 10px, 0); }
-        }
-        /* Description Text */
-        .description {
-            max-width: 500px;
-            color: var(--text-muted);
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            font-size: 1rem;
-        }
-        /* Terminal / Console Box */
-        .console-box {
-            width: 100%;
-            max-width: 500px;
-            background: #000;
-            border-radius: 6px;
-            padding: 1rem;
-            text-align: left;
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            border: 1px solid #333;
-            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
-            height: 150px;
-            overflow: hidden;
-            position: relative;
-        }
-        .console-line {
-            margin-bottom: 5px;
-            opacity: 0;
-            animation: fadeIn 0.3s forwards;
-        }
-        .cursor {
-            display: inline-block;
-            width: 8px;
-            height: 15px;
-            background: var(--primary);
-            animation: blink 1s infinite;
-        }
-        @keyframes blink { 50% { opacity: 0; } }
-        @keyframes fadeIn { to { opacity: 1; } }
-        /* Progress Bar */
-        .progress-container {
-            width: 100%;
-            height: 4px;
-            background: #333;
-            border-radius: 2px;
-            margin-top: 10px;
-            overflow: hidden;
-        }
-        .progress-bar {
-            height: 100%;
-            width: 0%;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
-            transition: width 0.5s ease;
-            box-shadow: 0 0 10px var(--primary);
-        }
-        /* Interactive Elements */
-        .actions {
-            margin-top: 2rem;
-            display: flex;
-            gap: 1rem;
-        }
-        .btn {
-            padding: 0.8rem 1.5rem;
-            border: none;
-            border-radius: 6px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-            font-size: 0.9rem;
-        }
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
-        }
-        .btn-primary:hover {
-            background: var(--primary-glow);
-            transform: translateY(-2px);
-        }
-        .btn-secondary {
-            background: transparent;
-            border: 1px solid var(--text-muted);
-            color: var(--text-muted);
-        }
-        .btn-secondary:hover {
-            border-color: var(--text-main);
-            color: var(--text-main);
-        }
-        /* Footer */
-        footer {
-            padding: 1rem;
-            text-align: center;
-            font-size: 0.8rem;
-            color: rgba(255, 255, 255, 0.3);
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .browser-mockup {
-                height: 80vh;
-                width: 95%;
-            }
-            .glitch { font-size: 2rem; }
-            .window-header { padding: 8px; }
-            .url-bar { display: none; } /* Hide URL bar on mobile for space */
-        }
-    </style>
 </head>
-<body>
-    <header>
-        <div class="brand">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary);">
-                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
-                <polyline points="2 17 12 22 22 17"></polyline>
-                <polyline points="2 12 12 17 22 12"></polyline>
-            </svg>
-            BLUE<span>PROTO</span>
-        </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder
-        </a>
-    </header>
-    <main>
-        <div class="grid-bg"></div>
-        <div class="browser-mockup">
-            <div class="window-header">
-                <div class="window-controls">
-                    <div class="dot red"></div>
-                    <div class="dot yellow"></div>
-                    <div class="dot green"></div>
-                </div>
-                <div class="url-bar">
-                    <span class="lock-icon">🔒</span>
-                    <span id="url-text">local://prototype/test_env</span>
-                </div>
-                <div style="width: 40px;"></div> <!-- Spacer for balance -->
-            </div>
-            <div class="window-content">
-                <div class="glitch-wrapper">
-                    <h1 class="glitch" data-text="SYSTEM INIT">SYSTEM INIT</h1>
-                </div>
-                <p class="description">
-                    This environment is currently in <strong>alpha testing phase</strong>.
-                    We are starting small, laying the foundation for a full-scale browser engine.
-                    Watch the logs below for initialization status.
-                </p>
-                <div class="console-box" id="console">
-                    <!-- JS will populate this -->
-                    <div class="console-line"><span style="color: #60a5fa">></span> Initializing core modules...</div>
-                </div>
-                <div class="progress-container">
-                    <div class="progress-bar" id="progress-bar"></div>
-                </div>
-                <div class="actions">
-                    <button class="btn btn-primary" onclick="runTest()">Run Diagnostics</button>
-                    <button class="btn btn-secondary" onclick="resetSystem()">Reset</button>
-                </div>
-            </div>
         </div>
-    </main>
-    <footer>
-        &copy; 2023 BlueProto Project. All systems operational.
-    </footer>
-    <script>
-        const consoleBox = document.getElementById('console');
-        const progressBar = document.getElementById('progress-bar');
-        const urlText = document.getElementById('url-text');
-        const logs = [
-            { text: "Loading assets...", color: "#94a3b8" },
-            { text: "Parsing CSS rules...", color: "#94a3b8" },
-            { text: "Compiling JS modules...", color: "#94a3b8" },
-            { text: "Connecting to neural network...", color: "#f59e0b" },
-            { text: "Optimizing render pipeline...", color: "#10b981" },
-            { text: "Rendering UI components...", color: "#94a3b8" },
-            { text: "System Ready. Waiting for input.", color: "#3b82f6" }
-        ];
-        let progress = 0;
-        let isRunning = false;
-        function addLog(text, color) {
-            const line = document.createElement('div');
-            line.className = 'console-line';
-            line.innerHTML = `<span style="color: ${color || '#60a5fa'}">></span> ${text}`;
-            consoleBox.appendChild(line);
-            consoleBox.scrollTop = consoleBox.scrollHeight;
-        }
-        function runTest() {
-            if (isRunning) return;
-            isRunning = true;
-            progress = 0;
-            progressBar.style.width = '0%';
-            consoleBox.innerHTML = ''; // Clear console
-            urlText.innerText = "local://diagnostics/running";
-            let logIndex = 0;
-            const interval = setInterval(() => {
-                progress += Math.random() * 5;
-                if (progress > 100) progress = 100;
-                progressBar.style.width = `${progress}%`;
-                // Add logs based on progress
-                if (progress > (logIndex + 1) * (100 / logs.length) && logIndex < logs.length) {
-                    addLog(logs[logIndex].text, logs[logIndex].color);
-                    logIndex++;
-                }
-                if (progress >= 100) {
-                    clearInterval(interval);
-                    isRunning = false;
-                    urlText.innerText = "local://prototype/test_env";
-                    addLog("Diagnostics Complete.", "#10b981");
-                }
-            }, 200);
-        }
-        function resetSystem() {
-            consoleBox.innerHTML = '<div class="console-line"><span style="color: #ef4444">></span> System reset initiated...</div>';
-            progressBar.style.width = '0%';
-            urlText.innerText = "local://system/reset";
-            setTimeout(() => {
-                consoleBox.innerHTML = '<div class="console-line"><span style="color: #60a5fa">></span> System Ready. Waiting for input.</div>';
-                urlText.innerText = "local://prototype/test_env";
-            }, 1000);
-        }
-        // Initial startup sequence
-        window.onload = () => {
-            setTimeout(() => {
-                addLog("DOM Content Loaded", "#94a3b8");
-                setTimeout(() => {
-                    addLog("Styles applied", "#94a3b8");
-                }, 500);
-            }, 800);
-        };
-        // Dynamic URL bar effect
-        setInterval(() => {
-            if(!isRunning) {
-                const states = ["idle", "listening", "monitoring", "standby"];
-                const randomState = states[Math.floor(Math.random() * states.length)];
-                // Only update occasionally to avoid flashing
-                if(Math.random() > 0.8) {
-                   // urlText.innerText = `local://prototype/${randomState}`;
-                }
-            }
-        }, 2000);
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BlueSearch | Explore the Void</title>
+  <style>
+    /* --- RESET & VARIABLES --- */
+    :root {
+      --bg-deep: #0f172a;
+      --bg-gradient: radial-gradient(circle at top, #1e293b, #020617);
+      --primary: #3b82f6;
+      --primary-hover: #60a5fa;
+      --accent: #0ea5e9;
+      --glass: rgba(255, 255, 255, 0.05);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --font-sans: system-ui, -apple-system, sans-serif;
+      --font-mono: 'Courier New', Courier, monospace;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      background: var(--bg-deep);
+      background-image: var(--bg-gradient);
+      color: var(--text-main);
+      font-family: var(--font-sans);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow-x: hidden;
+    }
+    /* --- BACKGROUND ANIMATION --- */
+    .bg-orb {
+      position: absolute;
+      border-radius: 50%;
+      filter: blur(80px);
+      z-index: -1;
+      opacity: 0.4;
+      animation: floatOrb 10s infinite ease-in-out;
+    }
+    .orb-1 {
+      width: 300px;
+      height: 300px;
+      background: var(--primary);
+      top: -50px;
+      left: -50px;
+    }
+    .orb-2 {
+      width: 400px;
+      height: 400px;
+      background: #4f46e5;
+      bottom: -100px;
+      right: -100px;
+      animation-delay: -5s;
+    }
+    @keyframes floatOrb {
+      0%, 100% { transform: translate(0, 0); }
+      50% { transform: translate(30px, 50px); }
+    }
+    /* --- HEADER --- */
+    header {
+      padding: 1.5rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 10;
+    }
+    .brand {
+      font-weight: 800;
+      font-size: 1.5rem;
+      letter-spacing: -0.05em;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: white;
+    }
+    .brand span {
+      color: var(--primary);
+    }
+    .anycoder-link {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      padding: 0.5rem 1rem;
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      transition: all 0.3s ease;
+      background: var(--glass);
+      backdrop-filter: blur(5px);
+    }
+    .anycoder-link:hover {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+      box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+    }
+    /* --- MAIN CONTENT --- */
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      position: relative;
+      z-index: 1;
+    }
+    /* Search Container */
+    .search-container {
+      width: 100%;
+      max-width: 700px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2rem;
+    }
+    .logo-area {
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+    .logo-area h1 {
+      font-size: 4rem;
+      font-weight: 900;
+      background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 0.5rem;
+      letter-spacing: -2px;
+    }
+    .logo-area p {
+      color: var(--text-muted);
+      font-size: 1.1rem;
+    }
+    /* Search Bar Styling */
+    .search-wrapper {
+      width: 100%;
+      position: relative;
+      group: 'search';
+    }
+    .search-bar {
+      width: 100%;
+      padding: 1.2rem 1.5rem;
+      padding-right: 4rem; /* Space for button */
+      font-size: 1.1rem;
+      background: rgba(15, 23, 42, 0.6);
+      border: 1px solid var(--glass-border);
+      border-radius: 50px;
+      color: white;
+      outline: none;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(10px);
+    }
+    .search-bar:focus {
+      background: rgba(15, 23, 42, 0.9);
+      border-color: var(--primary);
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+      transform: translateY(-2px);
+    }
+    .search-btn {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: none;
+      background: var(--primary);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+    }
+    .search-btn:hover {
+      background: var(--primary-hover);
+      transform: translateY(-50%) scale(1.1);
+    }
+    .search-btn:active {
+      transform: translateY(-50%) scale(0.95);
+    }
+    /* Results Area */
+    .results-container {
+      width: 100%;
+      margin-top: 2rem;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: all 0.5s ease;
+      pointer-events: none; /* Hidden initially */
+    }
+    .results-container.active {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: all;
+    }
+    .result-stats {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-bottom: 1rem;
+      padding-left: 1rem;
+    }
+    .result-item {
+      background: var(--glass);
+      border: 1px solid var(--glass-border);
+      padding: 1.5rem;
+      border-radius: 12px;
+      margin-bottom: 1rem;
+      transition: transform 0.2s ease, background 0.2s ease;
+      cursor: pointer;
+      animation: slideIn 0.4s ease forwards;
+      opacity: 0;
+    }
+    .result-item:hover {
+      background: rgba(255, 255, 255, 0.08);
+      transform: translateX(5px);
+      border-color: rgba(59, 130, 246, 0.3);
+    }
+    .result-link {
+      color: var(--primary);
+      font-size: 0.9rem;
+      margin-bottom: 0.25rem;
+      display: block;
+      text-decoration: none;
+    }
+    .result-title {
+      color: var(--text-main);
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      display: block;
+    }
+    .result-snippet {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+      line-height: 1.5;
+    }
+    /* Loading Spinner */
+    .loader {
+      display: none;
+      width: 24px;
+      height: 24px;
+      border: 3px solid rgba(255,255,255,0.3);
+      border-radius: 50%;
+      border-top-color: #fff;
+      animation: spin 1s ease-in-out infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes slideIn {
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* Footer */
+    footer {
+      padding: 1.5rem;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      border-top: 1px solid var(--glass-border);
+      background: rgba(2, 6, 23, 0.5);
+    }
+    /* Responsive */
+    @media (max-width: 600px) {
+      .logo-area h1 { font-size: 3rem; }
+      .search-bar { padding: 1rem; font-size: 1rem; }
+      header { padding: 1rem; }
+    }
+  </style>
 </head>
+<body>
+  <!-- Background Elements -->
+  <div class="bg-orb orb-1"></div>
+  <div class="bg-orb orb-2"></div>
+  <header>
+    <div class="brand">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+      BLUE<span>SEARCH</span>
+    </div>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder
+    </a>
+  </header>
+  <main>
+    <div class="search-container">
+      <div class="logo-area">
+        <h1>BlueSearch</h1>
+        <p>Explore the digital void</p>
+      </div>
+      <div class="search-wrapper">
+        <input type="text" class="search-bar" id="searchInput" placeholder="Search for projects, ideas, or data..." autocomplete="off">
+        <button class="search-btn" id="searchBtn">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <div class="loader" id="loader"></div>
+        </button>
+      </div>
+      <div class="results-container" id="resultsContainer">
+        <div class="result-stats" id="resultStats"></div>
+        <div id="resultsList">
+          <!-- Results injected here -->
         </div>
+      </div>
+    </div>
+  </main>
+  <footer>
+    &copy; 2023 BlueSearch Engine. Privacy focused. Secure.
+  </footer>
+  <script>
+    // Mock Database for the Search Engine
+    const database = [
+      {
+        title: "Project Alpha: Neural Networks",
+        url: "https://example.com/alpha",
+        snippet: "Advanced neural network architecture designed for real-time data processing and pattern recognition in blue-themed environments."
+      },
+      {
+        title: "Blue Ocean Strategy",
+        url: "https://example.com/strategy",
+        snippet: "A marketing metaphor that refers to the creation of a new market space, or 'Blue Ocean', rather than competing in an existing industry."
+      },
+      {
+        title: "CSS Grid & Flexbox Mastery",
+        url: "https://example.com/css-guide",
+        snippet: "The ultimate guide to modern CSS layout techniques. Learn how to build responsive grids without frameworks."
+      },
+      {
+        title: "JavaScript ES6+ Features",
+        url: "https://example.com/js-es6",
+        snippet: "Explore arrow functions, destructuring, template literals, and promises. Modernize your codebase today."
+      },
+      {
+        title: "Cybersecurity Protocols 2024",
+        url: "https://example.com/security",
+        snippet: "New standards for encryption and data protection. Essential reading for system administrators."
+      },
+      {
+        title: "The History of the Internet",
+        url: "https://example.com/history",
+        snippet: "From ARPANET to the World Wide Web. A comprehensive timeline of the digital revolution."
+      },
+      {
+        title: "Minimalist UI Design Principles",
+        url: "https://example.com/ui-design",
+        snippet: "Less is more. How to create stunning user interfaces using whitespace, typography, and color theory."
+      },
+      {
+        title: "Quantum Computing Basics",
+        url: "https://example.com/quantum",
+        snippet: "Understanding qubits, superposition, and entanglement. The future of computing is here."
+      }
+    ];
+    const searchInput = document.getElementById('searchInput');
+    const searchBtn = document.getElementById('searchBtn');
+    const resultsContainer = document.getElementById('resultsContainer');
+    const resultsList = document.getElementById('resultsList');
+    const resultStats = document.getElementById('resultStats');
+    const loader = document.getElementById('loader');
+    const searchIcon = searchBtn.querySelector('svg');
+    // Function to perform search
+    function performSearch() {
+      const query = searchInput.value.toLowerCase().trim();
+      if (!query) return;
+      // UI State: Loading
+      searchIcon.style.display = 'none';
+      loader.style.display = 'block';
+      resultsContainer.classList.remove('active');
+      resultsList.innerHTML = '';
+      // Simulate network delay
+      setTimeout(() => {
+        // Filter database
+        const results = database.filter(item =>
+          item.title.toLowerCase().includes(query) ||
+          item.snippet.toLowerCase().includes(query)
+        );
+        // UI State: Results
+        loader.style.display = 'none';
+        searchIcon.style.display = 'block';
+        if (results.length > 0) {
+          resultStats.textContent = `About ${results.length} results found (0.42 seconds)`;
+          results.forEach((item, index) => {
+            const resultHTML = `
+              <div class="result-item" style="animation-delay: ${index * 0.1}s">
+                <a href="${item.url}" class="result-link">${item.url}</a>
+                <a href="${item.url}" class="result-title">${highlightMatch(item.title, query)}</a>
+                <p class="result-snippet">${highlightMatch(item.snippet, query)}</p>
+              </div>
+            `;
+            resultsList.innerHTML += resultHTML;
+          });
+        } else {
+          resultStats.textContent = `No results found for "${query}"`;
+          resultsList.innerHTML = `
+            <div class="result-item">
+              <p class="result-snippet">Try searching for "CSS", "Blue", "JavaScript", or "Security".</p>
+            </div>
+          `;
+        }
+        resultsContainer.classList.add('active');
+      }, 600); // 600ms simulated delay
+    }
+    // Helper to highlight search terms
+    function highlightMatch(text, query) {
+      const regex = new RegExp(`(${query})`, 'gi');
+      return text.replace(regex, '<span style="color: var(--primary-hover); font-weight:bold;">$1</span>');
+    }
+    // Event Listeners
+    searchBtn.addEventListener('click', performSearch);
+    searchInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        performSearch();
+      }
+    });
+    // Optional: Real-time search as you type (debounced)
+    let timeout = null;
+    searchInput.addEventListener('input', () => {
+      clearTimeout(timeout);
+      if(searchInput.value.length > 0) {
+        timeout = setTimeout(performSearch, 800);
+      } else {
+        resultsContainer.classList.remove('active');
+      }
+    });
+  </script>
 </body>
 </html>