<%#
Spectra - A Modern Responsive LuCI Theme
A clean, responsive web interface for OpenWRT LuCI

luci-theme-spectra
Copyright 2024 Thaolga

Features:
- Modern responsive design
- Mobile-first approach  
- Enhanced user experience
- Customizable appearance

Based on:
- luci-theme-bootstrap (Apache License 2.0)
- luci-theme-argon (Apache License 2.0)
- Bootstrap & MUI design principles

For bug reports, feature requests and contributions:
https://github.com/Thaolga/openwrt-nekobox

Licensed under the Apache License, Version 2.0
-%>

<%+themes/spectra/out_header_login%>
<%
    local util = require "luci.util"
    local fs = require "nixio.fs"
    local nutil = require "nixio.util"
    local sys = require "luci.sys"

    -- Fetch Local Background Media
    local function glob(...)
        local iter, code, msg = fs.glob(...)
        if iter then
            return nutil.consume(iter)
        else
            return nil, code, msg
        end
    end

    local imageTypes = " jpg jpeg png gif webp "
    local videoTypes = " mp4 webm mkv "
    local audioTypes = " mp3 wav ogg flac m4a "
    local allTypes = imageTypes .. videoTypes .. audioTypes
    local function fetchMedia(path, themeDir)
        local backgroundTable = {}
        local backgroundCount = 0
        for i, f in ipairs(glob(path)) do
            attr = fs.stat(f)
            if attr then
                local ext = fs.basename(f):match(".+%.(%w+)$")
                if ext ~= nil then
                    ext = ext:lower()
                end
                if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
                    local bg = {}
                    bg.type = ext
                    bg.url = themeDir .. fs.basename(f)
                    table.insert(backgroundTable, bg)
                    backgroundCount = backgroundCount + 1
                end
            end
        end
        return backgroundTable, backgroundCount
    end

    local function selectBackground(themeDir)
        local bgUrl = media .. "/img/bg1.jpg"
        local backgroundType = "Image"
        local mimeType = ""
        local audioUrl = ""
        local audioMimeType = ""

        local mediaTable, mediaCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
        
        if mediaCount > 0 then
            local videoFiles = {}
            local audioFiles = {}
            local imageFiles = {}
            
            for _, mediaFile in ipairs(mediaTable) do
                if string.match(videoTypes, " "..mediaFile.type.." ") ~= nil then
                    table.insert(videoFiles, mediaFile)
                elseif string.match(audioTypes, " "..mediaFile.type.." ") ~= nil then
                    table.insert(audioFiles, mediaFile)
                elseif string.match(imageTypes, " "..mediaFile.type.." ") ~= nil then
                    table.insert(imageFiles, mediaFile)
                end
            end
            
            if #videoFiles > 0 then
                local selectedVideo = videoFiles[math.random(1, #videoFiles)]
                bgUrl = selectedVideo.url
                backgroundType = "Video"
                mimeType = "video/" .. selectedVideo.type
                
                if #audioFiles > 0 then
                    local selectedAudio = audioFiles[math.random(1, #audioFiles)]
                    audioUrl = selectedAudio.url
                    audioMimeType = "audio/" .. selectedAudio.type
                end

            elseif #imageFiles > 0 then
                local selectedImage = imageFiles[math.random(1, #imageFiles)]
                bgUrl = selectedImage.url
                backgroundType = "Image"
                
                if #audioFiles > 0 then
                    local selectedAudio = audioFiles[math.random(1, #audioFiles)]
                    audioUrl = selectedAudio.url
                    audioMimeType = "audio/" .. selectedAudio.type
                end
            end
        end

        return bgUrl, backgroundType, mimeType, audioUrl, audioMimeType
    end

    local boardinfo = util.ubus("system", "board")
    local themeDir = "/spectra/stream/"
    local bgUrl, backgroundType, mimeType, audioUrl, audioMimeType = selectBackground(themeDir)
%>

<style>
.login-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.dynamic-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.background-media {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    filter: brightness(0.9);
}

.background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.auth-wrapper {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: min(100%, 520px);
    margin: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.footer-info p {
    color: #4f46e5 !important;
}

.footer-info a {
    color: inherit;
    transition: color 0.3s ease;
}

.footer-info a:hover {
    color: #ff69b4;
}

.input-field {
    flex-grow: 1;
}

.input-field input {
    width: 100%;
    padding: 10px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(240, 240, 240, 0.7);
    backdrop-filter: blur(5px);
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.input-field input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.input-field input::placeholder {
    color: #666666;
    opacity: 1;
}

.input-field input[type="password"] {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.submit-btn {
    width: 100%;
    padding: 14px;
    background: #4f46e5;
    color: white !important;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.submit-btn:hover {
    background: #4338ca;
}

.login-alert-message {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 900;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid #fca5a5;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.media-control {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1000;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.media-control i {
    font-size: 1.5rem;
    color: #666;
    transition: all 0.3s ease;
}

.media-control:hover {
    transform: scale(1.1);
}

.media-control.muted i {
    color: #ff4444;
}

.media-control.unmuted i {
    color: #4CAF50;
}

.password-options {
    margin: 0 0 0.3rem 0;
    text-align: left;
}

.password-options label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4a5568;
    user-select: none;
    line-height: 1.5;
    transition: color 0.2s ease;
    font-weight: 500;
}

.password-options input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    left: 5px;
    flex-shrink: 0;
}

.password-options input[type="checkbox"]:checked {
    border: 1px solid rgba(79, 70, 229, 0.8);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 8 8'%3e%3cpath fill='%23fff'd='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e) !important;
    background-color: #4f46e5;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #4f46e5;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3);
}

.password-options input[type="checkbox"]:hover {
    border-color: #4f46e5;
}

.password-options input[type="checkbox"]:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2), 0 2px 10px rgba(79, 70, 229, 0.2);
    outline: none;
}

.password-options span {
    line-height: 1.5;
    position: relative;
    top: 7px;
    transition: color 0.2s ease;
}

.password-options label:hover span {
    color: #4f46e5;
}

.password-options input[type="checkbox"]:disabled {
    background-color: #f7fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.password-options input[type="checkbox"]:disabled + span {
    color: #a0aec0;
    cursor: not-allowed;
}

.brand-text {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    font-size: 50px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: transparent;
    background: linear-gradient(135deg, #3498db 0%, #9b59b6 25%, #3498db 50%, #9b59b6 75%, #3498db 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform-style: preserve-3d;
    position: relative;
}

.brand-text:hover {
    background-position: 200% center;
    transform: rotateX(5deg) rotateY(-5deg) skew(-5deg);
    text-shadow: 
        0 4px 8px rgba(79, 70, 229, 0.3),
        0 8px 16px rgba(79, 70, 229, 0.2);
}

.password-icon {
    font-size: 1.2rem;
    color: #666;
    transition: all 0.3s ease;
    z-index: 10;
}

.password-icon:hover {
    color: #4f46e5;
    transform: translateY(-50%) scale(1.1);
}

.password-icon.showing {
    color: #4f46e5;
    text-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

.password-icon.showing:hover {
    color: #4338ca;
    text-shadow: 0 0 10px rgba(79, 70, 229, 0.6);
}

@media (max-width: 576px) {
    .login-root {
        padding: 10px;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .brand-text {
        font-size: 40px;
    }

    .auth-wrapper {
        width: 95%;
        margin: 0 auto; 
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .dynamic-background video {
        display: none;
    }

    .background-media[style*="background-image"] {
        filter: brightness(0.4);
    }

    @supports (-webkit-touch-callout: none) {
        .login-root {
            height: -webkit-fill-available;
        }
    }
}
</style>
<link href="/luci-static/spectra/css/bootstrap-icons.css" rel="stylesheet">

<div class="login-root">
    <div class="dynamic-background">
        <% if ( backgroundType == "Video" ) then %>
            <video class="background-media" autoplay loop muted playsinline id="background-video">
                <source src="<%=bgUrl%>" type="<%=mimeType%>">
            </video>
            <audio id="background-audio" style="display: none;"></audio>
        
        <% else %>
            <div class="background-media" style="background-image: url(<%=bgUrl%>)"></div>
            
            <% if ( audioUrl ~= "" ) then %>
            <audio class="background-audio" autoplay loop muted id="background-audio">
                <source src="<%=audioUrl%>" type="<%=audioMimeType%>">
                Your browser does not support audio playback.
            </audio>
            <% else %>
            <audio class="background-audio" autoplay loop muted id="background-audio" style="display: none;">
                <source src="" type="audio/mp3">
                Your browser does not support audio playback.
            </audio>
            <% end %>
        <% end %>
        <div class="background-overlay"></div>
    </div>
    
    <div class="media-control muted" id="mediaControl">
        <i class="bi bi-volume-mute"></i>
    </div>

    <div class="auth-wrapper">
        <div class="brand-section" style="text-align: center; margin-bottom: 0.5rem;">
            <a class="brand-logo" href="/" style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #2c3e50;">
                <img src="/luci-static/spectra/img/spectra.svg" style="height: 120px; margin-bottom: 3px;">
                <span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
            </a>
        </div>
        <% if fuser then %>
        <div class="login-alert-message">
            <%:Invalid username and/or password! Please try again.%>
        </div>
        <% end %>

        <form class="auth-form" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
            <div class="form-group" style="margin-bottom: 1rem;">
                <div class="input-field">
                    <input type="text" 
                           id="authUsername" 
                           name="luci_username" 
                           value="<%=duser%>" 
                           placeholder="<%:Username%>"
                           onfocus="this.style.borderColor='#4f46e5'; this.style.boxShadow='0 0 0 3px rgba(79,70,229,0.1)'"
                           onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'">
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 0.3rem;">
                <div class="input-field" style="position: relative;">
                    <input type="password" 
                           id="authPassword" 
                           name="luci_password" 
                           placeholder="<%:Password%>"
                           onfocus="this.style.borderColor='#4f46e5'; this.style.boxShadow='0 0 0 3px rgba(79,70,229,0.1)'"
                           onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'">
                    <i class="bi bi-eye-slash toggle-password password-icon" 
                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer;">
                    </i>
                </div>
            </div>

            <div class="password-options">
                <label>
                    <input type="checkbox" id="passwordOptions">
                    <span id="passwordOptionsText"></span>
                </label>
            </div>

            <button type="submit" 
                    class="submit-btn">
                <%:Login%>
            </button>
        </form>

        <div class="footer-info" style="margin-top: 2rem; text-align: center;">
            <p>
                Powered by <a href="https://github.com/openwrt/luci" target="_blank">OpenWRT LuCI</a> | 
                <a href="https://github.com/Thaolga/openwrt-nekobox" target="_blank">Spectra Theme</a>
            </p>
        </div>
        
        <script type="text/javascript">//<![CDATA[
            document.getElementById('authPassword').focus();
        //]]></script>
        
        <%+themes/spectra/footer_login%>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const style = document.createElement('style');
    style.textContent = `
        #background-video {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            object-fit: cover !important;
            z-index: 0 !important;
            transform: translateZ(0);
            backface-visibility: hidden;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            filter: brightness(0.9) !important;
        }

        @media (max-width: 768px) {
            #background-video {
                object-fit: cover !important;
                -webkit-object-fit: cover !important;
                min-width: 100% !important;
                min-height: 100% !important;
                max-width: 100% !important;
                max-height: 100% !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .video-mode-control {
                display: none !important;
            }
        }
        
        .video-mode-control {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 9999;
            background: rgba(28, 28, 28, 0.75);
            backdrop-filter: blur(16px) saturate(120%);
            -webkit-backdrop-filter: blur(16px) saturate(120%);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 500;
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition:
                background 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.15s ease;
        }

        .video-mode-control:hover {
            background: rgba(40, 40, 40, 0.85);
            box-shadow:
                0 6px 20px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .video-mode-control:active {
            transform: scale(0.96);
        }

        .video-mode-indicator {
            font-size: 15px;
            opacity: 0.9;
            line-height: 1;
            display: flex;
            align-items: center;
        }

        .video-mode-text {
            letter-spacing: 0.3px;
        }
    `;
    document.head.appendChild(style);

    const backgroundType = '<%=backgroundType%>';
    const mediaControl = document.getElementById("mediaControl");
    const mediaIcon = mediaControl.querySelector("i");
    
    const loginHeader = document.querySelector(".login-form-header");
    const loginBackground = document.querySelector(".login-form-background");
    
    let currentMedia = null;
    let isMuted = false;
    let mediaStarted = false;
    let currentVideoMode = localStorage.getItem('video_display_mode') || 'fit_cover';
    let videoModeCycle = 0;

    const translationsIP = {
        zh: { 
            login: '登录', 
            password: '密码', 
            remember: '保持登录',
            fit_cover: '默认裁剪',
            fit_contain: '正常比例',
            fit_fill: '拉伸填充',
            fit_none: '原始尺寸',
            fit_scale_down: '智能适应',
            mode_changed: '视频模式已切换'
        },
        en: { 
            login: 'Login', 
            password: 'Password', 
            remember: 'Keep logged in',
            fit_cover: 'Default Crop',
            fit_contain: 'Normal Ratio',
            fit_fill: 'Stretch Fill',
            fit_none: 'Original Size',
            fit_scale_down: 'Smart Fit',
            mode_changed: 'Video mode changed'
        },
        hk: { 
            login: '登入', 
            password: '密碼', 
            remember: '保持登入',
            fit_cover: '默認裁剪',
            fit_contain: '正常比例',
            fit_fill: '拉伸填充',
            fit_none: '原始尺寸',
            fit_scale_down: '智能適應',
            mode_changed: '影片模式已切換'
        },
        de: { 
            login: 'Anmelden', 
            password: 'Passwort', 
            remember: 'Angemeldet bleiben',
            fit_cover: 'Standard Zuschneiden',
            fit_contain: 'Normales Verhältnis',
            fit_fill: 'Dehnen Füllen',
            fit_none: 'Originalgröße',
            fit_scale_down: 'Intelligente Anpassung',
            mode_changed: 'Video-Modus geändert'
        },
        fr: { 
            login: 'Connexion', 
            password: 'Mot de passe', 
            remember: 'Rester connecté',
            fit_cover: 'Recadrage par défaut',
            fit_contain: 'Proportion normale',
            fit_fill: 'Remplissage étiré',
            fit_none: 'Taille originale',
            fit_scale_down: 'Ajustement intelligent',
            mode_changed: 'Mode vidéo modifié'
        },
        ko: { 
            login: '로그인', 
            password: '비밀번호', 
            remember: '로그인 유지',
            fit_cover: '기본 자르기',
            fit_contain: '정상 비율',
            fit_fill: '늘리기 채우기',
            fit_none: '원본 크기',
            fit_scale_down: '스마트 적합',
            mode_changed: '비디오 모드 변경됨'
        },
        ja: { 
            login: 'ログイン', 
            password: 'パスワード', 
            remember: 'ログイン状態を保持',
            fit_cover: 'デフォルトクロップ',
            fit_contain: '通常比率',
            fit_fill: '引き伸ばしフィル',
            fit_none: 'オリジナルサイズ',
            fit_scale_down: 'スマートフィット',
            mode_changed: 'ビデオモードが変更されました'
        },
        bn: { 
            login: 'লগইন', 
            password: 'পাসওয়ার্ড', 
            remember: 'লগ ইন থাকুন',
            fit_cover: 'ডিফল্ট ক্রপ',
            fit_contain: 'সাধারণ অনুপাত',
            fit_fill: 'প্রসারিত ভরাট',
            fit_none: 'আসল আকার',
            fit_scale_down: 'স্মার্ট ফিট',
            mode_changed: 'ভিডিও মোড পরিবর্তিত হয়েছে'
        },
        vi: { 
            login: 'Đăng nhập', 
            password: 'Mật khẩu', 
            remember: 'Giữ đăng nhập',
            fit_cover: 'Cắt mặc định',
            fit_contain: 'Tỷ lệ bình thường',
            fit_fill: 'Kéo dài đầy',
            fit_none: 'Kích thước gốc',
            fit_scale_down: 'Phù hợp thông minh',
            mode_changed: 'Chế độ video đã thay đổi'
        },
        th: { 
            login: 'เข้าสู่ระบบ', 
            password: 'รหัสผ่าน', 
            remember: 'คงสถานะเข้าสู่ระบบ',
            fit_cover: 'ครอปเริ่มต้น',
            fit_contain: 'อัตราส่วนปกติ',
            fit_fill: 'ยืดเต็ม',
            fit_none: 'ขนาดเดิม',
            fit_scale_down: 'ฟิตอัจฉริยะ',
            mode_changed: 'โหมดวิดีโอถูกเปลี่ยนแล้ว'
        },
        ar: { 
            login: 'تسجيل الدخول', 
            password: 'كلمة المرور', 
            remember: 'البقاء مسجل الدخول',
            fit_cover: 'قص افتراضي',
            fit_contain: 'نسبة عادية',
            fit_fill: 'تمديد الملء',
            fit_none: 'الحجم الأصلي',
            fit_scale_down: 'ملائمة ذكية',
            mode_changed: 'تم تغيير وضع الفيديو'
        },
        ru: { 
            login: 'Вход', 
            password: 'Пароль', 
            remember: 'Оставаться в системе',
            fit_cover: 'Обрезка по умолчанию',
            fit_contain: 'Нормальное соотношение',
            fit_fill: 'Растяжение заполнения',
            fit_none: 'Исходный размер',
            fit_scale_down: 'Умная подгонка',
            mode_changed: 'Режим видео изменен'
        },
        es: { 
            login: 'Iniciar sesión', 
            password: 'Contraseña', 
            remember: 'Mantenerse conectado',
            fit_cover: 'Recorte predeterminado',
            fit_contain: 'Proporción normal',
            fit_fill: 'Estirar relleno',
            fit_none: 'Tamaño original',
            fit_scale_down: 'Ajuste inteligente',
            mode_changed: 'Modo de video cambiado'
        }
    };

    const videoModes = [
        { id: 'fit_cover', icon: 'bi-arrows-angle-expand' },
        { id: 'fit_contain', icon: 'bi-aspect-ratio' },
        { id: 'fit_fill', icon: 'bi-bounding-box' },
        { id: 'fit_none', icon: 'bi-image' },
        { id: 'fit_scale_down', icon: 'bi-arrows-collapse' }
    ];

    async function getCurrentLanguage() {
        try {
            const response = await fetch('/spectra/lib/language.txt', {cache: 'no-store'});
            if (response.ok) {
                const lang = await response.text();
                return lang.split('-')[0].trim() || 'zh';
            }
        } catch (error) {
            console.error('Failed to read language file:', error);
        }
        return 'zh';
    }

    function createVideoModeControl() {
        const control = document.createElement('div');
        control.className = 'video-mode-control';
        control.id = 'videoModeControl';
        
        const indicator = document.createElement('i');
        indicator.className = 'video-mode-indicator bi bi-arrows-angle-expand';
        
        const text = document.createElement('span');
        text.className = 'video-mode-text';
        text.textContent = 'Default Crop';
        
        control.appendChild(indicator);
        control.appendChild(text);
        
        control.addEventListener('click', function(e) {
            e.stopPropagation();
            cycleVideoMode();
        });
        
        document.body.appendChild(control);
        return control;
    }

    async function cycleVideoMode() {
        if (backgroundType !== 'Video' || !document.getElementById("background-video")) {
            return;
        }
        
        const video = document.getElementById("background-video");
        const currentIndex = videoModes.findIndex(mode => mode.id === currentVideoMode);
        const nextIndex = (currentIndex + 1) % videoModes.length;
        const newMode = videoModes[nextIndex];
        
        const fitValue = newMode.id.replace('fit_', '');
        video.style.cssText = `
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            object-fit: ${fitValue} !important;
            -o-object-fit: ${fitValue} !important;
            -moz-object-fit: ${fitValue} !important;
            -webkit-object-fit: ${fitValue} !important;
            z-index: 0 !important;
            transform: translateZ(0);
            backface-visibility: hidden;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            filter: brightness(0.9) !important;
        `;
        
        currentVideoMode = newMode.id;
        localStorage.setItem('video_display_mode', currentVideoMode);
        
        updateVideoModeButton(newMode);
    }

    async function updateVideoModeButton(modeInfo) {
        const control = document.getElementById('videoModeControl');
        if (!control) return;
        
        const lang = await getCurrentLanguage();
        const texts = translationsIP[lang] || translationsIP['zh'];
        const modeName = texts[modeInfo.id] || modeInfo.id.replace('fit_', '');
        
        const indicator = control.querySelector('.video-mode-indicator');
        const text = control.querySelector('.video-mode-text');
        
        indicator.className = 'video-mode-indicator bi ' + modeInfo.icon;
        text.textContent = modeName;
    }

    async function initializeVideoMode() {
        const video = document.getElementById("background-video");
        if (!video) return;
        
        video.classList.remove('background-media');
        
        const modeId = localStorage.getItem('video_display_mode') || 'fit_cover';
        const modeInfo = videoModes.find(m => m.id === modeId) || videoModes[0];
        const fitValue = modeId.replace('fit_', '');
        
        video.style.cssText = `
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            object-fit: ${fitValue} !important;
            -o-object-fit: ${fitValue} !important;
            -moz-object-fit: ${fitValue} !important;
            -webkit-object-fit: ${fitValue} !important;
            z-index: 0 !important;
            transform: translateZ(0);
            backface-visibility: hidden;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            filter: brightness(0.9) !important;
        `;
        
        currentVideoMode = modeId;
        
        createVideoModeControl();
        updateVideoModeButton(modeInfo);
        
        if (backgroundType !== 'Video') {
            const control = document.getElementById('videoModeControl');
            if (control) control.style.display = 'none';
        }
    }

    function initializeMedia() {
        if (backgroundType === "Video") {
            currentMedia = document.getElementById("background-video");
            const audio = document.getElementById("background-audio");
            if (audio) {
                audio.pause();
            }
            
            initializeVideoMode();
            
        } else {
            let audio = document.getElementById("background-audio");

            if (audio) {
                let audioSource = audio.querySelector("source");
            
                if (audioSource.src && audioSource.src !== "" && !audioSource.src.includes("undefined")) {
                    audio.load();
                    currentMedia = audio;
            } else {
                currentMedia = null;
            }
        } else {
            currentMedia = null;
        }       
            const control = document.getElementById('videoModeControl');
            if (control) control.style.display = 'none';
        }
        
        if (currentMedia) {
            currentMedia.muted = false;
            currentMedia.volume = 1.0;
        }
        updateMediaIcon();
    }

    function handleHeaderClick(e) {
        e.stopPropagation();
        
        if (currentMedia) {
            currentMedia.pause();
        }
        
        if (backgroundType === 'Video') {
            const video = document.getElementById("background-video");
            const audio = document.getElementById("background-audio");
            const mainBg = document.querySelector('.main-bg');
            const videoContainer = document.querySelector('.video');
            
            if (video && videoContainer) {
                video.pause();
                videoContainer.style.display = 'none';
            }
            
            if (mainBg) {
                mainBg.style.display = 'block';
            }
            
            let audioSource = audio.querySelector("source");
            if (audioSource.src && audioSource.src !== "" && !audioSource.src.includes("undefined")) {
                audio.load();
                audio.muted = false;
                audio.play();
                currentMedia = audio;
            } else {
                currentMedia = null;
            }
            
            const control = document.getElementById('videoModeControl');
            if (control) control.style.display = 'none';
            
        } else {
            const video = document.getElementById("background-video");
            const audio = document.getElementById("background-audio");
            const mainBg = document.querySelector('.main-bg');
            const videoContainer = document.querySelector('.video');
            
            if (video && videoContainer) {
                audio.pause();
                mainBg.style.display = 'none';
                videoContainer.style.display = 'block';
                video.muted = false;
                video.play();
                currentMedia = video;
                
                const control = document.getElementById('videoModeControl') || createVideoModeControl();
                control.style.display = 'flex';
                initializeVideoMode();
                
            } else {
                let audioSource = audio.querySelector("source");
                if (audioSource.src && audioSource.src !== "" && !audioSource.src.includes("undefined")) {
                    audio.load();
                    audio.muted = false;
                    audio.play();
                    currentMedia = audio;
                } else {
                    currentMedia = null;
                }
                
                const control = document.getElementById('videoModeControl');
                if (control) control.style.display = 'none';
            }
        }
        
        mediaStarted = true;
        updateMediaIcon();
    }

    function handleMediaControlClick(e) {
        e.stopPropagation();
        
        if (!currentMedia) return;
        
        if (!mediaStarted) {
            startMedia();
        } else {
            isMuted = !isMuted;
            currentMedia.muted = isMuted;
        }
        
        updateMediaIcon();
    }

    function startMedia() {
        if (!mediaStarted && currentMedia) {
            currentMedia.muted = false;
            isMuted = false;
            
            if (currentMedia.play) {
                currentMedia.play().catch(e => {
                });
            }
            mediaStarted = true;
            updateMediaIcon();
            
            document.removeEventListener('click', startMedia);
            document.removeEventListener('touchstart', startMedia);
        }
    }

    function updateMediaIcon() {
        if (!mediaStarted) {
            mediaIcon.className = "bi bi-volume-up";
            mediaControl.className = "media-control unmuted";
        } else if (isMuted) {
            mediaIcon.className = "bi bi-volume-mute";
            mediaControl.className = "media-control muted";
        } else {
            mediaIcon.className = "bi bi-volume-up";
            mediaControl.className = "media-control unmuted";
        }
    }

    if (loginHeader) {
        loginHeader.addEventListener('click', handleHeaderClick);
        loginHeader.style.cursor = 'pointer';
    }
    
    if (loginBackground) {
        loginBackground.addEventListener('click', handleHeaderClick);
        loginBackground.style.cursor = 'pointer';
    }

    mediaControl.addEventListener('click', handleMediaControlClick);

    document.addEventListener('click', startMedia, { once: true });
    document.addEventListener('touchstart', startMedia, { once: true });

    initializeMedia();

    const toggle = document.querySelector(".toggle-password");
    const password = document.getElementById("authPassword");

    if (toggle && password) {
        toggle.addEventListener("click", function() {
            const isPassword = password.getAttribute("type") === "password";
            password.setAttribute("type", isPassword ? "text" : "password");
            this.classList.toggle("bi-eye");
            this.classList.toggle("bi-eye-slash");

            if (isPassword) {
                this.classList.add("showing");
            } else {
                this.classList.remove("showing");
            }
        });
    }

    const passwordOptions = document.getElementById('passwordOptions');
    const authUsername = document.getElementById('authUsername');
    const authPassword = document.getElementById('authPassword');

    function loadSavedCredentials() {
        const savedUsername = localStorage.getItem('luci_username');
        const savedPassword = localStorage.getItem('luci_password');
        const optionsChecked = localStorage.getItem('password_options') === 'true';
        
        if (savedUsername) {
            authUsername.value = savedUsername;
        }
        if (savedPassword && optionsChecked) {
            authPassword.value = savedPassword;
        }
        if (passwordOptions) {
            passwordOptions.checked = optionsChecked;
        }
    }

    function saveCredentials() {
        if (passwordOptions.checked) {
            localStorage.setItem('luci_username', authUsername.value);
            localStorage.setItem('luci_password', authPassword.value);
            localStorage.setItem('password_options', 'true');
        } else {
            clearCredentials();
        }
    }

    function clearCredentials() {
        localStorage.removeItem('luci_username');
        localStorage.removeItem('luci_password');
        localStorage.setItem('password_options', 'false');
        authPassword.value = '';
    }

    if (passwordOptions && authUsername && authPassword) {
        loadSavedCredentials();
        
        passwordOptions.addEventListener('change', function() {
            if (this.checked) {
                saveCredentials();
            } else {
                clearCredentials();
            }
        });
    }

    const authForm = document.querySelector('.auth-form');
    if (authForm && passwordOptions) {
        authForm.addEventListener('submit', function() {
            if (passwordOptions.checked) {
                saveCredentials();
            }
        });
    }

    if (authUsername && passwordOptions) {
        authUsername.addEventListener('input', function() {
            if (passwordOptions.checked) {
                localStorage.setItem('luci_username', this.value);
            }
        });
    }

    if (authPassword && passwordOptions) {
        authPassword.addEventListener('input', function() {
            if (passwordOptions.checked) {
                localStorage.setItem('luci_password', this.value);
            }
        });
    }

    async function translateLoginElements() {
        const lang = await getCurrentLanguage(); 
        const text = translationsIP[lang] || translationsIP['zh'];

        const loginButton = document.querySelector('button.submit-btn');
        if (loginButton) {
            loginButton.textContent = text.login || 'Login';
        }

        const passwordInput = document.getElementById('authPassword');
        if (passwordInput) {
            passwordInput.placeholder = text.password || 'Password';
        }

        const rememberText = document.getElementById('passwordOptionsText');
        if (rememberText) {
            rememberText.textContent = text.remember || 'Keep logged in';
        }
        
        const videoControl = document.getElementById('videoModeControl');
        if (videoControl && backgroundType === 'Video') {
            const modeId = localStorage.getItem('video_display_mode') || 'fit_cover';
            const modeInfo = videoModes.find(m => m.id === modeId) || videoModes[0];
            updateVideoModeButton(modeInfo);
        }
    }

    translateLoginElements();
});
</script>