// Login dropdown - creates a custom login button with region selector (function() { 'use strict'; const REGIONS = [ { key: 'us', label: 'US', flag: '🇺🇸', url: 'https://app.superblocks.com' }, { key: 'eu', label: 'EU', flag: '🇪🇺', url: 'https://eu.superblocks.com' } ]; // External link arrow SVG const EXTERNAL_ICON = ``; function init() { // Already added? if (document.querySelector('.login-dropdown-container')) return; // Find the Website link and its parent container const websiteLink = document.querySelector('a[href="https://superblocks.com"]') || document.querySelector('a[href*="superblocks.com"]:not([href*="app."]):not([href*="eu."]):not([href*="docs."])'); const parentContainer = websiteLink?.closest('li') || websiteLink?.parentElement; const navList = parentContainer?.parentElement; if (!websiteLink || !navList) return; // Create list item wrapper to match structure const listItem = document.createElement('li'); listItem.style.cssText = 'list-style: none; display: flex; align-items: center;'; listItem.className = 'login-dropdown-container'; // Create the Login button const button = document.createElement('button'); button.className = 'login-dropdown-button'; button.innerHTML = `Login `; button.style.cssText = ` background: #0099FF; color: white; border: none; border-radius: 16px; padding: 6px 16px; font-size: 14px; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; font-family: inherit; white-space: nowrap; transition: background 0.2s; `; // Create dropdown menu (append to body to avoid clipping) const menu = document.createElement('div'); menu.className = 'login-dropdown-menu'; menu.style.cssText = ` position: fixed; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); z-index: 99999; display: none; overflow: hidden; `; // Add region options REGIONS.forEach((region, idx) => { const link = document.createElement('a'); link.href = region.url; link.target = '_blank'; link.rel = 'noopener noreferrer'; link.innerHTML = `${region.flag} ${region.label} ${EXTERNAL_ICON}`; link.style.cssText = ` display: flex !important; align-items: center !important; padding: 10px 14px !important; color: #1f2937 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 400 !important; background: white !important; transition: background 0.15s !important; border: none !important; border-bottom: none !important; border-top: none !important; border-left: none !important; border-right: none !important; outline: none !important; box-shadow: none !important; `; link.onmouseenter = () => link.style.setProperty('background', isDark() ? '#374151' : '#f3f4f6', 'important'); link.onmouseleave = () => link.style.setProperty('background', isDark() ? '#1f2937' : 'white', 'important'); menu.appendChild(link); }); listItem.appendChild(button); document.body.appendChild(menu); // Insert after Website link if (parentContainer.nextSibling) { navList.insertBefore(listItem, parentContainer.nextSibling); } else { navList.appendChild(listItem); } // Toggle dropdown let isOpen = false; button.onclick = (e) => { e.preventDefault(); e.stopPropagation(); isOpen = !isOpen; if (isOpen) { const rect = button.getBoundingClientRect(); menu.style.top = (rect.bottom + 8) + 'px'; menu.style.left = rect.left + 'px'; menu.style.right = 'auto'; } menu.style.display = isOpen ? 'block' : 'none'; }; // Close on outside click document.addEventListener('click', (e) => { if (!listItem.contains(e.target) && !menu.contains(e.target)) { isOpen = false; menu.style.display = 'none'; } }); // Hover effects button.onmouseenter = () => button.style.background = '#0088ee'; button.onmouseleave = () => button.style.background = '#0099FF'; // Dark mode helper function isDark() { return document.documentElement.classList.contains('dark') || document.documentElement.getAttribute('data-theme') === 'dark'; } // Dark mode support function updateDarkMode() { const dark = isDark(); menu.style.setProperty('background', dark ? '#1f2937' : 'white', 'important'); menu.style.setProperty('border-color', dark ? '#374151' : '#e5e7eb', 'important'); menu.querySelectorAll('a').forEach(a => { a.style.setProperty('color', dark ? '#f3f4f6' : '#1f2937', 'important'); a.style.setProperty('background', dark ? '#1f2937' : 'white', 'important'); a.style.setProperty('border', 'none', 'important'); }); } updateDarkMode(); new MutationObserver(updateDarkMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme'] }); } // Multiple init attempts [0, 100, 300, 500, 1000, 2000, 3000].forEach(d => setTimeout(init, d)); // Watch for SPA navigation new MutationObserver(() => { if (!document.querySelector('.login-dropdown-container')) init(); }).observe(document.body, { childList: true, subtree: true }); })();

Getting started

Building with Clark AI

Development lifecycle

Backend logic

Hosting