-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (110 loc) · 4.32 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timecode Monitor</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<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=Roboto+Mono:wght@100;400;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #000000;
color: #FDFBF7;
font-family: 'Roboto Mono', monospace;
font-size: 1em;
text-align:center;
}
a {
color: #2494ff;
}
label {
margin-right: 1em;
}
.number {
font-weight: 100;
}
</style>
</head>
<body>
<p id="msg" style="font-size: 2em;">Timecode Monitor</p>
<div id="tableborder" style="border-width: 6px; border-color: #4b5457; border-radius: 40px; border-style: solid; background-color: #111417; margin: 3em;">
<p style="font-size: 1.5em; margin-bottom:-.5em;" >Clip Name: <strong id="clipname">None</strong></p>
<table style="margin-left: auto; margin-right:auto; padding-bottom: 10px; color: #45ff45;" id="table">
<tr style="font-size:10vw;">
<td class="minus number">-</td>
<td class="hours number" id="timecode-hours">00</td>
<td class="hours">:</td>
<td class="number" id="timecode-minutes">00</td>
<td>:</td>
<td class="number" id="timecode-seconds">00</td>
<td class="ms">.</td>
<td class="ms number" id="timecode-ms">000</td>
</tr>
<tr style="font-weight: 600;">
<td class="minus"></td>
<td class="hours">Hours</td>
<td class="hours" ></td>
<td>Minutes</td>
<td></td>
<td>Seconds</td>
<td class="ms" ></td>
<td class="ms">Milliseconds</td>
</tr>
</table>
</div>
<details style="text-align: left; margin-left: 3em;">
<summary style="font-size:1.25em;">Settings</summary>
<div>Clip Length: <strong id="ms">0.000s</strong></div>
<div>Server Status: <strong id="status">Server Stopped</strong></div>
<br/>
<div>
<input type="checkbox" id="checkbox-minus" checked onclick="showHide()">
<label for="checkbox-minus">Show minus/plus</label>
<input type="checkbox" id="checkbox-hours" checked onclick="showHide()">
<label for="checkbox-hours">Show Hours</label>
<input type="checkbox" id="checkbox-ms" checked onclick="showHide()">
<label for="checkbox-ms">Show Milliseconds</label>
</div>
<br />
<div>
<input type="number" id="padding" value="0" min="0" step="1" onchange="updatePadding()" style="width:3em;border-radius:5px;margin-left:2px;">
<label style="margin-left:-0.5em;" for="padding">em Padding</label>
</div>
<p>Checkout this tool at <a href="https://github.com/chabad360/resolume-timecode">chabad360/resolume-timecode</a></p>
</details>
<script src="osc.min.js" type="module"></script>
<script src="main.js" type="module"></script>
<script type="text/javascript">
const checkboxminus = document.getElementById("checkbox-minus");
const checkboxhours = document.getElementById("checkbox-hours");
const checkboxms = document.getElementById("checkbox-ms");
let minus = document.getElementsByClassName("minus");
let hours = document.getElementsByClassName("hours");
let ms = document.getElementsByClassName("ms");
function hide(elem) {
for(i = 0; i < elem.length; i++) {
elem[i].style.visibility = 'hidden';
elem[i].style.display = 'none';
}
}
function show(elem) {
for(i = 0; i < elem.length; i++) {
elem[i].style.visibility = 'visible';
elem[i].style.display = 'revert';
}
}
function showHide() {
checkboxminus.checked === false ? hide(minus) : show(minus);
checkboxhours.checked === false ? hide(hours) : show(hours);
checkboxms.checked === false ? hide(ms) : show(ms);
}
function updatePadding() {
let padding = document.getElementById("padding").value;
document.getElementById("msg").style.paddingTop = padding + "em";
}
updatePadding();
showHide();
</script>
</body>
</html>