Enhance plot titles and improve UI consistency

- Added pressure level and plot type (Static/Interactive) to plot titles
- Fixed color theme support for all available themes in interactive plots
- Restored gradient backgrounds for gallery and view_interactive pages
- Standardized button styling on index page (removed underlines, consistent sizing)
- Maintained glassmorphism design for gallery/viewer pages while keeping clean design for main dashboard

data_processor.py

@@ -281,6 +281,7 @@ class NetCDFProcessor:
                 data_array = data_array.isel({coords['time']: time_index})
         
         # Handle pressure/level dimension for atmospheric variables
+        actual_pressure = None
         if coords['level'] and coords['level'] in data_array.dims:
             if pressure_level is None:
                 # Default to surface level (highest pressure)
@@ -293,6 +294,9 @@ class NetCDFProcessor:
             
             data_array = data_array.isel({coords['level']: level_index})
             print(f"Selected pressure level: {actual_pressure} hPa (requested: {pressure_level} hPa)")
+        elif pressure_level is not None:
+            # Store the requested pressure level even if no level dimension exists
+            actual_pressure = pressure_level
         
         # Handle batch dimension (usually the first dimension for CAMS data)
         shape = data_array.shape
@@ -322,7 +326,7 @@ class NetCDFProcessor:
             'shape': data_values.shape,
             'lats': lats,
             'lons': lons,
-            'pressure_level': pressure_level if coords['level'] and coords['level'] in dataset[variable_name].dims else None,
+            'pressure_level': actual_pressure,
             'time_index': time_index,
             'timestamp': selected_timestamp,
             'timestamp_str': timestamp_str,

templates/interactive_plot.html

@@ -6,105 +6,134 @@
     <title>Interactive Air Pollution Map - India CAMS Dashboard</title>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .container {
             max-width: 1400px;
             margin: 0 auto;
             padding: 20px;
-            background: #f5f5f5;
         }
-        .container {
-            background: white;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
         }
-        h1 { 
-            color: #2c3e50; 
-            text-align: center; 
-            margin-bottom: 30px; 
+
+        .header h1 {
+            color: #2c3e50;
+            margin-bottom: 10px;
+            text-align: center;
         }
+
         .plot-container {
-            background: #f8f9fa;
-            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
             padding: 20px;
             margin-bottom: 20px;
-            border-left: 4px solid #3498db;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
         }
+
         .plot-info {
-            background: #f8f9fa;
-            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
             padding: 20px;
-            border-left: 4px solid #3498db;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
         }
+
         .info-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
             margin-bottom: 20px;
         }
+
         .info-item {
-            background: white;
+            background: rgba(52, 73, 94, 0.1);
             padding: 15px;
-            border-radius: 8px;
+            border-radius: 10px;
             border-left: 4px solid #3498db;
         }
+
         .info-item h3 {
             color: #2c3e50;
             margin-bottom: 5px;
             font-size: 14px;
             font-weight: 600;
         }
+
         .info-item p {
             color: #34495e;
             font-size: 16px;
             font-weight: 500;
         }
+
         .controls {
             display: flex;
             gap: 15px;
             flex-wrap: wrap;
             margin-bottom: 20px;
         }
+
         .btn {
-            background: #3498db;
+            background: linear-gradient(45deg, #3498db, #2980b9);
             color: white;
             padding: 12px 24px;
             border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-            transition: background 0.3s;
+            border-radius: 25px;
             text-decoration: none;
-            display: inline-block;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            font-size: 14px;
         }
-        .btn:hover { 
-            background: #2980b9; 
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
         }
+
         .btn-download {
-            background: #27ae60;
-        }
-        .btn-download:hover {
-            background: #219a52;
+            background: linear-gradient(45deg, #27ae60, #219a52);
         }
+
         .btn-back {
-            background: #95a5a6;
-        }
-        .btn-back:hover {
-            background: #7f8c8d;
+            background: linear-gradient(45deg, #95a5a6, #7f8c8d);
         }
+
         .instructions {
-            background: #f8f9fa;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
             padding: 20px;
-            border-radius: 8px;
             margin-bottom: 20px;
-            border-left: 4px solid #3498db;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(4px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
         }
+
         .instructions h3 {
             color: #2c3e50;
             margin-bottom: 15px;
         }
+
         .instructions ul {
             color: #34495e;
         }
@@ -167,10 +196,12 @@
 </head>
 <body>
     <div class="container">
-        <h1>🌍 Interactive Air Pollution Map</h1>
-        <p style="text-align: center; color: #7f8c8d; margin-bottom: 30px;">
-            Hover over the map to see exact coordinates and pollution values. Use the toolbar to zoom, pan, and download.
-        </p>
+        <div class="header">
+            <h1>🌍 Interactive Air Pollution Map</h1>
+            <p style="text-align: center; color: #7f8c8d; margin-top: 10px;">
+                Hover over the map to see exact coordinates and pollution values. Use the toolbar to zoom, pan, and download.
+            </p>
+        </div>
 
         <div class="instructions">
             <h3>🎯 How to Use This Interactive Map:</h3>
@@ -239,9 +270,9 @@
                     <h3>⏰ Generated</h3>
                     <p>{{ plot_info.generated_time }}</p>
                 </div>
-            </div>
+            <!-- </div>
 
-            <div class="info-grid">
+            <div class="info-grid"> -->
                 <div class="info-item">
                     <h3>📊 Minimum Value</h3>
                     <p>{{ "%.3f"|format(plot_info.data_range.min) }}{% if plot_info.units %} {{ plot_info.units }}{% endif %}</p>