Spaces:
Running
Running
File size: 15,136 Bytes
f175d26 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 | <!DOCTYPE html>
<html lang="en">
<head>
<!-- ============================================================
META TAGS & PAGE CONFIGURATION
These tags control how the page is displayed and behaves
across different devices, especially mobile.
============================================================ -->
<!-- Character encoding: UTF-8 ensures proper display of international
characters (accents, emoji, non-Latin scripts). -->
<meta charset="UTF-8">
<!-- VIEWPORT: Critical for responsive design on mobile devices.
- width=device-width: Match the screen width of the device
- initial-scale=1.0: No zoom on load (1:1 pixel ratio)
- maximum-scale=1.0, user-scalable=no: Prevents pinch-zoom
(useful for app-like experiences where zoom would break layout)
- viewport-fit=cover: Extends content into the "safe area" on
iOS devices with notches (iPhone X+). Without this, content
would stop at the notch edges, leaving awkward gaps. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!-- APPLE-MOBILE-WEB-APP-CAPABLE: When "Add to Home Screen" is used
on iOS, this makes the page open in standalone mode (no Safari
UI bars). The page looks and feels like a native app. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- APPLE-MOBILE-WEB-APP-STATUS-BAR-STYLE: Controls the iOS status
bar appearance in standalone mode. "black-translucent" makes
the status bar transparent so content can extend underneath. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- THEME-COLOR: Sets the browser chrome color (address bar on
mobile Chrome, status bar on Android). Creates a cohesive
look when the page loads. -->
<meta name="theme-color" content="#050510">
<title>J.A.R.V.I.S</title>
<!-- GOOGLE FONTS: Loads Poppins with multiple weights (300-700).
display=swap prevents invisible text while font loads (FOUT
instead of FOIT). The font gives the UI a modern, clean look. -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ============================================================
APP LAYOUT STRUCTURE (Single-Page, Vanilla HTML)
This is a single-page application with NO framework (React,
Vue, etc.). Everything is plain HTML + CSS + JS. The layout
follows a vertical stack: orb (background) -> header ->
chat area -> input bar.
============================================================ -->
<div class="app">
<!-- ORB-CONTAINER: A full-screen WebGL canvas that renders an
animated 3D orb as the background. It sits behind all other
content. The OrbRenderer class (from orb.js) initializes
and animates this. It's purely decorative—no interaction. -->
<div id="orb-container"></div>
<!-- ============================================================
HEADER
Contains: logo/tagline, mode switch (General vs Realtime),
connection status badge, and new chat button.
============================================================ -->
<header class="header glass-panel">
<div class="header-left">
<h1 class="logo">J.A.R.V.I.S</h1>
<span class="tagline">Just A Rather Very Intelligent System</span>
</div>
<div class="header-center">
<!-- MODE SWITCH: Toggle between "General" (text chat) and
"Realtime" (voice/streaming). The .mode-slider div
slides left/right via JavaScript to indicate the
active mode. Both buttons share the same container
so the slider can animate between them. -->
<div class="mode-switch" id="mode-switch">
<div class="mode-slider" id="mode-slider"></div>
<!-- SVG ICON STRUCTURE: All icons use viewBox="0 0 24 24"
(24x24 coordinate system) so they scale cleanly at
any size. fill="none" + stroke="currentColor" gives
outline style; stroke-width, stroke-linecap, and
stroke-linejoin control line appearance. -->
<button class="mode-btn active" data-mode="general" id="btn-general">
<!-- Chat bubble icon: represents text/conversation mode -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
General
</button>
<button class="mode-btn" data-mode="realtime" id="btn-realtime">
<!-- Globe/globe-wave icon: represents real-time/voice mode -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
Realtime
</button>
</div>
</div>
<div class="header-right">
<!-- STATUS BADGE: Shows connection state (Online/Offline).
The .status-dot is typically green when connected,
red/gray when disconnected. Updated by script.js. -->
<div class="status-badge" id="status-badge">
<span class="status-dot"></span>
<span class="status-text">Online</span>
</div>
<!-- NEW CHAT: Clears the conversation and starts fresh. -->
<!-- SEARCH RESULTS: Toggle to show Tavily live search data (Realtime mode). -->
<button class="btn-icon search-results-toggle" id="search-results-toggle" title="View search results" style="display: none;">
<svg width="18" height="18" 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"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</button>
<button class="btn-icon new-chat-btn" id="new-chat-btn" title="New Chat">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</div>
</header>
<!-- ============================================================
CHAT AREA
Scrollable region containing the conversation. Shows a
welcome screen (with chips) when empty, or message bubbles
when there's history.
============================================================ -->
<main class="chat-area" id="chat-area">
<div class="chat-messages" id="chat-messages">
<!-- WELCOME SCREEN: Shown when there are no messages.
Chips are quick-action buttons that send preset
prompts when clicked. The greeting text (e.g. "Good
evening") can be time-based. -->
<div class="welcome-screen" id="welcome-screen">
<div class="welcome-icon">
<!-- Stacked layers icon: symbolizes AI/layers of intelligence -->
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h2 class="welcome-title" id="welcome-title">Good evening.</h2>
<p class="welcome-sub">How may I assist you today?</p>
<div class="welcome-chips">
<button class="chip" data-msg="What can you do?">What can you do?</button>
<button class="chip" data-msg="Open YouTube for me">Open YouTube</button>
<button class="chip" data-msg="Tell me a fun fact">Fun fact</button>
<button class="chip" data-msg="Play some music">Play music</button>
</div>
</div>
</div>
</main>
<!-- ============================================================
INPUT BAR
Fixed at bottom. Contains: auto-resizing textarea, mic
(voice input), TTS (text-to-speech toggle), and send.
SVG icons use viewBox for scaling; stroke attributes
control line style. Multiple SVGs per button allow
different states (e.g. mic on vs off).
============================================================ -->
<footer class="input-bar glass-panel">
<div class="input-wrapper">
<textarea id="message-input"
placeholder="Ask Jarvis anything..."
rows="1"
maxlength="32000"></textarea>
<div class="input-actions">
<!-- MIC BUTTON: Two SVG states. .mic-icon = outline
(idle). .mic-icon-active = filled square (recording).
CSS/JS toggles visibility based on state. -->
<button class="action-btn mic-btn" id="mic-btn" title="Voice input">
<!-- Microphone outline: mic body + stand -->
<svg class="mic-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/>
</svg>
<!-- Filled square: "stop recording" / active state -->
<svg class="mic-icon-active" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<rect x="4" y="4" width="16" height="16" rx="3"/>
</svg>
</button>
<!-- TTS BUTTON: Text-to-speech. .tts-icon-off = speaker
with X (disabled). .tts-icon-on = speaker with
sound waves (enabled). -->
<button class="action-btn tts-btn" id="tts-btn" title="Text to Speech">
<!-- Speaker with X: TTS off -->
<svg class="tts-icon-off" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
<line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>
</svg>
<!-- Speaker with sound waves: TTS on -->
<svg class="tts-icon-on" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
</svg>
</button>
<!-- SEND BUTTON: Paper plane / send icon -->
<button class="action-btn send-btn" id="send-btn" title="Send message">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
</svg>
</button>
</div>
</div>
<div class="input-meta">
<span class="mode-label" id="mode-label">General Mode</span>
<span class="char-count" id="char-count"></span>
</div>
</footer>
<!-- ============================================================
SEARCH RESULTS WIDGET (Realtime mode)
Fixed panel on the right showing Tavily search data: query,
AI-synthesized answer, and source list. Toggle via header button.
============================================================ -->
<aside class="search-results-widget glass-panel" id="search-results-widget" aria-hidden="true">
<div class="search-results-header">
<h3 class="search-results-title">Live search</h3>
<button class="search-results-close" id="search-results-close" title="Close" aria-label="Close search results">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="search-results-query" id="search-results-query"></div>
<div class="search-results-answer" id="search-results-answer"></div>
<div class="search-results-list" id="search-results-list"></div>
</aside>
</div>
<!-- ============================================================
SCRIPT LOADING ORDER
orb.js MUST load first: it defines OrbRenderer and sets up
the WebGL canvas in #orb-container. script.js depends on it
and uses the orb for the background. Order matters because
script.js may reference OrbRenderer at load time.
============================================================ -->
<script src="orb.js"></script>
<script src="script.js"></script>
</body>
</html> |