Remove all Hugging Face login buttons and prompts

- Removed login link from base.html navigation
- Removed login tip overlay and mobile banner
- Removed login prompt from leaderboard.html
- Removed all login-related CSS and JavaScript
- Users can still use the app without login UI clutter

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

templates/arena.html

@@ -585,88 +585,7 @@
         }
     }
 
-    /* Login prompt overlay styles */
-    .login-prompt-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.7);
-        z-index: 10000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .login-prompt-content {
-        background: white;
-        border-radius: 12px;
-        padding: 32px;
-        max-width: 400px;
-        width: 90%;
-        text-align: center;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-    }
-
-    .login-prompt-content h3 {
-        margin: 0 0 16px 0;
-        color: var(--text-color);
-        font-size: 24px;
-    }
-
-    .login-prompt-content p {
-        margin: 0 0 24px 0;
-        color: var(--text-secondary);
-        line-height: 1.5;
-    }
-
-    .login-prompt-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: center;
-    }
-
-    .login-prompt-close {
-        padding: 12px 24px;
-        background: transparent;
-        border: 1px solid var(--border-color);
-        border-radius: 8px;
-        color: var(--text-secondary);
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s;
-    }
-
-    .login-prompt-close:hover {
-        background: var(--light-gray);
-    }
-
-    .login-prompt-btn {
-        padding: 12px 24px;
-        background: var(--primary-color);
-        border: none;
-        border-radius: 8px;
-        color: white;
-        text-decoration: none;
-        font-size: 14px;
-        font-weight: 500;
-        transition: all 0.2s;
-        display: inline-block;
-    }
-
-    .login-prompt-btn:hover {
-        background: var(--primary-hover);
-        transform: translateY(-1px);
-    }
-
-    /* Dark mode for login prompt */
-    @media (prefers-color-scheme: dark) {
-        .login-prompt-content {
-            background: var(--bg-color);
-            border: 1px solid var(--border-color);
-        }
-    }
+    /* Login prompt overlay removed */
 </style>
 {% endblock %} 
 

templates/base.html

@@ -369,24 +369,7 @@
             transform: rotate(180deg);
         }
 
-        .login-link {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            border-top: 1px solid var(--border-color);
-            text-decoration: none;
-            color: var(--text-color);
-        }
-
-        .login-link:hover {
-            background-color: var(--light-gray);
-        }
-
-        .login-link img {
-            width: 24px;
-            height: 24px;
-            margin-right: 12px;
-        }
+        /* Login link removed */
 
         .sidebar-footer {
             margin-top: auto;
@@ -892,163 +875,7 @@
             }
         }
 
-        /* Login tip overlay */
-        .login-tip-overlay {
-            position: absolute;
-            background-color: white;
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            padding: 16px;
-            z-index: 1000;
-            width: 280px;
-            display: none;
-        }
-
-        .login-tip-overlay.show {
-            display: block;
-        }
-
-        .login-tip-content {
-            font-size: 14px;
-            margin-bottom: 12px;
-        }
-
-        .login-tip-actions {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .login-tip-close {
-            font-size: 13px;
-            color: var(--text-color);
-            opacity: 0.7;
-            cursor: pointer;
-            background: none;
-            border: none;
-            padding: 0;
-        }
-
-        .login-now-btn {
-            font-size: 13px;
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: 4px;
-            padding: 6px 12px;
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret {
-            position: absolute;
-            bottom: -8px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 16px;
-            height: 8px;
-            overflow: hidden;
-        }
-
-        .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret:after {
-            content: '';
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            background: white;
-            border-right: 1px solid var(--border-color);
-            border-bottom: 1px solid var(--border-color);
-            top: -6px;
-            left: 2px;
-            transform: rotate(45deg);
-        }
-
-        @media (prefers-color-scheme: dark) {
-            .login-tip-overlay {
-                background-color: var(--light-gray);
-                border-color: var(--border-color);
-            }
-            
-            .login-tip-overlay[data-popper-placement^='top'] .login-tip-caret:after {
-                background: var(--light-gray);
-                border-color: var(--border-color);
-            }
-            
-            .login-tip-close {
-                color: var(--text-color);
-            }
-        }
-
-        /* Mobile login banner */
-        .login-banner {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 85%;
-            max-width: 320px;
-            background-color: white;
-            color: var(--text-color);
-            border-radius: var(--radius);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-            padding: 20px;
-            display: none;
-            z-index: 9998;
-            text-align: center;
-            border: 1px solid var(--border-color);
-        }
-
-        .login-banner-content {
-            margin-bottom: 16px;
-            font-size: 15px;
-            font-weight: 500;
-        }
-
-        .login-banner-actions {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            gap: 12px;
-            align-items: center;
-            margin-top: 20px;
-        }
-
-        .login-banner-close {
-            background: none;
-            border: 1px solid var(--border-color);
-            color: var(--text-color);
-            font-size: 14px;
-            cursor: pointer;
-            padding: 10px 16px;
-            border-radius: var(--radius);
-            flex: 1;
-            font-weight: 500;
-        }
-
-        .login-banner-btn {
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: var(--radius);
-            padding: 10px 16px;
-            cursor: pointer;
-            font-weight: 500;
-            text-decoration: none;
-            flex: 1;
-            text-align: center;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-            .login-banner {
-                background-color: var(--light-gray);
-                border-color: var(--border-color);
-            }
-            
-            .login-banner-close {
-                border-color: var(--border-color);
-                background-color: rgba(255, 255, 255, 0.05);
-            }
-        }
+        /* Login tip and banner removed */
     </style>
 </head>
 
@@ -1127,21 +954,7 @@
                 </div>
             </div>
             {% else %}
-            <a href="{{ url_for('auth.login', next=request.path) }}" class="login-link">
-                <img src="{{ url_for('static', filename='huggingface.svg') }}" alt="Hugging Face">
-                Login
-            </a>
-            <!-- Login tip overlay -->
-            <div id="login-tip-overlay" class="login-tip-overlay">
-                <div class="login-tip-content">
-                    Log in to track your votes, see personalized leaderboards, and more!
-                </div>
-                <div class="login-tip-actions">
-                    <button class="login-tip-close" onclick="dismissLoginTip()">Don't show again</button>
-                    <a href="{{ url_for('auth.login', next=request.path) }}" class="login-now-btn">Login now</a>
-                </div>
-                <div class="login-tip-caret"></div>
-            </div>
+            <!-- Login removed -->
             {% endif %}
         </div>
     </div>
@@ -1170,18 +983,7 @@
     <!-- Toast container -->
     <div class="toast-container" id="toast-container"></div>
 
-    {% if not current_user.is_authenticated %}
-    <!-- Mobile login banner -->
-    <div id="login-banner" class="login-banner">
-        <div class="login-banner-content">
-            Log in to track your votes and see personalized leaderboards!
-        </div>
-        <div class="login-banner-actions">
-            <button class="login-banner-close" onclick="dismissLoginTip()">No thanks</button>
-            <a href="{{ url_for('auth.login', next=request.path) }}" class="login-banner-btn">Login</a>
-        </div>
-    </div>
-    {% endif %}
+    <!-- Mobile login banner removed -->
 
     {% block extra_scripts %}{% endblock %}
     <script src="https://unpkg.com/@popperjs/core@2"></script>
@@ -1201,155 +1003,10 @@
             userDropdown.classList.toggle('active');
         }
 
-        // Function to check if the login tip has been dismissed
-        function isLoginTipDismissed() {
-            try {
-                return localStorage.getItem('login_tip_dismissed') === 'true';
-            } catch (error) {
-                // Fallback if localStorage is blocked
-                console.warn('localStorage access failed:', error);
-                return false;
-            }
-        }
-
-        // Function to set localStorage when login tip is dismissed
-        function dismissLoginTip() {
-            try {
-                // Store the preference in localStorage
-                localStorage.setItem('login_tip_dismissed', 'true');
-                
-                // Hide all login notifications
-                const loginTip = document.getElementById('login-tip-overlay');
-                const loginBanner = document.getElementById('login-banner');
-                const backdrop = document.querySelector('.login-backdrop');
-                
-                if (loginTip) {
-                    loginTip.classList.remove('show');
-                }
-                
-                if (loginBanner) {
-                    loginBanner.style.display = 'none';
-                }
-                
-                if (backdrop) {
-                    backdrop.style.display = 'none';
-                }
-            } catch (error) {
-                console.warn('localStorage write failed:', error);
-                // Still hide the tips even if localStorage fails
-                const loginTip = document.getElementById('login-tip-overlay');
-                const loginBanner = document.getElementById('login-banner');
-                const backdrop = document.querySelector('.login-backdrop');
-                
-                if (loginTip) {
-                    loginTip.classList.remove('show');
-                }
-                
-                if (loginBanner) {
-                    loginBanner.style.display = 'none';
-                }
-                
-                if (backdrop) {
-                    backdrop.style.display = 'none';
-                }
-            }
-        }
+        // Login tip functions removed
 
         // Loading overlay functionality
         document.addEventListener('DOMContentLoaded', function () {
-            // Show login tip if user is not logged in and hasn't dismissed it
-            const loginTipOverlay = document.getElementById('login-tip-overlay');
-            const loginBanner = document.getElementById('login-banner');
-            const loginLink = document.querySelector('.login-link');
-            
-            if (loginLink && !isLoginTipDismissed()) {
-                // Check screen width to determine which login notification to show
-                if (window.innerWidth <= 768) {
-                    // Create and add a backdrop for the login banner
-                    const backdrop = document.createElement('div');
-                    backdrop.className = 'login-backdrop';
-                    backdrop.style.position = 'fixed';
-                    backdrop.style.top = '0';
-                    backdrop.style.left = '0';
-                    backdrop.style.width = '100%';
-                    backdrop.style.height = '100%';
-                    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-                    backdrop.style.zIndex = '9997';
-                    backdrop.style.display = 'none';
-                    document.body.appendChild(backdrop);
-                    
-                    // Show mobile banner with backdrop
-                    if (loginBanner) {
-                        loginBanner.style.display = 'block';
-                        backdrop.style.display = 'block';
-                        
-                        // Add event listener to close banner when clicking backdrop
-                        backdrop.addEventListener('click', function() {
-                            dismissLoginTip();
-                        });
-                    }
-                } else {
-                    // Show desktop popover
-                    if (loginTipOverlay) {
-                        // Position the overlay with Popper.js
-                        const popperInstance = Popper.createPopper(loginLink, loginTipOverlay, {
-                            placement: 'top',
-                            modifiers: [
-                                {
-                                    name: 'offset',
-                                    options: {
-                                        offset: [0, 10],
-                                    },
-                                },
-                            ],
-                        });
-                        
-                        loginTipOverlay.classList.add('show');
-                        popperInstance.update();
-                    }
-                }
-            }
-            
-            // Handle resize events to switch between banner and popover
-            window.addEventListener('resize', function() {
-                if (isLoginTipDismissed()) return;
-                
-                const backdrop = document.querySelector('.login-backdrop');
-                
-                if (window.innerWidth <= 768) {
-                    // Switch to mobile banner
-                    if (loginTipOverlay) {
-                        loginTipOverlay.classList.remove('show');
-                    }
-                    if (loginBanner && backdrop) {
-                        loginBanner.style.display = 'block';
-                        backdrop.style.display = 'block';
-                    }
-                } else {
-                    // Switch to desktop popover
-                    if (loginBanner && backdrop) {
-                        loginBanner.style.display = 'none';
-                        backdrop.style.display = 'none';
-                    }
-                    if (loginTipOverlay && loginLink) {
-                        const popperInstance = Popper.createPopper(loginLink, loginTipOverlay, {
-                            placement: 'top',
-                            modifiers: [
-                                {
-                                    name: 'offset',
-                                    options: {
-                                        offset: [0, 10],
-                                    },
-                                },
-                            ],
-                        });
-                        
-                        loginTipOverlay.classList.add('show');
-                        popperInstance.update();
-                    }
-                }
-            });
-            
             // Hide the loading overlay when page has loaded
             const loadingOverlay = document.getElementById('loading-overlay');
             loadingOverlay.classList.remove('active');

templates/leaderboard.html

@@ -234,45 +234,7 @@
         background-color: var(--primary-color);
     }
     
-    .login-prompt {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.7);
-        z-index: 9999;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .login-prompt-content {
-        background-color: var(--light-gray);
-        padding: 24px;
-        border-radius: var(--radius);
-        box-shadow: var(--shadow);
-        text-align: center;
-        max-width: 400px;
-        position: relative;
-    }
-    
-    .login-prompt-content h3 {
-        margin-bottom: 16px;
-    }
-    
-    .login-prompt-content p {
-        margin-bottom: 24px;
-    }
-    
-    .login-prompt-close {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        font-size: 20px;
-        cursor: pointer;
-        color: #999;
-    }
+    /* Login prompt removed */
     
     .btn {
         display: inline-block;
@@ -695,13 +657,7 @@
         background-color: var(--light-gray);
     }
 
-    .login-prompt {
-        text-align: center;
-        padding: 24px;
-        background-color: var(--light-gray);
-        border-radius: var(--radius);
-        margin-top: 16px;
-    }
+    /* Login prompt CSS removed */
 
     .no-voters-msg {
         text-align: center;
@@ -1375,14 +1331,7 @@
     </div>
 </div>
 
-<div class="login-prompt">
-    <div class="login-prompt-content">
-        <div class="login-prompt-close">&times;</div>
-        <h3>Login Required</h3>
-        <p>You need to be logged in to view your personal leaderboard.</p>
-        <a href="{{ url_for('auth.login', next=request.path) }}" class="btn">Login with Hugging Face</a>
-    </div>
-</div>
+<!-- Login prompt removed -->
 
 <!-- Pass auth status via data attribute -->
 <div id="auth-data" data-is-logged-in="{% if current_user.is_authenticated %}true{% else %}false{% endif %}"></div>
@@ -1465,21 +1414,13 @@
         
         // View toggle functionality
         const viewToggles = document.querySelectorAll('.segmented-control input[type="radio"]');
-        const loginPrompt = document.querySelector('.login-prompt');
-        const loginPromptClose = document.querySelector('.login-prompt-close');
-        
+
         viewToggles.forEach(toggle => {
             toggle.addEventListener('change', function() {
                 const view = this.id.split('-')[1]; // 'public', 'personal', or 'historical'
                 const tabId = this.closest('.tab-content').id.split('-')[0]; // 'tts' or 'conversational'
-                
-                if (view === 'personal' && !isLoggedIn) {
-                    // Show login prompt
-                    loginPrompt.style.display = 'flex';
-                    // Reset the radio button to public
-                    document.getElementById(`${tabId}-public`).checked = true;
-                    return;
-                }
+
+                // Personal view login check removed
                 
                 // Position the slider using our function
                 positionSliders();
@@ -1503,14 +1444,7 @@
                 */
             });
         });
-        
-        // Close login prompt
-        if (loginPromptClose) {
-            loginPromptClose.addEventListener('click', function() {
-                loginPrompt.style.display = 'none';
-            });
-        }
-        
+
         // Historical data functionality - temporarily disabled
         /* 
         function setupHistoricalView(modelType) {