-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (133 loc) · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Blip</title>
<link rel="icon" type="image/x-icon" href="icons/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="icons/favicon.png" />
<link rel="manifest" href="projectblip.webmanifest">
<link rel="stylesheet" href="lib/bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/fontawesome/5.15.4/css/fontawesome.all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/ui-range/2.1.15/css/ui-range.min.css" />
<script src="lib/jquery/3.5.1/js/jquery.min.js"></script>
<script src="lib/bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/header.css" />
<link rel="stylesheet" type="text/css" href="css/player.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
<link rel="stylesheet" type="text/css" href="css/hourglass.css" />
<script src="js/player.js" type="module"></script>
<script src="js/dark-mode.js" type="module"></script>
<script src="js/configuration.js" type="module"></script>
</head>
<body>
<div class="content">
<div class="player">
<div class="header row align-items-center">
<div class="col"></div>
<div class="col-auto">
<button type="button" id="b_darkMode" class="button icon"><i class="fas fa-adjust"></i></button>
<button type="button" id="b_configuration"class="button icon"><i
class="fas fa-cog"></i></button>
</div>
</div>
<button id="b_run" class="button run hello" type="button">
<div id="b_run_hourglass_icon" class="hourglass_icon"></div>
</button>
<div class="player-control next-alarm-display">
<span id="s_nextAlarm"></span>
</div>
<div class="player-control range-slider" style='margin-top:70px; --min:0; --max:7; --show-min-max:none;'>
<label>Time interval</label>
<input type="range" id="r_timeInterval" min="0" max="7">
<output></output>
<div class='range-slider__progress'></div>
</div>
<div class="player-control range-slider grad"
style='margin-top:60px; --min:0; --max:100; --step:5; --suffix:"%";'>
<label>Volume</label>
<input type="range" id="r_volume" min="0" max="100" step="5">
<output></output>
<div class='range-slider__progress'></div>
</div>
<div class="player-control">
<label>Alarm sound</label>
<form class="d-flex">
<select class="form-select sound-select" id="s_sounds">
</select>
<button class="button primary" id="b_test" type="button" style="margin-left:10px;">
<i class="fas fa-volume-up"></i></button>
</form>
</div>
<div class="player-control">
<div class="form-check form-switch">
<input id="s_playTwice" class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label" for="s_playTwice">Play sound twice on o'clock alarms</label>
</div>
</div>
<div class="player-control" style="margin-top: 5px;">
<div class="form-check form-switch">
<input id="s_tellHourAfterAlarm" class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label" for="s_tellHourAfterAlarm">Convert hour to speech after each alarm</label>
</div>
</div>
<div class="footer row align-items-center justify-content-center">
<div class="col-auto">
<a class="button icon" style="font-size:2.8em;" href="https://github.com/cjpelaezrivas/Project-Blip">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="modal fade" id="configuration-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Configuration</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Speech voice language:</label>
<select class="form-control form-select" id="s_speechVoiceLanguage">
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Speech voice:</label>
<select class="form-control form-select" id="s_speechVoice">
</select>
</div>
<hr>
<div class="form-group">
<button type="button" id="b_clear_configuration" class="button btn"><i class="fas fa-trash"></i> Remove all local app
configuration</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close window</button>
<button type="button" id="b_save_configuration" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Default Statcounter code for Project Blip -->
<script type="text/javascript">
var sc_project=12785336;
var sc_invisible=1;
var sc_security="5a6a0e9f";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12785336/0/5a6a0e9f/1/"
alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
</body>
</html>