Hugging Face's logo

Spaces:
fernando-bold
/
codewhisper-ide-companion
Running

App Files Community
fernando-bold commited on
Commit
0477c6d
·
verified ·
1 Parent(s): 0102cd8

Com base nas quatro imagens fornecidas, identifiquei três produtos distintos. Aqui está uma captura dos parâmetros de design, UX/UI e produto para cada um deles.

Browse files

---

### Produto 1: IDE com Assistente de IA (VS Code + Gemini)
*(Baseado nas capturas de 23:58 e 00:01)*

Este é um ambiente de desenvolvimento integrado (IDE) focado em produtividade de código, aumentado por um assistente de IA em um painel lateral.

#### 🎨 Design (UI)

* **Tema:** **Dark Mode** (Tema "Dark Modern" do VS Code). Usa um fundo de carvão (`#1e1e1e`) para o editor e cinza escuro (`#252526`) para os painéis, reduzindo a fadiga ocular.
* **Paleta Semântica:** As cores são usadas para transmitir significado (Syntax Highlighting):
* `#ce9178` (Laranja/Ferrugem) para strings (ex: caminhos de arquivo).
* `#569cd6` (Azul) para palavras-chave (ex: `None`).
* `#4ec9b0` (Verde-azulado) para tipos e classes (ex: `str`, `int`, `FacebookProfile`).
* `#6a9955` (Verde) para comentários.
* **Cor de Destaque (Accent):** `#3794ff` (Azul vivo) é usado para indicar foco, seleção e elementos acionáveis (botões, borda do terminal focado).
* **Tipografia:** Separação clara entre a **fonte monoespaçada** (ex: Consolas, Fira Code) para código e terminal (onde o alinhamento é crucial) e a **fonte sans-serif** (ex: Segoe UI) para a interface do usuário.
* **Iconografia:** Utiliza o conjunto de ícones **Codicons** (minimalistas, line-art) para a UI e um tema de ícones de arquivo (como **Seti**) para diferenciar visualmente os tipos de arquivo no explorador.

#### 🕹️ Experiência (UX)

* **Layout Modular (Workbench):** O paradigma de design é um "Workbench" (bancada de trabalho) com 5 zonas principais: Barra de Atividade (esquerda), Barra Lateral (explorador, chat), Grupo de Editores (centro), Painel Inferior (terminal) e Barra de Status (inferior).
* **Interação Multi-Contextual:** O usuário alterna fluidamente entre três contextos principais:
1. **Edição de Código** (Editor).
2. **Execução de Comandos** (Terminal Integrado).
3. **Conversação e Tarefas** (Painel de Chat da IA).
* **Redimensionamento e Divisão:** Todos os painéis são redimensionáveis (`ew-resize`, `ns-resize`) e divisíveis (split-screen), permitindo ao usuário criar seu layout de trabalho ideal.
* **Feedback Imediato:** O sistema fornece feedback constante: linting de código (erros sublinhados), status do Git (cores no explorador), saída do terminal e respostas de status do agente de IA (ex: "Done: Running tests...").

#### 📦 Produto

* **Produto:** IDE (Visual Studio Code) + Extensão de IA (Gemini).
* **Público-Alvo:** Desenvolvedores de Software.
* **Proposta de Valor:** Um "hub" de produtividade centralizado que combina edição de código, execução e depuração com o poder de um assistente de IA generativa.
* **Features-Chave (visíveis):** Editor de código, terminal, explorador de arquivos, assistente de chat com LLM, controle de versão (Git).

---

### Produto 2: Agente de Código Local (Painel de Chat)
*(Baseado na captura de 00:06)*

Este é um painel de chat de IA focado em **ação e refatoração de código**, com uma UI mais rica e integrada ao *workspace* do que um chat genérico.

#### 🎨 Design (UI)

* **Componentes Ricos:** A interface do chat não é apenas texto. Ela renderiza componentes de UI interativos:
* **Checklists (`[ ] Todos`):** Para rastrear o progresso de tarefas complexas.
* **Resultados de Busca/Diff:** Mostra um resumo de `diff` (`+3 -3`) para cada arquivo, dando ao usuário uma prévia do impacto.
* **Botões de Ação:** Apresenta ações contextuais como "Manter" e "Desfazer" diretamente no chat, ao lado das alterações de arquivo.
* **Densidade de Informação:** A UI é densa, otimizada para "glanceability" (visualização rápida). O desenvolvedor pode ver o status do projeto, tarefas e alterações de código em um único painel.

#### 🕹️ Experiência (UX)

* **Fluxo de Trabalho (Workflow):** **Orientado a Tarefas (Task-Driven).** O usuário não está apenas "perguntando", ele está "mandando" (ex: "Corrigir erro TypeScript"). O agente executa e marca a tarefa como concluída.
* **Interação Transacional:** A interação é uma transação de "mudança de código". O agente propõe mudanças (o `diff` de 5 arquivos) e o usuário as aceita ou rejeita.
* **Agente como "Segundo Piloto":** Este UX pattern posiciona a IA como um colaborador ativo (um "pair programmer") que pode ler o contexto, propor e *aplicar* mudanças diretamente no código-fonte.

#### 📦 Produto

* **Produto:** Um Agente de Código (possivelmente local, "Grok Code Fast 1").
* **Proposta de Valor:** Automatizar micro-tarefas de desenvolvimento (refatoração, busca, correções) e gerenciar o contexto de mudanças complexas.
* **Diferencial:** Integração profunda com o Git e o sistema de arquivos, permitindo que ele não apenas sugira, mas *execute* ações de refatoração.

---

### Produto 3: Ferramenta de CLI (Phomber)
*(Baseado na captura de 15:48)*

Esta é uma ferramenta de linha de comando (CLI) focada em eficiência, provavelmente para um público técnico de segurança ou OSINT.

#### 🎨 Design (UI)

* **Interface:** **TUI (Text-based User Interface).** O design é totalmente baseado em texto, sem elementos gráficos de GUI.
* **Layout:** **Formatado em Tabela.** A saída do comando `help` usa alinhamento de colunas e bordas de caracteres (`---`, `|`) para criar uma tabela legível e estruturada.
* **Cores de Terminal (ANSI):** Usa cores de forma semântica para diferenciar elementos da UI:
* `Verde:` O prompt do usuário/host (`[fjuni@phomber]`).
* `Amarelo:` Dicas (`> You can also use...`).
* `Vermelho (`*`):` Destaque para comandos notáveis.
* `Branco:` Texto de ajuda padrão.

#### 🕹️ Experiência (UX)

* **Paradigma:** **C-L-I (Command-Loop-Interface).** O fluxo é: (1) Usuário digita comando, (2) Pressiona Enter, (3) Vê a saída de texto, (4) O prompt retorna, pronto para o próximo comando.
* **Foco em Eficiência:** Projetado para "usuários avançados" (power users) que valorizam velocidade e a capacidade de criar scripts acima da facilidade de uso visual.
* **Descoberta (Discoverability):** O comando `help` é a principal (e talvez única) ferramenta de descoberta. Ele precisa ser completo e claro.
* **Feedback Contextual:** O prompt (`[fjuni@phomber]-[:(] $`) é rico em contexto: `fjuni` (usuário), `phomber` (host/framework), `:( ` (possivelmente um indicador de status, como a falha do último comando).

#### 📦 Produto

* **Produto:** Um framework de CLI (nome inferido: "Phomber").
* **Público-Alvo:** Especialistas em Segurança, Pesquisadores de OSINT, Pentesters.
* **Proposta de Valor:** Um conjunto de ferramentas de scanner (lookup de telefone, IP, MAC, DNS, etc.) consolidadas em uma única interface de shell eficiente.
* **Features-Chave (visíveis):** `number lookup`, `ip lookup`, `mac lookup`, `username lookup`, `google dork`.

Files changed (5) hide show
  1. README.md +7 -4
  2. components/ai-message.js +93 -0
  3. index.html +161 -19
  4. script.js +35 -0
  5. style.css +44 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codewhisper Ide Companion
3
- emoji: 🌖
4
- colorFrom: blue
5
  colorTo: blue
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeWhisper IDE Companion
3
+ colorFrom: green
 
4
  colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/ai-message.js ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AiMessage extends HTMLElement {
2
+ constructor() {
3
+ super();
4
+ this.attachShadow({ mode: 'open' });
5
+ }
6
+
7
+ connectedCallback() {
8
+ const type = this.getAttribute('type') || 'ai';
9
+ const content = this.getAttribute('content') || '';
10
+
11
+ this.shadowRoot.innerHTML = `
12
+ <style>
13
+ .message {
14
+ padding: 0.75rem;
15
+ border-radius: 0.5rem;
16
+ margin-bottom: 0.75rem;
17
+ max-width: 90%;
18
+ word-wrap: break-word;
19
+ }
20
+ .ai {
21
+ background-color: #2d3748;
22
+ color: #e2e8f0;
23
+ align-self: flex-start;
24
+ }
25
+ .user {
26
+ background-color: #1e40af;
27
+ color: white;
28
+ align-self: flex-end;
29
+ }
30
+ .code-block {
31
+ background-color: #1a202c;
32
+ padding: 0.5rem;
33
+ border-radius: 0.25rem;
34
+ margin-top: 0.5rem;
35
+ font-family: monospace;
36
+ font-size: 0.875rem;
37
+ overflow-x: auto;
38
+ }
39
+ .actions {
40
+ display: flex;
41
+ gap: 0.5rem;
42
+ margin-top: 0.5rem;
43
+ }
44
+ .action-btn {
45
+ padding: 0.25rem 0.5rem;
46
+ border-radius: 0.25rem;
47
+ font-size: 0.75rem;
48
+ cursor: pointer;
49
+ border: none;
50
+ }
51
+ .insert {
52
+ background-color: #2563eb;
53
+ color: white;
54
+ }
55
+ .explain {
56
+ background-color: #4b5563;
57
+ color: white;
58
+ }
59
+ </style>
60
+ <div class="message ${type}">
61
+ ${content}
62
+ ${type === 'ai' ? `
63
+ <div class="code-block">${this.getAttribute('code') || ''}</div>
64
+ <div class="actions">
65
+ <button class="action-btn insert">Insert</button>
66
+ <button class="action-btn explain">Explain</button>
67
+ </div>
68
+ ` : ''}
69
+ </div>
70
+ `;
71
+
72
+ // Add event listeners for buttons
73
+ if (type === 'ai') {
74
+ this.shadowRoot.querySelector('.insert').addEventListener('click', () => {
75
+ this.dispatchEvent(new CustomEvent('insert-code', {
76
+ bubbles: true,
77
+ composed: true,
78
+ detail: { code: this.getAttribute('code') }
79
+ }));
80
+ });
81
+
82
+ this.shadowRoot.querySelector('.explain').addEventListener('click', () => {
83
+ this.dispatchEvent(new CustomEvent('explain-code', {
84
+ bubbles: true,
85
+ composed: true,
86
+ detail: { code: this.getAttribute('code') }
87
+ }));
88
+ });
89
+ }
90
+ }
91
+ }
92
+
93
+ customElements.define('ai-message', AiMessage);
index.html CHANGED
@@ -1,19 +1,161 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeWhisper IDE Companion</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-gray-100 h-screen overflow-hidden">
13
+ <div class="flex h-full">
14
+ <!-- Activity Bar -->
15
+ <div class="w-16 bg-gray-800 flex flex-col items-center py-4 space-y-6">
16
+ <div class="p-2 rounded-md bg-gray-700">
17
+ <i data-feather="code" class="text-blue-400"></i>
18
+ </div>
19
+ <div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
20
+ <i data-feather="file-text"></i>
21
+ </div>
22
+ <div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
23
+ <i data-feather="search"></i>
24
+ </div>
25
+ <div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
26
+ <i data-feather="git-branch"></i>
27
+ </div>
28
+ <div class="p-2 rounded-md hover:bg-gray-700 cursor-pointer">
29
+ <i data-feather="cpu"></i>
30
+ </div>
31
+ <div class="mt-auto p-2 rounded-md hover:bg-gray-700 cursor-pointer">
32
+ <i data-feather="settings"></i>
33
+ </div>
34
+ </div>
35
+
36
+ <!-- Sidebar -->
37
+ <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
38
+ <div class="p-4 border-b border-gray-700">
39
+ <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Explorer</h2>
40
+ </div>
41
+ <div class="flex-1 overflow-y-auto">
42
+ <div class="py-2 px-4 text-sm text-gray-400 hover:bg-gray-700 cursor-pointer flex items-center">
43
+ <i data-feather="folder" class="mr-2"></i> project-name
44
+ </div>
45
+ <div class="pl-8">
46
+ <div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
47
+ <i data-feather="file-text" class="mr-2 text-blue-400"></i> index.html
48
+ </div>
49
+ <div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
50
+ <i data-feather="file-text" class="mr-2 text-green-400"></i> style.css
51
+ </div>
52
+ <div class="py-1 px-4 text-sm hover:bg-gray-700 cursor-pointer flex items-center">
53
+ <i data-feather="file-text" class="mr-2 text-yellow-400"></i> script.js
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Main Content -->
60
+ <div class="flex-1 flex flex-col">
61
+ <!-- Editor Tabs -->
62
+ <div class="bg-gray-800 border-b border-gray-700 flex">
63
+ <div class="px-4 py-2 text-sm border-r border-gray-700 flex items-center">
64
+ <i data-feather="file-text" class="mr-2 text-blue-400"></i> index.html
65
+ </div>
66
+ <div class="px-4 py-2 text-sm text-gray-400 flex items-center">
67
+ <i data-feather="file-text" class="mr-2"></i> style.css
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Editor Area -->
72
+ <div class="flex-1 flex overflow-hidden">
73
+ <!-- Code Editor -->
74
+ <div class="flex-1 overflow-auto">
75
+ <div class="p-4 font-mono text-sm">
76
+ <div class="text-gray-500">1</div>
77
+ <div class="text-gray-500">2</div>
78
+ <div class="text-gray-500">3</div>
79
+ <div class="text-blue-400">4 &lt;!DOCTYPE html&gt;</div>
80
+ <div class="text-blue-400">5 &lt;html lang="en"&gt;</div>
81
+ <div class="text-blue-400">6 &lt;head&gt;</div>
82
+ <div class="text-blue-400">7 &lt;meta charset="UTF-8"&gt;</div>
83
+ <div class="text-blue-400">8 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
84
+ <div class="text-blue-400">9 &lt;title&gt;CodeWhisper IDE Companion&lt;/title&gt;</div>
85
+ <div class="text-blue-400">10 &lt;/head&gt;</div>
86
+ <div class="text-blue-400">11 &lt;body&gt;</div>
87
+ <div class="text-blue-400">12 &lt;h1&gt;Hello World&lt;/h1&gt;</div>
88
+ <div class="text-blue-400">13 &lt;/body&gt;</div>
89
+ <div class="text-blue-400">14 &lt;/html&gt;</div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- AI Assistant Panel -->
94
+ <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
95
+ <div class="p-4 border-b border-gray-700">
96
+ <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">AI Assistant</h2>
97
+ </div>
98
+ <div class="flex-1 overflow-y-auto p-4 space-y-4">
99
+ <div class="bg-gray-700 rounded-lg p-3">
100
+ <div class="text-sm text-gray-300">How can I help you with your code today?</div>
101
+ </div>
102
+ <div class="bg-blue-900 rounded-lg p-3">
103
+ <div class="text-sm">Can you add a responsive navbar to this HTML?</div>
104
+ </div>
105
+ <div class="bg-gray-700 rounded-lg p-3">
106
+ <div class="text-sm text-gray-300">Sure! Here's a responsive navbar using TailwindCSS:</div>
107
+ <div class="mt-2 p-2 bg-gray-800 rounded text-xs font-mono">
108
+ &lt;nav class="bg-gray-800 p-4"&gt;<br>
109
+ &nbsp;&nbsp;&lt;div class="container mx-auto flex justify-between items-center"&gt;<br>
110
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="text-white font-bold"&gt;Logo&lt;/a&gt;<br>
111
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="hidden md:flex space-x-4"&gt;<br>
112
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="text-gray-300 hover:text-white"&gt;Home&lt;/a&gt;<br>
113
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="#" class="text-gray-300 hover:text-white"&gt;About&lt;/a&gt;<br>
114
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
115
+ &nbsp;&nbsp;&lt;/div&gt;<br>
116
+ &lt;/nav&gt;
117
+ </div>
118
+ <div class="mt-2 flex space-x-2">
119
+ <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded">Insert</button>
120
+ <button class="text-xs bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded">Explain</button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ <div class="p-4 border-t border-gray-700">
125
+ <div class="relative">
126
+ <input type="text" placeholder="Ask the AI assistant..." class="w-full bg-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
127
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
128
+ <i data-feather="send"></i>
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Terminal -->
136
+ <div class="h-40 bg-gray-800 border-t border-gray-700 flex flex-col">
137
+ <div class="p-2 border-b border-gray-700 flex items-center">
138
+ <i data-feather="terminal" class="mr-2 text-green-400"></i>
139
+ <span class="text-sm">Terminal</span>
140
+ </div>
141
+ <div class="flex-1 overflow-auto p-2 font-mono text-sm">
142
+ <div class="text-green-400">user@codewhisper:~$ npm start</div>
143
+ <div class="text-gray-300">> codewhisper@1.0.0 start</div>
144
+ <div class="text-gray-300">> vite</div>
145
+ <div class="text-gray-300"></div>
146
+ <div class="text-gray-300"> VITE v4.4.9 ready in 320 ms</div>
147
+ <div class="text-gray-300"></div>
148
+ <div class="text-gray-300"> ➜ Local: http://localhost:5173/</div>
149
+ <div class="text-gray-300"> ➜ Network: use --host to expose</div>
150
+ <div class="text-gray-300"> ➜ press h to show help</div>
151
+ <div class="text-green-400">user@codewhisper:~$</div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <script src="script.js"></script>
158
+ <script>feather.replace();</script>
159
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
160
+ </body>
161
+ </html>
script.js ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Simulate terminal typing effect
3
+ const terminal = document.querySelector('.terminal');
4
+ if (terminal) {
5
+ setTimeout(() => {
6
+ const cursor = document.createElement('span');
7
+ cursor.className = 'terminal-cursor';
8
+ terminal.appendChild(cursor);
9
+ }, 1000);
10
+ }
11
+
12
+ // Handle AI panel interactions
13
+ const aiInput = document.querySelector('.ai-input');
14
+ if (aiInput) {
15
+ aiInput.addEventListener('keypress', (e) => {
16
+ if (e.key === 'Enter') {
17
+ const message = e.target.value.trim();
18
+ if (message) {
19
+ // In a real app, this would send to an API
20
+ console.log('AI query:', message);
21
+ e.target.value = '';
22
+ }
23
+ }
24
+ });
25
+ }
26
+
27
+ // File explorer click handler
28
+ const fileItems = document.querySelectorAll('.file-item');
29
+ fileItems.forEach(item => {
30
+ item.addEventListener('click', () => {
31
+ // In a real app, this would open the file in the editor
32
+ console.log('Opening file:', item.textContent.trim());
33
+ });
34
+ });
35
+ });
style.css CHANGED
@@ -1,28 +1,53 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom scrollbar */
2
+ ::-webkit-scrollbar {
3
+ width: 8px;
4
+ height: 8px;
5
  }
6
 
7
+ ::-webkit-scrollbar-track {
8
+ background: #2d3748;
 
9
  }
10
 
11
+ ::-webkit-scrollbar-thumb {
12
+ background: #4a5568;
13
+ border-radius: 4px;
 
 
14
  }
15
 
16
+ ::-webkit-scrollbar-thumb:hover {
17
+ background: #718096;
 
 
 
 
18
  }
19
 
20
+ /* Syntax highlighting classes */
21
+ .hljs-keyword {
22
+ color: #569cd6;
23
  }
24
+
25
+ .hljs-string {
26
+ color: #ce9178;
27
+ }
28
+
29
+ .hljs-comment {
30
+ color: #6a9955;
31
+ }
32
+
33
+ .hljs-type {
34
+ color: #4ec9b0;
35
+ }
36
+
37
+ /* Terminal blinking cursor animation */
38
+ @keyframes blink {
39
+ 0%, 100% {
40
+ opacity: 1;
41
+ }
42
+ 50% {
43
+ opacity: 0;
44
+ }
45
+ }
46
+
47
+ .terminal-cursor {
48
+ display: inline-block;
49
+ width: 8px;
50
+ height: 16px;
51
+ background-color: #4ade80;
52
+ animation: blink 1s step-end infinite;
53
+ }