Spaces:

pranit144
/

Institute_activity_anaylisis

Sleeping

File size: 16,995 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Analytics Dashboard</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/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">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin: 20px auto;
            padding: 30px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .header p {
            color: #7f8c8d;
            font-size: 1.1em;
        }
        .upload-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            border: 2px dashed #dee2e6;
            transition: all 0.3s ease;
        }
        .upload-section:hover {
            border-color: #007bff;
            background: #e3f2fd;
        }
        .upload-icon {
            font-size: 3rem;
            color: #007bff;
            margin-bottom: 20px;
        }
        .btn-primary {
            background: linear-gradient(45deg, #007bff, #0056b3);
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
        }
        .alert {
            border-radius: 10px;
            border: none;
            padding: 15px 20px;
            margin-bottom: 20px;
        }
        .alert-success {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
        }
        .alert-danger {
            background: linear-gradient(45deg, #dc3545, #c82333);
            color: white;
        }
        .plot-container {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .plot-title {
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
        }
        .insight-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        .insight-title {
            font-weight: 600;
            margin-bottom: 10px;
        }
        .swot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        .swot-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            backdrop-filter: blur(5px);
        }
        .swot-item h6 {
            margin-bottom: 10px;
            font-weight: 600;
        }
        .swot-item ul {
            margin: 0;
            padding-left: 20px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stat-card {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .loading {
            text-align: center;
            padding: 40px;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .feature-list {
            list-style: none;
            padding: 0;
        }
        .feature-list li {
            padding: 8px 0;
            color: #6c757d;
        }
        .feature-list i {
            color: #007bff;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Event Analytics Dashboard</h1>
        </div>

        <!-- Flash Messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                        <i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'check-circle' }}"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- Upload Section -->
        <div class="upload-section text-center">
            <div class="upload-icon">
                <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <h3>Upload Your Document</h3>
            <form method="POST" enctype="multipart/form-data" id="uploadForm">
                <div class="mb-3">
                    <input type="file" class="form-control" name="document" accept=".docx" required style="display: none;" id="fileInput">
                    <label for="fileInput" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-folder-open"></i> Choose DOCX File
                    </label>
                </div>
                <div id="fileName" class="mb-3 text-muted"></div>
                <button type="submit" class="btn btn-primary btn-lg" id="uploadBtn">
                    <i class="fas fa-upload"></i> Upload & Analyze
                </button>
            </form>
        </div>

        <!-- Loading Section -->
        <div id="loadingSection" class="loading" style="display: none;">
            <div class="spinner"></div>
            <h4>Processing your document...</h4>
            <p class="text-muted">Please wait while we analyze your event data</p>
        </div>

        <!-- Results Section -->
        {% if plots %}
        <div class="results-section">
            <h2 class="text-center mb-4">
                <i class="fas fa-chart-pie"></i> Analysis Results
            </h2>

            <!-- Statistics Overview -->
            {% if plots.stats %}
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-calculator"></i> Statistics Overview</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">{{ plots.stats.total_events }}</div>
                        <div class="stat-label">Total Events</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">{{ plots.stats.avg_events_per_year }}</div>
                        <div class="stat-label">Avg Events/Year</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">{{ plots.stats.most_active_year }}</div>
                        <div class="stat-label">Most Active Year</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">{{ plots.stats.most_common_category }}</div>
                        <div class="stat-label">Top Category</div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Bar Chart -->
            {% if plots.bar %}
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-chart-bar"></i> Event Distribution by Category</h3>
                {{ plots.bar.plot|safe }}

                {% if plots.bar.insight %}
                <div class="insight-box">
                    <div class="insight-title">📊 Key Insights</div>
                    <p><strong>Main Finding:</strong> {{ plots.bar.insight.main_insight }}</p>

                    <div class="swot-grid">
                        <div class="swot-item">
                            <h6><i class="fas fa-thumbs-up"></i> Strengths</h6>
                            <ul>
                                {% for strength in plots.bar.insight.swot.strengths %}
                                <li>{{ strength }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="swot-item">
                            <h6><i class="fas fa-exclamation-triangle"></i> Weaknesses</h6>
                            <ul>
                                {% for weakness in plots.bar.insight.swot.weaknesses %}
                                <li>{{ weakness }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="swot-item">
                            <h6><i class="fas fa-lightbulb"></i> Opportunities</h6>
                            <ul>
                                {% for opportunity in plots.bar.insight.swot.opportunities %}
                                <li>{{ opportunity }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="swot-item">
                            <h6><i class="fas fa-shield-alt"></i> Threats</h6>
                            <ul>
                                {% for threat in plots.bar.insight.swot.threats %}
                                <li>{{ threat }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

                    <div class="mt-3">
                        <strong>💡 Recommendations:</strong>
                        <ul>
                            {% for recommendation in plots.bar.insight.recommendations %}
                            <li>{{ recommendation }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Pie Chart -->
            {% if plots.pie %}
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-chart-pie"></i> Latest Year Event Distribution</h3>
                {{ plots.pie.plot|safe }}

                {% if plots.pie.insight %}
                <div class="insight-box">
                    <div class="insight-title">🥧 Distribution Analysis</div>
                    <p><strong>Main Finding:</strong> {{ plots.pie.insight.main_insight }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Line Chart -->
            {% if plots.line %}
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-chart-line"></i> Event Trends Over Time</h3>
                {{ plots.line.plot|safe }}

                {% if plots.line.insight %}
                <div class="insight-box">
                    <div class="insight-title">📈 Trend Analysis</div>
                    <p><strong>Main Finding:</strong> {{ plots.line.insight.main_insight }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Area Chart -->
            {% if plots.area %}
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-area-chart"></i> Cumulative Event Distribution</h3>
                {{ plots.area.plot|safe }}

                {% if plots.area.insight %}
                <div class="insight-box">
                    <div class="insight-title">📊 Cumulative Analysis</div>
                    <p><strong>Main Finding:</strong> {{ plots.area.insight.main_insight }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Action Items -->
            <div class="plot-container">
                <h3 class="plot-title"><i class="fas fa-tasks"></i> Action Items & Next Steps</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="insight-box">
                            <div class="insight-title">🎯 Immediate Actions</div>
                            <ul>
                                <li>Review underperforming categories</li>
                                <li>Allocate resources to high-potential areas</li>
                                <li>Plan for balanced event distribution</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="insight-box">
                            <div class="insight-title">🔮 Future Planning</div>
                            <ul>
                                <li>Set targets for next academic year</li>
                                <li>Develop cross-category collaborations</li>
                                <li>Implement regular monitoring system</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

      
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // File input handling
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name;
            const fileNameDiv = document.getElementById('fileName');

            if (fileName) {
                fileNameDiv.innerHTML = `<i class="fas fa-file-word text-primary"></i> Selected: <strong>${fileName}</strong>`;
            } else {
                fileNameDiv.innerHTML = '';
            }
        });

        // Form submission handling
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            const fileInput = document.getElementById('fileInput');
            const uploadBtn = document.getElementById('uploadBtn');
            const loadingSection = document.getElementById('loadingSection');

            if (!fileInput.files[0]) {
                e.preventDefault();
                alert('Please select a DOCX file first!');
                return;
            }

            // Show loading
            loadingSection.style.display = 'block';
            uploadBtn.disabled = true;
            uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

            // Scroll to loading section
            loadingSection.scrollIntoView({ behavior: 'smooth' });
        });

        // Auto-dismiss alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);

        // Smooth scrolling for better UX
        document.addEventListener('DOMContentLoaded', function() {
            // Add smooth scrolling to all links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>