-
Notifications
You must be signed in to change notification settings - Fork 26
/
index.html
executable file
·293 lines (270 loc) · 15.5 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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="https://avatars.yandex.net/get-music-content/193823/1820a43e.a.5517056-1/m30x30">
</head>
<body>
<a target=_blank href="http://ya.ru"></a>
<div class="video-controls">
<div class="video-controls-wrap">
<p class="controls-text">Яркость</p>
<input type="range" class="volume-range video-control video-control_brightness" name="video-brightness-range" min="0" max="200" value="100" step="1">
<p class="controls-text">Контрастность</p>
<input type="range" class="volume-range video-control video-control_contrast" name="video-contrast-range" min="0" max="200" value="100" step="1">
</div>
</div>
<header>
<img class="header-logo" src="img/yd2.png">
<menu class="header-menu">
<a class="header-menu__link">Видеонаблюдение</a>
<a class="header-menu__link header-menu__link_active " href="index.html">События</a>
<a class="header-menu__link">Сводка</a>
<a class="header-menu__link">Устройства</a>
<a class="header-menu__link">Сценарии</a>
</menu>
<svg class="header-menu__switcher" width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
<title>icon_list_m</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,3.32630157 C0,2.77790036 0.444630861,2.33333333 1.00087166,2.33333333 L14.9991283,2.33333333 C15.5518945,2.33333333 16,2.7736791 16,3.32630157 L16,4.00703176 C16,4.55543298 15.5553691,5 14.9991283,5 L1.00087166,5 C0.448105505,5 0,4.55965424 0,4.00703176 L0,3.32630157 Z M0,8.65963491 C0,8.11123369 0.444630861,7.66666667 1.00087166,7.66666667 L14.9991283,7.66666667 C15.5518945,7.66666667 16,8.10701243 16,8.65963491 L16,9.34036509 C16,9.88876631 15.5553691,10.3333333 14.9991283,10.3333333 L1.00087166,10.3333333 C0.448105505,10.3333333 0,9.89298757 0,9.34036509 L0,8.65963491 Z M0,13.9929682 C0,13.444567 0.444630861,13 1.00087166,13 L14.9991283,13 C15.5518945,13 16,13.4403458 16,13.9929682 L16,14.6736984 C16,15.2220996 15.5553691,15.6666667 14.9991283,15.6666667 L1.00087166,15.6666667 C0.448105505,15.6666667 0,15.2263209 0,14.6736984 L0,13.9929682 Z" id="path-1"></path>
</defs>
<g id="Final" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="v1-1-1-mobile-home" transform="translate(-339.000000, -70.000000)">
<g id="Direct-/-Icons-/-List-/-M" transform="translate(339.000000, 68.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon_list_m" fill="#333333" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
</header>
<div class="wrap">
<div class="switch-block switch-block_active" data="feed">
<h2 class="content-heading">Лента событий</h2>
<div class="content-block content">
<div class="card card_size_l">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/stats.svg">
</div>
<h3 class="card-title">Еженедельный отчет по расходам ресурсов</h3>
</div>
<div class="card-specs">
<p class="card-source">Сенсоры потребления</p>
<p class="card-time">19:00, Сегодня</p>
</div>
<p class="card-description card-description_big">Так держать! За последнюю неделю вы потратили на 10% меньше ресурсов, чем неделей ранее.</p>
<div class="card-data card-data_graph">
<img class="card-data_graph-img" src="./img/card-data_graph.png">
</div>
</div>
<div class="card card_size_s">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/key.svg">
</div>
<h3 class="card-title">Дверь открыта</h3>
</div>
<div class="card-specs">
<p class="card-source">Сенсор входной двери</p>
<p class="card-time card-time_block">18:50, Сегодня</p>
</div>
</div>
<div class="card card_size_s">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/robot-cleaner.svg">
</div>
<h3 class="card-title">Уборка закончена</h3>
</div>
<div class="card-specs">
<p class="card-source">Пылесос</p>
<p class="card-time card-time_block">18:45, Сегодня</p>
</div>
</div>
<div class="card card_size_s">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/router.svg">
</div>
<h3 class="card-title">Новый пользователь</h3>
</div>
<div class="card-specs">
<p class="card-source">Роутер</p>
<p class="card-time card-time_block">18:45, Сегодня</p>
</div>
</div>
<div class="card card_size_m">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/thermal.svg">
</div>
<h3 class="card-title">Изменен климатический режим</h3>
</div>
<div class="card-specs">
<p class="card-source">Сенсор микроклимата</p>
<p class="card-time">18:30, Сегодня</p>
</div>
<p class="card-description card-description_big">Установлен климатический режим «Фиджи»</p>
<div class="card-data card-data_climat">
<div class="climat-block">
Температура: <em class="climat-block_data climat-block_data__temp">24 C</em>
</div>
<div class="climat-block hum-block">
Влажность: <em class="climat-block_data climat-block_data__hum">80%</em>
</div>
</div>
</div>
<div class="card card_size_m critical">
<div class="card-heading heading-critical">
<div class="card-icon-wrap">
<img class="card-icon" src="img/ac.svg">
</div>
<h3 class="card-title">Невозможно включить кондиционер</h3>
</div>
<div class="card-specs specs-critical">
<p class="card-source">Кондиционер</p>
<p class="card-time">18:21, Сегодня</p>
</div>
<p class="card-description card-description_big description_critical">В комнате открыто окно, закройте его и повторите попытку</p>
</div>
<div class="card card_size_m">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/music.svg">
</div>
<h3 class="card-title">Музыка включена</h3>
</div>
<div class="card-specs">
<p class="card-source">Яндекс.Станция</p>
<p class="card-time">18:16, Сегодня</p>
</div>
<p class="card-description card-description_big description_critical">Сейчас проигрывается:</p>
<div class="card-data card-data_music">
<div class="song-area">
<div class="cover-wrap">
<img class="cover" src="https://avatars.yandex.net/get-music-content/193823/1820a43e.a.5517056-1/m70x70">
</div>
<div class="song-data">
<h4 class="song-title">Florence & The Machine - Big God</h4>
<div class="song-timeline-wrap">
<input type="range" class="song-range" name="song-range" min="0" max="100" value="" step="1">
<div class="song-length">4:31</div>
</div>
</div>
</div>
<div class="player-controls">
<button class="player-control player-control_prev">
<img src="img/Prev.svg">
</button>
<button class="player-control player-control_next">
<img src="img/Prev.svg">
</button>
<input type="range" class="volume-range" name="volume-range" min="0" max="100" value="50" step="1">
<div class="song-volume">80%</div>
</div>
</div>
</div>
<div class="card card_size_m">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/fridge.svg">
</div>
<h3 class="card-title">Заканчивается молоко</h3>
</div>
<div class="card-specs">
<p class="card-source">Холодильник</p>
<p class="card-time">17:23, Сегодня</p>
</div>
<p class="de card-description card-description_big description_critical">Кажется, в холодильнике заканчивается молоко. Вы хотите добавить его в список покупок?</p>
<!-- <div class="purchase-list-wrap" style="display: none;">
<p class="card-description card-description_big description_critical">Список покупок:</p>
<ol class="purchase-list">
<li class="purchase-list__item">Хлеб</li>
<li class="purchase-list__item">Молоко</li>
</ol>
</div> -->
<div class="buttons-wrap">
<button class="button button_yellow" type="button">Дa</button><button class="button">Heт</button>
</div>
</div>
<div class="card card_size_s">
<div class="card-heading">
<div class="card-icon-wrap">
<img class="card-icon" src="img/battery.svg">
</div>
<h3 class="card-title">Зарядка завершена</h3>
</div>
<div class="card-specs">
<p class="card-source">Оконный сенсор</p>
<p class="card-time card-time_block">16:22, Сегодня</p>
</div>
<p class="card-description card-description_big description_critical">Ура! Устройство «Оконный сенсор» снова в строю!</p>
</div>
<div class="card card_size_l critical">
<div class="card-heading heading-critical">
<div class="card-icon-wrap">
<!-- <div id="carousel"> -->
<div class="carousel-element">
<img class="card-icon" src="img/cam.svg">
</div>
<!-- </div> -->
</div>
<h3 class="card-title">Пылесос застрял</h3>
</div>
<div class="card-specs specs-critical">
<p class="card-source">Сенсор движения</p>
<p class="card-time">16:17, Сегодня</p>
</div>
<p class="card-description card-description_big description_critical">Робопылесос не смог сменить свое местоположение в течение последних 3 минут. Похоже, ему нужна помощь.
<div class="critical-cam" onload="initCriticalCam()" style="background-position: 0px 0px; background-size: 100%; filter: brightness(100%);">
</div>
</p>
</div>
<div class="card card_size_s" style="border-radius: 22px;">
<div class="card-heading">
<div class="card-icon-wrap"><img class="card-icon" src="img/kettle.svg"></div>
<h3 class="card-title">Вода вскипела</h3> </div>
<div class="card-specs">
<p class="card-source">Чайник</p>
<p class="card-time card-time_block">16:20, Сегодня</p>
</div>
</div>
</div>
</div>
<div class="content-block multimedia"></div>
</div>
<footer>
<menu class="footer-menu">
<a class="footer-menu__link">Помощь</a>
<a class="footer-menu__link">Обратная связь</a>
<a class="footer-menu__link">Разработчикам</a>
<a class="footer-menu__link">Условия использования</a>
<a class="footer-menu__link" href="./assets/license.pdf" target="blank">Лицензия</a>
</menu>
</footer>
<!-- <script src="./js/index.js"></script> -->
<script src="./js/main.js"></script>
<script>
// document.getElementById('b').onclick = a => a.currentTarget.parentNode.children[1].classList.toggle('a')
// document.querySelector(".buttons-wrap .button_yellow").addEventListener("click", function() {
// document.querySelector(".purchase-list-wrap").style.display = "block";
// document.querySelector(".buttons-wrap").style.display = "none";
// document.querySelector(".de").style.display = "none";
// })
// document.getElementsByClassName("header-menu__switcher")[0].addEventListener("click", function() {
// document.getElementsByClassName("header-menu")[0].classList.toggle("header-menu_active")
// })
// document.getElementById('c').onclick = a => a.currentTarget.parentNode.parentNode.classList.toggle('a')
</script>
<!-- <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> -->
</body>
</html>