ScanLook/templates/module_manager.html

{% extends "base.html" %}

{% block title %}Module Manager - ScanLook{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title"><i class="fas fa-puzzle-piece"></i> Module Manager</h1>
            <p class="page-subtitle">Install, manage, and configure ScanLook modules</p>
        </div>
        <button class="btn btn-primary" onclick="openUploadModal()" style="margin-top: 10px;">
            <i class="fas fa-upload"></i> Upload
        </button>
    </div>

    {% if modules %}
    <div class="module-grid">
        {% for module in modules %}
        <div class="module-card {% if module.is_active %}module-card-active{% endif %}">
            <!-- Module Icon -->
            <div class="module-icon">
                {% if module.icon %}
                <i class="fa-solid {{ module.icon }}"></i>
                {% else %}
                <i class="fa-solid fa-cube"></i>
                {% endif %}
            </div>

            <!-- Module Info -->
            <h3 class="module-name">{{ module.name }}</h3>
            <p class="module-desc">{{ module.description }}</p>

            <!-- Module Metadata -->
            <div class="module-metadata">
                <div class="metadata-row">
                    <span class="metadata-label">Version:</span>
                    <span class="metadata-value">{{ module.version }}</span>
                </div>
                <div class="metadata-row">
                    <span class="metadata-label">Author:</span>
                    <span class="metadata-value">{{ module.author }}</span>
                </div>
            </div>

            <!-- Status Badge -->
            <div class="module-status">
                {% if module.is_installed and module.is_active %}
                <span class="status-badge status-active">
                    <i class="fas fa-check-circle"></i> Active
                </span>
                {% elif module.is_installed %}
                <span class="status-badge status-inactive">
                    <i class="fas fa-pause-circle"></i> Inactive
                </span>
                {% else %}
                <span class="status-badge status-not-installed">
                    <i class="fas fa-times-circle"></i> Not Installed
                </span>
                {% endif %}
            </div>

            <!-- Action Buttons -->
            <div class="module-actions">
                {% if not module.is_installed %}
                <!-- Not Installed: Show Install Button -->
                <button class="btn btn-primary btn-block" onclick="installModule('{{ module.module_key }}')">
                    <i class="fas fa-download"></i> Install Module
                </button>
                
                {% elif module.is_active %}
                <!-- Active: Show Deactivate and Uninstall -->
                <button class="btn btn-warning btn-block" onclick="deactivateModule('{{ module.module_key }}')">
                    <i class="fas fa-pause"></i> Deactivate
                </button>
                <button class="btn btn-danger btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
                    <i class="fas fa-trash"></i> Uninstall
                </button>
                
                {% else %}
                <!-- Installed but Inactive: Show Activate and Uninstall -->
                <button class="btn btn-success btn-block" onclick="activateModule('{{ module.module_key }}')">
                    <i class="fas fa-play"></i> Activate
                </button>
                <button class="btn btn-danger btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
                    <i class="fas fa-trash"></i> Uninstall
                </button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon"><i class="fas fa-puzzle-piece"></i></div>
        <h2 class="empty-title">No Modules Found</h2>
        <p class="empty-text">No modules found in the <code>/modules</code> directory.</p>
        <p class="empty-text">Upload a module package to get started.</p>
    </div>
    {% endif %}
</div>

<style>
/* Module Manager Specific Styles */
.module-metadata {
    margin: var(--space-md) 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.metadata-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.875rem;
}

.metadata-label {
    color: var(--text-muted);
    font-weight: 500;
}

.metadata-value {
    color: var(--text-color);
}

.module-status {
    margin: var(--space-sm) 0;
    text-align: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.status-inactive {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid #ffc107;
}

.status-not-installed {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

.module-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    margin-top: auto;
}

.module-actions .btn {
    flex: 1;
    justify-content: center;
}

/* Override for active module cards */
.module-card-active {
    border-color: var(--success-color);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
}

.module-card-active .module-icon {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
    color: var(--success-color);
}

/* Make module cards compact */
.module-grid .module-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-xs);
}

.module-grid .module-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    margin: 0 auto var(--space-xs);
}

.module-grid .module-name {
    margin: var(--space-xs) 0;
    font-size: 1.25rem;
}

.module-grid .module-desc {
    flex-grow: 0;
    margin: 0 0 var(--space-xs) 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.module-metadata {
    margin: var(--space-xs) 0;
    padding: var(--space-xs) 0;
}

.metadata-row {
    padding: 2px 0;
    font-size: 0.8125rem;
}

.module-status {
    margin: var(--space-xs) 0;
}

.status-badge {
    padding: 4px 12px;
    font-size: 0.75rem;
}

.module-actions {
    margin-top: var(--space-xs);
}
</style>

<script>
// Keep all your existing JavaScript functions exactly as they are
function installModule(moduleKey) {
    if (!confirm(`Install module "${moduleKey}"?\n\nThis will create database tables and activate the module.`)) {
        return;
    }
    
    fetch(`/admin/modules/${moduleKey}/install`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.restart_required) {
                alert(`✅ ${data.message}\n\nServer will restart automatically...`);
                restartServerSilent();
            } else {
                alert(`✅ ${data.message}`);
                location.reload();
            }
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function restartServerSilent() {
    fetch('/admin/restart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.body.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; background: #1a1a1a; color: white;">
                    <div style="font-size: 48px; margin-bottom: 20px;">🔄</div>
                    <h1>Server Restarting...</h1>
                    <p>Module installed successfully. Please wait...</p>
                </div>
            `;
            setTimeout(() => {
                location.reload();
            }, 3000);
        }
    })
    .catch(error => {
        alert(`❌ Restart failed: ${error}\n\nPlease restart manually.`);
    });
}

function uninstallModule(moduleKey, moduleName) {
    const stage1Modal = `
        <div id="uninstall-modal-stage1" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 2px solid #ffc107; border-radius: 8px; padding: 30px; max-width: 500px; color: white;">
                <h2 style="color: #ffc107; margin-top: 0;">⚠️ Uninstall Module?</h2>
                <p style="margin: 20px 0; font-size: 18px;">Module: <strong>${moduleName}</strong></p>
                <p style="margin: 20px 0;">This will:</p>
                <ul style="margin: 20px 0; padding-left: 20px;">
                    <li>Deactivate the module</li>
                    <li>Remove it from the system</li>
                    <li>Users will lose access</li>
                    <li style="color: #dc3545; font-weight: bold;">DELETE ALL DATA PERMANENTLY</li>
                </ul>
                <p style="margin: 20px 0; background: #2d2d2d; padding: 15px; border-radius: 4px; color: #28a745;">
                    💡 <strong>Want to keep the data?</strong><br>
                    Use "Deactivate" instead of "Uninstall"
                </p>
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 12px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Cancel
                    </button>
                    <button onclick="proceedToStage2('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 12px; background: #ffc107; color: #1a1a1a; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Continue
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', stage1Modal);
}

function proceedToStage2(moduleKey, moduleName) {
    document.getElementById('uninstall-modal-stage1').remove();
    
    const stage2Modal = `
        <div id="uninstall-modal-stage2" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 3px solid #dc3545; border-radius: 8px; padding: 30px; max-width: 550px; color: white;">
                <h2 style="color: #dc3545; margin-top: 0;">🚨 Data Will Be Deleted</h2>
                <p style="margin: 20px 0; font-size: 18px;">Module: <strong>${moduleName}</strong></p>
                <div style="background: #2d2d2d; padding: 20px; border-radius: 4px; margin: 20px 0; border-left: 4px solid #dc3545;">
                    <p style="margin: 0 0 15px 0; color: #dc3545; font-weight: bold; font-size: 16px;">⚠️ This will permanently delete:</p>
                    <ul style="margin: 10px 0; color: #fff; line-height: 1.8;">
                        <li>All sessions</li>
                        <li>All scans and entries</li>
                        <li>All locations</li>
                        <li>All historical data</li>
                        <li>All database tables</li>
                    </ul>
                    <p style="margin: 15px 0 0 0; color: #dc3545; font-weight: bold; font-size: 18px;">THIS CANNOT BE UNDONE!</p>
                </div>
                <p style="margin: 20px 0; color: #ffc107; text-align: center; font-weight: bold;">
                    Are you absolutely sure you want to proceed?
                </p>
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 14px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        ✓ Cancel (Safe)
                    </button>
                    <button onclick="proceedToStage3('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 14px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Yes, Continue
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', stage2Modal);
}

function proceedToStage3(moduleKey, moduleName) {
    document.getElementById('uninstall-modal-stage2').remove();
    
    const stage3Modal = `
        <div id="uninstall-modal-stage3" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 4px solid #dc3545; border-radius: 8px; padding: 35px; max-width: 500px; color: white; box-shadow: 0 0 30px rgba(220, 53, 69, 0.5);">
                <h2 style="color: #dc3545; margin-top: 0; text-align: center;">🚨 FINAL WARNING 🚨</h2>
                <p style="margin: 25px 0; font-size: 18px; text-align: center;">Module: <strong>${moduleName}</strong></p>
                <div style="background: #dc3545; color: white; padding: 20px; border-radius: 4px; margin: 25px 0; text-align: center;">
                    <p style="margin: 0; font-weight: bold; font-size: 20px;">
                        ALL DATA WILL BE<br>PERMANENTLY DELETED
                    </p>
                </div>
                <p style="margin: 25px 0; text-align: center; font-size: 15px;">
                    This is your <strong style="color: #dc3545;">LAST CHANCE</strong> to cancel.
                </p>
                <p style="margin: 20px 0; font-weight: bold;">Type <span style="color: #dc3545; font-size: 18px;">DELETE</span> to confirm:</p>
                <input type="text" id="delete-confirmation-text" placeholder="Type DELETE here" style="width: 100%; padding: 14px; font-size: 18px; border: 3px solid #dc3545; border-radius: 4px; background: #2d2d2d; color: white; box-sizing: border-box; text-align: center; font-weight: bold;" autocomplete="off">
                <p id="delete-text-error" style="color: #dc3545; margin: 10px 0; text-align: center; font-weight: bold; display: none;">❌ You must type DELETE exactly</p>
                <div style="display: flex; gap: 10px; margin-top: 25px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 14px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 17px; font-weight: bold;">
                        ✓ Cancel (Safe)
                    </button>
                    <button onclick="finalUninstall('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 14px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 17px; font-weight: bold;">
                        Delete Everything
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', stage3Modal);
    setTimeout(() => document.getElementById('delete-confirmation-text').focus(), 100);
}

function cancelUninstall() {
    ['uninstall-modal-stage1', 'uninstall-modal-stage2', 'uninstall-modal-stage3'].forEach(id => {
        const modal = document.getElementById(id);
        if (modal) modal.remove();
    });
}

function finalUninstall(moduleKey, moduleName) {
    const confirmText = document.getElementById('delete-confirmation-text').value;
    
    if (confirmText !== 'DELETE') {
        document.getElementById('delete-text-error').style.display = 'block';
        document.getElementById('delete-confirmation-text').style.borderColor = '#ff0000';
        document.getElementById('delete-confirmation-text').style.boxShadow = '0 0 10px rgba(255, 0, 0, 0.5)';
        document.getElementById('delete-confirmation-text').focus();
        return;
    }
    
    document.getElementById('uninstall-modal-stage3').remove();
    
    fetch(`/admin/modules/${moduleKey}/uninstall`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nAll data has been permanently deleted.\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function activateModule(moduleKey) {
    fetch(`/admin/modules/${moduleKey}/activate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function deactivateModule(moduleKey) {
    if (!confirm(`Deactivate module "${moduleKey}"?\n\nUsers will lose access until reactivated.`)) {
        return;
    }

    fetch(`/admin/modules/${moduleKey}/deactivate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

// ==================== MODULE UPLOAD FUNCTIONS ====================

function openUploadModal() {
    document.getElementById('upload-modal').style.display = 'flex';
    resetUploadModal();
}

function closeUploadModal() {
    document.getElementById('upload-modal').style.display = 'none';
    resetUploadModal();
}

function closeUploadModalAndReload() {
    closeUploadModal();
    location.reload();
}

function resetUploadModal() {
    document.getElementById('drop-zone').style.display = 'flex';
    document.getElementById('upload-progress').style.display = 'none';
    document.getElementById('upload-result').style.display = 'none';
    document.getElementById('file-input').value = '';
}

// Drag and Drop Handlers
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFileUpload(files[0]);
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFileUpload(e.target.files[0]);
        }
    });
});

// Handle File Upload
function handleFileUpload(file) {
    // Validate file type
    if (!file.name.endsWith('.zip')) {
        showUploadResult(false, 'Invalid File Type', 'Please upload a ZIP file containing your module.');
        return;
    }

    // Show progress
    document.getElementById('drop-zone').style.display = 'none';
    document.getElementById('upload-progress').style.display = 'block';
    document.getElementById('upload-filename').textContent = file.name;

    // Create FormData
    const formData = new FormData();
    formData.append('module_file', file);

    // Upload with progress
    const xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            updateProgress(percentComplete);
        }
    });

    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
                showUploadResult(true, 'Upload Successful!', response.message);
            } else {
                showUploadResult(false, 'Upload Failed', response.message);
            }
        } else {
            showUploadResult(false, 'Upload Failed', 'Server error: ' + xhr.status);
        }
    });

    xhr.addEventListener('error', () => {
        showUploadResult(false, 'Upload Failed', 'Network error occurred');
    });

    xhr.open('POST', '/admin/modules/upload', true);
    xhr.send(formData);
}

function updateProgress(percent) {
    document.getElementById('progress-bar').style.width = percent + '%';
    document.getElementById('progress-text').textContent = percent + '%';
    
    if (percent === 100) {
        document.getElementById('upload-status').textContent = 'Processing...';
    }
}

function showUploadResult(success, title, message) {
    document.getElementById('upload-progress').style.display = 'none';
    
    const resultDiv = document.getElementById('upload-result');
    resultDiv.style.display = 'block';
    resultDiv.className = 'upload-result ' + (success ? 'success' : 'error');
    
    const icon = success 
        ? '<i class="fas fa-check-circle"></i>' 
        : '<i class="fas fa-exclamation-circle"></i>';
    
    document.getElementById('result-icon').innerHTML = icon;
    document.getElementById('result-title').textContent = title;
    document.getElementById('result-message').textContent = message;
}
</script>

<!-- Upload Modal -->
<div id="upload-modal" class="upload-modal" style="display: none;">
    <div class="upload-modal-overlay" onclick="closeUploadModal()"></div>
    <div class="upload-modal-content">
        <div class="upload-modal-header">
            <h2><i class="fas fa-upload"></i> Upload Module Package</h2>
            <button class="close-btn" onclick="closeUploadModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="upload-modal-body">
            <!-- Drag & Drop Zone -->
            <div id="drop-zone" class="drop-zone">
                <div class="drop-zone-content">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>Drag & Drop Module ZIP</h3>
                    <p>or</p>
                    <label for="file-input" class="btn btn-secondary">
                        <i class="fas fa-folder-open"></i> Browse Files
                    </label>
                    <input type="file" id="file-input" accept=".zip" style="display: none;">
                    <p class="file-requirements">
                        <small>
                            <strong>Requirements:</strong><br>
                            • ZIP file containing module folder<br>
                            • Must include manifest.json<br>
                            • Module key must be unique
                        </small>
                    </p>
                </div>
            </div>

            <!-- Upload Progress (hidden by default) -->
            <div id="upload-progress" class="upload-progress" style="display: none;">
                <div class="progress-info">
                    <span id="upload-filename"></span>
                    <span id="upload-status">Uploading...</span>
                </div>
                <div class="progress-bar-container">
                    <div id="progress-bar" class="progress-bar"></div>
                </div>
                <div class="progress-percentage">
                    <span id="progress-text">0%</span>
                </div>
            </div>

            <!-- Upload Result (hidden by default) -->
            <div id="upload-result" class="upload-result" style="display: none;">
                <div id="result-icon"></div>
                <h3 id="result-title"></h3>
                <p id="result-message"></p>
                <button class="btn btn-primary" onclick="closeUploadModalAndReload()">
                    Close & Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Upload Modal */
.upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.upload-modal-content {
    position: relative;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.upload-modal-header h2 {
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-sm);
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: var(--text-color);
}

.upload-modal-body {
    padding: var(--space-xl);
}

/* Drop Zone */
.drop-zone {
    border: 3px dashed var(--border-color);
    border-radius: 12px;
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.3s;
    background: var(--bg-secondary);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone:hover {
    border-color: var(--primary-color);
    background: rgba(0, 188, 212, 0.05);
}

.drop-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(0, 188, 212, 0.1);
    transform: scale(1.02);
}

.drop-zone-content {
    width: 100%;
}

.drop-zone-content i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}

.drop-zone-content h3 {
    margin: var(--space-md) 0;
    color: var(--text-color);
}

.drop-zone-content p {
    color: var(--text-muted);
    margin: var(--space-sm) 0;
}

.file-requirements {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

/* Upload Progress */
.upload-progress {
    text-align: center;
    padding: var(--space-xl);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    color: var(--text-color);
}

.progress-bar-container {
    width: 100%;
    height: 30px;
    background: var(--bg-secondary);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.progress-percentage {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* Upload Result */
.upload-result {
    text-align: center;
    padding: var(--space-xl);
}

.upload-result i {
    font-size: 5rem;
    margin-bottom: var(--space-lg);
}

.upload-result.success i {
    color: var(--success-color);
}

.upload-result.error i {
    color: var(--danger-color);
}

.upload-result h3 {
    margin: var(--space-md) 0;
    color: var(--text-color);
}

.upload-result p {
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}
</style>

{% endblock %}