Spaces:

Fuckingbase
/

Roboshen

Running

App Files Files Community

Fuckingbase commited on Aug 22

Commit

c5af201

verified ·

1 Parent(s): da6efd5

Update index.html

Browse files

Files changed (1) hide show

index.html +222 -13

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
@@ -7,6 +8,22 @@
     <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=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --eye-color: #00eaff;
@@ -17,6 +34,7 @@
             --ui-border-color: rgba(0, 234, 255, 0.6);
             --ui-shadow-color: rgba(0, 234, 255, 0.2);
             --text-color: #c9d1d9;
         }
         * {
@@ -100,7 +118,7 @@
             backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
             box-shadow: 0 0 30px var(--ui-shadow-color);
             overflow-y: auto; padding: 20px;
-            display: flex; flex-direction: column-reverse;
             margin-top: -80px; padding-top: 90px;
             min-height: 0; margin-bottom: 15px;
         }
@@ -144,14 +162,16 @@
         .user-message { margin-left: auto; }
         .user-message .message-content {
-            background-color: rgba(0, 234, 255, 0.2);
             border-bottom-left-radius: 5px;
         }
         .bot-message { margin-right: auto; }
         .bot-message .message-content {
-            background-color: rgba(255, 255, 255, 0.05);
             border-bottom-right-radius: 5px;
         }
         .bot-message.thinking .message-content { animation: pulse 1.5s infinite; }
@@ -232,17 +252,31 @@
         #message-input {
             flex-grow: 1; background: transparent; border: none;
             outline: none; color: var(--text-color); font-size: 16px;
-            padding: 10px; resize: none; max-height: 100px;
             text-align: right;
         }
         #message-input::placeholder {
-            color: #888;
             text-align: center;
-            transition: color 0.2s, opacity 0.2s;
         }
         #message-input:focus::placeholder {
-            color: transparent;
             opacity: 0;
         }
@@ -280,7 +314,6 @@
             100% { opacity: 0; }
         }
         #send-button {
             width: 40px; height: 40px; background-color: var(--eye-color);
             border-radius: 50%; position: absolute; top: 10px;
@@ -294,7 +327,6 @@
         #send-hint {
             position: absolute;
             bottom: 100%;
-            /* --- اصلاح کلیدی اینجا انجام شد --- */
             right: 10px;
             margin-bottom: 5px;
             background-color: #222;
@@ -317,6 +349,47 @@
             60% { opacity: 1; }
         }
         .site-footer { flex-shrink: 0; text-align: center; padding: 0 15px 10px 15px; }
@@ -359,13 +432,19 @@
             </div>
             <div id="chat-container"></div>
             <div id="input-area">
                 <div id="send-hint">بکش پایین رها کن</div>
                 <div id="send-button-container">
                     <div id="send-button">
                         <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m7-7l-7 7-7-7"/></svg>
                     </div>
                 </div>
-                <textarea id="message-input" placeholder="بگو ببینم دیگه چی میخوای !؟" rows="1"></textarea>
             </div>
         </div>
         <footer class="site-footer">
@@ -379,6 +458,17 @@
     </div>
 <script>
 class RobotFace {
     constructor(canvas) {
         this.canvas = canvas; this.ctx = canvas.getContext("2d");
@@ -526,9 +616,14 @@ class ChatInterface {
         this.sendButtonContainer = document.getElementById('send-button-container');
         this.sendButton = document.getElementById('send-button');
         this.sendHint = document.getElementById('send-hint');
         this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30;
         this.typingTimeout = null; this.hintTimeout = null;
         this.API_URL = 'https://text.pollinations.ai/openai';
         const SYSTEM_PROMPT = `
             ## Core Identity (ONLY reveal if asked about who you are):
@@ -559,6 +654,40 @@ class ChatInterface {
         this.conversationHistory = [{ role: 'system', content: SYSTEM_PROMPT.trim().replace(/\\n/g, '\n') }];
         this.initListeners();
     }
     initListeners() {
@@ -585,7 +714,22 @@ class ChatInterface {
         window.addEventListener('touchmove', this.dragMove.bind(this), { passive: false });
         window.addEventListener('mouseup', this.dragEnd.bind(this));
         window.addEventListener('touchend', this.dragEnd.bind(this));
     }
     dragStart(e) {
         if (this.input.value.trim() === '') return;
         this.isDragging = true; this.sendButton.classList.add('dragging');
@@ -619,11 +763,66 @@ class ChatInterface {
         this.sendButton.style.top = '10px'; this.currentY = 0;
     }
     async sendMessage(messageText) {
         const text = messageText.trim();
         if (!text) return;
         this.addMessage(text, 'user');
         this.conversationHistory.push({ role: 'user', content: text });
         this.input.value = ''; this.input.style.height = 'auto';
         this.inputArea.classList.remove('typing');
@@ -632,7 +831,11 @@ class ChatInterface {
         this.robotFace.startThinking();
         const thinkingBubble = this.addMessage('...', 'bot', true);
         try {
-            const response = await fetch(this.API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: this.conversationHistory }) });
             if (!response.ok) { throw new Error(`خطای شبکه: ${response.status} ${response.statusText}`); }
             const data = await response.json();
             const botReply = data.choices[0].message.content;
@@ -647,6 +850,7 @@ class ChatInterface {
             this.addMessage(`سرم شلوغه یه دیقه بکش بیرون بعدا بیا: ${error.message}`, 'bot');
         } finally {
             this.robotFace.stopThinking();
         }
     }
@@ -661,9 +865,14 @@ class ChatInterface {
             this.renderMessageContent(bubble, text);
         }
-        this.chatContainer.insertBefore(bubble, this.chatContainer.firstChild);
         return bubble;
     }
     renderMessageContent(bubble, text) {
         const escapeHTML = (str) => str.replace(/[&<>'"]/g, tag => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;'}[tag] || tag));
@@ -791,4 +1000,4 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
     <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=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="data:application/manifest+json,{
+        \"name\": \"ROBO☬SHΞN™\",
+        \"short_name\": \"ROBO☬SHΞN\",
+        \"start_url\": \"/\",
+        \"display\": \"standalone\",
+        \"background_color\": \"#000000\",
+        \"theme_color\": \"#00eaff\",
+        \"icons\": [{
+            \"src\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Crect width='192' height='192' fill='%2300eaff'/%3E%3Ctext x='96' y='130' font-family='Arial' font-size='140' text-anchor='middle' fill='%23000000'%3E%E2%98%AC%E2%84%A2%3C/text%3E%3C/svg%3E\",
+            \"sizes\": \"192x192\",
+            \"type\": \"image/svg+xml\"
+        }]
+    }">
     <style>
         :root {
             --eye-color: #00eaff;
             --ui-border-color: rgba(0, 234, 255, 0.6);
             --ui-shadow-color: rgba(0, 234, 255, 0.2);
             --text-color: #c9d1d9;
+            --placeholder-gradient: linear-gradient(90deg, #ffffff, #cccccc, #666666, #cccccc, #ffffff);
         }
         * {
             backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
             box-shadow: 0 0 30px var(--ui-shadow-color);
             overflow-y: auto; padding: 20px;
+            display: flex; flex-direction: column;
             margin-top: -80px; padding-top: 90px;
             min-height: 0; margin-bottom: 15px;
         }
         .user-message { margin-left: auto; }
         .user-message .message-content {
+            background: linear-gradient(135deg, rgba(0, 234, 255, 0.3), rgba(0, 234, 255, 0.1));
             border-bottom-left-radius: 5px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .bot-message { margin-right: auto; }
         .bot-message .message-content {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
             border-bottom-right-radius: 5px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .bot-message.thinking .message-content { animation: pulse 1.5s infinite; }
         #message-input {
             flex-grow: 1; background: transparent; border: none;
             outline: none; color: var(--text-color); font-size: 16px;
+            padding: 10px 10px 10px 40px; /* Added left padding for mic button */
+            resize: none; max-height: 100px;
             text-align: right;
         }
         #message-input::placeholder {
+            color: transparent;
+            background-image: var(--placeholder-gradient);
+            background-size: 400% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: gradient-wavy 8s ease infinite;
             text-align: center;
+            font-size: 14px; /* Adjusted font size */
+            transition: opacity 0.2s;
+        }
+        @keyframes gradient-wavy {
+            0%{background-position:0% 50%}
+            50%{background-position:100% 50%}
+            100%{background-position:0% 50%}
         }
         #message-input:focus::placeholder {
             opacity: 0;
         }
             100% { opacity: 0; }
         }
         #send-button {
             width: 40px; height: 40px; background-color: var(--eye-color);
             border-radius: 50%; position: absolute; top: 10px;
         #send-hint {
             position: absolute;
             bottom: 100%;
             right: 10px;
             margin-bottom: 5px;
             background-color: #222;
             60% { opacity: 1; }
         }
+        /* Microphone Button Styles */
+        #mic-button {
+            position: absolute;
+            top: 50%;
+            left: 10px;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 5px;
+            z-index: 2;
+        }
+        #mic-button svg {
+            width: 20px;
+            height: 20px;
+            fill: var(--text-color);
+            transition: fill 0.3s;
+        }
+        #mic-button.listening svg {
+            fill: var(--eye-color);
+            animation: pulse-mic 1s infinite;
+        }
+        @keyframes pulse-mic {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        /* Particle Animation for Send */
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background-color: var(--eye-color);
+            pointer-events: none;
+            opacity: 0;
+        }
         .site-footer { flex-shrink: 0; text-align: center; padding: 0 15px 10px 15px; }
             </div>
             <div id="chat-container"></div>
             <div id="input-area">
+                <button id="mic-button" aria-label="ضبط صدا">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
+                        <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+                    </svg>
+                </button>
                 <div id="send-hint">بکش پایین رها کن</div>
                 <div id="send-button-container">
                     <div id="send-button">
                         <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m7-7l-7 7-7-7"/></svg>
                     </div>
                 </div>
+                <textarea id="message-input" placeholder="انگشتی تایپ‌کن یا میک‌بزن بگو" rows="1"></textarea>
             </div>
         </div>
         <footer class="site-footer">
     </div>
 <script>
+// Register Service Worker for PWA
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('data:application/javascript,' + encodeURIComponent(`
+            self.addEventListener('fetch', event => {
+                event.respondWith(fetch(event.request));
+            });
+        `)).catch(err => console.log('SW registration failed: ', err));
+    });
+}
 class RobotFace {
     constructor(canvas) {
         this.canvas = canvas; this.ctx = canvas.getContext("2d");
         this.sendButtonContainer = document.getElementById('send-button-container');
         this.sendButton = document.getElementById('send-button');
         this.sendHint = document.getElementById('send-hint');
+        this.micButton = document.getElementById('mic-button');
         this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30;
         this.typingTimeout = null; this.hintTimeout = null;
         this.API_URL = 'https://text.pollinations.ai/openai';
+        // Speech Recognition
+        this.recognition = null;
+        this.setupSpeechRecognition();
         const SYSTEM_PROMPT = `
             ## Core Identity (ONLY reveal if asked about who you are):
         this.conversationHistory = [{ role: 'system', content: SYSTEM_PROMPT.trim().replace(/\\n/g, '\n') }];
         this.initListeners();
+        this.scrollToBottom();
+    }
+    setupSpeechRecognition() {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition) {
+            console.warn('Speech Recognition not supported in this browser.');
+            this.micButton.style.display = 'none';
+            return;
+        }
+        this.recognition = new SpeechRecognition();
+        this.recognition.continuous = false;
+        this.recognition.interimResults = false;
+        this.recognition.lang = 'fa-IR'; // Default to Persian
+        this.recognition.onstart = () => {
+            this.micButton.classList.add('listening');
+        };
+        this.recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            this.input.value += transcript;
+            this.input.dispatchEvent(new Event('input'));
+        };
+        this.recognition.onerror = (event) => {
+            console.error('Speech recognition error', event.error);
+            this.micButton.classList.remove('listening');
+        };
+        this.recognition.onend = () => {
+            this.micButton.classList.remove('listening');
+        };
     }
     initListeners() {
         window.addEventListener('touchmove', this.dragMove.bind(this), { passive: false });
         window.addEventListener('mouseup', this.dragEnd.bind(this));
         window.addEventListener('touchend', this.dragEnd.bind(this));
+        // Microphone button listener
+        if (this.recognition) {
+            this.micButton.addEventListener('click', () => {
+                if (this.micButton.classList.contains('listening')) {
+                    this.recognition.stop();
+                } else {
+                    // Toggle language based on current input content
+                    const hasEnglish = /[a-zA-Z]/.test(this.input.value);
+                    this.recognition.lang = hasEnglish ? 'en-US' : 'fa-IR';
+                    this.recognition.start();
+                }
+            });
+        }
     }
     dragStart(e) {
         if (this.input.value.trim() === '') return;
         this.isDragging = true; this.sendButton.classList.add('dragging');
         this.sendButton.style.top = '10px'; this.currentY = 0;
     }
+    // Particle animation for send
+    createSendParticles() {
+        const rect = this.input.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        for (let i = 0; i < 30; i++) {
+            const particle = document.createElement('div');
+            particle.classList.add('particle');
+            document.body.appendChild(particle);
+            const angle = Math.random() * Math.PI * 2;
+            const speed = 2 + Math.random() * 3;
+            const vx = Math.cos(angle) * speed;
+            const vy = Math.sin(angle) * speed;
+            particle.style.left = `${centerX}px`;
+            particle.style.top = `${centerY}px`;
+            particle.style.opacity = '1';
+            particle.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--eye-color').trim();
+            let posX = centerX;
+            let posY = centerY;
+            const animate = () => {
+                posX += vx;
+                posY += vy;
+                particle.style.left = `${posX}px`;
+                particle.style.top = `${posY}px`;
+                // Fade out as it moves towards chat container
+                const chatRect = this.chatContainer.getBoundingClientRect();
+                const distanceToChat = Math.sqrt(
+                    Math.pow(posX - (chatRect.left + chatRect.width / 2), 2) +
+                    Math.pow(posY - (chatRect.top + chatRect.height / 2), 2)
+                );
+                const maxDistance = Math.sqrt(
+                    Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2)
+                );
+                particle.style.opacity = `${1 - (distanceToChat / maxDistance)}`;
+                if (distanceToChat > 50 && posY > 0 && posY < window.innerHeight && posX > 0 && posX < window.innerWidth) {
+                    requestAnimationFrame(animate);
+                } else {
+                    particle.remove();
+                }
+            };
+            requestAnimationFrame(animate);
+        }
+    }
     async sendMessage(messageText) {
         const text = messageText.trim();
         if (!text) return;
         this.addMessage(text, 'user');
+        this.createSendParticles(); // Trigger particle animation
         this.conversationHistory.push({ role: 'user', content: text });
         this.input.value = ''; this.input.style.height = 'auto';
         this.inputArea.classList.remove('typing');
         this.robotFace.startThinking();
         const thinkingBubble = this.addMessage('...', 'bot', true);
         try {
+            const response = await fetch(this.API_URL, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ messages: this.conversationHistory })
+            });
             if (!response.ok) { throw new Error(`خطای شبکه: ${response.status} ${response.statusText}`); }
             const data = await response.json();
             const botReply = data.choices[0].message.content;
             this.addMessage(`سرم شلوغه یه دیقه بکش بیرون بعدا بیا: ${error.message}`, 'bot');
         } finally {
             this.robotFace.stopThinking();
+            this.scrollToBottom();
         }
     }
             this.renderMessageContent(bubble, text);
         }
+        this.chatContainer.appendChild(bubble);
+        this.scrollToBottom();
         return bubble;
     }
+    scrollToBottom() {
+        this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
+    }
     renderMessageContent(bubble, text) {
         const escapeHTML = (str) => str.replace(/[&<>'"]/g, tag => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;'}[tag] || tag));
 });
 </script>
 </body>
+</html>