-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (73 loc) · 3.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/styles/style.css">
</head>
<body>
<audio autoplay loop>
<source src="assets/audio/relax-music.mp3" type="audio/mpeg">
<p>Ваш браузер не поддерживает HTML5 аудио.</p>
</audio>
<div class="clock js-clock">
<div class="clock__main">
<div class="clock__blockquote">
<blockquote class="clock__blockquote-text js-clock-quote">
<p>The science of operations, as derived from mathematics more especially, is a science of itself, and has its own abstract truth and value.</p>
<cite>Ada Lovelace</cite>
</blockquote>
<button class="clock__blockquotes-button js-quote-update">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 4.76457L10.6884 6.97749C10.6287 7.03702 10.6107 7.12666 10.6429 7.20457C10.6752 7.28248 10.7511 7.3333 10.8354 7.33332H17.3334V1.10416C17.3328 1.02008 17.2818 0.944558 17.204 0.912674C17.1262 0.88079 17.0369 0.898794 16.9775 0.958322L14.8046 3.03707C12.7334 1.0125 9.75831 0.210711 6.9502 0.920285C4.14209 1.62986 1.90505 3.74867 1.04419 6.51416L3.43085 7.25999C4.02898 5.3392 5.57591 3.863 7.52257 3.35536C9.46924 2.84771 11.5401 3.38049 13 4.76457ZM7.38031 10.7951C7.34804 10.7174 7.27213 10.6667 7.18794 10.6667H0.666687V16.8154C0.666705 16.8997 0.717527 16.9757 0.795437 17.0079C0.873346 17.0401 0.962985 17.0222 1.02252 16.9625L3.17085 14.9408C5.23884 16.977 8.2182 17.7889 11.0333 17.0833C13.8484 16.3778 16.0927 14.2567 16.9559 11.4858L14.5692 10.74C13.9702 12.6626 12.4208 14.1396 10.4717 14.6459C8.52258 15.1522 6.45022 14.616 4.99127 13.2279L7.33544 11.0221C7.39488 10.9624 7.41259 10.8729 7.38031 10.7951Z" fill="white"/>
</svg>
</button>
</div>
<div class="clock__main-bottom">
<div class="clock__time">
<div class="clock__time-message"><span class="js-clock-greeting"></span><span class="clock__time-message-full">, it's currently</span></div>
<div class="clock__time-counter js-clock-time"></div>
<div class="clock__time-type js-clock-bst"></div>
<div class="clock__time-place js-clock-timezone-offset"></div>
</div>
<button class="clock__toggle button js-clock-toggle" type="button">
<span>More</span>
<i class="button__icon">
<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 7L13 1" stroke="white" stroke-width="2"/>
</svg>
</i>
</button>
</div>
</div>
<div class="clock__info js-clock-panel">
<div class="clock__info-wrapper">
<dl class="clock__info-list">
<div class="clock__info-item">
<dt>Current timezone</dt>
<dd class="js-clock-timezone"></dd>
</div>
<div class="clock__info-item">
<dt>Day of the year</dt>
<dd class="js-clock-days-passed"></dd>
</div>
<div class="clock__info-item">
<dt>Day of the week</dt>
<dd class="js-clock-day-number"></dd>
</div>
<div class="clock__info-item">
<dt>Week number</dt>
<dd class="js-clock-week-passed"></dd>
</div>
</dl>
</div>
</div>
</div>
<script src="assets/scripts/app.js"></script>
</body>
</html>