<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyber Wolf Hunter - Vulnerability Report</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .wolf-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .vulnerability-card {
            border-left: 4px solid;
            margin-bottom: 1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .vulnerability-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .high-risk { border-left-color: #dc3545; }
        .medium-risk { border-left-color: #ffc107; }
        .low-risk { border-left-color: #28a745; }
        .stats-card {
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .stats-card:hover {
            transform: translateY(-2px);
        }
        .wolf-logo {
            font-size: 3rem;
            margin-right: 1rem;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .footer-dev {
            background: linear-gradient(135deg, #343a40 0%, #495057 100%);
            color: white;
            padding: 2rem 0;
            margin-top: 3rem;
        }
        .chart-container {
            position: relative;
            height: 300px;
            margin: 2rem 0;
        }
        .risk-badge {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }
        .payload-code {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            padding: 0.5rem;
            font-family: 'Courier New', monospace;
            word-break: break-all;
        }
        .section-title {
            border-bottom: 3px solid #667eea;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="wolf-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="mb-0">
                        <span class="wolf-logo">🐺</span>
                        Cyber Wolf Hunter
                    </h1>
                    <p class="lead mb-0">Comprehensive Website Vulnerability Assessment Report</p>
                </div>
                <div class="col-auto">
                    <div class="text-end">
                        <h5 class="mb-1">{{ results.target }}</h5>
                        <small>Scanned on {{ results.scan_time }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <!-- Executive Summary -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="section-title"><i class="fas fa-chart-line"></i> Executive Summary</h2>
                <div class="card stats-card">
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-globe fa-2x text-primary mb-2"></i>
                                    <h4 class="text-primary">{{ results.target.split('//')[1] if '//' in results.target else results.target }}</h4>
                                    <small class="text-muted">Target Domain</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-bug fa-2x text-info mb-2"></i>
                                    <h4 class="text-info">{{ results.statistics.vulnerabilities_found }}</h4>
                                    <small class="text-muted">Total Issues</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                                    <h4 class="text-danger">{{ results.statistics.high_risk }}</h4>
                                    <small class="text-muted">High Risk</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-exclamation-circle fa-2x text-warning mb-2"></i>
                                    <h4 class="text-warning">{{ results.statistics.medium_risk }}</h4>
                                    <small class="text-muted">Medium Risk</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-info-circle fa-2x text-success mb-2"></i>
                                    <h4 class="text-success">{{ results.statistics.low_risk }}</h4>
                                    <small class="text-muted">Low Risk</small>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <i class="fas fa-clock fa-2x text-secondary mb-2"></i>
                                    <h4 class="text-secondary">{{ results.scan_duration }}s</h4>
                                    <small class="text-muted">Scan Duration</small>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Risk Distribution Chart -->
                        {% if results.statistics.vulnerabilities_found > 0 %}
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="chart-container">
                                    <canvas id="riskChart"></canvas>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart-container">
                                    <canvas id="typeChart"></canvas>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Vulnerability Details -->
        {% if vulnerabilities_by_type %}
        <div class="row">
            <div class="col-12">
                <h2 class="section-title"><i class="fas fa-shield-alt"></i> Vulnerability Details</h2>
                
                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs" id="vulnTabs" role="tablist">
                    {% for vuln_type, vulns in vulnerabilities_by_type.items() %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if loop.first %}active{% endif %}" 
                                id="tab-{{ loop.index }}" 
                                data-bs-toggle="tab" 
                                data-bs-target="#content-{{ loop.index }}" 
                                type="button" role="tab">
                            {{ vuln_type }} 
                            <span class="badge bg-secondary ms-1">{{ vulns|length }}</span>
                        </button>
                    </li>
                    {% endfor %}
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="vulnTabContent">
                    {% for vuln_type, vulns in vulnerabilities_by_type.items() %}
                    <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 
                         id="content-{{ loop.index }}" 
                         role="tabpanel">
                        
                        <div class="mt-3">
                            <h4><i class="fas fa-bug"></i> {{ vuln_type }} Vulnerabilities</h4>
                            <p class="text-muted">Found {{ vulns|length }} issue(s) of this type</p>
                        </div>

                        {% for vuln in vulns %}
                        <div class="vulnerability-card card mb-3 {{ vuln.risk_level }}-risk">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge risk-badge bg-{{ 'danger' if vuln.risk_level == 'high' else ('warning' if vuln.risk_level == 'medium' else 'success') }} me-2">
                                                <i class="fas fa-{{ 'exclamation-triangle' if vuln.risk_level == 'high' else ('exclamation-circle' if vuln.risk_level == 'medium' else 'info-circle') }}"></i>
                                                {{ vuln.severity }}
                                            </span>
                                            <h6 class="card-title mb-0">{{ vuln.description }}</h6>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <strong><i class="fas fa-link"></i> URL:</strong>
                                            <div class="payload-code mt-1">{{ vuln.url }}</div>
                                        </div>

                                        {% if vuln.payload %}
                                        <div class="mb-3">
                                            <strong><i class="fas fa-code"></i> Payload:</strong>
                                            <div class="payload-code mt-1">{{ vuln.payload }}</div>
                                        </div>
                                        {% endif %}

                                        {% if vuln.parameter %}
                                        <div class="mb-3">
                                            <strong><i class="fas fa-tag"></i> Parameter:</strong>
                                            <code class="ms-2">{{ vuln.parameter }}</code>
                                        </div>
                                        {% endif %}

                                        <div class="mb-3">
                                            <strong><i class="fas fa-search"></i> Evidence:</strong>
                                            <span class="ms-2">{{ vuln.evidence }}</span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="alert alert-light border">
                                            <h6 class="alert-heading">
                                                <i class="fas fa-lightbulb text-warning"></i> 
                                                Recommendation
                                            </h6>
                                            <p class="mb-0 small">{{ vuln.recommendation }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% else %}
        <!-- No Vulnerabilities Found -->
        <div class="row">
            <div class="col-12">
                <div class="alert alert-success text-center py-5">
                    <i class="fas fa-shield-alt fa-4x text-success mb-3"></i>
                    <h3><i class="fas fa-check-circle"></i> Excellent Security Posture!</h3>
                    <p class="lead">No vulnerabilities were detected during the comprehensive scan.</p>
                    <p>Your website appears to have strong security measures in place. Continue monitoring and regular security assessments.</p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Scan Metadata -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-info-circle"></i> Scan Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm">
                                    <tr>
                                        <td><strong>Target URL:</strong></td>
                                        <td>{{ results.target }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Scan Started:</strong></td>
                                        <td>{{ results.scan_time }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Scan Duration:</strong></td>
                                        <td>{{ results.scan_duration }} seconds</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm">
                                    <tr>
                                        <td><strong>Report Generated:</strong></td>
                                        <td>{{ current_time }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Scanner Version:</strong></td>
                                        <td>Cyber Wolf Hunter v1.0</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Total Checks:</strong></td>
                                        <td>{{ results.statistics.total_checks }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer-dev">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h5><i class="fas fa-user-shield"></i> Developed By: {{ developer_info.name }}</h5>
                    <p class="mb-2">Cybersecurity Professional & Software Developer</p>
                    <p class="mb-0">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:{{ developer_info.email }}" class="text-light text-decoration-none">
                            {{ developer_info.email }}
                        </a>
                        <span class="mx-3">|</span>
                        <i class="fas fa-globe me-2"></i>
                        <a href="{{ developer_info.portfolio }}" target="_blank" class="text-light text-decoration-none">
                            Portfolio
                        </a>
                        <span class="mx-3">|</span>
                        <i class="fab fa-github me-2"></i>
                        <a href="{{ developer_info.github }}" target="_blank" class="text-light text-decoration-none">
                            GitHub
                        </a>
                    </p>
                </div>
                <div class="col-md-4 text-end">
                    <h5><span class="wolf-logo">🐺</span> Cyber Wolf Hunter</h5>
                    <p class="mb-0">Professional Website Security Assessment Tool</p>
                    <small class="text-muted">Built with Python • Powered by Intelligence</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    {% if results.statistics.vulnerabilities_found > 0 %}
    <script>
        // Risk Distribution Chart
        const riskCtx = document.getElementById('riskChart').getContext('2d');
        new Chart(riskCtx, {
            type: 'doughnut',
            data: {
                labels: ['High Risk', 'Medium Risk', 'Low Risk'],
                datasets: [{
                    data: [{{ results.statistics.high_risk }}, {{ results.statistics.medium_risk }}, {{ results.statistics.low_risk }}],
                    backgroundColor: ['#dc3545', '#ffc107', '#28a745'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Risk Distribution'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Vulnerability Types Chart
        const typeCtx = document.getElementById('typeChart').getContext('2d');
        new Chart(typeCtx, {
            type: 'bar',
            data: {
                labels: [{% for vuln_type, vulns in vulnerabilities_by_type.items() %}'{{ vuln_type }}'{% if not loop.last %},{% endif %}{% endfor %}],
                datasets: [{
                    label: 'Count',
                    data: [{% for vuln_type, vulns in vulnerabilities_by_type.items() %}{{ vulns|length }}{% if not loop.last %},{% endif %}{% endfor %}],
                    backgroundColor: 'rgba(102, 126, 234, 0.6)',
                    borderColor: 'rgba(102, 126, 234, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Vulnerabilities by Type'
                    },
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    </script>
    {% endif %}
</body>
</html>
