Spaces:
Running
Running
Download index.html from Devmightwin/Orki: direct link, hf CLI and curl.
- Browser
- Download file 27.9 kB
-
https://huggingface.co/spaces/Devmightwin/Orki/resolve/main/index.html
- Command line
-
hf download hf://spaces/Devmightwin/Orki/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Devmightwin/Orki/resolve/main/index.html
27.9 kB
| <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"> | |
| <title>Orki AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js" /> | |
| <!-- Razorpay Checkout SDK --> | |
| <script src="https://checkout.razorpay.com/v1/checkout.js"></script> | |
| <!-- Firebase Compat SDKs --> | |
| <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script> | |
| <style> | |
| #chat::-webkit-scrollbar, #history-list::-webkit-scrollbar, #prompt::-webkit-scrollbar { display: none; } | |
| #chat, #history-list, #prompt { -ms-overflow-style: none; scrollbar-width: none; } | |
| .prose-custom p { margin-bottom: 0.5rem; } | |
| .prose-custom p:last-child { margin-bottom: 0; } | |
| .prose-custom code { background-color: rgba(255, 255, 255, 0.12); padding: 0.15rem 0.35rem; border-radius: 0.375rem; font-family: monospace; font-size: 0.85em; } | |
| .prose-custom pre { background-color: #0d0d0e; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; } | |
| .prose-custom pre code { background-color: transparent; padding: 0; } | |
| .prose-custom ul { list-style-type: disc; margin-left: 1.25rem; margin-bottom: 0.5rem; } | |
| .prose-custom ol { list-style-type: decimal; margin-left: 1.25rem; margin-bottom: 0.5rem; } | |
| .prose-custom strong { color: #34d399; font-weight: 600; } | |
| </style> | |
| </head> | |
| <body class="bg-[#121214] text-zinc-100 flex flex-col h-[100dvh] overflow-hidden font-sans antialiased"> | |
| <div id="debug-banner" class="hidden fixed top-0 left-0 right-0 z-50 bg-red-600/90 text-white text-xs p-2 text-center font-mono"></div> | |
| <!-- Floating Audio Pill Player --> | |
| <div id="audio-player-bar" class="fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-zinc-900/95 backdrop-blur-md border border-zinc-700/60 rounded-full px-4 py-2 flex items-center gap-3 shadow-2xl transition-all duration-300 hidden w-[90%] max-w-sm"> | |
| <!-- Play / Pause / Loading Button --> | |
| <button id="player-toggle-btn" type="button" class="w-7 h-7 rounded-full bg-white text-black flex items-center justify-center shrink-0 hover:bg-zinc-200 transition cursor-pointer"> | |
| <!-- Spinner Icon --> | |
| <svg id="player-loading-icon" class="w-3.5 h-3.5 animate-spin text-black" xmlns="http://www.w3.org/2000/svg" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
| </svg> | |
| <!-- Pause Icon --> | |
| <svg id="player-pause-icon" class="w-3.5 h-3.5 fill-current hidden" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg> | |
| <!-- Play Icon --> | |
| <svg id="player-play-icon" class="w-3.5 h-3.5 fill-current hidden ml-0.5" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> | |
| </button> | |
| <!-- Timer --> | |
| <span id="player-timer" class="text-xs font-mono text-zinc-300 shrink-0">00:00</span> | |
| <!-- Scrubber Progress Bar --> | |
| <input id="player-seeker" type="range" min="0" max="100" value="0" step="0.1" class="flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-white"> | |
| <!-- Close Button --> | |
| <button id="player-close-btn" type="button" class="text-zinc-400 hover:text-white p-1 transition cursor-pointer shrink-0"> | |
| <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> | |
| </button> | |
| </div> | |
| <!-- Top Incognito Indicator --> | |
| <div id="incognito-badge" class="fixed top-3 right-3 z-30 hidden px-2.5 py-1.5 rounded-xl bg-zinc-900/90 border border-purple-500/40 text-purple-300 text-xs font-medium flex items-center gap-1.5 shadow-lg backdrop-blur-md"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5"> | |
| <path d="M12 2a1 1 0 0 1 1 1v1.06A9 9 0 0 1 21 13v1a2 2 0 0 1-2 2h-.28a3.5 3.5 0 0 1-6.94 0h-1.56a3.5 3.5 0 0 1-6.94 0H3a2 2 0 0 1-2-2v-1a9 9 0 0 1 8-8.94V3a1 1 0 0 1 1-1h2zm-4.5 12a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/> | |
| </svg> | |
| <span>Incognito</span> | |
| </div> | |
| <!-- Menu Toggle Button --> | |
| <div class="fixed top-3 left-3 z-30"> | |
| <button type="button" id="menu-btn" class="p-2.5 rounded-xl bg-zinc-900/90 backdrop-blur-md border border-zinc-800 text-zinc-300 hover:text-white active:scale-95 transition shadow-lg cursor-pointer"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 pointer-events-none"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="drawer-backdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 hidden transition-opacity"></div> | |
| <!-- Sidebar Drawer --> | |
| <aside id="drawer" style="transform: translateX(-100%); transition: transform 0.25s ease;" class="fixed inset-y-0 left-0 w-72 bg-[#18181b] border-r border-zinc-800 z-50 flex flex-col justify-between p-4 shadow-2xl"> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Drawer Header --> | |
| <div class="flex items-center justify-between pb-3 mb-3 border-b border-zinc-800"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center font-bold text-white text-sm">ΰ€ </div> | |
| <span class="font-semibold text-sm">Orki AI</span> | |
| </div> | |
| <button type="button" id="close-drawer" class="text-zinc-400 hover:text-white p-1 text-sm font-bold cursor-pointer">β</button> | |
| </div> | |
| <!-- Single Account Badge with Quota Bar --> | |
| <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3 mb-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="truncate mr-2"> | |
| <p id="user-display" class="text-xs font-medium text-zinc-300 truncate">Guest User</p> | |
| <p id="user-plan" class="text-[11px] font-semibold text-emerald-400">Plan: Free</p> | |
| <p id="sync-status" class="text-[10px] text-zinc-500">Local Session</p> | |
| </div> | |
| <div class="flex items-center gap-1.5 shrink-0"> | |
| <button type="button" id="upgrade-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg text-xs transition cursor-pointer hidden"> | |
| Upgrade | |
| </button> | |
| <button type="button" id="auth-action-btn" class="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-medium transition cursor-pointer"> | |
| Login | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quota Progress Bar --> | |
| <div id="usage-container" class="mt-2.5 pt-2 border-t border-zinc-800/80"> | |
| <div class="flex items-center justify-between text-[10px] font-medium text-zinc-400"> | |
| <span id="quota-label">Daily Quota</span> | |
| <span id="usage-count-text">0 / 10</span> | |
| </div> | |
| <div class="w-full bg-zinc-800 rounded-full h-1.5 mt-1 overflow-hidden"> | |
| <div id="usage-progress-bar" class="h-full bg-emerald-500 rounded-full transition-all duration-300" style="width: 0%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Actions: New Chat & Incognito Toggle --> | |
| <div class="flex gap-2 mb-3"> | |
| <button type="button" id="new-chat-btn" class="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-medium transition cursor-pointer"> | |
| <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> | |
| <span id="new-chat-label">New Chat</span> | |
| </button> | |
| <button type="button" id="incognito-btn" title="Toggle Incognito Mode" class="px-3 py-2 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-purple-300 text-xs font-medium transition cursor-pointer border border-zinc-700/50 flex items-center gap-1 shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> | |
| <path d="M12 2a1 1 0 0 1 1 1v1.06A9 9 0 0 1 21 13v1a2 2 0 0 1-2 2h-.28a3.5 3.5 0 0 1-6.94 0h-1.56a3.5 3.5 0 0 1-6.94 0H3a2 2 0 0 1-2-2v-1a9 9 0 0 1 8-8.94V3a1 1 0 0 1 1-1h2zm-4.5 12a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Thread History --> | |
| <div class="flex-1 flex flex-col min-h-0"> | |
| <div class="flex items-center justify-between px-1 mb-2"> | |
| <p id="conversations-label" class="text-[11px] font-medium text-zinc-400">Conversations</p> | |
| <button type="button" id="clear-all-btn" class="text-[10px] text-zinc-500 hover:text-red-400 hidden cursor-pointer">Clear All</button> | |
| </div> | |
| <div id="history-list" class="flex-1 overflow-y-auto space-y-1 text-xs"> | |
| <p class="text-zinc-500 px-2 py-2 text-[11px]">Sign in to sync history</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Settings --> | |
| <div class="pt-3 border-t border-zinc-800 mt-2"> | |
| <button type="button" id="open-settings" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-zinc-300 hover:bg-zinc-800 text-xs transition cursor-pointer"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> | |
| Settings | |
| </button> | |
| </div> | |
| </aside> | |
| <div id="auth-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden"> | |
| <div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 max-w-sm w-full text-center shadow-xl"> | |
| <h3 class="text-lg font-semibold text-white mb-2">Welcome to Orki AI</h3> | |
| <p class="text-xs text-zinc-400 mb-6">Sign in to save your chat history and voice settings.</p> | |
| <!-- The Only Button You Need --> | |
| <button id="auth-google-btn" type="button" class="w-full py-2.5 px-4 bg-white hover:bg-zinc-200 text-zinc-900 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition cursor-pointer shadow-sm"> | |
| <svg class="w-4 h-4" viewBox="0 0 24 24"> | |
| <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/> | |
| <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> | |
| <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/> | |
| <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/> | |
| </svg> | |
| Continue with Google | |
| </button> | |
| <p id="auth-error" class="text-[11px] text-red-400 mt-4 hidden"></p> | |
| <button id="auth-close-btn" type="button" class="mt-4 text-[11px] text-zinc-500 hover:text-zinc-300"> | |
| Maybe later | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-[#1c1c1f] border border-zinc-800 rounded-2xl w-full max-w-sm p-5 space-y-4 shadow-2xl"> | |
| <div class="flex items-center justify-between pb-2 border-b border-zinc-800"> | |
| <h3 class="font-semibold text-sm">Settings</h3> | |
| <button type="button" id="close-settings" class="text-zinc-400 hover:text-white text-sm">β</button> | |
| </div> | |
| <div class="space-y-1.5"> | |
| <label class="text-xs font-medium text-zinc-400">App Language</label> | |
| <div class="grid grid-cols-3 gap-2 bg-zinc-900 p-1 rounded-xl border border-zinc-800"> | |
| <button type="button" id="opt-ui-deva" class="py-2 rounded-lg text-xs font-medium transition cursor-pointer">ΰ€¬ (Devanagari)</button> | |
| <button type="button" id="opt-ui-rom" class="py-2 rounded-lg text-xs font-medium transition cursor-pointer">R (Romanized)</button> | |
| <button type="button" id="opt-ui-en" class="py-2 rounded-lg text-xs font-medium transition cursor-pointer">EN</button> | |
| </div> | |
| </div> | |
| <div class="space-y-1.5"> | |
| <label class="text-xs font-medium text-zinc-400">Response Script</label> | |
| <div class="grid grid-cols-2 gap-2 bg-zinc-900 p-1 rounded-xl border border-zinc-800"> | |
| <button type="button" id="opt-deva" class="py-2 rounded-lg text-xs font-medium transition cursor-pointer">ΰ€¬ (Devanagari)</button> | |
| <button type="button" id="opt-rom" class="py-2 rounded-lg text-xs font-medium transition cursor-pointer">R (Romanized)</button> | |
| </div> | |
| </div> | |
| <div class="space-y-1.5"> | |
| <label class="text-xs font-medium text-zinc-400">Your Name</label> | |
| <input id="username-input" type="text" placeholder="e.g., Rahul" class="w-full bg-zinc-900 border border-zinc-800 rounded-xl p-3 text-xs text-zinc-100 outline-none focus:border-emerald-500 transition"> | |
| </div> | |
| <div class="space-y-1.5"> | |
| <label class="text-xs font-medium text-zinc-400">Personalization Rules</label> | |
| <textarea id="persona-input" rows="3" placeholder="e.g., Speak casually, roast me playfully..." class="w-full bg-zinc-900 border border-zinc-800 rounded-xl p-3 text-xs text-zinc-100 outline-none focus:border-emerald-500 transition resize-none"></textarea> | |
| </div> | |
| <button type="button" id="save-settings" class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-xs font-semibold text-white transition cursor-pointer">Save Changes</button> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <main id="chat" class="flex-1 overflow-y-auto p-4 space-y-4 max-w-3xl w-full mx-auto flex flex-col"> | |
| <div id="welcome-screen" class="flex-1 flex flex-col items-center justify-center select-none text-center"> | |
| <h2 class="text-emerald-400 font-semibold text-xl tracking-wide">Welcome</h2> | |
| <p class="text-xs text-zinc-500 mt-1">Start chatting with Orki AI</p> | |
| </div> | |
| </main> | |
| <!-- Thinking Indicator --> | |
| <div id="thinking" class="hidden max-w-3xl w-full mx-auto px-4 pb-2"> | |
| <div class="bg-[#242427] border border-zinc-700/40 w-fit rounded-2xl rounded-tl-xs px-4 py-2.5 flex items-center gap-1.5 shadow-sm"> | |
| <span class="w-2 h-2 bg-emerald-400 rounded-full animate-bounce" style="animation-delay: 0s"></span> | |
| <span class="w-2 h-2 bg-emerald-400 rounded-full animate-bounce" style="animation-delay: 0.15s"></span> | |
| <span class="w-2 h-2 bg-emerald-400 rounded-full animate-bounce" style="animation-delay: 0.3s"></span> | |
| </div> | |
| </div> | |
| <!-- Bottom Message Bar --> | |
| <footer class="p-2 sm:p-3 bg-[#18181b] border-t border-zinc-800/80 shrink-0 z-20"> | |
| <form id="chat-form" class="max-w-3xl mx-auto flex items-end gap-1.5 w-full"> | |
| <!-- Input Box Container with Auto-expanding Textarea --> | |
| <div class="flex-1 min-w-0 flex items-center bg-[#1c1c1f] border border-zinc-800 rounded-2xl px-3 py-1.5 focus-within:border-zinc-600 transition"> | |
| <textarea | |
| id="prompt" | |
| rows="1" | |
| placeholder="Message Orki..." | |
| class="flex-1 min-w-0 bg-transparent text-sm text-zinc-100 placeholder-zinc-500 outline-none resize-none max-h-28 py-1 leading-snug overflow-y-auto" | |
| ></textarea> | |
| <!-- Model Switcher Inside Bar --> | |
| <div class="relative shrink-0 ml-1.5 mr-0.5"> | |
| <button | |
| type="button" | |
| id="model-select-btn" | |
| class="flex items-center gap-1 px-2 py-1 bg-zinc-800 hover:bg-zinc-700/80 border border-zinc-700/50 rounded-lg text-[10px] font-semibold text-zinc-200 transition cursor-pointer whitespace-nowrap" | |
| > | |
| <span id="current-model-display">Orki 3.0</span> | |
| <svg class="w-3 h-3 text-zinc-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <!-- Upward Dropdown Menu --> | |
| <div | |
| id="model-dropdown" | |
| class="absolute right-0 bottom-full mb-2 w-48 bg-[#18181b] border border-zinc-800 rounded-xl shadow-2xl p-1 hidden z-50 space-y-1" | |
| > | |
| <button type="button" id="select-orki" class="w-full text-left px-2.5 py-2 rounded-lg hover:bg-zinc-800/80 transition cursor-pointer flex items-center justify-between"> | |
| <div> | |
| <p class="text-xs font-semibold text-zinc-100">Orki 3.0</p> | |
| <p class="text-[10px] text-zinc-400">Fast & Conversational</p> | |
| </div> | |
| <span class="text-emerald-400 text-xs font-bold">β</span> | |
| </button> | |
| <button type="button" id="select-okafwr" class="w-full text-left px-2.5 py-2 rounded-lg hover:bg-zinc-800/80 transition cursor-pointer flex items-center justify-between"> | |
| <div> | |
| <div class="flex items-center gap-1.5"> | |
| <p class="text-xs font-semibold text-amber-400">Okafwr 2.1</p> | |
| <span class="text-[9px] bg-amber-500/20 text-amber-400 px-1 py-0.2 rounded font-bold">PRO</span> | |
| </div> | |
| <p class="text-[10px] text-zinc-400">Reasoning & Memory</p> | |
| </div> | |
| <span id="okafwr-lock-icon" class="text-zinc-500 text-xs">π</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Talk Button --> | |
| <button | |
| type="button" | |
| id="live-talk-btn" | |
| title="Live Talk" | |
| class="p-2.5 rounded-full bg-zinc-800 text-zinc-300 hover:text-white transition cursor-pointer shrink-0 mb-0.5 relative" | |
| > | |
| <span id="live-talk-pulse" class="hidden absolute inset-0 rounded-full bg-emerald-500/40 animate-ping"></span> | |
| <svg id="live-talk-icon" class="w-4 h-4 pointer-events-none relative" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </button> | |
| <!-- Mic Button --> | |
| <button | |
| type="button" | |
| id="mic-btn" | |
| class="p-2.5 rounded-full bg-zinc-800 text-zinc-300 hover:text-white transition cursor-pointer shrink-0 mb-0.5" | |
| > | |
| <svg class="w-4 h-4 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /> | |
| </svg> | |
| </button> | |
| <!-- Send Button --> | |
| <button | |
| type="submit" | |
| id="send-btn" | |
| class="p-2.5 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white transition cursor-pointer shrink-0 mb-0.5" | |
| > | |
| <svg class="w-4 h-4 transform rotate-[-45deg] translate-x-0.5 -translate-y-0.5 pointer-events-none" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" /> | |
| </svg> | |
| </button> | |
| </form> | |
| <p id="disclaimer-label" class="text-[11px] text-zinc-500 text-center mt-1.5 select-none">Orki AI can make mistakes. Always double check.</p> | |
| </footer> | |
| <!-- Upgrade Modal --> | |
| <div id="upgrade-modal" class="fixed inset-0 bg-black/75 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-[#18181b] border border-zinc-800 rounded-2xl w-full max-w-md p-5 space-y-4 shadow-2xl"> | |
| <div class="flex items-center justify-between pb-2 border-b border-zinc-800"> | |
| <h3 class="font-semibold text-sm text-zinc-100">Upgrade Your Plan</h3> | |
| <button type="button" id="close-upgrade" class="text-zinc-400 hover:text-white text-sm">β</button> | |
| </div> | |
| <!-- Cycle Selector --> | |
| <div class="grid grid-cols-3 gap-1 bg-zinc-900 p-1 rounded-xl border border-zinc-800 text-xs"> | |
| <button type="button" id="cycle-weekly" class="py-1.5 rounded-lg font-medium text-zinc-400 hover:text-white transition cursor-pointer">Weekly</button> | |
| <button type="button" id="cycle-monthly" class="py-1.5 rounded-lg font-semibold bg-emerald-600 text-white transition cursor-pointer">Monthly</button> | |
| <button type="button" id="cycle-yearly" class="py-1.5 rounded-lg font-medium text-zinc-400 hover:text-white transition cursor-pointer">Yearly</button> | |
| </div> | |
| <!-- Tier Cards --> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <!-- Plus Card --> | |
| <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-3.5 flex flex-col justify-between hover:border-emerald-500/50 transition"> | |
| <div> | |
| <span class="text-[10px] uppercase tracking-wider font-bold text-emerald-400">Plus</span> | |
| <p id="plus-price" class="text-lg font-bold text-white mt-1">βΉ99<span class="text-xs text-zinc-500 font-normal">/mo</span></p> | |
| <ul class="text-[11px] text-zinc-300 space-y-2 mt-3"> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-emerald-400 font-bold">β</span> | |
| <span><strong>1,800 Chats</strong> / month</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-emerald-400 font-bold">β</span> | |
| <span><strong>2X Context</strong> Recall</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-emerald-400 font-bold">β</span> | |
| <span><strong>Full Voice</strong> Access</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-emerald-400 font-bold">β</span> | |
| <span><strong>Cloud Thread</strong> Sync</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button type="button" id="buy-plus-btn" class="mt-4 w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-semibold transition cursor-pointer"> | |
| Upgrade to Plus | |
| </button> | |
| </div> | |
| <!-- Pro Card --> | |
| <div class="bg-zinc-900 border border-amber-500/50 rounded-xl p-3.5 flex flex-col justify-between relative shadow-lg shadow-amber-500/5"> | |
| <span class="absolute -top-2.5 right-2.5 bg-amber-500 text-black text-[9px] font-extrabold px-2 py-0.5 rounded shadow">FLAGSHIP</span> | |
| <div> | |
| <span class="text-[10px] uppercase tracking-wider font-bold text-amber-400">Pro Unlimited</span> | |
| <p id="pro-price" class="text-lg font-bold text-white mt-1">βΉ199<span class="text-xs text-zinc-500 font-normal">/mo</span></p> | |
| <ul class="text-[11px] text-zinc-300 space-y-2 mt-3"> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-amber-400 font-bold">β</span> | |
| <span><strong>Okafwr 2.1</strong> Deep Engine</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-amber-400 font-bold">β</span> | |
| <span><strong>Infinite</strong> Message Quota</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-amber-400 font-bold">β</span> | |
| <span><strong>5X Ultra Memory</strong> (60 Turns)</span> | |
| </li> | |
| <li class="flex items-start gap-1.5"> | |
| <span class="text-amber-400 font-bold">β</span> | |
| <span><strong>Long Output</strong> Generation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button type="button" id="buy-pro-btn" class="mt-4 w-full py-2.5 bg-amber-500 hover:bg-amber-400 text-black rounded-lg text-xs font-bold transition cursor-pointer"> | |
| Unlock Pro | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Talk Full-Screen Overlay --> | |
| <div id="live-talk-overlay" class="fixed inset-0 z-[100] hidden flex-col items-center justify-between bg-black text-white select-none"> | |
| <!-- Ambient glow backdrop --> | |
| <div id="live-talk-bg-glow" class="pointer-events-none absolute inset-0 opacity-60 transition-all duration-700" style="background: radial-gradient(circle at 50% 38%, rgba(16,185,129,0.35), rgba(0,0,0,0) 60%);"></div> | |
| <!-- Top bar --> | |
| <div class="relative z-10 w-full flex items-center justify-between p-5 pt-6"> | |
| <span class="text-xs font-medium text-zinc-400 tracking-wide">Orki Live</span> | |
| <span id="live-talk-status-pill" class="text-[11px] font-semibold px-3 py-1 rounded-full bg-white/10 text-zinc-300 transition-colors duration-300">Listening</span> | |
| </div> | |
| <!-- Orb --> | |
| <div class="relative z-10 flex-1 w-full flex flex-col items-center justify-center px-8"> | |
| <div id="live-talk-orb-wrap" class="relative w-56 h-56 flex items-center justify-center"> | |
| <div id="live-talk-ring" class="absolute inset-0 rounded-full border border-emerald-400/30 transition-all duration-500"></div> | |
| <div id="live-talk-orb" class="w-40 h-40 rounded-full transition-transform duration-75 ease-out cursor-pointer" style="background: radial-gradient(circle at 35% 30%, #6ee7b7, #10b981 45%, #047857 100%); box-shadow: 0 0 60px 10px rgba(16,185,129,0.45);"></div> | |
| </div> | |
| <p id="live-talk-transcript" class="mt-8 text-center text-sm text-zinc-300 max-w-xs min-h-[2.5rem] leading-relaxed"></p> | |
| </div> | |
| <!-- Bottom controls --> | |
| <div class="relative z-10 w-full flex items-center justify-center gap-8 pb-14"> | |
| <button type="button" id="live-talk-end-btn" title="End Live Talk" class="w-16 h-16 rounded-full bg-red-600 hover:bg-red-500 flex items-center justify-center shadow-lg shadow-red-600/30 transition cursor-pointer"> | |
| <svg class="w-6 h-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |