iTi-Flask/iti/templates/errors/header.html

<div class="header">
    <div class="logo">
        <span class="logo-mark">iTi</span>
    </div>
    <div class="header-controls">
        <!-- <div class="language-selector" id="languageSelector">
            <button class="language-btn" data-lang="zh">中文</button>
            <div class="language-dropdown" id="languageDropdown">
                <button class="language-option" data-lang="zh">中文</button>
                <button class="language-option" data-lang="en">English</button>
            </div>
        </div> -->
        <button class="theme-toggle" id="themeToggle">
            <i class="fa fa-moon-o"></i>
        </button>
    </div>
</div>

<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: all var(--transition-speed);
    }
    
    [data-theme="dark"] .header {
        background-color: rgba(17, 24, 39, 0.8);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .logo {
        display: flex;
        align-items: center;
    }
    
    .logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0 0.65rem;
        border-radius: 0.5rem;
        background: var(--primary-color);
        color: var(--background-color);
        font-weight: 700;
        letter-spacing: 0;
    }
    
    .header-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .language-selector {
        position: relative;
    }
    
    .language-btn {
        background: none;
        border: none;
        color: var(--text-color);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.5rem 0.8rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    .language-btn:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    [data-theme="dark"] .language-btn:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .language-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5rem;
        background-color: var(--background-color);
        border-radius: 0.375rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0;
        min-width: 100px;
        z-index: 1001;
        display: none;
    }
    
    .language-dropdown.active {
        display: block;
    }
    
    .language-option {
        width: 100%;
        background: none;
        border: none;
        color: var(--text-color);
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        text-align: left;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .language-option:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    [data-theme="dark"] .language-option:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .theme-toggle {
        background: none;
        border: none;
        color: var(--text-color);
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .theme-toggle:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    [data-theme="dark"] .theme-toggle:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .theme-toggle i {
        font-size: 1.2rem;
    }
    
    @media (max-width: 768px) {
        .header {
            padding: 1rem;
        }
    }
</style>

<script>
    // 语言选择器功能（已禁用）
    /*
    const languageSelector = document.getElementById('languageSelector');
    const languageBtn = languageSelector.querySelector('.language-btn');
    const languageDropdown = document.getElementById('languageDropdown');
    const languageOptions = languageSelector.querySelectorAll('.language-option');
    
    // 切换语言下拉菜单
    languageBtn.addEventListener('click', () => {
        languageDropdown.classList.toggle('active');
    });
    
    // 点击其他地方关闭下拉菜单
    document.addEventListener('click', (e) => {
        if (!languageSelector.contains(e.target)) {
            languageDropdown.classList.remove('active');
        }
    });
    
    // 语言切换功能
    languageOptions.forEach(option => {
        option.addEventListener('click', () => {
            const lang = option.getAttribute('data-lang');
            changeLanguage(lang);
            languageDropdown.classList.remove('active');
        });
    });
    */
    
    // 主题切换功能
    const themeToggle = document.getElementById('themeToggle');
    const themeIcon = themeToggle.querySelector('i');
    
    // 检查系统主题偏好
    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    
    // 从本地存储获取用户主题偏好，默认为系统主题
    const savedTheme = localStorage.getItem('theme') || systemTheme;
    
    // 设置初始主题
    document.documentElement.setAttribute('data-theme', savedTheme);
    updateThemeIcon(savedTheme);
    
    // 主题切换事件
    themeToggle.addEventListener('click', () => {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        updateThemeIcon(newTheme);
    });
    
    // 更新主题图标
    function updateThemeIcon(theme) {
        if (theme === 'dark') {
            themeIcon.classList.remove('fa-moon-o');
            themeIcon.classList.add('fa-sun-o');
        } else {
            themeIcon.classList.remove('fa-sun-o');
            themeIcon.classList.add('fa-moon-o');
        }
    }
    
    // 语言切换函数（已禁用）
    /*
    function changeLanguage(lang) {
        // 保存用户语言偏好
        localStorage.setItem('language', lang);
        
        // 更新语言按钮显示
        languageBtn.innerHTML = lang === 'zh' ? '中文 <i class="fa fa-chevron-down"></i>' : 'English <i class="fa fa-chevron-down"></i>';
        
        // 触发语言更新事件
        const event = new CustomEvent('languageChanged', { detail: { lang: lang } });
        document.dispatchEvent(event);
    }
    
    // 初始化语言
    function initLanguage() {
        const savedLang = localStorage.getItem('language') || 'zh';
        changeLanguage(savedLang);
    }
    
    // 页面加载完成后初始化语言
    document.addEventListener('DOMContentLoaded', initLanguage);
    */
</script>