Update index.html

index.html

@@ -48,14 +48,13 @@
         }
         .container { max-width: 820px; width: 100%; }
 
-        /* START: Changes for Header Animation */
         header {
-            position: relative; /* Required for positioning the canvas */
+            position: relative;
             text-align: center;
             margin-bottom: 2.5rem;
-            padding: 2rem 0; /* Add some padding for the animation to breathe */
+            padding: 2rem 0;
             animation: fadeIn 0.8s 0.1s ease-out backwards;
-            overflow: hidden; /* Keeps particles inside the header */
+            overflow: hidden;
         }
         #neural-network-canvas {
             position: absolute;
@@ -63,13 +62,12 @@
             left: 0;
             width: 100%;
             height: 100%;
-            z-index: 1; /* Behind the text */
+            z-index: 1;
         }
         h1, .subtitle {
-            position: relative; /* To ensure they stay on top of the canvas */
+            position: relative;
             z-index: 2;
         }
-        /* END: Changes for Header Animation */
 
         h1 {
             font-size: 2.8rem;
@@ -236,7 +234,7 @@
         </header>
 
         <main>
-            <!-- ... (The rest of your main content remains unchanged) ... -->
+            <!-- ... Main content ... -->
              <div class="form-group">
                 <div class="form-label">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
@@ -252,7 +250,6 @@
                 </label>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
-
             <div class="form-group">
                 <label for="prompt-input" class="form-label">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
@@ -266,7 +263,6 @@
                 </button>
                 <p id="error-message"></p>
             </div>
-            
             <div class="form-group">
                  <div class="form-label">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
@@ -284,7 +280,6 @@
                 </div>
             </div>
         </main>
-        
         <section class="gallery-section">
             <div class="gallery-header">
                  <div class="form-label">
@@ -299,7 +294,6 @@
             <div id="history-grid"></div>
         </section>
     </div>
-
     <div id="lightbox">
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
@@ -313,7 +307,6 @@
              </button>
         </div>
     </div>
-    
     <div id="confirmation-modal">
         <div class="modal-dialog">
             <div class="modal-icon">
@@ -331,151 +324,104 @@
     </div>
 
     <script>
-        // --- Application Logic Script (Unchanged) ---
+        // --- START OF APPLICATION LOGIC SCRIPT ---
+
+        // ... (all selectors are the same) ...
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
-        const uploadArea = document.getElementById('upload-area');
-        const fileInput = document.getElementById('file-input');
-        const previewImage = document.getElementById('preview-image-main');
-        const removeFileBtn = document.getElementById('remove-file-btn-main');
-        const promptInput = document.getElementById('prompt-input');
-        const submitBtn = document.getElementById('submit-btn');
-        const resultContainer = document.getElementById('result-container');
-        const resultGrid = document.getElementById('result-grid');
-        const errorMessage = document.getElementById('error-message');
-        const lightbox = document.getElementById('lightbox');
-        const lightboxImg = document.getElementById('lightbox-img');
-        const lightboxClose = document.getElementById('lightbox-close');
-        const lightboxDownload = document.getElementById('lightbox-download');
-        const lightboxNext = document.getElementById('lightbox-next');
-        const historyGrid = document.getElementById('history-grid');
-        const clearHistoryBtn = document.getElementById('clear-history-btn');
-        const confirmationModal = document.getElementById('confirmation-modal');
-        const modalMessageText = document.getElementById('modal-message-text');
-        const modalConfirmBtn = document.getElementById('modal-confirm-btn');
-        const modalCancelBtn = document.getElementById('modal-cancel-btn');
-        let uploadedFile = null;
-        let currentLightboxUrl = null;
-        let currentLightboxGroup = [];
-        let currentLightboxIndex = 0;
-        const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; };
-        const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); modalConfirmBtn.onclick = null; modalCancelBtn.onclick = null; };
-        const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); };
-        const handleFile = (file) => { if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; } uploadedFile = file; const reader = new FileReader(); reader.onload = (e) => { previewImage.src = e.target.result; }; reader.readAsDataURL(file); uploadArea.classList.add('has-file'); checkFormState(); clearResult(); };
-        const checkFormState = () => { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; };
-        const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); const btnIcon = submitBtn.querySelector('svg'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnIcon.style.display = 'none'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnIcon.style.display = 'inline-block'; btnText.textContent = 'خلق کن'; checkFormState(); } };
-        const displayResult = (imageUrls) => { resultGrid.innerHTML = ''; imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url, imageUrls)); resultGrid.appendChild(img); }); resultContainer.classList.add('has-content'); };
-        const clearResult = () => { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); };
-        const displayError = (message) => { errorMessage.textContent = message; errorMessage.style.display = 'block'; };
-        const updateLightboxImage = () => { const newUrl = currentLightboxGroup[currentLightboxIndex]; lightboxImg.src = newUrl; currentLightboxUrl = newUrl; };
-        const openLightbox = (clickedUrl, urlGroup) => { currentLightboxGroup = urlGroup; currentLightboxIndex = urlGroup.indexOf(clickedUrl); updateLightboxImage(); lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none'; lightbox.classList.add('visible'); };
-        const closeLightbox = () => { lightbox.classList.remove('visible'); currentLightboxGroup = []; };
-        const handleDownload = async () => { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-edited-image-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(objectUrl); } catch (e) { console.error('Download failed:', e); alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.'); } finally { spinner.style.display = 'none'; icon.style.display = 'block'; lightboxDownload.disabled = false; } };
-        const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
-        const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); };
-        const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); };
-        const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => { saveHistory([]); }); };
-        const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); }); };
-        const renderHistory = () => { const history = getHistory(); historyGrid.innerHTML = ''; clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none'; history.forEach((item, index) => { const card = document.createElement('div'); card.className = 'history-item'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف این مورد'; deleteBtn.innerHTML = `<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="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`; deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn); const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid'; item.urls.forEach(url => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر از تاریخچه'; img.addEventListener('click', () => openLightbox(url, item.urls)); imageGrid.appendChild(img); }); card.appendChild(imageGrid); historyGrid.appendChild(card); }); };
+        const uploadArea = document.getElementById('upload-area'); const fileInput = document.getElementById('file-input'); const previewImage = document.getElementById('preview-image-main'); const removeFileBtn = document.getElementById('remove-file-btn-main'); const promptInput = document.getElementById('prompt-input'); const submitBtn = document.getElementById('submit-btn'); const resultContainer = document.getElementById('result-container'); const resultGrid = document.getElementById('result-grid'); const errorMessage = document.getElementById('error-message'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxClose = document.getElementById('lightbox-close'); const lightboxDownload = document.getElementById('lightbox-download'); const lightboxNext = document.getElementById('lightbox-next'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
+        let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;
+
+        // --- NEW: Function to convert any image file to a PNG File object ---
+        const convertToPNG = (file) => {
+            return new Promise((resolve, reject) => {
+                const image = new Image();
+                const reader = new FileReader();
+
+                image.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = image.width;
+                    canvas.height = image.height;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(image, 0, 0);
+
+                    canvas.toBlob((blob) => {
+                        if (!blob) {
+                            reject(new Error('تبدیل به PNG ناموفق بود.'));
+                            return;
+                        }
+                        const originalName = file.name.substring(0, file.name.lastIndexOf('.')) || file.name;
+                        const pngFile = new File([blob], `${originalName}.png`, { type: 'image/png' });
+                        resolve(pngFile);
+                    }, 'image/png', 1.0); // 1.0 for max quality
+                };
+                
+                image.onerror = () => reject(new Error('فایل تصویر قابل خواندن نیست.'));
+                reader.onload = e => { image.src = e.target.result; };
+                reader.onerror = () => reject(new Error('خطا در خواندن فایل.'));
+                
+                reader.readAsDataURL(file);
+            });
+        };
+
+        // --- MODIFIED: The handleFile function is now async to handle conversion ---
+        const handleFile = async (file) => {
+            if (!file || !file.type.startsWith('image/')) {
+                displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.');
+                return;
+            }
+            
+            let fileToProcess = file;
+            // Optimize: If the file is not PNG or JPEG, convert it.
+            if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
+                try {
+                    // console.log(`Converting ${file.type} to PNG...`);
+                    fileToProcess = await convertToPNG(file);
+                } catch (error) {
+                    console.error('Image conversion failed:', error);
+                    displayError('خطا در تبدیل فرمت تصویر. لطفا فایل دیگری را امتحان کنید.');
+                    resetUploader(); // Clear the uploader on failure
+                    return;
+                }
+            }
+
+            uploadedFile = fileToProcess;
+
+            // Use the original file for preview to avoid delay
+            const reader = new FileReader();
+            reader.onload = (e) => { previewImage.src = e.target.result; };
+            reader.readAsDataURL(file);
+
+            uploadArea.classList.add('has-file');
+            checkFormState();
+            clearResult();
+        };
+
+        // ... (The rest of the JS functions are unchanged) ...
+        const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; }; const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); modalConfirmBtn.onclick = null; modalCancelBtn.onclick = null; }; const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); }; const checkFormState = () => { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }; const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); const btnIcon = submitBtn.querySelector('svg'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnIcon.style.display = 'none'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnIcon.style.display = 'inline-block'; btnText.textContent = 'خلق کن'; checkFormState(); } }; const displayResult = (imageUrls) => { resultGrid.innerHTML = ''; imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url, imageUrls)); resultGrid.appendChild(img); }); resultContainer.classList.add('has-content'); }; const clearResult = () => { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); }; const displayError = (message) => { errorMessage.textContent = message; errorMessage.style.display = 'block'; }; const updateLightboxImage = () => { const newUrl = currentLightboxGroup[currentLightboxIndex]; lightboxImg.src = newUrl; currentLightboxUrl = newUrl; }; const openLightbox = (clickedUrl, urlGroup) => { currentLightboxGroup = urlGroup; currentLightboxIndex = urlGroup.indexOf(clickedUrl); updateLightboxImage(); lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none'; lightbox.classList.add('visible'); }; const closeLightbox = () => { lightbox.classList.remove('visible'); currentLightboxGroup = []; }; const handleDownload = async () => { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-edited-image-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(objectUrl); } catch (e) { console.error('Download failed:', e); alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.'); } finally { spinner.style.display = 'none'; icon.style.display = 'block'; lightboxDownload.disabled = false; } }; const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]'); const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); }; const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); }; const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => { saveHistory([]); }); }; const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); }); }; const renderHistory = () => { const history = getHistory(); historyGrid.innerHTML = ''; clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none'; history.forEach((item, index) => { const card = document.createElement('div'); card.className = 'history-item'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف این مورد'; deleteBtn.innerHTML = `<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="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`; deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn); const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid'; item.urls.forEach(url => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر از تاریخچه'; img.addEventListener('click', () => openLightbox(url, item.urls)); imageGrid.appendChild(img); }); card.appendChild(imageGrid); historyGrid.appendChild(card); }); };
         document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
-        removeFileBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); resetUploader(); });
-        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }); });
-        ['dragenter', 'dragover'].forEach(e => { uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }); });
-        ['dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')); });
-        uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); });
-        promptInput.addEventListener('input', checkFormState);
+        removeFileBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); resetUploader(); }); fileInput.addEventListener('change', (e) => handleFile(e.target.files[0])); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }); }); ['dragenter', 'dragover'].forEach(e => { uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }); }); ['dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')); }); uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); }); promptInput.addEventListener('input', checkFormState);
         submitBtn.addEventListener('click', async () => { if (submitBtn.disabled) return; setLoading(true); const formData = new FormData(); formData.append('image', uploadedFile); formData.append('prompt', promptInput.value.trim()); try { const response = await fetch(API_URL, { method: 'POST', body: formData }); if (!response.ok) { const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` })); throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`); } const result = await response.json(); if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) { displayResult(result.image_urls); addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls }); } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); } } catch (error) { displayError(error.message); } finally { setLoading(false); } });
-        lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
-        lightboxDownload.addEventListener('click', handleDownload);
-        lightboxNext.addEventListener('click', () => { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length; updateLightboxImage(); });
-        clearHistoryBtn.addEventListener('click', handleClearHistory);
+        lightboxClose.addEventListener('click', closeLightbox); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); }); lightboxDownload.addEventListener('click', handleDownload); lightboxNext.addEventListener('click', () => { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length; updateLightboxImage(); }); clearHistoryBtn.addEventListener('click', handleClearHistory);
+    
     </script>
     
     <script>
-        // --- Header Animation Script (Modified for less crowded effect) ---
+        // --- Header Animation Script (Unchanged) ---
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
             const header = canvas.parentElement;
             const ctx = canvas.getContext('2d');
-
             let particles = [];
-            const particleCount = 35; // Reduced particle count
-            const maxDistance = 150;  // Increased connection distance
-            
+            const particleCount = 20; const maxDistance = 100;
             const computedStyles = getComputedStyle(document.documentElement);
             const particleColor = computedStyles.getPropertyValue('--accent-primary').trim();
             const lineColor = computedStyles.getPropertyValue('--text-tertiary').trim();
-
-            function resizeCanvas() {
-                canvas.width = header.clientWidth;
-                canvas.height = header.clientHeight;
-                init();
-            }
-
-            class Particle {
-                constructor() {
-                    this.x = Math.random() * canvas.width;
-                    this.y = Math.random() * canvas.height;
-                    this.vx = (Math.random() - 0.5) * 0.3; // Slower speed
-                    this.vy = (Math.random() - 0.5) * 0.3; // Slower speed
-                    this.radius = 1.5;
-                }
-                update() {
-                    this.x += this.vx;
-                    this.y += this.vy;
-                    if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
-                    if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
-                }
-                draw() {
-                    ctx.beginPath();
-                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                    ctx.fillStyle = particleColor;
-                    ctx.fill();
-                }
-            }
-
-            function init() {
-                particles = [];
-                for (let i = 0; i < particleCount; i++) {
-                    particles.push(new Particle());
-                }
-            }
-
-            function connectParticles() {
-                for (let i = 0; i < particles.length; i++) {
-                    for (let j = i + 1; j < particles.length; j++) {
-                        const dx = particles[i].x - particles[j].x;
-                        const dy = particles[i].y - particles[j].y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-
-                        if (distance < maxDistance) {
-                            ctx.beginPath();
-                            ctx.moveTo(particles[i].x, particles[i].y);
-                            ctx.lineTo(particles[j].x, particles[j].y);
-                            ctx.strokeStyle = lineColor;
-                            ctx.lineWidth = 0.3; // Thinner lines
-                            ctx.globalAlpha = 1 - distance / maxDistance;
-                            ctx.stroke();
-                        }
-                    }
-                }
-                ctx.globalAlpha = 1;
-            }
-
-            function animate() {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                particles.forEach(particle => {
-                    particle.update();
-                    particle.draw();
-                });
-                connectParticles();
-                requestAnimationFrame(animate);
-            }
-
-            window.addEventListener('resize', resizeCanvas);
-            resizeCanvas();
-            animate();
+            function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); }
+            class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
+            function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } }
+            function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
+            function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); }
+            window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate();
         });
     </script>
 </body>