-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (104 loc) · 5.09 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
<!DOCTYPE html>
<html lang="en" class="has-background-grey-dark">
<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">
<link rel="icon" href="img/clockface2.jpeg" type="image/x-icon">
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Stop Clock</title>
</head>
<body >
<div class="container mt-5">
<div class="columns">
<div class="column is-6-widescreen is-8-tablet is-offset-3-widescreen is-offset-2-tablet">
<div class="card has-background-warning">
<header class="">
<div class="tabs is-centered">
<ul>
<li class=""><a class="clock-btn has-icons-left">
<span class="icon"><i class="fas fa-clock fa-lg"></i></span>
Clock
</a></li>
<li><a class="stopwatch-btn has-icons-left">
<span class="icon"><i class="fas fa-stopwatch fa-lg"></i></span>
Stopwatch
</a></li>
<li><a class="timer-btn has-icons-left">
<span class="icon"><i class="far fa-clock fa-lg"></i></span>
Timer
</a></li>
</ul>
</div>
</header>
<div class="card-content has-text-centered is-unselectable">
<div class="analogue-clock">
<span id="circle"></span>
<span class="hands" id="analogue-hour"></span>
<span class="hands" id="analogue-minute"></span>
<span class="hands" id="analogue-second"></span>
</div>
<p class="title is-1 is-inline-block" id="digital-clock">
<span id="hours">00</span>
<span class="is-small is-inline-flex is-flex-direction-column is-hidden arrows">
<i class="fas fa-sort-up fa-sm is-clickable"></i>
<i class="fas fa-sort-down fa-sm is-clickable"></i>
</span>
<span class="colon">:</span>
<span id="minutes">00</span>
<span class="is-small is-inline-flex is-flex-direction-column is-hidden arrows">
<i class="fas fa-sort-up fa-xs is-clickable"></i>
<i class="fas fa-sort-down fa-xs is-clickable"></i>
</span>
<span class="colon">:</span>
<span id="seconds">00</span>
<span class="is-small is-inline-flex is-flex-direction-column is-hidden arrows">
<i class="fas fa-sort-up fa-xs is-clickable"></i>
<i class="fas fa-sort-down fa-xs is-clickable"></i>
</span>
</p>
<div class="mt-5">
<span class="icon is-clickable is-hidden mr-5 has-text-link" id="play-btn">
<i class="fas fa-play-circle fa-3x"></i>
</span>
<span class="icon is-clickable is-hidden mr-5 has-text-link" id="pause-btn">
<i class="fas fa-pause-circle fa-3x"></i>
</span>
<span class="icon is-clickable is-hidden ml-3 has-text-link" id="restart-btn">
<i class="fas fa-sync-alt fa-3x"></i>
</span>
</div>
<p class="analogue-toggle">
<span class="icon has-text-link is-clickable" id="toggle-off"><i class="fas fa-toggle-off"></i></span>
<span class="icon has-text-link is-clickable is-hidden" id="toggle-on"><i class="fas fa-toggle-on"></i></span>
<span class="has-text-weight-bold">Analogue</span>
<button class="button is-link is-small is-rounded ml-3" id="change-face-btn">Change</button>
</p>
</div>
<footer class="card-footer px-5 py-3 is-flex is-flex-direction-column is-align-items-center is-unselectable">
<p class="">
<a href="https://github.com/DrOncogene/ClockApp" class="icon is-medium has-text-grey-dark" target="_blank"><i class="fab fa-github fa-lg"></i></a>
<a href="https://twitter.com/DrOncogene" class="icon is-medium has-text-grey-dark" target="_blank"><i class="fab fa-twitter fa-lg"></i></a>
<a href="https://dev.to/droncogone" class="has-text-grey-dark icon is-medium" target="_blank"><i class="fab fa-dev fa-lg"></i></a>
</p>
<small class="">
Oncogene Studios © 2020
</small>
</footer>
</div>
<div class="content is-small has-text-centered mt-5 is-unselectable">
<p class="subtitle has-text-white">Made with</p>
<p class="has-text-warning-dark subtitle is-4 mb-5">
<a href="https://bulma.io" target="_blank"><img src="img/bulma-logo.png" alt="bulma" class="mr-5" width= 100></a>
<span class="m3">Vanilla</span>
<span class="icon mt-3"><i class="fab fa-js-square"></i></span>
</p>
</div>
</div>
</div>
</div>
<script defer src="js/fontawesome5_all.js"></script>
<script src="js/app.js"></script>
</body>
</html>