ComfyUI-Lora-Manager/templates/components/modals/update_modal.html

<!-- Update Modal -->
<div id="updateModal" class="modal">
    <div class="modal-content update-modal">
        <button class="close" onclick="modalManager.closeModal('updateModal')">&times;</button>
        <div class="update-header">
            <i class="fas fa-bell update-icon"></i>
            <h2 data-i18n="update.notificationsTitle">{{ t('update.notificationsTitle') }}</h2>
        </div>
        <div class="notification-tabs" role="tablist">
            <button type="button" class="notification-tab active" id="updatesTab" role="tab" aria-selected="true" aria-controls="updatesPanel" tabindex="0" data-notification-tab="updates">
                <span>{{ t('update.tabs.updates') }}</span>
                <span class="notification-tab-badge is-dot" id="updatesTabBadge"></span>
            </button>
            <button type="button" class="notification-tab" id="bannersTab" role="tab" aria-selected="false" aria-controls="bannersPanel" tabindex="-1" data-notification-tab="banners">
                <span>{{ t('update.tabs.messages') }}</span>
                <span class="notification-tab-badge" id="bannerTabBadge"></span>
            </button>
        </div>
        <div class="notification-panels">
            <div class="notification-panel active" id="updatesPanel" role="tabpanel" aria-labelledby="updatesTab" aria-hidden="false" tabindex="0" data-notification-panel="updates">
                <div class="update-content">
                    <div class="update-info">
                        <div class="version-info">
                            <div class="current-version">
                                <span class="label">{{ t('update.currentVersion') }}:</span>
                                <span class="version-number">v0.0.0</span>
                            </div>
                            <div class="git-info" style="display:none;">{{ t('update.commit') }}: unknown</div>
                            <div class="new-version">
                                <span class="label">{{ t('update.newVersion') }}:</span>
                                <span class="version-number">v0.0.0</span>
    </div>
</div>

                        <div class="update-actions">
                            <a href="https://github.com/willmiao/ComfyUI-Lora-Manager" target="_blank" class="update-link">
                                <i class="fas fa-external-link-alt"></i> {{ t('update.viewOnGitHub') }}
                            </a>
                            <button id="updateBtn" class="primary-btn disabled">
                                <i class="fas fa-download"></i>
                                <span id="updateBtnText" data-i18n="update.updateNow">{{ t('update.updateNow') }}</span>
                            </button>
                        </div>
                    </div>

                    <!-- Update Progress Section -->
                    <div class="update-progress" id="updateProgress" style="display: none;">
                        <div class="progress-info">
                            <div class="progress-text" id="updateProgressText" data-i18n="update.preparingUpdate">{{ t('update.preparingUpdate') }}</div>
                            <div class="update-progress-bar">
                                <div class="progress-fill" id="updateProgressFill"></div>
                            </div>
                        </div>
                    </div>

                    <div class="changelog-section">
                        <h3>{{ t('update.changelog') }}</h3>
                        <div class="changelog-content">
                            <!-- Dynamic changelog content will be inserted here -->
                            <div class="changelog-item">
                                <h4>{{ t('update.checkingUpdates') }}</h4>
                                <p>{{ t('update.checkingMessage') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="update-preferences">
                        <label class="toggle-switch">
                            <input type="checkbox" id="updateNotifications" checked>
                            <span class="toggle-slider"></span>
                            <span class="toggle-label">{{ t('update.showNotifications') }}</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="notification-panel" id="bannersPanel" role="tabpanel" aria-labelledby="bannersTab" aria-hidden="true" tabindex="-1" data-notification-panel="banners">
                <div class="banner-history">
                    <h3>{{ t('update.banners.recent') }}</h3>
                    <p class="banner-history-empty" id="bannerHistoryEmpty" data-i18n="update.banners.empty">{{ t('update.banners.empty') }}</p>
                    <ul class="banner-history-list" id="bannerHistoryList"></ul>
                </div>
            </div>
        </div>
    </div>
</div>