|
|
<!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> |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
{% if plots %} |
|
|
<div class="results-section"> |
|
|
<h2 class="text-center mb-4"> |
|
|
<i class="fas fa-chart-pie"></i> Analysis Results |
|
|
</h2> |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
{% 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 %} |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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 = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
loadingSection.style.display = 'block'; |
|
|
uploadBtn.disabled = true; |
|
|
uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...'; |
|
|
|
|
|
|
|
|
loadingSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
const alerts = document.querySelectorAll('.alert'); |
|
|
alerts.forEach(function(alert) { |
|
|
const bsAlert = new bootstrap.Alert(alert); |
|
|
bsAlert.close(); |
|
|
}); |
|
|
}, 5000); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
