diff --git a/templates/index.html b/templates/index.html index a2204ad..b08f6f5 100644 --- a/templates/index.html +++ b/templates/index.html @@ -84,10 +84,8 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var( .topbar-right { display:flex; align-items:center; gap:6px; } .hamburger { background:transparent; border:1px solid var(--border); color:var(--text-secondary); width:30px; height:30px; border-radius:var(--radius); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; } .hamburger:hover { background:var(--bg-hover); border-color:var(--accent-dim); color:var(--accent); } -.topbar-brand { font-family:var(--font-body); font-size:14px; color:var(--text-primary); white-space:nowrap; letter-spacing:0.5px; } +.topbar-brand { font-family:var(--font-body); font-size:14px; color:#e0e8ff; white-space:nowrap; letter-spacing:0.5px; } .topbar-brand .version { color:var(--text-muted); font-size:11px; } -.llama-icon { font-size:14px; } -.llama-icon.flip { display:inline-block; transform:scaleX(-1); } .badge { font-size:10px; padding:3px 10px; border-radius:10px; font-family:var(--font-body); cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-muted); transition:all 0.15s; letter-spacing:0.5px; } .badge.on { border-color:rgba(0,255,102,0.3); color:var(--success); background:rgba(0,255,102,0.08); } .badge.off { border-color:rgba(255,51,85,0.3); color:var(--danger); background:rgba(255,51,85,0.08); } @@ -146,6 +144,8 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var( .welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); text-align:center; gap:12px; } .welcome-screen .logo { font-family:var(--font-mono); font-size:48px; color:var(--accent-dim); opacity:0.5; } .welcome-screen p { font-size:14px; max-width:420px; line-height:1.6; } +.ws-hint { font-size:12px; color:var(--text-muted); display:block; margin-top:8px; } +.ws-hint code { background:var(--bg-tertiary); padding:1px 5px; border-radius:3px; font-family:var(--font-mono); font-size:11px; } .message { display:flex; gap:12px; max-width:900px; width:100%; margin:0 auto; animation:fadeIn 0.2s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .message .avatar { width:32px; height:32px; min-width:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:600; margin-top:2px; } @@ -190,22 +190,16 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var( .msg-toolbar .toolbar-label { font-size:10px; font-family:var(--font-mono); color:var(--text-muted); margin-right:4px; } .input-area { padding:16px 20px; border-top:1px solid var(--border); background:var(--bg-secondary); } -.input-row-top { max-width:900px; margin:0 auto 8px; display:flex; gap:8px; align-items:center; } -.input-row-top select { background:var(--bg-tertiary); border:1px solid var(--border); color:var(--text-secondary); font-family:var(--font-mono); font-size:11px; padding:4px 8px; border-radius:var(--radius); cursor:pointer; } -.input-row-top .preset-label { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); } -.input-wrapper { max-width:900px; margin:0 auto; display:flex; gap:10px; align-items:flex-end; } -.input-wrapper textarea { flex:1; background:var(--bg-tertiary); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-body); font-size:14px; padding:12px 14px; border-radius:var(--radius); resize:none; min-height:44px; max-height:200px; line-height:1.5; } -.input-wrapper textarea:focus { outline:none; border-color:var(--accent-dim); } -.input-wrapper textarea::placeholder { color:var(--text-muted); } +.input-row { max-width:900px; margin:0 auto; display:flex; gap:10px; align-items:flex-end; } +.input-row textarea { flex:1; background:var(--bg-tertiary); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-body); font-size:14px; padding:12px 14px; border-radius:var(--radius); resize:none; min-height:44px; max-height:200px; line-height:1.5; } +.input-row textarea:focus { outline:none; border-color:var(--accent-dim); } +.input-row textarea::placeholder { color:var(--text-muted); } +.paperclip-btn { padding:12px 12px; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary); font-size:18px; cursor:pointer; transition:all 0.2s; line-height:1; } +.paperclip-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--accent-dim); } .send-btn { padding:12px 20px; background:var(--accent-dim); border:none; border-radius:var(--radius); color:#fff; font-family:var(--font-mono); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; } .send-btn:hover { background:var(--accent); } .stop-btn { padding:12px 20px; background:var(--danger); border:none; border-radius:var(--radius); color:#fff; font-family:var(--font-mono); font-size:13px; font-weight:600; cursor:pointer; } .stop-btn:hover { background:var(--danger-hover); } -.search-btn { padding:12px 14px; background:var(--warning); border:none; border-radius:var(--radius); color:#fff; font-size:16px; cursor:pointer; transition:background 0.2s; } -.search-btn:hover { background:#e67e22; } -.search-btn:disabled { background:var(--text-muted); cursor:not-allowed; } -.paperclip-btn { padding:12px 12px; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary); font-size:18px; cursor:pointer; transition:all 0.2s; line-height:1; } -.paperclip-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--accent-dim); } .file-preview { max-width:900px; margin:0 auto 8px; display:none; align-items:center; gap:10px; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; } .file-preview.visible { display:flex; } .file-preview-thumb { width:48px; height:48px; object-fit:cover; border-radius:4px; border:1px solid var(--border); } @@ -250,7 +244,6 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var( .raw-results small { color:var(--text-muted); display:block; margin-top:2px; } @media (max-width:768px) { - .sidebar { display:none; } .topbar { padding:10px 14px; } .chat-container { padding:12px; } .input-area { padding:10px 12px; } @@ -381,7 +374,7 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var(