Spaces:

derricka59
/

quantumsync-ai-interface-nebula-edition

Running

App Files Files Community

derricka59 commited on Oct 8, 2025

Commit

8f99aa9

verified ·

1 Parent(s): 8c65f58

Let's finish this project it didn't save but I copied the file ill send them one at a time let me know when you're ready for the next one: <!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QhySync Ai Interface</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
--background-color: #121212;
--surface-color: #1E1E1E;
--sidebar-color: #181818;
--primary-color: #BB86FC;
--secondary-color: #03DAC6;
--text-color: #E1E1E1;
--text-secondary-color: #8A8A8A;
--border-color: #333333;
--gem-gradient: linear-gradient(90deg, #8A2BE2, #4A00E0);
--metaverse-gradient: linear-gradient(90.99deg, #FDCE39 0.27%, #FD8963 30%, #ED5174 98.69%);
--success-color: #00ff88;
--warning-color: #ff9800;
--error-color: #ff0077;
}

* { box-sizing: border-box; }

body {
font-family: 'Inter', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
}

/* --- Sidebar --- */
.sidebar {
width: 260px;
background-color: var(--sidebar-color);
display: flex;
flex-direction: column;
padding: 10px;
border-right: 1px solid var(--border-color);
transition: width 0.3s ease;
}

.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin-bottom: 20px;
}

.sidebar-title {
font-size: 1.2rem;
font-weight: 700;
}

#newChatButton {
background: var(--gem-gradient);
border: none;
color: white;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}

.history-section {
flex-grow: 1;
overflow-y: auto;
}

.history-item {
padding: 10px;
margin-bottom: 5px;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-secondary-color);
transition: background-color 0.2s, color 0.2s;
}

.history-item:hover {
background-color: var(--surface-color);
color: var(--text-color);
}

.history-item.active {
background-color: var(--surface-color);
color: var(--text-color);
font-weight: 500;
}

.sidebar-footer {
padding-top: 10px;
border-top: 1px solid var(--border-color);
}

.sidebar-button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: none;
border: none;
color: var(--text-secondary-color);
padding: 10px;
text-align: left;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
}

.sidebar-button:hover {
background-color: var(--surface-color);
color: var(--text-color);
}

.sidebar-button svg {
width: 18px;
height: 18px;
}

/* --- Main Chat Container --- */
.chat-container {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100vh;
}

.chat-header {
padding: 20px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
border-bottom: 1px solid var(--border-color);
background: var(--surface-color);
}

.chat-window {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.chat-window::-webkit-scrollbar { width: 8px; }
.chat-window::-webkit-scrollbar-track { background: var(--surface-color); }
.chat-window::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 10px; border: 2px solid var(--surface-color); }

.message { max-width: 85%; margin-bottom: 15px; padding: 12px 18px; border-radius: 20px; line-height: 1.6; animation: fadeIn 0.5s ease-in-out; }
.message.user { background-color: var(--primary-color); color: #000; align-self: flex-end; border-bottom-right-radius: 5px; }
.message.bot { background-color: #333333; color: var(--text-color); align-self: flex-start; border-bottom-left-radius: 5px; }
.message.bot h3 { margin-top: 0; color: var(--primary-color); }
.message.bot h4 { margin-top: 1.5em; margin-bottom: 0.5em; color: var(--secondary-color); }
.message.bot ul { padding-left: 20px; margin-top: 5px; }
.message.bot li { margin-bottom: 8px; }

.typing-indicator { align-self: flex-start; display: flex; align-items: center; margin-bottom: 15px; }
.typing-indicator span { height: 8px; width: 8px; margin: 0 2px; background-color: var(--secondary-color); border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

/* --- Input Area --- */
.chat-input-container { padding: 20px; }
.chat-input-area { display: flex; align-items: center; padding: 8px; border-radius: 25px; background-color: #2c2c2c; border: 1px solid var(--border-color); }
#userInput { flex-grow: 1; border: none; background: transparent; color: var(--text-color); font-size: 1rem; outline: none; padding: 0 10px; }

.input-button { background: none; border: none; cursor: pointer; padding: 8px; }
.input-button svg { width: 20px; height: 20px; fill: var(--text-secondary-color); transition: fill 0.2s; }
.input-button:hover svg { fill: var(--text-color); }

#sendButton { background: var(--gem-gradient); border-radius: 50%; padding: 8px; }
#sendButton svg { fill: white; }

.file-upload-info { font-size: 0.8rem; color: var(--text-secondary-color); margin-top: 5px; text-align: center; height: 15px; }

/* --- Code Blocks --- */
.message.bot pre { background-color: #0d0d0d; border-radius: 8px; padding: 15px; white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', Courier, monospace; position: relative; }
.copy-button { position: absolute; top: 10px; right: 10px; background: #444; color: white; border: none; padding: 5px 8px; border-radius: 5px; cursor: pointer; opacity: 0.5; transition: opacity 0.2s; }
.message.bot pre:hover .copy-button { opacity: 1; }
.copy-button:active { background: #555; }

/* --- Modal --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.modal-content { background-color: var(--surface-color); padding: 30px; border-radius: 16px; width: 90%; max-width: 900px; max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title { font-size: 1.5rem; font-weight: 700; }
.close-button { font-size: 2rem; color: var(--text-secondary-color); cursor: pointer; border: none; background: none; }

.modal-section { margin-bottom: 25px; }
.modal-section h3 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; color: var(--primary-color); }
.modal-section p, .modal-section li { color: var(--text-secondary-color); line-height: 1.6; }

/* --- AI Pods Specific Styles --- */
.pods-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
margin-top: 15px;
}

.pod-card {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.pod-card:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(187, 134, 252, 0.3);
}

.pod-card.active {
border-color: var(--secondary-color);
background: linear-gradient(135deg, #1e1e3e 0%, #1a2a4e 100%);
}

.pod-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.pod-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
}

.pod-status {
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}

.pod-status.trained { background: rgba(0, 255, 136, 0.2); color: var(--success-color); }
.pod-status.training { background: rgba(255, 152, 0, 0.2); color: var(--warning-color); }
.pod-status.draft { background: rgba(138, 138, 138, 0.2); color: var(--text-secondary-color); }

.pod-description {
font-size: 0.85rem;
color:

Files changed (2) hide show

README.md +8 -5
index.html +363 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quantumsync Ai Interface Nebula Edition
-emoji: 📊
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: QuantumSync AI Interface - Nebula Edition ✨
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,364 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuantumSync AI Interface</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8B5CF6',
+                        secondary: '#06D6A0',
+                        background: '#0F0F23',
+                        surface: '#1A1A2E',
+                        sidebar: '#161627',
+                        text: '#E2E8F0',
+                        'text-secondary': '#94A3B8'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        * { box-sizing: border-box; }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0F0F23;
+            color: #E2E8F0;
+            margin: 0;
+            display: flex;
+            height: 100vh;
+            overflow: hidden;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #1A1A2E; }
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(180deg, #8B5CF6, #06D6A0);
+            border-radius: 10px;
+        }
+        /* Sidebar animations */
+        .sidebar {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .history-item {
+            transition: all 0.2s ease-in-out;
+        }
+        /* Message animations */
+        @keyframes messageSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .message {
+            animation: messageSlideIn 0.4s ease-out;
+        }
+        /* Glow effects */
+        .glow-primary {
+            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+        }
+        .gradient-border {
+            background: linear-gradient(135deg, #8B5CF6, #06D6A0);
+            padding: 1px;
+            border-radius: 12px;
+        }
+        .gradient-border > div {
+            background: #1A1A2E;
+            border-radius: 11px;
+        }
+        /* Pod card hover effects */
+        .pod-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        /* Floating animation */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        /* Pulse animation for active elements */
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); }
+            50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.4); }
+        }
+        .pulse-active {
+            animation: pulse-glow 2s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body class="bg-background text-text">
+    <!-- Sidebar -->
+    <div class="sidebar w-64 bg-sidebar flex flex-col p-3 border-r border-gray-800">
+        <div class="sidebar-header flex items-center justify-between p-3 mb-5">
+            <span class="sidebar-title text-lg font-bold text-primary">History</span>
+            <button id="newChatButton" class="bg-gradient-to-r from-primary to-purple-600 border-none text-white px-4 py-2 rounded-xl cursor-pointer font-medium flex items-center gap-2 hover:shadow-lg transition-all duration-300">
+                <i data-feather="plus"></i>
+                New
+            </button>
+        </div>
+        <div class="history-section flex-grow overflow-y-auto" id="historyContainer">
+            <!-- History items will be dynamically inserted -->
+        </div>
+        <div class="sidebar-footer pt-3 border-t border-gray-800">
+            <button class="sidebar-button w-full bg-transparent border-none text-text-secondary p-3 text-left rounded-xl cursor-pointer text-sm hover:bg-surface hover:text-text transition-all duration-200">
+                <i data-feather="cpu"></i>
+                AI Pods
+            </button>
+            <button class="sidebar-button w-full bg-transparent border-none text-text-secondary p-3 text-left rounded-xl cursor-pointer text-sm hover:bg-surface hover:text-text transition-all duration-200">
+                <i data-feather="help-circle"></i>
+                Instructions
+            </button>
+        </div>
+    </div>
+    <!-- Main Chat Container -->
+    <main class="chat-container flex-grow flex flex-col h-screen">
+        <div class="chat-header p-6 text-xl font-bold text-center border-b border-gray-800 bg-surface">
+            QuantumSync AI
+        </div>
+        <div class="chat-window flex-grow p-6 overflow-y-auto flex flex-col">
+            <div class="message bot max-w-4/5 mb-4 p-5 rounded-2xl bg-gray-900 text-text self-start border-b-l rounded-bl-sm">
+                <h3 class="text-primary font-semibold text-lg mb-2">Key Accomplishments: QuantumSync Ecosystem Research Plan</h3>
+                <p class="text-text-secondary">Welcome! I am QuantumSync AI. Below is a detailed summary of the key research and development milestones. Feel free to ask me to elaborate on any section.</p>
+            </div>
+        </div>
+        <div class="chat-input-container p-6">
+            <div class="chat-input-area flex items-center p-3 rounded-2xl bg-gray-900 border border-gray-800">
+                <input type="file" id="fileInput" class="hidden">
+                <button class="input-button bg-transparent border-none cursor-pointer p-2">
+                <i data-feather="paperclip"></i>
+            </button>
+            <input type="text" id="userInput" class="flex-grow border-none bg-transparent text-text text-base outline-none px-3"></input>
+            <button class="input-button bg-gradient-to-r from-primary to-purple-600 rounded-full p-3">
+                <i data-feather="send"></i>
+            </button>
+        </div>
+        <div class="file-upload-info text-sm text-text-secondary mt-1 text-center h-4" id="fileUploadInfo"></div>
+    </div>
+</main>
+<!-- Instructions Modal -->
+<div id="instructionsModal" class="modal fixed z-50 left-0 top-0 w-full h-full bg-black bg-opacity-70 hidden justify-center items-center">
+    <div class="modal-content bg-surface p-8 rounded-2xl w-11/12 max-w-4xl max-h-85vh overflow-y-auto shadow-2xl">
+        <div class="modal-header flex justify-between items-center mb-6">
+            <h2 class="modal-title text-2xl font-bold text-primary">Instructions</h2>
+    <button class="close-button text-3xl text-text-secondary cursor-pointer border-none bg-transparent">&times;</button>
+</div>
+<div class="modal-section mb-8">
+    <h3 class="text-primary font-semibold text-lg mb-3 pb-2 border-b border-gray-800">Using QuantumSync AI</h3>
+    <p class="text-text-secondary leading-relaxed mb-4">This interface allows you to chat with the AI, manage your conversations, and train custom AI agents.</p>
+    <ul class="text-text-secondary leading-relaxed space-y-2">
+        <li><strong class="text-primary">New Chat:</strong> Click the "New" button in the sidebar to start a fresh conversation.</li>
+        <li><strong class="text-primary">History:</strong> Your conversations are saved automatically. Click on an item in the history panel to load it.</li>
+        <li><strong class="text-primary">AI Pods:</strong> Create and train custom AI agents with specific knowledge and behaviors.</li>
+        <li><strong class="text-primary">Code Blocks:</strong> The AI's responses containing code will be formatted. Use the copy button to copy it.</li>
+    </ul>
+</div>
+</div>
+</div>
+<!-- AI Pods Modal -->
+<div id="aiPodsModal" class="modal fixed z-50 left-0 top-0 w-full h-full bg-black bg-opacity-70 hidden justify-center items-center">
+<div class="modal-content bg-surface p-8 rounded-2xl w-11/12 max-w-4xl max-h-85vh overflow-y-auto shadow-2xl">
+    <div class="modal-header flex justify-between items-center mb-6">
+        <h2 class="modal-title text-2xl font-bold text-primary">AI Pods - Custom Agent Training</h2>
+    <button class="close-button text-3xl text-text-secondary cursor-pointer border-none bg-transparent">&times;</button>
+</div>
+<div class="tabs flex gap-3 mb-6 pb-4 border-b border-gray-800">
+        <div class="tab active px-5 py-3 cursor-pointer border-b-2 border-transparent transition-all duration-200 hover:text-primary" data-tab="overview">Overview</div>
+        <div class="tab px-5 py-3 cursor-pointer border-b-2 border-transparent transition-all duration-200 hover:text-primary">Create Pod</div>
+    </div>
+    <div class="tab-content active" id="overview-tab">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-semibold">Your AI Pods</h3>
+        <button class="btn btn-primary bg-gradient-to-r from-primary to-purple-600 text-white px-5 py-3 rounded-xl border-none cursor-pointer font-medium hover:shadow-lg transition-all duration-300">
+            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
+            New Pod
+        </button>
+    </div>
+    <div class="pods-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <!-- Sample Pod Cards -->
+        <div class="pod-card gradient-border floating">
+            <div class="bg-gray-900 rounded-xl p-5 h-full">
+                <div class="pod-header flex justify-between items-center mb-3">
+                <div class="pod-name text-primary font-semibold">Customer Support Agent</div>
+                <div class="pod-status trained bg-green-500 bg-opacity-20 text-green-400 px-3 py-1 rounded-full text-xs font-medium">trained</div>
+            </div>
+            <div class="pod-description text-text-secondary text-sm mb-3">Handles customer inquiries and support tickets</div>
+            <div class="pod-stats flex gap-4 text-xs text-text-secondary">
+                <div class="pod-stat flex items-center gap-1">
+                    <i data-feather="file-text" class="w-3 h-3"></i>
+                12 docs
+            </div>
+            <div class="pod-stat flex items-center gap-1">
+                <i data-feather="link" class="w-3 h-3"></i>
+                2 APIs
+            </div>
+            <div class="pod-stat flex items-center gap-1">
+                    <i data-feather="activity" class="w-3 h-3"></i>
+                1 webhook
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<div class="tab-content" id="create-tab">
+    <h3 class="text-primary font-semibold text-lg mb-4">Configure Your AI Pod</h3>
+    <div class="form-group mb-5">
+        <label class="form-label block mb-2 font-medium text-text">Pod Name</label>
+        <input type="text" class="form-input w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base">
+    </div>
+    <div class="form-group mb-5">
+        <label class="form-label block mb-2 font-medium text-text">Description</label>
+        <input type="text" class="form-input w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base" placeholder="Brief description of this agent's purpose">
+    </div>
+    <div class="form-group mb-5">
+        <label class="form-label block mb-2 font-medium text-text">System Prompt</label>
+        <textarea class="form-textarea w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base min-h-32 resize-vertical" placeholder="Define the agent's personality, role, and behavior..."></textarea>
+    </div>
+    <div class="form-group mb-5">
+        <label class="form-label block mb-2 font-medium text-text">Training Data (JSON Format)</label>
+        <div class="training-data-editor grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="json-editor bg-gray-900 border border-gray-800 rounded-xl p-4">
+            <h4 class="text-secondary font-semibold text-base mb-2">Input Examples</h4>
+        <textarea class="form-textarea w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-mono text-sm">[
+  "What is network slicing?",
+  "How does edge computing work?",
+  "Tell me about 5G pricing"
+]</textarea>
+    </div>
+    <div class="json-editor bg-gray-900 border border-gray-800 rounded-xl p-4">
+            <h4 class="text-secondary font-semibold text-base mb-2">Expected Outputs</h4>
+        <textarea class="form-textarea w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-mono text-sm" placeholder='[
+  "Network slicing allows...",
+  "Edge computing brings...",
+  "Our 5G pricing starts at..."
+]'></textarea>
+    </div>
+</div>
+</div>
+<div class="form-group mb-5">
+    <label class="form-label block mb-2 font-medium text-text">Upload Training Files</label>
+    <div class="file-upload-area border-2 border-dashed border-gray-800 rounded-xl p-8 text-center cursor-pointer transition-all duration-300 hover:border-primary hover:bg-primary hover:bg-opacity-5" id="podFileUpload">
+        <i data-feather="upload-cloud" class="w-12 h-12 opacity-50 mb-3"></i>
+        <p class="text-text-secondary mb-2">Drag & drop files here or click to browse</p>
+        <p class="text-xs text-text-secondary">Supported: PDF, DOC, JSON, CSV, MP3, MP4</p>
+    </div>
+    <input type="file" id="podFilesInput" multiple class="hidden" accept=".pdf,.doc,.docx,.json,.csv,.mp3,.mp4">
+    <div class="uploaded-files mt-4" id="uploadedFilesList"></div>
+</div>
+<div class="form-group mb-5">
+    <label class="form-label block mb-2 font-medium text-text">API Configuration</label>
+    <div class="api-config-section bg-gray-900 rounded-xl p-4 mt-3">
+        <h4 class="text-secondary font-semibold text-base mb-3">External API Connections</h4>
+    <input type="text" class="form-input w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-inter text-sm" placeholder="API Endpoint URL">
+    <input type="text" class="form-input w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-inter text-sm" placeholder="API Key (optional)">
+    <button class="btn btn-secondary bg-surface text-text border border-gray-800 px-4 py-2 rounded-lg cursor-pointer font-medium hover:shadow transition-all duration-200">Add API Connection</button>
+</div>
+</div>
+</div>
+</div>
+<script>
+    // Initialize Feather Icons
+    document.addEventListener('DOMContentLoaded', function() {
+        feather.replace();
+        // Add some sample history items
+        const historyContainer = document.getElementById('historyContainer');
+        const sampleHistory = [
+            "5G Network Architecture Discussion",
+            "Edge Computing Implementation Plan",
+            "QuantumSync Product Roadmap Review"
+        ];
+        sampleHistory.forEach(item => {
+            const historyItem = document.createElement('div');
+            historyItem.className = 'history-item p-3 mb-2 rounded-xl cursor-pointer text-text-secondary whitespace-nowrap overflow-hidden text-ellipsis transition-all duration-200 hover:bg-surface hover:text-text';
+            historyItem.textContent = item;
+            historyContainer.appendChild(historyItem);
+        });
+        // Add interactive functionality
+        const tabs = document.querySelectorAll('.tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabId = tab.getAttribute('data-tab');
+                // Update active tab
+                tabs.forEach(t => t.classList.remove('active', 'pulse-active'));
+                tab.classList.add('active', 'pulse-active'));
+                // Show corresponding content
+                tabContents.forEach(content => {
+                    content.classList.remove('active');
+                    if (content.id === `${tabId}-tab`) {
+                    content.classList.add('active');
+                }
+            });
+        });
+        // Add floating animation to pod cards
+        const podCards = document.querySelectorAll('.pod-card');
+        podCards.forEach((card, index) => {
+                    card.style.animationDelay = `${index * 0.2}s`;
+            });
+        });
+    });
+</script>
+<script>
+    feather.replace();
+</script>
+</body>
 </html>