Spaces:

AiCoderv2
/

anycoder-bba383d3

Running

App Files Files Community

AiCoderv2 commited on Dec 8, 2025

Commit

4261cb3

verified ·

1 Parent(s): 20d3050

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +470 -169

index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>DuckDuckGo AI Chatbot</title>
@@ -9,7 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <style>
-    :root{
       --bg: #0b1020;
       --bg2: #0f1630;
       --panel: #0f1732;
@@ -23,13 +24,20 @@
       --danger: #f87171;
       --bubble-user: #1a254f;
       --bubble-bot: #141e3d;
-      --shadow: 0 10px 30px rgba(0,0,0,.35);
       --radius: 14px;
     }
-    *{box-sizing:border-box}
-    html, body{
-      margin:0; padding:0; height:100%;
-      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
       color: var(--text);
       background:
         radial-gradient(1200px 800px at 10% -20%, #20306a 0%, transparent 60%),
@@ -38,219 +46,481 @@
         linear-gradient(180deg, var(--bg), var(--bg2));
       background-attachment: fixed;
     }
-    a{color: var(--accent)}
-    .app{
-      display:flex; flex-direction:column; min-height:100%;
-      width:100%; max-width:1100px; margin:0 auto;
     }
-    header{
-      position: sticky; top:0; z-index:10;
       backdrop-filter: saturate(180%) blur(8px);
-      background: linear-gradient(180deg, rgba(10,16,34,.8), rgba(10,16,34,.35));
-      border-bottom: 1px solid rgba(255,255,255,.06);
     }
-    .topbar{
-      display:flex; align-items:center; justify-content:space-between;
-      padding:14px 18px; gap:12px;
     }
-    .brand{
-      display:flex; align-items:center; gap:12px; min-width:0;
     }
-    .logo{
-      width:36px; height:36px; border-radius:10px;
       background: conic-gradient(from 210deg, #6ea8fe, #8ad1ff, #6ea8fe);
-      box-shadow: 0 6px 16px rgba(110,168,254,.35), inset 0 0 18px rgba(255,255,255,.2);
-      position:relative;
     }
-    .logo::after{
-      content:""; position:absolute; inset:3px; border-radius:8px;
-      background: radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,.5), transparent 40%),
-                  linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
     }
-    .titles{
-      min-width:0;
     }
-    .title{
-      font-weight:800; letter-spacing:.2px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
     }
-    .subtitle{
-      font-size:12px; color:var(--muted);
     }
-    .links{
-      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
     }
-    .btn{
-      appearance:none; border:none; cursor:pointer; font: inherit; color:inherit;
-      padding:10px 14px; border-radius:10px; background: #1a254f; color:#dfe8ff;
-      display:inline-flex; align-items:center; gap:8px;
-      border:1px solid rgba(255,255,255,.08);
-      transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
     }
-    .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18) }
-    .btn.secondary{ background: #0f1732; }
-    .btn.ghost{ background: transparent; border-color: rgba(255,255,255,.1) }
-    .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }
-    .icon{
-      width:18px; height:18px; display:inline-block;
     }
-    main{
-      flex:1; display:flex; flex-direction:column; padding: 12px;
     }
-    .chat{
-      flex:1; overflow:auto; padding: 12px; padding-bottom: 24px;
-      scroll-behavior:smooth;
     }
-    .messages{
-      display:flex; flex-direction:column; gap:12px;
     }
-    .row{
-      display:flex; gap:10px; align-items:flex-end;
     }
-    .row.user{ justify-content:flex-end; }
-    .row.bot{ justify-content:flex-start; }
-    .avatar{
-      width:32px; height:32px; border-radius:50%; background:#172046; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
-      border:1px solid rgba(255,255,255,.08);
       box-shadow: var(--shadow);
-      flex-shrink:0;
     }
-    .avatar.bot{
       background: radial-gradient(100px 80px at 20% 10%, #2a3d7a, #192555);
     }
-    .avatar.user{
       background: radial-gradient(120px 90px at 30% 10%, #1a2c5f, #0e1736);
     }
-    .bubble{
       max-width: min(800px, 86vw);
       padding: 12px 14px;
       border-radius: var(--radius);
-      border: 1px solid rgba(255,255,255,.08);
       box-shadow: var(--shadow);
-      line-height:1.55;
-      position:relative;
-      word-wrap:break-word;
-      overflow-wrap:anywhere;
     }
-    .bubble.user{
       background: linear-gradient(180deg, #152152, #101a3e);
       border-top-right-radius: 6px;
     }
-    .bubble.bot{
       background: linear-gradient(180deg, #111a3b, #0c1431);
       border-bottom-left-radius: 6px;
     }
-    .bubble .meta{
-      font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
     }
-    .badge{
-      padding:2px 8px; border-radius: 999px; background:#0c1330; border:1px solid rgba(255,255,255,.08); font-size:11px; color:#c7d5ff;
     }
-    .answer{
-      font-size:15px; color:#e9efff;
     }
-    .answer p{ margin: 0 0 10px 0; }
-    .answer ul, .answer ol{ margin: 6px 0 10px 18px; }
-    .answer a{ color: var(--accent-2); text-decoration: underline; }
-    .sources{
-      display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
     }
-    .source{
-      font-size:12px; color:#c7d5ff; background:#0c1330; border:1px solid rgba(255,255,255,.08); padding:4px 8px; border-radius:8px;
     }
-    .composer{
-      position: sticky; bottom:0; z-index:9;
-      display:flex; gap:10px; align-items:flex-end; padding: 12px;
-      background: linear-gradient(180deg, rgba(10,16,34,.0), rgba(10,16,34,.85));
       backdrop-filter: blur(8px);
-      border-top: 1px solid rgba(255,255,255,.06);
     }
-    .input-wrap{
-      flex:1; display:flex; gap:10px; align-items:flex-end;
       background: linear-gradient(180deg, #0e1633, #0b122b);
-      border:1px solid rgba(255,255,255,.08);
-      border-radius: 14px; padding: 8px;
       box-shadow: var(--shadow);
     }
-    textarea{
-      flex:1; resize:none; border:none; outline:none; background:transparent; color:var(--text);
-      font: inherit; line-height:1.4; max-height:200px; min-height:40px;
       padding: 8px 10px;
     }
-    .actions{ display:flex; gap:8px; align-items:center; }
-    .small-btn{
-      width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
-      background: #0e1633; display:flex; align-items:center; justify-content:center; cursor:pointer;
       transition: transform .08s ease, border-color .2s ease, background .2s ease;
     }
-    .small-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.2) }
-    .small-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }
-    .suggestions{
-      position:absolute; left:12px; right:12px; bottom: 64px;
-      display:flex; flex-wrap:wrap; gap:8px;
-      pointer-events:none;
     }
-    .chip{
-      pointer-events:auto;
-      background:#0d1431; border:1px solid rgba(255,255,255,.1); color:#d8e4ff; padding:6px 10px; border-radius:999px; font-size:12px;
-      cursor:pointer; transition: transform .08s ease, background .2s ease, border-color .2s ease;
     }
-    .chip:hover{ transform: translateY(-1px); background:#121c44; border-color: rgba(255,255,255,.2) }
-    .typing{
-      display:inline-flex; align-items:center; gap:6px;
     }
-    .dot{
-      width:6px; height:6px; background:#c7d5ff; border-radius:50%; opacity:.8; animation: blink 1.4s infinite ease-in-out;
     }
-    .dot:nth-child(2){ animation-delay:.2s }
-    .dot:nth-child(3){ animation-delay:.4s }
     @keyframes blink {
-      0%, 80%, 100% { transform: translateY(0); opacity:.5 }
-      40% { transform: translateY(-3px); opacity:1 }
     }
-    .hint{
-      font-size:12px; color:var(--muted); padding: 4px 2px 0 2px;
     }
-    .footer-note{
-      text-align:center; font-size:12px; color:var(--muted); padding:10px 0 18px;
     }
     /* Responsive */
-    @media (max-width: 720px){
-      .topbar{ padding: 12px }
-      .titles .title{ font-size:17px }
-      .links{ display:none }
-      .bubble{ max-width: min(760px, 92vw) }
-      .suggestions{ bottom: 60px }
     }
     /* Scrollbar */
-    .chat::-webkit-scrollbar{ width:10px }
-    .chat::-webkit-scrollbar-thumb{
-      background: #16214a; border-radius:10px; border:2px solid transparent; background-clip: padding-box;
     }
-    .chat::-webkit-scrollbar-track{ background: transparent }
     /* Simple fade-in for messages */
-    .fade-in{
       animation: fadeIn .22s ease-out;
     }
-    @keyframes fadeIn{
-      from{ opacity:0; transform: translateY(6px) }
-      to{ opacity:1; transform: translateY(0) }
     }
-    .mono{
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 12px;
-      background: #0b1434; border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:10px; overflow:auto;
     }
   </style>
 </head>
 <body>
   <div class="app">
     <header>
@@ -259,12 +529,16 @@
           <div class="logo" aria-hidden="true"></div>
           <div class="titles">
             <div class="title">DuckDuckGo Answer Bot</div>
-            <div class="subtitle">Ask anything. Powered by DuckDuckGo Instant Answers.</div>
           </div>
         </div>
         <div class="links">
           <a class="btn ghost" href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">
-            <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 0c2.5 0 4.5 5 4.5 5s-2 5-4.5 5-4.5-5-4.5-5 2-5 4.5-5Zm0 10c4.5 0 6 5 6 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             DuckDuckGo
           </a>
           <button id="exportBtn" class="btn secondary" title="Export chat as JSON">
@@ -275,7 +549,8 @@
             <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6v12m8-12v12M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2L19 6M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             Clear
           </button>
-          <a class="btn" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" title="Built with anycoder">
             Built with anycoder
           </a>
         </div>
@@ -293,8 +568,10 @@
                 <span>DuckDuckGo Instant Answers</span>
               </div>
               <div class="answer">
-                <p>Hi! I’m your DuckDuckGo-powered assistant. Ask me anything: facts, definitions, unit conversions, weather, time, math, and more.</p>
-                <p class="hint">Tip: Try queries like “weather in Tokyo”, “define ubiquitous”, “2pm PST to CET”, or “what is 18 celsius in fahrenheit”.</p>
               </div>
             </div>
           </div>
@@ -319,7 +596,7 @@
     </main>
     <div class="footer-note">
-      Answers come from DuckDuckGo Instant Answers. Some queries may have no result—try rephrasing.
     </div>
   </div>
@@ -439,7 +716,7 @@
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
-      chatEl.scrollTop = chatEl.scrollHeight;
       return bubble;
     }
@@ -466,7 +743,7 @@
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
-      chatEl.scrollTop = chatEl.scrollHeight;
       return row;
     }
     function removeTyping(){
@@ -474,24 +751,56 @@
       if (t) t.remove();
     }
-    // DuckDuckGo fetch
-    async function fetchDDG(query){
       const url = new URL('https://api.duckduckgo.com/');
       url.searchParams.set('q', query);
       url.searchParams.set('format', 'json');
       url.searchParams.set('no_html', '1');
       url.searchParams.set('no_redirect', '1');
-      // Adding these helps get more structured fields
       url.searchParams.set('skip_disambig', '1');
-      const res = await fetch(url.toString(), {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json'
         }
-      });
-      if (!res.ok) throw new Error('Network error: ' + res.status);
-      const data = await res.json();
       return data;
     }
@@ -585,14 +894,14 @@
       abortController = new AbortController();
       try{
-        const data = await fetchDDG(text);
         removeTyping();
         const parsed = parseDDG(data, text);
         addMessage('bot', enhanceHTML(parsed.html), { badge: 'DuckDuckGo', note: parsed.note, sources: parsed.sources });
         history.push({ role: 'assistant', content: parsed.html, sources: parsed.sources });
       }catch(err){
         removeTyping();
-        const fallback = `<p>I couldn't reach DuckDuckGo (${escapeHTML(err.message)}). Check your connection and try again.</p>`;
         addMessage('bot', fallback, { badge: 'Error' });
         history.push({ role: 'assistant', content: fallback });
       }finally{
@@ -663,15 +972,7 @@
     // Initial
     renderSuggestions(defaultChips);
     updateTextareaHeight();
-    // Friendly: prefill a sample on first load if empty
-    setTimeout(() => {
-      if (!promptEl.value.trim()) {
-        promptEl.value = 'weather in Paris';
-        updateTextareaHeight();
-        buildPromptChips(promptEl.value);
-      }
-    }, 300);
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>DuckDuckGo AI Chatbot</title>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <style>
+    :root {
       --bg: #0b1020;
       --bg2: #0f1630;
       --panel: #0f1732;
       --danger: #f87171;
       --bubble-user: #1a254f;
       --bubble-bot: #141e3d;
+      --shadow: 0 10px 30px rgba(0, 0, 0, .35);
       --radius: 14px;
     }
+    * {
+      box-sizing: border-box
+    }
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       color: var(--text);
       background:
         radial-gradient(1200px 800px at 10% -20%, #20306a 0%, transparent 60%),
         linear-gradient(180deg, var(--bg), var(--bg2));
       background-attachment: fixed;
     }
+    a {
+      color: var(--accent)
+    }
+    .app {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      width: 100%;
+      max-width: 1100px;
+      margin: 0 auto;
     }
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 10;
       backdrop-filter: saturate(180%) blur(8px);
+      background: linear-gradient(180deg, rgba(10, 16, 34, .8), rgba(10, 16, 34, .35));
+      border-bottom: 1px solid rgba(255, 255, 255, .06);
     }
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 18px;
+      gap: 12px;
     }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
     }
+    .logo {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
       background: conic-gradient(from 210deg, #6ea8fe, #8ad1ff, #6ea8fe);
+      box-shadow: 0 6px 16px rgba(110, 168, 254, .35), inset 0 0 18px rgba(255, 255, 255, .2);
+      position: relative;
     }
+    .logo::after {
+      content: "";
+      position: absolute;
+      inset: 3px;
+      border-radius: 8px;
+      background: radial-gradient(120px 80px at 30% 20%, rgba(255, 255, 255, .5), transparent 40%),
+        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .18));
     }
+    .titles {
+      min-width: 0;
     }
+    .title {
+      font-weight: 800;
+      letter-spacing: .2px;
+      font-size: 18px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+    .subtitle {
+      font-size: 12px;
+      color: var(--muted);
+    }
+    .links {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .btn {
+      appearance: none;
+      border: none;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+      padding: 10px 14px;
+      border-radius: 10px;
+      background: #1a254f;
+      color: #dfe8ff;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid rgba(255, 255, 255, .08);
+      transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
     }
+    .btn:hover {
+      transform: translateY(-1px);
+      border-color: rgba(255, 255, 255, .18)
     }
+    .btn.secondary {
+      background: #0f1732;
     }
+    .btn.ghost {
+      background: transparent;
+      border-color: rgba(255, 255, 255, .1)
     }
+    .btn:disabled {
+      opacity: .6;
+      cursor: not-allowed;
+      transform: none
     }
+    .icon {
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+    }
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
     }
+    .chat {
+      flex: 1;
+      overflow: auto;
+      padding: 12px;
+      padding-bottom: 24px;
+      scroll-behavior: smooth;
     }
+    .messages {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
+    .row {
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
+    }
+    .row.user {
+      justify-content: flex-end;
+    }
+    .row.bot {
+      justify-content: flex-start;
+    }
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: #172046;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 700;
+      border: 1px solid rgba(255, 255, 255, .08);
       box-shadow: var(--shadow);
+      flex-shrink: 0;
     }
+    .avatar.bot {
       background: radial-gradient(100px 80px at 20% 10%, #2a3d7a, #192555);
     }
+    .avatar.user {
       background: radial-gradient(120px 90px at 30% 10%, #1a2c5f, #0e1736);
     }
+    .bubble {
       max-width: min(800px, 86vw);
       padding: 12px 14px;
       border-radius: var(--radius);
+      border: 1px solid rgba(255, 255, 255, .08);
       box-shadow: var(--shadow);
+      line-height: 1.55;
+      position: relative;
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
     }
+    .bubble.user {
       background: linear-gradient(180deg, #152152, #101a3e);
       border-top-right-radius: 6px;
     }
+    .bubble.bot {
       background: linear-gradient(180deg, #111a3b, #0c1431);
       border-bottom-left-radius: 6px;
     }
+    .bubble .meta {
+      font-size: 12px;
+      color: var(--muted);
+      margin-bottom: 6px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .badge {
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #0c1330;
+      border: 1px solid rgba(255, 255, 255, .08);
+      font-size: 11px;
+      color: #c7d5ff;
     }
+    .answer {
+      font-size: 15px;
+      color: #e9efff;
     }
+    .answer p {
+      margin: 0 0 10px 0;
     }
+    .answer ul,
+    .answer ol {
+      margin: 6px 0 10px 18px;
     }
+    .answer a {
+      color: var(--accent-2);
+      text-decoration: underline;
     }
+    .sources {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: 8px;
+    }
+    .source {
+      font-size: 12px;
+      color: #c7d5ff;
+      background: #0c1330;
+      border: 1px solid rgba(255, 255, 255, .08);
+      padding: 4px 8px;
+      border-radius: 8px;
+    }
+    .composer {
+      position: sticky;
+      bottom: 0;
+      z-index: 9;
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
+      padding: 12px;
+      background: linear-gradient(180deg, rgba(10, 16, 34, .0), rgba(10, 16, 34, .85));
       backdrop-filter: blur(8px);
+      border-top: 1px solid rgba(255, 255, 255, .06);
     }
+    .input-wrap {
+      flex: 1;
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
       background: linear-gradient(180deg, #0e1633, #0b122b);
+      border: 1px solid rgba(255, 255, 255, .08);
+      border-radius: 14px;
+      padding: 8px;
       box-shadow: var(--shadow);
     }
+    textarea {
+      flex: 1;
+      resize: none;
+      border: none;
+      outline: none;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      line-height: 1.4;
+      max-height: 200px;
+      min-height: 40px;
       padding: 8px 10px;
     }
+    .actions {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .small-btn {
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, .1);
+      background: #0e1633;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
       transition: transform .08s ease, border-color .2s ease, background .2s ease;
     }
+    .small-btn:hover {
+      transform: translateY(-1px);
+      border-color: rgba(255, 255, 255, .2)
+    }
+    .small-btn:disabled {
+      opacity: .6;
+      cursor: not-allowed;
+      transform: none
+    }
+    .suggestions {
+      position: absolute;
+      left: 12px;
+      right: 12px;
+      bottom: 64px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      pointer-events: none;
+    }
+    .chip {
+      pointer-events: auto;
+      background: #0d1431;
+      border: 1px solid rgba(255, 255, 255, .1);
+      color: #d8e4ff;
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: transform .08s ease, background .2s ease, border-color .2s ease;
+    }
+    .chip:hover {
+      transform: translateY(-1px);
+      background: #121c44;
+      border-color: rgba(255, 255, 255, .2)
+    }
+    .typing {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
     }
+    .dot {
+      width: 6px;
+      height: 6px;
+      background: #c7d5ff;
+      border-radius: 50%;
+      opacity: .8;
+      animation: blink 1.4s infinite ease-in-out;
     }
+    .dot:nth-child(2) {
+      animation-delay: .2s
     }
+    .dot:nth-child(3) {
+      animation-delay: .4s
     }
     @keyframes blink {
+      0%,
+      80%,
+      100% {
+        transform: translateY(0);
+        opacity: .5
+      }
+      40% {
+        transform: translateY(-3px);
+        opacity: 1
+      }
     }
+    .hint {
+      font-size: 12px;
+      color: var(--muted);
+      padding: 4px 2px 0 2px;
     }
+    .footer-note {
+      text-align: center;
+      font-size: 12px;
+      color: var(--muted);
+      padding: 10px 0 18px;
     }
     /* Responsive */
+    @media (max-width: 720px) {
+      .topbar {
+        padding: 12px
+      }
+      .titles .title {
+        font-size: 17px
+      }
+      .links {
+        display: none
+      }
+      .bubble {
+        max-width: min(760px, 92vw)
+      }
+      .suggestions {
+        bottom: 60px
+      }
     }
     /* Scrollbar */
+    .chat::-webkit-scrollbar {
+      width: 10px
+    }
+    .chat::-webkit-scrollbar-thumb {
+      background: #16214a;
+      border-radius: 10px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    .chat::-webkit-scrollbar-track {
+      background: transparent
     }
     /* Simple fade-in for messages */
+    .fade-in {
       animation: fadeIn .22s ease-out;
     }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(6px)
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0)
+      }
     }
+    .mono {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 12px;
+      background: #0b1434;
+      border: 1px solid rgba(255, 255, 255, .08);
+      border-radius: 8px;
+      padding: 10px;
+      overflow: auto;
     }
   </style>
 </head>
 <body>
   <div class="app">
     <header>
           <div class="logo" aria-hidden="true"></div>
           <div class="titles">
             <div class="title">DuckDuckGo Answer Bot</div>
+            <div class="subtitle">Real-time answers via DuckDuckGo Instant Answers API (CORS-proxied).</div>
           </div>
         </div>
         <div class="links">
           <a class="btn ghost" href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">
+            <svg class="icon" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 0c2.5 0 4.5 5 4.5 5s-2 5-4.5 5-4.5-5-4.5-5 2-5 4.5-5Zm0 10c4.5 0 6 5 6 5"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
             DuckDuckGo
           </a>
           <button id="exportBtn" class="btn secondary" title="Export chat as JSON">
             <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6v12m8-12v12M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2L19 6M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             Clear
           </button>
+          <a class="btn" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer"
+            title="Built with anycoder">
             Built with anycoder
           </a>
         </div>
                 <span>DuckDuckGo Instant Answers</span>
               </div>
               <div class="answer">
+                <p>Hi! I’m your DuckDuckGo-powered assistant. Ask me anything: facts, definitions, unit conversions,
+                  weather, time, math, and more.</p>
+                <p class="hint">Tip: Try queries like “weather in Tokyo”, “define ubiquitous”, “2pm PST to CET”, or
+                  “what is 18 celsius in fahrenheit”.</p>
               </div>
             </div>
           </div>
     </main>
     <div class="footer-note">
+      Answers come from DuckDuckGo Instant Answers. CORS is bypassed via public proxies for in-browser usage.
     </div>
   </div>
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
+      chatEl.scrollTop = chatEl.scrollHeight; // Auto scroll down
       return bubble;
     }
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
+      chatEl.scrollTop = chatEl.scrollHeight; // Auto scroll down
       return row;
     }
     function removeTyping(){
       if (t) t.remove();
     }
+    // Build DuckDuckGo API URL
+    function buildDDGUrl(query){
       const url = new URL('https://api.duckduckgo.com/');
       url.searchParams.set('q', query);
       url.searchParams.set('format', 'json');
       url.searchParams.set('no_html', '1');
       url.searchParams.set('no_redirect', '1');
       url.searchParams.set('skip_disambig', '1');
+      return url.toString();
+    }
+    // CORS proxy list (tried in order). Using public proxies to bypass CORS in-browser.
+    const CORS_PROXIES = [
+      // https://cors.isomorphic-git.org/ simply adds permissive CORS headers to any URL
+      (target) => `https://cors.isomorphic-git.org/${target}`,
+      // https://api.codetabs.com/v1/proxy?quest= forwards the request server-side
+      (target) => `https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(target)}`,
+      // https://corsproxy.io/? provides a minimal CORS proxy
+      (target) => `https://corsproxy.io/?${encodeURIComponent(target)}`
+    ];
+    // Fetch with automatic CORS proxy fallback (real DuckDuckGo data only).
+    async function fetchWithCorsProxies(targetUrl, signal){
+      let lastErr = null;
+      for (const buildProxy of CORS_PROXIES){
+        const proxyUrl = buildProxy(targetUrl);
+        try{
+          const res = await fetch(proxyUrl, { signal, headers: { 'Accept': 'application/json' } });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const contentType = res.headers.get('content-type') || '';
+          // Some proxies may return text; we only accept JSON
+          if (!contentType.includes('application/json') && !contentType.includes('text/plain')) {
+            throw new Error('Unexpected content-type: ' + contentType);
+          }
+          // If it's text (e.g., JSON as text), still parse it
+          const text = await res.text();
+          const data = JSON.parse(text);
+          return data;
+        }catch(err){
+          lastErr = err;
+          // try next proxy
         }
+      }
+      throw lastErr || new Error('All CORS proxies failed');
+    }
+    // DuckDuckGo fetch (real data only, via CORS proxies)
+    async function fetchDDG(query, signal){
+      const targetUrl = buildDDGUrl(query);
+      const data = await fetchWithCorsProxies(targetUrl, signal);
       return data;
     }
       abortController = new AbortController();
       try{
+        const data = await fetchDDG(text, abortController.signal);
         removeTyping();
         const parsed = parseDDG(data, text);
         addMessage('bot', enhanceHTML(parsed.html), { badge: 'DuckDuckGo', note: parsed.note, sources: parsed.sources });
         history.push({ role: 'assistant', content: parsed.html, sources: parsed.sources });
       }catch(err){
         removeTyping();
+        const fallback = `<p>Network error or CORS proxy issue: ${escapeHTML(err.message)}. Please try again.</p>`;
         addMessage('bot', fallback, { badge: 'Error' });
         history.push({ role: 'assistant', content: fallback });
       }finally{
     // Initial
     renderSuggestions(defaultChips);
     updateTextareaHeight();
   </script>
 </body>
 </html>