749 lines
17 KiB
HTML
749 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Smallpox Eradication Campaign (1950-1980) - Interactive Globe</title>
|
|
|
|
<!-- Mapbox GL JS -->
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
|
|
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #0a0a0f;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 30px 40px;
|
|
background: linear-gradient(180deg, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0) 100%);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.title {
|
|
font-size: 2.5rem;
|
|
font-weight: 900;
|
|
background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #9ca3af;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* Statistics Panel */
|
|
.stats-panel {
|
|
position: absolute;
|
|
top: 140px;
|
|
right: 30px;
|
|
background: rgba(15, 15, 25, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
min-width: 280px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
z-index: 5;
|
|
}
|
|
|
|
.stats-title {
|
|
font-size: 0.9rem;
|
|
color: #9ca3af;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-value.endemic {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.stat-value.cases {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.stat-value.vaccination {
|
|
color: #10b981;
|
|
}
|
|
|
|
/* Event Log */
|
|
.event-log {
|
|
position: absolute;
|
|
bottom: 180px;
|
|
left: 30px;
|
|
background: rgba(15, 15, 25, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
width: 420px;
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
z-index: 5;
|
|
}
|
|
|
|
.event-log-title {
|
|
font-size: 0.9rem;
|
|
color: #9ca3af;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.event-item {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
border-left: 3px solid #8b5cf6;
|
|
animation: slideIn 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.event-year {
|
|
font-weight: 700;
|
|
color: #8b5cf6;
|
|
font-size: 1.1rem;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.event-text {
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
color: #d1d5db;
|
|
}
|
|
|
|
/* Timeline Controls */
|
|
.timeline-controls {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
right: 30px;
|
|
background: rgba(15, 15, 25, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
padding: 24px 30px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
}
|
|
|
|
.year-display {
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.timeline-wrapper {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.timeline-track {
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timeline-progress {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #10b981 100%);
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease-out;
|
|
}
|
|
|
|
.timeline-slider {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 24px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.timeline-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
border: 3px solid #8b5cf6;
|
|
}
|
|
|
|
.timeline-slider::-moz-range-thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
border: 3px solid #8b5cf6;
|
|
}
|
|
|
|
.timeline-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.control-button {
|
|
padding: 14px 32px;
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.control-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.6);
|
|
}
|
|
|
|
.control-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.control-button.secondary {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.control-button.secondary:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Play Prompt */
|
|
.play-prompt {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.2rem;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-align: center;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.play-prompt i {
|
|
font-size: 3rem;
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
color: #8b5cf6;
|
|
}
|
|
|
|
/* Victory Overlay */
|
|
.victory-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.victory-content {
|
|
text-align: center;
|
|
padding: 60px;
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
|
|
border: 2px solid rgba(139, 92, 246, 0.5);
|
|
border-radius: 24px;
|
|
backdrop-filter: blur(20px);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.victory-icon {
|
|
font-size: 6rem;
|
|
margin-bottom: 24px;
|
|
animation: bounce 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
.victory-title {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
margin-bottom: 16px;
|
|
background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.victory-message {
|
|
font-size: 1.3rem;
|
|
line-height: 1.6;
|
|
color: #d1d5db;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.victory-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.victory-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.victory-stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 900;
|
|
color: #10b981;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.victory-stat-label {
|
|
font-size: 0.9rem;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.close-victory {
|
|
padding: 16px 40px;
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.close-victory:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Legend */
|
|
.legend {
|
|
position: absolute;
|
|
top: 140px;
|
|
left: 30px;
|
|
background: rgba(15, 15, 25, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.legend-title {
|
|
font-size: 0.9rem;
|
|
color: #9ca3af;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.legend-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Popup Styling */
|
|
.mapboxgl-popup-content {
|
|
background: rgba(15, 15, 25, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
color: #ffffff;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.popup-content h3 {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.popup-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.popup-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.popup-label {
|
|
font-size: 0.75rem;
|
|
color: #9ca3af;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.popup-value {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #10b981;
|
|
}
|
|
|
|
.popup-significance {
|
|
font-size: 0.9rem;
|
|
color: #d1d5db;
|
|
font-style: italic;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.last-case-popup {
|
|
min-width: 320px;
|
|
}
|
|
|
|
.popup-date {
|
|
font-size: 1rem;
|
|
color: #f59e0b;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.popup-patient,
|
|
.popup-detail {
|
|
font-size: 0.9rem;
|
|
color: #d1d5db;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mapboxgl-popup-tip {
|
|
border-top-color: rgba(15, 15, 25, 0.95) !important;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.stats-panel,
|
|
.legend {
|
|
width: 240px;
|
|
}
|
|
|
|
.event-log {
|
|
width: 320px;
|
|
}
|
|
|
|
.victory-content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.victory-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 20px;
|
|
}
|
|
|
|
.stats-panel {
|
|
top: 120px;
|
|
right: 20px;
|
|
}
|
|
|
|
.legend {
|
|
top: 120px;
|
|
left: 20px;
|
|
}
|
|
|
|
.event-log {
|
|
display: none;
|
|
}
|
|
|
|
.timeline-controls {
|
|
padding: 20px;
|
|
}
|
|
|
|
.year-display {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Map Container -->
|
|
<div id="map"></div>
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1 class="title">Smallpox Eradication Campaign</h1>
|
|
<p class="subtitle">Humanity's Greatest Public Health Achievement (1950-1980)</p>
|
|
</div>
|
|
|
|
<!-- Statistics Panel -->
|
|
<div class="stats-panel">
|
|
<div class="stats-title">Global Statistics</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Endemic Countries</div>
|
|
<div class="stat-value endemic" id="endemic-count">59</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Estimated Annual Cases</div>
|
|
<div class="stat-value cases" id="cases-estimate">2,000,000</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Vaccination Progress</div>
|
|
<div class="stat-value vaccination" id="vaccination-progress">10%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="legend">
|
|
<div class="legend-title">Legend</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #dc2626;"></div>
|
|
<span>Endemic</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #f59e0b;"></div>
|
|
<span>Active Campaign</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #10b981;"></div>
|
|
<span>Eradicated</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #ef4444;"></div>
|
|
<span>Last Cases</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #8b5cf6;"></div>
|
|
<span>Victory</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Log -->
|
|
<div class="event-log">
|
|
<div class="event-log-title">Historical Events</div>
|
|
<div id="event-log"></div>
|
|
</div>
|
|
|
|
<!-- Timeline Controls -->
|
|
<div class="timeline-controls">
|
|
<div class="year-display" id="current-year">1950</div>
|
|
|
|
<div class="timeline-wrapper">
|
|
<div class="timeline-track">
|
|
<div class="timeline-progress" id="timeline-progress"></div>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
id="timeline-slider"
|
|
class="timeline-slider"
|
|
min="1950"
|
|
max="1980"
|
|
value="1950"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="timeline-labels">
|
|
<span>1950</span>
|
|
<span>1960</span>
|
|
<span>1970</span>
|
|
<span>1980</span>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="control-button" id="play-button">
|
|
<i class="fas fa-play"></i> Play
|
|
</button>
|
|
<button class="control-button secondary" id="reset-button">
|
|
<i class="fas fa-redo"></i> Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Play Prompt -->
|
|
<div class="play-prompt" id="play-prompt">
|
|
<i class="fas fa-play-circle"></i>
|
|
<div>Press Play or Space to begin the journey</div>
|
|
</div>
|
|
|
|
<!-- Victory Overlay -->
|
|
<div class="victory-overlay" id="victory-overlay">
|
|
<div class="victory-content">
|
|
<div class="victory-icon">🎉</div>
|
|
<h2 class="victory-title">Smallpox Eradicated!</h2>
|
|
<p class="victory-message">
|
|
On May 8, 1980, the World Health Organization declared smallpox eradicated from the face of the Earth—the first disease ever eliminated by human effort.
|
|
</p>
|
|
<div class="victory-stats">
|
|
<div class="victory-stat">
|
|
<span class="victory-stat-value">30</span>
|
|
<span class="victory-stat-label">Years</span>
|
|
</div>
|
|
<div class="victory-stat">
|
|
<span class="victory-stat-value">465M</span>
|
|
<span class="victory-stat-label">Vaccinations</span>
|
|
</div>
|
|
<div class="victory-stat">
|
|
<span class="victory-stat-value">0</span>
|
|
<span class="victory-stat-label">Cases Today</span>
|
|
</div>
|
|
</div>
|
|
<button class="close-victory" id="close-victory">
|
|
Celebrate This Achievement
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load shared Mapbox configuration BEFORE main script -->
|
|
<script type="module">
|
|
import { MAPBOX_CONFIG } from '../shared/mapbox-config.js';
|
|
MAPBOX_CONFIG.applyToken(); // Validates and applies token
|
|
</script>
|
|
|
|
<!-- Load main application -->
|
|
<script type="module" src="src/index.js"></script>
|
|
|
|
</body>
|
|
</html>
|