-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (155 loc) · 9.43 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="vendor/nouislider/nouislider.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кекстаграм</title>
</head>
<body>
<main>
<!-- Контейнер для изображений от других пользователей -->
<section class="pictures container">
<h2 class="pictures__title visually-hidden">Фотографии других пользователей</h2>
<!-- Поле для загрузки нового изображения на сайт -->
<section class="img-upload">
<div class="img-upload__wrapper">
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
<form class="img-upload__form" action="https://27.javascript.pages.academy/kekstagram-simple" id="upload-select-image" method="post" enctype="multipart/form-data" autocomplete="off">
<!-- Изначальное состояние поля для загрузки изображения -->
<fieldset class="img-upload__start">
<input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" required>
<label for="upload-file" class="img-upload__label img-upload__control">Загрузить</label>
</fieldset>
<!-- Форма редактирования изображения -->
<div class="img-upload__overlay hidden">
<div class="img-upload__wrapper">
<div class="img-upload__preview-container">
<!-- Изменение размера изображения -->
<fieldset class="img-upload__scale scale">
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
</fieldset>
<!-- Предварительный просмотр изображения -->
<div class="img-upload__preview">
<img src="img/upload-default-image.jpg" alt="Предварительный просмотр фотографии">
</div>
<!-- Изменение глубины эффекта, накладываемого на изображение -->
<fieldset class="img-upload__effect-level effect-level">
<input class="effect-level__value" type="number" step="any" name="effect-level" value="">
<div class="effect-level__slider"></div>
</fieldset>
<!-- Кнопка для закрытия формы редактирования изображения -->
<button type="reset" class="img-upload__cancel cancel" id="upload-cancel">Закрыть</button>
</div>
<!-- Наложение эффекта на изображение -->
<fieldset class="img-upload__effects effects">
<ul class="effects__list">
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none" checked>
<label for="effect-none" class="effects__label">
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
Оригинал
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
<label for="effect-chrome" class="effects__label">
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
Хром
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
<label for="effect-sepia" class="effects__label">
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
Сепия
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
<label for="effect-marvin" class="effects__label">
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
Марвин
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
<label for="effect-phobos" class="effects__label">
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
Фобос
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat">
<label for="effect-heat" class="effects__label">
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
Зной
</label>
</li>
</ul>
</fieldset>
<!-- Добавление комментария к изображению -->
<fieldset class="img-upload__text text">
<textarea class="text__description" type="text" name="description" placeholder="Ваш комментарий..." minlength="20" maxlength="140" required data-required-message="Обязательное поле"
data-minlength-message="Минимальная длина 20 символа"
data-maxlength-message="Максимальная длина 140 символов"></textarea>
</fieldset>
<!-- Кнопка для отправки данных на сервер -->
<button type="submit" class="img-upload__submit" id="upload-submit">Опубликовать</button>
</div>
</div>
</form>
</div>
</section>
<!-- Здесь будут изображения других пользователей -->
</section>
</main>
<footer class="page-footer container">
<div class="page-footer__wrapper">
<div class="page-footer__copyright copyright">
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
</div>
<ul class="page-footer__contacts contacts">
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
</ul>
</div>
</footer>
<!-- Шаблон изображения случайного пользователя -->
<template id="picture">
<a href="#" class="picture">
<img class="picture__img" src="" width="182" height="182" alt="Случайная фотография">
<p class="picture__info">
<span class="picture__comments"></span>
<span class="picture__likes"></span>
</p>
</a>
</template>
<!-- Сообщение с ошибкой загрузки изображения -->
<template id="error">
<section class="error">
<div class="error__inner">
<h2 class="error__title">Ошибка загрузки файла</h2>
<button type="button" class="error__button">Попробовать ещё раз</button>
</div>
</section>
</template>
<!-- Сообщение об успешной загрузке изображения -->
<template id="success">
<section class="success">
<div class="success__inner">
<h2 class="success__title">Изображение успешно загружено</h2>
<button type="button" class="success__button">Круто!</button>
</div>
</section>
</template>
<script src="vendor/nouislider/nouislider.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>