Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aurora Prediction Runs - CAMS Pollution Dashboard</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| color: white; | |
| } | |
| .header h1 { | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .header p { | |
| font-size: 1.2em; | |
| opacity: 0.9; | |
| } | |
| .back-link { | |
| display: inline-block; | |
| color: white; | |
| text-decoration: none; | |
| padding: 10px 20px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 25px; | |
| margin-bottom: 30px; | |
| transition: background 0.3s ease; | |
| } | |
| .back-link:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .runs-container { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .no-runs { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: #666; | |
| } | |
| .no-runs h3 { | |
| font-size: 1.5em; | |
| margin-bottom: 15px; | |
| color: #999; | |
| } | |
| .run-card { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border-left: 5px solid #667eea; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .run-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .run-header { | |
| display: flex; | |
| justify-content: between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .run-title { | |
| font-size: 1.3em; | |
| font-weight: bold; | |
| color: #333; | |
| margin-right: auto; | |
| } | |
| .run-status { | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.9em; | |
| font-weight: bold; | |
| } | |
| .status-available { | |
| background: #d4edda; | |
| color: #155724; | |
| } | |
| .status-unavailable { | |
| background: #f8d7da; | |
| color: #721c24; | |
| } | |
| .run-details { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.95em; | |
| } | |
| .detail-icon { | |
| margin-right: 8px; | |
| font-size: 1.1em; | |
| } | |
| .detail-label { | |
| font-weight: bold; | |
| margin-right: 8px; | |
| color: #555; | |
| } | |
| .detail-value { | |
| color: #333; | |
| } | |
| .run-actions { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(135deg, #6c757d 0%, #495057 100%); | |
| } | |
| .btn:disabled { | |
| background: #bdc3c7; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .summary-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| text-align: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-number { | |
| font-size: 2em; | |
| font-weight: bold; | |
| color: #667eea; | |
| display: block; | |
| } | |
| .stat-label { | |
| color: #666; | |
| font-size: 0.9em; | |
| margin-top: 5px; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| .runs-container { | |
| padding: 20px; | |
| } | |
| .run-details { | |
| grid-template-columns: 1fr; | |
| } | |
| .run-actions { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| text-align: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🔮 Aurora Prediction Runs</h1> | |
| <p>Browse and manage your atmospheric prediction runs</p> | |
| </div> | |
| <a href="{{ url_for('index') }}" class="back-link">← Back to Dashboard</a> | |
| <div class="runs-container"> | |
| {% if runs %} | |
| <!-- Summary Statistics --> | |
| <div class="summary-stats"> | |
| <div class="stat-card"> | |
| <span class="stat-number">{{ runs|length }}</span> | |
| <div class="stat-label">Total Runs</div> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">{{ runs|selectattr("available")|list|length }}</span> | |
| <div class="stat-label">Available</div> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">{{ (runs|map(attribute="steps")|sum) or 0 }}</span> | |
| <div class="stat-label">Total Steps</div> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">{{ (runs|map(attribute="time_coverage_hours")|sum) or 0 }}h</span> | |
| <div class="stat-label">Total Coverage</div> | |
| </div> | |
| </div> | |
| <!-- Prediction Runs List --> | |
| {% for run in runs %} | |
| <div class="run-card"> | |
| <div class="run-header"> | |
| <div class="run-title">📅 {{ run.date }}</div> | |
| <div class="run-status {{ 'status-available' if run.available else 'status-unavailable' }}"> | |
| {{ '✅ Available' if run.available else '❌ Missing' }} | |
| </div> | |
| </div> | |
| <div class="run-details"> | |
| <div class="detail-item"> | |
| <span class="detail-icon">🕐</span> | |
| <span class="detail-label">Run Time:</span> | |
| <span class="detail-value">{{ run.run_timestamp[:8] }} {{ run.run_timestamp[9:].replace('_', ':') }}</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-icon">📊</span> | |
| <span class="detail-label">Steps:</span> | |
| <span class="detail-value">{{ run.steps }} steps</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-icon">⏱️</span> | |
| <span class="detail-label">Coverage:</span> | |
| <span class="detail-value">{{ run.time_coverage_hours }}h forward</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-icon">📥</span> | |
| <span class="detail-label">Input Times:</span> | |
| <span class="detail-value">{{ run.input_times|join(", ") }}</span> | |
| </div> | |
| </div> | |
| <div class="run-actions"> | |
| {% if run.available %} | |
| <a href="{{ url_for('aurora_variables', run_dir=run.relative_path) }}" | |
| class="btn"> | |
| 📊 View Variables | |
| </a> | |
| <a href="{{ url_for('download_prediction_netcdf', filename=run.relative_path) }}" | |
| class="btn btn-secondary"> | |
| 💾 Download Files | |
| </a> | |
| {% else %} | |
| <button class="btn" disabled> | |
| ❌ File Not Available | |
| </button> | |
| {% endif %} | |
| <a href="{{ url_for('aurora_predict') }}" class="btn btn-secondary"> | |
| 🔄 Create New Run | |
| </a> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| {% else %} | |
| <div class="no-runs"> | |
| <h3>🔮 No Aurora Prediction Runs Found</h3> | |
| <p>You haven't created any Aurora predictions yet.</p> | |
| <p style="margin-top: 20px;"> | |
| <a href="{{ url_for('aurora_predict') }}" class="btn"> | |
| 🚀 Create Your First Prediction | |
| </a> | |
| </p> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </body> | |
| </html> |