feat: welcome screen, Voice ON/OFF label, improved tip text

app.js

@@ -69,9 +69,11 @@ window.toggleTTS = function() {
     if (window.ttsEnabled) {
         btn.classList.add("tts-active");
         btn.title = "Voice ON — click to disable";
+        btn.innerHTML = "🔊 Voice ON";
     } else {
         btn.classList.remove("tts-active");
         btn.title = "Voice OFF — click to enable";
+        btn.innerHTML = "🔇 Voice OFF";
         window.speechSynthesis.cancel();
     }
 };
@@ -516,6 +518,9 @@ window._speakDirect = function(clean) {
       const prompt = input.value.trim();
       if (!prompt) return;
 
+      // Hide welcome message on first user input
+      const welcome = document.getElementById("welcome-msg");
+      if (welcome) welcome.style.display = "none";
       appendMessage(output, "You", prompt);
       input.value = "";
       if (sendBtn) sendBtn.disabled = true;

index.html

@@ -373,7 +373,7 @@
           <button class="mode-btn" id="btn-dryrun" onclick="setMode('dryrun')">🔍 Dry Run</button>
         </div>
         <button class="theme-btn" id="theme-btn" onclick="toggleTheme()" title="Toggle light/dark theme">🌙</button>
-        <button id="tts-btn" class="tts-btn" onclick="toggleTTS()" title="Voice OFF — click to enable">🔊 Voice</button>
+        <button id="tts-btn" class="tts-btn" onclick="toggleTTS()" title="Voice OFF — click to enable">🔇 Voice OFF</button>
         <button class="tts-btn" onclick="replayLast()" title="Replay last response">🔁 Replay</button>
         <select id="lang-select" class="header-btn" onchange="setLang(this.value)" title="TTS Language">
           <option value="en-US">🇺🇸 EN</option>
@@ -393,15 +393,53 @@
     </header>
 
     <div class="panel">
-      <div id="chat-output" class="panel"></div>
+      <div id="chat-output" class="panel">
+        <div id="welcome-msg" style="
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          text-align: center;
+          padding: 40px 20px;
+          opacity: 0.85;
+        ">
+          <div style="font-size: 48px; margin-bottom: 16px;">🖥️</div>
+          <div style="font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 8px;">&gt;_ DeepShell</div>
+          <div style="font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 1px;">AI-POWERED DEVOPS ASSISTANT & TRAINER</div>
+          <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px;">
+            <div style="background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 20px; min-width: 140px;">
+              <div style="font-size: 20px;">🤖</div>
+              <div style="font-size: 13px; font-weight: 600; color: var(--accent); margin: 4px 0;">Assistant</div>
+              <div style="font-size: 11px; color: var(--muted);">Fast DevOps answers</div>
+            </div>
+            <div style="background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 20px; min-width: 140px;">
+              <div style="font-size: 20px;">🎓</div>
+              <div style="font-size: 13px; font-weight: 600; color: var(--accent); margin: 4px 0;">Trainer</div>
+              <div style="font-size: 11px; color: var(--muted);">Learn with examples</div>
+            </div>
+            <div style="background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 20px; min-width: 140px;">
+              <div style="font-size: 20px;">🔍</div>
+              <div style="font-size: 13px; font-weight: 600; color: var(--accent); margin: 4px 0;">Dry Run</div>
+              <div style="font-size: 11px; color: var(--muted);">Safe command analysis</div>
+            </div>
+          </div>
+          <div style="font-size: 12px; color: var(--muted); max-width: 400px; line-height: 1.6;">
+            Specialized for <span style="color: var(--accent);">Linux</span> • <span style="color: var(--accent);">Docker</span> • <span style="color: var(--accent);">Kubernetes</span> • <span style="color: var(--accent);">Terraform</span> • <span style="color: var(--accent);">AWS</span>
+          </div>
+          <div style="margin-top: 20px; font-size: 11px; color: var(--muted);">
+            🔊 Voice TTS in English & Hindi &nbsp;|&nbsp; ⚡ Powered by Groq &nbsp;|&nbsp; 🔒 DevOps-only scope
+          </div>
+        </div>
+      </div>
 
       <form id="chat-form" class="composer" autocomplete="off">
         <textarea id="chat-input" placeholder="Type your prompt… e.g., Show me all running Docker containers."></textarea>
         <button id="chat-send" type="submit">Send</button>
       </form>
 
-      <div class="hint">
-        Tip: All code blocks have copy buttons. Click to copy commands to your clipboard.
+      <div class="hint" style="font-size: 13px; text-align:center;">
+        💡 Tip: All code blocks have copy buttons. &nbsp;|&nbsp; Use <b>Trainer mode</b> for structured learning. &nbsp;|&nbsp; <b>Dry Run</b> before executing risky commands.
       </div>
     </div>
   </div>