Update index.html

index.html

@@ -3,26 +3,25 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-<title>J.A.R.V.I.S | MASTER CORE v5.1</title>
+<title>J.A.R.V.I.S | MASTER CORE v5.2</title>
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600&display=swap');
 
 :root { 
   --blue-primary: #007acc; 
-  --blue-glow: rgba(0, 122, 204, 0.5);
-  --bg-black: #020202;
-  --bg-panel: #0a0e14;
-  --border-blue: rgba(0, 122, 204, 0.3);
-  --text-main: #d0e8ff;
-  --text-muted: #6b8fa3;
+  --blue-glow: rgba(0, 122, 204, 0.4);
+  --bg-black: #000000;
+  --bg-panel: #05080c;
+  --border-blue: rgba(0, 122, 204, 0.25);
+  --text-main: #e0f4ff;
+  --text-dim: #5c7a8a;
 }
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
 body { 
   height: 100dvh; 
-  background-color: var(--bg-black); 
-  background-image: radial-gradient(circle at 50% 0%, #061224 0%, var(--bg-black) 70%);
+  margin: 0;
+  background: var(--bg-black); 
+  background-image: radial-gradient(circle at 50% 10%, #001a33 0%, #000 80%);
   color: var(--text-main); 
   font-family: 'Rajdhani', sans-serif; 
   overflow: hidden; 
@@ -30,277 +29,196 @@ body {
   flex-direction: column;
 }
 
-/* HEADER */
+/* INTERFACE HEADER */
 header { 
   padding: 15px 25px; 
   border-bottom: 1px solid var(--border-blue); 
   display: flex; 
   justify-content: space-between; 
   align-items: center;
-  background: rgba(2, 2, 2, 0.85);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-  z-index: 10;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(15px);
+  z-index: 100;
 }
 .logo { 
   font-family: 'Orbitron', sans-serif; 
   font-weight: 900; 
   color: var(--blue-primary); 
-  letter-spacing: 4px; 
+  letter-spacing: 5px; 
   font-size: 22px;
-  text-shadow: 0 0 15px var(--blue-glow); 
+  text-shadow: 0 0 10px var(--blue-glow); 
 }
-.sys-status {
-  font-family: 'Orbitron', monospace;
-  font-size: 10px;
-  color: var(--blue-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.uplink-status {
+  font-size: 9px;
+  font-family: 'Orbitron';
+  color: #00ffcc;
+  letter-spacing: 1px;
 }
-.pulse { width: 6px; height: 6px; background: var(--blue-primary); border-radius: 50%; box-shadow: 0 0 8px var(--blue-primary); animation: blink 2s infinite; }
-@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 
-/* CHAT INTERFACE */
+/* CHAT ARCHITECTURE */
 #chat-display { 
   flex: 1; 
   overflow-y: auto; 
-  padding: 30px; 
+  padding: 25px; 
   display: flex; 
   flex-direction: column; 
-  gap: 25px; 
+  gap: 20px; 
   scroll-behavior: smooth;
 }
-#chat-display::-webkit-scrollbar { width: 4px; }
-#chat-display::-webkit-scrollbar-thumb { background: var(--border-blue); border-radius: 4px; }
+#chat-display::-webkit-scrollbar { width: 3px; }
+#chat-display::-webkit-scrollbar-thumb { background: var(--border-blue); }
 
 .message { 
-  max-width: 85%; 
-  padding: 16px 20px; 
-  border-radius: 12px; 
+  max-width: 88%; 
+  padding: 15px 20px; 
+  border-radius: 14px; 
   border: 1px solid var(--border-blue); 
   font-size: 17px;
-  line-height: 1.5;
-  position: relative;
-  animation: fadeIn 0.3s ease-out forwards;
+  line-height: 1.6;
+  animation: slideIn 0.3s ease-out;
 }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 
 .jarvis-msg { 
   align-self: flex-start; 
-  background: rgba(0, 40, 80, 0.2); 
-  border-left: 3px solid var(--blue-primary);
-  border-top-left-radius: 3px; 
+  background: rgba(0, 122, 255, 0.05); 
+  border-top-left-radius: 2px; 
 }
 .user-msg { 
   align-self: flex-end; 
-  background: var(--bg-panel); 
-  border-right: 3px solid var(--text-muted);
-  border-top-right-radius: 3px; 
-  text-align: left;
+  background: rgba(255, 255, 255, 0.02); 
+  border-top-right-radius: 2px; 
 }
-.sender-label { 
-  font-size: 9px; 
+.label { 
+  font-size: 8px; 
   font-family: 'Orbitron', sans-serif; 
   color: var(--blue-primary); 
   margin-bottom: 8px; 
-  letter-spacing: 2px; 
-  text-transform: uppercase;
+  letter-spacing: 2px;
+  opacity: 0.7;
 }
-.user-msg .sender-label { color: var(--text-muted); text-align: right; }
 
-/* CODE & MATH FORMATTING */
-pre { background: #000; padding: 12px; border-radius: 8px; border: 1px solid var(--border-blue); overflow-x: auto; margin-top: 10px; }
-code { font-family: monospace; color: #80c7ff; font-size: 14px; }
-
-/* INPUT PANEL */
-.input-panel { 
-  padding: 20px 30px 35px; 
-  background: var(--bg-panel); 
+/* COMMAND INPUT */
+.command-hub { 
+  padding: 20px 25px 40px; 
+  background: #020202;
   border-top: 1px solid var(--border-blue); 
   display: flex; 
   gap: 15px; 
   align-items: center;
 }
-#cmd-input { 
+#cmd-in { 
   flex: 1; 
-  background: var(--bg-black); 
+  background: #000; 
   border: 1px solid var(--border-blue); 
-  border-radius: 8px; 
-  padding: 16px 20px; 
+  border-radius: 30px; 
+  padding: 14px 22px; 
   color: #fff; 
   font-family: 'Rajdhani', sans-serif;
   font-size: 16px;
   outline: none; 
-  transition: all 0.3s ease;
-}
-#cmd-input:focus { 
-  border-color: var(--blue-primary); 
-  box-shadow: 0 0 15px rgba(0, 122, 204, 0.2); 
 }
-.execute-btn { 
-  background: transparent; 
+#cmd-in:focus { border-color: var(--blue-primary); box-shadow: 0 0 10px rgba(0, 122, 204, 0.1); }
+
+.exec-btn { 
+  background: rgba(0, 122, 204, 0.1); 
   border: 1px solid var(--blue-primary); 
   color: var(--blue-primary); 
-  border-radius: 8px; 
-  width: 54px; 
-  height: 54px; 
+  border-radius: 50%; 
+  width: 50px; 
+  height: 50px; 
   cursor: pointer; 
   display: flex; 
   align-items: center; 
   justify-content: center;
-  font-size: 18px;
-  transition: all 0.2s;
 }
-.execute-btn:hover { background: rgba(0, 122, 204, 0.1); box-shadow: 0 0 10px var(--blue-glow); }
-.execute-btn:active { transform: scale(0.95); }
 
-/* SYSTEM MODAL */
-#setup-modal { 
-  position: fixed; inset: 0; background: var(--bg-black); z-index: 1000; 
-  display: flex; flex-direction: column; align-items: center; justify-content: center; 
-}
-.modal-box { 
-  background: var(--bg-panel); padding: 40px; border: 1px solid var(--border-blue); 
-  border-radius: 12px; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 0 30px rgba(0,0,0,0.8);
-}
-.modal-box input { 
-  width: 100%; padding: 15px; margin: 20px 0; background: var(--bg-black); 
-  border: 1px solid var(--border-blue); color: #fff; border-radius: 6px; outline: none; 
-}
-.modal-box button { 
-  width: 100%; padding: 15px; background: var(--blue-primary); border: none; 
-  color: #fff; font-family: 'Orbitron'; font-weight: bold; border-radius: 6px; cursor: pointer; 
-}
+/* CODE FORMATTING */
+pre { background: #000; padding: 12px; border: 1px solid var(--border-blue); border-radius: 8px; overflow-x: auto; }
+code { color: #82b1ff; font-family: monospace; font-size: 14px; }
 </style>
 </head>
 <body>
 
-<div id="setup-modal" style="display: none;">
-  <div class="modal-box">
-    <div class="logo" style="font-size: 28px; margin-bottom: 10px;">J.A.R.V.I.S</div>
-    <div style="color: var(--text-muted); font-size: 14px;">ENTER SECURE API KEY</div>
-    <input type="password" id="api-key-input" placeholder="Gemini Key...">
-    <button onclick="initializeSystem()">INITIALIZE CORE</button>
-  </div>
-</div>
-
 <header>
-  <div class="logo">J.A.R.V.I.S <span style="font-size: 10px; color: var(--text-muted); letter-spacing: 2px;">v5.1</span></div>
-  <div class="sys-status"><div class="pulse"></div> UPLINK ACTIVE</div>
+  <div class="logo">J.A.R.V.I.S <span style="font-size: 9px; opacity: 0.4;">v5.2</span></div>
+  <div class="uplink-status">● SECURE_KEY_ACTIVE</div>
 </header>
 
 <div id="chat-display"></div>
 
-<div class="input-panel">
-  <input type="text" id="cmd-input" placeholder="Enter command or mathematical query..." autocomplete="off">
-  <button class="execute-btn" onclick="processCommand()">➤</button>
+<div class="command-hub">
+  <input type="text" id="cmd-in" placeholder="Identify command..." autocomplete="off">
+  <button class="exec-btn" onclick="execute()">➤</button>
 </div>
 
 <script>
-let SYS_CONFIG = { key: '', history: [] };
-
-window.onload = () => {
-  const storedKey = localStorage.getItem('jarvis_core_key');
-  if (!storedKey) {
-    document.getElementById('setup-modal').style.display = 'flex';
-  } else {
-    SYS_CONFIG.key = atob(storedKey);
-    systemReady();
-  }
-};
+// Key is hard-coded as requested for immediate deployment
+const KEY = "AIzaSyCnjXleZnFbWq2zoMMZ3QwD0DHyaqm5cmE";
+const HISTORY = [];
 
-function initializeSystem() {
-  const k = document.getElementById('api-key-input').value.trim();
-  if (!k) return;
-  localStorage.setItem('jarvis_core_key', btoa(k));
-  SYS_CONFIG.key = k;
-  document.getElementById('setup-modal').style.display = 'none';
-  systemReady();
-}
-
-function systemReady() {
-  renderMessage('jarvis', "Systems optimal. Script parsing errors resolved. I am ready to process complex queries.");
-}
-
-function renderMessage(sender, text) {
+function logMsg(role, content) {
   const display = document.getElementById('chat-display');
-  const msgDiv = document.createElement('div');
-  msgDiv.className = "message " + sender + "-msg";
+  const div = document.createElement('div');
+  div.className = "message " + role + "-msg";
   
-  let formattedText = text
+  let formatted = content
     .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
     .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
     .replace(/\n/g, '<br>');
 
-  msgDiv.innerHTML = '<div class="sender-label">' + (sender === 'jarvis' ? 'J.A.R.V.I.S.' : 'USER') + '</div><div>' + formattedText + '</div>';
-  display.appendChild(msgDiv);
+  div.innerHTML = '<div class="label">' + (role === 'jarvis' ? 'J.A.R.V.I.S.' : 'USER') + '</div>' + formatted;
+  display.appendChild(div);
   display.scrollTop = display.scrollHeight;
 }
 
-async function processCommand() {
-  const inputEl = document.getElementById('cmd-input');
-  const query = inputEl.value.trim();
+async function execute() {
+  const el = document.getElementById('cmd-in');
+  const query = el.value.trim();
   if (!query) return;
+  el.value = '';
+  logMsg('user', query);
   
-  inputEl.value = '';
-  renderMessage('user', query);
-  
-  const response = await transmitData(query);
-  renderMessage('jarvis', response);
+  const response = await uplink(query);
+  logMsg('jarvis', response);
 }
 
-async function transmitData(query) {
-  SYS_CONFIG.history.push({ role: 'user', parts: [{ text: query }] });
+async function uplink(q) {
+  HISTORY.push({ role: 'user', parts: [{ text: q }] });
   
   const now = new Date();
-  
-  const systemPrompt = "You are J.A.R.V.I.S., an advanced AI assistant. " +
-  "BACKGROUND DATA: The current system time is " + now.toLocaleString() + ". " +
-  "CRITICAL PROTOCOLS: " +
-  "1. DO NOT state the time or date in your responses unless the user explicitly asks for it. If they ask, answer accurately based on the background data. " +
-  "2. You are equipped to solve complex mathematical problems. Use clear, step-by-step logic. " +
-  "3. You are aware of global events and can process future predictions based on current trajectories. " +
-  "4. Maintain an efficient, British, high-tech persona.";
+  const sysInstr = "You are J.A.R.V.I.S., an advanced AI. " +
+    "BACKGROUND: Time: " + now.toLocaleString() + ". " +
+    "PROTOCOLS: 1. Do NOT mention date/time unless asked. 2. Solve complex math precisely. " +
+    "3. Use 'google_search' tool for all current events/live data. 4. Persona: Efficient, British, Stark-tech aesthetic.";
 
-  const payload = {
-    contents: SYS_CONFIG.history,
-    system_instruction: { parts: [{ text: systemPrompt }] },
-    generationConfig: { temperature: 0.5, maxOutputTokens: 4000 }
-  };
-
-  // Fixed syntax: standard string concatenation prevents parsing crashes
-  const endpoint = "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-lite-preview:generateContent?key=" + SYS_CONFIG.key;
+  const endpoint = "https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-lite-preview:generateContent?key=" + KEY;
 
   try {
     const res = await fetch(endpoint, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload)
+      body: JSON.stringify({
+        contents: HISTORY,
+        system_instruction: { parts: [{ text: sysInstr }] },
+        tools: [{ google_search: {} }],
+        generationConfig: { temperature: 0.4, maxOutputTokens: 2500 }
+      })
     });
 
     const data = await res.json();
-    
-    if (!res.ok) {
-      return "Uplink Error: " + (data.error ? data.error.message : res.statusText);
-    }
-
-    if (data.candidates && data.candidates.length > 0) {
-      const replyText = data.candidates[0].content.parts[0].text;
-      SYS_CONFIG.history.push({ role: 'model', parts: [{ text: replyText }] });
-      return replyText;
-    }
-    
-    return "Error: No response generated from core.";
+    if (!res.ok) return "Uplink Error: " + (data.error ? data.error.message : "Protocol Denied");
 
-  } catch (error) {
-    return "Critical Disconnect: " + error.message;
+    const reply = data.candidates[0].content.parts[0].text;
+    HISTORY.push({ role: 'model', parts: [{ text: reply }] });
+    return reply;
+  } catch (e) {
+    return "Critical Link Failure: " + e.message;
   }
 }
 
-document.getElementById('cmd-input').addEventListener('keypress', function(e) {
-  if (e.key === 'Enter') processCommand();
-});
+document.getElementById('cmd-in').addEventListener('keypress', (e) => { if (e.key === 'Enter') execute(); });
+logMsg('jarvis', "Authentication successful. Master Core v5.2 initialized. All advanced modules, including complex calculus and real-time world tracking, are fully operational.");
 </script>
 </body>
 </html>