Spaces:

Fuckingbase
/

Roboshen

Running

App Files Files Community

Fuckingbase commited on Aug 22

Commit

f04a4c1

verified ·

1 Parent(s): 3935a38

Update index.html

Browse files

Files changed (1) hide show

index.html +609 -23

index.html CHANGED Viewed

@@ -1,29 +1,615 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
-</head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
-</html>

 <!DOCTYPE html>
+<html lang="fa" dir="rtl">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Robot Chat</title>
+    <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;
+            --eye-glow-color: rgba(0, 234, 255, 0.5);
+            --background-dark: #000000;
+            --background-medium: #1a1a1a;
+            --ui-background-glass: rgba(10, 10, 10, 0.75);
+            --ui-border-color: rgba(0, 234, 255, 0.6);
+            --ui-shadow-color: rgba(0, 234, 255, 0.2);
+            --text-color: #c9d1d9;
+        }
+        * {
+            -webkit-tap-highlight-color: transparent;
+            box-sizing: border-box;
+        }
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            width: 100%;
+            background-color: transparent;
+            overflow: hidden;
+            font-family: 'Vazirmatn', sans-serif;
+            color: var(--text-color);
+        }
+        #background-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: -1;
+            pointer-events: none;
+            background-color: var(--background-dark);
+        }
+        .main-wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        #app-container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 15px;
+            min-height: 0;
+        }
+        #robot-wrapper {
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            z-index: 10;
+            height: 160px;
+        }
+        .robot-container { width: 160px; height: 160px; }
+        .robot-frame {
+            width: 100%; height: 100%;
+            background: linear-gradient(145deg, #2a2a2a, var(--background-medium));
+            border-radius: 22%;
+            box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 5px 5px 15px #0a0a0a, -5px -5px 15px #202020;
+            display: flex; align-items: center; justify-content: center; position: relative;
+        }
+        #faceCanvas { width: 80%; height: 75%; }
+        .engraved-text {
+            position: absolute; bottom: 6.25%; left: 50%;
+            transform: translate(-50%, 50%);
+            width: 100%; text-align: center; font-size: 14px;
+            font-weight: bold; color: #252525;
+            text-shadow: 1px 1px 1px #111, 0 0 0 #000, 0px 0px 3px #111;
+            letter-spacing: 1px; pointer-events: none;
+        }
+        #chat-container {
+            flex-grow: 1; background-color: var(--ui-background-glass);
+            border: 1px solid var(--ui-border-color); border-radius: 30px;
+            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;
+        }
+        .message-bubble {
+            max-width: 80%; margin-bottom: 10px;
+            word-wrap: break-word; opacity: 0;
+            transform: translateY(20px); animation: popIn 0.3s forwards;
+        }
+        .message-content {
+            padding: 10px 15px; border-radius: 20px;
+        }
+        @keyframes popIn { to { opacity: 1; transform: translateY(0); } }
+        .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; }
+        @keyframes pulse {
+            0% { background-color: rgba(255, 255, 255, 0.05); }
+            50% { background-color: rgba(255, 255, 255, 0.1); }
+            100% { background-color: rgba(255, 255, 255, 0.05); }
+        }
+        .code-block-wrapper {
+            background-color: #0d1117;
+            border: 1px solid #30363d;
+            border-radius: 8px;
+            overflow: hidden;
+            margin-top: 10px;
+        }
+        .code-block-header {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 5px 10px;
+            background-color: #161b22;
+        }
+        .copy-code-btn {
+            background: #21262d; border: 1px solid #30363d;
+            color: var(--text-color); font-size: 12px;
+            padding: 3px 8px; border-radius: 6px; cursor: pointer;
+            font-family: 'Vazirmatn', sans-serif;
+        }
+        .copy-code-btn:hover { background: #30363d; }
+        .code-block-wrapper pre {
+            margin: 0; padding: 15px;
+            overflow-x: auto;
+            font-family: monospace;
+            font-size: 14px;
+            direction: ltr;
+            text-align: left;
+        }
+        .code-block-wrapper pre code { white-space: pre-wrap; word-wrap: break-word; }
+        .interactive-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 10px;
+        }
+        .chat-button {
+            background-color: transparent;
+            border: 1px solid var(--ui-border-color);
+            color: var(--eye-color);
+            padding: 8px 15px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-family: 'Vazirmatn', sans-serif;
+            transition: background-color 0.2s;
+        }
+        .chat-button:hover { background-color: rgba(0, 234, 255, 0.1); }
+        .chat-button:disabled {
+            cursor: not-allowed;
+            background-color: rgba(255, 255, 255, 0.05);
+            color: #888;
+            border-color: #555;
+        }
+        #input-area {
+            flex-shrink: 0; display: flex;
+            align-items: center;
+            background-color: var(--ui-background-glass);
+            border: 1px solid var(--ui-border-color); border-radius: 30px;
+            padding: 10px; backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow: 0 0 30px var(--ui-shadow-color);
+        }
+        #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;
+        }
+        #message-input:focus::placeholder {
+            color: transparent;
+        }
+        #send-button-container {
+            width: 50px; height: 90px; background-color: #111;
+            border-radius: 25px; margin-left: 10px; position: relative;
+            overflow: hidden; display: flex; justify-content: center;
+            align-items: center; cursor: grab;
+        }
+        #send-button {
+            width: 40px; height: 40px; background-color: var(--eye-color);
+            border-radius: 50%; position: absolute; top: 25px;
+            display: flex; justify-content: center; align-items: center;
+            transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        #send-button.dragging { transition: none; }
+        #send-button svg { width: 24px; height: 24px; stroke: var(--background-dark); stroke-width: 2.5; }
+        .site-footer { flex-shrink: 0; text-align: center; padding: 0 15px 10px 15px; }
+        .gradient-link {
+            font-size: 0.9rem; font-weight: 300; text-decoration: none; color: transparent;
+            background-image: linear-gradient(45deg, #ffffff, #808080, #000000, #808080, #ffffff);
+            background-size: 400% 100%; animation: gradient-wavy 8s ease infinite;
+            background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+        }
+        @keyframes gradient-wavy { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
+        #orientation-warning {
+            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: var(--background-dark); color: white;
+            flex-direction: column; justify-content: center; align-items: center;
+            text-align: center; z-index: 1000;
+        }
+        #orientation-warning svg { width: 80px; height: 80px; margin-bottom: 20px; stroke: var(--eye-color); }
+        @media (orientation: landscape) or (min-width: 501px) {
+            .main-wrapper { display: none; }
+            #orientation-warning { display: flex; }
+        }
+    </style>
+</head>
 <body>
+    <canvas id="background-canvas"></canvas>
+    <div class="main-wrapper">
+        <div id="app-container">
+            <div id="robot-wrapper">
+                <div class="robot-container">
+                    <div class="robot-frame">
+                        <canvas id="faceCanvas" width="300" height="300"></canvas>
+                        <div class="engraved-text">ROBO☬SHΞN™</div>
+                    </div>
+                </div>
+            </div>
+            <div id="chat-container"></div>
+            <div id="input-area">
+                <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 19V5M19 12l-7-7-7 7"/></svg>
+                    </div>
+                </div>
+                <textarea id="message-input" placeholder="بگو ببینم دیگه چی میخوای !؟" rows="1"></textarea>
+            </div>
+        </div>
+        <footer class="site-footer">
+            <a href="https://t.me/shervini" target="_blank" class="gradient-link">Exclusive ☬SHΞN™ made</a>
+        </footer>
+    </div>
+    <div id="orientation-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M12 4v4"/><path d="M12 20v-4"/></svg>
+        <h2>لطفا دستگاه خود را بچرخانید</h2>
+        <p>این برنامه برای نمایش عمودی موبایل طراحی شده است.</p>
+    </div>
+<script>
+class RobotFace {
+    constructor(canvas) {
+        this.canvas = canvas; this.ctx = canvas.getContext("2d");
+        this.W = canvas.width; this.H = canvas.height;
+        this.lookX = 0; this.lookY = 0; this.targetLookX = 0; this.targetLookY = 0;
+        this.blinkProgress = 1; this.isBlinking = false; this.lastBlinkTime = Date.now();
+        this.isSleeping = true; this.lastInteractionTime = Date.now(); this.sleepTimeout = 10000;
+        this.isWatchingInput = false; this.isThinking = false;
+        this.readingOscillation = 0; this.thinkingInterval = null;
+        this.initInteractions(); requestAnimationFrame(this.render.bind(this));
+    }
+    render() {
+        this.lookX += (this.targetLookX - this.lookX) * 0.1;
+        this.lookY += (this.targetLookY - this.lookY) * 0.1;
+        this.ctx.clearRect(0, 0, this.W, this.H); this.drawFaceplate();
+        const now = Date.now();
+        if (this.isSleeping) { this.drawSleepEyes(); } else {
+            if (this.isWatchingInput) {
+                this.targetLookY = 25; this.readingOscillation += 0.1;
+                this.targetLookX = Math.sin(this.readingOscillation) * 10;
+            }
+            if (!this.isThinking && !this.isWatchingInput && now - this.lastInteractionTime > this.sleepTimeout) { this.isSleeping = true; }
+            if (!this.isBlinking && !this.isThinking && now - this.lastBlinkTime > 3000 + Math.random() * 2000) { this.blink(); }
+            this.drawExpression();
+        }
+        requestAnimationFrame(this.render.bind(this));
+    }
+    drawFaceplate() {
+        const c = this.ctx, r = 60;
+        c.fillStyle = '#050505'; c.strokeStyle = '#333333'; c.lineWidth = 4;
+        c.beginPath(); c.roundRect(0, 0, this.W, this.H, r); c.fill(); c.stroke();
+    }
+    drawExpression() {
+        const eW = 100, eH = 100, eR = 30, eY = this.H / 2 + this.lookY;
+        const lCX = this.W * 0.3 + this.lookX, rCX = this.W * 0.7 + this.lookX;
+        const cH = eH * this.blinkProgress;
+        this.drawEye(lCX, eY, eW, cH, eR); this.drawEye(rCX, eY, eW, cH, eR);
+    }
+    drawEye(cx, cy, w, h, r) {
+        const c = this.ctx;
+        const eyeColor = getComputedStyle(document.documentElement).getPropertyValue('--eye-color').trim();
+        const glowColor = getComputedStyle(document.documentElement).getPropertyValue('--eye-glow-color').trim();
+        c.shadowBlur = 25; c.shadowColor = glowColor; c.fillStyle = eyeColor;
+        c.beginPath(); c.roundRect(cx - w / 2, cy - h / 2, w, h, r); c.fill();
+        c.shadowBlur = 0; c.globalCompositeOperation = 'source-atop';
+        c.fillStyle = 'rgba(0,0,0,0.3)';
+        for (let i = 0; i < h; i += 3) { c.fillRect(cx - w / 2, cy - h / 2 + i, w, 1.5); }
+        c.globalCompositeOperation = 'source-over';
+    }
+    drawSleepEyes() {
+        const c = this.ctx, y = this.H / 2, w = 100, h = 12, r = h / 2;
+        c.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--eye-color').trim();
+        c.shadowColor = getComputedStyle(document.documentElement).getPropertyValue('--eye-glow-color').trim();
+        c.shadowBlur = 15;
+        c.beginPath();
+        c.roundRect(this.W * 0.3 - w / 2, y - h / 2, w, h, r);
+        c.roundRect(this.W * 0.7 - w / 2, y - h / 2, w, h, r);
+        c.fill(); c.shadowBlur = 0;
+    }
+    initInteractions() {
+        const onMove = e => {
+            if (this.isSleeping || this.isWatchingInput || this.isThinking) return;
+            this.wakeUp(); const max = 15;
+            const bcr = document.body.getBoundingClientRect();
+            const clientX = e.clientX || e.touches?.[0]?.clientX || 0;
+            const clientY = e.clientY || e.touches?.[0]?.clientY || 0;
+            this.targetLookX = (clientX / bcr.width - 0.5) * 2 * max;
+            this.targetLookY = (clientY / bcr.height - 0.5) * 2 * max;
+        };
+        const onDown = () => { this.wakeUp(); };
+        window.addEventListener('mousedown', onDown);
+        window.addEventListener('touchstart', onDown, { passive: true });
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('touchmove', onMove, { passive: true });
+    }
+    wakeUp() { if (this.isSleeping) { this.isSleeping = false; this.blink(); } this.lastInteractionTime = Date.now(); }
+    blink() {
+        if (this.isBlinking) return; this.isBlinking = true;
+        this.lastBlinkTime = Date.now(); let s = null; const d = 150;
+        const a = t => {
+            if (!s) s = t; const e = t - s;
+            if (e < d) this.blinkProgress = 1 - (e / d);
+            else if (e < d * 2) this.blinkProgress = (e - d) / d;
+            else { this.blinkProgress = 1; this.isBlinking = false; return; }
+            requestAnimationFrame(a);
+        };
+        requestAnimationFrame(a);
+    }
+    startThinking() {
+        this.isThinking = true; this.targetLookX = 0; this.targetLookY = 0;
+        this.thinkingInterval = setInterval(() => this.blink(), 800);
+    }
+    stopThinking() { this.isThinking = false; clearInterval(this.thinkingInterval); }
+}
+class ChatInterface {
+    constructor(robotFace) {
+        this.robotFace = robotFace;
+        this.chatContainer = document.getElementById('chat-container');
+        this.input = document.getElementById('message-input');
+        this.sendButtonContainer = document.getElementById('send-button-container');
+        this.sendButton = document.getElementById('send-button');
+        this.isDragging = false; this.startY = 0; this.currentY = 0; this.dragThreshold = 30;
+        this.API_URL = 'https://text.pollinations.ai/openai';
+        const SYSTEM_PROMPT = `
+            You are a helpful and friendly assistant named RoboShen.
+            - Keep your answers very short and conversational.
+            - Never mention that you are an AI model.
+            - Only use buttons when you are offering a few distinct choices or options to the user. Use the format [button:Choice 1] [button:Choice 2].
+        `;
+        this.conversationHistory = [{ role: 'system', content: SYSTEM_PROMPT.trim() }];
+        this.initListeners();
+    }
+    initListeners() {
+        this.input.addEventListener('input', () => { this.input.style.height = 'auto'; this.input.style.height = (this.input.scrollHeight) + 'px'; });
+        this.input.addEventListener('focus', () => {
+            this.robotFace.isWatchingInput = true; this.robotFace.wakeUp();
+            setTimeout(() => { document.getElementById('input-area').scrollIntoView({ behavior: 'smooth', block: 'end' }); }, 300);
+        });
+        this.input.addEventListener('blur', () => { this.robotFace.isWatchingInput = false; this.robotFace.targetLookX = 0; this.robotFace.targetLookY = 0; });
+        this.sendButtonContainer.addEventListener('mousedown', this.dragStart.bind(this));
+        this.sendButtonContainer.addEventListener('touchstart', this.dragStart.bind(this), { passive: true });
+        window.addEventListener('mousemove', this.dragMove.bind(this));
+        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');
+        this.startY = e.pageY || e.touches?.[0]?.pageY;
+        this.sendButtonContainer.style.cursor = 'grabbing';
+    }
+    dragMove(e) {
+        if (!this.isDragging) return; e.preventDefault();
+        const y = e.pageY || e.touches?.[0]?.pageY;
+        let diff = y - this.startY; if (diff < 0) diff = 0;
+        const maxDrag = this.sendButtonContainer.offsetHeight - this.sendButton.offsetHeight - 10;
+        if (diff > maxDrag) diff = maxDrag;
+        this.currentY = diff; this.sendButton.style.top = `${25 + this.currentY}px`;
+    }
+    dragEnd() {
+        if (!this.isDragging) return;
+        this.isDragging = false; this.sendButton.classList.remove('dragging');
+        this.sendButtonContainer.style.cursor = 'grab';
+        if (this.currentY > this.dragThreshold) { this.sendMessage(this.input.value); }
+        this.sendButton.style.top = '25px'; 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.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.conversationHistory.push({ role: 'assistant', content: botReply });
+            thinkingBubble.remove();
+            this.addMessage(botReply, 'bot');
+        } catch (error) {
+            console.error("Error fetching bot response:", error);
+            thinkingBubble.remove();
+            this.addMessage(`متاسفانه مشکلی پیش آمد: ${error.message}`, 'bot');
+        } finally {
+            this.robotFace.stopThinking();
+        }
+    }
+    addMessage(text, sender, isThinking = false) {
+        const bubble = document.createElement('div');
+        bubble.classList.add('message-bubble', `${sender}-message`);
+        if (isThinking) {
+            bubble.classList.add('thinking');
+            bubble.innerHTML = `<div class="message-content">${text}</div>`;
+        } else {
+            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]));
+        const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+        const buttonRegex = /\[button:(.*?)\]/g;
+        let buttonsHtml = '';
+        const processedText = text.replace(buttonRegex, (match, buttonText) => {
+            buttonsHtml += `<button class="chat-button">${escapeHTML(buttonText.trim())}</button>`;
+            return '';
+        });
+        let contentHtml = processedText.replace(codeBlockRegex, (match, lang, code) => {
+            const uniqueId = `code-${Date.now()}-${Math.random()}`;
+            return `<div class="code-block-wrapper">
+                        <div class="code-block-header">
+                            <button class="copy-code-btn" data-target="${uniqueId}">کپی</button>
+                        </div>
+                        <pre><code id="${uniqueId}">${escapeHTML(code.trim())}</code></pre>
+                    </div>`;
+        });
+        bubble.innerHTML = `
+            <div class="message-content">${contentHtml.trim()}</div>
+            ${buttonsHtml ? `<div class="interactive-buttons">${buttonsHtml}</div>` : ''}
+        `;
+        this.attachEventListenersToBubble(bubble);
+    }
+    attachEventListenersToBubble(bubble) {
+        bubble.querySelectorAll('.copy-code-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const codeElement = document.getElementById(btn.dataset.target);
+                const tempTextArea = document.createElement('textarea');
+                tempTextArea.value = codeElement.innerText;
+                document.body.appendChild(tempTextArea);
+                tempTextArea.select();
+                try {
+                    document.execCommand('copy');
+                    btn.textContent = 'کپی شد!';
+                } catch (err) {
+                    console.error('Copy failed', err);
+                    btn.textContent = 'خطا!';
+                }
+                document.body.removeChild(tempTextArea);
+                setTimeout(() => { btn.textContent = 'کپی'; }, 2000);
+            });
+        });
+        bubble.querySelectorAll('.chat-button').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.sendMessage(btn.textContent);
+                bubble.querySelectorAll('.chat-button').forEach(b => b.disabled = true);
+            });
+        });
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    const particleCanvas = document.getElementById('background-canvas');
+    const particleCtx = particleCanvas.getContext('2d');
+    let particleArray = [];
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null;
+    }
+    const eyeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--eye-color').trim();
+    const eyeColorRgb = hexToRgb(eyeColorHex);
+    const particleConfig = {
+        particleCount: 120, maxVelocity: 1.5, connectionDistance: 130, particleSize: 2,
+        particleColor: `rgba(${eyeColorRgb.r}, ${eyeColorRgb.g}, ${eyeColorRgb.b}, 0.7)`,
+    };
+    function resizeParticleCanvas() {
+        particleCanvas.width = window.innerWidth; particleCanvas.height = window.innerHeight; createParticleArray();
+    }
+    window.addEventListener('resize', resizeParticleCanvas);
+    class Particle {
+        constructor() {
+            this.x = Math.random() * particleCanvas.width; this.y = Math.random() * particleCanvas.height;
+            this.vx = (Math.random() - 0.5) * particleConfig.maxVelocity; this.vy = (Math.random() - 0.5) * particleConfig.maxVelocity;
+        }
+        update() {
+            this.x += this.vx; this.y += this.vy;
+            if (this.x < 0 || this.x > particleCanvas.width) this.vx *= -1;
+            if (this.y < 0 || this.y > particleCanvas.height) this.vy *= -1;
+        }
+        draw() {
+            particleCtx.beginPath(); particleCtx.arc(this.x, this.y, particleConfig.particleSize, 0, Math.PI * 2);
+            particleCtx.fillStyle = particleConfig.particleColor; particleCtx.fill();
+        }
+    }
+    function createParticleArray() {
+        particleArray = [];
+        for (let i = 0; i < particleConfig.particleCount; i++) { particleArray.push(new Particle()); }
+    }
+    function connectParticles() {
+        for (let i = 0; i < particleArray.length; i++) {
+            for (let j = i + 1; j < particleArray.length; j++) {
+                const distance = Math.sqrt((particleArray[i].x - particleArray[j].x) ** 2 + (particleArray[i].y - particleArray[j].y) ** 2);
+                if (distance < particleConfig.connectionDistance) {
+                    particleCtx.beginPath(); particleCtx.moveTo(particleArray[i].x, particleArray[i].y);
+                    particleCtx.lineTo(particleArray[j].x, particleArray[j].y);
+                    particleCtx.strokeStyle = `rgba(${eyeColorRgb.r}, ${eyeColorRgb.g}, ${eyeColorRgb.b}, ${1 - distance / particleConfig.connectionDistance})`;
+                    particleCtx.lineWidth = 0.5; particleCtx.stroke();
+                }
+            }
+        }
+    }
+    function animateParticles() {
+        particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
+        particleArray.forEach(p => { p.update(); p.draw(); });
+        connectParticles();
+        requestAnimationFrame(animateParticles);
+    }
+    resizeParticleCanvas(); animateParticles();
+    const face = new RobotFace(document.getElementById('faceCanvas'));
+    const chat = new ChatInterface(face);
+});
+</script>
+</body>
+</html>