normalpurpose3/Ignite-Pro-Workspace

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Ignite Pro | 2026 Intelligence</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>9    <style>10        body { background: #050505; color: white; font-family: 'Inter', sans-serif; }11        .ignite-gradient { background: linear-gradient(135deg, #FF4B2B, #FF416C); }12        .glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); }13        .suggestion-chip { border: 1px solid #FF4B2B; color: #FF4B2B; transition: all 0.2s; cursor: pointer; }14        .suggestion-chip:hover { background: #FF4B2B; color: white; transform: translateY(-2px); }15        .prose ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; }16    </style>17</head>18<body class="flex flex-col h-screen overflow-hidden">19    <header class="px-8 py-6 flex justify-between items-center glass-card border-b">20        <div class="flex items-center gap-3">21            <div class="w-8 h-8 ignite-gradient rounded-lg flex items-center justify-center font-black">🔥</div>22            <h1 class="text-xl font-bold tracking-tighter">IGNITE <span class="text-orange-500 italic">PRO</span></h1>23        </div>24        <div class="text-[10px] tracking-[0.3em] text-zinc-500 font-bold uppercase italic">Neural Engine: Elite-v3</div>25    </header>26 27    <div id="chat-box" class="flex-1 overflow-y-auto p-8 space-y-8 no-scrollbar scroll-smooth"></div>28 29    <div id="suggestion-container" class="px-8 py-2 flex gap-2 flex-wrap"></div>30 31    <div class="p-8 bg-gradient-to-t from-[#050505] to-transparent">32        <div class="max-w-4xl mx-auto glass-card rounded-[2.5rem] p-2 flex items-center gap-2 shadow-2xl">33            <input type="text" id="user-input" placeholder="Deep-search or command Ignite..." class="flex-1 bg-transparent px-6 py-4 outline-none text-white placeholder-zinc-700">34            <button onclick="sendMessage()" class="ignite-gradient p-4 rounded-full shadow-lg hover:scale-110 transition-transform">35                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>36            </button>37        </div>38    </div>39 40    <script>41        const chatBox = document.getElementById('chat-box');42        const userInput = document.getElementById('user-input');43        const suggestionContainer = document.getElementById('suggestion-container');44 45        async function sendMessage(overrideText = null) {46            const text = overrideText || userInput.value.trim();47            if (!text) return;48 49            userInput.value = '';50            suggestionContainer.innerHTML = ''; // Clear old suggestions51            52            chatBox.innerHTML += `<div class="flex justify-end"><div class="ignite-gradient px-6 py-3 rounded-2xl rounded-tr-none max-w-[80%] text-sm font-medium shadow-xl">${text}</div></div>`;53 54            const aiId = "ai-" + Date.now();55            chatBox.innerHTML += `<div class="flex justify-start"><div id="${aiId}" class="glass-card px-8 py-6 rounded-2xl rounded-tl-none text-zinc-200 max-w-[85%] prose text-sm leading-relaxed shadow-lg">Generating response...</div></div>`;56            chatBox.scrollTop = chatBox.scrollHeight;57 58            try {59                const response = await fetch('/chat', {60                    method: 'POST',61                    headers: { 'Content-Type': 'application/json' },62                    body: JSON.stringify({ message: text })63                });64                const data = await response.json();65                66                // Parse the main answer67                document.getElementById(aiId).innerHTML = marked.parse(data.reply);68                69                // Add the Suggestion Chip if one exists70                if(data.suggestion) {71                    suggestionContainer.innerHTML = `<div onclick="sendMessage('${data.suggestion}')" class="suggestion-chip px-4 py-2 rounded-full text-xs font-bold italic animate-bounce">${data.suggestion}</div>`;72                }73            } catch (e) {74                document.getElementById(aiId).innerText = "Link Interrupted. Check connection.";75            }76            chatBox.scrollTop = chatBox.scrollHeight;77        }78 79        userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });80    </script>81</body>82</html>