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

interactive_plot_generator.py

@@ -152,11 +152,11 @@ class InteractiveIndiaMapPlotter:
                     for polygon in row.geometry.geoms:
                         self._add_polygon_trace(fig, polygon)
             
-            # Create title
+            # Create title - include pressure level and plot type
             if custom_title:
                 title = custom_title
             else:
-                title = f'{display_name} Concentration over India'
+                title = f'{display_name} Concentration over India (Interactive)'
                 if pressure_level:
                     title += f' at {pressure_level} hPa'
                 title += f' on {time_stamp}'

plot_generator.py

@@ -130,12 +130,13 @@ class IndiaMapPlotter:
             ax.set_ylabel("Latitude", fontsize=10)
             ax.tick_params(axis='both', which='major', labelsize=10)
             
-            # Title creation logic remains the same
+            # Title creation logic - include pressure level and plot type
             if custom_title:
                 title = custom_title
             else:
-                title = f'{display_name} Concentration over India'
-                if pressure_level: title += f' at {pressure_level} hPa'
+                title = f'{display_name} Concentration over India (Static)'
+                if pressure_level: 
+                    title += f' at {pressure_level} hPa'
                 title += f' on {time_stamp}'
             plt.title(title, fontsize=14, pad=20, weight='bold')
             

templates/gallery.html

@@ -39,6 +39,29 @@
             margin-bottom: 10px;
         }
 
+        h1 { 
+            color: #2c3e50; 
+            text-align: center; 
+            margin-bottom: 30px; 
+        }
+        h2 { 
+            color: #34495e; 
+            border-bottom: 2px solid #3498db; 
+            padding-bottom: 10px; 
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .section {
+            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);
+        }
         .controls {
             display: flex;
             gap: 15px;
@@ -46,7 +69,6 @@
             margin-bottom: 20px;
             flex-wrap: wrap;
         }
-
         .btn {
             background: linear-gradient(45deg, #3498db, #2980b9);
             color: white;
@@ -59,38 +81,17 @@
             cursor: pointer;
             font-size: 14px;
         }
-
         .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
         }
-
         .btn-secondary {
             background: linear-gradient(45deg, #95a5a6, #7f8c8d);
         }
-
         .btn-danger {
             background: linear-gradient(45deg, #e74c3c, #c0392b);
         }
 
-        .section {
-            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);
-        }
-
-        .section h2 {
-            color: #2c3e50;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
         .plots-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -168,7 +169,6 @@
             gap: 8px;
             justify-content: space-between;
         }
-
         .btn-small {
             padding: 6px 12px;
             font-size: 12px;
@@ -176,17 +176,14 @@
             text-decoration: none;
             font-weight: 500;
         }
-
         .btn-view {
             background: linear-gradient(45deg, #27ae60, #219a52);
             color: white;
         }
-
         .btn-download {
             background: linear-gradient(45deg, #f39c12, #e67e22);
             color: white;
         }
-
         .btn-delete {
             background: linear-gradient(45deg, #e74c3c, #c0392b);
             color: white;
@@ -198,7 +195,6 @@
             gap: 15px;
             margin-bottom: 20px;
         }
-
         .stat-card {
             background: rgba(52, 152, 219, 0.1);
             padding: 15px;

templates/index.html

@@ -59,6 +59,8 @@
             font-weight: 600;
             transition: all 0.3s;
             position: relative;
+            text-decoration: none;
+            display: inline-block;
         }
         .btn:hover { background: #2980b9; }
         .btn:disabled {
@@ -156,7 +158,7 @@
         <h1>🌍 CAMS Air Pollution Visualization</h1>
         
         <div style="text-align: center; margin-bottom: 20px;">
-            <a href="{{ url_for('gallery') }}" class="btn" style="font-size: 14px; padding: 8px 16px; margin-right: 10px;">
+            <a href="{{ url_for('gallery') }}" class="btn">
                 📊 View Plot Gallery
             </a>
         </div>
@@ -273,7 +275,7 @@
         <div class="cleanup-section">
             <h3>🧹 Maintenance</h3>
             <p>Clean up old files to free up disk space</p>
-            <a href="/cleanup" class="btn" style="font-size: 14px; padding: 8px 16px;">Clean Old Files</a>
+            <a href="/cleanup" class="btn">Clean Old Files</a>
         </div>
     </div>
     

templates/interactive_plot.html

@@ -6,113 +6,107 @@
     <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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-        }
-
-        .container {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             max-width: 1400px;
             margin: 0 auto;
             padding: 20px;
+            background: #f5f5f5;
         }
-
-        .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);
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
-
-        .header h1 {
-            color: #2c3e50;
-            margin-bottom: 10px;
-            text-align: center;
+        h1 { 
+            color: #2c3e50; 
+            text-align: center; 
+            margin-bottom: 30px; 
         }
-
         .plot-container {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
             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);
+            border-left: 4px solid #3498db;
         }
-
         .plot-info {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
             padding: 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);
+            border-left: 4px solid #3498db;
         }
-
         .info-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 15px;
             margin-bottom: 20px;
         }
-
         .info-item {
-            background: rgba(52, 73, 94, 0.1);
+            background: white;
             padding: 15px;
-            border-radius: 10px;
+            border-radius: 8px;
             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: linear-gradient(45deg, #3498db, #2980b9);
+            background: #3498db;
             color: white;
             padding: 12px 24px;
             border: none;
-            border-radius: 25px;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
+            border-radius: 5px;
             cursor: pointer;
-            font-size: 14px;
+            font-size: 16px;
+            font-weight: 600;
+            transition: background 0.3s;
+            text-decoration: none;
+            display: inline-block;
         }
-
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
+        .btn:hover { 
+            background: #2980b9; 
         }
-
         .btn-download {
-            background: linear-gradient(45deg, #27ae60, #219a52);
+            background: #27ae60;
+        }
+        .btn-download:hover {
+            background: #219a52;
+        }
+        .btn-back {
+            background: #95a5a6;
+        }
+        .btn-back:hover {
+            background: #7f8c8d;
+        }
+        .instructions {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            border-left: 4px solid #3498db;
+        }
+        .instructions h3 {
+            color: #2c3e50;
+            margin-bottom: 15px;
+        }
+        .instructions ul {
+            color: #34495e;
         }
 
         .btn-download:hover {
@@ -173,12 +167,10 @@
 </head>
 <body>
     <div class="container">
-        <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>
+        <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="instructions">
             <h3>🎯 How to Use This Interactive Map:</h3>

templates/view_interactive.html

@@ -47,7 +47,6 @@
             margin-bottom: 20px;
             flex-wrap: wrap;
         }
-
         .btn {
             background: linear-gradient(45deg, #3498db, #2980b9);
             color: white;
@@ -60,20 +59,16 @@
             cursor: pointer;
             font-size: 14px;
         }
-
         .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
         }
-
         .btn-secondary {
             background: linear-gradient(45deg, #95a5a6, #7f8c8d);
         }
-
         .btn-download {
             background: linear-gradient(45deg, #27ae60, #219a52);
         }
-
         .plot-container {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 15px;
@@ -82,13 +77,11 @@
             backdrop-filter: blur(4px);
             border: 1px solid rgba(255, 255, 255, 0.18);
         }
-
         .plot-content {
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         }
-
         .plot-info-section {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 15px;