make it in the white and purple type of theme

components/air-quality-card.js

@@ -9,10 +9,10 @@ class AirQualityCard extends HTMLElement {
           background: var(--card-bg);
           border-radius: 16px;
           padding: 1.5rem;
-          box-shadow: 0 0 30px rgba(0, 201, 255, 0.2);
+          box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
           border: 1px solid var(--primary);
           backdrop-filter: blur(10px);
-          color: var(--primary);
+          color: var(--primary-dark);
           font-family: 'Poppins', sans-serif;
           position: relative;
           overflow: hidden;
@@ -24,7 +24,7 @@ class AirQualityCard extends HTMLElement {
           left: -50%;
           width: 200%;
           height: 200%;
-          background: radial-gradient(circle, rgba(0, 201, 255, 0.1) 0%, transparent 70%);
+          background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
 animation: rotate 20s linear infinite;
           z-index: -1;
         }
@@ -38,10 +38,10 @@ animation: rotate 20s linear infinite;
           font-size: 1.5rem;
           font-weight: 700;
           margin-bottom: 1.5rem;
-          color: var(--primary);
+          color: var(--primary-dark);
           display: flex;
           align-items: center;
-          text-shadow: 0 0 10px rgba(0, 201, 255, 0.5);
+          text-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
 }
         
         .card-title i {
@@ -59,19 +59,19 @@ animation: rotate 20s linear infinite;
           background: rgba(0, 0, 0, 0.4);
           border-radius: 12px;
           padding: 1rem;
-          border: 1px solid rgba(0, 255, 255, 0.2);
-          box-shadow: 0 0 15px rgba(0, 201, 255, 0.1);
+          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;
         }
         
         .metric:hover {
           transform: translateY(-5px);
-          box-shadow: 0 0 25px rgba(0, 201, 255, 0.3);
+          box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
 }
         
         .metric-title {
           font-size: 0.9rem;
-          color: rgba(0, 201, 255, 0.8);
+          color: rgba(139, 92, 246, 0.8);
 margin-bottom: 0.5rem;
           text-transform: uppercase;
           letter-spacing: 1px;
@@ -93,7 +93,7 @@ margin-bottom: 0.5rem;
           font-size: 1.8rem;
           font-weight: 700;
           color: white;
-          text-shadow: 0 0 10px rgba(0, 201, 255, 0.7);
+          text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
 }
         
         .metric-subtext {
@@ -116,9 +116,9 @@ margin-top: 0.5rem;
           border-radius: 4px 4px 0 0;
           transition: height 1s ease-out;
         }
-        .co2-gauge { background: linear-gradient(to top, var(--success), var(--primary)); }
+        .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, #0099ff, var(--primary)); }
+        .aqi-gauge { background: linear-gradient(to top, #a78bfa, var(--primary)); }
 .gauge-markers {
           position: absolute;
           bottom: 0;

style.css

@@ -1,35 +1,35 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
 :root {
-  --primary: #00c9ff;
-  --primary-dark: #00a8ff;
-  --secondary: #00ffaa;
-  --danger: #ff3d3d;
-  --warning: #ffaa00;
-  --success: #00ff88;
-  --dark: #0f172a;
-  --light: #f8fafc;
-  --muted: #64748b;
-  --card-bg: rgba(15, 23, 42, 0.8);
-  --card-border: rgba(0, 201, 255, 0.3);
+  --primary: #8b5cf6;
+  --primary-dark: #7c3aed;
+  --secondary: #d946ef;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --success: #10b981;
+  --dark: #111827;
+  --light: #f9fafb;
+  --muted: #6b7280;
+  --card-bg: rgba(255, 255, 255, 0.9);
+  --card-border: rgba(139, 92, 246, 0.3);
 }
 
 body {
   font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
   min-height: 100vh;
-  color: #f8fafc;
+  color: #111827;
 }
 .glass-card {
   background: var(--card-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 4px 30px 0 rgba(0, 201, 255, 0.1);
+  box-shadow: 0 4px 30px 0 rgba(139, 92, 246, 0.1);
   transition: all 0.3s ease;
   border: 1px solid var(--card-border);
 }
 .glass-card:hover {
-  box-shadow: 0 8px 40px 0 rgba(0, 201, 255, 0.2);
+  box-shadow: 0 8px 40px 0 rgba(139, 92, 246, 0.2);
   transform: translateY(-2px);
 }
 .led {
@@ -148,9 +148,8 @@ body {
 ::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
 }
-
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 201, 255, 0.4);
+  background: rgba(139, 92, 246, 0.4);
   border-radius: 4px;
 }
 
@@ -169,6 +168,6 @@ body {
 
 /* Glow effects */
 .glow-primary {
-  box-shadow: 0 0 15px rgba(0, 201, 255, 0.5);
+  box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
 }
 .g