make AIR QUALITY MONITOR

components/air-quality-card.js

@@ -6,30 +6,29 @@ class AirQualityCard extends HTMLElement {
       <style>
         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
         .air-quality-card {
-          background: var(--card-bg);
+          background: rgba(255, 255, 255, 0.95);
           border-radius: 16px;
           padding: 1.5rem;
-          box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
-          border: 1px solid var(--primary);
+          box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
+          border: 1px solid rgba(139, 92, 246, 0.2);
           backdrop-filter: blur(10px);
-          color: var(--primary-dark);
+          color: #5b21b6;
           font-family: 'Poppins', sans-serif;
           position: relative;
           overflow: hidden;
         }
-.air-quality-card::before {
+        .air-quality-card::before {
           content: '';
           position: absolute;
           top: -50%;
           left: -50%;
           width: 200%;
           height: 200%;
-          background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
-animation: rotate 20s linear infinite;
+          background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+          animation: rotate 20s linear infinite;
           z-index: -1;
         }
-        
-        @keyframes rotate {
+@keyframes rotate {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
@@ -53,37 +52,32 @@ animation: rotate 20s linear infinite;
           grid-template-columns: 1fr;
           gap: 1.5rem;
         }
-        
         .metric {
           position: relative;
-          background: rgba(0, 0, 0, 0.4);
+          background: rgba(255, 255, 255, 0.9);
           border-radius: 12px;
           padding: 1rem;
-          border: 1px solid rgba(139, 92, 246, 0.2);
-          box-shadow: 0 0 15px rgba(139, 92, 246, 0.1);
-transition: all 0.3s ease;
+          border: 1px solid rgba(139, 92, 246, 0.15);
+          box-shadow: 0 0 15px rgba(139, 92, 246, 0.05);
+          transition: all 0.3s ease;
         }
-        
-        .metric:hover {
+.metric:hover {
           transform: translateY(-5px);
           box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
 }
-        
         .metric-title {
           font-size: 0.9rem;
-          color: rgba(139, 92, 246, 0.8);
-margin-bottom: 0.5rem;
+          color: #7c3aed;
+          margin-bottom: 0.5rem;
           text-transform: uppercase;
           letter-spacing: 1px;
         }
-        
-        .gauge-container {
+.gauge-container {
           width: 100%;
           height: 120px;
           position: relative;
           margin: 0.5rem 0;
         }
-        
         .gauge-value {
           position: absolute;
           bottom: 0;
@@ -92,17 +86,15 @@ margin-bottom: 0.5rem;
           text-align: center;
           font-size: 1.8rem;
           font-weight: 700;
-          color: white;
-          text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
-}
-        
+          color: #5b21b6;
+          text-shadow: 0 0 10px rgba(139, 92, 246, 0.1);
+        }
         .metric-subtext {
           font-size: 0.75rem;
-          color: rgba(0, 201, 255, 0.6);
-margin-top: 0.5rem;
+          color: #6b7280;
+          margin-top: 0.5rem;
         }
-        
-        .gauge {
+.gauge {
           width: 100%;
           height: 100%;
           position: relative;
@@ -119,7 +111,7 @@ margin-top: 0.5rem;
         .co2-gauge { background: linear-gradient(to top, var(--success), #8b5cf6); }
         .smoke-gauge { background: linear-gradient(to top, var(--warning), var(--danger)); }
         .aqi-gauge { background: linear-gradient(to top, #a78bfa, var(--primary)); }
-.gauge-markers {
+        .gauge-markers {
           position: absolute;
           bottom: 0;
           width: 100%;
@@ -132,7 +124,7 @@ margin-top: 0.5rem;
         
         .gauge-marker {
           width: 2px;
-          background: rgba(255, 255, 255, 0.3);
+          background: rgba(139, 92, 246, 0.2);
           position: relative;
         }
         
@@ -143,9 +135,9 @@ margin-top: 0.5rem;
           left: 50%;
           transform: translateX(-50%);
           font-size: 0.6rem;
-          color: rgba(255, 255, 255, 0.7);
+          color: #6b7280;
         }
-      </style>
+</style>
       
       <div class="air-quality-card">
         <h3 class="card-title">