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

<!-- Model details Modal -->
<div id="loraModal" class="modal"></div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal delete-modal">
    <div class="modal-content delete-modal-content">
        <h2>Delete Model</h2>
        <p class="delete-message">Are you sure you want to delete this model and all associated files?</p>
        <div class="delete-model-info"></div>
        <div class="modal-actions">
            <button class="cancel-btn" onclick="closeDeleteModal()">Cancel</button>
            <button class="delete-btn" onclick="confirmDelete()">Delete</button>
        </div>
    </div>
</div>

<!-- Download from URL Modal -->
<div id="downloadModal" class="modal">
    <div class="modal-content">
        <button class="close" onclick="modalManager.closeModal('downloadModal')">&times;</button>
        <h2>Download LoRA from URL</h2>
        
        <!-- Step 1: URL Input -->
        <div class="download-step" id="urlStep">
            <div class="input-group">
                <label for="loraUrl">Civitai URL:</label>
                <input type="text" id="loraUrl" placeholder="https://civitai.com/models/..." />
                <div class="error-message" id="urlError"></div>
            </div>
            <div class="modal-actions">
                <button class="primary-btn" onclick="downloadManager.validateAndFetchVersions()">Next</button>
            </div>
        </div>

        <!-- Step 2: Version Selection -->
        <div class="download-step" id="versionStep" style="display: none;">
            <div class="version-list" id="versionList">
                <!-- Versions will be inserted here -->
            </div>
            <div class="modal-actions">
                <button class="secondary-btn" onclick="downloadManager.backToUrl()">Back</button>
                <button class="primary-btn" onclick="downloadManager.proceedToLocation()">Next</button>
            </div>
        </div>

        <!-- Step 3: Location Selection -->
        <div class="download-step" id="locationStep" style="display: none;">
            <div class="location-selection">
                <div class="input-group">
                    <label>Select LoRA Root:</label>
                    <select id="loraRoot"></select>
                </div>
                <div class="input-group">
                    <label>Target Folder:</label>
                    <div class="folder-browser" id="folderBrowser">
                        <!-- Folder structure will be inserted here -->
                    </div>
                </div>
                <div class="input-group">
                    <label for="newFolder">New Folder (optional):</label>
                    <input type="text" id="newFolder" placeholder="Enter folder name" />
                </div>
            </div>
            <div class="modal-actions">
                <button class="secondary-btn" onclick="downloadManager.backToVersions()">Back</button>
                <button class="primary-btn" onclick="downloadManager.startDownload()">Download</button>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div id="settingsModal" class="modal">
    <div class="modal-content settings-modal">
        <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
        <h2>Settings</h2>
        <div class="settings-form">
            <div class="input-group">
                <label for="civitaiApiKey">Civitai API Key:</label>
                <div class="api-key-input">
                    <input type="password" 
                           id="civitaiApiKey" 
                           placeholder="Enter your Civitai API key"
                           value="{{ settings.get('civitai_api_key', '') }}" />
                    <button class="toggle-visibility" onclick="toggleApiKeyVisibility(this)">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="input-help">
                    Used for authentication when downloading models from Civitai
                </div>
            </div>
        </div>
        <div class="modal-actions">
            <button class="primary-btn" onclick="settingsManager.saveSettings()">Save</button>
        </div>
    </div>
</div>