Ich bin mit meiner aktuellen Index-Startseite nicht zufrieden. Bitte überarbeite das Design und die Qualität der Seite. Ich wünsche eine moderne Website, die visuell überragend ist und den Benutzer neugierig macht. Index.html: <!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quantsensio V2 - Essential Financial Analysis</title>
text

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">

<style>
    :root {
        --primary-color: #1a1a1a;
        --secondary-color: #666666;
        --accent-color: #0066cc;
        --success-color: #16a34a;
        --warning-color: #ca8a04;
        --danger-color: #dc2626;
        --border-light: #e5e7eb;
        --background-light: #f9fafb;
        --text-muted: #6b7280;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        background-color: #ffffff;
        color: var(--primary-color);
        line-height: 1.5;
        font-size: 14px;
    }

    .navbar {
        background-color: var(--primary-color);
        border-bottom: 1px solid var(--border-light);
        padding: 0.75rem 0;
    }

    .navbar-brand {
        font-weight: 600;
        font-size: 1.25rem;
        color: white !important;
    }

    .hero-section {
        background: white;
        border: 1px solid var(--border-light);
        padding: 3rem 2rem;
        margin: 2rem 0;
        border-radius: 8px;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--primary-color);
    }

    .hero-subtitle {
        color: var(--text-muted);
        font-size: 1.1rem;
        margin-bottom: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .upload-section {
        background: white;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .section-header {
        background-color: var(--background-light);
        border-bottom: 1px solid var(--border-light);
        padding: 0.75rem 1rem;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--primary-color);
    }

    .upload-area {
        padding: 2rem;
        border: 2px dashed var(--border-light);
        border-radius: 8px;
        margin: 1.5rem;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .upload-area:hover {
        border-color: var(--accent-color);
        background-color: #f8faff;
    }

    .upload-area.dragover {
        border-color: var(--accent-color);
        background-color: #f0f7ff;
    }

    .upload-icon {
        font-size: 3rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }

    .upload-text {
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .upload-subtext {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .file-input {
        display: none;
    }

    .analyze-button {
        background-color: var(--accent-color);
        border: none;
        border-radius: 6px;
        padding: 0.75rem 2rem;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        transition: background-color 0.2s;
        width: 100%;
        margin-top: 1rem;
    }

    .analyze-button:hover:not(:disabled) {
        background-color: #0052a3;
    }

    .analyze-button:disabled {
        background-color: var(--text-muted);
        cursor: not-allowed;
    }

    .selected-file {
        background-color: var(--background-light);
        border: 1px solid var(--border-light);
        border-radius: 6px;
        padding: 1rem;
        margin: 1rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .file-info {
        display: flex;
        align-items: center;
    }

    .file-icon {
        color: var(--danger-color);
        font-size: 1.5rem;
        margin-right: 0.75rem;
    }

    .file-name {
        font-weight: 500;
        color: var(--primary-color);
    }

    .file-size {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .remove-file {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 4px;
        transition: color 0.2s;
    }

    .remove-file:hover {
        color: var(--danger-color);
    }

    .features-section {
        background: white;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0;
    }

    .feature-item {
        padding: 1.5rem;
        border-right: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
    }

    .feature-item:last-child,
    .feature-item:nth-child(even) {
        border-right: none;
    }

    .feature-icon {
        color: var(--accent-color);
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .feature-title {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: var(--primary-color);
    }

    .feature-description {
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    .loading-content {
        text-align: center;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        border: 1px solid var(--border-light);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .loading-spinner {
        font-size: 3rem;
        color: var(--accent-color);
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .hero-section {
            padding: 2rem 1rem;
        }
        
        .hero-title {
            font-size: 2rem;
        }
        
        .upload-area {
            margin: 1rem;
            padding: 1.5rem;
        }
        
        .features-grid {
            grid-template-columns: 1fr;
        }
        
        .feature-item {
            border-right: none;
        }
    }
</style>
</head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg"> <div class="container"> <a class="navbar-brand" href="/"> <i class="bi bi-graph-up-arrow"></i> Quantsensio V2 </a> <div class="ms-auto"> <a href="/prompt-manager" class="btn btn-outline-light btn-sm me-2"> <i class="bi bi-chat-square-text"></i> Prompt Manager </a> <a href="/settings" class="btn btn-outline-light btn-sm me-2"> <i class="bi bi-gear"></i> Settings </a> </div> </div> </nav>
text

<!-- Main Content -->
<main class="container my-4">
    <!-- Hero Section -->
    <div class="hero-section">
        <h1 class="hero-title">Essential Financial Analysis</h1>
        <p class="hero-subtitle">
            Upload your earnings reports and get instant, comprehensive financial analysis with key metrics, comparisons, and insights.
        </p>
    </div>

    <!-- Upload Section -->
    <div class="upload-section">
        <div class="section-header">
            <i class="bi bi-cloud-upload"></i>
            Upload Financial Document
        </div>
        
        <form id="uploadForm" action="/analyze" method="post" enctype="multipart/form-data">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">
                    <i class="bi bi-file-earmark-pdf"></i>
                </div>
                <div class="upload-text">Click to upload or drag and drop</div>
                <div class="upload-subtext">PDF files only • Max 10MB</div>
                <input type="file" id="fileInput" name="file" class="file-input" accept=".pdf" required>
            </div>
            
            <div id="selectedFile" class="selected-file" style="display: none;">
                <div class="file-info">
                    <i class="bi bi-file-earmark-pdf file-icon"></i>
                    <div>
                        <div class="file-name" id="fileName"></div>
                        <div class="file-size" id="fileSize"></div>
                    </div>
                </div>
                <button type="button" class="remove-file" id="removeFile">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            
            <button type="submit" class="analyze-button" id="analyzeButton" disabled>
                <i class="bi bi-graph-up"></i>
                Analyze Document
            </button>
        </form>
    </div>

    <!-- Features Section -->
    <div class="features-section">
        <div class="section-header">
            <i class="bi bi-star"></i>
            Key Features
        </div>
        <div class="features-grid">
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
                <div class="feature-title">Financial Performance</div>
                <div class="feature-description">
                    Comprehensive analysis of revenue, profit margins, and key financial metrics with period-over-period comparisons.
                </div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="bi bi-percent"></i>
                </div>
                <div class="feature-title">Profitability Metrics</div>
                <div class="feature-description">
                    Detailed breakdown of gross profit margins, operating margins, and other profitability indicators.
                </div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="bi bi-coin"></i>
                </div>
                <div class="feature-title">Earnings Per Share</div>
                <div class="feature-description">
                    Analysis of both GAAP and Non-GAAP EPS (basic & diluted) with historical comparisons and growth trends.
                </div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="bi bi-cash-stack"></i>
                </div>
                <div class="feature-title">Cash Flow Analysis</div>
                <div class="feature-description">
                    Operating and free cash flow metrics to assess the company's liquidity and financial health.
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
        <div class="loading-spinner">
            <i class="bi bi-arrow-clockwise"></i>
        </div>
        <h3>Analyzing Document...</h3>
        <p class="text-muted">This may take a few moments</p>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // File upload handling
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const selectedFile = document.getElementById('selectedFile');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');
    const analyzeButton = document.getElementById('analyzeButton');
    const uploadForm = document.getElementById('uploadForm');
    const loadingOverlay = document.getElementById('loadingOverlay');

    // Click to upload
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });

    // Drag and drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('dragover');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0 && files[0].type === 'application/pdf') {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });

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

    // Handle file selection
    function handleFileSelect(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        
        uploadArea.style.display = 'none';
        selectedFile.style.display = 'flex';
        analyzeButton.disabled = false;
    }

    // Remove file
    removeFile.addEventListener('click', () => {
        fileInput.value = '';
        uploadArea.style.display = 'block';
        selectedFile.style.display = 'none';
        analyzeButton.disabled = true;
    });

    // Form submission
    uploadForm.addEventListener('submit', (e) => {
        loadingOverlay.style.display = 'flex';
    });

    // Format file size
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
</script>
</body> </html>