marque section moving faster than expected

static/css/main.css

@@ -77,17 +77,19 @@
     border-top: 1px solid var(--border); 
     border-bottom: 1px solid var(--border); 
     overflow: hidden; 
-            
+    /* Prevents selection while dragging over logos */
+    user-select: none; 
 }
 
 .marquee-track { 
     display: flex; 
-            gap: 3rem; /* Reduced from 6rem to 3rem for tighter look with fewer items */
+    gap: 3rem; 
     width: max-content; 
-            /* ADJUSTMENT 1: Added padding to ensure track has width even with few items */
     padding: 0 1rem; 
-            /* ADJUSTMENT 2: Increased animation duration from 40s to 80s for smoother speed */
+    /* Removed 120s here - will be handled by JS for consistent speed */
-            animation: marquee 120s linear infinite; 
+    animation: marquee linear infinite; 
+    /* Ensure smooth rendering */
+    will-change: transform; 
 }
 
 .partner-logo { 
@@ -96,19 +98,17 @@
     object-fit: contain; 
     filter: grayscale(100%); 
     opacity: 0.5; 
+    transition: opacity 0.3s;
 }
+.partner-logo:hover { opacity: 1; filter: grayscale(0%); }
 
-        /* Keep existing text style for names without logos */
 .partner-item { 
     font-weight: 700; 
     color: #d4d4d8; 
     font-size: 1.1rem;
-            /* ADJUSTMENT 3: Ensure text doesn't break or wrap */
     white-space: nowrap; 
-            /* Flexbox to align text vertically with logos if they appear mixed */
     display: flex; 
     align-items: center; 
-            /* Give text elements some space if mixed with logos */
     padding: 0 0.5rem; 
 }
 
@@ -118,7 +118,6 @@
 }
 
 
-
         /* Cards & Badge */
         .badge { display: inline-block; padding: 0.25rem 0.75rem; background: var(--secondary); border-radius: 99px; font-size: 0.75rem; font-weight: 600; margin-bottom: 1.5rem; }
         

static/js/main.js

@@ -151,32 +151,64 @@
             });
         });
 
-                // --- Marquee Width Fix ---
+               // --- Marquee Width & Speed Fix ---
-        // Ensures the partner list is always wide enough to scroll smoothly
+
+        // Helper: Debounce function prevents the code from running too often 
+        // (e.g. while scrolling on mobile which triggers resize events)
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
         function adjustMarqueeWidth() {
             const track = document.getElementById('marquee-track');
             if (!track) return;
 
-            // Get the rendered width of the single list
+            // 1. Get the rendered width of the single list of partners
             const currentWidth = track.scrollWidth;
-            // Target width: We want the track to be at least 200% of screen width
-            // so it has enough room to scroll off-screen before resetting.
-            const targetWidth = window.innerWidth * 2.0; 
             
-            // Calculate how many times we need to repeat the list to reach target width
+            // 2. Calculate how many times we need to repeat the list
+            // Target: We want the track to be at least 3x the screen width
+            // so it scrolls smoothly without running out of items before looping.
+            const targetWidth = window.innerWidth * 3; 
+            
             const repeats = Math.max(2, Math.ceil(targetWidth / currentWidth));
 
-            // Get the raw HTML content (the first run of the loop)
+            // 3. Store the original HTML (the first run of the loop)
             const originalContent = track.innerHTML;
 
-            // Rebuild the track with the repeated content
+            // 4. Rebuild the track with the repeated content
             track.innerHTML = '';
             for (let i = 0; i < repeats; i++) {
                 track.innerHTML += originalContent;
             }
+
+            // --- NEW: Calculate Constant Speed ---
+            // The animation moves -50% of the track width.
+            const totalWidth = track.scrollWidth;
+            const distanceToMove = totalWidth / 2;
+            
+            // Desired speed in pixels per second (Adjust this number to make it faster/slower)
+            // 50 = Relaxed/Easy reading speed
+            // 100 = Faster
+            const pixelsPerSecond = 50; 
+            
+            // Duration = Distance / Speed
+            const durationInSeconds = distanceToMove / pixelsPerSecond;
+
+            // Apply the calculated duration
+            track.style.animationDuration = `${durationInSeconds}s`;
         }
 
-        // Run on load and resize
+        // Run on load
         window.addEventListener('load', adjustMarqueeWidth);
-        window.addEventListener('resize', adjustMarqueeWidth);
         
+        // Run on resize (Debounced by 200ms to prevent flickering during scroll)
+        window.addEventListener('resize', debounce(adjustMarqueeWidth, 200));

tenhal/settings.py

@@ -196,8 +196,15 @@ GEOIP_PATH = BASE_DIR / 'geoip'
 
 
 
-# 3. Security Headers (Required for 10k visitors)
+if not DEBUG:
     SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
     SECURE_SSL_REDIRECT = True
     SESSION_COOKIE_SECURE = True
     CSRF_COOKIE_SECURE = True
+else:
+    SECURE_SSL_REDIRECT = False
+    SESSION_COOKIE_SECURE = False
+    CSRF_COOKIE_SECURE = False
+
+
+CSRF_TRUSTED_ORIGINS = [f"https://{host}" for host in ALLOWED_HOSTS if "ngrok-free.app" in host]