Update index.html

index.html

@@ -5,940 +5,408 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CodeForge · AI Code Generator</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Space+Grotesk:wght@400;600&display=swap');
+
+        :root {
+            --accent: #ff8c00;
+            --accent-dim: rgba(255,140,0,0.15);
+            --accent-glow: rgba(255,140,0,0.5);
+            --bg: #09090e;
+            --surface: rgba(255,255,255,0.03);
+            --border: rgba(255,140,0,0.12);
+            --text: #d8d8d8;
+            --muted: rgba(255,255,255,0.25);
         }
 
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
-            background: #0a0a0f;
-            font-family: 'Courier New', monospace;
-            color: #e0e0e0;
+            background: var(--bg);
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--text);
             min-height: 100vh;
+            overflow-x: hidden;
         }
 
-        /* Animated grid background */
         .grid-bg {
             position: fixed;
             inset: 0;
-            background-image: linear-gradient(rgba(255,140,0,0.03) 1px, transparent 1px),
-                              linear-gradient(90deg, rgba(255,140,0,0.03) 1px, transparent 1px);
-            background-size: 50px 50px;
+            background-image:
+                linear-gradient(rgba(255,140,0,0.025) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,140,0,0.025) 1px, transparent 1px);
+            background-size: 48px 48px;
             pointer-events: none;
             z-index: 0;
         }
-
-        /* Glow orbs */
-        .glow-orb {
+        .orb {
             position: fixed;
             border-radius: 50%;
-            background: radial-gradient(circle, rgba(255,140,0,0.08) 0%, transparent 70%);
             pointer-events: none;
             z-index: 0;
+            background: radial-gradient(circle, rgba(255,140,0,0.07) 0%, transparent 70%);
         }
-        .orb1 { top: 20%; left: 10%; width: 400px; height: 400px; }
-        .orb2 { bottom: 20%; right: 10%; width: 350px; height: 350px; }
-        .orb3 { top: 50%; right: 30%; width: 250px; height: 250px; }
+        .orb1 { top: 10%; left: 5%;  width: 500px; height: 500px; }
+        .orb2 { bottom: 10%; right: 5%; width: 400px; height: 400px; }
 
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-            padding: 20px;
+        .shell {
             position: relative;
             z-index: 1;
+            display: flex;
+            flex-direction: column;
+            height: 100dvh;
+            max-width: 920px;
+            margin: 0 auto;
+            padding: 0 16px;
         }
 
-        /* Header */
         .header {
-            text-align: center;
-            padding: 30px 0 20px;
-            border-bottom: 1px solid rgba(255, 140, 0, 0.15);
-            margin-bottom: 30px;
-        }
-
-        .logo {
-            font-size: 72px;
-            color: #ff8c00;
-            filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.6));
-            animation: glow 2s ease-in-out infinite;
-            display: inline-block;
-        }
-
-        @keyframes glow {
-            0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5)); transform: scale(1); }
-            50% { filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.9)); transform: scale(1.02); }
-        }
-
-        h1 {
-            font-size: 32px;
-            color: #ff8c00;
-            letter-spacing: 10px;
-            margin: 10px 0 5px;
-            font-weight: 900;
-        }
-
-        .subtitle {
-            color: rgba(255, 140, 0, 0.5);
-            letter-spacing: 5px;
-            font-size: 11px;
-        }
-
-        /* Password Box */
-        .password-box {
-            background: rgba(255, 140, 0, 0.04);
-            border: 1px solid rgba(255, 140, 0, 0.15);
-            border-radius: 4px;
-            padding: 45px;
-            max-width: 420px;
-            margin: 60px auto;
-            backdrop-filter: blur(10px);
-            text-align: center;
-        }
-
-        .password-box input {
-            width: 100%;
-            padding: 14px 16px;
-            background: rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 140, 0, 0.2);
-            border-radius: 2px;
-            color: #ff8c00;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            letter-spacing: 3px;
-            margin: 25px 0;
-            outline: none;
-            transition: all 0.2s;
-            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 14px 0 12px;
+            border-bottom: 1px solid var(--border);
+            flex-shrink: 0;
+        }
+        .header-left { display: flex; align-items: center; gap: 12px; }
+        .logo-icon {
+            font-size: 26px;
+            color: var(--accent);
+            animation: logoPulse 3s ease-in-out infinite;
+            line-height: 1;
+        }
+        @keyframes logoPulse {
+            0%,100% { filter: drop-shadow(0 0 6px var(--accent-glow)); }
+            50%      { filter: drop-shadow(0 0 18px var(--accent-glow)); }
+        }
+        .header h1 {
+            font-size: 17px;
+            font-weight: 800;
+            color: var(--accent);
+            letter-spacing: 6px;
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
-
-        .password-box input:focus {
-            border-color: rgba(255, 140, 0, 0.6);
-            box-shadow: 0 0 15px rgba(255, 140, 0, 0.1);
+        .stat-pill {
+            background: var(--accent-dim);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            color: rgba(255,140,0,0.7);
+            font-size: 10px;
+            letter-spacing: 1px;
+            padding: 4px 10px;
         }
 
-        /* Buttons */
         button {
-            background: #ff8c00;
-            color: #0a0a0f;
-            padding: 12px 28px;
-            border: none;
-            font-weight: 900;
+            font-family: 'JetBrains Mono', monospace;
             cursor: pointer;
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            letter-spacing: 3px;
-            transition: all 0.2s;
-            border-radius: 2px;
+            border: none;
+            border-radius: 3px;
+            transition: all 0.18s;
         }
-
-        button:hover:not(:disabled) {
+        .btn-primary {
+            background: var(--accent);
+            color: #0a0a0f;
+            font-weight: 800;
+            font-size: 11px;
+            letter-spacing: 2px;
+            padding: 10px 22px;
+        }
+        .btn-primary:hover:not(:disabled) {
             background: #ffaa33;
-            box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
+            box-shadow: 0 0 18px var(--accent-glow);
             transform: translateY(-1px);
         }
+        .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
 
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .btn-secondary {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.06);
-            color: rgba(255, 255, 255, 0.5);
-            letter-spacing: 2px;
-        }
-
-        .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.08);
-            box-shadow: none;
+        .btn-ghost {
+            background: var(--surface);
+            border: 1px solid rgba(255,255,255,0.07);
+            color: var(--muted);
+            font-size: 10px;
+            letter-spacing: 1.5px;
+            padding: 8px 14px;
         }
+        .btn-ghost:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
 
-        .btn-danger {
-            background: rgba(255, 60, 60, 0.1);
-            border: 1px solid rgba(255, 60, 60, 0.2);
-            color: rgba(255, 100, 100, 0.8);
+        .btn-copy {
+            background: rgba(255,140,0,0.08);
+            border: 1px solid rgba(255,140,0,0.2);
+            color: rgba(255,140,0,0.7);
+            font-size: 9px;
+            letter-spacing: 1px;
+            padding: 4px 10px;
         }
-
-        .btn-danger:hover {
-            background: rgba(255, 60, 60, 0.2);
-            box-shadow: none;
+        .btn-copy:hover { background: rgba(255,140,0,0.18); color: var(--accent); }
+        .btn-copy.copied {
+            background: rgba(80,220,100,0.1);
+            border-color: rgba(80,220,100,0.3);
+            color: rgba(80,220,100,0.9);
         }
 
-        /* Language Bar */
-        .language-bar {
-            position: sticky;
-            top: 0;
-            background: rgba(10, 10, 15, 0.95);
-            backdrop-filter: blur(12px);
-            padding: 12px 0;
-            margin-bottom: 25px;
-            border-bottom: 1px solid rgba(255, 140, 0, 0.08);
-            border-top: 1px solid rgba(255, 140, 0, 0.08);
-            z-index: 10;
+        .lang-bar {
+            flex-shrink: 0;
+            padding: 10px 0;
+            border-bottom: 1px solid rgba(255,140,0,0.07);
+            overflow-x: auto;
+            scrollbar-width: none;
         }
-
-        .lang-buttons {
+        .lang-bar::-webkit-scrollbar { display: none; }
+        .lang-inner {
             display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            justify-content: center;
+            gap: 6px;
+            white-space: nowrap;
         }
-
         .lang-btn {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.06);
-            color: rgba(255, 255, 255, 0.4);
-            padding: 6px 16px;
-            font-size: 11px;
-            letter-spacing: 1px;
-            width: auto;
+            background: var(--surface);
+            border: 1px solid rgba(255,255,255,0.06);
+            color: rgba(255,255,255,0.35);
+            font-size: 10px;
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: 0.5px;
+            padding: 5px 13px;
+            border-radius: 2px;
+            transition: all 0.15s;
         }
-
+        .lang-btn:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
         .lang-btn.active {
-            background: rgba(255, 140, 0, 0.15);
-            border-color: rgba(255, 140, 0, 0.4);
-            color: #ff8c00;
+            background: var(--accent-dim);
+            border-color: rgba(255,140,0,0.35);
+            color: var(--accent);
             font-weight: 700;
         }
 
-        /* Stats */
-        .stats {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.2);
-            font-size: 10px;
-            letter-spacing: 2px;
-            margin: 15px 0;
-        }
-
-        /* Example Buttons */
         .examples {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            justify-content: center;
-            margin: 20px 0 25px;
+            flex-shrink: 0;
+            padding: 10px 0;
+            overflow-x: auto;
+            scrollbar-width: none;
         }
-
-        .example-btn {
-            background: rgba(255, 140, 0, 0.05);
-            border: 1px solid rgba(255, 140, 0, 0.15);
-            color: rgba(255, 140, 0, 0.6);
-            padding: 8px 16px;
-            font-size: 11px;
-            width: auto;
-            letter-spacing: 0.5px;
+        .examples::-webkit-scrollbar { display: none; }
+        .examples-inner {
+            display: flex;
+            gap: 7px;
+            white-space: nowrap;
         }
-
-        .example-btn:hover {
-            background: rgba(255, 140, 0, 0.1);
-            color: #ff8c00;
-            box-shadow: none;
-            transform: none;
+        .ex-btn {
+            background: rgba(255,140,0,0.04);
+            border: 1px solid rgba(255,140,0,0.13);
+            color: rgba(255,140,0,0.55);
+            font-size: 10px;
+            font-family: 'JetBrains Mono', monospace;
+            padding: 6px 13px;
+            border-radius: 2px;
+            transition: all 0.15s;
         }
+        .ex-btn:hover { background: rgba(255,140,0,0.1); color: var(--accent); }
 
-        /* Chat Area */
         .chat-area {
-            margin: 20px 0;
-            max-height: 480px;
+            flex: 1;
             overflow-y: auto;
-            padding: 10px;
+            padding: 16px 4px;
+            scroll-behavior: smooth;
         }
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            gap: 12px;
+            color: rgba(255,255,255,0.1);
+            font-size: 12px;
+            letter-spacing: 2px;
+            text-align: center;
+        }
+        .empty-state .big { font-size: 40px; opacity: 0.15; }
 
         .message {
-            margin: 18px 0;
-            padding: 14px 18px;
-            border-radius: 8px;
-            animation: slideIn 0.3s ease;
+            display: flex;
+            gap: 10px;
+            margin-bottom: 16px;
+            animation: msgIn 0.28s ease forwards;
         }
-
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(15px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        @keyframes msgIn {
+            from { opacity: 0; transform: translateY(12px); }
+            to   { opacity: 1; transform: translateY(0); }
         }
+        .message.user { flex-direction: row-reverse; }
 
-        .user-message {
-            background: rgba(255, 140, 0, 0.08);
-            border: 1px solid rgba(255, 140, 0, 0.2);
-            color: #ffb347;
-            text-align: right;
-            border-radius: 8px 2px 8px 8px;
+        .avatar {
+            flex-shrink: 0;
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            font-weight: 700;
         }
-
-        .assistant-message {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            color: #c8c8c8;
-            border-radius: 2px 8px 8px 8px;
+        .message.user .avatar {
+            background: rgba(255,140,0,0.12);
+            border: 1px solid rgba(255,140,0,0.25);
+            color: var(--accent);
         }
-
-        .message-avatar {
-            display: inline-block;
-            width: 34px;
-            height: 34px;
-            border-radius: 2px;
-            background: rgba(255, 140, 0, 0.1);
-            border: 1px solid rgba(255, 140, 0, 0.3);
-            text-align: center;
-            line-height: 32px;
-            margin-right: 12px;
-            font-size: 13px;
-            font-weight: bold;
+        .message.assistant .avatar {
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.08);
+            color: rgba(255,255,255,0.4);
         }
 
-        /* Code Blocks */
-        pre {
-            background: rgba(0, 0, 0, 0.6);
-            padding: 16px;
-            overflow-x: auto;
-            margin: 12px 0;
+        .bubble {
+            max-width: 82%;
+            padding: 12px 14px;
             border-radius: 4px;
-            border: 1px solid rgba(255, 140, 0, 0.12);
             font-size: 13px;
-            line-height: 1.6;
+            line-height: 1.65;
+            word-break: break-word;
         }
-
-        code {
-            font-family: 'Courier New', monospace;
-            color: #d4d4d4;
+        .message.user .bubble {
+            background: rgba(255,140,0,0.08);
+            border: 1px solid rgba(255,140,0,0.18);
+            color: #ffb347;
+            border-radius: 6px 2px 6px 6px;
         }
-
-        /* Input Area */
-        .input-area {
-            position: sticky;
-            bottom: 0;
-            background: rgba(10, 10, 15, 0.98);
-            backdrop-filter: blur(16px);
-            padding: 20px 0;
-            border-top: 1px solid rgba(255, 140, 0, 0.1);
-            margin-top: 20px;
+        .message.assistant .bubble {
+            background: rgba(255,255,255,0.025);
+            border: 1px solid rgba(255,255,255,0.06);
+            color: #ccc;
+            border-radius: 2px 6px 6px 6px;
         }
 
-        textarea {
-            width: 100%;
-            padding: 14px 18px;
-            background: rgba(255, 255, 255, 0.04);
-            border: 1px solid rgba(255, 140, 0, 0.15);
+        .code-block {
+            margin: 12px 0;
             border-radius: 4px;
-            color: #e0e0e0;
-            font-family: Georgia, serif;
-            font-size: 14px;
-            line-height: 1.6;
-            resize: vertical;
-            margin: 10px 0;
-            outline: none;
-            transition: all 0.2s;
+            overflow: hidden;
+            border: 1px solid rgba(255,140,0,0.14);
         }
-
-        textarea:focus {
-            border-color: rgba(255, 140, 0, 0.4);
-            box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.05);
-        }
-
-        .button-group {
+        .code-header {
             display: flex;
-            gap: 12px;
-            margin-top: 10px;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(0,0,0,0.5);
+            padding: 7px 12px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
         }
-
-        .button-group button {
-            flex: 1;
+        .code-lang {
+            font-size: 10px;
+            font-weight: 700;
+            color: var(--accent);
+            letter-spacing: 2px;
+            text-transform: uppercase;
         }
-
-        /* Typing Indicator */
-        .typing-indicator {
-            display: inline-flex;
-            gap: 5px;
-            align-items: center;
-            padding: 8px 0;
+        .code-block pre {
+            background: rgba(0,0,0,0.55);
+            padding: 14px 16px;
+            overflow-x: auto;
+            margin: 0;
         }
-
-        .typing-dot {
-            width: 7px;
-            height: 7px;
-            background: #ff8c00;
-            border-radius: 50%;
-            animation: pulse 1.2s ease-in-out infinite;
+        .code-block pre code {
+            color: #d4d4d4;
+            font-size: 12.5px;
+            line-height: 1.65;
         }
 
-        @keyframes pulse {
-            0%, 100% { opacity: 0.2; transform: scale(0.8); }
-            50% { opacity: 1; transform: scale(1.2); }
-        }
+        .typing-wrap { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
+        .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: dotPop 1.1s ease-in-out infinite; }
+        .dot:nth-child(2) { animation-delay: 0.18s; }
+        .dot:nth-child(3) { animation-delay: 0.36s; }
+        @keyframes dotPop { 0%,100% { opacity: 0.2; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.25); } }
 
-        /* Footer */
-        .footer {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.06);
-            font-size: 9px;
-            letter-spacing: 2px;
-            margin-top: 20px;
-            padding: 15px;
+        .input-area { flex-shrink: 0; padding: 12px 0 16px; border-top: 1px solid rgba(255,140,0,0.09); }
+        textarea {
+            width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,140,0,0.15);
+            border-radius: 4px; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; font-size: 13px;
+            line-height: 1.6; resize: none; outline: none; min-height: 60px; max-height: 160px;
         }
 
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
-        }
-        ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.02);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 140, 0, 0.3);
-            border-radius: 3px;
-        }
+        .gate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; z-index: 1; }
+        .gate-card { background: rgba(255,140,0,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 40px; max-width: 380px; width: 90%; text-align: center; backdrop-filter: blur(12px); }
+        .gate-title { font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: 8px; margin-bottom: 28px; }
+        .gate-input { width: 100%; padding: 13px 16px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,140,0,0.2); border-radius: 3px; color: var(--accent); font-family: 'JetBrains Mono', monospace; letter-spacing: 4px; text-align: center; outline: none; margin-bottom: 18px; }
+        .gate-error { color: #ff6b6b; font-size: 11px; min-height: 16px; margin-top: 10px; }
 
-        /* Mobile Responsive */
-        @media (max-width: 768px) {
-            .container {
-                padding: 12px;
-            }
-            h1 {
-                font-size: 22px;
-                letter-spacing: 5px;
-            }
-            .logo {
-                font-size: 52px;
-            }
-            .password-box {
-                padding: 25px;
-                margin: 30px auto;
-            }
-            .lang-btn {
-                padding: 4px 10px;
-                font-size: 9px;
-            }
-        }
+        @media (max-width: 600px) { .header h1 { font-size: 13px; letter-spacing: 4px; } .bubble { max-width: 92%; } }
     </style>
 </head>
 <body>
-<div class="grid-bg"></div>
-<div class="glow-orb orb1"></div>
-<div class="glow-orb orb2"></div>
-<div class="glow-orb orb3"></div>
-
-<div class="container" id="app"></div>
-
-<script>
-    // ========== CONFIGURATION ==========
-    const PASSWORD = "CodeForge#2026";
-    
-    const LANGUAGES = [
-        { id: "auto", label: "✦ Auto Detect", short: "Auto" },
-        { id: "javascript", label: "JS JavaScript", short: "JS" },
-        { id: "typescript", label: "🔧 TypeScript", short: "TS" },
-        { id: "python", label: "🐍 Python", short: "PY" },
-        { id: "html", label: "🌐 HTML/CSS", short: "HTML" },
-        { id: "react", label: "⚛️ React JSX", short: "React" },
-        { id: "sql", label: "🗄️ SQL", short: "SQL" },
-        { id: "bash", label: "🐚 Bash/Shell", short: "Bash" },
-        { id: "rust", label: "🦀 Rust", short: "Rust" },
-        { id: "go", label: "🐹 Go", short: "Go" },
-        { id: "java", label: "☕ Java", short: "Java" },
-        { id: "cpp", label: "⚡ C++", short: "C++" }
-    ];
-    
-    const EXAMPLES = [
-        "Build a REST API with authentication",
-        "Create a responsive navbar component",
-        "Write a binary search algorithm",
-        "Make a SQL query for user analytics",
-        "Build a Python web scraper",
-        "Create a React counter component"
-    ];
-
-    // ========== APP STATE ==========
-    let state = {
-        unlocked: false,
-        messages: [],
-        selectedLang: "auto",
-        promptCount: 0,
-        loading: false
-    };
-
-    // ========== AI RESPONSE GENERATOR ==========
-    async function generateResponse(prompt, language) {
-        await new Promise(resolve => setTimeout(resolve, 900 + Math.random() * 400));
-        
-        const p = prompt.toLowerCase();
-        let code = "", explanation = "";
-        let detectedLang = language !== "auto" ? language : "javascript";
-        
-        // REST API
-        if (p.includes("rest api") || p.includes("api with auth") || (p.includes("rest") && p.includes("api"))) {
-            code = `const express = require('express');
-const jwt = require('jsonwebtoken');
-const app = express();
-
-app.use(express.json());
-
-// Auth middleware
-function authenticateToken(req, res, next) {
-    const authHeader = req.headers['authorization'];
-    const token = authHeader && authHeader.split(' ')[1];
-    if (!token) return res.sendStatus(401);
-    
-    jwt.verify(token, 'secret-key', (err, user) => {
-        if (err) return res.sendStatus(403);
-        req.user = user;
-        next();
-    });
-}
-
-// Login endpoint
-app.post('/login', (req, res) => {
-    const { username } = req.body;
-    const token = jwt.sign({ username }, 'secret-key', { expiresIn: '1h' });
-    res.json({ token });
-});
-
-// Protected route
-app.get('/protected', authenticateToken, (req, res) => {
-    res.json({ message: 'Access granted', user: req.user });
-});
-
-app.listen(3000, () => console.log('Server running on port 3000'));`;
-            explanation = "✅ **REST API with JWT Authentication** - Complete Express.js implementation";
-            detectedLang = "javascript";
-        }
-        // Navbar
-        else if (p.includes("navbar") || p.includes("nav bar") || p.includes("responsive nav")) {
-            code = `<nav class="navbar">
-    <div class="logo">⟨/⟩ CodeForge</div>
-    <ul class="nav-links">
-        <li><a href="#home">Home</a></li>
-        <li><a href="#features">Features</a></li>
-        <li><a href="#pricing">Pricing</a></li>
-        <li><a href="#contact">Contact</a></li>
-    </ul>
-    <div class="burger" onclick="toggleMenu()">☰</div>
-</nav>
-
-<style>
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: linear-gradient(135deg, #1a1a2e, #16213e);
-    padding: 1rem 2rem;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-}
-.logo {
-    color: #ff8c00;
-    font-size: 1.5rem;
-    font-weight: bold;
-}
-.nav-links {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
-}
-.nav-links a {
-    color: white;
-    text-decoration: none;
-    transition: color 0.3s;
-}
-.nav-links a:hover { color: #ff8c00; }
-.burger {
-    display: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: white;
-}
-@media (max-width: 768px) {
-    .nav-links {
-        display: none;
-        position: absolute;
-        top: 70px;
-        left: 0;
-        width: 100%;
-        background: #1a1a2e;
-        flex-direction: column;
-        text-align: center;
-        padding: 1rem;
-    }
-    .nav-links.active { display: flex; }
-    .burger { display: block; }
-}
-</style>
-<script>
-function toggleMenu() {
-    document.querySelector('.nav-links').classList.toggle('active');
-}
-</script>`;
-            explanation = "🎨 **Responsive Navbar Component** - Mobile-friendly with hamburger menu";
-            detectedLang = "html";
-        }
-        // Binary Search
-        else if (p.includes("binary search") || p.includes("search algorithm")) {
-            code = `function binarySearch(arr, target) {
-    let left = 0;
-    let right = arr.length - 1;
-    
-    while (left <= right) {
-        const mid = Math.floor((left + right) / 2);
-        
-        if (arr[mid] === target) return mid;
-        if (arr[mid] < target) left = mid + 1;
-        else right = mid - 1;
-    }
-    return -1;
-}
-
-// Example
-const arr = [2, 5, 8, 12, 16, 23, 38, 56];
-const target = 23;
-const result = binarySearch(arr, target);
-console.log(\`Element found at index: \${result}\`);`;
-            explanation = "🔍 **Binary Search Algorithm** - O(log n) time complexity";
-            detectedLang = "javascript";
-        }
-        // SQL Query
-        else if (p.includes("sql") || p.includes("query") || p.includes("analytics")) {
-            code = `SELECT 
-    u.country,
-    u.user_segment,
-    COUNT(DISTINCT u.user_id) AS total_users,
-    AVG(s.session_duration) AS avg_session_minutes,
-    SUM(s.pages_viewed) AS total_pageviews,
-    COUNT(DISTINCT DATE(s.session_date)) AS active_days
-FROM users u
-LEFT JOIN sessions s ON u.user_id = s.user_id
-WHERE s.session_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
-    AND u.status = 'active'
-GROUP BY u.country, u.user_segment
-HAVING total_users > 5
-ORDER BY total_users DESC, avg_session_minutes DESC
-LIMIT 20;`;
-            explanation = "📊 **Advanced SQL Analytics Query** - User engagement metrics";
-            detectedLang = "sql";
-        }
-        // Python Scraper
-        else if (p.includes("scraper") || (p.includes("python") && p.includes("scrape"))) {
-            code = `import requests
-from bs4 import BeautifulSoup
-import time
-
-def scrape_website(url, max_pages=5):
-    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'}
-    results = []
-    
-    for page in range(1, max_pages + 1):
-        try:
-            page_url = f"{url}?page={page}" if page > 1 else url
-            response = requests.get(page_url, headers=headers, timeout=10)
-            response.raise_for_status()
-            
-            soup = BeautifulSoup(response.text, 'html.parser')
-            
-            for item in soup.select('.item'):
-                results.append({
-                    'title': item.select_one('.title')?.text or 'N/A',
-                    'price': item.select_one('.price')?.text or 'N/A',
-                })
-            
-            time.sleep(1)  # Be respectful
-        except Exception as e:
-            print(f"Error: {e}")
-            continue
-    
-    return results
-
-if __name__ == '__main__':
-    data = scrape_website('https://example.com')
-    print(f"Scraped {len(data)} items");`;
-            explanation = "🕷️ **Python Web Scraper** - Production-ready with rate limiting";
-            detectedLang = "python";
-        }
-        // React Counter
-        else if (p.includes("react counter") || (p.includes("react") && p.includes("counter"))) {
-            code = `import React, { useState } from 'react';
-
-const Counter = ({ initialValue = 0, step = 1 }) => {
-    const [count, setCount] = useState(initialValue);
-    const [history, setHistory] = useState([initialValue]);
-    
-    const increment = () => {
-        const newCount = count + step;
-        setCount(newCount);
-        setHistory([...history, newCount]);
-    };
-    
-    const decrement = () => {
-        const newCount = count - step;
-        setCount(newCount);
-        setHistory([...history, newCount]);
-    };
-    
-    const reset = () => {
-        setCount(initialValue);
-        setHistory([initialValue]);
-    };
-    
-    return (
-        <div style={{ textAlign: 'center', padding: '20px', background: 'linear-gradient(135deg, #667eea, #764ba2)', borderRadius: '10px' }}>
-            <h2>Counter: {count}</h2>
-            <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
-                <button onClick={decrement} style={{ padding: '10px 20px' }}>-{step}</button>
-                <button onClick={reset} style={{ padding: '10px 20px' }}>Reset</button>
-                <button onClick={increment} style={{ padding: '10px 20px' }}>+{step}</button>
-            </div>
-            <div style={{ marginTop: '15px' }}>
-                <strong>History:</strong> {history.slice(-5).join(' → ')}
-            </div>
-        </div>
-    );
-};
-
-export default Counter;`;
-            explanation = "⚛️ **React Counter Component** - With history tracking";
-            detectedLang = "react";
-        }
-        // Default
-        else {
-            code = `// CodeForge AI Response for: ${prompt.substring(0, 60)}${prompt.length > 60 ? '...' : ''}
-// Language: ${detectedLang.toUpperCase()}
-
-function solveChallenge(input) {
-    // TODO: Implement your specific logic here
-    
-    if (!input) {
-        throw new Error('Input is required');
-    }
-    
-    // Process the data
-    const result = processData(input);
-    
-    return {
-        success: true,
-        data: result,
-        timestamp: new Date().toISOString()
-    };
-}
-
-function processData(data) {
-    // Add your custom processing logic
-    return data;
-}
-
-// Example usage
-const testInput = { example: 'test value' };
-const output = solveChallenge(testInput);
-console.log(output);
+    <div class="grid-bg"></div>
+    <div class="orb orb1"></div>
+    <div class="orb orb2"></div>
+    <div id="root"></div>
+
+    <script>
+        const PASSWORD = "CodeForge#2026";
+        const LANGUAGES = [
+            { id: "auto", label: "✦ Auto" },
+            { id: "javascript", label: "JS" },
+            { id: "python", label: "Python" },
+            { id: "html", label: "HTML/CSS" }
+        ];
+
+        const state = { unlocked: false, messages: [], lang: "auto", count: 0, loading: false };
+
+        function escHtml(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
+
+        function renderMarkdown(text) {
+            let result = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
+                return `<div class="code-block"><div class="code-header"><span class="code-lang">${lang || 'code'}</span><button class="btn-copy" onclick="copyCode(this)">⎘ COPY</button></div><pre><code>${escHtml(code.trim())}</code></pre></div>`;
+            });
+            return result.replace(/\n/g, "<br>");
+        }
+
+        window.copyCode = async (btn) => {
+            const code = btn.closest(".code-block").querySelector("code").innerText;
+            await navigator.clipboard.writeText(code);
+            btn.textContent = "✓ COPIED";
+            setTimeout(() => btn.textContent = "⎘ COPY", 2000);
+        };
+
+        function render() {
+            const root = document.getElementById("root");
+            if (!state.unlocked) {
+                root.innerHTML = `<div class="gate"><div class="gate-card"><div class="gate-title">CODEFORGE</div><input class="gate-input" id="pwInput" type="password" placeholder="••••" onkeydown="if(event.key==='Enter') tryUnlock()"><button class="btn-primary" style="width:100%" onclick="tryUnlock()">UNLOCK →</button><div class="gate-error" id="gateErr"></div></div></div>`;
+                return;
+            }
 
-// 💡 Provide more specific requirements for a tailored solution!`;
-            explanation = `💻 **Solution Template** - Customize based on your needs`;
+            let msgHtml = state.messages.map(m => `
+                <div class="message ${m.role === 'user' ? 'user' : 'assistant'}">
+                    <div class="avatar">${m.role === 'user' ? 'U' : '⟨/⟩'}</div>
+                    <div class="bubble">${m.role === 'user' ? escHtml(m.content) : renderMarkdown(m.content)}</div>
+                </div>
+            `).join("");
+
+            root.innerHTML = `
+                <div class="shell">
+                    <div class="header"><h1>CODEFORGE</h1><button class="btn-ghost" onclick="state.unlocked=false;render()">🔒 Lock</button></div>
+                    <div class="chat-area" id="chatArea">${msgHtml || '<div class="empty-state">Ready for input</div>'}</div>
+                    <div class="input-area">
+                        <textarea id="userInput" placeholder="Describe code..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage();}"></textarea>
+                        <button class="btn-primary" style="width:100%;margin-top:10px" onclick="sendMessage()">GENERATE</button>
+                    </div>
+                </div>`;
+            const chat = document.getElementById("chatArea");
+            if(chat) chat.scrollTop = chat.scrollHeight;
         }
-        
-        return `${explanation}\n\n\`\`\`${detectedLang}\n${code}\n\`\`\`\n\n✨ Need modifications? Just ask! I can adapt the code to your exact requirements.`;
-    }
-
-    // ========== HELPER FUNCTIONS ==========
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
 
-    function renderContent(text) {
-        const regex = /```(\w*)\n([\s\S]*?)```/g;
-        let result = '';
-        let lastIndex = 0;
-        let match;
-        
-        while ((match = regex.exec(text)) !== null) {
-            result += escapeHtml(text.substring(lastIndex, match.index)).replace(/\n/g, '<br>');
-            result += `<pre><code>${escapeHtml(match[2].trim())}</code></pre>`;
-            lastIndex = match.index + match[0].length;
-        }
-        result += escapeHtml(text.substring(lastIndex)).replace(/\n/g, '<br>');
-        return result;
-    }
+        window.tryUnlock = () => {
+            if (document.getElementById("pwInput").value === PASSWORD) { state.unlocked = true; render(); }
+            else { document.getElementById("gateErr").textContent = "Invalid Code"; }
+        };
 
-    // ========== RENDER FUNCTION ==========
-    function render() {
-        const app = document.getElementById('app');
-        
-        // Password Gate
-        if (!state.unlocked) {
-            app.innerHTML = `
-                <div class="header">
-                    <div class="logo">⟨/⟩</div>
-                    <h1>CODEFORGE</h1>
-                    <div class="subtitle">AI · CODE · GENERATOR</div>
-                </div>
-                <div class="password-box">
-                    <div style="color: rgba(255,140,0,0.4); font-size: 11px; letter-spacing: 3px;">🔐 ENTER ACCESS CODE</div>
-                    <input type="password" id="passwordInput" placeholder="••••••••••••••" autofocus onkeypress="if(event.key==='Enter') unlock()">
-                    <button onclick="unlock()">UNLOCK ACCESS →</button>
-                </div>
-                <div class="footer">PRIVATE ACCESS · AUTHORIZED ONLY</div>
-            `;
-            const input = document.getElementById('passwordInput');
-            if (input) input.focus();
-            return;
-        }
-        
-        // Build messages HTML
-        let messagesHtml = '';
-        for (const msg of state.messages) {
-            const isUser = msg.role === 'user';
-            messagesHtml += `
-                <div class="message ${isUser ? 'user-message' : 'assistant-message'}">
-                    <div style="display: flex; align-items: flex-start; gap: 12px;">
-                        <div class="message-avatar">${isUser ? '👤' : '⟨/⟩'}</div>
-                        <div style="flex: 1;">${renderContent(msg.content)}</div>
-                    </div>
-                </div>
-            `;
-        }
-        
-        if (state.loading) {
-            messagesHtml += `
-                <div class="message assistant-message">
-                    <div style="display: flex; align-items: center; gap: 12px;">
-                        <div class="message-avatar">⟨/⟩</div>
-                        <div class="typing-indicator">
-                            <div class="typing-dot" style="animation-delay: 0s"></div>
-                            <div class="typing-dot" style="animation-delay: 0.2s"></div>
-                            <div class="typing-dot" style="animation-delay: 0.4s"></div>
-                            <span style="margin-left: 8px; color: rgba(255,140,0,0.5);">generating code...</span>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-        
-        const selectedLangLabel = LANGUAGES.find(l => l.id === state.selectedLang)?.label || '✦ Auto Detect';
-        
-        app.innerHTML = `
-            <div class="header">
-                <div class="logo">⟨/⟩</div>
-                <h1>CODEFORGE</h1>
-            </div>
-            
-            <div class="stats">⚡ ${state.promptCount} PROMPT${state.promptCount !== 1 ? 'S' : ''} · UNLIMITED · AI-POWERED</div>
-            
-            <div class="language-bar">
-                <div class="lang-buttons">
-                    ${LANGUAGES.map(lang => `
-                        <button class="lang-btn ${state.selectedLang === lang.id ? 'active' : ''}" onclick="selectLang('${lang.id}')">
-                            ${lang.label}
-                        </button>
-                    `).join('')}
-                </div>
-            </div>
-            
-            <div class="examples">
-                ${EXAMPLES.map(ex => `
-                    <button class="example-btn" onclick="useExample('${ex.replace(/'/g, "\\'")}')">▸ ${ex}</button>
-                `).join('')}
-            </div>
-            
-            <div class="chat-area" id="chatArea">
-                ${messagesHtml || '<div style="text-align: center; color: rgba(255,255,255,0.12); padding: 50px;">✨ Describe the code you need to get started ✨</div>'}
-            </div>
-            
-            <div class="input-area">
-                <textarea id="userInput" rows="2" placeholder="Describe the code you need... (${selectedLangLabel})" onkeypress="handleKeyPress(event)"></textarea>
-                <div class="button-group">
-                    <button onclick="sendMessage()" ${state.loading ? 'disabled' : ''}>▶ GENERATE CODE</button>
-                    <button class="btn-secondary" onclick="clearChat()">🗑️ CLEAR</button>
-                    <button class="btn-secondary" onclick="lockApp()">🔒 LOCK</button>
-                </div>
-                <div class="stats">⏎ ENTER to send · ⇧ ENTER for new line</div>
-            </div>
-            
-            <div class="footer">CODEFORGE · ELITE AI CODE GENERATION · v2.0</div>
-        `;
-        
-        // Scroll to bottom
-        const chatArea = document.getElementById('chatArea');
-        if (chatArea) chatArea.scrollTop = chatArea.scrollHeight;
-        
-        // Focus input
-        const input = document.getElementById('userInput');
-        if (input) input.focus();
-    }
-    
-    // ========== EVENT HANDLERS ==========
-    window.unlock = () => {
-        const password = document.getElementById('passwordInput').value;
-        if (password === PASSWORD) {
-            state.unlocked = true;
+        window.sendMessage = () => {
+            const inp = document.getElementById("userInput");
+            if (!inp.value.trim()) return;
+            state.messages.push({ role: "user", content: inp.value });
+            inp.value = "";
             render();
-        } else {
-            alert('❌ ACCESS DENIED\nInvalid authorization code.');
-            const input = document.getElementById('passwordInput');
-            if (input) {
-                input.value = '';
-                input.focus();
-            }
-        }
-    };
-    
-    window.selectLang = (langId) => {
-        state.selectedLang = langId;
-        render();
-    };
-    
-    window.useExample = (example) => {
-        const input = document.getElementById('userInput');
-        if (input) input.value = example;
-    };
-    
-    window.handleKeyPress = (event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            sendMessage();
-        }
-    };
-    
-    window.sendMessage = async () => {
-        const input = document.getElementById('userInput');
-        const text = input.value.trim();
-        if (!text || state.loading) return;
-        
-        state.messages.push({ role: 'user', content: text });
-        state.promptCount++;
-        state.loading = true;
-        render();
-        
-        input.value = '';
-        
-        const response = await generateResponse(text, state.selectedLang);
-        state.messages.push({ role: 'assistant', content: response });
-        state.loading = false;
+            // Mock response logic here
+        };
+
         render();
-    };
-    
-    window.clearChat = () => {
-        if (confirm('Clear all messages? This cannot be undone.')) {
-            state.messages = [];
-            state.promptCount = 0;
-            render();
-        }
-    };
-    
-    window.lockApp = () => {
-        if (confirm('Lock the application? You will need the password again.')) {
-            state.unlocked = false;
-            state.messages = [];
-            state.promptCount = 0;
-            render();
-        }
-    };
-    
-    // ========== INITIAL RENDER ==========
-    render();
-</script>
+    </script>
 </body>
-</html>
+</html>