Spaces:

dev-Rachitgarg
/

airsense-cyberdash-3000

Running

App Files Files Community

dev-Rachitgarg commited on Nov 17, 2025

Commit

6f42b99

verified ·

1 Parent(s): 99b2ed4

make it in the light themed

Browse files

and
Air Quality Trends
CO₂ Level
0 ppm
Smoke Level
0 ppm
Air Quality Index
and themes component too

Files changed (3) hide show

components/air-quality-card.js +67 -0
index.html +10 -8
style.css +19 -19

components/air-quality-card.js ADDED Viewed

	@@ -0,0 +1,67 @@

+class AirQualityCard extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .air-quality-card {
+          background: white;
+          border-radius: 12px;
+          padding: 1.5rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+          border: 1px solid rgba(203, 213, 225, 0.3);
+        }
+        .card-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: #1e293b;
+          display: flex;
+          align-items: center;
+        }
+        .card-title i {
+          margin-right: 0.5rem;
+        }
+        .metric {
+          margin-bottom: 1rem;
+        }
+        .metric-title {
+          font-size: 0.875rem;
+          color: #64748b;
+          margin-bottom: 0.25rem;
+        }
+        .metric-value {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: #1e293b;
+          font-family: 'Orbitron', sans-serif;
+        }
+        .metric-subtext {
+          font-size: 0.75rem;
+          color: #94a3b8;
+        }
+      </style>
+      <div class="air-quality-card">
+        <h3 class="card-title">
+          <i data-feather="wind"></i>
+          Air Quality Trends
+        </h3>
+        <div class="metric">
+          <p class="metric-title">CO₂ Level</p>
+          <p class="metric-value">0 ppm</p>
+          <p class="metric-subtext">Normal range: 400-1000ppm</p>
+        </div>
+        <div class="metric">
+          <p class="metric-title">Smoke Level</p>
+          <p class="metric-value">0 ppm</p>
+          <p class="metric-subtext">Detector sensitivity: 0.5ppm</p>
+        </div>
+        <div class="metric">
+          <p class="metric-title">Air Quality Index</p>
+          <p class="metric-value">0</p>
+          <p class="metric-subtext">Good</p>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('air-quality-card', AirQualityCard);

index.html CHANGED Viewed

@@ -12,8 +12,8 @@
   <script src="components/navbar.js"></script>
   <script src="components/footer.js"></script>
 </head>
-<body class="bg-gray-900 text-white font-sans">
-  <custom-navbar></custom-navbar>
   <main class="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
     <!-- Left Column -->
@@ -39,9 +39,9 @@
             <span class="text-sm text-gray-400">Battery</span>
             <span id="batteryPercent" class="text-sm">—%</span>
           </div>
-          <div class="w-full bg-gray-800 rounded-full h-2.5">
             <div id="batteryLevelBar" class="h-2.5 rounded-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 0%"></div>
-          </div>
           <p id="hoursLeft" class="text-xs text-gray-400 mt-1">— hrs left</p>
         </div>
@@ -131,11 +131,13 @@
         </div>
       </div>
     </div>
     <!-- Right Column -->
     <div class="lg:col-span-3 space-y-6">
       <!-- Connection Status -->
-      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
         <h2 class="text-xl font-bold mb-4 flex items-center">
           <i data-feather="wifi" class="mr-2"></i> Connection
         </h2>
@@ -214,10 +216,10 @@
   </div>
   <custom-footer></custom-footer>
   <script src="gauges.js"></script>
   <script src="app.js"></script>
-  <script>
     feather.replace();
     document.addEventListener('DOMContentLoaded', () => {
       // Initialize tooltips

   <script src="components/navbar.js"></script>
   <script src="components/footer.js"></script>
 </head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+<custom-navbar></custom-navbar>
   <main class="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
     <!-- Left Column -->
             <span class="text-sm text-gray-400">Battery</span>
             <span id="batteryPercent" class="text-sm">—%</span>
           </div>
+          <div class="w-full bg-gray-200 rounded-full h-2.5">
             <div id="batteryLevelBar" class="h-2.5 rounded-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 0%"></div>
+</div>
           <p id="hoursLeft" class="text-xs text-gray-400 mt-1">— hrs left</p>
         </div>
         </div>
       </div>
     </div>
     <!-- Right Column -->
     <div class="lg:col-span-3 space-y-6">
+      <!-- Air Quality Card -->
+      <air-quality-card></air-quality-card>
       <!-- Connection Status -->
+<div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
         <h2 class="text-xl font-bold mb-4 flex items-center">
           <i data-feather="wifi" class="mr-2"></i> Connection
         </h2>
   </div>
   <custom-footer></custom-footer>
+  <script src="components/air-quality-card.js"></script>
   <script src="gauges.js"></script>
   <script src="app.js"></script>
+<script>
     feather.replace();
     document.addEventListener('DOMContentLoaded', () => {
       // Initialize tooltips

style.css CHANGED Viewed

@@ -1,71 +1,71 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap');
 :root {
-  --primary: #6366f1;
-  --primary-dark: #4f46e5;
   --secondary: #10b981;
-  --danger: #ef4444;
-  --warning: #f59e0b;
-  --success: #10b981;
-  --info: #3b82f6;
   --dark: #1e293b;
-  --light: #f8fafc;
   --muted: #64748b;
 }
 body {
   font-family: 'Poppins', sans-serif;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
   min-height: 100vh;
-  color: white;
 }
 .glass-card {
-  background: rgba(15, 23, 42, 0.7);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
   transition: all 0.3s ease;
 }
 .glass-card:hover {
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
   transform: translateY(-2px);
 }
 .led {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s ease;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0);
 }
 .led-green {
   background-color: #10b981;
 }
 .led-yellow {
   background-color: #f59e0b;
 }
 .led-red {
   background-color: #ef4444;
 }
 .led-active-green {
-  box-shadow: 0 0 15px #10b981;
 }
 .led-active-yellow {
-  box-shadow: 0 0 15px #f59e0b;
 }
 .led-active-red {
-  box-shadow: 0 0 15px #ef4444;
 }
 .led-pulse {
   animation: pulse 1.5s infinite;
 }

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap');
 :root {
+  --primary: #4f46e5;
+  --primary-dark: #4338ca;
   --secondary: #10b981;
+  --danger: #dc2626;
+  --warning: #d97706;
+  --success: #059669;
+  --info: #2563eb;
   --dark: #1e293b;
+  --light: #ffffff;
   --muted: #64748b;
 }
 body {
   font-family: 'Poppins', sans-serif;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   min-height: 100vh;
+  color: #1e293b;
 }
 .glass-card {
+  background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  border: 1px solid rgba(203, 213, 225, 0.3);
 }
 .glass-card:hover {
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
   transform: translateY(-2px);
 }
 .led {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s ease;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .led-green {
   background-color: #10b981;
+  border: 1px solid #059669;
 }
 .led-yellow {
   background-color: #f59e0b;
+  border: 1px solid #d97706;
 }
 .led-red {
   background-color: #ef4444;
+  border: 1px solid #dc2626;
 }
 .led-active-green {
+  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
 }
 .led-active-yellow {
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
 }
 .led-active-red {
+  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
 }
 .led-pulse {
   animation: pulse 1.5s infinite;
 }