Spaces:
Runtime error
Runtime error
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>Claude AI - Professional Workspace</title> | |
| <style> | |
| :root { | |
| --claude-bg: #fbfaf7; | |
| --claude-sidebar: #f3f0e9; | |
| --claude-text: #191919; | |
| --claude-text-secondary: #666362; | |
| --claude-border: rgba(0, 0, 0, 0.08); | |
| --claude-primary: #d97706; | |
| --claude-primary-hover: #b45309; | |
| --claude-accent: #e2e8f0; | |
| --chat-bubble-user: #f4f4f5; | |
| --chat-bubble-ai: transparent; | |
| --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| --sidebar-width: 260px; | |
| } | |
| [data-theme="dark"] { | |
| --claude-bg: #1e1e1e; | |
| --claude-sidebar: #181818; | |
| --claude-text: #e3e3e3; | |
| --claude-text-secondary: #a3a3a3; | |
| --claude-border: rgba(255, 255, 255, 0.08); | |
| --claude-primary: #f59e0b; | |
| --claude-primary-hover: #d97706; | |
| --claude-accent: #2d2d2d; | |
| --chat-bubble-user: #2d2d2d; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body, html { | |
| height: 100%; | |
| width: 100%; | |
| font-family: var(--font-sans); | |
| background-color: var(--claude-bg); | |
| color: var(--claude-text); | |
| overflow: hidden; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .app-container { | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| /* SIDEBAR COMPONENT */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| height: 100%; | |
| background-color: var(--claude-sidebar); | |
| border-right: 1px solid var(--claude-border); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 40; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .sidebar-header { | |
| padding: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--claude-border); | |
| } | |
| .new-chat-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 10px 14px; | |
| background-color: transparent; | |
| border: 1px solid var(--claude-border); | |
| border-radius: 6px; | |
| color: var(--claude-text); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| text-align: left; | |
| } | |
| .new-chat-btn:hover { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| [data-theme="dark"] .new-chat-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| .history-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 12px 8px; | |
| } | |
| .history-section-title { | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--claude-text-secondary); | |
| margin: 14px 8px 6px; | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| margin-bottom: 2px; | |
| group: relative; | |
| position: relative; | |
| transition: background 0.15s; | |
| } | |
| .history-item:hover, .history-item.active { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| [data-theme="dark"] .history-item:hover, [data-theme="dark"] .history-item.active { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| .history-item-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .history-title { | |
| font-size: 13.5px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| color: var(--claude-text); | |
| } | |
| .history-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.15s; | |
| } | |
| .history-item:hover .history-actions { | |
| opacity: 1; | |
| } | |
| .action-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 2px; | |
| color: var(--claude-text-secondary); | |
| border-radius: 4px; | |
| } | |
| .action-btn:hover { | |
| color: var(--claude-text); | |
| background-color: rgba(0, 0, 0, 0.06); | |
| } | |
| /* MAIN WORKSPACE */ | |
| .workspace { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| background-color: var(--claude-bg); | |
| position: relative; | |
| } | |
| .main-header { | |
| height: 56px; | |
| border-bottom: 1px solid var(--claude-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| z-index: 30; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .toggle-sidebar-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--claude-text); | |
| padding: 4px; | |
| border-radius: 4px; | |
| } | |
| .chat-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .chat-wrapper { | |
| width: 100%; | |
| max-width: 740px; | |
| padding: 0 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 32px; | |
| } | |
| /* CHAT BUBBLES */ | |
| .message-turn { | |
| display: flex; | |
| gap: 16px; | |
| width: 100%; | |
| animation: fadeIn 0.25s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(4px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-turn.user { | |
| justify-content: flex-end; | |
| } | |
| .avatar { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| font-size: 12px; | |
| flex-shrink: 0; | |
| } | |
| .avatar.ai { | |
| background-color: var(--claude-primary); | |
| color: white; | |
| } | |
| .message-content { | |
| flex: 1; | |
| max-width: calc(100% - 44px); | |
| font-size: 15.5px; | |
| line-height: 1.7; | |
| word-wrap: break-word; | |
| } | |
| .message-turn.user .message-content { | |
| background-color: var(--chat-bubble-user); | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| max-width: 80%; | |
| flex: initial; | |
| } | |
| /* CODE CONTAINER GENERATED BY AI */ | |
| .code-block-container { | |
| margin: 12px 0; | |
| border: 1px solid var(--claude-border); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background-color: #1e1e1e; | |
| color: #f4f4f5; | |
| } | |
| .code-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 14px; | |
| background-color: #18181b; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: #a1a1aa; | |
| } | |
| .code-actions { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .code-action-link { | |
| cursor: pointer; | |
| color: #a1a1aa; | |
| transition: color 0.15s; | |
| } | |
| .code-action-link:hover { | |
| color: #fff; | |
| } | |
| pre { | |
| padding: 14px; | |
| overflow-x: auto; | |
| font-family: var(--font-mono); | |
| font-size: 13.5px; | |
| line-height: 1.5; | |
| } | |
| /* FLOATING INPUT PANEL */ | |
| .input-panel-container { | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| padding: 0 20px 24px; | |
| background-color: transparent; | |
| } | |
| .input-panel-wrapper { | |
| width: 100%; | |
| max-width: 740px; | |
| border: 1px solid var(--claude-border); | |
| border-radius: 16px; | |
| background-color: var(--claude-bg); | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.03); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 8px; | |
| position: relative; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .input-panel-wrapper:focus-within { | |
| border-color: rgba(0, 0, 0, 0.18); | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.06); | |
| } | |
| [data-theme="dark"] .input-panel-wrapper:focus-within { | |
| border-color: rgba(255, 255, 255, 0.22); | |
| } | |
| .preview-files-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 6px 8px; | |
| } | |
| .file-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background-color: var(--claude-accent); | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 12.5px; | |
| max-width: 180px; | |
| } | |
| .file-chip-name { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .textarea-box { | |
| width: 100%; | |
| border: none; | |
| background: transparent; | |
| resize: none; | |
| outline: none; | |
| color: var(--claude-text); | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| padding: 8px 12px; | |
| min-height: 40px; | |
| max-height: 200px; | |
| } | |
| .input-control-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 4px 8px 0; | |
| border-top: 1px solid transparent; | |
| } | |
| .controls-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| /* CLAUDE CONTROLS SYSTEM */ | |
| .toggle-switch-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .switch-box { | |
| width: 34px; | |
| height: 18px; | |
| background-color: var(--claude-accent); | |
| border-radius: 9px; | |
| position: relative; | |
| transition: background 0.2s; | |
| } | |
| .switch-dot { | |
| width: 14px; | |
| height: 14px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| transition: transform 0.2s; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.15); | |
| } | |
| .toggle-switch-wrapper.active .switch-box { | |
| background-color: var(--claude-primary); | |
| } | |
| .toggle-switch-wrapper.active .switch-dot { | |
| transform: translateX(16px); | |
| } | |
| .switch-label { | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| color: var(--claude-text-secondary); | |
| } | |
| .icon-trigger-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--claude-text-secondary); | |
| padding: 4px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .icon-trigger-btn:hover { | |
| color: var(--claude-text); | |
| background-color: var(--claude-accent); | |
| } | |
| .submit-btn { | |
| background-color: var(--claude-primary); | |
| color: white; | |
| border: none; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background 0.15s, opacity 0.15s; | |
| } | |
| .submit-btn:hover { | |
| background-color: var(--claude-primary-hover); | |
| } | |
| .submit-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* WELCOME CANVAS */ | |
| .welcome-canvas { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .welcome-title { | |
| font-size: 28px; | |
| font-weight: 500; | |
| margin-bottom: 24px; | |
| letter-spacing: -0.02em; | |
| } | |
| /* TOAST ENGINE */ | |
| .toast-banner { | |
| position: fixed; | |
| bottom: 100px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(10px); | |
| background-color: #1e1e1e; | |
| color: #fff; | |
| padding: 10px 18px; | |
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nive AI Workspace</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } | |
| .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; } | |
| .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 flex h-screen overflow-hidden"> | |
| <!-- SIDEBAR (Ẩn trên điện thoại, hiện khi bấm menu) --> | |
| <div id="sidebar" class="fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-slate-200 transform -translate-x-full transition-transform duration-300 md:relative md:translate-x-0 flex flex-col"> | |
| <div class="p-4 border-b border-slate-100 flex items-center justify-between"> | |
| <span class="font-bold text-lg text-indigo-600 flex items-center gap-2"> | |
| <i class="fa-solid fa-layer-group"></i> Nive AI | |
| </span> | |
| <button onclick="toggleSidebar()" class="md:hidden text-slate-500 hover:text-slate-800"> | |
| <i class="fa-solid fa-xmark text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-3"> | |
| <button class="w-full py-2 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium rounded-lg text-sm transition flex items-center justify-center gap-2"> | |
| <i class="fa-solid fa-plus text-xs"></i> Cuộc trò chuyện mới | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-1"> | |
| <!-- Lịch sử chat trống --> | |
| <div class="text-xs text-slate-400 text-center py-4">Chưa có lịch sử trò chuyện</div> | |
| </div> | |
| </div> | |
| <!-- MAIN WORKSPACE --> | |
| <div class="flex-1 flex flex-col h-full relative overflow-hidden bg-slate-50"> | |
| <!-- HEADER --> | |
| <header class="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-30"> | |
| <div class="flex items-center gap-3"> | |
| <button onclick="toggleSidebar()" class="md:hidden text-slate-600 hover:text-indigo-600 p-1"> | |
| <i class="fa-solid fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="font-semibold text-slate-700 text-base md:text-lg">Nive AI Workspace</h1> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="p-2 text-slate-500 hover:text-indigo-600 rounded-full hover:bg-slate-100 transition"> | |
| <i class="fa-regular fa-moon text-lg"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- CHAT AREA --> | |
| <div id="chat-box" class="flex-1 overflow-y-auto p-4 md:p-6 space-y-4 custom-scrollbar pb-32"> | |
| <!-- Tin nhắn chào mừng --> | |
| <div class="max-w-2xl mx-auto bg-white p-6 rounded-2xl border border-slate-200 shadow-sm mt-8"> | |
| <h2 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"> | |
| 👋 Xin chào! Tôi là Nive AI | |
| </h2> | |
| <p class="text-slate-600 text-sm leading-relaxed"> | |
| Tôi có thể giúp bạn viết code, giải nghĩa thuật toán, tìm kiếm thông tin thời gian thực hoặc phân tích dữ liệu từ các file đính kèm. Hãy thử gửi một yêu cầu bên dưới! | |
| </p> | |
| </div> | |
| </div> | |
| <!-- INPUT CONTAINER (Gắn chặt ở đáy màn hình, Responsive) --> | |
| <div class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-slate-50 via-slate-50 to-transparent p-4 z-30"> | |
| <div class="max-w-3xl mx-auto bg-white border border-slate-300 rounded-2xl shadow-md p-2 transition-all focus-within:border-indigo-500 focus-within:ring-2 focus-within:ring-indigo-100"> | |
| <!-- Khu vực gõ text --> | |
| <textarea id="user-input" rows="2" class="w-full border-0 focus:ring-0 focus:outline-none resize-none text-sm text-slate-700 px-2 py-1 custom-scrollbar" placeholder="Nhập câu hỏi hoặc yêu cầu lập trình của bạn tại đây..."></textarea> | |
| <!-- Thanh công cụ điều khiển --> | |
| <div class="flex items-center justify-between border-t border-slate-100 pt-2 px-2 mt-1 flex-wrap gap-2"> | |
| <div class="flex items-center gap-3"> | |
| <!-- Nút đính kèm --> | |
| <button class="text-slate-400 hover:text-indigo-600 transition flex items-center gap-1 text-xs font-medium"> | |
| <i class="fa-solid fa-paperclip text-sm"></i> <span class="hidden sm:inline">Đính kèm</span> | |
| </button> | |
| <!-- Toggle Tìm kiếm Web --> | |
| <label class="inline-flex items-center cursor-pointer select-none"> | |
| <input type="checkbox" id="web-search-toggle" class="sr-only peer"> | |
| <div class="relative w-7 h-4 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-indigo-600"></div> | |
| <span class="ms-2 text-xs font-medium text-slate-500 peer-checked:text-indigo-600">Tìm kiếm Web</span> | |
| </label> | |
| </div> | |
| <!-- Nút gửi câu hỏi --> | |
| <button onclick="sendMessage()" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl px-4 py-1.5 text-xs font-medium transition flex items-center gap-1 shadow-sm"> | |
| <span>Gửi</span> <i class="fa-solid fa-paper-plane text-[10px]"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SCRIPT ĐIỀU KHIỂN GIAO DIỆN --> | |
| <script> | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebar.classList.toggle('-translate-x-full'); | |
| } | |
| function sendMessage() { | |
| const input = document.getElementById('user-input'); | |
| const text = input.value.trim(); | |
| if(!text) return; | |
| // Log mẫu xử lý tin nhắn | |
| const chatBox = document.getElementById('chat-box'); | |
| const msgHtml = `<div class="flex justify-end max-w-3xl mx-auto"><div class="bg-indigo-600 text-white p-3 rounded-2xl rounded-tr-none text-sm max-w-[85%] shadow-sm">${text}</div></div>`; | |
| chatBox.insertAdjacentHTML('beforeend', msgHtml); | |
| input.value = ''; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> | |