Spaces:
Running
Running
Entferne die zwei Punkte. Ersetze die quick actions durch kleinere icons. Im Eingabefeld soll die Möglichkeit sein Dateien hochzuladen, ein microfon icon um Zu sprechen. Recent chats soll noch ein drop down Feld sein um aufklappen zu können
2185634 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RedSputnik 🔴</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Preconnect to CDNs --> | |
| <link rel="preconnect" href="https://cdn.tailwindcss.com"> | |
| <link rel="preconnect" href="https://unpkg.com"> | |
| <link rel="preconnect" href="https://cdn.jsdelivr.net"> | |
| <!-- Load fonts --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> | |
| <!-- Load scripts with defer --> | |
| <script src="https://cdn.tailwindcss.com" defer></script> | |
| <script src="https://unpkg.com/feather-icons" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js" defer></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#10b981', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 min-h-screen transition-colors duration-200"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 max-w-3xl"> | |
| <div class="flex flex-col items-center mb-8"> | |
| <div class="flex flex-col items-center gap-2 mb-4"> | |
| <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 flex items-center"> | |
| <i data-feather="satellite" class="inline mr-2"></i> RedSputnik | |
| </h1> | |
| <status-indicator status="online"></status-indicator> | |
| </div> | |
| <div class="flex gap-2 mb-4"> | |
| <button id="light-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Light Mode"> | |
| <i data-feather="sun" class="text-yellow-500"></i> | |
| </button> | |
| <button id="dark-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Dark Mode"> | |
| <i data-feather="moon" class="text-blue-500"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-3"> | |
| <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden"> | |
| <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4"> | |
| <!-- Chat messages will appear here --> | |
| <div class="text-center py-8 text-gray-500 dark:text-gray-400"> | |
| <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-2"></i> | |
| <p>Start chatting with your NAS assistant</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 dark:border-gray-700 p-4"> | |
| <form id="chat-form" class="flex items-center gap-2"> | |
| <input | |
| type="text" | |
| id="message-input" | |
| placeholder="Type your message..." | |
| class="flex-1 px-4 py-3 bg-transparent text-gray-800 dark:text-gray-200 focus:outline-none" | |
| autocomplete="off" | |
| required | |
| > | |
| <input type="file" id="file-upload" class="hidden" accept="*/*"> | |
| <button | |
| type="button" | |
| id="file-upload-btn" | |
| class="p-3 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-400 rounded-full transition-colors duration-200" | |
| > | |
| <i data-feather="paperclip" class="w-4 h-4"></i> | |
| </button> | |
| <button | |
| type="button" | |
| id="voice-record" | |
| class="p-3 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-400 rounded-full transition-colors duration-200" | |
| > | |
| <i data-feather="mic" class="w-4 h-4 text-blue-500"></i> | |
| </button> | |
| <button | |
| type="submit" | |
| class="p-3 bg-primary-500 hover:bg-primary-600 text-white rounded-full transition-colors duration-200" | |
| > | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1 space-y-4"> | |
| <!-- Quick Actions --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"> | |
| <h3 class="font-semibold text-gray-800 dark:text-gray-200 mb-3">Quick Actions</h3> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="prompt-button p-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="social-media"> | |
| <i data-feather="share-2" class="w-4 h-4 mx-auto text-blue-500"></i> | |
| </button> | |
| <button class="prompt-button p-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="marketing"> | |
| <i data-feather="trending-up" class="w-4 h-4 mx-auto text-green-500"></i> | |
| </button> | |
| <button class="prompt-button p-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="coding"> | |
| <i data-feather="code" class="w-4 h-4 mx-auto text-purple-500"></i> | |
| </button> | |
| <button class="prompt-button p-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="upload"> | |
| <i data-feather="upload" class="w-4 h-4 mx-auto text-orange-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat History --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold text-gray-800 dark:text-gray-200">Recent Chats</h3> | |
| <div class="flex items-center gap-2"> | |
| <button id="clear-history" class="text-xs text-gray-500 hover:text-red-500 transition-colors">Clear</button> | |
| <button id="chat-history-toggle" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="chat-history" class="space-y-2 max-h-0 overflow-y-auto transition-all duration-200"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <!-- Load components with defer --> | |
| <script src="components/navbar.js" defer></script> | |
| <script src="components/footer.js" defer></script> | |
| <script src="components/status-indicator.js" defer></script> | |
| <script src="script.js" defer></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |