Reimar/popup-timer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply formatting

Browse Source
This commit is contained in:
Reimar 2025-08-05 17:19:51 +02:00
parent 5f0724e283
commit f18323a1a8
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
12 changed files with 653 additions and 687 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -1,37 +0,0 @@
Welcome to Glitch
=================
Click `Show` in the header to see your app live. Updates to your code will instantly deploy and update live.
**Glitch** is the friendly community where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.
Find out more [about Glitch](https://glitch.com/about).
Your Project
------------
### ← README.md
That's this file, where you can tell people what your cool website does and how you built it.
### ← index.html
Where you'll write the content of your website.
### ← style.css
CSS files add styling rules to your content.
### ← script.js
If you're feeling fancy you can add interactivity to your site with JavaScript.
### ← assets
Drag in `assets`, like images or music, to add them to your project
Made by [Glitch](https://glitch.com/)
-------------------
\ ゜o゜)ノ

29
bookmark/index.html
View File

@ -1,16 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bookmark/style.css"> <link rel="stylesheet" href="/bookmark/style.css">
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<script src="/bookmark/script.js" defer></script> <script src="/bookmark/script.js" defer></script>
</head> </head>
<body> <body>
Press <b>CTRL + D / CMD + D</b> or click the <b>Star Icon</b> to add this to your bookmarks. Press <b>CTRL + D / CMD + D</b> or click the <b>Star Icon</b> to add this to your bookmarks.
<br><br> <br><br>
<a href="/">Back</a> &nbsp; <a id="open-popup" href="javascript:void(0);">Open Popup Now</a> <a href="/">Back</a> &nbsp; <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
</body> </body>
</html> </html>

15
bookmark/script.js
View File

@ -5,13 +5,13 @@ history.replaceState(null, "", link);
document.title = parseQueryParams().name + " - Popup Timer"; document.title = parseQueryParams().name + " - Popup Timer";
document.getElementById("open-popup").onclick = function() { document.getElementById("open-popup").onclick = function() {
window.open( window.open(
popupLink, popupLink,
"PopupTimer" + Date.now(), "PopupTimer" + Date.now(),
"width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no" "width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no"
); );
} }
function parseQueryParams() { function parseQueryParams() {
@ -26,3 +26,4 @@ function parseQueryParams() {
}); });
return result return result
} }

17
bookmark/style.css
View File

@ -1,13 +1,14 @@
body { body {
margin: 1em; margin: 1em;
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
} }
a, a:visited { a, a:visited {
color: #43A047; color: #43A047;
outline: none; outline: none;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }

126
index.html
View File

@ -1,70 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Timer</title> <title>Popup Timer</title>
<!-- FontAwesome --> <!-- FontAwesome -->
<script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<script src="/script.js" defer></script> <script src="/script.js" defer></script>
</head> </head>
<body> <body>
<h1>Popup Timer</h1>
<h1>Popup Timer</h1>
<main>
<h4>Create new</h4>
<table id="popup-type"> <main>
<tr> <h4>Create new</h4>
<td id="timer">Timer</td>
<td id="stopwatch">Stopwatch</td> <table id="popup-type">
</tr> <tr>
</table> <td id="timer">Timer</td>
<td id="stopwatch">Stopwatch</td>
<br><br> </tr>
</table>
<div id="input-timer">
<label style="float: left;">Time:</label> <br><br>
<div id="time-input-container">
&nbsp; <input id="hours" class="time-input" type="number" min="0" step="1" value="0">&nbsp;h <div id="input-timer">
&nbsp; <input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;m <label style="float: left;">Time:</label>
&nbsp; <input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;s <div id="time-input-container">
</div> &nbsp; <input id="hours" class="time-input" type="number" min="0" step="1" value="0">&nbsp;h
<br> &nbsp; <input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;m
<label> &nbsp; <input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;s
<input id="beep" type="checkbox" checked>Beep when finished </div>
</label> <br>
<br> <label>
<br> <input id="beep" type="checkbox" checked>Beep when finished
</div> </label>
<br>
<div id="input-common"> <br>
<div style="display:flex;"> </div>
<label>Name:&nbsp;&nbsp;</label>
<input id="name" style="flex: 2;"> <div id="input-common">
</div> <div style="display:flex;">
<br> <label>Name:&nbsp;&nbsp;</label>
<label> <input id="name" style="flex: 2;">
<input id="autostart" type="checkbox" checked>Start automatically </div>
</label> <br>
<br><br> <label>
<button id="create">Create</button> <input id="autostart" type="checkbox" checked>Start automatically
<br> </label>
<span id="bookmark" title="Adds a shortcut for creating the popup to your bookmarks - Shift + Click if it doesn't work">Create Bookmark</span> <br><br>
</div> <button id="create">Create</button>
<br>
</main> <span id="bookmark" title="Adds a shortcut for creating the popup to your bookmarks - Shift + Click if it doesn't work">Create Bookmark</span>
</div>
<br><br> </main>
<span id="link" title="Click to copy"></span>
<br><br>
<div class="glitchButton" style="position:fixed; top:2em; right:2em;"></div> <span id="link" title="Click to copy"></span>
<script src="https://button.glitch.me/button.js" defer></script> </body>
</body>
</html> </html>

36
link/index.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/link/style.css"> <link rel="stylesheet" href="/link/style.css">
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<script src="/link/script.js" defer></script> <script src="/link/script.js" defer></script>
</head> </head>
<body> <body>
<div id="popup-warning"> <div id="popup-warning">
<b>Your browser blocked the popup from showing!</b> <b>Your browser blocked the popup from showing!</b>
<br> <br>
Please disable your popup blocker and <span id="refresh">try again</span>. Please disable your popup blocker and <span id="refresh">try again</span>.
</div> </div>
</body> </body>
</html> </html>

27
link/script.js
View File

@ -1,20 +1,21 @@
// Open timer popup // Open timer popup
var result = window.open( var result = window.open(
location.protocol + "//" + location.host + "/popup" + location.search, location.protocol + "//" + location.host + "/popup" + location.search,
"PopupTimer" + Date.now(), "PopupTimer" + Date.now(),
"width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no" "width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no"
); );
// Show warning if it didn't work // Show warning if it didn't work
if (!result) { if (!result) {
document.getElementById("popup-warning").style.display = "block"; document.getElementById("popup-warning").style.display = "block";
document.getElementById("refresh").onclick = function() { document.getElementById("refresh").onclick = function() {
location.reload(); location.reload();
} }
} else { } else {
window.onfocus = function() { window.onfocus = function() {
history.back(); history.back();
} }
} }

59
popup/index.html
View File

@ -1,31 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Timer</title> <title>Popup Timer</title>
<!-- FontAwesome --> <!-- FontAwesome -->
<script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/popup/style.css"> <link rel="stylesheet" href="/popup/style.css">
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<script src="/popup/script.js" defer></script> <script src="/popup/script.js" defer></script>
</head> </head>
<!-- This might just trick some really old browser to stay focused all the time --> <!-- This might just trick some really old browser to stay focused all the time -->
<body onblur="self.focus();"> <body onblur="self.focus();">
<main> <main>
<span id="hours">00h</span> <span id="minutes">00m</span> <span id="seconds">00s</span> <span id="hours">00h</span> <span id="minutes">00m</span> <span id="seconds">00s</span>
<br> <br>
<i id="play" class="fas fa-play"></i> &nbsp; <i id="restart" class="fas fa-redo"></i> <i id="play" class="fas fa-play"></i> &nbsp; <i id="restart" class="fas fa-redo"></i>
</main> </main>
<div id="progress-bg" class="progress"></div> <div id="progress-bg" class="progress"></div>
<div id="progress-fg" class="progress"></div> <div id="progress-fg" class="progress"></div>
</body> </body>
</html> </html>

421
popup/script.js
View File

@ -16,271 +16,271 @@ var lastPaused = -1;
// Init audio // Init audio
var oscillator, audioContext; var oscillator, audioContext;
if (params.beep === "true") { if (params.beep === "true") {
try { try {
audioContext = new (window.AudioContext || window.webkitAudioContext); audioContext = new (window.AudioContext || window.webkitAudioContext);
} catch(e) {} } catch(e) {}
} }
// Autostart // Autostart
if (params.autostart === "true") { if (params.autostart === "true") {
switch (params.type) { switch (params.type) {
case "timer":
initTimer();
startTimer(1000);
break;
case "stopwatch":
initStopwatch();
startStopwatch(1000);
break;
default:
location.href = "/";
}
} case "timer":
initTimer();
startTimer(1000);
break;
case "stopwatch":
initStopwatch();
startStopwatch(1000);
break;
default:
location.href = "/";
}
}
// Reset timer/stopwatch // Reset timer/stopwatch
document.getElementById("restart").onclick = function() { document.getElementById("restart").onclick = function() {
if (timeout) clearTimeout(timeout); if (timeout) clearTimeout(timeout);
var paused = playBtn.classList.contains("fa-play"); var paused = playBtn.classList.contains("fa-play");
switch (params.type) { switch (params.type) {
case "timer": case "timer":
// Reset progress bar // Reset progress bar
// TODO // TODO
progressBar.animationName = ""; progressBar.animationName = "";
progressBar.animationName = "progress"; progressBar.animationName = "progress";
initTimer(); initTimer();
if (!paused) startTimer(1000); if (!paused) startTimer(1000);
break; break;
case "stopwatch": case "stopwatch":
// Reset displayed time // Reset displayed time
secondsElem.innerText = "00s"; secondsElem.innerText = "00s";
secondsElem.classList.remove("highlighted"); secondsElem.classList.remove("highlighted");
minutesElem.innerText = "00m"; minutesElem.innerText = "00m";
minutesElem.classList.remove("highlighted"); minutesElem.classList.remove("highlighted");
hoursElem.innerText = "00h"; hoursElem.innerText = "00h";
hoursElem.classList.remove("highlighted"); hoursElem.classList.remove("highlighted");
initStopwatch(); initStopwatch();
if (!paused) startStopwatch(1000); if (!paused) startStopwatch(1000);
break; break;
} }
} }
// Pause / Resume // Pause / Resume
playBtn.onclick = function() { playBtn.onclick = function() {
if (!timeout) return; if (!timeout) return;
// Pause // Pause
if (playBtn.classList.contains("fa-pause")) { if (playBtn.classList.contains("fa-pause")) {
lastPaused = Date.now(); lastPaused = Date.now();
if (params.type === "timer") progressBar.style.animationPlayState = "paused"; if (params.type === "timer") progressBar.style.animationPlayState = "paused";
clearTimeout(timeout); clearTimeout(timeout);
// Change icon // Change icon
playBtn.classList.remove("fa-pause"); playBtn.classList.remove("fa-pause");
playBtn.classList.add("fa-play"); playBtn.classList.add("fa-play");
// Resume // Resume
} else { } else {
var startOffset = lastPaused % 1000; var startOffset = lastPaused % 1000;
switch (params.type) { switch (params.type) {
case "timer": case "timer":
if (hours === 0 && minutes == 0 && seconds === 0) return; if (hours === 0 && minutes == 0 && seconds === 0) return;
progressBar.style.animationPlayState = "running"; progressBar.style.animationPlayState = "running";
startTimer(startOffset); startTimer(startOffset);
break; break;
case "stopwatch": case "stopwatch":
startStopwatch(startOffset); startStopwatch(startOffset);
break; break;
} }
// Change icon // Change icon
playBtn.classList.remove("fa-play"); playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause"); playBtn.classList.add("fa-pause");
} }
} }
function initTimer() { function initTimer() {
hours = parseInt(params.h);
minutes = parseInt(params.m);
seconds = parseInt(params.s);
if (hours === 0 && minutes === 0 && seconds === 0) return; hours = parseInt(params.h);
minutes = parseInt(params.m);
seconds = parseInt(params.s);
// Only highlight relevant parts if (hours === 0 && minutes === 0 && seconds === 0) return;
if (hours > 0) {
hoursElem.classList.add("highlighted");
minutesElem.classList.add("highlighted");
secondsElem.classList.add("highlighted");
} else if (minutes > 0) {
minutesElem.classList.add("highlighted");
secondsElem.classList.add("highlighted");
} else {
secondsElem.classList.add("highlighted");
}
// Print initial time // Only highlight relevant parts
hoursElem.innerText = pad(hours) + "h"; if (hours > 0) {
minutesElem.innerText = pad(minutes) + "m"; hoursElem.classList.add("highlighted");
secondsElem.innerText = pad(seconds) + "s"; minutesElem.classList.add("highlighted");
secondsElem.classList.add("highlighted");
} else if (minutes > 0) {
minutesElem.classList.add("highlighted");
secondsElem.classList.add("highlighted");
} else {
secondsElem.classList.add("highlighted");
}
// Print initial time
hoursElem.innerText = pad(hours) + "h";
minutesElem.innerText = pad(minutes) + "m";
secondsElem.innerText = pad(seconds) + "s";
// Animate progress bar
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
progressBar.style.animationDuration = totalSeconds + "s";
progressBar.style.animationName = "progress";
// Animate progress bar
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
progressBar.style.animationDuration = totalSeconds + "s";
progressBar.style.animationName = "progress";
} }
function startTimer(startOffset) { function startTimer(startOffset) {
playBtn.classList.remove("fa-play"); playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause"); playBtn.classList.add("fa-pause");
// Wait the starting offset // Wait the starting offset
timeout = setTimeout(updateTimer, startOffset); timeout = setTimeout(updateTimer, startOffset);
document.getElementById("progress-fg").style.animationPlayState = "running";
document.getElementById("progress-fg").style.animationPlayState = "running";
} }
function updateTimer() { function updateTimer() {
seconds--;
if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
if (seconds <= -1) {
seconds = 59;
minutes--; seconds--;
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted"); if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
if (minutes <= -1) { if (seconds <= -1) {
minutes = 59; seconds = 59;
hours--; minutes--;
if (hours === 0) hoursElem.classList.remove("highlighted"); if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
if (minutes <= -1) {
minutes = 59;
hoursElem.innerText = pad(hours) + "h"; hours--;
} if (hours === 0) hoursElem.classList.remove("highlighted");
minutesElem.innerText = pad(minutes) + "m";
} hoursElem.innerText = pad(hours) + "h";
secondsElem.innerText = pad(seconds) + "s"; }
minutesElem.innerText = pad(minutes) + "m";
}
secondsElem.innerText = pad(seconds) + "s";
if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
else timeout = setTimeout(updateTimer, 1000);
if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
else timeout = setTimeout(updateTimer, 1000);
} }
// Makes the numbers blink red etc. // Makes the numbers blink red etc.
function timeUp() { function timeUp() {
var timeUpInterval = setInterval(function() {
// Blink red var timeUpInterval = setInterval(function() {
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
elem.classList.toggle("red");
});
//document.querySelector
// Blink title // Blink red
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title; [].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
else document.title = document.title.substr(timesUpStr.length); elem.classList.toggle("red");
});
// Play beep //document.querySelector
if (params.beep === "true" && audioContext) {
try {
oscillator = audioContext.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 1000;
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.25);
} catch(e) {}
}
}, 500); // Blink title
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title;
else document.title = document.title.substr(timesUpStr.length);
// Stop when user clicks // Play beep
document.onclick = function() { if (params.beep === "true" && audioContext) {
try {
if (oscillator) oscillator.stop(); oscillator = audioContext.createOscillator();
oscillator.type = "sine";
// Reset color oscillator.frequency.value = 1000;
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) { oscillator.connect(audioContext.destination);
elem.classList.remove("red"); oscillator.start();
}); oscillator.stop(audioContext.currentTime + 0.25);
} catch(e) {}
}
// Remove "TIME UP" from title }, 500);
if (document.title.indexOf(timesUpStr) !== -1) document.title = document.title.substr(timesUpStr.length);
// Stop when user clicks
document.onclick = function() {
if (oscillator) oscillator.stop();
// Reset color
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
elem.classList.remove("red");
});
// Remove "TIME UP" from title
if (document.title.indexOf(timesUpStr) !== -1) document.title = document.title.substr(timesUpStr.length);
// Clean up
clearInterval(timeUpInterval);
document.onclick = null;
}
// Clean up
clearInterval(timeUpInterval);
document.onclick = null;
}
} }
function initStopwatch() { function initStopwatch() {
hours = 0; hours = 0;
minutes = 0; minutes = 0;
seconds = 0; seconds = 0;
} }
function startStopwatch(startOffset) { function startStopwatch(startOffset) {
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
timeout = setTimeout(updateStopwatch, startOffset); playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
timeout = setTimeout(updateStopwatch, startOffset);
} }
function updateStopwatch() { function updateStopwatch() {
// Update seconds // Update seconds
seconds++; seconds++;
if (hours === 0 && minutes === 0 && seconds === 1) secondsElem.classList.add("highlighted"); if (hours === 0 && minutes === 0 && seconds === 1) secondsElem.classList.add("highlighted");
if (seconds >= 60) { if (seconds >= 60) {
seconds = 0; seconds = 0;
// Update minutes // Update minutes
minutes++; minutes++;
if (hours === 0 && minutes === 1) minutesElem.classList.add("highlighted"); if (hours === 0 && minutes === 1) minutesElem.classList.add("highlighted");
if (minutes >= 60) { if (minutes >= 60) {
minutes = 0; minutes = 0;
// Update hours // Update hours
hours++; hours++;
if (hours === 1) hoursElem.classList.add("highlighted"); if (hours === 1) hoursElem.classList.add("highlighted");
hoursElem.innerText = pad(hours) + "h"; hoursElem.innerText = pad(hours) + "h";
} }
// Minutes // Minutes
minutesElem.innerText = pad(minutes) + "m"; minutesElem.innerText = pad(minutes) + "m";
} }
// Seconds // Seconds
secondsElem.innerText = pad(seconds) + "s"; secondsElem.innerText = pad(seconds) + "s";
timeout = setTimeout(updateStopwatch, 1000); timeout = setTimeout(updateStopwatch, 1000);
} }
@ -299,5 +299,6 @@ function parseQueryParams() {
// Adds one leading zero if necessary // Adds one leading zero if necessary
function pad(num) { function pad(num) {
return ("00" + num).substr(-2); return ("00" + num).substr(-2);
} }

79
popup/style.css
View File

@ -1,63 +1,64 @@
@font-face { @font-face {
font-family: "Jetbrains Mono"; font-family: "Jetbrains Mono";
src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"), src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"),
url("/assets/JetBrainsMono-Regular.ttf") format("truetype"); url("/assets/JetBrainsMono-Regular.ttf") format("truetype");
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: #FAFAFA; background-color: #FAFAFA;
color: #424242; color: #424242;
font-family: "Jetbrains Mono", helvetica, arial, sans-serif; font-family: "Jetbrains Mono", helvetica, arial, sans-serif;
} }
main { main {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
text-align: center; text-align: center;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
main > span { main > span {
font-size: 15vw; /* Browsers that don't support min() */ font-size: 15vw; /* Browsers that don't support min() */
font-size: min(15vw, 50vh); font-size: min(15vw, 50vh);
color: #9E9E9E; color: #9E9E9E;
} }
main > span.highlighted { main > span.highlighted {
color: #424242; color: #424242;
} }
main > span.red { main > span.red {
color: #F4511E; color: #F4511E;
} }
.progress { .progress {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 5px; height: 5px;
width: 0; width: 0;
} }
#progress-bg { #progress-bg {
background-color: #9E9E9E; background-color: #9E9E9E;
} }
#progress-fg { #progress-fg {
background-color: #43A047; background-color: #43A047;
animation-timing-function: linear; animation-timing-function: linear;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@keyframes progress { @keyframes progress {
from { from {
width: 0; width: 0;
} }
to { to {
width: 100vw; width: 100vw;
} }
} }
/* FontAwesome */ /* FontAwesome */
i { i {
font-size: 12px; font-size: 12px;
color: #9E9E9E; color: #9E9E9E;
} }
i:hover { i:hover {
cursor: pointer; cursor: pointer;
color: #424242; color: #424242;
} }

339
script.js
View File

@ -1,213 +1,214 @@
// Make checkboxes green on Chrome // Make checkboxes green on Chrome
/*if (navigator.vendor === "Google Inc.") { /*if (navigator.vendor === "Google Inc.") {
[].slice.call(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) { [].slice.call(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
checkbox.style.filter = "invert(100%) hue-rotate(70deg) brightness(0.8)"; checkbox.style.filter = "invert(100%) hue-rotate(70deg) brightness(0.8)";
}); });
}*/ }*/
// Only show bookmark button if supported // Only show bookmark button if supported
// Check if AddFavorite() exists, addPanel() exists or replaceState() exists which is used in /bookmark/script.js // Check if AddFavorite() exists, addPanel() exists or replaceState() exists which is used in /bookmark/script.js
if ((window.external && typeof window.external.AddFavorite === "function") || (window.sidebar && typeof window.sidebar.addPanel === "function") || (history && typeof history.replaceState === "function")) { if ((window.external && typeof window.external.AddFavorite === "function") || (window.sidebar && typeof window.sidebar.addPanel === "function") || (history && typeof history.replaceState === "function")) {
document.getElementById("bookmark").style.display = "inline-block"; document.getElementById("bookmark").style.display = "inline-block";
} }
// Open new window when clicking create // Open new window when clicking create
document.getElementById("create").onclick = function(event) { document.getElementById("create").onclick = function(event) {
var popup = window.open( var popup = window.open(
createLink("popup"), createLink("popup"),
"PopupTimer" + Date.now(), "PopupTimer" + Date.now(),
"popup,width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no" "popup,width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no"
); );
// Probably not going to work on any modern browser but worth a try // Probably not going to work on any modern browser but worth a try
popup.onblur = function() { popup.onblur = function() {
popup.focus(); popup.focus();
} }
}; };
// When clicking Create bookmark // When clicking Create bookmark
document.getElementById("bookmark").onclick = function(event) { document.getElementById("bookmark").onclick = function(event) {
if (event.target.classList.contains("disabled")) return; if (event.target.classList.contains("disabled")) return;
// Some older browsers include built-in functions for adding a bookmark, attempt to use this if user didn't perform shift click // Some older browsers include built-in functions for adding a bookmark, attempt to use this if user didn't perform shift click
if (!event.shiftKey) { if (!event.shiftKey) {
var link = createLink("link"); var link = createLink("link");
var title = document.getElementById("name").value; var title = document.getElementById("name").value;
// Internet explorer // Internet explorer
if (window.external && typeof window.external.AddFavorite === "function") { if (window.external && typeof window.external.AddFavorite === "function") {
window.external.AddFavorite(link, title); window.external.AddFavorite(link, title);
showBookmarkAdded(); showBookmarkAdded();
return; return;
// Old Firefox, SeaMonkey // Old Firefox, SeaMonkey
} else if (window.sidebar && typeof window.sidebar.addPanel === "function") { } else if (window.sidebar && typeof window.sidebar.addPanel === "function") {
window.sidebar.addPanel(title, link, ""); window.sidebar.addPanel(title, link, "");
showBookmarkAdded(); showBookmarkAdded();
return; return;
} }
} }
// Show bookmark instructions in new tab // Show bookmark instructions in new tab
window.open( window.open(
createLink("bookmark"), createLink("bookmark"),
"_blank", "_blank",
"" ""
); );
} }
// Show a green "Bookmark added" message for a second // Show a green "Bookmark added" message for a second
function showBookmarkAdded() { function showBookmarkAdded() {
var bookmarkBtn = document.getElementById("bookmark"); var bookmarkBtn = document.getElementById("bookmark");
bookmarkBtn.innerHTML = "<i class='fas fa-check'></i> <b>Bookmark added</b>"; bookmarkBtn.innerHTML = "<i class='fas fa-check'></i> <b>Bookmark added</b>";
bookmarkBtn.style.color = "#66BB6A"; bookmarkBtn.style.color = "#66BB6A";
bookmarkBtn.classList.add("disabled"); bookmarkBtn.classList.add("disabled");
setTimeout(function() { setTimeout(function() {
bookmarkBtn.innerText = "Create bookmark"; bookmarkBtn.innerText = "Create bookmark";
bookmarkBtn.style.color = "inherit"; bookmarkBtn.style.color = "inherit";
bookmarkBtn.classList.remove("disabled"); bookmarkBtn.classList.remove("disabled");
}, 1000); }, 1000);
} }
// When clicking Timer/Stopwatch // When clicking Timer/Stopwatch
[].slice.call(document.querySelectorAll("#popup-type td")).forEach(function(elem) { [].slice.call(document.querySelectorAll("#popup-type td")).forEach(function(elem) {
elem.onclick = function(event) { elem.onclick = function(event) {
var elem = event.target; var elem = event.target;
if (elem.classList.contains("selected")) return; if (elem.classList.contains("selected")) return;
elem.classList.add("selected"); elem.classList.add("selected");
switch (elem.id) { switch (elem.id) {
case "timer": case "timer":
document.getElementById("stopwatch").classList.remove("selected"); document.getElementById("stopwatch").classList.remove("selected");
document.getElementById("input-timer").style.display = "block"; document.getElementById("input-timer").style.display = "block";
document.getElementById("name").value = "Timer"; document.getElementById("name").value = "Timer";
break; break;
case "stopwatch": case "stopwatch":
document.getElementById("timer").classList.remove("selected"); document.getElementById("timer").classList.remove("selected");
document.getElementById("input-timer").style.display = "none"; document.getElementById("input-timer").style.display = "none";
document.getElementById("name").value = "Stopwatch"; document.getElementById("name").value = "Stopwatch";
break; break;
} }
document.getElementById("input-common").style.display = "block"; document.getElementById("input-common").style.display = "block";
var linkElem = document.getElementById("link"); var linkElem = document.getElementById("link");
linkElem.innerText = createLink("link"); linkElem.innerText = createLink("link");
linkElem.style.display = "inline-block"; linkElem.style.display = "inline-block";
} }
}); });
// Disable buttons on invalid input // Disable buttons on invalid input
[].slice.call(document.getElementsByTagName("input")).forEach(function(input) { [].slice.call(document.getElementsByTagName("input")).forEach(function(input) {
input.oninput = function(event) { input.oninput = function(event) {
var createBtn = document.getElementById("create"); var createBtn = document.getElementById("create");
var bookmarkBtn = document.getElementById("bookmark"); var bookmarkBtn = document.getElementById("bookmark");
var isInvalid = document.querySelectorAll("input:invalid").length > 0; var isInvalid = document.querySelectorAll("input:invalid").length > 0;
if (isInvalid) { if (isInvalid) {
createBtn.disabled = true; createBtn.disabled = true;
bookmarkBtn.classList.add("disabled"); bookmarkBtn.classList.add("disabled");
} else { } else {
createBtn.disabled = false; createBtn.disabled = false;
bookmarkBtn.classList.remove("disabled"); bookmarkBtn.classList.remove("disabled");
document.getElementById("link").innerText = createLink("link"); document.getElementById("link").innerText = createLink("link");
} }
} }
}); });
// Copy link to clipboard when clicked // Copy link to clipboard when clicked
document.getElementById("link").onclick = function() { document.getElementById("link").onclick = function() {
var link = createLink("link");
var linkElem = document.getElementById("link");
// Catch is called both on promise rejection (insufficient permissons) and if the function doesn't exist
try {
navigator.clipboard.writeText(link);
linkShowMessage("Copied to clipboard!", "#66BB6A");
} catch(e) {
try {
// Alternatively, just select the text and copy it
var range = document.createRange();
range.setStart(linkElem, 0);
range.setEnd(linkElem, 1);
var selection = window.getSelection(); var link = createLink("link");
selection.removeAllRanges(); var linkElem = document.getElementById("link");
selection.addRange(range);
document.execCommand("copy"); // Catch is called both on promise rejection (insufficient permissons) and if the function doesn't exist
try {
navigator.clipboard.writeText(link);
linkShowMessage("Copied to clipboard!", "#66BB6A");
} catch(e) {
try {
// Alternatively, just select the text and copy it
var range = document.createRange();
range.setStart(linkElem, 0);
range.setEnd(linkElem, 1);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
linkShowMessage("Copied to clipboard!", "#66BB6A");
} catch(e) {
// Browser doesn't support copying
console.error(e);
linkShowMessage("Couldn't copy link :(", "#EF5350");
}
}
linkShowMessage("Copied to clipboard!", "#66BB6A");
} catch(e) {
// Browser doesn't support copying
console.error(e);
linkShowMessage("Couldn't copy link :(", "#EF5350");
}
}
} }
// Displays a message where the link is for one second // Displays a message where the link is for one second
function linkShowMessage(message, color) { function linkShowMessage(message, color) {
var linkElem = document.getElementById("link"); var linkElem = document.getElementById("link");
linkElem.style.backgroundColor = color; linkElem.style.backgroundColor = color;
linkElem.style.width = linkElem.offsetWidth + "px"; linkElem.style.width = linkElem.offsetWidth + "px";
linkElem.style.color = "white"; linkElem.style.color = "white";
linkElem.style.fontFamily = "helvetica, arial, sans-serif"; linkElem.style.fontFamily = "helvetica, arial, sans-serif";
linkElem.style.fontWeight = "bold"; linkElem.style.fontWeight = "bold";
linkElem.innerText = message; linkElem.innerText = message;
setTimeout(function() { setTimeout(function() {
linkElem.style.backgroundColor = "#E0E0E0"; linkElem.style.backgroundColor = "#E0E0E0";
linkElem.style.color = "black"; linkElem.style.color = "black";
linkElem.style.fontFamily = "'Jetbrains Mono', monospace"; linkElem.style.fontFamily = "'Jetbrains Mono', monospace";
linkElem.style.width = "auto"; linkElem.style.width = "auto";
linkElem.style.fontWeight = "normal"; linkElem.style.fontWeight = "normal";
linkElem.innerText = createLink("link"); linkElem.innerText = createLink("link");
}, 1000); }, 1000);
} }
function createLink(type) { function createLink(type) {
// Get user input // Get user input
var input = {}; var input = {};
["hours", "minutes", "seconds", "name"].forEach(function(name) { ["hours", "minutes", "seconds", "name"].forEach(function(name) {
input[name] = document.getElementById(name).value; input[name] = document.getElementById(name).value;
}); });
["autostart", "beep"].forEach(function(name) { ["autostart", "beep"].forEach(function(name) {
input[name] = !!document.getElementById(name).checked; input[name] = !!document.getElementById(name).checked;
}); });
if (document.getElementById("timer").classList.contains("selected")) input.type = "timer"; if (document.getElementById("timer").classList.contains("selected")) input.type = "timer";
else input.type = "stopwatch"; else input.type = "stopwatch";
// Create URL // Create URL
var url = location.protocol + "//" + location.host + "/" + type + "?type=" + input.type + "&name=" + encodeURIComponent(input.name) + "&autostart=" + input.autostart; var url = location.protocol + "//" + location.host + "/" + type + "?type=" + input.type + "&name=" + encodeURIComponent(input.name) + "&autostart=" + input.autostart;
if (input.type === "timer") url += "&h=" + input.hours + "&m=" + input.minutes + "&s=" + input.seconds + "&beep=" + input.beep; if (input.type === "timer") url += "&h=" + input.hours + "&m=" + input.minutes + "&s=" + input.seconds + "&beep=" + input.beep;
return url; return url;
} }

155
style.css
View File

@ -1,125 +1,126 @@
@font-face { @font-face {
font-family: "Jetbrains Mono"; font-family: "Jetbrains Mono";
src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"), src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"),
url("/assets/JetBrainsMono-Regular.ttf") format("truetype"); url("/assets/JetBrainsMono-Regular.ttf") format("truetype");
} }
body { body {
margin: 2em; margin: 2em;
background-color: #FAFAFA; background-color: #FAFAFA;
color: #424242; color: #424242;
text-align: center; text-align: center;
} }
::selection, ::-moz-selection { ::selection, ::-moz-selection {
background-color: #43A047; background-color: #43A047;
color: white; color: white;
} }
body, input, button { body, input, button {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
main { main {
display: block; /* IE */ display: block; /* IE */
margin: auto; margin: auto;
margin-top: 50px; margin-top: 50px;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
#popup-blocked::warning, #popup-warning *::selection, #popup-warning::-moz-selection, #popup-warning *::-moz-selection { #popup-blocked::warning, #popup-warning *::selection, #popup-warning::-moz-selection, #popup-warning *::-moz-selection {
background-color: #F57F17; background-color: #F57F17;
} }
#popup-type { #popup-type {
margin: auto; margin: auto;
} }
#popup-type td { #popup-type td {
width: 50vw; width: 50vw;
color: #9E9E9E; color: #9E9E9E;
border-bottom: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E;
padding-top: 1px; padding-top: 1px;
padding-bottom: 5px; padding-bottom: 5px;
user-select: none; user-select: none;
} }
#popup-type td:not(.selected):hover { #popup-type td:not(.selected):hover {
padding-top: 0; padding-top: 0;
color: #424242; color: #424242;
border-bottom: 2px solid #424242; border-bottom: 2px solid #424242;
cursor: pointer; cursor: pointer;
} }
#popup-type td.selected { #popup-type td.selected {
padding-top: 0; padding-top: 0;
color: #43A047; color: #43A047;
border-bottom: 2px solid #43A047; border-bottom: 2px solid #43A047;
} }
#input-common, #input-timer { #input-common, #input-timer {
display: none; display: none;
} }
input { input {
background-color: white; background-color: white;
border: none; border: none;
outline: none; outline: none;
border-bottom: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
input:focus { input:focus {
border-bottom: 1px solid #43A047; border-bottom: 1px solid #43A047;
} }
input:invalid { input:invalid {
border-bottom: 1px solid #E53935; border-bottom: 1px solid #E53935;
background-color: #FFCDD2; background-color: #FFCDD2;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
input[type=checkbox] { input[type=checkbox] {
filter: hue-rotate(290deg); filter: hue-rotate(290deg);
} }
#time-input-container { #time-input-container {
display: flex; display: flex;
} }
.time-input { .time-input {
width: 33%; width: 33%;
text-align: right; text-align: right;
flex: 1; flex: 1;
min-width: 0; /* SeaMonkey */ min-width: 0; /* SeaMonkey */
} }
#create { #create {
width: 100%; width: 100%;
background-color: #43A047; background-color: #43A047;
color: white; color: white;
padding: 10px; padding: 10px;
border: none; border: none;
outline: none; outline: none;
transition-duration: 0.2s; transition-duration: 0.2s;
cursor: default; cursor: default;
} }
#create:not(:disabled):hover { #create:not(:disabled):hover {
cursor: pointer; cursor: pointer;
box-shadow: 2px 2px 2px #BDBDBD; box-shadow: 2px 2px 2px #BDBDBD;
} }
#create:active { #create:active {
background-color: #2E7D32; background-color: #2E7D32;
} }
#create:disabled { #create:disabled {
background-color: #9E9E9E; background-color: #9E9E9E;
} }
#bookmark { #bookmark {
font-size: 15px; font-size: 15px;
margin-top: 10px; margin-top: 10px;
display: none; display: none;
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
cursor: default; cursor: default;
border: none; border: none;
outline: none; outline: none;
} }
#bookmark:not(.disabled):hover { #bookmark:not(.disabled):hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
#link { #link {
display: none; display: none;
background-color: #E0E0E0; background-color: #E0E0E0;
padding: 3px; padding: 3px;
font-family: "Jetbrains Mono", monospace; font-family: "Jetbrains Mono", monospace;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
word-break: break-all; word-break: break-all;
} }