Hugging Face's logo

Spaces:
dev-Rachitgarg
/
airsense-cyberdash-3000
Running

App Files Community
dev-Rachitgarg commited on
Commit
3b0dfc9
·
verified ·
1 Parent(s): 6f42b99

make the ui more heptic aqnd add gauge for

Browse files

CO₂ Level



Smoke Level

Air Quality Index

Files changed (1) hide show
  1. components/air-quality-card.js +187 -35
components/air-quality-card.js CHANGED
@@ -1,67 +1,219 @@
 
1
  class AirQualityCard extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
 
 
6
  .air-quality-card {
7
- background: white;
8
- border-radius: 12px;
9
  padding: 1.5rem;
10
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
11
- border: 1px solid rgba(203, 213, 225, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  }
 
 
 
 
 
 
13
  .card-title {
14
- font-size: 1.25rem;
15
- font-weight: 600;
16
- margin-bottom: 1rem;
17
- color: #1e293b;
18
  display: flex;
19
  align-items: center;
 
20
  }
 
21
  .card-title i {
22
- margin-right: 0.5rem;
23
  }
 
 
 
 
 
 
 
24
  .metric {
25
- margin-bottom: 1rem;
 
 
 
 
 
 
 
 
 
 
 
26
  }
 
27
  .metric-title {
28
- font-size: 0.875rem;
29
- color: #64748b;
30
- margin-bottom: 0.25rem;
 
 
31
  }
32
- .metric-value {
33
- font-size: 1.5rem;
34
- font-weight: 600;
35
- color: #1e293b;
36
- font-family: 'Orbitron', sans-serif;
 
37
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  .metric-subtext {
39
  font-size: 0.75rem;
40
- color: #94a3b8;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
  </style>
 
43
  <div class="air-quality-card">
44
  <h3 class="card-title">
45
  <i data-feather="wind"></i>
46
- Air Quality Trends
47
  </h3>
48
- <div class="metric">
49
- <p class="metric-title">CO₂ Level</p>
50
- <p class="metric-value">0 ppm</p>
51
- <p class="metric-subtext">Normal range: 400-1000ppm</p>
52
- </div>
53
- <div class="metric">
54
- <p class="metric-title">Smoke Level</p>
55
- <p class="metric-value">0 ppm</p>
56
- <p class="metric-subtext">Detector sensitivity: 0.5ppm</p>
57
- </div>
58
- <div class="metric">
59
- <p class="metric-title">Air Quality Index</p>
60
- <p class="metric-value">0</p>
61
- <p class="metric-subtext">Good</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
  </div>
64
- `;
65
  }
66
  }
67
  customElements.define('air-quality-card', AirQualityCard);
 
1
+
2
  class AirQualityCard extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
5
  this.shadowRoot.innerHTML = `
6
  <style>
7
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
8
+
9
  .air-quality-card {
10
+ background: rgba(0, 0, 0, 0.7);
11
+ border-radius: 16px;
12
  padding: 1.5rem;
13
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
14
+ border: 1px solid rgba(0, 255, 255, 0.3);
15
+ backdrop-filter: blur(10px);
16
+ color: #00ffff;
17
+ font-family: 'Orbitron', sans-serif;
18
+ position: relative;
19
+ overflow: hidden;
20
+ }
21
+
22
+ .air-quality-card::before {
23
+ content: '';
24
+ position: absolute;
25
+ top: -50%;
26
+ left: -50%;
27
+ width: 200%;
28
+ height: 200%;
29
+ background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
30
+ animation: rotate 20s linear infinite;
31
+ z-index: -1;
32
  }
33
+
34
+ @keyframes rotate {
35
+ from { transform: rotate(0deg); }
36
+ to { transform: rotate(360deg); }
37
+ }
38
+
39
  .card-title {
40
+ font-size: 1.5rem;
41
+ font-weight: 700;
42
+ margin-bottom: 1.5rem;
43
+ color: #00ffff;
44
  display: flex;
45
  align-items: center;
46
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
47
  }
48
+
49
  .card-title i {
50
+ margin-right: 0.75rem;
51
  }
52
+
53
+ .metrics-grid {
54
+ display: grid;
55
+ grid-template-columns: 1fr;
56
+ gap: 1.5rem;
57
+ }
58
+
59
  .metric {
60
+ position: relative;
61
+ background: rgba(0, 0, 0, 0.4);
62
+ border-radius: 12px;
63
+ padding: 1rem;
64
+ border: 1px solid rgba(0, 255, 255, 0.2);
65
+ box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
66
+ transition: all 0.3s ease;
67
+ }
68
+
69
+ .metric:hover {
70
+ transform: translateY(-5px);
71
+ box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
72
  }
73
+
74
  .metric-title {
75
+ font-size: 0.9rem;
76
+ color: rgba(0, 255, 255, 0.8);
77
+ margin-bottom: 0.5rem;
78
+ text-transform: uppercase;
79
+ letter-spacing: 1px;
80
  }
81
+
82
+ .gauge-container {
83
+ width: 100%;
84
+ height: 120px;
85
+ position: relative;
86
+ margin: 0.5rem 0;
87
  }
88
+
89
+ .gauge-value {
90
+ position: absolute;
91
+ bottom: 0;
92
+ left: 0;
93
+ right: 0;
94
+ text-align: center;
95
+ font-size: 1.8rem;
96
+ font-weight: 700;
97
+ color: white;
98
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
99
+ }
100
+
101
  .metric-subtext {
102
  font-size: 0.75rem;
103
+ color: rgba(0, 255, 255, 0.6);
104
+ margin-top: 0.5rem;
105
+ }
106
+
107
+ .gauge {
108
+ width: 100%;
109
+ height: 100%;
110
+ position: relative;
111
+ }
112
+
113
+ .gauge-body {
114
+ width: 100%;
115
+ height: 0;
116
+ position: absolute;
117
+ bottom: 0;
118
+ border-radius: 4px 4px 0 0;
119
+ transition: height 1s ease-out;
120
+ }
121
+
122
+ .co2-gauge { background: linear-gradient(to top, #00ff88, #00ffff); }
123
+ .smoke-gauge { background: linear-gradient(to top, #ffaa00, #ff5500); }
124
+ .aqi-gauge { background: linear-gradient(to top, #5500ff, #aa00ff); }
125
+
126
+ .gauge-markers {
127
+ position: absolute;
128
+ bottom: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ display: flex;
132
+ justify-content: space-between;
133
+ align-items: flex-end;
134
+ padding: 0 5px;
135
+ }
136
+
137
+ .gauge-marker {
138
+ width: 2px;
139
+ background: rgba(255, 255, 255, 0.3);
140
+ position: relative;
141
+ }
142
+
143
+ .gauge-marker::after {
144
+ content: attr(data-value);
145
+ position: absolute;
146
+ top: -20px;
147
+ left: 50%;
148
+ transform: translateX(-50%);
149
+ font-size: 0.6rem;
150
+ color: rgba(255, 255, 255, 0.7);
151
  }
152
  </style>
153
+
154
  <div class="air-quality-card">
155
  <h3 class="card-title">
156
  <i data-feather="wind"></i>
157
+ AIR QUALITY MONITOR
158
  </h3>
159
+
160
+ <div class="metrics-grid">
161
+ <div class="metric">
162
+ <p class="metric-title">CO₂ LEVEL</p>
163
+ <div class="gauge-container">
164
+ <div class="gauge">
165
+ <div class="gauge-body co2-gauge" style="height: 0%"></div>
166
+ <div class="gauge-markers">
167
+ <div class="gauge-marker" style="height: 20%" data-value="400"></div>
168
+ <div class="gauge-marker" style="height: 40%" data-value="800"></div>
169
+ <div class="gauge-marker" style="height: 60%" data-value="1200"></div>
170
+ <div class="gauge-marker" style="height: 80%" data-value="1600"></div>
171
+ <div class="gauge-marker" style="height: 100%" data-value="2000"></div>
172
+ </div>
173
+ </div>
174
+ <div class="gauge-value">0 ppm</div>
175
+ </div>
176
+ <p class="metric-subtext">NORMAL RANGE: 400-1000PPM</p>
177
+ </div>
178
+
179
+ <div class="metric">
180
+ <p class="metric-title">SMOKE LEVEL</p>
181
+ <div class="gauge-container">
182
+ <div class="gauge">
183
+ <div class="gauge-body smoke-gauge" style="height: 0%"></div>
184
+ <div class="gauge-markers">
185
+ <div class="gauge-marker" style="height: 20%" data-value="0.5"></div>
186
+ <div class="gauge-marker" style="height: 40%" data-value="1.0"></div>
187
+ <div class="gauge-marker" style="height: 60%" data-value="1.5"></div>
188
+ <div class="gauge-marker" style="height: 80%" data-value="2.0"></div>
189
+ <div class="gauge-marker" style="height: 100%" data-value="2.5"></div>
190
+ </div>
191
+ </div>
192
+ <div class="gauge-value">0 ppm</div>
193
+ </div>
194
+ <p class="metric-subtext">DETECTOR SENSITIVITY: 0.5PPM</p>
195
+ </div>
196
+
197
+ <div class="metric">
198
+ <p class="metric-title">AIR QUALITY INDEX</p>
199
+ <div class="gauge-container">
200
+ <div class="gauge">
201
+ <div class="gauge-body aqi-gauge" style="height: 0%"></div>
202
+ <div class="gauge-markers">
203
+ <div class="gauge-marker" style="height: 20%" data-value="50"></div>
204
+ <div class="gauge-marker" style="height: 40%" data-value="100"></div>
205
+ <div class="gauge-marker" style="height: 60%" data-value="150"></div>
206
+ <div class="gauge-marker" style="height: 80%" data-value="200"></div>
207
+ <div class="gauge-marker" style="height: 100%" data-value="300"></div>
208
+ </div>
209
+ </div>
210
+ <div class="gauge-value">0</div>
211
+ </div>
212
+ <p class="metric-subtext">STATUS: GOOD</p>
213
+ </div>
214
  </div>
215
  </div>
216
+ `;
217
  }
218
  }
219
  customElements.define('air-quality-card', AirQualityCard);