177 lines
8.7 KiB
HTML
177 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Camila AI</title>
|
|
<!-- Google Fonts Outfit & Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<!-- Highlight.js para destaque de sintaxe em códigos -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="shortcut icon" href="https://chatgpt.com/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar / Menu lateral (Deslizante no mobile) -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<button class="btn-new-chat" id="btnNewChat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<span>Novo chat</span>
|
|
</button>
|
|
<button class="btn-close-sidebar" id="btnCloseSidebar" aria-label="Fechar menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Busca no Histórico -->
|
|
<div class="sidebar-search">
|
|
<div class="sidebar-search-wrapper">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="search-icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
<input type="text" id="searchInput" placeholder="Buscar conversas..." class="search-input" autocomplete="off">
|
|
<button class="search-clear" id="searchClear" aria-label="Limpar busca" style="display:none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags de filtro -->
|
|
<div class="sidebar-tags" id="sidebarTags">
|
|
<button class="tag-filter active" data-tag="all">Todas</button>
|
|
<button class="tag-filter" data-tag="relatorios">📋 Relatórios</button>
|
|
<button class="tag-filter" data-tag="planejamento">📝 Planejamento</button>
|
|
<button class="tag-filter" data-tag="mindlab">🧠 Mind Lab</button>
|
|
<button class="tag-filter" data-tag="estudos">📚 Estudos</button>
|
|
</div>
|
|
|
|
<!-- Histórico de Conversas -->
|
|
<div class="chat-history" id="chatHistory">
|
|
<!-- Histórico filtrado/busca -->
|
|
<div class="search-results-header" id="searchResultsHeader" style="display:none">
|
|
<div class="search-results-info">
|
|
<span id="searchResultsCount"></span>
|
|
<button class="search-clear-all" id="searchClearAll">Limpar</button>
|
|
</div>
|
|
</div>
|
|
<!-- Items gerados por JS -->
|
|
<div id="historyItems"></div>
|
|
</div>
|
|
|
|
<!-- Rodapé do Menu Lateral -->
|
|
<div class="sidebar-footer">
|
|
<div class="user-profile">
|
|
<div class="avatar user-avatar sidebar-avatar-wrapper">
|
|
<img src="assets/camila_prof.png" alt="Camila Reifonas" class="sidebar-avatar-img">
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Camila Reifonas</span>
|
|
<span class="user-status">Online</span>
|
|
</div>
|
|
<button class="btn-logout" id="btnLogout" title="Sair">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Overlay para fechar sidebar clicando fora no mobile -->
|
|
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
|
|
<!-- Área principal do Chat -->
|
|
<main class="chat-area">
|
|
<!-- Topo fixo / Header -->
|
|
<header class="chat-header">
|
|
<button class="btn-menu" id="btnMenu" aria-label="Abrir menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="model-badge">
|
|
<span>GPT-4.1 Nano</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chevron">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<button class="btn-new-chat-mobile" id="btnNewChatMobile" aria-label="Novo chat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Mensagens da conversa -->
|
|
<div class="messages-container" id="messagesContainer">
|
|
<!-- Estado inicial / Bem-vindo (se não houver mensagens) -->
|
|
<div class="welcome-container" id="welcomeContainer">
|
|
<div class="welcome-logo">
|
|
<div class="logo-outer welcome-avatar-wrapper">
|
|
<img src="assets/camila_prof.png" alt="Camila AI" class="welcome-avatar-img">
|
|
</div>
|
|
</div>
|
|
<h2>Como posso ajudar hoje?</h2>
|
|
|
|
<div class="suggestions-grid">
|
|
<button class="suggestion-card" data-prompt="Me dê ideias criativas de nomes para uma marca de roupas.">
|
|
<h4>Ideias criativas</h4>
|
|
<p>Nomes para uma marca de roupas</p>
|
|
</button>
|
|
<button class="suggestion-card" data-prompt="Escreva um script básico em Python para ler um arquivo JSON.">
|
|
<h4>Escrever código</h4>
|
|
<p>Script simples em Python para JSON</p>
|
|
</button>
|
|
<button class="suggestion-card" data-prompt="Ajude-me a preparar um roteiro de viagem de 3 dias para o Rio de Janeiro.">
|
|
<h4>Roteiro de viagem</h4>
|
|
<p>3 dias no Rio de Janeiro</p>
|
|
</button>
|
|
<button class="suggestion-card" data-prompt="Explique como funciona o conceito de Server-Sent Events (SSE).">
|
|
<h4>Explicar conceitos</h4>
|
|
<p>Como funciona o Server-Sent Events</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista de mensagens geradas dinamicamente -->
|
|
<div class="conversation-list" id="conversationList"></div>
|
|
</div>
|
|
|
|
<!-- Barra inferior com input de texto -->
|
|
<footer class="chat-footer">
|
|
<div class="input-container">
|
|
<form id="chatForm">
|
|
<div class="input-box">
|
|
<textarea id="userInput" placeholder="Mensagem Camila AI..." rows="1" autocomplete="off"></textarea>
|
|
<button type="submit" id="btnSend" disabled aria-label="Enviar mensagem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81L5.03 11.03a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="disclaimer">Camila AI pode cometer erros. Considere verificar informações importantes.</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Bibliotecas externas para renderizar markdown e blocos de código -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|