| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>NeuralAI — Launch</title> |
| <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=JetBrains+Mono&display=swap" rel="stylesheet"> |
| <style> |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| background: #09090b; |
| color: #e4e4e7; |
| font-family: 'Google Sans', system-ui, sans-serif; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| } |
| |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px); |
| background-size: 60px 60px; |
| z-index: 0; |
| } |
| |
| |
| .orb { |
| position: fixed; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.25; |
| animation: drift 12s ease-in-out infinite; |
| z-index: 0; |
| pointer-events: none; |
| } |
| .orb-1 { width: 500px; height: 500px; background: #3b82f6; top: -150px; left: -150px; animation-delay: 0s; } |
| .orb-2 { width: 400px; height: 400px; background: #a855f7; bottom: -100px; right: -100px; animation-delay: -5s; } |
| .orb-3 { width: 300px; height: 300px; background: #ec4899; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -3s; opacity: 0.1; } |
| |
| @keyframes drift { |
| 0%, 100% { transform: translate(0, 0); } |
| 50% { transform: translate(30px, 20px); } |
| } |
| |
| |
| .topbar { |
| position: fixed; |
| top: 0; left: 0; right: 0; |
| height: 56px; |
| background: rgba(9,9,11,0.85); |
| backdrop-filter: blur(12px); |
| border-bottom: 1px solid rgba(255,255,255,0.07); |
| display: flex; |
| align-items: center; |
| padding: 0 24px; |
| z-index: 100; |
| } |
| |
| .product-name { |
| font-size: 20px; |
| font-weight: 700; |
| letter-spacing: -0.3px; |
| } |
| |
| .live-dot { |
| font-size: 10px; |
| color: #ef4444; |
| margin-left: 6px; |
| animation: livePulse 1.5s ease-in-out infinite; |
| text-shadow: 0 0 8px rgba(239,68,68,0.6); |
| } |
| |
| @keyframes livePulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.4; } |
| } |
| |
| |
| .hero { |
| position: relative; |
| z-index: 10; |
| text-align: center; |
| padding: 40px 24px; |
| max-width: 680px; |
| } |
| |
| .hero-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| background: rgba(139,92,246,0.12); |
| border: 1px solid rgba(139,92,246,0.3); |
| border-radius: 30px; |
| padding: 6px 16px; |
| font-size: 12px; |
| color: #a78bfa; |
| font-family: 'JetBrains Mono', monospace; |
| margin-bottom: 32px; |
| letter-spacing: 0.5px; |
| } |
| |
| .badge-dot { |
| width: 7px; height: 7px; |
| background: #10b981; |
| border-radius: 50%; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.5; transform: scale(1.3); } |
| } |
| |
| .hero h1 { |
| font-size: clamp(42px, 8vw, 72px); |
| font-weight: 800; |
| line-height: 1.1; |
| letter-spacing: -1.5px; |
| margin-bottom: 20px; |
| } |
| |
| .hero h1 .n { color: #3b82f6; } |
| .hero h1 .e { color: #10b981; } |
| .hero h1 .u { color: #22d3ee; } |
| .hero h1 .r { color: #a855f7; } |
| .hero h1 .a { color: #ef4444; } |
| .hero h1 .l { color: #f97316; } |
| .hero h1 .ai { |
| background: linear-gradient(135deg, #22d3ee, #a855f7, #ec4899); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero p { |
| font-size: 18px; |
| color: #71717a; |
| line-height: 1.7; |
| margin-bottom: 40px; |
| max-width: 500px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| .cta-group { |
| display: flex; |
| gap: 16px; |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-bottom: 60px; |
| } |
| |
| .btn-launch { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| background: linear-gradient(135deg, #7c3aed, #4f46e5); |
| color: #fff; |
| font-size: 16px; |
| font-weight: 600; |
| padding: 16px 36px; |
| border-radius: 50px; |
| border: none; |
| cursor: pointer; |
| text-decoration: none; |
| box-shadow: 0 8px 32px rgba(124,58,237,0.4); |
| transition: all 0.25s ease; |
| } |
| |
| .btn-launch:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 12px 40px rgba(124,58,237,0.55); |
| filter: brightness(1.1); |
| } |
| |
| .btn-github { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| background: rgba(255,255,255,0.05); |
| color: #a1a1aa; |
| font-size: 15px; |
| font-weight: 500; |
| padding: 16px 28px; |
| border-radius: 50px; |
| border: 1px solid rgba(255,255,255,0.1); |
| cursor: pointer; |
| text-decoration: none; |
| transition: all 0.2s ease; |
| } |
| |
| .btn-github:hover { |
| background: rgba(255,255,255,0.1); |
| color: #e4e4e7; |
| border-color: rgba(255,255,255,0.2); |
| } |
| |
| |
| .features { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| gap: 16px; |
| width: 100%; |
| max-width: 620px; |
| position: relative; |
| z-index: 10; |
| } |
| |
| .feat-card { |
| background: rgba(22,27,34,0.8); |
| border: 1px solid rgba(255,255,255,0.07); |
| border-radius: 16px; |
| padding: 20px; |
| text-align: center; |
| backdrop-filter: blur(10px); |
| transition: border-color 0.2s, transform 0.2s; |
| } |
| |
| .feat-card:hover { |
| border-color: rgba(139,92,246,0.4); |
| transform: translateY(-3px); |
| } |
| |
| .feat-icon { font-size: 28px; margin-bottom: 10px; } |
| |
| .feat-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: #e4e4e7; |
| margin-bottom: 4px; |
| } |
| |
| .feat-desc { |
| font-size: 12px; |
| color: #71717a; |
| line-height: 1.5; |
| } |
| |
| |
| .footer { |
| position: fixed; |
| bottom: 0; left: 0; right: 0; |
| padding: 16px 24px; |
| text-align: center; |
| font-size: 12px; |
| color: #3f3f46; |
| z-index: 100; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| |
| .config-notice { |
| position: relative; |
| z-index: 10; |
| margin-top: 32px; |
| background: rgba(15,15,30,0.8); |
| border: 1px solid rgba(59,130,246,0.2); |
| border-radius: 12px; |
| padding: 14px 20px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 12px; |
| color: #6b7280; |
| max-width: 520px; |
| text-align: left; |
| } |
| |
| .config-notice span { color: #3b82f6; } |
| .config-notice strong { color: #a78bfa; } |
| |
| @media (max-width: 480px) { |
| .features { grid-template-columns: 1fr 1fr; } |
| .cta-group { flex-direction: column; align-items: center; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="orb orb-1"></div> |
| <div class="orb orb-2"></div> |
| <div class="orb orb-3"></div> |
|
|
| |
| <div class="topbar"> |
| <span class="product-name"> |
| <span class="n">N</span><span class="e">e</span><span class="u">u</span><span class="r">r</span><span class="a">a</span><span class="l">l</span><span class="ai">AI</span> |
| </span> |
| <span class="live-dot">●LIVE</span> |
| </div> |
|
|
| |
| <div class="hero" style="margin-top:56px;"> |
| <div class="hero-badge"> |
| <span class="badge-dot"></span> |
| SmolLM2-360M · Flash Attention · RoPE · KV-Cache |
| </div> |
|
|
| <h1> |
| <span class="n">N</span><span class="e">e</span><span class="u">u</span><span class="r">r</span><span class="a">a</span><span class="l">l</span><span class="ai">AI</span> |
| </h1> |
|
|
| <p>A production-grade ChatGPT-style LLM built from scratch in PyTorch. Memory, tools, streaming, voice — all yours.</p> |
|
|
| <div class="cta-group"> |
| <a id="launchBtn" href="#" class="btn-launch"> |
| 🚀 Launch NeuralAI |
| </a> |
| <a href="https://github.com/Subject-Emu-5259/NeuralAI" target="_blank" class="btn-github"> |
| ⭐ View on GitHub |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="features"> |
| <div class="feat-card"> |
| <div class="feat-icon">💬</div> |
| <div class="feat-title">Chat</div> |
| <div class="feat-desc">Streaming SSE responses with memory & conversation history</div> |
| </div> |
| <div class="feat-card"> |
| <div class="feat-icon">📁</div> |
| <div class="feat-title">NeuralDrive</div> |
| <div class="feat-desc">Upload & analyze files. Cloud file system built in.</div> |
| </div> |
| <div class="feat-card"> |
| <div class="feat-icon">💻</div> |
| <div class="feat-title">Terminal</div> |
| <div class="feat-desc">Real AI-powered shell — Bash, Python, Node.js</div> |
| </div> |
| <div class="feat-card"> |
| <div class="feat-icon">🎤</div> |
| <div class="feat-title">Live Voice</div> |
| <div class="feat-desc">Speech-to-speech conversations with persona voices</div> |
| </div> |
| </div> |
|
|
| |
| <div class="config-notice" id="configNotice" style="display:none;"> |
| ⚠️ <strong>Backend not configured.</strong> Set your live URL below:<br><br> |
| <input id="backendUrl" type="text" placeholder="https://neuralai-xxxx.onrender.com" |
| style="width:100%;padding:8px 12px;background:#0d1117;border:1px solid #30363d;border-radius:8px;color:#e4e4e7;font-family:inherit;font-size:12px;outline:none;margin-top:6px;"> |
| <button onclick="saveBackend()" style="margin-top:8px;padding:7px 18px;background:#7c3aed;border:none;border-radius:8px;color:#fff;font-size:12px;cursor:pointer;">Save & Launch</button> |
| </div> |
|
|
| <div class="footer"> |
| Built by De'Andrew Preston Harris · Harris Holdings · NeuralAI v7.1.0-stable |
| </div> |
|
|
| <script> |
| const STORAGE_KEY = 'neuralai_backend_url'; |
| |
| function getBackend() { |
| return localStorage.getItem(STORAGE_KEY) || ''; |
| } |
| |
| function saveBackend() { |
| const url = document.getElementById('backendUrl').value.trim(); |
| if (url) { |
| localStorage.setItem(STORAGE_KEY, url); |
| window.location.href = url; |
| } |
| } |
| |
| const btn = document.getElementById('launchBtn'); |
| const notice = document.getElementById('configNotice'); |
| const saved = getBackend(); |
| |
| if (saved) { |
| btn.href = saved; |
| btn.textContent = '🚀 Launch NeuralAI'; |
| } else { |
| btn.href = '#'; |
| btn.addEventListener('click', function(e) { |
| e.preventDefault(); |
| notice.style.display = 'block'; |
| document.getElementById('backendUrl').focus(); |
| notice.scrollIntoView({ behavior: 'smooth' }); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
|
|
