Spaces:
Running
Running
dropdown açılmıyor ayrıca sağdaki bilgi kısmında system statusu capabilitiesi falan direkt sağ kısmı kaldır. Solda ise sohbetler, hesap falan gözüksün. Textarea kısmını çok daha geliştşir, modernleştir ve detaylandır. Token sayısı, model seçme yeri falan orada olacak. Aşırı kaliteli olmalı orası.
fa929f9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nixaut Copilot - Advanced AI Assistant</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { font-family: 'Inter', sans-serif; } | |
| .gradient-shift { animation: gradientShift 8s ease-in-out infinite; } | |
| @keyframes gradientShift { | |
| 0%, 100% { background: rgb(17, 24, 39); } | |
| 50% { background: rgb(9, 9, 11); } | |
| } | |
| .typing-indicator span { animation: typing 1.4s infinite; } | |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; } | |
| 30% { transform: translateY(-10px); opacity: 1; } | |
| } | |
| .scroll-smooth { scroll-behavior: smooth; } | |
| .noise { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.02; | |
| z-index: 1; | |
| pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), | |
| 0 0 40px rgba(255, 255, 255, 0.05), | |
| 0 0 60px rgba(255, 255, 255, 0.03); | |
| } | |
| .message-slide-in { | |
| animation: slideInFade 0.3s ease-out; | |
| } | |
| @keyframes slideInFade { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-zinc-950 text-white min-h-screen gradient-shift relative overflow-hidden"> | |
| <div class="noise"></div> | |
| <!-- Header --> | |
| <custom-header></custom-header> | |
| <!-- Main Container --> | |
| <div class="flex h-screen relative z-10 pt-16"> | |
| <!-- Left Sidebar --> | |
| <custom-sidebar class="w-64 bg-zinc-900/50 backdrop-blur-xl border-r border-zinc-800"></custom-sidebar> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full"> | |
| <!-- Chat Header --> | |
| <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center glow"> | |
| <i data-feather="cpu" class="w-5 h-5 text-zinc-900"></i> | |
| </div> | |
| <div> | |
| <h2 class="font-semibold text-white">Neural Assistant</h2> | |
| <p class="text-xs text-zinc-400">Online • Powered by AI</p> | |
| </div> | |
| </div> | |
| <button onclick="toggleChatMode()" class="p-2 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105"> | |
| <i data-feather="maximize-2" class="w-5 h-5 text-zinc-400"></i> | |
| </button> | |
| </div> | |
| <!-- Messages Container --> | |
| <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;"> | |
| <!-- AI Welcome Message --> | |
| <div class="flex items-start space-x-3 message-slide-in"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i> | |
| </div> | |
| <div class="max-w-xl"> | |
| <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200"> | |
| <p class="text-white leading-relaxed">Welcome to Neural Nexus AI 🚀</p> | |
| <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p> | |
| </div> | |
| <p class="text-xs text-zinc-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| <div id="typingIndicator" class="hidden flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i> | |
| </div> | |
| <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4"> | |
| <div class="typing-indicator flex space-x-1"> | |
| <span class="w-2 h-2 bg-white rounded-full"></span> | |
| <span class="w-2 h-2 bg-white rounded-full"></span> | |
| <span class="w-2 h-2 bg-white rounded-full"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Input Area --> | |
| <div class="bg-zinc-900/40 backdrop-blur-xl border-t border-zinc-800/60 p-6 mt-auto"> | |
| <!-- Model Selection & Tokens Bar --> | |
| <div class="mb-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Model Selector --> | |
| <div id="modelDropdown" class="relative"> | |
| <button onclick="toggleModelDropdown()" class="flex items-center space-x-2 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200"> | |
| <div id="modelIndicator" class="w-2 h-2 bg-green-400 rounded-full"></div> | |
| <span id="selectedModelText" class="font-medium">Max</span> | |
| <svg class="w-4 h-4 text-zinc-400 transition-transform" id="modelDropdownArrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6"/> | |
| </svg> | |
| </button> | |
| <div id="modelDropdownMenu" class="hidden absolute bottom-full left-0 mb-2 bg-zinc-900 border border-zinc-700 rounded-lg shadow-2xl z-50 min-w-[200px]"> | |
| <div onclick="selectModel('Max')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-green-400 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Max</div> | |
| <div class="text-xs text-zinc-400">En yetenekli</div> | |
| </div> | |
| </div> | |
| <div onclick="selectModel('Turbo')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Turbo</div> | |
| <div class="text-xs text-zinc-400">Hızlı yanıt</div> | |
| </div> | |
| </div> | |
| <div onclick="selectModel('Lite')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-yellow-400 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Lite</div> | |
| <div class="text-xs text-zinc-400">Ekonomik</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Web Search Toggle --> | |
| <button id="webSearchToggle" onclick="toggleWebSearch()" class="flex items-center space-x-1.5 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200"> | |
| <i data-feather="search" class="w-3.5 h-3.5"></i> | |
| <span>Web</span> | |
| <div class="w-8 h-4 bg-zinc-700 rounded-full relative"> | |
| <div id="webSearchToggleCircle" class="absolute left-0.5 top-0.5 w-3 h-3 bg-zinc-500 rounded-full transition-transform duration-200"></div> | |
| </div> | |
| </button> | |
| </div> | |
| <!-- Token Counter --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cpu" class="w-3.5 h-3.5 text-zinc-400"></i> | |
| <span id="tokenCount" class="text-xs text-zinc-400 font-medium">0 / 4096 tokens</span> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="w-20 bg-zinc-800 rounded-full h-1.5 relative overflow-hidden"> | |
| <div id="tokenProgressBar" class="absolute top-0 left-0 h-full bg-gradient-to-r from-white to-zinc-400 rounded-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Input Container --> | |
| <div class="relative bg-zinc-800/40 rounded-2xl border border-zinc-700/50 hover:border-zinc-600/50 transition-all duration-200 focus-within:border-white/50 focus-within:shadow-lg focus-within:shadow-white/5"> | |
| <!-- Textarea --> | |
| <textarea | |
| id="messageInput" | |
| rows="1" | |
| placeholder="Mesajınızı buraya yazın... (@ ile belge ekle, / komutlar için)" | |
| class="w-full bg-transparent text-white placeholder-zinc-500 resize-none focus:outline-none px-4 py-3.5 pr-24 text-sm leading-relaxed" | |
| style="min-height: 52px; max-height: 120px;" | |
| onkeypress="handleKeyPress(event)" | |
| oninput="handleInput(this)" | |
| ></textarea> | |
| <!-- Action Buttons --> | |
| <div class="absolute right-2 bottom-2 flex items-center space-x-1.5"> | |
| <button onclick="attachFile()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="paperclip" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i> | |
| </button> | |
| <button onclick="showVoiceInput()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="mic" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i> | |
| </button> | |
| <button onclick="stopGeneration()" id="stopButton" class="hidden p-2 hover:bg-red-500/20 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="square" class="w-4 h-4 text-red-400 group-hover:text-red-300"></i> | |
| </button> | |
| <button | |
| onclick="sendMessage()" | |
| id="sendButton" | |
| class="p-2 bg-gradient-to-r from-white to-zinc-200 text-zinc-900 rounded-lg hover:scale-105 transition-all duration-200 hover:shadow-lg hover:shadow-white/20 disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bottom Actions Bar --> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <button onclick="clearChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="trash-2" class="w-3 h-3"></i> | |
| <span>Temizle</span> | |
| </button> | |
| <button onclick="exportChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="download" class="w-3 h-3"></i> | |
| <span>Dışa Aktar</span> | |
| </button> | |
| <button onclick="showSettings()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="settings" class="w-3 h-3"></i> | |
| <span>Ayarlar</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2 text-xs text-zinc-500"> | |
| <span>Enter gönderir</span> | |
| <span>•</span> | |
| <span>Shift+Enter yeni satır</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/header.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |