| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Chat Interface</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> |
| <style> |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| :root { |
| --primary-bg: #0f1117; |
| --secondary-bg: #1a1d29; |
| --accent-color: #8b5cf6; |
| --accent-hover: #a78bfa; |
| --text-color: #f8fafc; |
| --text-secondary: #94a3b8; |
| --border-color: #2d3748; |
| --user-bubble: linear-gradient(135deg, #6366f1, #8b5cf6); |
| --assistant-bubble: #1e293b; |
| --success-color: #10b981; |
| --warning-color: #f59e0b; |
| --danger-color: #ef4444; |
| --sidebar-width: 280px; |
| } |
|
|
| body { |
| background-color: var(--primary-bg); |
| color: var(--text-color); |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| line-height: 1.6; |
| height: 100vh; |
| overflow: hidden; |
| } |
|
|
| #app { |
| display: flex; |
| height: 100vh; |
| position: relative; |
| } |
|
|
| |
| .sidebar-backdrop { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 99; |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| } |
|
|
| .sidebar-backdrop.active { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| |
| .sidebar { |
| width: var(--sidebar-width); |
| background-color: var(--secondary-bg); |
| border-right: 1px solid var(--border-color); |
| padding: 1.5rem; |
| overflow-y: auto; |
| transform: translateX(-100%); |
| transition: transform 0.3s ease; |
| z-index: 100; |
| position: fixed; |
| height: 100%; |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .sidebar.open { |
| transform: translateX(0); |
| } |
|
|
| .sidebar-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| padding-bottom: 1rem; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .sidebar-header h3 { |
| font-size: 1.25rem; |
| color: var(--accent-color); |
| font-weight: 600; |
| } |
|
|
| .close-btn { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| font-size: 1.5rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .close-btn:hover { |
| color: var(--accent-color); |
| background-color: rgba(139, 92, 246, 0.1); |
| } |
|
|
| .sidebar-section { |
| margin-bottom: 1.5rem; |
| } |
|
|
| .sidebar-section h4 { |
| font-size: 0.875rem; |
| color: var(--text-secondary); |
| margin-bottom: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-weight: 600; |
| } |
|
|
| .sidebar-item { |
| padding: 0.75rem 1rem; |
| border-radius: 0.75rem; |
| margin-bottom: 0.5rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-size: 0.95rem; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .sidebar-item::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); |
| transition: left 0.5s ease; |
| } |
|
|
| .sidebar-item:hover::before { |
| left: 100%; |
| } |
|
|
| .sidebar-item:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| color: var(--accent-color); |
| transform: translateX(5px); |
| } |
|
|
| .sidebar-item.active { |
| background-color: rgba(99, 102, 241, 0.2); |
| border-left: 3px solid var(--accent-color); |
| color: var(--accent-color); |
| } |
|
|
| .sidebar-item i { |
| font-size: 1.25rem; |
| width: 24px; |
| text-align: center; |
| } |
|
|
| |
| .main-content { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| transition: all 0.3s ease; |
| } |
|
|
| |
| .header { |
| background-color: rgba(15, 17, 23, 0.9); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--border-color); |
| padding: 0.75rem 1.5rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .header-left { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
|
|
| .hamburger-btn { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| font-size: 1.5rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .hamburger-btn:hover { |
| color: var(--accent-color); |
| background-color: rgba(139, 92, 246, 0.1); |
| } |
|
|
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-weight: 700; |
| font-size: 1.25rem; |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: logo-pulse 3s infinite; |
| } |
|
|
| @keyframes logo-pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.8; } |
| } |
|
|
| .logo i { |
| font-size: 1.5rem; |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
|
|
| .mode-selector, .model-selector { |
| background-color: var(--secondary-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 0.75rem; |
| padding: 0.5rem 0.75rem; |
| color: var(--text-color); |
| font-size: 0.875rem; |
| min-width: 180px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .mode-selector:hover, .model-selector:hover { |
| border-color: var(--accent-color); |
| box-shadow: 0 0 0 1px var(--accent-color); |
| } |
|
|
| .new-chat-btn { |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| color: white; |
| border: none; |
| border-radius: 0.75rem; |
| padding: 0.5rem 1rem; |
| font-weight: 500; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| transition: all 0.2s ease; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .new-chat-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| transition: left 0.5s ease; |
| } |
|
|
| .new-chat-btn:hover::before { |
| left: 100%; |
| } |
|
|
| .new-chat-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); |
| } |
|
|
| |
| .tab-container { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .tab-header { |
| display: flex; |
| background-color: var(--secondary-bg); |
| border-bottom: 1px solid var(--border-color); |
| padding: 0 1rem; |
| } |
|
|
| .tab { |
| padding: 0.75rem 1.5rem; |
| cursor: pointer; |
| font-size: 0.9rem; |
| border-bottom: 2px solid transparent; |
| transition: all 0.2s ease; |
| position: relative; |
| } |
|
|
| .tab::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| width: 0; |
| height: 2px; |
| background-color: var(--accent-color); |
| transition: all 0.3s ease; |
| } |
|
|
| .tab.active::after { |
| width: 100%; |
| left: 0; |
| } |
|
|
| .tab.active { |
| color: var(--accent-color); |
| } |
|
|
| .tab:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| } |
|
|
| .tab-content { |
| display: none; |
| flex: 1; |
| overflow: hidden; |
| } |
|
|
| .tab-content.active { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| |
| .chat-container { |
| flex: 1; |
| max-width: 1200px; |
| width: 100%; |
| margin: 0 auto; |
| padding: 1.5rem 1rem; |
| display: flex; |
| flex-direction: column; |
| overflow-y: auto; |
| scrollbar-width: thin; |
| } |
|
|
| |
| .message { |
| max-width: 85%; |
| padding: 1rem; |
| border-radius: 1rem; |
| margin-bottom: 1.25rem; |
| line-height: 1.5; |
| animation: fadeIn 0.3s ease; |
| position: relative; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .user-message { |
| margin-left: auto; |
| background: linear-gradient(135deg, var(--accent-color), var(--accent-hover)); |
| border-radius: 1.25rem 0.5rem 1.25rem 1.25rem; |
| color: white; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .assistant-message { |
| background-color: var(--assistant-bubble); |
| border-radius: 0.5rem 1.25rem 1.25rem 1.25rem; |
| border: 1px solid var(--border-color); |
| color: var(--text-color); |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .message-header { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-bottom: 0.5rem; |
| font-size: 0.85rem; |
| color: var(--text-secondary); |
| } |
|
|
| .avatar { |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 600; |
| font-size: 0.8rem; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .user-avatar { |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| color: white; |
| } |
|
|
| .assistant-avatar { |
| background: linear-gradient(90deg, #10b981, #3b82f6); |
| color: white; |
| } |
|
|
| |
| .thinking-step { |
| background-color: rgba(30, 35, 50, 0.7); |
| border-left: 3px solid var(--accent-color); |
| padding: 0.75rem; |
| margin: 0.5rem 0; |
| border-radius: 0 0.25rem 0.25rem 0; |
| font-size: 0.9em; |
| color: var(--text-secondary); |
| font-style: italic; |
| animation: pulse 2s infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
|
|
| .ai-plan { |
| background-color: rgba(25, 30, 45, 0.8); |
| border: 1px solid rgba(139, 92, 246, 0.3); |
| border-radius: 0.75rem; |
| padding: 1rem; |
| margin: 1rem 0; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .ai-plan::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 4px; |
| height: 100%; |
| background: linear-gradient(to bottom, var(--accent-color), var(--accent-hover)); |
| } |
|
|
| .plan-step { |
| background-color: rgba(30, 35, 50, 0.7); |
| border-left: 3px solid var(--accent-color); |
| padding: 0.5rem; |
| margin: 0.3rem 0; |
| border-radius: 0 0.25rem 0.25rem 0; |
| font-size: 0.95em; |
| } |
|
|
| .code-container { |
| background-color: #1a1f2d; |
| border: 1px solid var(--border-color); |
| border-radius: 0.75rem; |
| padding: 1rem; |
| margin: 1rem 0; |
| font-family: 'Fira Code', monospace; |
| font-size: 0.95rem; |
| overflow-x: auto; |
| line-height: 1.5; |
| position: relative; |
| } |
|
|
| .code-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .code-language { |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| font-weight: 600; |
| } |
|
|
| .copy-btn { |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-size: 0.8rem; |
| transition: all 0.2s ease; |
| } |
|
|
| .copy-btn:hover { |
| color: var(--accent-color); |
| } |
|
|
| |
| .files-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.75rem 1rem; |
| background-color: var(--secondary-bg); |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .file-actions { |
| display: flex; |
| gap: 0.5rem; |
| } |
|
|
| .file-action-btn { |
| background-color: var(--accent-color); |
| color: white; |
| border: none; |
| border-radius: 0.5rem; |
| padding: 0.5rem 1rem; |
| font-size: 0.9rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| transition: all 0.2s ease; |
| } |
|
|
| .file-action-btn:hover { |
| background-color: var(--accent-hover); |
| transform: translateY(-1px); |
| } |
|
|
| .file-search input { |
| background-color: var(--secondary-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 0.5rem; |
| padding: 0.5rem 1rem; |
| color: var(--text-color); |
| width: 200px; |
| transition: all 0.2s ease; |
| } |
|
|
| .file-search input:focus { |
| border-color: var(--accent-color); |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .file-tree { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1rem; |
| } |
|
|
| .folder-item { |
| margin-bottom: 0.5rem; |
| } |
|
|
| .folder-header { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem; |
| border-radius: 0.5rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .folder-header:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| } |
|
|
| .folder-icon { |
| transition: transform 0.3s ease; |
| } |
|
|
| .folder-item.expanded .folder-icon { |
| transform: rotate(90deg); |
| } |
|
|
| .folder-content { |
| margin-left: 1.5rem; |
| display: none; |
| animation: slideDown 0.3s ease; |
| } |
|
|
| @keyframes slideDown { |
| from { opacity: 0; max-height: 0; } |
| to { opacity: 1; max-height: 500px; } |
| } |
|
|
| .folder-item.expanded .folder-content { |
| display: block; |
| } |
|
|
| .file-item { |
| padding: 0.5rem; |
| border-radius: 0.5rem; |
| margin-bottom: 0.25rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.95rem; |
| } |
|
|
| .file-item:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| color: var(--accent-color); |
| transform: translateX(5px); |
| } |
|
|
| |
| .terminal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.75rem 1rem; |
| background-color: var(--secondary-bg); |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .terminal-title { |
| font-weight: 600; |
| } |
|
|
| .terminal-controls { |
| display: flex; |
| gap: 0.5rem; |
| } |
|
|
| .terminal-control-btn { |
| background-color: var(--secondary-bg); |
| color: var(--text-color); |
| border: 1px solid var(--border-color); |
| border-radius: 0.5rem; |
| padding: 0.5rem 1rem; |
| font-size: 0.9rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| transition: all 0.2s ease; |
| } |
|
|
| .terminal-control-btn:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| border-color: var(--accent-color); |
| } |
|
|
| .terminal-output { |
| flex: 1; |
| padding: 1rem; |
| background-color: #0a0a0a; |
| color: #f0f0f0; |
| font-family: 'Fira Code', monospace; |
| overflow-y: auto; |
| white-space: pre-wrap; |
| line-height: 1.5; |
| position: relative; |
| } |
|
|
| .terminal-line { |
| margin-bottom: 0.25rem; |
| } |
|
|
| .terminal-input-container { |
| display: flex; |
| align-items: center; |
| padding: 0.5rem 1rem; |
| background-color: #0a0a0a; |
| border-top: 1px solid var(--border-color); |
| } |
|
|
| .terminal-prompt { |
| color: var(--accent-color); |
| margin-right: 0.5rem; |
| font-family: 'Fira Code', monospace; |
| font-weight: 600; |
| } |
|
|
| #terminal-input { |
| flex: 1; |
| background-color: transparent; |
| border: none; |
| color: #f0f0f0; |
| font-family: 'Fira Code', monospace; |
| font-size: 1rem; |
| outline: none; |
| } |
|
|
| |
| .preview-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.75rem 1rem; |
| background-color: var(--secondary-bg); |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .preview-title { |
| font-weight: 600; |
| } |
|
|
| .preview-controls { |
| display: flex; |
| gap: 0.5rem; |
| } |
|
|
| .preview-control-btn { |
| background-color: var(--secondary-bg); |
| color: var(--text-color); |
| border: 1px solid var(--border-color); |
| border-radius: 0.5rem; |
| padding: 0.5rem 1rem; |
| font-size: 0.9rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| transition: all 0.2s ease; |
| } |
|
|
| .preview-control-btn:hover { |
| background-color: rgba(99, 102, 241, 0.1); |
| border-color: var(--accent-color); |
| } |
|
|
| #preview-frame { |
| flex: 1; |
| border: none; |
| width: 100%; |
| background-color: white; |
| } |
|
|
| |
| .input-area { |
| background-color: rgba(15, 17, 23, 0.9); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border-top: 1px solid var(--border-color); |
| padding: 1rem; |
| position: sticky; |
| bottom: 0; |
| } |
|
|
| .input-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: flex; |
| gap: 0.75rem; |
| align-items: flex-end; |
| } |
|
|
| .message-input { |
| flex: 1; |
| background-color: var(--secondary-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 0.75rem; |
| padding: 0.75rem 1rem; |
| color: var(--text-color); |
| font-size: 0.95rem; |
| resize: none; |
| min-height: 52px; |
| max-height: 200px; |
| transition: all 0.2s ease; |
| outline: none; |
| font-family: 'Inter', sans-serif; |
| } |
|
|
| .message-input:focus { |
| border-color: var(--accent-color); |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .send-button { |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| color: white; |
| border: none; |
| border-radius: 0.75rem; |
| padding: 0.65rem 1.25rem; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 52px; |
| height: 52px; |
| box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .send-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); |
| } |
|
|
| .send-button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
|
|
| .input-hint { |
| text-align: center; |
| color: var(--text-secondary); |
| font-size: 0.8rem; |
| margin-top: 0.5rem; |
| } |
|
|
| |
| .welcome-screen { |
| text-align: center; |
| padding: 2rem 1rem; |
| color: var(--text-secondary); |
| max-width: 800px; |
| margin: 2rem auto; |
| } |
|
|
| .welcome-icon { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
|
|
| .welcome-title { |
| font-size: 2.5rem; |
| margin-bottom: 0.5rem; |
| color: var(--text-color); |
| font-weight: 700; |
| background: linear-gradient(90deg, var(--text-color), var(--accent-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .welcome-subtitle { |
| font-size: 1.1rem; |
| margin-bottom: 1.5rem; |
| color: var(--text-secondary); |
| } |
|
|
| .suggestion-cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
|
|
| .suggestion-card { |
| background-color: var(--secondary-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 0.75rem; |
| padding: 1rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-align: left; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .suggestion-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); |
| transition: left 0.5s ease; |
| } |
|
|
| .suggestion-card:hover::before { |
| left: 100%; |
| } |
|
|
| .suggestion-card:hover { |
| transform: translateY(-5px); |
| border-color: var(--accent-color); |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .suggestion-title { |
| font-weight: 600; |
| margin-bottom: 0.5rem; |
| color: var(--accent-color); |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
|
|
| .suggestion-desc { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
|
|
| |
| .typing-indicator { |
| display: inline-block; |
| margin-left: 5px; |
| } |
|
|
| .typing-dot { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--text-secondary); |
| margin: 0 1px; |
| animation: typing 1.4s infinite both; |
| } |
|
|
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| .typing-dot:nth-child(3) { animation-delay: 0s; } |
|
|
| @keyframes typing { |
| 0%, 80%, 100% { transform: scale(0.4); opacity: 0.5; } |
| 40% { transform: scale(1.0); opacity: 1; } |
| } |
|
|
| |
| .floating-action-btn { |
| position: fixed; |
| bottom: 1.5rem; |
| right: 1.5rem; |
| width: 56px; |
| height: 56px; |
| border-radius: 50%; |
| background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); |
| color: white; |
| border: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| cursor: pointer; |
| box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); |
| transition: all 0.3s ease; |
| z-index: 50; |
| animation: pulse 2s infinite; |
| } |
|
|
| .floating-action-btn:hover { |
| transform: scale(1.1); |
| box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .sidebar { |
| width: 85%; |
| } |
|
|
| .message { |
| max-width: 95%; |
| } |
|
|
| .input-container { |
| flex-direction: column; |
| } |
|
|
| .send-button { |
| width: 100%; |
| margin-top: 0.5rem; |
| height: 44px; |
| } |
|
|
| .header-right { |
| display: none; |
| } |
|
|
| .suggestion-cards { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--secondary-bg); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border-color); |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--accent-color); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="app"> |
| <!-- Backdrop for sidebar on mobile --> |
| <div class="sidebar-backdrop"></div> |
| |
| <!-- Sidebar --> |
| <div class="sidebar"> |
| <div class="sidebar-header"> |
| <h3>AI Assistant</h3> |
| <button class="close-btn"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="sidebar-section"> |
| <h4>Chats</h4> |
| <div class="sidebar-item active"> |
| <i class="fas fa-comment"></i> |
| <span>Today</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-history"></i> |
| <span>Previous 7 Days</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-calendar"></i> |
| <span>Previous 30 Days</span> |
| </div> |
| </div> |
| |
| <div class="sidebar-section"> |
| <h4>Collections</h4> |
| <div class="sidebar-item"> |
| <i class="fas fa-code"></i> |
| <span>Programming</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-palette"></i> |
| <span>Creative Writing</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-chart-bar"></i> |
| <span>Data Analysis</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-language"></i> |
| <span>Translation</span> |
| </div> |
| </div> |
| |
| <div class="sidebar-section"> |
| <h4>Settings</h4> |
| <div class="sidebar-item"> |
| <i class="fas fa-cog"></i> |
| <span>Preferences</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-user"></i> |
| <span>Account</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-moon"></i> |
| <span>Theme</span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Main Content --> |
| <div class="main-content"> |
| <!-- Header --> |
| <div class="header"> |
| <div class="header-left"> |
| <button class="hamburger-btn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <div class="logo"> |
| <i class="fas fa-robot"></i> |
| <span>AI Assistant</span> |
| </div> |
| </div> |
| |
| <div class="header-right"> |
| <select class="mode-selector"> |
| <option>Balanced Mode</option> |
| <option>Creative Mode</option> |
| <option>Precise Mode</option> |
| </select> |
| <select class="model-selector"> |
| <option>Qwen3-Max</option> |
| <option>GPT-4</option> |
| <option>Claude-3</option> |
| </select> |
| <button class="new-chat-btn"> |
| <i class="fas fa-plus"></i> |
| <span>New Chat</span> |
| </button> |
| </div> |
| </div> |
| |
| <!-- Tab Container --> |
| <div class="tab-container"> |
| <div class="tab-header"> |
| <div class="tab active" data-tab="chat">Chat</div> |
| <div class="tab" data-tab="files">Files</div> |
| <div class="tab" data-tab="terminal">Terminal</div> |
| <div class="tab" data-tab="preview">Preview</div> |
| </div> |
| |
| <!-- Chat Tab --> |
| <div class="tab-content active" id="chat-tab"> |
| <div class="chat-container"> |
| <!-- Welcome Screen --> |
| <div class="welcome-screen"> |
| <div class="welcome-icon"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h1 class="welcome-title">How can I help you today?</h1> |
| <p class="welcome-subtitle">Ask me anything or try one of these examples</p> |
| |
| <div class="suggestion-cards"> |
| <div class="suggestion-card"> |
| <div class="suggestion-title"> |
| <i class="fas fa-code"></i> |
| <span>Write a Python function</span> |
| </div> |
| <div class="suggestion-desc"> |
| Create a function to calculate Fibonacci sequence |
| </div> |
| </div> |
| <div class="suggestion-card"> |
| <div class="suggestion-title"> |
| <i class="fas fa-pen-fancy"></i> |
| <span>Creative story</span> |
| </div> |
| <div class="suggestion-desc"> |
| Write a short story about a robot learning emotions |
| </div> |
| </div> |
| <div class="suggestion-card"> |
| <div class="suggestion-title"> |
| <i class="fas fa-chart-line"></i> |
| <span>Data analysis</span> |
| </div> |
| <div class="suggestion-desc"> |
| Help me analyze sales data and identify trends |
| </div> |
| </div> |
| <div class="suggestion-card"> |
| <div class="suggestion-title"> |
| <i class="fas fa-language"></i> |
| <span>Translate text</span> |
| </div> |
| <div class="suggestion-desc"> |
| Translate this paragraph to Spanish |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Example Messages --> |
| <div class="message user-message"> |
| <div class="message-header"> |
| <div class="avatar user-avatar">U</div> |
| <span>You</span> |
| </div> |
| <div class="message-content"> |
| Hello! Can you help me write a Python function to calculate the factorial of a number? |
| </div> |
| </div> |
| |
| <div class="message assistant-message"> |
| <div class="message-header"> |
| <div class="avatar assistant-avatar">AI</div> |
| <span>Assistant</span> |
| </div> |
| <div class="message-content"> |
| <div class="thinking-step">Thinking about the best approach...</div> |
| <p>Sure! Here's a Python function to calculate the factorial of a number:</p> |
| |
| <div class="code-container"> |
| <div class="code-header"> |
| <span class="code-language">Python</span> |
| <button class="copy-btn"> |
| <i class="fas fa-copy"></i> Copy |
| </button> |
| </div> |
| <pre><code>def factorial(n): |
| """ |
| Calculate the factorial of a non-negative integer. |
| |
| Args: |
| n (int): A non-negative integer |
| |
| Returns: |
| int: The factorial of n |
| """ |
| if n < 0: |
| raise ValueError("Factorial is not defined for negative numbers") |
| elif n == 0 or n == 1: |
| return 1 |
| else: |
| result = 1 |
| for i in range(2, n + 1): |
| result *= i |
| return result |
|
|
| # Example usage |
| print(factorial(5)) # Output: 120</code></pre> |
| </div> |
| |
| <p>This function handles edge cases and includes proper documentation. Would you like me to explain any part of it or create a recursive version instead?</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Files Tab --> |
| <div class="tab-content" id="files-tab"> |
| <div class="files-header"> |
| <div class="file-actions"> |
| <button class="file-action-btn"> |
| <i class="fas fa-plus"></i> |
| <span>New File</span> |
| </button> |
| <button class="file-action-btn"> |
| <i class="fas fa-folder-plus"></i> |
| <span>New Folder</span> |
| </button> |
| <button class="file-action-btn"> |
| <i class="fas fa-upload"></i> |
| <span>Upload</span> |
| </button> |
| </div> |
| <div class="file-search"> |
| <input type="text" placeholder="Search files..."> |
| </div> |
| </div> |
| <div class="file-tree"> |
| <div class="folder-item expanded"> |
| <div class="folder-header"> |
| <i class="fas fa-chevron-right folder-icon"></i> |
| <i class="fas fa-folder"></i> |
| <span>Projects</span> |
| </div> |
| <div class="folder-content"> |
| <div class="file-item"> |
| <i class="fas fa-file-code"></i> |
| <span>web_app.py</span> |
| </div> |
| <div class="file-item"> |
| <i class="fas fa-file-alt"></i> |
| <span>README.md</span> |
| </div> |
| <div class="file-item"> |
| <i class="fas fa-file-image"></i> |
| <span>design.png</span> |
| </div> |
| </div> |
| </div> |
| <div class="folder-item"> |
| <div class="folder-header"> |
| <i class="fas fa-chevron-right folder-icon"></i> |
| <i class="fas fa-folder"></i> |
| <span>Documents</span> |
| </div> |
| <div class="folder-content"> |
| <div class="file-item"> |
| <i class="fas fa-file-pdf"></i> |
| <span>report.pdf</span> |
| </div> |
| <div class="file-item"> |
| <i class="fas fa-file-word"></i> |
| <span>proposal.docx</span> |
| </div> |
| </div> |
| </div> |
| <div class="file-item"> |
| <i class="fas fa-file"></i> |
| <span>notes.txt</span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Terminal Tab --> |
| <div class="tab-content" id="terminal-tab"> |
| <div class="terminal-header"> |
| <div class="terminal-title">Terminal</div> |
| <div class="terminal-controls"> |
| <button class="terminal-control-btn"> |
| <i class="fas fa-plus"></i> |
| <span>New Tab</span> |
| </button> |
| <button class="terminal-control-btn"> |
| <i class="fas fa-redo"></i> |
| <span>Clear</span> |
| </button> |
| </div> |
| </div> |
| <div class="terminal-output"> |
| <div class="terminal-line">[user@ai-assistant ~]$ ls -la</div> |
| <div class="terminal-line">total 48</div> |
| <div class="terminal-line">drwxr-xr-x 12 user staff 384 Jun 10 10:30 .</div> |
| <div class="terminal-line">drwxr-xr-x 5 user staff 160 Jun 5 14:22 ..</div> |
| <div class="terminal-line">-rw-r--r-- 1 user staff 324 Jun 8 09:15 .gitignore</div> |
| <div class="terminal-line">drwxr-xr-x 4 user staff 128 Jun 10 10:30 src</div> |
| <div class="terminal-line">drwxr-xr-x 3 user staff 96 Jun 9 16:45 docs</div> |
| <div class="terminal-line">-rw-r--r-- 1 user staff 1024 Jun 10 10:28 package.json</div> |
| <div class="terminal-line">[user@ai-assistant ~]$</div> |
| </div> |
| <div class="terminal-input-container"> |
| <span class="terminal-prompt">[user@ai-assistant ~]$</span> |
| <input type="text" id="terminal-input" autocomplete="off"> |
| </div> |
| </div> |
| |
| <!-- Preview Tab --> |
| <div class="tab-content" id="preview-tab"> |
| <div class="preview-header"> |
| <div class="preview-title">Preview</div> |
| <div class="preview-controls"> |
| <button class="preview-control-btn"> |
| <i class="fas fa-sync-alt"></i> |
| <span>Refresh</span> |
| </button> |
| <button class="preview-control-btn"> |
| <i class="fas fa-expand"></i> |
| <span>Fullscreen</span> |
| </button> |
| </div> |
| </div> |
| <iframe id="preview-frame" src="about:blank"></iframe> |
| </div> |
| </div> |
| |
| <!-- Input Area --> |
| <div class="input-area"> |
| <div class="input-container"> |
| <textarea class="message-input" placeholder="Type your message here..."></textarea> |
| <button class="send-button"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="input-hint"> |
| Press Enter to send, Shift+Enter for new line |
| </div> |
| </div> |
| </div> |
| |
| <!-- Floating Action Button for Mobile --> |
| <button class="floating-action-btn"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Sidebar toggle functionality |
| const hamburgerBtn = document.querySelector('.hamburger-btn'); |
| const closeBtn = document.querySelector('.close-btn'); |
| const sidebar = document.querySelector('.sidebar'); |
| const sidebarBackdrop = document.querySelector('.sidebar-backdrop'); |
| |
| function toggleSidebar() { |
| sidebar.classList.toggle('open'); |
| sidebarBackdrop.classList.toggle('active'); |
| } |
| |
| hamburgerBtn.addEventListener('click', toggleSidebar); |
| closeBtn.addEventListener('click', toggleSidebar); |
| sidebarBackdrop.addEventListener('click', toggleSidebar); |
| |
| // Tab switching functionality |
| const tabs = document.querySelectorAll('.tab'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| // Remove active class from all tabs and contents |
| tabs.forEach(t => t.classList.remove('active')); |
| tabContents.forEach(c => c.classList.remove('active')); |
| |
| // Add active class to clicked tab and corresponding content |
| tab.classList.add('active'); |
| const tabId = tab.getAttribute('data-tab'); |
| document.getElementById(`${tabId}-tab`).classList.add('active'); |
| }); |
| }); |
| |
| // Auto-resize textarea |
| const messageInput = document.querySelector('.message-input'); |
| |
| messageInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| // Send message on Enter (without Shift) |
| messageInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| // In a real app, this would send the message |
| // For demo, we'll just clear the input |
| this.value = ''; |
| this.style.height = 'auto'; |
| } |
| }); |
| |
| // Folder expansion |
| const folderHeaders = document.querySelectorAll('.folder-header'); |
| |
| folderHeaders.forEach(header => { |
| header.addEventListener('click', () => { |
| const folderItem = header.parentElement; |
| folderItem.classList.toggle('expanded'); |
| }); |
| }); |
| |
| // Copy button functionality |
| const copyButtons = document.querySelectorAll('.copy-btn'); |
| |
| copyButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| const codeBlock = button.parentElement.nextElementSibling; |
| const text = codeBlock.textContent; |
| |
| navigator.clipboard.writeText(text).then(() => { |
| // Visual feedback |
| const originalText = button.innerHTML; |
| button.innerHTML = '<i class="fas fa-check"></i> Copied!'; |
| |
| setTimeout(() => { |
| button.innerHTML = originalText; |
| }, 2000); |
| }); |
| }); |
| }); |
| |
| // Suggestion cards |
| const suggestionCards = document.querySelectorAll('.suggestion-card'); |
| |
| suggestionCards.forEach(card => { |
| card.addEventListener('click', () => { |
| const title = card.querySelector('.suggestion-title span').textContent; |
| messageInput.value = title; |
| messageInput.focus(); |
| |
| // Trigger the input event to resize the textarea |
| const event = new Event('input', { bubbles: true }); |
| messageInput.dispatchEvent(event); |
| }); |
| }); |
| |
| // Simulate typing in terminal |
| const terminalInput = document.getElementById('terminal-input'); |
| const terminalOutput = document.querySelector('.terminal-output'); |
| |
| terminalInput.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter') { |
| e.preventDefault(); |
| const command = this.value.trim(); |
| |
| if (command) { |
| // Add the command to output |
| const commandLine = document.createElement('div'); |
| commandLine.className = 'terminal-line'; |
| commandLine.textContent = `[user@ai-assistant ~]$ ${command}`; |
| terminalOutput.appendChild(commandLine); |
| |
| // Simulate command output based on input |
| setTimeout(() => { |
| let output = ''; |
| |
| if (command === 'ls' || command === 'ls -la') { |
| output = `total 48 |
| drwxr-xr-x 12 user staff 384 Jun 10 10:30 . |
| drwxr-xr-x 5 user staff 160 Jun 5 14:22 .. |
| -rw-r--r-- 1 user staff 324 Jun 8 09:15 .gitignore |
| drwxr-xr-x 4 user staff 128 Jun 10 10:30 src |
| drwxr-xr-x 3 user staff 96 Jun 9 16:45 docs |
| -rw-r--r-- 1 user staff 1024 Jun 10 10:28 package.json`; |
| } else if (command === 'pwd') { |
| output = '/home/user/ai-assistant'; |
| } else if (command === 'whoami') { |
| output = 'user'; |
| } else { |
| output = `Command '${command}' not found`; |
| } |
| |
| const outputLines = output.split('\n'); |
| outputLines.forEach(line => { |
| const outputLine = document.createElement('div'); |
| outputLine.className = 'terminal-line'; |
| outputLine.textContent = line; |
| terminalOutput.appendChild(outputLine); |
| }); |
| |
| // Add new prompt |
| const promptLine = document.createElement('div'); |
| promptLine.className = 'terminal-line'; |
| promptLine.textContent = '[user@ai-assistant ~]$'; |
| terminalOutput.appendChild(promptLine); |
| |
| // Scroll to bottom |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| }, 300); |
| |
| // Clear input |
| this.value = ''; |
| } |
| } |
| }); |
| |
| // New chat button functionality |
| const newChatBtn = document.querySelector('.new-chat-btn'); |
| const floatingActionBtn = document.querySelector('.floating-action-btn'); |
| |
| function startNewChat() { |
| // Hide welcome screen and show empty chat |
| const welcomeScreen = document.querySelector('.welcome-screen'); |
| const exampleMessages = document.querySelectorAll('.message'); |
| |
| welcomeScreen.style.display = 'none'; |
| exampleMessages.forEach(msg => msg.style.display = 'none'); |
| |
| // Clear input |
| messageInput.value = ''; |
| messageInput.focus(); |
| |
| // Switch to chat tab if not already there |
| tabs[0].click(); |
| } |
| |
| newChatBtn.addEventListener('click', startNewChat); |
| floatingActionBtn.addEventListener('click', startNewChat); |
| }); |
| </script> |
| </body> |
| </html> |
