-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
238 lines (209 loc) · 11.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="nouislider/nouislider.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Kekstagram</title>
</head>
<body>
<main>
<!-- Image filtering from other users -->
<section class="img-filters img-filters--inactive container">
<h2 class="img-filters__title visually-hidden">Filter of photos</h2>
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По умолчанию</button>
<button type=button class="img-filters__button" id="filter-random">Random</button>
<button type=button class="img-filters__button" id="filter-discussed">Discussed</button>
</form>
</section>
<!-- Image container from other users -->
<section class="pictures container">
<h2 class="pictures__title visually-hidden">Photos of other users</h2>
<!-- Field for downloading a new image to the site -->
<section class="img-upload">
<div class="img-upload__wrapper">
<h2 class="img-upload__title visually-hidden">Photo download</h2>
<form class="img-upload__form" id="upload-select-image" method="post" enctype="multipart/form-data" action=https://23.javascript.pages.academy/kekstagram autocomplete="off">
<!-- The initial state of the field for loading the image -->
<fieldset class="img-upload__start">
<input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" accept="image/png, image/jpeg">
<label for="upload-file" class="img-upload__label img-upload__control">Download</label>
</fieldset>
<!-- Image editing form -->
<div class="img-upload__overlay hidden">
<div class="img-upload__wrapper">
<div class="img-upload__preview-container">
<!-- Changing the size of the image -->
<fieldset class="img-upload__scale scale">
<button type="button" class="scale__control scale__control--smaller">Decrease</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">Increase</button>
</fieldset>
<!-- Pre -viewing of the image -->
<div class="img-upload__preview">
<img src="img/upload-default-image.jpg" alt="Preliminary viewing of the photo">
</div>
<!-- Change in the depth of the effect imposed on the image -->
<fieldset class="img-upload__effect-level effect-level">
<input class="effect-level__value" type="number" name="effect-level" value="">
<div class="effect-level__slider"></div>
</fieldset>
<!-- Button for closing the image editing form -->
<button type="reset" class="img-upload__cancel cancel" id="upload-cancel">Close</button>
</div>
<!-- Image effect on the image -->
<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">Preview photo without effect</span>
Original
</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">Chrome effect</span>
Chromium
</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">Preview of the effect of Sepia</span>
Sepia
</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">Preview of the Marwin effect</span>
Marvin
</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">Preview of the effect of phobos</span>
Phobos
</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">ПReview of the effect of heat</span>
Heat
</label>
</li>
</ul>
</fieldset>
<!-- Adding a hash tugs and a commentary on the image -->
<fieldset class="img-upload__text text">
<input type="text" class="text__hashtags" name="hashtags" placeholder="#Hashtag" >
<textarea class="text__description" name="description" placeholder="Your comment..." maxlength="140"></textarea>
</fieldset>
<!-- Button for sending data to the server -->
<button type="submit" class="img-upload__submit" id="upload-submit">Publish</button>
</div>
</div>
</form>
</div>
</section>
<!-- There will be images of other users here -->
</section>
<!-- Full -screen image show -->
<section class="big-picture overlay hidden">
<h2 class="big-picture__title visually-hidden">View photo</h2>
<div class="big-picture__preview">
<!-- View image -->
<div class="big-picture__img">
<img src="img/logo-background-3.jpg" alt="Дgirl in swimsuit" width="600" height="600">
</div>
<!-- Image information. Signature, comments, number of likes -->
<div class="big-picture__social social">
<div class="social__header">
<img class="social__picture" src="img/avatar-1.svg" alt="Avatar of the author of photography" width="35" height="35">
<p class="social__caption">Test a new camera! =)</p>
<p class="social__likes">Like <span class="likes-count">356</span></p>
</div>
<!-- Comments on the image -->
<div class="social__comment-count">5 out of <span class="comments-count">125</span> comments</div>
<ul class="social__comments">
<li class="social__comment">
<img class="social__picture" src="img/avatar-4.svg" alt="Avatar of the commentator photography" width="35" height="35">
<p class="social__text">Mega photo! Just stunning. How did you manage?</p>
</li>
<li class="social__comment">
<img class="social__picture" src="img/avatar-3.svg" alt="Avatar of the commentator photography" width="35" height="35">
<p class="social__text">Yes, this was photoshoped!!!!!!!!</p>
</li>
</ul>
<!-- Button for downloading a new portion of comments -->
<button type="button" class="social__comments-loader comments-loader">Load more</button>
<!-- Form for sending a comment -->
<div class="social__footer">
<img class="social__picture" src="img/avatar-6.svg" alt="Avatar of the commentator photography" width="35" height="35">
<input type="text" class="social__footer-text" placeholder="your comment...">
<button type="button" class="social__footer-btn" name="button">Send</button>
</div>
</div>
<!-- Button for exit from full -screen viewing of the image -->
<button type="reset" class="big-picture__cancel cancel" id="picture-cancel">Close</button>
</div>
</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>Made in <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://www.instagram.com/htmlacademy/" class="contacts__link contacts__link--instagram">Instagtam</a></li>
<li><a href="https://www.facebook.com/htmlacademy" class="contacts__link contacts__link--facebook">Facebook</a></li>
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
</ul>
</div>
</footer>
<!-- Random user image template -->
<template id="picture">
<a href="#" class="picture">
<img class="picture__img" src="" width="182" height="182" alt="Random photography">
<p class="picture__info">
<span class="picture__comments"></span>
<span class="picture__likes"></span>
</p>
</a>
</template>
<!-- Message with an error of loading image -->
<template id="error">
<section class="error">
<div class="error__inner">
<h2 class="error__title">File upload error</h2>
<button type="button" class="error__button">Download another file</button>
</div>
</section>
</template>
<!-- Message about the successful loading of the image -->
<template id="success">
<section class="success">
<div class="success__inner">
<h2 class="success__title">The image is successfully loaded</h2>
<button type="button" class="success__button">Cool!</button>
</div>
</section>
</template>
<!-- Image Loading Screen -->
<template id="messages">
<div class="img-upload__message img-upload__message--loading">Loading...</div>
</template>
<script type="module" src="js/main.js"></script>
<script src="nouislider/nouislider.js"></script>
</body>
</html>