-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
555 lines (540 loc) · 36.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
<section class="main">
<div class="main__container">
<header>
<div class="menu">
<div class="menu__logo">
<img src="./src/icons/members/logo.png" alt="logo">
</div>
<div class="menu__nav">
<ul class="menu__nav-items">
<li><a href="#">
<div class="menu__nav-items-icon">
<svg width="34" height="25" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.2173 14.2656C26.3345 15.7188 27.8182 17.6875 27.8182 20.3125V25H34V20.3125C34 16.9062 28.4827 14.8906 24.2173 14.2656ZM21.6364 12.5C25.0518 12.5 27.8182 9.70312 27.8182 6.25C27.8182 2.79688 25.0518 0 21.6364 0C20.91 0 20.23 0.15625 19.5809 0.375C20.9108 2.03784 21.6363 4.11157 21.6363 6.25C21.6363 8.38843 20.9108 10.4622 19.5809 12.125C20.23 12.3438 20.91 12.5 21.6364 12.5ZM12.3636 12.5C15.7791 12.5 18.5455 9.70312 18.5455 6.25C18.5455 2.79688 15.7791 0 12.3636 0C8.94818 0 6.18182 2.79688 6.18182 6.25C6.18182 9.70312 8.94818 12.5 12.3636 12.5ZM12.3636 3.125C14.0636 3.125 15.4545 4.53125 15.4545 6.25C15.4545 7.96875 14.0636 9.375 12.3636 9.375C10.6636 9.375 9.27273 7.96875 9.27273 6.25C9.27273 4.53125 10.6636 3.125 12.3636 3.125ZM12.3636 14.0625C8.23727 14.0625 0 16.1562 0 20.3125V25H24.7273V20.3125C24.7273 16.1562 16.49 14.0625 12.3636 14.0625ZM21.6364 21.875H3.09091V20.3281C3.4 19.2031 8.19091 17.1875 12.3636 17.1875C16.5364 17.1875 21.3273 19.2031 21.6364 20.3125V21.875Z" fill="white" fill-opacity="0.65"/>
</svg></div>
<div class="menu__nav-items-descr">Members</div>
</a></li>
<li><a href="#">
<div class="menu__nav-icon">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.3989 18.2461H17.754V3.60112C17.754 3.42112 17.6067 3.27385 17.4267 3.27385H16.3631C14.2142 3.27034 12.0858 3.69175 10.1004 4.51386C8.11503 5.33596 6.31177 6.54253 4.79441 8.06414C3.30009 9.55384 2.10943 11.3197 1.28862 13.2635C0.434486 15.2796 -0.00380125 17.4474 2.48356e-05 19.6369C-0.00349398 21.7858 0.417922 23.9142 1.24003 25.8996C2.06213 27.885 3.2687 29.6882 4.79032 31.2056C6.29163 32.7069 8.04248 33.8891 9.98968 34.7114C12.0058 35.5655 14.1735 36.0038 16.3631 36C18.512 36.0035 20.6404 35.5821 22.6258 34.76C24.6112 33.9379 26.4144 32.7313 27.9318 31.2097C29.4331 29.7084 30.6153 27.9575 31.4376 26.0103C32.2917 23.9942 32.73 21.8265 32.7262 19.6369V18.5733C32.7262 18.3933 32.5789 18.2461 32.3989 18.2461ZM25.9232 29.2829C24.6565 30.5398 23.1543 31.5343 21.5025 32.2096C19.8508 32.8849 18.0821 33.2277 16.2976 33.2183C12.6937 33.2019 9.30652 31.7906 6.75797 29.242C4.19306 26.6771 2.78175 23.2654 2.78175 19.6369C2.78175 16.0084 4.19306 12.5967 6.75797 10.0318C8.99153 7.79824 11.8673 6.43602 14.9722 6.12512V21.0278H29.8749C29.5599 24.149 28.1854 27.0412 25.9232 29.2829V29.2829ZM35.9988 15.9716L35.8924 14.818C35.5447 11.0504 33.8716 7.49552 31.1799 4.81198C28.4863 2.12352 24.9387 0.459676 21.1493 0.107602L19.9916 0.00124248C19.7993 -0.0151206 19.6357 0.132147 19.6357 0.324413V16.037C19.6357 16.217 19.783 16.3643 19.963 16.3643L35.6715 16.3234C35.8638 16.3234 36.0152 16.1598 35.9988 15.9716ZM22.4093 13.5908V3.09386C24.9862 3.63322 27.351 4.90941 29.2163 6.76737C31.0858 8.63276 32.3662 11.0054 32.898 13.5621L22.4093 13.5908Z" fill="#FFF5F5" fill-opacity="0.65"/>
</svg></div>
<div class="menu__nav-items-descr">Statistics</div>
</a></li>
<li><a href="#">
<div class="menu__nav-icon">
<svg width="17" height="31" viewBox="0 0 17 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.01 13.6056C5.151 12.5894 3.91 11.5389 3.91 9.90278C3.91 8.02556 5.627 6.71667 8.5 6.71667C10.914 6.71667 12.121 7.64667 12.563 9.12778C12.767 9.81667 13.328 10.3333 14.042 10.3333H14.552C15.674 10.3333 16.473 9.21389 16.082 8.14611C15.368 6.11389 13.702 4.42611 11.05 3.77167V2.58333C11.05 1.15389 9.911 0 8.5 0C7.089 0 5.95 1.15389 5.95 2.58333V3.72C2.652 4.44333 0 6.61333 0 9.93722C0 13.9156 3.247 15.8961 7.99 17.05C12.24 18.0833 13.09 19.5989 13.09 21.2006C13.09 22.3889 12.257 24.2833 8.5 24.2833C5.695 24.2833 4.25 23.2672 3.689 21.8206C3.434 21.1489 2.856 20.6667 2.159 20.6667H1.683C0.544 20.6667 -0.255 21.8378 0.17 22.9056C1.139 25.2994 3.4 26.7117 5.95 27.2628V28.4167C5.95 29.8461 7.089 31 8.5 31C9.911 31 11.05 29.8461 11.05 28.4167V27.2972C14.365 26.66 17 24.7139 17 21.1833C17 16.2922 12.869 14.6217 9.01 13.6056Z" fill="white" fill-opacity="0.65"/>
</svg></div>
<div class="menu__nav-items-descr">Billing</div>
</a></li>
<li><a href="#">
<div class="menu__nav-icon">
<svg width="32" height="37" viewBox="0 0 32 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.55556 36.3338H28.4445C30.4054 36.3338 32 34.7391 32 32.7782V16.7782C32.0003 16.5447 31.9544 16.3135 31.865 16.0978C31.7756 15.8821 31.6445 15.6862 31.4791 15.5213L17.2569 1.29908C17.0919 1.13384 16.896 1.00275 16.6804 0.913311C16.4647 0.82387 16.2335 0.777832 16 0.777832C15.7665 0.777832 15.5353 0.82387 15.3197 0.913311C15.104 1.00275 14.9081 1.13384 14.7431 1.29908L0.52089 15.5213C0.35556 15.6862 0.224434 15.8821 0.135043 16.0978C0.0456525 16.3135 -0.00024025 16.5447 9.45808e-07 16.7782V32.7782C9.45808e-07 34.7391 1.59467 36.3338 3.55556 36.3338ZM12.4445 32.7782V23.8893H19.5556V32.7782H12.4445ZM3.55556 17.5142L16 5.06975L28.4445 17.5142L28.4462 32.7782H23.1111V23.8893C23.1111 21.9284 21.5165 20.3338 19.5556 20.3338H12.4445C10.4836 20.3338 8.8889 21.9284 8.8889 23.8893V32.7782H3.55556V17.5142Z" fill="white" fill-opacity="0.65"/>
</svg>
</div>
<div class="menu__nav-items-descr">Rooms</div>
</a></li>
<li><a href="#">
<div class="menu__nav-icon">
<svg width="31" height="39" viewBox="0 0 31 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.1875 11.7V9.75C25.1875 4.37385 20.8417 0 15.5 0C10.1583 0 5.8125 4.37385 5.8125 9.75V15.6H3.875C1.73794 15.6 0 17.3491 0 19.5V35.1C0 37.2509 1.73794 39 3.875 39H27.125C29.2621 39 31 37.2509 31 35.1V19.5C31 17.3491 29.2621 15.6 27.125 15.6H9.6875V9.75C9.6875 6.5247 12.2954 3.9 15.5 3.9C18.7046 3.9 21.3125 6.5247 21.3125 9.75V11.7H25.1875ZM27.125 19.5L27.1289 35.1H3.875V19.5H27.125Z" fill="#FFF5F5" fill-opacity="0.65"/>
</svg>
</div>
<div class="menu__nav-items-descr">Security</div>
</a></li>
</ul>
</div>
</div>
</header>
<div class="members section">
<div class="container">
<div class="subheader">
<form class="subheader-form" action="#">
<input class="subheader-form-input" type="text" placeholder="Search">
</form>
<div class="subheader-icons">
<img src="./src/icons/members/setting_header.svg" alt="settings">
<img src="./src/icons/members/bell_header.svg" alt="bell">
<img src="./src/icons/profile_icon.svg" alt="profile">
</div>
</div>
<h2 class="members__title">Members</h2>
<div class="members__cards">
<div class="members__cards-item">
<div class="members__cards-item-upper">
<img class="face" src="./src/icons/prof_white.svg" alt="profile">
<div class="members__cards-item-upper-name">Annie Gulberg</div>
<div class="members__cards-item-upper-position">Owner</div>
</div>
<div class="members__cards-item-down">
<div class="members__cards-item-down-status">Status: At home</div>
<div class="members__cards-item-down-location">Bedroom 1</div>
</div>
</div>
<div class="members__cards-item">
<div class="members__cards-item-upper-green">
<img class="talk" src="./src/icons/members/talk_card.svg" alt="talk">
<img class="face" src="./src/icons/prof_white.svg" alt="profile">
<div class="members__cards-item-upper-green-name">John Gulberg</div>
<div class="members__cards-item-upper-green-position">Owner 2</div>
</div>
<div class="members__cards-item-down">
<div class="members__cards-item-down-status">Status: At home</div>
<div class="members__cards-item-down-location">Bedroom 1</div>
</div>
</div>
<div class="members__cards-item">
<div class="members__cards-item-upper-blue">
<img class="talk" src="./src/icons/members/talk_card.svg" alt="talk">
<img class="face" src="./src/icons/prof_white.svg" alt="profile">
<div class="members__cards-item-upper-blue-name">Marie Gulberg</div>
<div class="members__cards-item-upper-blue-position">Owner 3</div>
</div>
<div class="members__cards-item-down">
<div class="members__cards-item-down-status">Status: out</div>
<div class="members__cards-item-down-location">Bedroom 2</div>
</div>
</div>
<div class="members__cards-item-last">
<div class="circle">
<div class="line"></div>
<div class="second"></div>
</div>
</div>
</div>
</div>
</div>
<div class="statistics section">
<div class="container">
<div class="subheader">
<form class="subheader-form" action="#">
<input class="subheader-form-input" type="text" placeholder="Search">
</form>
<div class="subheader-icons">
<img src="./src/icons/members/setting_header.svg" alt="settings">
<img src="./src/icons/members/bell_header.svg" alt="bell">
<img src="./src/icons/profile_icon.svg" alt="profile">
</div>
</div>
<h2 class="statistics__title">Statistics</h2>
<div class="statistics__icons">
<div class="first">
<h3 class="statistics__subtitle">Electricity</h3>
<div class="statistics_block">
<img src="./src/icons/statistics/scale_electro.png" alt="scale" class="statistics__scale">
</div>
</div>
<div class="second">
<h3 class="statistics__subtitle">Water</h3>
<div class="statistics_block">
<img src="./src/icons/statistics/scale_waterr.png" alt="Water" class="statistics__scale">
</div>
</div>
<div class="third">
<h3 class="statistics__subtitle">Waste Management</h3>
<div class="statistics_block">
<img src="./src/icons/statistics/scale_waste.png" alt="scale" class="statistics__scale">
</div>
</div>
<div class="electricity">
<div class="electricity__sorting">
<h2 class="statistics__subtitle">Sorting</h2>
<div class="sort">
<img class="scale" src="./src/icons/statistics/round_sorting.svg" alt="round" class="scale">
<div class="scale_element">
<div class="round_one"></div>
<p class="scaledescr">Paper</p>
</div>
<div class="scale_element">
<div class="round_two"></div>
<p class="scaledescr">Glass</p>
</div>
<div class="scale_element">
<div class="round_three"></div>
<p class="scaledescr">Plastic</p>
</div>
</div>
</div>
<div class="electricity__devices">
<h2 class="statistics__subtitle">Devices</h2>
<div class="devices">
<div class="tv">
<img src="./src/icons/statistics/tv_icon.svg" alt="tv">
</div>
<div class="kettle">
<img src="./src/icons/statistics/kettle_icon.svg" alt="kettle">
</div>
<div class="washer">
<img src="./src/icons/statistics/washer.svg" alt="washer">
</div>
<div class="fridge">
<img src="./src/icons/statistics/fridge.svg" alt="fridge">
</div>
<div class="stove">
<img src="./src/icons/statistics/stove.svg" alt="stove">
</div>
<div class="pc">
<img src="./src/icons/statistics/pc.svg" alt="pc">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="utility section">
<div class="container">
<div class="subheader">
<form class="subheader-form" action="#">
<input class="subheader-form-input" type="text" placeholder="Search">
</form>
<div class="subheader-icons">
<img src="./src/icons/members/setting_header.svg" alt="settings">
<img src="./src/icons/members/bell_header.svg" alt="bell">
<img src="./src/icons/profile_icon.svg" alt="profile">
</div>
</div>
<h2 class="statistics__title">Utility Billing</h2>
<div class="utility__items">
<div class="history">
<h3 class="statistics__subtitle">Invoice History</h3>
<div class="pink">
<div class="table">
<div class="row">
<div class="titles__name row__title">Number</div>
<div class="titles__name row__title">Category</div>
<div class="titles__name row__title">Month</div>
<div class="titles__name row__title">Due Date</div>
<div class="titles__name row__title">Amount Due</div>
<div class="titles__name row__title">Status</div>
</div>
<div class="row">
<div class="titles__name">000245</div>
<div class="titles__name">Water</div>
<div class="titles__name">March</div>
<div class="titles__name">04/15/2020</div>
<div class="titles__name">$56.78</div>
<div class="titles__name"><div class="titles__name-last">Unpaid</div>
</div>
</div>
<div class="row">
<div class="titles__name">000244</div>
<div class="titles__name">Waste</div>
<div class="titles__name">March</div>
<div class="titles__name">04/12/2020</div>
<div class="titles__name">$14.92</div>
<div class="titles__name"><div class="titles__name-last">Unpaid</div>
</div>
</div>
<div class="row">
<div class="titles__name">000243</div>
<div class="titles__name">Electricity</div>
<div class="titles__name">March</div>
<div class="titles__name">04/06/2020</div>
<div class="titles__name">$86.98</div>
<div class="titles__name"><div class="titles__name-last-green">Paid</div>
</div>
</div>
<div class="row">
<div class="titles__name">000242</div>
<div class="titles__name">Water</div>
<div class="titles__name">February</div>
<div class="titles__name">03/15/2020</div>
<div class="titles__name">$53.78</div>
<div class="titles__name"><div class="titles__name-last-green">Paid</div>
</div>
</div>
<div class="row">
<div class="titles__name">000241</div>
<div class="titles__name">Waste</div>
<div class="titles__name">February</div>
<div class="titles__name">03/12/2020</div>
<div class="titles__name">$13.98</div>
<div class="titles__name"><div class="titles__name-last-green">Paid</div>
</div>
</div>
</div>
</div>
</div>
<div class="current">
<h3 class="statistics__subtitle">Current Invoice</h3>
<div class="current__pink">
<div class="current__pink-up">
<div class="content">
<p class="current__pink-up-main">Number</p>
<p class="current__pink-up-num">000244</p>
</div>
<div class="content">
<p class="current__pink-up-main" >Due Date</p>
<p class="current__pink-up-num">04/12/2020</p>
</div>
<div class="content">
<p class="current__pink-up-main">Amount Due</p>
<p class="current__pink-up-num">$14.22</p>
</div>
</div>
<div class="current__pink-down">
<div class="content">
<p class="current__pink-down-main">Tax</p>
<p class="current__pink-down-num">$1.849</p>
</div>
<div class="content">
<p class="current__pink-down-main">Total</p>
<p class="current__pink-down-num">$16.07</p>
</div>
</div>
<button class="pay">Pay</button>
</div>
</div>
<div class="chart">
<div class="chart__header">
<h3 class="statistics__subtitle">Invoicing Chart</h3>
<div class="chart__header-elements">
<div class="waste">
<div class="round_one"></div>
<p class="descr">Waste</p>
</div>
<div class="waste">
<div class="round_three"></div>
<p class="descr">Water</p>
</div>
<div class="waste">
<div class="round_two"></div>
<p class="descr">Electricity</p>
</div>
</div>
</div>
<div class="chart__pink">
<img class="chart__pink-img" src="./src/icons/billing/invocing_chaer.png" alt="chart">
</div>
</div>
</div>
</div>
</div>
<div class="kitchen section">
<div class="container">
<div class="subheader">
<form class="subheader-form" action="#">
<input class="subheader-form-input" type="text" placeholder="Search">
</form>
<div class="subheader-icons">
<img src="./src/icons/members/setting_header.svg" alt="settings">
<img src="./src/icons/members/bell_header.svg" alt="bell">
<img src="./src/icons/profile_icon.svg" alt="profile">
</div>
</div>
<h2 class="statistics__title">Kitchen</h2>
<div class="kitchen__content">
<div class="kitchen__content-items">
<div class="kitchen__content-items-first">
<div class="kitchen__content-items-first-box">
<div class="boxheaders">
<h3 class="boxheader">Room’s<br>Temperature</h3>
<h3 class="boxtemperature">+23.5°C</h3>
<h3 class="boxtemperature">74.3°F </h3>
</div>
<div class="boxscale">
<div class="boxscale__up-first"></div>
<div class="boxscale__down-first">
<img src="./src/icons/celcium.svg" alt="celcium" class="boximg">
</div>
</div>
</div>
<div class="kitchen__content-items-first-box">
<div class="boxheaders">
<h3 class="boxheader">Room’s<br>
Humidity</h3>
<h3 class="boxtemperature">40%</h3>
</div>
<div class="boxscale">
<div class="boxscale__up-second"></div>
<div class="boxscale__down-second">
<img src="./src/icons/kitchen/water.svg" alt="water" class="boximg">
</div>
</div>
</div>
<div class="kitchen__content-items-first-box">
<div class="boxheaders">
<h3 class="boxheader">Room’s<br>
Lightning</h3>
<h3 class="boxtemperature">86%</h3>
</div>
<div class="boxscale">
<div class="boxscale__up-third"></div>
<div class="boxscale__down-third">
<img src="./src/icons/kitchen/light.svg" alt="light" class="boximg">
</div>
</div>
</div>
</div>
<div class="kitchen__content-items-devices">
<h2 class="kitchen__content-items-devices__subtitle">Devices</h2>
<div class="kitchendevices">
<div class="fridge2">
<img class="devicesimg" src="./src/icons/statistics/fridge.svg" alt="fridge">
<div class="icondescr">Fridge</div>
</div>
<div class="kettle2">
<img class="devicesimg" src="./src/icons/statistics/kettle_icon.svg" alt="kettle">
<div class="icondescr">Kettle</div>
</div>
<div class="stove2">
<img class="devicesimg" src="./src/icons/statistics/stove.svg" alt="stove">
<div class="icondescr">Stove</div>
</div>
<div class="dishwasher2">
<img class="devicesimg" src="./src/icons/kitchen/dishwasher.svg" alt="dishwasher">
<div class="icondescr">Dishwasher</div>
</div>
<div class="multicooker2">
<img class="devicesimg" src="./src/icons/kitchen/multicooker.svg" alt="multicooker">
<div class="icondescr">Multicooker</div>
</div>
<div class="tv2">
<img class="devicesimg" src="./src/icons/kitchen/tv.svg" alt="tv">
<div class="icondescr">Tv</div>
</div>
<div class="microwave2">
<img class="devicesimg" src="./src/icons//kitchen/microwave.svg" alt="microwave">
<div class="icondescr">Microwave</div>
</div>
<div class="grill2">
<img class="devicesimg" src="./src/icons/kitchen/grill.svg" alt="grill">
<div class="icondescr">Indoor Grill</div>
</div>
</div>
</div>
</div>
<div class="kitchen__content-side">
<div class="kitchen__content-side-item">
<img src="./src/icons/kitchen/bedroom.svg" alt="bedroom" class="photo">
<h2 class="photo__descr">Bedroom</h2>
</div>
<div class="kitchen__content-side-item">
<img src="./src/icons/kitchen/kitchen.svg" alt="kitchen" class="photo">
<h2 class="photo__descr">Kitchen</h2>
</div>
<div class="kitchen__content-side-item">
<img src="./src/icons/kitchen//living_room.svg" alt="Living Room" class="photo">
<h2 class="photo__descr">Living Room</h2>
</div>
<div class="kitchen__content-side-item">
<img src="./src/icons/kitchen/bathroom.svg" alt="bathroom" class="photo">
<h2 class="photo__descr">Bathroom</h2>
</div>
</div>
</div>
</div>
</div>
<div class="welcome section">
<div class="container">
<div class="subheader">
<form class="subheader-form" action="#">
<input class="subheader-form-input" type="text" placeholder="Search">
</form>
<div class="subheader-icons">
<img src="./src/icons/members/setting_header.svg" alt="settings">
<img src="./src/icons/members/bell_header.svg" alt="bell">
<img src="./src/icons/profile_icon.svg" alt="profile">
</div>
</div>
<div class="welcome__content">
<h2 class="statistics__title">Welcome, Annie!</h2>
<div class="welcome__content-upper">
<div class="welcome__content-upper-time">
<div class="headerwelcome">Time</div>
<!-- <div id="current_date_time_block" class="welcome__content-upper-time-num">23:13</div> -->
<span id="doc_time" class="welcome__content-upper-time-num">
Дата и время
</span>
</div>
<div class="welcome__content-upper-temp">
<div class="headerwelcome">Outdoor Temperature</div>
<div class="temperaturecont">
<div class="temperature">+21.3°C</div>
<img src="./src/icons/welcome/temperature.svg" alt="temp" class="temperature">
</div>
</div>
<div class="welcome__content-upper-members">
<div class="headerwelcome">Members at home:</div>
<div class="welcomeicons">
<div class="welcomephotoicons">
<img class="welcomephoto"src="./src/icons/welcome/gree_prof.svg" alt="prof">
<div class="welcomephotodescr">Annie</div>
</div>
<div class="welcomephotoicons">
<img src="./src/icons/welcome/pink_prof.svg" alt="prof">
<div class="welcomephotodescrtwo">John</div>
</div>
</div>
</div>
</div>
<h2 class="welcome__content-header">Controls:</h2>
<div class="welcome__content-down">
<div class="welcome__content-down-light">
<div class="headerwelcome">Light Intensity</div>
<div class="welcomecircle">
<div class="welcomecircle__descr">83%</div>
</div>
<!-- <div class="welcomecirclecont__num">0 100</div> -->
</div>
<div class="welcome__content-down-air">
<div class="headerwelcome">Air Conditioning</div>
<div class="welcomecirclecont">
<div class="welcomecircle">
<div class="welcomecircle__descr">36%</div>
</div>
<!-- <div class="welcomecirclecont__num">0 100</div> -->
</div>
</div>
<div class="welcome__content-down-temperature">
<div class="headerwelcome">Temperature</div>
<div class="welcome__content-down-temperature-scale">
<div class="welcome__content-down-temperature-scale-upper">
<img src="./src/icons/welcome/temperature.svg" alt="temperature" class="scaleupper">
</div>
<div class="welcome__content-down-temperature-scale-down">
<div class="welcome__content-down-temperature-scale-down-descr">
+23°C
</div>
</div>
</div>
</div>
<div class="welcome__content-down-shortcuts">
<div class="headerwelcome">Shortcuts</div>
<div class="welcome__content-down-shortcuts-wifi">
<img src="./src/icons/welcome/wifi.svg" alt="" class="wifi">
<div class="welcome__content-down-shortcuts-wifi-descr">WI_FI</div>
</div>
<div class="welcome__content-down-shortcuts-music">
<img src="./src/icons/welcome/music.svg" alt="" class="music">
<div class="welcome__content-down-shortcuts-music-descr">Music</div>
</div>
<div class="welcome__content-down-shortcuts-intercom">
<img src="./src/icons/welcome/intercom.svg" alt="" class="intercom">
<div class="welcome__content-down-shortcuts-intercom-descr">Intercom</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="./src/js/main.js"></script>
</body>
</html>