willmiao-ComfyUI-Lora-Manager/templates/base.html

<!DOCTYPE html>
<html>

<head>
    {% include 'components/base_path_bootstrap.html' %}
    <title>{% block title %}{{ t('header.appTitle') }}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ rel_prefix }}loras_static/css/style.css?v={{ version }}">
    <link rel="stylesheet" href="{{ rel_prefix }}loras_static/css/onboarding.css?v={{ version }}">
    <link rel="stylesheet" href="{{ rel_prefix }}loras_static/vendor/flag-icons/flag-icons.min.css">
    {% block page_css %}{% endblock %}
    <link rel="stylesheet" href="{{ rel_prefix }}loras_static/vendor/font-awesome/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ rel_prefix }}loras_static/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ rel_prefix }}loras_static/images/favicon-16x16.png">
    <link rel="manifest" href="{{ rel_prefix }}loras_static/images/site.webmanifest">

    <link rel="preload" as="font" type="font/woff2" href="{{ rel_prefix }}loras_static/vendor/font-awesome/webfonts/fa-solid-900.woff2" crossorigin>

    <!-- 添加性能监控 -->
    <script>
        performance.mark('page-start');
        window.addEventListener('load', () => {
            performance.mark('page-end');
            performance.measure('page-load', 'page-start', 'page-end');
        });
    </script>

    <!-- 添加安全相关的 meta 标签 -->
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

    <!-- 添加资源加载策略 -->
    <link rel="preconnect" href="https://civitai.com">
    <!-- <link rel="preconnect" href="https://cdnjs.cloudflare.com"> -->

    <script>
        // 计算滚动条宽度并设置CSS变量
        document.addEventListener('DOMContentLoaded', () => {
            const scrollDiv = document.createElement('div');
            scrollDiv.style.cssText = 'width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px;';
            document.body.appendChild(scrollDiv);
            const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            document.body.removeChild(scrollDiv);
            document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
        });
    </script>
    <script>
      (function() {
        var STORAGE_PREFIX = 'lora_manager_';
        var savedTheme = localStorage.getItem(STORAGE_PREFIX + 'theme') || 'auto';
        var savedPreset = localStorage.getItem(STORAGE_PREFIX + 'theme_preset') || 'default';
        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        if (savedTheme === 'dark' || (savedTheme === 'auto' && prefersDark)) {
          document.documentElement.setAttribute('data-theme', 'dark');
        } else {
          document.documentElement.setAttribute('data-theme', 'light');
        }

        if (savedPreset && savedPreset !== 'default') {
          document.documentElement.setAttribute('data-theme-preset', savedPreset);
        }
      })();
    </script>
    {% block head_scripts %}{% endblock %}
</head>

{% set page_id = self.page_id() %}
<body data-page="{{ page_id }}" data-app-version="{{ version }}">
    <!-- Header is always visible, even during initialization -->
    {% include 'components/header.html' %}

    <div class="page-content">
        {% include 'components/modals.html' %}
        {% include 'components/loading.html' %}
        {% include 'components/context_menu.html' %}
        {% include 'components/progress_panel.html' %}
        {% block additional_components %}{% endblock %}

        <!-- Add back-to-top button here -->
        <button id="backToTopBtn" class="back-to-top" title="{{ t('common.actions.backToTop') }}">
            <i class="fas fa-chevron-up"></i>
        </button>

        <div class="container">
            <!-- Banner component -->
            <div id="banner-container" class="banner-container" style="display: none;">
                <!-- Banners will be dynamically inserted here -->
            </div>

            {% if awaiting_first_scan %}
                <!-- Show first-run welcome component before the initial scan -->
                {% include 'components/first_run.html' %}
            {% elif is_initializing %}
                <!-- Show initialization component when initializing -->
                {% include 'components/initialization.html' %}
            {% else %}
                <!-- Show regular content when not initializing -->
                {% block content %}{% endblock %}
            {% endif %}
        </div>

        {% block overlay %}{% endblock %}
    </div>

    {% if awaiting_first_scan %}
        <!-- Load first-run welcome JavaScript -->
        <script type="module" src="{{ rel_prefix }}loras_static/js/components/first_run.js?v={{ version }}"></script>
    {% elif is_initializing %}
        <!-- Load initialization JavaScript -->
        <script type="module" src="{{ rel_prefix }}loras_static/js/components/initialization.js?v={{ version }}"></script>
    {% else %}
        {% block main_script %}{% endblock %}
    {% endif %}

    {% block additional_scripts %}{% endblock %}
</body>

</html>