Spaces:

Redsputnik
/

redsputnik

Running

App Files Files Community

Redsputnik commited on Oct 24, 2025

Commit

e0d7c58

verified ·

1 Parent(s): 8c64ce8

Es ist noch nicht komplett richtig zentriert. Es soll alles relativ gemeinsam sein. Wenn der red mode aktiviert wird, soll das Themen in roter Farbe wechseln. Unter der chatbar sollen vorgefertigte promts hinterlegt sein, wenn man diese drückt. Also icons. Die mit dem promt zu tun haben. Wie zB sociql media Experte, marketing Experte, coding Experte, upload Möglichkeit um zB PDF hochzuladen und dann fragen stellen zu können. Während des chats auch ein Mikrofon icon um anstatt Tastatur auf Sprache sprechen zu können.

Browse files

Files changed (3) hide show

index.html +80 -57
script.js +78 -1
style.css +114 -8

index.html CHANGED Viewed

@@ -28,74 +28,97 @@
 </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-4xl">
-        <div class="flex justify-between items-center mb-6">
-            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                <i data-feather="satellite" class="inline mr-2"></i> RedSputnik
-            </h1>
-            <div class="flex gap-2">
-                <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
-                    <i data-feather="moon" class="dark:hidden"></i>
-                    <i data-feather="sun" class="hidden dark:block"></i>
-                </button>
-                <button id="red-mode-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700" title="Red Mode">
-                    <i data-feather="alert-triangle" class="text-red-500"></i>
-                </button>
-            </div>
-</div>
-        <div class="flex gap-4">
-            <div class="w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
-                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-                    <h2 class="font-semibold flex items-center gap-2">
-                        <i data-feather="lock" class="w-4 h-4"></i> Chat History
-                    </h2>
-                </div>
-                <div id="chat-history" class="h-96 overflow-y-auto p-2 space-y-1">
-                    <!-- Chat history items will appear here -->
                 </div>
-                <div class="p-4 border-t border-gray-200 dark:border-gray-700">
-                    <button id="clear-history" class="w-full text-sm text-red-500 hover:text-red-600 flex items-center justify-center gap-1">
-                        <i data-feather="trash-2" class="w-3 h-3"></i> Clear All
                     </button>
                 </div>
             </div>
-            <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg 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 gap-2">
-                    <div class="flex-1 flex gap-2">
-                        <input
-                            type="text"
-                            id="message-input"
-                            placeholder="Secure message..."
-                            class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
-                            autocomplete="off"
-                            required
-                        >
-                        <label class="flex items-center justify-center px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 cursor-pointer">
-                            <input type="file" id="file-upload" class="hidden" accept=".txt,.pdf,.doc,.docx">
-                            <i data-feather="upload" class="w-4 h-4"></i>
-                        </label>
-                    </div>
-<button
-                        type="submit"
-                        class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
                     >
-                        <i data-feather="send" class="w-4 h-4"></i> Send
                     </button>
-                </form>
-            </div>
         </div>
-        <div class="mt-6 text-sm text-gray-500 dark:text-gray-400 flex justify-between items-center">
             <p><i data-feather="shield" class="w-4 h-4 inline mr-1"></i> Secure E2E encrypted | IP protected</p>
             <p><i data-feather="hard-drive" class="w-4 h-4 inline mr-1"></i> Stored locally on your NAS</p>
         </div>

 </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-6xl">
+        <div class="flex flex-col items-center mb-8">
+            <div class="flex justify-between items-center w-full max-w-4xl mb-6">
+                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                    <i data-feather="satellite" class="inline mr-2"></i> RedSputnik
+                </h1>
+                <div class="flex gap-2">
+                    <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                        <i data-feather="moon" class="dark:hidden"></i>
+                        <i data-feather="sun" class="hidden dark:block"></i>
+                    </button>
+                    <button id="red-mode-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700" title="Red Mode">
+                            <i data-feather="alert-triangle" class="text-red-500"></i>
+                        </button>
+                    </div>
                 </div>
+                <!-- Prompt Buttons -->
+                <div class="prompt-grid w-full max-w-4xl mb-6">
+                    <button class="prompt-button" data-prompt="social-media">
+                        <i data-feather="users"></i>
+                        <span>Social Media Expert</span>
+                    </button>
+                    <button class="prompt-button" data-prompt="marketing">
+                        <i data-feather="trending-up"></i>
+                        <span>Marketing Expert</span>
+                    </button>
+                    <button class="prompt-button" data-prompt="coding">
+                        <i data-feather="code"></i>
+                        <span>Coding Expert</span>
+                    </button>
+                    <button class="prompt-button" data-prompt="upload">
+                        <i data-feather="upload"></i>
+                        <span>Upload PDF</span>
                     </button>
                 </div>
+                <div class="flex gap-4 w-full max-w-4xl">
+            <div class="w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
+                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                    <h2 class="font-semibold flex items-center gap-2">
+                    <i data-feather="lock" class="w-4 h-4"></i> Chat History
+                </h2>
+            </div>
+            <div id="chat-history" class="h-96 overflow-y-auto p-2 space-y-1">
+                <!-- Chat history items will appear here -->
             </div>
+            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
+                <button id="clear-history" class="w-full text-sm text-red-500 hover:text-red-600 flex items-center justify-center gap-1">
+                    <i data-feather="trash-2" class="w-3 h-3"></i> Clear All
+                </button>
+            </div>
+        </div>
+        <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg 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 gap-2">
+                <div class="flex-1 flex gap-2">
+                    <input
+                        type="text"
+                        id="message-input"
+                        placeholder="Secure message..."
+                        class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                        autocomplete="off"
+                        required
                     >
+                    <label class="flex items-center justify-center px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 cursor-pointer">
+                        <input type="file" id="file-upload" class="hidden" accept=".txt,.pdf,.doc,.docx">
+                        <i data-feather="upload" class="w-4 h-4"></i>
+                    </label>
+                    <button type="button" id="voice-record" class="flex items-center justify-center px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 cursor-pointer">
+                        <i data-feather="mic" class="w-4 h-4"></i>
                     </button>
+                </div>
+                <button
+                    type="submit"
+                    class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
+                >
+                    <i data-feather="send" class="w-4 h-4"></i> Send
+                </button>
+            </form>
         </div>
+    </div>
+<div class="mt-6 text-sm text-gray-500 dark:text-gray-400 flex justify-between items-center">
             <p><i data-feather="shield" class="w-4 h-4 inline mr-1"></i> Secure E2E encrypted | IP protected</p>
             <p><i data-feather="hard-drive" class="w-4 h-4 inline mr-1"></i> Stored locally on your NAS</p>
         </div>

script.js CHANGED Viewed

@@ -14,7 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         localStorage.setItem('theme', theme);
     };
     // Red mode toggle functionality
     const setRedMode = (enabled) => {
         if (enabled) {
@@ -23,17 +22,20 @@ document.addEventListener('DOMContentLoaded', () => {
             html.classList.remove('red-mode');
         }
         localStorage.setItem('redMode', enabled ? '1' : '0');
     };
     themeToggle.addEventListener('click', () => {
         const isDark = html.classList.contains('dark');
         setTheme(isDark ? 'light' : 'dark');
     });
     redModeToggle.addEventListener('click', () => {
         const isRed = html.classList.contains('red-mode');
         setRedMode(!isRed);
         alert(`Red Mode ${!isRed ? 'activated' : 'deactivated'}\nResponses will now be ${!isRed ? 'uncensored' : 'filtered'}`);
     });
     // Load saved preferences
@@ -52,8 +54,83 @@ document.addEventListener('DOMContentLoaded', () => {
             uploadedFileName = file.name;
             // In a real implementation, you would send the file to your NAS
             alert(`File "${file.name}" ready for secure upload`);
         }
     });
 // Chat functionality
     const chatForm = document.getElementById('chat-form');
     const messageInput = document.getElementById('message-input');

         }
         localStorage.setItem('theme', theme);
     };
     // Red mode toggle functionality
     const setRedMode = (enabled) => {
         if (enabled) {
             html.classList.remove('red-mode');
         }
         localStorage.setItem('redMode', enabled ? '1' : '0');
+        feather.replace();
     };
     themeToggle.addEventListener('click', () => {
         const isDark = html.classList.contains('dark');
         setTheme(isDark ? 'light' : 'dark');
+        feather.replace();
     });
     redModeToggle.addEventListener('click', () => {
         const isRed = html.classList.contains('red-mode');
         setRedMode(!isRed);
         alert(`Red Mode ${!isRed ? 'activated' : 'deactivated'}\nResponses will now be ${!isRed ? 'uncensored' : 'filtered'}`);
+        feather.replace();
     });
     // Load saved preferences
             uploadedFileName = file.name;
             // In a real implementation, you would send the file to your NAS
             alert(`File "${file.name}" ready for secure upload`);
+            // Auto-send file info to chat
+            addMessageToChat('user', file.name, true);
+            // Simulate assistant response for uploaded file
+            setTimeout(() => {
+                addMessageToChat('assistant', `I've received your file "${file.name}". You can now ask questions about its content.`);
+            }, 1000);
         }
     });
+    // Voice recording functionality
+    const voiceRecordBtn = document.getElementById('voice-record');
+    let isRecording = false;
+    voiceRecordBtn.addEventListener('click', () => {
+        if (!isRecording) {
+            // Start recording
+            isRecording = true;
+            voiceRecordBtn.classList.add('voice-recording');
+            voiceRecordBtn.innerHTML = '<i data-feather="mic-off" class="w-4 h-4 text-red-500"></i>';
+            feather.replace();
+            // Simulate voice recording (in a real app, use Web Speech API)
+            setTimeout(() => {
+                // Stop recording and process
+                isRecording = false;
+                voiceRecordBtn.classList.remove('voice-recording');
+                voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';
+                feather.replace();
+                const voiceMessage = "This is a simulated voice message transcription.";
+                addMessageToChat('user', voiceMessage);
+                // Simulate assistant response
+                setTimeout(() => {
+                    addMessageToChat('assistant', `I heard: "${voiceMessage}". In a real implementation, this would be transcribed from your voice input.");
+                }, 1000);
+            }, 3000);
+        } else {
+            // Stop recording
+            isRecording = false;
+            voiceRecordBtn.classList.remove('voice-recording');
+            voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';
+            feather.replace();
+        }
+    });
+    // Prompt buttons functionality
+    document.querySelectorAll('.prompt-button').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const promptType = e.currentTarget.dataset.prompt;
+            let message = '';
+            switch(promptType) {
+                case 'social-media':
+                    message = "Act as a social media expert. Help me create engaging content strategies, analyze trends, and optimize my social media presence across different platforms.";
+                    break;
+                case 'marketing':
+                    message = "Act as a marketing expert. Provide insights on customer acquisition, branding strategies, digital marketing campaigns, and market analysis.";
+                    break;
+                case 'coding':
+                    message = "Act as a coding expert. Help with programming challenges, code reviews, debugging, and learning new technologies.";
+                    break;
+                case 'upload':
+                    // Trigger file upload
+                    fileUpload.click();
+                    return;
+            }
+            addMessageToChat('user', message);
+            // Simulate assistant response
+            setTimeout(() => {
+                addMessageToChat('assistant', `I'm now acting as your ${promptType.replace('-', ' ')} expert. How can I assist you specifically?`);
+            }, 1000);
+        });
+    });
 // Chat functionality
     const chatForm = document.getElementById('chat-form');
     const messageInput = document.getElementById('message-input');

style.css CHANGED Viewed

@@ -1,3 +1,4 @@
 /* Custom scrollbar */
 #chat-container::-webkit-scrollbar {
     width: 8px;
@@ -20,12 +21,63 @@
 .dark #chat-container::-webkit-scrollbar-thumb {
     background: #4b5563;
 }
-:root {
-    --red-mode: 0;
-}
 .red-mode {
-    --red-mode: 1;
 }
 /* Chat message animations */
@@ -34,10 +86,10 @@
     to { opacity: 1; transform: translateY(0); }
 }
-/* Red mode styles */
 .red-mode .chat-message.assistant {
-    background-color: rgba(239, 68, 68, 0.1) !important;
-    border-left: 3px solid rgba(239, 68, 68, 0.5);
 }
 #chat-history-item {
@@ -63,6 +115,60 @@
     font-size: 0.75rem;
     color: #10b981;
 }
 .chat-message {
     animation: fadeIn 0.3s ease-out forwards;
-}

 /* Custom scrollbar */
 #chat-container::-webkit-scrollbar {
     width: 8px;
 .dark #chat-container::-webkit-scrollbar-thumb {
     background: #4b5563;
 }
+/* Red mode styles */
 .red-mode {
+    --nav-bg: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+    --footer-bg: #450a0a;
+}
+.red-mode body {
+    background: #0c0a09 !important;
+}
+.red-mode .bg-white {
+    background-color: #1c1917 !important;
+}
+.red-mode .bg-gray-100 {
+    background-color: #0c0a09 !important;
+}
+.red-mode .dark\:bg-gray-900 {
+    background-color: #0c0a09 !important;
+}
+.red-mode .dark\:bg-gray-800 {
+    background-color: #292524 !important;
+}
+.red-mode .border-gray-200 {
+    border-color: #44403c !important;
+}
+.red-mode .dark\:border-gray-700 {
+    border-color: #44403c !important;
+}
+.red-mode .text-gray-800 {
+    color: #f5f5f4 !important;
+}
+.red-mode .dark\:text-gray-200 {
+    color: #f5f5f4 !important;
+}
+.red-mode .text-gray-500 {
+    color: #d6d3d1 !important;
+}
+.red-mode .dark\:text-gray-400 {
+    color: #d6d3d1 !important;
+}
+.red-mode .bg-primary-500 {
+    background-color: #dc2626 !important;
+}
+.red-mode .hover\:bg-primary-600:hover {
+    background-color: #b91c1c !important;
 }
 /* Chat message animations */
     to { opacity: 1; transform: translateY(0); }
 }
+/* Red mode chat styles */
 .red-mode .chat-message.assistant {
+    background-color: rgba(220, 38, 38, 0.1) !important;
+    border-left: 3px solid rgba(220, 38, 38, 0.5);
 }
 #chat-history-item {
     font-size: 0.75rem;
     color: #10b981;
 }
 .chat-message {
     animation: fadeIn 0.3s ease-out forwards;
+}
+/* Prompt buttons grid */
+.prompt-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+.prompt-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+    font-size: 0.75rem;
+}
+.dark .prompt-button {
+    background: #374151;
+    border-color: #4b5563;
+}
+.prompt-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.red-mode .prompt-button {
+    background: #292524;
+    border-color: #44403c;
+}
+.prompt-button i {
+    margin-bottom: 0.25rem;
+}
+/* Voice recording */
+.voice-recording {
+    animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}