-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
174 lines (170 loc) · 9.02 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#96370E">
<meta name="viewport" content="width=device-width, maximum-scale=5, initial-scale=1">
<meta name="description" content="Интерактивное приложение для управления умным домом"/>
<title>Яндекс.Дом - События</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header class="page-header">
<div class="page-header__wrapper">
<a href="#" title="На главную страницу" class="page-header__logo">
<img src="img/svg/ya-logo.svg" width="113" height="38" alt="Логотип Яндекс.Дома">
</a>
<button type="button" class="page-header__menu-toggler" title="Открыть меню навигации"></button>
</div>
<nav class="page-header__nav">
<ul class="page-header__nav-list">
<li class="page-header__nav-list-item page-header__nav-list-item--active">
<a aria-label="События умного дома. Текущая страница">События</a>
</li>
<li class="page-header__nav-list-item">
<a href="#">Сводка</a>
</li>
<li class="page-header__nav-list-item">
<a href="#">Устройства</a>
</li>
<li class="page-header__nav-list-item">
<a href="#">Сценарии</a>
</li>
<li class="page-header__nav-list-item">
<a href="surveillance.html">Видеонаблюдение</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="events">
<h1 class="events__header">Лента событий</h1>
<ul class="events__list"></ul>
</section>
</main>
<footer class="page-footer" aria-label="Как с нами связаться">
<ul class="page-footer__links">
<li>
<a href="#" aria-label="Помощь в использовании умного дома">Помощь</a>
</li>
<li>
<a href="#" aria-label="Оставить обратную связь">Обратная связь</a>
</li>
<li>
<a href="#" aria-label="Страница с инструментами, полезными разработчикам">Разработчикам</a>
</li>
<li>
<a href="#" aria-label="Условия использования технологий умного дома">Условия использования</a>
</li>
</ul>
<span class="page-footer__copyright">© 2001–2017 ООО «Яндекс»</span>
</footer>
<template class="card-template">
<li class="events__card" tabindex="0">
<header class="events__card-header">
<img class="events__card-icon" src="img/svg/icon-key.svg" aria-hidden="true" alt="">
<h2 class="events__card-title">Дверь открыта</h2>
</header>
<div class="events__card-subheader">
<span class="events__card-source">Сенсоры потребления</span>
<span class="events__card-time">18:50, Сегодня</span>
</div>
<div class="events__card-content">
<p class="events__card-description"></p>
</div>
<button type="button" class="events__card-btn events__card-btn--close" title="Закрыть событие"></button>
<button type="button" class="events__card-btn events__card-btn--unwrap" title="Развернуть событие"></button>
</li>
</template>
<template class="widgets-template">
<!-- Виджет сенсора потребления (график расходов) -->
<img class="events__card-image" src="img/svg/richdata.svg" alt="График расхода ресурсов">
<!-- Виджет температуры -->
<ul class="widget-temperature">
<li>
Температура: <span class="widget-temperature-value widget-temperature-value--temp">2623 C</span>
</li>
<li>
Влажность: <span class="widget-temperature-value widget-temperature-value--humidity">1231 %</span>
</li>
</ul>
<!-- Виджет музыки -->
<div class="widget-music">
<header class="widget-music__artist">
<img class="widget-music__album-cover" width="53" height="53" src="https://yt3.ggpht.com/a-/AN66SAz6pL7-pZDYKoZsapohqYlKlY3ypOPTLA-s_Q=s900-mo-c-c0xffffffff-rj-k-no" alt="Обложка альбома">
<div class="widget-music__player">
<span class="widget-music__artist-name">Florence&The Machine Florence & The Machine Florence & The Machine Florence & The Machine </span>
<div class="widget-music__song-state">
<input class="widget-music__song-slider" type="range" min="0" max="100" value="5" step="1" aria-label="Перемотать песню">
<span class="widget-music__song-length">0:31</span>
</div>
</div>
</header>
<footer class="widget-music__controls">
<div class="widget-music__button-wrapper">
<button class="widget-music__song-button" type="button" value="Перемотать назад" aria-label="Перемотать песню, шаг назад"></button>
<button class="widget-music__song-button widget-music__song-button--next" type="button" value="Перемотать вперед" aria-label="Перемотать песню, шаг вперед"></button>
</div>
<form class="widget-music__form">
<input class="widget-music__volume-input" type="range" min="0" max="100" value="10" step="1" id="musicRangeInput" oninput="musicRangeOutput.value = `${musicRangeInput.value}%`" aria-label="Громкость">
<output class="widget-music__volume-output" id="musicRangeOutput" for="musicRangeInput">340%</output>
</form>
</footer>
</div>
<!-- Виджет формы холодильника -->
<form class="widget-fridge" action="#">
<button class="widget-fridge__btn widget-fridge__btn--confirm" type="button" aria-label="Добавить продукт в список покупок">Да</button>
<button class="widget-fridge__btn" type="button" aria-label="Не добавлять продукт в список покупок">Нет</button>
</form>
<!-- Виджет сенсора движения (камера пылесоса) -->
<div class="widget-cam">
<div class="widget-cam__img" touch-action="none" aria-label="Интерактивная камера видеонаблюдения. Сенсор в спальне">
</div>
<ul class="widget-cam__data">
<li class="widget-cam__data-item">
Приближение: <span class="widget-cam__data-zoom">78 %</span>
</li>
<li class="widget-cam__data-item">
Яркость: <span class="widget-cam__data-brightness">50 %</span>
</li>
</ul>
</div>
</template>
<script src="js/page-nav.js"></script>
<script src="js/templater.js"></script>
<!-- Modernizr для поддержки фоновых .webp изображений -->
<script src="js/pointer-events.js"></script>
<script src="js/external/modernizr-webp-custom.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<!--
Авторские права
В проекте использованы ресурсы (иконки) с сайта www.flaticon.com.
Базовое лицензионное соглашение (Flaticon Basic License) разрешает их использование на
безвозмездной основе в некоммерческих целях с указанием авторства и ссылкой на профиль.
Freepik
● https://www.flaticon.com/free-icon/line-chart_263094
● https://www.flaticon.com/free-icon/hot-kettle_78816
● https://www.flaticon.com/free-icon/notes_93857
● https://www.flaticon.com/free-icon/arrow-point-to-right_32213
Egor Rumyantsev
● https://www.flaticon.com/free-icon/cancel-music_70460
Kiranshastry
● https://www.flaticon.com/free-icon/wifi_1159806
● https://www.flaticon.com/free-icon/battery_1159574
Those Icons
● https://www.flaticon.com/free-icon/cctv_810258
● https://www.flaticon.com/free-icon/smart-home_810269
● https://www.flaticon.com/free-icon/smart-home_810271
● https://www.flaticon.com/free-icon/google-home_810254
● https://www.flaticon.com/free-icon/air-conditioner_810246
Smashicons
● https://www.flaticon.com/free-icon/fridge_148362
Источник изображения “робота-пылесоса”:
● https://mobilesyrup.com/2017/11/20/roomba-smart-vacuums-now-supports-ifttt-integration/
Ресурсы использованы в некоммерческих образовательных целях.
PDF - https://wiki.yandex.ru/shri-2018-II/homework/Adaptivnaja-vjorstka/.files/license.pdf
-->
</body>
</html>