| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> |
| <title>ORBIT – Educational AI Workspace</title> |
| |
| <link rel="icon" type="image/png" href="/static/icon.png" /> |
| <link rel="apple-touch-icon" href="/static/icon-192.png" /> |
| <link rel="manifest" href="/static/manifest.json" /> |
| |
| <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;800&display=swap" rel="stylesheet" /> |
| <meta name="theme-color" content="#ffffff"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="default"> |
| <meta name="apple-mobile-web-app-title" content="ORBIT"> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { sans: ['Inter', 'sans-serif'] }, |
| colors: { |
| orbit: { primary: '#2563EB', soft: '#64748B', line: '#E2E8F0', surface: '#F8FAFC' }, |
| accent: { DEFAULT: '#2563EB', hover: '#1d4ed8', light: '#eff6ff' } |
| }, |
| boxShadow: { |
| soft: '0 10px 40px rgba(15,23,42,.06)', |
| glow: '0 0 40px rgba(37,99,235,.08)' |
| } |
| } |
| }, |
| }; |
| </script> |
| <style> |
| * { -webkit-tap-highlight-color: transparent; } |
| html, body { height: 100dvh; width: 100%; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } |
| |
| body { |
| background: |
| radial-gradient(circle at top left, rgba(37,99,235,.05), transparent 25%), |
| radial-gradient(circle at bottom right, rgba(14,165,233,.05), transparent 30%), |
| #F8FAFC; |
| } |
| |
| .grid-pattern { |
| background-image: |
| linear-gradient(rgba(226,232,240,.6) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(226,232,240,.6) 1px, transparent 1px); |
| background-size: 42px 42px; |
| position: absolute; inset: 0; z-index: -1; pointer-events: none; |
| } |
| |
| .glass { |
| background: rgba(255,255,255,.85); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| } |
| |
| #sidebar { transition: transform 0.3s ease-in-out; height: 100dvh; } |
| ::-webkit-scrollbar { width: 5px; height: 5px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; } |
| #chat-textarea { resize: none; min-height: 24px; max-height: 150px; overflow-y: auto; } |
| #chat-messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } |
| |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| @keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } |
| .modal-back { animation: fadeIn .2s ease; } |
| .modal-box { animation: scaleIn .2s cubic-bezier(.34, 1.56, .64, 1); } |
| |
| .prose-orbit { color: #0f172a; font-size: 0.95rem; line-height: 1.7; } |
| .prose-orbit h1, .prose-orbit h2, .prose-orbit h3 { color: #0f172a; font-weight: 700; margin-top: 1.2em; margin-bottom: 0.5em; letter-spacing: -0.02em; } |
| .prose-orbit p { margin-bottom: 1.2em; } |
| .prose-orbit ul, .prose-orbit ol { padding-left: 1.5em; margin-bottom: 1.2em; } |
| .prose-orbit ul { list-style-type: disc; } |
| .prose-orbit ol { list-style-type: decimal; } |
| .prose-orbit strong { color: #0f172a; font-weight: 600; } |
| .prose-orbit code { background-color: #F8FAFC; color: #2563EB; border: 1px solid #E2E8F0; padding: 0.2em 0.4em; border-radius: 0.375rem; font-family: monospace; font-size: 0.85em; } |
| .prose-orbit pre { background-color: #0f172a; padding: 1.2em; border-radius: 1rem; overflow-x: auto; margin: 1.2em 0; color: #f8fafc; box-shadow: 0 10px 40px rgba(15,23,42,.1); } |
| .prose-orbit pre code { background-color: transparent; border: none; color: inherit; padding: 0; } |
| .prose-orbit img { border-radius: 1rem; margin: 1.2rem 0; max-width: 100%; height: auto; box-shadow: 0 10px 40px rgba(15,23,42,.06); border: 1px solid #E2E8F0;} |
| |
| |
| |
| |
| #model-select { |
| appearance: none; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| background-color: rgba(255, 255, 255, 0.75) !important; |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| border: 1px solid rgba(226, 232, 240, 0.9); |
| border-radius: 99px; |
| padding: 5px 30px 5px 12px; |
| font-size: 10px !important; |
| font-weight: 700 !important; |
| letter-spacing: 0.07em; |
| text-transform: uppercase; |
| color: #64748B !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important; |
| background-repeat: no-repeat; |
| background-position: right 10px center; |
| background-size: 10px; |
| box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; |
| transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; |
| cursor: pointer; |
| max-width: 165px; |
| } |
| |
| #model-select:hover { |
| border-color: rgba(37, 99, 235, 0.35); |
| color: #2563EB !important; |
| background-color: rgba(239, 246, 255, 0.85) !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563EB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important; |
| box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.7) inset; |
| } |
| |
| #model-select:focus { |
| outline: none; |
| border-color: rgba(37, 99, 235, 0.4); |
| color: #2563EB !important; |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); |
| } |
| |
| @media (max-width: 640px) { |
| #model-select { |
| max-width: 145px; |
| font-size: 9.5px !important; |
| padding: 4.5px 26px 4.5px 10px; |
| border-radius: 99px; |
| } |
| } |
| |
| |
| .prose-orbit { |
| word-break: break-word; |
| overflow-wrap: break-word; |
| min-width: 0; |
| max-width: 100%; |
| } |
| .prose-orbit pre, .prose-orbit table { |
| max-width: 100%; |
| overflow-x: auto !important; |
| -webkit-overflow-scrolling: touch; |
| } |
| .prose-orbit table { |
| display: block; |
| border-collapse: collapse; |
| margin: 1.5em 0; |
| } |
| .prose-orbit th, .prose-orbit td { |
| border: 1px solid #E2E8F0; |
| padding: 12px 16px; |
| text-align: left; |
| min-width: 140px; |
| font-size: 0.9em; |
| } |
| .prose-orbit th { |
| background-color: #F1F5F9; |
| font-weight: 700; |
| color: #1e293b; |
| } |
| </style> |
| </head> |
| <body class="text-slate-900 antialiased md:flex-row relative"> |
| <div class="grid-pattern opacity-50"></div> |
|
|
| <nav class="md:hidden glass sticky top-0 z-40 px-5 py-4 flex justify-between items-center border-b border-orbit-line shadow-sm"> |
| <div class="flex items-center gap-3"> |
| <button id="btn-hamburger" class="p-2 -ml-2 rounded-xl hover:bg-orbit-surface transition-colors"><svg class="w-6 h-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg></button> |
| <div class="flex items-center gap-2.5"> |
| <img src="/static/icon.png" alt="Logo" class="w-7 h-7 object-contain rounded-lg shadow-sm border border-orbit-line" onerror="this.style.display='none'"> |
| <span class="font-bold text-lg tracking-tight">ORBIT</span> |
| </div> |
| </div> |
| <button id="btn-clear-chat-mobile" class="p-2 text-orbit-soft hover:text-red-500 transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button> |
| </nav> |
|
|
| <div id="sidebar-overlay" class="hidden fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 md:hidden transition-opacity"></div> |
|
|
| <aside id="sidebar" class="fixed md:relative flex flex-col w-[280px] bg-white/80 backdrop-blur-2xl border-r border-orbit-line z-50 shrink-0 -translate-x-full md:translate-x-0 shadow-soft md:shadow-none"> |
| <div class="px-6 py-6 flex items-center justify-between border-b border-orbit-line/50"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 rounded-xl bg-white shadow-soft border border-orbit-line flex items-center justify-center overflow-hidden"> |
| <img src="/static/icon.png" class="w-6 h-6 object-contain" /> |
| </div> |
| <div> |
| <h1 class="text-base font-bold tracking-tight leading-tight">ORBIT</h1> |
| <p class="text-[9px] uppercase tracking-[0.2em] text-orbit-soft font-semibold">Workspace</p> |
| </div> |
| </div> |
| <button id="btn-close-sidebar" class="md:hidden text-orbit-soft hover:text-slate-900"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-width="2"/></svg></button> |
| </div> |
| |
| <div class="px-5 py-5 shrink-0"> |
| <button id="btn-new-chat" class="w-full flex items-center justify-center gap-2 bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm rounded-2xl py-3 shadow-soft hover:shadow-lg transition-all duration-300"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg> |
| New Chat |
| </button> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto px-4"> |
| <p class="text-[10px] font-bold text-orbit-soft uppercase tracking-[0.2em] mb-3 px-2">Recent</p> |
| <div id="history-list" class="space-y-1 mb-8"></div> |
| |
| <p class="text-[10px] font-bold text-orbit-soft uppercase tracking-[0.2em] mb-3 px-2">Workspace</p> |
| <div class="space-y-1.5"> |
| <button id="btn-doi" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium text-orbit-soft hover:bg-orbit-surface hover:text-orbit-primary transition-all"> |
| <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>Validate DOI |
| </button> |
| <a href="/static/docs/dokumen.pdf" target="_blank" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium text-orbit-soft hover:bg-orbit-surface hover:text-orbit-primary transition-all"> |
| <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"/></svg>How To |
| </a> |
| <button id="btn-settings" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium text-orbit-soft hover:bg-orbit-surface hover:text-orbit-primary transition-all"> |
| <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>Settings |
| </button> |
| <button id="btn-install-pwa" class="hidden w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-bold text-orbit-primary bg-blue-50 border border-blue-200 mt-4 hover:bg-blue-100 hover:shadow-soft transition-all"> |
| <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>Install App |
| </button> |
| </div> |
| </div> |
| |
| <div class="border-t border-orbit-line/50 p-5 flex items-center justify-between bg-white/50 backdrop-blur-md"> |
| <div class="flex items-center gap-3 overflow-hidden"> |
| <img id="user-avatar" src="" class="w-9 h-9 rounded-xl border border-orbit-line shrink-0 object-cover bg-orbit-surface"> |
| <span id="user-name" class="text-sm font-semibold text-slate-800 truncate">Loading...</span> |
| </div> |
| <a href="/auth/logout" class="text-orbit-soft hover:text-red-500 transition-colors bg-white p-2 rounded-xl shadow-sm border border-orbit-line"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-width="2"/></svg></a> |
| </div> |
| </aside> |
|
|
| <main class="flex-1 flex flex-col h-full relative min-w-0 overflow-hidden bg-transparent z-10"> |
| <header class="hidden md:flex items-center justify-between px-8 py-5 border-b border-orbit-line/50 glass shrink-0 z-20"> |
| <span class="text-sm font-semibold text-orbit-soft flex items-center gap-2"> |
| <div class="w-2 h-2 rounded-full bg-emerald-500"></div> Research Session |
| </span> |
| <button id="btn-clear-chat-top" class="text-xs font-semibold text-orbit-soft hover:text-red-500 bg-white px-4 py-2 rounded-xl shadow-sm border border-orbit-line transition-all hover:border-red-200">Clear Chat</button> |
| </header> |
|
|
| <div id="chat-area" class="flex-1 overflow-y-auto p-4 md:p-8 relative scroll-smooth z-10"> |
| |
| <div id="welcome-msg" class="absolute inset-0 flex flex-col items-center justify-center text-center px-4 z-10 fade-in pointer-events-none"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-blue-200/60 bg-blue-50/80 backdrop-blur-sm text-orbit-primary mb-6 shadow-sm"> |
| <div class="w-1.5 h-1.5 rounded-full bg-orbit-primary"></div> |
| <span class="text-[10px] font-bold uppercase tracking-[0.2em]">Educational AI Workspace</span> |
| </div> |
| <h2 class="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 mb-4 leading-tight">Welcome to ORBIT</h2> |
| <p class="text-orbit-soft text-base md:text-lg max-w-md leading-relaxed">Clean, intelligent, and built for meaningful academic research.</p> |
| </div> |
| |
| <div id="chat-messages" class="relative z-20 flex flex-col pb-4 max-w-5xl mx-auto w-full"></div> |
| </div> |
|
|
| <div class="shrink-0 glass px-4 pb-6 pt-4 border-t border-orbit-line z-30 shadow-[0_-10px_40px_rgba(15,23,42,0.03)]"> |
| <div id="attach-badge" class="hidden max-w-4xl mx-auto px-2 pb-3"><div class="inline-flex items-center gap-2 bg-blue-50 text-orbit-primary text-xs font-semibold px-4 py-2 rounded-full border border-blue-200 shadow-sm"><span id="attach-name" class="truncate max-w-[200px]">document.pdf</span><button id="btn-remove-attach" class="ml-1 font-bold hover:scale-110 transition-transform">✕</button></div></div> |
| <div class="max-w-4xl mx-auto flex items-center justify-between px-4 pb-2"> |
| <select id="model-select" class="bg-transparent text-[11px] font-bold tracking-wide uppercase text-orbit-soft focus:outline-none appearance-none cursor-pointer max-w-[150px] truncate hover:text-orbit-primary transition-colors"><option value="">LOADING...</option></select> |
| <span class="text-[10px] text-slate-400 font-medium hidden sm:block">AI can make mistakes. Validate citations.</span> |
| </div> |
| <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-soft border border-orbit-line px-4 py-2.5 flex flex-col focus-within:ring-2 focus-within:ring-orbit-primary/20 focus-within:border-orbit-primary/30 transition-all"> |
| <div class="flex items-end gap-3"> |
| <button id="btn-attach" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-2xl hover:bg-orbit-surface text-orbit-soft transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" stroke-width="2"/></svg></button> |
| <input id="pdf-input" type="file" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" class="hidden" /> |
| <textarea id="chat-textarea" rows="1" placeholder="Ask ORBIT to synthesize literature..." class="flex-1 bg-transparent border-none outline-none resize-none text-[15px] text-slate-900 placeholder-slate-400 py-2.5 font-medium leading-relaxed"></textarea> |
| <button id="btn-send" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-2xl bg-orbit-primary text-white shadow-glow hover:scale-105 hover:bg-blue-700 transition-all duration-300 disabled:opacity-50 disabled:hover:scale-100"><svg id="send-icon" class="w-4 h-4 transform rotate-90 translate-x-px" fill="currentColor" viewBox="0 0 20 20"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path></svg><svg id="loading-icon" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg></button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <div id="settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-slate-900/40 backdrop-blur-sm p-4"> |
| <div class="glass rounded-[36px] shadow-soft w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden bg-white/95"> |
| <div class="flex items-center justify-between px-8 pt-8 pb-5 border-b border-orbit-line shrink-0"> |
| <h2 class="text-xl font-bold tracking-tight text-slate-900">Workspace Settings</h2> |
| <button id="btn-close-settings" class="w-8 h-8 flex items-center justify-center rounded-full bg-orbit-surface text-orbit-soft hover:text-slate-900 transition-colors">✕</button> |
| </div> |
| |
| <div class="p-8 space-y-6 overflow-y-auto flex-1"> |
| <div> |
| <label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">AI Provider</label> |
| <select id="settings-provider" class="w-full border border-orbit-line rounded-2xl px-4 py-3 text-sm bg-orbit-surface font-medium text-slate-800 focus:ring-2 focus:ring-orbit-primary/20 focus:border-orbit-primary outline-none transition-all"> |
| <option value="OpenRouter">OpenRouter</option> |
| <option value="Nvidia NIM">Nvidia NIM</option> |
| <option value="Google Gemini">Google Gemini</option> |
| <option value="AgentRouter">AgentRouter</option> |
| <option value="Custom OpenAI">Custom OpenAI-Compatible</option> |
| </select> |
| </div> |
| <div><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">Endpoint URL</label><input id="settings-url" type="text" class="w-full border border-orbit-line rounded-2xl px-4 py-3 text-sm bg-orbit-surface font-medium text-slate-800 focus:ring-2 focus:ring-orbit-primary/20 focus:border-orbit-primary outline-none transition-all" /></div> |
| <div><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">API Key</label><div class="relative"><input id="settings-apikey" type="password" class="w-full border border-orbit-line rounded-2xl px-4 py-3 text-sm bg-orbit-surface font-medium text-slate-800 focus:ring-2 focus:ring-orbit-primary/20 focus:border-orbit-primary outline-none transition-all pr-12" /><button id="btn-toggle-key" class="absolute right-4 top-1/2 -translate-y-1/2 text-orbit-soft hover:text-orbit-primary">👁</button></div></div> |
|
|
| <div id="sec-or" class="prov-sec hidden"><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">OpenRouter Models</label><div id="list-or" class="bg-orbit-surface border border-orbit-line rounded-2xl p-3 max-h-40 overflow-y-auto space-y-1.5 mb-3 shadow-inner"></div><div class="flex gap-2"><input id="inp-or" type="text" placeholder="Add model id..." class="flex-1 border border-orbit-line rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:border-orbit-primary" /><button id="btn-add-or" class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 shadow-soft">Add</button></div></div> |
| <div id="sec-nv" class="prov-sec hidden"><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">Nvidia NIM Models</label><div id="list-nv" class="bg-orbit-surface border border-orbit-line rounded-2xl p-3 max-h-40 overflow-y-auto space-y-1.5 mb-3 shadow-inner"></div><div class="flex gap-2"><input id="inp-nv" type="text" placeholder="Add model id..." class="flex-1 border border-orbit-line rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:border-orbit-primary" /><button id="btn-add-nv" class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 shadow-soft">Add</button></div></div> |
| <div id="sec-gem" class="prov-sec hidden"><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">Google Gemini Models</label><div id="list-gem" class="bg-orbit-surface border border-orbit-line rounded-2xl p-3 max-h-40 overflow-y-auto space-y-1.5 mb-3 shadow-inner"></div><div class="flex gap-2"><input id="inp-gem" type="text" placeholder="Add model id..." class="flex-1 border border-orbit-line rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:border-orbit-primary" /><button id="btn-add-gem" class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 shadow-soft">Add</button></div></div> |
| <div id="sec-ar" class="prov-sec hidden"><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">AgentRouter Models</label><div id="list-ar" class="bg-orbit-surface border border-orbit-line rounded-2xl p-3 max-h-40 overflow-y-auto space-y-1.5 mb-3 shadow-inner"></div><div class="flex gap-2"><input id="inp-ar" type="text" placeholder="Add model id..." class="flex-1 border border-orbit-line rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:border-orbit-primary" /><button id="btn-add-ar" class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 shadow-soft">Add</button></div></div> |
| <div id="sec-oai" class="prov-sec hidden"><label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">Custom OpenAI Models</label><div id="list-oai" class="bg-orbit-surface border border-orbit-line rounded-2xl p-3 max-h-40 overflow-y-auto space-y-1.5 mb-3 shadow-inner"></div><div class="flex gap-2"><input id="inp-oai" type="text" placeholder="Add model id..." class="flex-1 border border-orbit-line rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:border-orbit-primary" /><button id="btn-add-oai" class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 shadow-soft">Add</button></div></div> |
| </div> |
| |
| <div class="px-8 pb-8 pt-5 border-t border-orbit-line flex justify-end gap-3 shrink-0 bg-white"> |
| <button id="btn-cancel-settings" class="px-6 py-3 text-sm font-semibold text-slate-600 hover:bg-orbit-surface rounded-2xl transition-colors border border-transparent hover:border-orbit-line">Cancel</button> |
| <button id="btn-save-settings" class="px-6 py-3 text-sm font-bold bg-orbit-primary hover:bg-blue-700 text-white rounded-2xl shadow-glow transition-all hover:scale-105">Save Settings</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="doi-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-slate-900/40 backdrop-blur-sm p-4"> |
| <div class="glass rounded-[36px] shadow-soft w-full max-w-md bg-white/95 overflow-hidden"> |
| <div class="flex items-center justify-between px-8 pt-8 pb-5 border-b border-orbit-line"><h2 class="text-xl font-bold tracking-tight text-slate-900">Validate DOI</h2><button id="btn-close-doi" class="w-8 h-8 flex items-center justify-center rounded-full bg-orbit-surface text-orbit-soft hover:text-slate-900 transition-colors">✕</button></div> |
| <div class="p-8 space-y-5"> |
| <div> |
| <label class="block text-[10px] font-bold text-orbit-soft uppercase tracking-[0.15em] mb-2">Digital Object Identifier</label> |
| <input id="doi-input" type="text" placeholder="e.g. 10.1000/xyz123" class="w-full border border-orbit-line rounded-2xl px-4 py-3 text-sm bg-orbit-surface font-medium focus:ring-2 focus:ring-orbit-primary/20 focus:border-orbit-primary outline-none transition-all" /> |
| </div> |
| <button id="btn-validate-doi-submit" class="w-full py-3.5 bg-slate-900 hover:bg-slate-800 text-white text-sm font-bold rounded-2xl shadow-soft transition-all hover:scale-105 flex items-center justify-center gap-2"><span id="doi-btn-text">Validate Reference</span><svg id="doi-spinner" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" /></svg></button> |
| <div id="doi-result" class="hidden bg-orbit-surface border border-orbit-line rounded-2xl p-5 text-sm text-slate-700 shadow-inner"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| if ('serviceWorker' in navigator) { |
| navigator.serviceWorker.getRegistrations().then(function(registrations) { |
| for(let registration of registrations) { registration.unregister(); } |
| }); |
| } |
| </script> |
| |
| <script src="/static/js/script.js?v=9999"></script> |
|
|
| <style> |
| |
| #mc-trigger { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: #ffffff; |
| border: 1px solid #E2E8F0; |
| border-radius: 99px; |
| padding: 5px 10px 5px 7px; |
| cursor: pointer; |
| box-shadow: 0 1px 4px rgba(15,23,42,.07); |
| transition: border-color .2s, box-shadow .2s, background .2s; |
| max-width: 170px; |
| user-select: none; |
| -webkit-user-select: none; |
| -webkit-tap-highlight-color: transparent; |
| } |
| #mc-trigger:active { |
| background: #EFF6FF; |
| border-color: rgba(37,99,235,.4); |
| transform: scale(.98); |
| } |
| .mc-dot { |
| width: 6px; height: 6px; |
| border-radius: 50%; |
| background: #22c55e; |
| flex-shrink: 0; |
| } |
| #mc-label { |
| font-size: 9.5px; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: #475569; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| max-width: 110px; |
| } |
| .mc-chevron { |
| width: 7px; height: 7px; |
| border-right: 1.5px solid #94a3b8; |
| border-bottom: 1.5px solid #94a3b8; |
| transform: rotate(45deg); |
| flex-shrink: 0; |
| margin-top: -3px; |
| transition: transform .25s; |
| } |
| .mc-chevron.open { transform: rotate(-135deg); margin-top: 2px; } |
| |
| |
| #mc-backdrop { |
| display: none; |
| position: fixed; |
| inset: 0; |
| z-index: 9998; |
| background: rgba(15,23,42,.35); |
| backdrop-filter: blur(4px); |
| -webkit-backdrop-filter: blur(4px); |
| animation: mcBdIn .22s ease; |
| } |
| @keyframes mcBdIn { from { opacity:0 } to { opacity:1 } } |
| #mc-backdrop.open { display: block; } |
| |
| |
| #mc-sheet { |
| position: fixed; |
| left: 0; right: 0; bottom: 0; |
| z-index: 9999; |
| background: #fff; |
| border-radius: 24px 24px 0 0; |
| max-height: 72vh; |
| display: flex; |
| flex-direction: column; |
| transform: translateY(100%); |
| transition: transform .32s cubic-bezier(.32,0,.15,1); |
| will-change: transform; |
| } |
| #mc-sheet.open { transform: translateY(0); } |
| |
| #mc-sheet-handle { |
| width: 36px; height: 4px; |
| background: #E2E8F0; |
| border-radius: 99px; |
| margin: 10px auto 0; |
| flex-shrink: 0; |
| } |
| #mc-sheet-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 20px 10px; |
| border-bottom: 1px solid #F1F5F9; |
| flex-shrink: 0; |
| } |
| #mc-sheet-title { |
| font-size: 13px; |
| font-weight: 700; |
| color: #0f172a; |
| letter-spacing: -0.01em; |
| } |
| #mc-sheet-count { |
| font-size: 10px; |
| font-weight: 600; |
| color: #94a3b8; |
| background: #F8FAFC; |
| border: 1px solid #E2E8F0; |
| border-radius: 99px; |
| padding: 2px 8px; |
| } |
| #mc-list { |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| overscroll-behavior: contain; |
| padding: 8px 12px 20px; |
| flex: 1; |
| } |
| #mc-list::-webkit-scrollbar { display: none; } |
| |
| .mc-item { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| padding: 11px 12px; |
| border-radius: 14px; |
| cursor: pointer; |
| transition: background .12s; |
| -webkit-tap-highlight-color: transparent; |
| } |
| .mc-item:active { background: #F1F5F9; transform: scale(.99); } |
| .mc-item.mc-active { background: #EFF6FF; } |
| .mc-item-left { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| } |
| .mc-item-icon { |
| width: 30px; height: 30px; |
| border-radius: 9px; |
| background: #F8FAFC; |
| border: 1px solid #E2E8F0; |
| display: flex; align-items: center; justify-content: center; |
| flex-shrink: 0; |
| font-size: 11px; |
| font-weight: 800; |
| color: #475569; |
| } |
| .mc-item.mc-active .mc-item-icon { |
| background: #EFF6FF; |
| border-color: rgba(37,99,235,.2); |
| color: #2563EB; |
| } |
| .mc-item-info { min-width: 0; } |
| .mc-item-provider { |
| font-size: 9px; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: #94a3b8; |
| line-height: 1; |
| margin-bottom: 2px; |
| } |
| .mc-item.mc-active .mc-item-provider { color: rgba(37,99,235,.6); } |
| .mc-item-name { |
| font-size: 11px; |
| font-weight: 700; |
| color: #1e293b; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .mc-item.mc-active .mc-item-name { color: #2563EB; } |
| .mc-item-badge { |
| font-size: 8.5px; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| color: #16a34a; |
| background: #f0fdf4; |
| border: 1px solid #bbf7d0; |
| border-radius: 99px; |
| padding: 2px 7px; |
| white-space: nowrap; |
| flex-shrink: 0; |
| } |
| .mc-item-check { |
| width: 18px; height: 18px; |
| border-radius: 50%; |
| background: #2563EB; |
| display: flex; align-items: center; justify-content: center; |
| flex-shrink: 0; |
| } |
| .mc-item-check svg { width: 10px; height: 10px; } |
| .mc-item-radio { |
| width: 18px; height: 18px; |
| border-radius: 50%; |
| border: 1.5px solid #CBD5E1; |
| flex-shrink: 0; |
| } |
| .mc-section-label { |
| font-size: 9px; |
| font-weight: 800; |
| letter-spacing: 0.15em; |
| text-transform: uppercase; |
| color: #CBD5E1; |
| padding: 10px 12px 4px; |
| } |
| </style> |
|
|
| <script> |
| (function () { |
| function initCustomDropdown() { |
| var origSelect = document.getElementById('model-select'); |
| if (!origSelect || document.getElementById('mc-trigger')) return; |
| |
| origSelect.style.cssText = 'position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;overflow:hidden!important;'; |
| |
| |
| var trigger = document.createElement('div'); |
| trigger.id = 'mc-trigger'; |
| trigger.setAttribute('role', 'button'); |
| trigger.setAttribute('aria-haspopup', 'listbox'); |
| trigger.innerHTML = |
| '<span class="mc-dot"></span>' + |
| '<span id="mc-label">MODEL</span>' + |
| '<span class="mc-chevron" id="mc-chevron"></span>'; |
| origSelect.parentNode.insertBefore(trigger, origSelect); |
| |
| |
| var backdrop = document.createElement('div'); |
| backdrop.id = 'mc-backdrop'; |
| document.body.appendChild(backdrop); |
| |
| |
| var sheet = document.createElement('div'); |
| sheet.id = 'mc-sheet'; |
| sheet.setAttribute('role', 'listbox'); |
| sheet.innerHTML = |
| '<div id="mc-sheet-handle"></div>' + |
| '<div id="mc-sheet-header">' + |
| '<span id="mc-sheet-title">Select AI Model</span>' + |
| '<span id="mc-sheet-count">0 models</span>' + |
| '</div>' + |
| '<div id="mc-list"></div>'; |
| document.body.appendChild(sheet); |
| |
| var isOpen = false; |
| |
| function getInitials(val) { |
| var parts = val.split('/'); |
| return parts[0] ? parts[0].substring(0, 2).toUpperCase() : 'AI'; |
| } |
| |
| function parseModel(val) { |
| var slash = val.indexOf('/'); |
| if (slash === -1) return { provider: '', name: val, free: false }; |
| var provider = val.substring(0, slash); |
| var rest = val.substring(slash + 1); |
| var free = rest.toUpperCase().endsWith(':FREE'); |
| var name = free ? rest.substring(0, rest.length - 5) : rest; |
| return { provider: provider, name: name, free: free }; |
| } |
| |
| function buildList() { |
| var list = document.getElementById('mc-list'); |
| var count = document.getElementById('mc-sheet-count'); |
| list.innerHTML = ''; |
| var opts = origSelect.options; |
| var total = 0; |
| for (var i = 0; i < opts.length; i++) { |
| if (!opts[i].value) continue; |
| total++; |
| (function (opt) { |
| var m = parseModel(opt.value); |
| var active = opt.value === origSelect.value; |
| var item = document.createElement('div'); |
| item.className = 'mc-item' + (active ? ' mc-active' : ''); |
| item.setAttribute('role', 'option'); |
| item.innerHTML = |
| '<div class="mc-item-left">' + |
| '<div class="mc-item-icon">' + getInitials(opt.value) + '</div>' + |
| '<div class="mc-item-info">' + |
| '<div class="mc-item-provider">' + (m.provider || 'MODEL') + '</div>' + |
| '<div class="mc-item-name">' + m.name + '</div>' + |
| '</div>' + |
| '</div>' + |
| (m.free ? '<span class="mc-item-badge">FREE</span>' : '') + |
| (active |
| ? '<span class="mc-item-check"><svg viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2.5"><polyline points="1.5,5 4,7.5 8.5,2.5"/></svg></span>' |
| : '<span class="mc-item-radio"></span>'); |
| item.addEventListener('click', function () { |
| origSelect.value = opt.value; |
| origSelect.dispatchEvent(new Event('change', { bubbles: true })); |
| updateLabel(); |
| close(); |
| }); |
| list.appendChild(item); |
| })(opts[i]); |
| } |
| if (count) count.textContent = total + ' model' + (total !== 1 ? 's' : ''); |
| } |
| |
| function updateLabel() { |
| var lbl = document.getElementById('mc-label'); |
| if (!lbl) return; |
| var idx = origSelect.selectedIndex; |
| if (idx >= 0 && origSelect.options[idx] && origSelect.options[idx].value) { |
| var m = parseModel(origSelect.options[idx].value); |
| lbl.textContent = m.name || origSelect.options[idx].text || 'MODEL'; |
| } else { |
| lbl.textContent = 'MODEL'; |
| } |
| } |
| |
| function open() { |
| buildList(); |
| backdrop.classList.add('open'); |
| sheet.classList.add('open'); |
| document.getElementById('mc-chevron').classList.add('open'); |
| document.body.style.overflow = 'hidden'; |
| isOpen = true; |
| |
| setTimeout(function () { |
| var active = document.querySelector('.mc-item.mc-active'); |
| if (active) active.scrollIntoView({ block: 'center', behavior: 'smooth' }); |
| }, 150); |
| } |
| |
| function close() { |
| sheet.classList.remove('open'); |
| backdrop.classList.remove('open'); |
| document.getElementById('mc-chevron').classList.remove('open'); |
| document.body.style.overflow = ''; |
| isOpen = false; |
| } |
| |
| trigger.addEventListener('click', function (e) { |
| e.stopPropagation(); |
| isOpen ? close() : open(); |
| }); |
| backdrop.addEventListener('click', close); |
| |
| |
| var startY = 0; |
| sheet.addEventListener('touchstart', function (e) { startY = e.touches[0].clientY; }, { passive: true }); |
| sheet.addEventListener('touchend', function (e) { |
| if (e.changedTouches[0].clientY - startY > 60) close(); |
| }, { passive: true }); |
| |
| new MutationObserver(function () { updateLabel(); }).observe(origSelect, { childList: true, subtree: true }); |
| origSelect.addEventListener('change', updateLabel); |
| updateLabel(); |
| } |
| |
| if (document.readyState === 'loading') { |
| document.addEventListener('DOMContentLoaded', initCustomDropdown); |
| } else { |
| initCustomDropdown(); |
| } |
| })(); |
| </script> |
| </body> |
| </html> |
