style: Gradient BG, smooth corners and animations

gbdiniz · gbdiniz · commit f4b68851fb85 · 2026-06-06T12:48:41.000-03:00
diff --git a/frontend/assets/css/theme.css b/frontend/assets/css/theme.css
@@ -1,6 +1,6 @@
 /* ===== Design Tokens ===== */
 :root {
-    --bg: #1E1E1E;
+    --bg: #0a0a0a;
     --surface: #27272A;
     --surface-2: #2F2F33;
     --border: #3F3F46;
@@ -21,14 +21,21 @@
 *::before,
 *::after {
     box-sizing: border-box;
-    margin: 0;
+    /* margin: 0; */
     /* padding: 0; */
 }
 
+@keyframes bg-pulse {
+    0%, 100% { background-position: 0% 90%; }
+    50% { background-position: 100% 50%; }
+}
+
 html,
 body {
     height: 100%;
-    background: var(--bg);
+    background: linear-gradient(180deg, #171717 60%, #031140 200%);
+    background-size: 300% 300%;
+    animation: bg-pulse 8s ease infinite;
     color: var(--text);
     font-family: 'Inter', system-ui, sans-serif;
     font-size: 15px;
@@ -129,7 +136,7 @@ body {
     padding: 12px 16px;
     word-break: break-word;
     line-height: 1.65;
-    border-radius: var(--radius);
+    border-radius: var(--radius-xl);
 }
 
 .message.user {
@@ -139,8 +146,10 @@ body {
 }
 
 .message.bot {
-    background: var(--bot-bg);
-    border: 1px solid var(--border);
+    /* background: var(--bot-bg); */
+    /* border: 1px solid var(--border); */
+    padding: 0;
+    border: none;
     font-size: 14.5px;
 }
 
@@ -243,7 +252,7 @@ body {
 
 /* ===== Input Area ===== */
 .input-area {
-    padding: 16px 24px 20px;
+    padding: 16px 24px;
     /* border-top: 1px solid var(--border); */
     background: var(--surface);
     transition: box-shadow 0.2s ease;
@@ -320,7 +329,6 @@ body {
 
 .input-row {
     display: flex;
-    gap: 10px;
     align-items: center;
 }
 
@@ -346,9 +354,9 @@ body {
 
 #send-button {
     flex-shrink: 0;
-    width: 44px;
-    height: 44px;
-    background: var(--accent);
+    /* width: 44px;
+    height: 44px; */
+    /* background: var(--accent); */
     border: none;
     cursor: pointer;
     display: flex;
@@ -386,7 +394,7 @@ body {
 }
 
 .empty-state-title {
-    font-size: 17px;
+    font-size: 2.2rem;
     font-weight: 600;
     color: var(--text);
 }
@@ -396,6 +404,37 @@ body {
     max-width: 360px;
 }
 
+/* ===== Suggestion Cards ===== */
+.suggestion-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    margin-top: 8px;
+    max-width: 600px;
+}
+
+.suggestion-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    padding: 10px 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: left;
+    backdrop-filter: blur(6px);
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+}
+
+.suggestion-card:hover {
+    background: rgba(91, 136, 178, 0.15);
+    border-color: var(--accent);
+    color: var(--text);
+    transform: translateY(-2px);
+}
+
 .cmd-pills {
     display: flex;
     gap: 8px;
@@ -420,8 +459,8 @@ body {
 
 /* ===== Scope Selector ===== */
 #scope-btn {
-    background: var(--surface-2);
-    border: 1px solid var(--border);
+    /* background: var(--surface-2); */
+    /* border: 1px solid var(--border); */
     color: var(--text-muted);
     transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
diff --git a/templates/index.html b/templates/index.html
@@ -12,7 +12,8 @@
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
         rel="stylesheet" />
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
     <link rel="stylesheet" href="/assets/css/output.css" />
     <link rel="stylesheet" href="/assets/css/theme.css" />
 </head>
@@ -22,29 +23,24 @@
 
         <header class="header">
             <div class="context-pin-badge" id="context-pin-badge" hidden aria-live="polite"></div>
-            <div class="header-badge online" id="status-badge">Online</div>
+            <div class="header-badge online !rounded-2xl" id="status-badge">Online</div>
         </header>
 
         <main class="chat-box" id="chat" role="log" aria-live="polite" aria-label="Histórico de mensagens">
             <div class="empty-state" id="empty-state">
-                <div class="empty-state-icon">🗂️</div>
-                <div class="empty-state-title">Base de conhecimento pronta</div>
-                <p class="empty-state-sub">Prefixos: <code>/content</code> (RAG geral), <code>/doc</code> (pasta
-                    <code>content/doc</code>), <code>/python</code>, <code>/visualizacao-sql</code>,
-                    <code>/projeto-bloco</code>, <code>/planejamento-curso-carreira</code> (RAG só na disciplina).</p>
-                <div class="cmd-pills">
-                    <span class="cmd-pill">/reload</span>
-                    <span class="cmd-pill">/python o que são listas?</span>
-                    <span class="cmd-pill">/visualizacao-sql explique GROUP BY</span>
-                    <span class="cmd-pill">/projeto-bloco resuma o pipeline</span>
-                    <span class="cmd-pill">/planejamento-curso-carreira dicas de currículo</span>
-                    <span class="cmd-pill">/doc visão geral do ACL</span>
-                    <span class="cmd-pill">/content o que é BM25?</span>
+                <!-- <div class="empty-state-icon">🗂️</div> -->
+                <div class="empty-state-title">Opa, sou o Kernel! O que precisa hoje?</div>
+
+                <div class="suggestion-cards">
+                    <button class="suggestion-card" type="button" data-prompt="/python Como listas funcionam?">/python Como listas funcionam?</button>
+                    <button class="suggestion-card" type="button" data-prompt="/sql Como usar GROUP BY?">/sql Como usar GROUP BY?</button>
+                    <button class="suggestion-card" type="button" data-prompt="/carreira Como montar um portfólio?">/carreira Como montar um portfólio?</button>
+                    <button class="suggestion-card" type="button" data-prompt="/doc Como o sistema funciona?">/doc Como o sistema funciona?</button>
                 </div>
             </div>
         </main>
 
-        <footer class="input-area rounded-4xl">
+        <footer class="input-area rounded-full mb-3">
             <div class="silo-pill" id="silo-pill" hidden aria-live="polite"></div>
             <!-- <div class="input-hint">
                 <span>Enter</span> envia · <span>Shift+Enter</span> nova linha ·
@@ -56,15 +52,15 @@
 
                 <!-- Scope selector -->
                 <div class="relative flex-shrink-0" id="scope-selector">
-                    <button
-                        id="scope-btn"
-                        type="button"
-                        class="rounded-2xl w-11 h-11 flex items-center justify-center cursor-pointer"
-                        aria-label="Selecionar escopo da busca"
-                        title="Selecionar escopo"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                    >
+                    <button id="scope-btn" type="button"
+                        class="rounded-full p-3 flex items-center justify-center cursor-pointer"
+                        aria-label="Selecionar escopo da busca" title="Selecionar escopo" aria-haspopup="true"
+                        aria-expanded="false">
+                        <!-- <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 rotate-60"
+                            viewBox="0 0 576 512">
+                            <path fill="rgb(255, 255, 255)"
+                                d="M7-25c9.4-9.4 24.6-9.4 33.9 0L569 503c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L7 9C-2.3-.4-2.3-15.6 7-25z" />
+                        </svg> -->
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                             <rect x="1" y="1" width="6" height="6" rx="1"/>
                             <rect x="9" y="1" width="6" height="6" rx="1"/>
@@ -73,49 +69,55 @@
                         </svg>
                     </button>
 
-                    <div
-                        id="scope-menu"
-                        role="menu"
-                        aria-labelledby="scope-btn"
-                        class="absolute left-0 z-50 rounded-2xl overflow-hidden"
-                    >
+                    <div id="scope-menu" role="menu" aria-labelledby="scope-btn"
+                        class="absolute left-0 z-50 rounded-2xl overflow-hidden">
                         <div class="!p-4">
-                            <p class="px-4 pb-1.5 pt-1 text-[10px] font-semibold uppercase tracking-widest scope-menu-label">
+                            <p
+                                class="px-4 pb-1.5 pt-1 text-[10px] font-semibold uppercase tracking-widest scope-menu-label">
                                 Escopo da busca
                             </p>
 
                             <button type="button" role="menuitem" data-cmd="/python"
-                                class="scope-option w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
+                                class="scope-option rounded-xl w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
                                 <span class="text-sm font-semibold scope-option-cmd">/python</span>
-                                <span class="text-xs leading-snug scope-option-desc">Consultas sobre Python e programação</span>
+                                <span class="text-xs leading-snug scope-option-desc">Consultas sobre Python e
+                                    programação</span>
                             </button>
 
                             <button type="button" role="menuitem" data-cmd="/visualizacao-sql"
-                                class="scope-option w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
+                                class="scope-option rounded-xl w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
                                 <span class="text-sm font-semibold scope-option-cmd">/sql</span>
-                                <span class="text-xs leading-snug scope-option-desc">Visualização SQL e consultas de banco de dados</span>
+                                <span class="text-xs leading-snug scope-option-desc">Visualização SQL e consultas de
+                                    banco de dados</span>
                             </button>
 
                             <button type="button" role="menuitem" data-cmd="/planejamento-curso-carreira"
-                                class="scope-option w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
+                                class="scope-option rounded-xl w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
                                 <span class="text-sm font-semibold scope-option-cmd">/carreira</span>
-                                <span class="text-xs leading-snug scope-option-desc">Planejamento de curso e carreira profissional</span>
+                                <span class="text-xs leading-snug scope-option-desc">Planejamento de curso e carreira
+                                    profissional</span>
                             </button>
 
                             <button type="button" role="menuitem" data-cmd="/doc"
-                                class="scope-option w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
+                                class="scope-option rounded-xl w-full text-left px-4 py-2.5 flex flex-col gap-0.5 cursor-pointer">
                                 <span class="text-sm font-semibold scope-option-cmd">/doc</span>
-                                <span class="text-xs leading-snug scope-option-desc">Documentação e arquivos internos do sistema</span>
+                                <span class="text-xs leading-snug scope-option-desc">Documentação e arquivos internos do
+                                    sistema</span>
                             </button>
                         </div>
                     </div>
                 </div>
                 <!-- End scope selector -->
 
-                <textarea class="rounded-2xl" id="message-input" rows="1" placeholder="O que vamos revisar hoje?" autocomplete="off"
-                    aria-label="Campo de mensagem"></textarea>
-                <button class="rounded-2xl" id="send-button" aria-label="Enviar mensagem" title="Enviar">
-                    ➤
+                <textarea class="rounded-2xl" id="message-input" rows="1" placeholder="O que vamos revisar hoje?"
+                    autocomplete="off" aria-label="Campo de mensagem"></textarea>
+                <button class="bg-blue-500 rounded-full p-3" id="send-button" aria-label="Enviar mensagem" title="Enviar">
+                    <!-- ➤ -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4"
+                        viewBox="0 0 384 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
+                        <path fill="rgb(255, 255, 255)"
+                            d="M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />
+                    </svg>
                 </button>
             </div>
         </footer>
@@ -125,7 +127,7 @@
     <script type="module" src="/src/main.js"></script>
     <script>
         (function () {
-            var btn  = document.getElementById('scope-btn');
+            var btn = document.getElementById('scope-btn');
             var menu = document.getElementById('scope-menu');
             var input = document.getElementById('message-input');
 
@@ -165,8 +167,17 @@
             document.addEventListener('keydown', function (e) {
                 if (e.key === 'Escape') closeMenu();
             });
+
+            document.querySelectorAll('.suggestion-card').forEach(function (card) {
+                card.addEventListener('click', function () {
+                    input.value = card.dataset.prompt;
+                    input.dispatchEvent(new Event('input'));
+                    input.focus();
+                    input.selectionStart = input.selectionEnd = input.value.length;
+                });
+            });
         })();
     </script>
 </body>
 
-</html>
+</html>
