Spaces:
Sleeping
Sleeping
Update frontend/index.html
Browse files- frontend/index.html +192 -184
frontend/index.html
CHANGED
|
@@ -1,185 +1,193 @@
|
|
| 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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
| 6 |
-
<meta name="apple-mobile-web-app-capable" content="yes">
|
| 7 |
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
| 8 |
-
<meta name="theme-color" content="#050510">
|
| 9 |
-
<title>J.A.R.V.I.S</title>
|
| 10 |
-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 11 |
-
<link rel="stylesheet" href="style.css">
|
| 12 |
-
</head>
|
| 13 |
-
<body>
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
<
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
</
|
| 32 |
-
<button class="mode-btn" data-mode="
|
| 33 |
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><
|
| 34 |
-
<span class="mode-btn-text">
|
| 35 |
-
</button>
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
<
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
</
|
| 50 |
-
</
|
| 51 |
-
<button class="btn-icon
|
| 52 |
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
<svg
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
<
|
| 68 |
-
</button>
|
| 69 |
-
</div>
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
<
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
<
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
<
|
| 87 |
-
|
| 88 |
-
<
|
| 89 |
-
</div>
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
<button class="action-btn
|
| 109 |
-
<svg class="
|
| 110 |
-
<
|
| 111 |
-
|
| 112 |
-
<
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
<
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
<svg
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
<
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
</
|
| 136 |
-
</div>
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
<div class="search-results-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
<
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
</div>
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
<label class="toggle-
|
| 159 |
-
|
| 160 |
-
<
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
<div
|
| 164 |
-
|
| 165 |
-
<label class="toggle-
|
| 166 |
-
|
| 167 |
-
<
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
<
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
<
|
| 178 |
-
|
| 179 |
-
|
| 180 |
-
<
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
</html>
|
|
|
|
| 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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
| 6 |
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
| 7 |
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
| 8 |
+
<meta name="theme-color" content="#050510">
|
| 9 |
+
<title>J.A.R.V.I.S</title>
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 11 |
+
<link rel="stylesheet" href="style.css">
|
| 12 |
+
</head>
|
| 13 |
+
<body>
|
| 14 |
+
<div id="auth-overlay">
|
| 15 |
+
<div class="auth-box">
|
| 16 |
+
<h2>SYSTEM LOCKED</h2>
|
| 17 |
+
<input type="text" id="pass-input" placeholder="ENTER PASSCODE" autocomplete="off" style="-webkit-text-security: disc;" onkeydown="if(event.key==='Enter') checkPassword()">
|
| 18 |
+
<br>
|
| 19 |
+
<button onclick="checkPassword()">AUTHORIZE</button>
|
| 20 |
+
</div>
|
| 21 |
+
</div>
|
| 22 |
+
<div class="app">
|
| 23 |
+
<div id="orb-container"></div>
|
| 24 |
+
<header class="header glass-panel">
|
| 25 |
+
<div class="header-left">
|
| 26 |
+
<h1 class="logo">J.A.R.V.I.S</h1>
|
| 27 |
+
<span class="tagline">Just A Rather Very Intelligent System</span>
|
| 28 |
+
</div>
|
| 29 |
+
<div class="header-center">
|
| 30 |
+
<div class="mode-switch mode-switch-three" id="mode-switch">
|
| 31 |
+
<div class="mode-slider" id="mode-slider"></div>
|
| 32 |
+
<button class="mode-btn active" data-mode="jarvis" id="btn-jarvis" title="Jarvis — brain auto-routes to General or Realtime">
|
| 33 |
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
| 34 |
+
<span class="mode-btn-text">Jarvis</span>
|
| 35 |
+
</button>
|
| 36 |
+
<button class="mode-btn" data-mode="general" id="btn-general" title="General — no web search">
|
| 37 |
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
| 38 |
+
<span class="mode-btn-text">General</span>
|
| 39 |
+
</button>
|
| 40 |
+
<button class="mode-btn" data-mode="realtime" id="btn-realtime" title="Realtime — live web search">
|
| 41 |
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
| 42 |
+
<span class="mode-btn-text">Realtime</span>
|
| 43 |
+
</button>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="header-right">
|
| 47 |
+
<div class="status-badge" id="status-badge">
|
| 48 |
+
<span class="status-dot"></span>
|
| 49 |
+
<span class="status-text">Online</span>
|
| 50 |
+
</div>
|
| 51 |
+
<button class="btn-icon activity-toggle" id="activity-toggle" title="View activity flow">
|
| 52 |
+
<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="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
|
| 53 |
+
</button>
|
| 54 |
+
<button class="btn-icon search-results-toggle" id="search-results-toggle" title="View search results" style="display: none;">
|
| 55 |
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 56 |
+
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
| 57 |
+
</svg>
|
| 58 |
+
</button>
|
| 59 |
+
<button class="btn-icon settings-btn" id="settings-btn" title="Settings">
|
| 60 |
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 61 |
+
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
| 62 |
+
</svg>
|
| 63 |
+
</button>
|
| 64 |
+
<button class="btn-icon new-chat-btn" id="new-chat-btn" title="New Chat">
|
| 65 |
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 66 |
+
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
| 67 |
+
</svg>
|
| 68 |
+
</button>
|
| 69 |
+
</div>
|
| 70 |
+
</header>
|
| 71 |
+
<aside class="activity-panel glass-panel" id="activity-panel" aria-hidden="true">
|
| 72 |
+
<div class="activity-header">
|
| 73 |
+
<h3 class="activity-title">Activity</h3>
|
| 74 |
+
<button class="activity-close" id="activity-close" title="Close" aria-label="Close activity panel">
|
| 75 |
+
<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>
|
| 76 |
+
</button>
|
| 77 |
+
</div>
|
| 78 |
+
<div class="activity-list" id="activity-list">
|
| 79 |
+
<div class="activity-empty" id="activity-empty">Send a message to see the flow here.</div>
|
| 80 |
+
</div>
|
| 81 |
+
</aside>
|
| 82 |
+
<main class="chat-area" id="chat-area">
|
| 83 |
+
<div class="chat-messages" id="chat-messages">
|
| 84 |
+
<div class="welcome-screen" id="welcome-screen">
|
| 85 |
+
<div class="welcome-icon">
|
| 86 |
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
| 87 |
+
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
|
| 88 |
+
</svg>
|
| 89 |
+
</div>
|
| 90 |
+
<h2 class="welcome-title" id="welcome-title">Good evening.</h2>
|
| 91 |
+
<p class="welcome-sub">How may I assist you today?</p>
|
| 92 |
+
<div class="welcome-chips">
|
| 93 |
+
<button class="chip" data-msg="What can you do?">What can you do?</button>
|
| 94 |
+
<button class="chip" data-msg="Open YouTube for me">Open YouTube</button>
|
| 95 |
+
<button class="chip" data-msg="Tell me a fun fact">Fun fact</button>
|
| 96 |
+
<button class="chip" data-msg="Play some music">Play music</button>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</main>
|
| 101 |
+
<footer class="input-bar glass-panel">
|
| 102 |
+
<div class="input-wrapper">
|
| 103 |
+
<textarea id="message-input"
|
| 104 |
+
placeholder="Ask Jarvis anything..."
|
| 105 |
+
rows="1"
|
| 106 |
+
maxlength="32000"></textarea>
|
| 107 |
+
<div class="input-actions">
|
| 108 |
+
<button class="action-btn mic-btn" id="mic-btn" title="Voice input — click to start auto-listen (restarts after each response)">
|
| 109 |
+
<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">
|
| 110 |
+
<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"/>
|
| 111 |
+
</svg>
|
| 112 |
+
<svg class="mic-icon-active" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
| 113 |
+
<rect x="4" y="4" width="16" height="16" rx="3"/>
|
| 114 |
+
</svg>
|
| 115 |
+
</button>
|
| 116 |
+
<button class="action-btn tts-btn" id="tts-btn" title="Text to Speech">
|
| 117 |
+
<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">
|
| 118 |
+
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
| 119 |
+
<line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>
|
| 120 |
+
</svg>
|
| 121 |
+
<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">
|
| 122 |
+
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
| 123 |
+
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
| 124 |
+
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
|
| 125 |
+
</svg>
|
| 126 |
+
</button>
|
| 127 |
+
<button class="action-btn send-btn" id="send-btn" title="Send message">
|
| 128 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 129 |
+
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
| 130 |
+
</svg>
|
| 131 |
+
</button>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="input-meta" id="input-meta">
|
| 135 |
+
<span class="char-count" id="char-count"></span>
|
| 136 |
+
</div>
|
| 137 |
+
</footer>
|
| 138 |
+
<aside class="search-results-widget glass-panel" id="search-results-widget" aria-hidden="true">
|
| 139 |
+
<div class="search-results-header">
|
| 140 |
+
<h3 class="search-results-title">Live search</h3>
|
| 141 |
+
<button class="search-results-close" id="search-results-close" title="Close" aria-label="Close search results">
|
| 142 |
+
<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>
|
| 143 |
+
</button>
|
| 144 |
+
</div>
|
| 145 |
+
<div class="search-results-query" id="search-results-query"></div>
|
| 146 |
+
<div class="search-results-answer" id="search-results-answer"></div>
|
| 147 |
+
<div class="search-results-list" id="search-results-list"></div>
|
| 148 |
+
</aside>
|
| 149 |
+
<div class="settings-panel glass-panel" id="settings-panel" aria-hidden="true">
|
| 150 |
+
<div class="settings-header">
|
| 151 |
+
<h3 class="settings-title">Settings</h3>
|
| 152 |
+
<button class="settings-close btn-icon" id="settings-close" title="Close" aria-label="Close settings">
|
| 153 |
+
<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>
|
| 154 |
+
</button>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="settings-body">
|
| 157 |
+
<div class="settings-item">
|
| 158 |
+
<label class="settings-label" for="toggle-auto-activity">Auto-open activity panel</label>
|
| 159 |
+
<label class="toggle-switch">
|
| 160 |
+
<input type="checkbox" id="toggle-auto-activity" checked>
|
| 161 |
+
<span class="toggle-slider"></span>
|
| 162 |
+
</label>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="settings-item">
|
| 165 |
+
<label class="settings-label" for="toggle-auto-search">Auto-open search results</label>
|
| 166 |
+
<label class="toggle-switch">
|
| 167 |
+
<input type="checkbox" id="toggle-auto-search" checked>
|
| 168 |
+
<span class="toggle-slider"></span>
|
| 169 |
+
</label>
|
| 170 |
+
</div>
|
| 171 |
+
<div class="settings-item">
|
| 172 |
+
<label class="settings-label" for="toggle-thinking-sounds">Thinking sound effects</label>
|
| 173 |
+
<label class="toggle-switch">
|
| 174 |
+
<input type="checkbox" id="toggle-thinking-sounds" checked>
|
| 175 |
+
<span class="toggle-slider"></span>
|
| 176 |
+
</label>
|
| 177 |
+
</div>
|
| 178 |
+
<p class="settings-hint">When enabled, the activity and search panels open automatically when data is available. Thinking sounds play a short cue while the AI processes your message.</p>
|
| 179 |
+
</div>
|
| 180 |
+
</div>
|
| 181 |
+
<div class="panel-overlay" id="panel-overlay" aria-hidden="true"></div>
|
| 182 |
+
<div class="speech-widget" id="speech-widget" aria-hidden="true">
|
| 183 |
+
<div class="speech-widget-inner">
|
| 184 |
+
<span class="speech-widget-label">Listening...</span>
|
| 185 |
+
<span class="speech-widget-text" id="speech-widget-text"></span>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="toast-container" id="toast-container" aria-live="polite"></div>
|
| 189 |
+
</div>
|
| 190 |
+
<script src="orb.js"></script>
|
| 191 |
+
<script src="script.js"></script>
|
| 192 |
+
</body>
|
| 193 |
</html>
|