175 lines
9.3 KiB
HTML
175 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nexus AI Chat</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<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;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Cerrar barra lateral">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
</button>
|
|
<button class="new-chat-btn" id="newChatBtn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 5v14m-7-7h14"></path>
|
|
</svg>
|
|
<span>Nuevo chat</span>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="chat-history" id="chatHistory">
|
|
<div class="chat-history-section">
|
|
<h3 class="section-title">Recientes</h3>
|
|
<div class="chat-item active" data-chat-id="current">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
<span class="chat-item-title">Nueva conversación</span>
|
|
<div class="chat-item-actions">
|
|
<button class="chat-item-btn" title="Opciones">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="12" cy="5" r="2"></circle>
|
|
<circle cx="12" cy="12" r="2"></circle>
|
|
<circle cx="12" cy="19" r="2"></circle>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<button class="user-profile" id="userProfile">
|
|
<div class="avatar">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Usuario</span>
|
|
<span class="user-plan">Plan gratuito</span>
|
|
</div>
|
|
<svg class="user-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M6 9l6 6 6-6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Chat Area -->
|
|
<main class="chat-container">
|
|
<!-- Mobile Header -->
|
|
<div class="mobile-header">
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<h1 class="mobile-title">Nexus AI</h1>
|
|
<button class="new-chat-btn-mobile" id="newChatBtnMobile" aria-label="Nuevo chat">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 5v14m-7-7h14"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="chat-content">
|
|
<div class="messages-wrapper" id="messagesWrapper">
|
|
<div class="messages-container" id="messagesContainer">
|
|
<div class="welcome-message" id="welcomeMessage">
|
|
<div class="logo-wrapper">
|
|
<div class="logo">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h2>¿Cómo puedo ayudarte hoy?</h2>
|
|
<div class="suggestion-cards">
|
|
<button class="suggestion-card">
|
|
<div class="suggestion-icon">💡</div>
|
|
<div class="suggestion-content">
|
|
<h3>Ideas creativas</h3>
|
|
<p>Ayúdame con ideas innovadoras</p>
|
|
</div>
|
|
</button>
|
|
<button class="suggestion-card">
|
|
<div class="suggestion-icon">📝</div>
|
|
<div class="suggestion-content">
|
|
<h3>Escribir código</h3>
|
|
<p>Ayúdame a programar algo</p>
|
|
</div>
|
|
</button>
|
|
<button class="suggestion-card">
|
|
<div class="suggestion-icon">🎯</div>
|
|
<div class="suggestion-content">
|
|
<h3>Resolver problemas</h3>
|
|
<p>Analiza y encuentra soluciones</p>
|
|
</div>
|
|
</button>
|
|
<button class="suggestion-card">
|
|
<div class="suggestion-icon">📚</div>
|
|
<div class="suggestion-content">
|
|
<h3>Aprender algo nuevo</h3>
|
|
<p>Explícame conceptos complejos</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-area">
|
|
<div class="input-container">
|
|
<form class="input-form" id="chatForm">
|
|
<div class="input-wrapper">
|
|
<button type="button" class="attach-btn" id="attachBtn" title="Adjuntar archivo">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
|
</svg>
|
|
</button>
|
|
<textarea
|
|
id="messageInput"
|
|
class="message-input"
|
|
placeholder="Envía un mensaje..."
|
|
rows="1"
|
|
maxlength="4000"
|
|
></textarea>
|
|
<button type="submit" class="send-btn" id="sendBtn" disabled>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 2L11 13"></path>
|
|
<path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="input-disclaimer">
|
|
Nexus puede cometer errores. Considera verificar información importante.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|
|
|