-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
91 lines (82 loc) · 3.63 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index-style.css">
</head>
<h1>Petite Pomodoro</h1>
<div class="container">
<div class="formcontainer">
<form id="myForm">
<label for="focus">Focus:</label>
<input type="number" id="focus" name="focus" min="1" max="60" value="25" required>
<label for="focus">min</label><br><br>
<label for="break">Break:</label>
<input type="number" id="break" name="break" min="1" max="60" value="5" required>
<label for="focus">min</label><br><br>
<label for="reps">Reps:</label>
<input type="number" id="reps" name="reps" min="1" max="20" value="4" required><br><br>
<label for="color">Color:</label>
<input type="color" id="color" name="color"><br><br>
<label for="sessionFont">Session Font:</label>
<select name="sessionFont" id="sessionFont">
<option value="VT323">VT323</option>
<option value="MontserratBold">Montserrat Bold</option>
<option value="MontserratBoldItalic">Montserrat Bold Italic</option>
</select><br><br>
<label for="timerFont">Timer Font:</label>
<select name="timerFont" id="timerFont">
<option value="VT323">VT323</option>
<option value="MontserratBold">Montserrat Bold</option>
<option value="MontserratBoldItalic">Montserrat Bold Italic</option>
</select><br><br>
<label for="alignment">Alignment:</label>
<select name="alignment" id="alignment">
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</form>
</div>
<div class="subcontainer">
<p id="previewtext">Preview:</p>
<div class="previewcontainer">
<div id='preview'>
<p style='font-size:33px; margin-bottom:-20px; margin-left: 10px; margin-right: 10px; margin-top: 0px; padding-top: 0px;'>Focus</p>
<p style='font-size:100px; margin-top:0; margin-bottom: 10px; padding-bottom: 0px;'>25:00</p>
</div>
</div>
</div>
</div>
<p>Link: <a id='link' href='#'>Click here to copy link</a></p>
<script>
function updateLinkAndPreview() {
let focus = document.getElementById('focus').value;
let breakTime = document.getElementById('break').value;
let reps = document.getElementById('reps').value;
let color = document.getElementById('color').value;
let timerFont = document.getElementById('timerFont').value;
let sessionFont = document.getElementById('sessionFont').value;
let alignment = document.getElementById('alignment').value;
let link = `https://muederotter.github.io/very-petitepomodoro/timer.html?focus=${focus}&break=${breakTime}&reps=${reps}&color=${encodeURIComponent(color)}&timerFont=${encodeURIComponent(timerFont)}&sessionFont=${encodeURIComponent(sessionFont)}&alignment=${alignment}`;
document.getElementById('link').href = link;
document.getElementById('link').innerHTML = link;
let preview = document.getElementById('preview');
preview.style.color = color;
preview.style.textAlign = alignment;
preview.children[0].style.fontFamily = sessionFont;
preview.children[1].style.fontFamily = timerFont;
let minutes = focus;
preview.children[1].innerHTML = `${minutes.toString().padStart(2, '0')}:00`;
}
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
});
document.querySelectorAll('#myForm input, #myForm select').forEach(function(elem) {
elem.addEventListener('change', updateLinkAndPreview);
});
document.getElementById('link').addEventListener('click', function(e) {
e.preventDefault();
navigator.clipboard.writeText(this.href);
});
updateLinkAndPreview();
</script>
</html>