Note2Link / Notion Accelerator Sync - Fast Access & Quick Sync for Notion

// ==UserScript==
// @name         Notion Accelerator Sync - Fast Access & Quick Sync for Notion
// @name:zh-CN   Notion加速器同步 - Notion快速访问和快速同步工具
// @name:zh-TW   Notion加速器同步 - Notion快速存取和快速同步工具
// @name:ar      مسرع ومزامن Notion - وصول سريع ومزامنة سريعة لـ Notion
// @name:ru      Notion Ускоритель Синхронизации - Быстрый доступ и синхронизация для Notion
// @name:fa      شتاب‌دهنده و همگام‌ساز Notion - دسترسی سریع و همگام‌سازی سریع برای Notion
// @name:tr      Notion Hızlandırıcı Senkronizasyon - Notion için Hızlı Erişim ve Hızlı Senkronizasyon
// @name:vi      Notion Accelerator Sync - Truy cập nhanh và đồng bộ nhanh cho Notion
// @namespace    http://note2link.com/
// @version      5.0.1
// @author       Note2Link
// @match        https://www.notion.so/*
// @match        https://notion.so/*
// @match        https://www.notion.com/*
// @match        https://notion.com/*
// @match        https://*.notion.so/*
// @match        https://*.notion.com/*
// @supportURL   https://note2link.com/en-US/notion-accelerator
// @icon         https://www.notion.so/images/favicon.ico
// @grant        none
// @license      MIT
// @compatible   Chrome
// @compatible   Firefox
// @compatible   Safari
// @compatible   Edge
// @compatible   Opera
// ==/UserScript==

(function () {
    'use strict';

    // Multi-language support
    const translations = {
        'en-US': {
            title: 'Fast Access & Quick Sync for Notion',
            subtitle: 'Professional Notion Accelerator & Sync Service',
            description: 'Experience lightning-fast access, instant sync, and enhanced performance for your Notion workspace.',
            features: ['⚡ Lightning Fast Access', '🔄 Instant Quick Sync', '🚀 Accelerated Performance', '🔒 Secure Connection'],
            cta: 'Try Free Now',
            powered: 'Powered by Note2Link'
        },
        'zh-CN': {
            title: 'Notion快速访问和快速同步',
            subtitle: '专业的Notion加速器和同步服务',
            description: '体验闪电般的快速访问、即时同步和增强的Notion工作区性能。',
            features: ['⚡ 闪电般快速访问', '🔄 即时快速同步', '🚀 加速性能', '🔒 安全连接'],
            cta: '立即免费试用',
            powered: '由 Note2Link 提供支持'
        },
        'zh-TW': {
            title: 'Notion快速存取和快速同步',
            subtitle: '專業的Notion加速器和同步服務',
            description: '體驗閃電般的快速存取、即時同步和增強的Notion工作區效能。',
            features: ['⚡ 閃電般快速存取', '🔄 即時快速同步', '🚀 加速效能', '🔒 安全連線'],
            cta: '立即免費試用',
            powered: '由 Note2Link 提供支援'
        },
        'ar': {
            title: 'وصول سريع ومزامنة سريعة لـ Notion',
            subtitle: 'خدمة مسرع ومزامن Notion المهنية',
            description: 'استمتع بوصول سريع كالبرق ومزامنة فورية وأداء محسن لمساحة عمل Notion الخاصة بك.',
            features: ['⚡ وصول سريع كالبرق', '🔄 مزامنة سريعة فورية', '🚀 أداء مسرع', '🔒 اتصال آمن'],
            cta: 'جرب مجاناً الآن',
            powered: 'مدعوم من Note2Link'
        },
        'ru': {
            title: 'Быстрый доступ и быстрая синхронизация для Notion',
            subtitle: 'Профессиональный ускоритель и сервис синхронизации Notion',
            description: 'Испытайте молниеносный доступ, мгновенную синхронизацию и улучшенную производительность вашего рабочего пространства Notion.',
            features: ['⚡ Молниеносный быстрый доступ', '🔄 Мгновенная быстрая синхронизация', '🚀 Ускоренная производительность', '🔒 Безопасное соединение'],
            cta: 'Попробовать бесплатно',
            powered: 'При поддержке Note2Link'
        },
        'fa': {
            title: 'دسترسی سریع و همگام‌سازی سریع برای Notion',
            subtitle: 'سرویس حرفه‌ای شتاب‌دهنده و همگام‌ساز Notion',
            description: 'دسترسی فوق‌العاده سریع، همگام‌سازی آنی و عملکرد بهبود یافته برای فضای کاری Notion خود تجربه کنید.',
            features: ['⚡ دسترسی فوق‌العاده سریع', '🔄 همگام‌سازی سریع آنی', '🚀 عملکرد شتاب‌یافته', '🔒 اتصال امن'],
            cta: 'همین حالا رایگان امتحان کنید',
            powered: 'قدرت گرفته از Note2Link'
        },
        'tr': {
            title: 'Notion için Hızlı Erişim ve Hızlı Senkronizasyon',
            subtitle: 'Profesyonel Notion Hızlandırıcı ve Senkronizasyon Servisi',
            description: 'Notion çalışma alanınız için şimşek hızında erişim, anında senkronizasyon ve gelişmiş performans deneyimi yaşayın.',
            features: ['⚡ Şimşek Hızında Erişim', '🔄 Anında Hızlı Senkronizasyon', '🚀 Hızlandırılmış Performans', '🔒 Güvenli Bağlantı'],
            cta: 'Şimdi Ücretsiz Deneyin',
            powered: 'Note2Link tarafından desteklenmektedir'
        },
        'vi': {
            title: 'Truy cập nhanh và đồng bộ nhanh cho Notion',
            subtitle: 'Dịch vụ tăng tốc và đồng bộ Notion chuyên nghiệp',
            description: 'Trải nghiệm truy cập nhanh như chớp, đồng bộ tức thì và hiệu suất được cải thiện cho không gian làm việc Notion của bạn.',
            features: ['⚡ Truy cập nhanh như chớp', '🔄 Đồng bộ nhanh tức thì', '🚀 Hiệu suất được tăng tốc', '🔒 Kết nối an toàn'],
            cta: 'Dùng thử miễn phí ngay',
            powered: 'Được hỗ trợ bởi Note2Link'
        }
    };

    // Detect user language and get corresponding URL
    function detectLanguage() {
        const lang = navigator.language || navigator.userLanguage || 'en-US';
        if (translations[lang]) return lang;

        // Fallback to language without region
        const baseLang = lang.split('-')[0];
        const supportedLangs = Object.keys(translations);
        for (let supportedLang of supportedLangs) {
            if (supportedLang.startsWith(baseLang)) {
                return supportedLang;
            }
        }

        return 'en-US'; // Default fallback
    }

    function getProductUrl(lang) {
        return `https://note2link.com/${lang}/notion-accelerator`;
    }

    const currentLang = detectLanguage();
    const t = translations[currentLang];
    const productUrl = getProductUrl(currentLang);

    // Create promotion banner with Notion-themed design
    function createPromoBanner() {
        const banner = document.createElement('div');
        banner.id = 'notion-accelerator-banner';
        banner.innerHTML = `
            <div style="
                position: fixed;
                top: 50px;
                right: 20px;
                width: 340px;
                background: rgba(25, 25, 25, 0.85);
                color: rgba(255, 255, 255, 0.95);
                padding: 24px;
                border-radius: 16px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
                z-index: 10000;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
                backdrop-filter: blur(20px) saturate(180%);
                -webkit-backdrop-filter: blur(20px) saturate(180%);
                border: 1px solid rgba(255, 255, 255, 0.12);
                animation: slideInGlass 0.6s cubic-bezier(0.16, 1, 0.3, 1);
                overflow: hidden;
            ">
                <div style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                "></div>
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
                    <h3 style="
                        margin: 0; 
                        font-size: 17px; 
                        font-weight: 600; 
                        color: rgba(255, 255, 255, 0.95);
                        line-height: 1.3;
                        letter-spacing: -0.01em;
                    ">${t.title}</h3>
                    <button onclick="this.parentElement.parentElement.parentElement.remove()" style="
                        background: rgba(255, 255, 255, 0.08);
                        border: none;
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 16px;
                        cursor: pointer;
                        padding: 0;
                        width: 28px;
                        height: 28px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                        backdrop-filter: blur(10px);
                        border: 1px solid rgba(255, 255, 255, 0.1);
                    " onmouseover="
                        this.style.background='rgba(255, 255, 255, 0.15)'; 
                        this.style.color='rgba(255, 255, 255, 0.9)';
                        this.style.transform='scale(1.05)';
                    " onmouseout="
                        this.style.background='rgba(255, 255, 255, 0.08)'; 
                        this.style.color='rgba(255, 255, 255, 0.7)';
                        this.style.transform='scale(1)';
                    ">×</button>
                </div>
                <p style="
                    margin: 0 0 12px 0; 
                    font-size: 13px; 
                    color: rgba(255, 255, 255, 0.75); 
                    font-weight: 500;
                    letter-spacing: -0.005em;
                ">${t.subtitle}</p>
                <p style="
                    margin: 0 0 18px 0; 
                    font-size: 12px; 
                    color: rgba(255, 255, 255, 0.65); 
                    line-height: 1.5;
                    letter-spacing: -0.003em;
                ">${t.description}</p>
                <div style="margin-bottom: 20px;">
                    ${t.features.map(feature => `
                        <div style="
                            font-size: 11px; 
                            margin: 6px 0; 
                            color: rgba(255, 255, 255, 0.8);
                            padding: 4px 0;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                        ">${feature}</div>
                    `).join('')}
                </div>
                <a href="${productUrl}" target="_blank" style="
                    display: inline-block;
                    background: rgba(37, 37, 37, 0.8);
                    color: rgba(255, 255, 255, 0.95);
                    text-decoration: none;
                    padding: 12px 20px;
                    border-radius: 10px;
                    font-weight: 600;
                    font-size: 13px;
                    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    width: 100%;
                    text-align: center;
                    box-sizing: border-box;
                    backdrop-filter: blur(10px);
                    letter-spacing: -0.005em;
                    position: relative;
                    overflow: hidden;
                " onmouseover="
                    this.style.background='rgba(55, 55, 55, 0.9)'; 
                    this.style.transform='translateY(-2px)';
                    this.style.boxShadow='0 8px 25px rgba(0, 0, 0, 0.3)';
                    this.style.borderColor='rgba(255, 255, 255, 0.25)';
                " onmouseout="
                    this.style.background='rgba(37, 37, 37, 0.8)'; 
                    this.style.transform='translateY(0)';
                    this.style.boxShadow='none';
                    this.style.borderColor='rgba(255, 255, 255, 0.15)';
                ">${t.cta}</a>
                <div style="
                    text-align: center; 
                    margin-top: 16px; 
                    font-size: 10px; 
                    color: rgba(255, 255, 255, 0.5);
                    letter-spacing: 0.02em;
                ">${t.powered}</div>
            </div>
        `;

        // Add CSS animations with iOS 16 glass effect
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideInGlass {
                from {
                    transform: translateX(100%) scale(0.9);
                    opacity: 0;
                    backdrop-filter: blur(0px);
                }
                to {
                    transform: translateX(0) scale(1);
                    opacity: 1;
                    backdrop-filter: blur(20px) saturate(180%);
                }
            }
            
            @keyframes slideOutGlass {
                from {
                    transform: translateX(0) scale(1);
                    opacity: 1;
                    backdrop-filter: blur(20px) saturate(180%);
                }
                to {
                    transform: translateX(100%) scale(0.9);
                    opacity: 0;
                    backdrop-filter: blur(0px);
                }
            }
        `;
        document.head.appendChild(style);

        return banner;
    }

    // Show banner after page loads
    function showBanner() {
        // Check if banner already exists
        if (document.getElementById('notion-accelerator-banner')) return;

        // Wait for page to be ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', showBanner);
            return;
        }

        // Create and show banner
        const banner = createPromoBanner();
        document.body.appendChild(banner);

        // Auto-hide after 15 seconds
        setTimeout(() => {
            const existingBanner = document.getElementById('notion-accelerator-banner');
            if (existingBanner) {
                existingBanner.style.animation = 'slideOutGlass 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards';
                setTimeout(() => existingBanner.remove(), 600);
            }
        }, 15000);
    }

    // Initialize
    showBanner();

    // Set up periodic banner display (every 5 minutes)
    setInterval(() => {
        showBanner();
    }, 5 * 60 * 1000); // 5 minutes = 5 * 60 * 1000 milliseconds

    // Re-show banner on navigation (for SPA behavior)
    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            setTimeout(showBanner, 2000); // Delay to ensure page is loaded
        }
    }).observe(document, { subtree: true, childList: true });

})();