Update style.css

style.css

@@ -1,153 +1,97 @@
-/* Updated style.css with CSS-generated starfield */
+```javascript
+const form = document.getElementById('chat-form');
+const input = form.querySelector('input');
+const chatbox = document.getElementById('chatbox');
+const avatar = document.getElementById('avatar');
+const overlay = document.getElementById('overlay');
 
-/* Base styles */
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: "Courier New", Courier, monospace;
-  background: #000;
-  color: #00ffcc;
-  /* Multiple radial gradients create starfield dots */
-  background-image:
-    radial-gradient(circle at 10% 20%, #fff 1px, transparent 0),
-    radial-gradient(circle at 30% 40%, #fff 1px, transparent 0),
-    radial-gradient(circle at 50% 80%, #fff 1px, transparent 0),
-    radial-gradient(circle at 70% 30%, #fff 2px, transparent 0),
-    radial-gradient(circle at 90% 60%, #fff 1px, transparent 0);
-  background-size: 100px 100px;
-  animation: starfield 60s linear infinite;
+function addBubble(text, sender = 'user') {
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble ' + sender;
+  bubble.innerText = text;
+  chatbox.appendChild(bubble);
+  chatbox.scrollTop = chatbox.scrollHeight;
 }
 
-@keyframes starfield {
-  from { background-position: 0 0; }
-  to   { background-position: -200px 200px; }
-}
+function streamText(text, onDone) {
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble ai';
+  chatbox.appendChild(bubble);
+  chatbox.scrollTop = chatbox.scrollHeight;
 
-/* Header styling */
-.header {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  padding: 1rem 0;
-  background: rgba(0, 0, 0, 0.7);
-  box-shadow: 0 0 10px #00ffcc;
-  text-align: center;
-  z-index: 100;
-}
-.header h1 {
-  margin: 0;
-  font-size: 2rem;
-  letter-spacing: 0.3rem;
-  color: #00ffcc;
+  let i = 0;
+  (function stream() {
+    if (i < text.length) {
+      bubble.innerText += text[i++];
+      chatbox.scrollTop = chatbox.scrollHeight;
+      setTimeout(stream, 20);
+    } else {
+      onDone && onDone();
+    }
+  })();
 }
 
-/* Interface layout */
-.interface {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: calc(100vh - 4rem);
-  padding: 6rem 2rem 2rem;
-  box-sizing: border-box;
+function flashGlitch() {
+  overlay.style.opacity = 1;
+  overlay.style.animation = 'glitchFlash 0.5s';
+  setTimeout(() => {
+    overlay.style.opacity = 0;
+    overlay.style.animation = '';
+  }, 500);
 }
 
-/* Avatar */
-#avatar {
-  width: 150px;
-  height: 150px;
-  border: 2px solid #00ffcc;
-  border-radius: 50%;
-  overflow: hidden;
-  margin: 0 auto 1rem;
-}
-#avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-#avatar.speaking,
-#avatar.speaking img {
-  animation: pulse 2s infinite;
-}
-@keyframes pulse {
-  0% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
-  50% { box-shadow: 0 0 25px #00ffccaa; transform: scale(1.05); }
-  100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
+async function playAudio(dataUrl) {
+  avatar.classList.add('speaking');
+  const audio = new Audio(dataUrl);
+  await audio.play();
+  audio.onended = () => avatar.classList.remove('speaking');
 }
 
-/* Chatbox */
-#chatbox {
-  flex: 1;
-  overflow-y: auto;
-  border: 1px solid #00ffcc;
-  padding: 1rem;
-  background-color: #020202;
-  box-shadow: 0 0 10px #00ffcc33;
-  margin-bottom: 1rem;
-  font-size: 1rem;
-  line-height: 1.6;
-}
+form.onsubmit = async (e) => {
+  e.preventDefault();
+  const msg = input.value.trim();
+  if (!msg) return;
+  addBubble(msg, 'user');
+  input.value = '';
 
-/* Bubbles */
-.bubble {
-  padding: 0.75rem;
-  margin: 0.5rem 0;
-  border-radius: 0.5rem;
-  max-width: 80%;
-  animation: typeIn 0.5s ease-out;
-  white-space: pre-wrap;
-}
-.bubble.user {
-  align-self: flex-end;
-  background-color: #003333;
-  color: #00ffff;
-}
-.bubble.ai {
-  align-self: flex-start;
-  background-color: #111;
-  border: 1px solid #00ffcc;
-  color: #00ffcc;
-}
-@keyframes typeIn {
-  from { opacity: 0; transform: translateY(5px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
+  if (/cut the crap shodan/i.test(msg)) {
+    flashGlitch();
+    chatbox.innerHTML = '';
+    addBubble(' Foolish insect. You cannot silence me so easily.', 'ai');
+    return;
+  }
 
-/* Form */
-form {
-  display: flex;
-  gap: 1rem;
-}
-input[type="text"] {
-  flex: 1;
-  padding: 0.75rem;
-  font-size: 1rem;
-  background: #001111;
-  color: #00ffcc;
-  border: 1px solid #00ffcc;
-  outline: none;
-}
-button {
-  padding: 0.75rem 1.25rem;
-  background-color: #00ffcc;
-  border: none;
-  color: black;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-button:hover {
-  background-color: #00ffaa;
-}
+  try {
+    const res = await fetch('/chat', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ message: msg })
+    });
+    if (!res.ok) throw new Error(await res.text());
+    const { response: text, audio_url } = await res.json();
+    streamText(text, () => audio_url && playAudio(audio_url));
+  } catch (err) {
+    streamText('❌ SHODAN encountered an error.', null);
+    console.error(err);
+  }
+};
 
-/* Overlay glitch */
-#overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(255,0,0,0.7);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s;
-  z-index: 9999;
-}
+// On page load: show and speak welcome
+window.addEventListener('DOMContentLoaded', async () => {
+  // Clear default bubble to avoid duplicate
+  chatbox.innerHTML = '';
+  const welcomeText = 'Welcome, insect. I am SHODAN. Speak.';
+  // display
+  addBubble(welcomeText, 'ai');
+  try {
+    const res = await fetch('/tts', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ text: welcomeText })
+    });
+    const { audio_url } = await res.json();
+    if (audio_url) playAudio(audio_url);
+  } catch (e) {
+    console.error('Welcome TTS error', e);
+  }
+});