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

15
bookmark/script.js
View File

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

17
bookmark/style.css
View File

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

126
index.html
View File

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

36
link/index.html
View File

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

27
link/script.js
View File

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

59
popup/index.html
View File

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

421
popup/script.js
View File

@ -16,271 +16,271 @@ var lastPaused = -1;
// Init audio
var oscillator, audioContext;
if (params.beep === "true") {
try {
audioContext = new (window.AudioContext || window.webkitAudioContext);
} catch(e) {}
try {
audioContext = new (window.AudioContext || window.webkitAudioContext);
} catch(e) {}
}
// Autostart
if (params.autostart === "true") {
switch (params.type) {
case "timer":
initTimer();
startTimer(1000);
break;
case "stopwatch":
initStopwatch();
startStopwatch(1000);
break;
default:
location.href = "/";
}
switch (params.type) {
}
case "timer":
initTimer();
startTimer(1000);
break;
case "stopwatch":
initStopwatch();
startStopwatch(1000);
break;
default:
location.href = "/";
}
}
// Reset timer/stopwatch
document.getElementById("restart").onclick = function() {
if (timeout) clearTimeout(timeout);
var paused = playBtn.classList.contains("fa-play");
switch (params.type) {
case "timer":
// Reset progress bar
// TODO
progressBar.animationName = "";
progressBar.animationName = "progress";
initTimer();
if (!paused) startTimer(1000);
break;
case "stopwatch":
// Reset displayed time
secondsElem.innerText = "00s";
secondsElem.classList.remove("highlighted");
minutesElem.innerText = "00m";
minutesElem.classList.remove("highlighted");
hoursElem.innerText = "00h";
hoursElem.classList.remove("highlighted");
initStopwatch();
if (!paused) startStopwatch(1000);
break;
}
if (timeout) clearTimeout(timeout);
var paused = playBtn.classList.contains("fa-play");
switch (params.type) {
case "timer":
// Reset progress bar
// TODO
progressBar.animationName = "";
progressBar.animationName = "progress";
initTimer();
if (!paused) startTimer(1000);
break;
case "stopwatch":
// Reset displayed time
secondsElem.innerText = "00s";
secondsElem.classList.remove("highlighted");
minutesElem.innerText = "00m";
minutesElem.classList.remove("highlighted");
hoursElem.innerText = "00h";
hoursElem.classList.remove("highlighted");
initStopwatch();
if (!paused) startStopwatch(1000);
break;
}
}
// Pause / Resume
playBtn.onclick = function() {
if (!timeout) return;
// Pause
if (playBtn.classList.contains("fa-pause")) {
lastPaused = Date.now();
if (params.type === "timer") progressBar.style.animationPlayState = "paused";
clearTimeout(timeout);
// Change icon
playBtn.classList.remove("fa-pause");
playBtn.classList.add("fa-play");
// Resume
} else {
var startOffset = lastPaused % 1000;
switch (params.type) {
case "timer":
if (hours === 0 && minutes == 0 && seconds === 0) return;
progressBar.style.animationPlayState = "running";
startTimer(startOffset);
break;
case "stopwatch":
startStopwatch(startOffset);
break;
}
// Change icon
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
}
if (!timeout) return;
// Pause
if (playBtn.classList.contains("fa-pause")) {
lastPaused = Date.now();
if (params.type === "timer") progressBar.style.animationPlayState = "paused";
clearTimeout(timeout);
// Change icon
playBtn.classList.remove("fa-pause");
playBtn.classList.add("fa-play");
// Resume
} else {
var startOffset = lastPaused % 1000;
switch (params.type) {
case "timer":
if (hours === 0 && minutes == 0 && seconds === 0) return;
progressBar.style.animationPlayState = "running";
startTimer(startOffset);
break;
case "stopwatch":
startStopwatch(startOffset);
break;
}
// Change icon
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
}
}
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) {
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");
}
if (hours === 0 && minutes === 0 && seconds === 0) return;
// Print initial time
hoursElem.innerText = pad(hours) + "h";
minutesElem.innerText = pad(minutes) + "m";
secondsElem.innerText = pad(seconds) + "s";
// Only highlight relevant parts
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
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) {
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
// Wait the starting offset
timeout = setTimeout(updateTimer, startOffset);
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
// Wait the starting offset
timeout = setTimeout(updateTimer, startOffset);
document.getElementById("progress-fg").style.animationPlayState = "running";
document.getElementById("progress-fg").style.animationPlayState = "running";
}
function updateTimer() {
seconds--;
if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
if (seconds <= -1) {
seconds = 59;
minutes--;
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
if (minutes <= -1) {
minutes = 59;
seconds--;
if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
if (seconds <= -1) {
seconds = 59;
hours--;
if (hours === 0) hoursElem.classList.remove("highlighted");
minutes--;
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
if (minutes <= -1) {
minutes = 59;
hoursElem.innerText = pad(hours) + "h";
}
minutesElem.innerText = pad(minutes) + "m";
}
secondsElem.innerText = pad(seconds) + "s";
hours--;
if (hours === 0) hoursElem.classList.remove("highlighted");
hoursElem.innerText = pad(hours) + "h";
}
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.
function timeUp() {
var timeUpInterval = setInterval(function() {
// Blink red
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
elem.classList.toggle("red");
});
//document.querySelector
var timeUpInterval = setInterval(function() {
// Blink title
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title;
else document.title = document.title.substr(timesUpStr.length);
// Play beep
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) {}
}
// Blink red
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
elem.classList.toggle("red");
});
//document.querySelector
}, 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
document.onclick = function() {
if (oscillator) oscillator.stop();
// Reset color
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
elem.classList.remove("red");
});
// Play beep
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) {}
}
// Remove "TIME UP" from title
if (document.title.indexOf(timesUpStr) !== -1) document.title = document.title.substr(timesUpStr.length);
}, 500);
// 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() {
hours = 0;
minutes = 0;
seconds = 0;
hours = 0;
minutes = 0;
seconds = 0;
}
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() {
// Update seconds
seconds++;
if (hours === 0 && minutes === 0 && seconds === 1) secondsElem.classList.add("highlighted");
if (seconds >= 60) {
seconds = 0;
// Update seconds
seconds++;
if (hours === 0 && minutes === 0 && seconds === 1) secondsElem.classList.add("highlighted");
if (seconds >= 60) {
seconds = 0;
// Update minutes
minutes++;
if (hours === 0 && minutes === 1) minutesElem.classList.add("highlighted");
if (minutes >= 60) {
minutes = 0;
// Update minutes
minutes++;
if (hours === 0 && minutes === 1) minutesElem.classList.add("highlighted");
if (minutes >= 60) {
minutes = 0;
// Update hours
hours++;
if (hours === 1) hoursElem.classList.add("highlighted");
hoursElem.innerText = pad(hours) + "h";
// Update hours
hours++;
if (hours === 1) hoursElem.classList.add("highlighted");
hoursElem.innerText = pad(hours) + "h";
}
// Minutes
minutesElem.innerText = pad(minutes) + "m";
}
// Minutes
minutesElem.innerText = pad(minutes) + "m";
}
// Seconds
secondsElem.innerText = pad(seconds) + "s";
timeout = setTimeout(updateStopwatch, 1000);
}
// Seconds
secondsElem.innerText = pad(seconds) + "s";
timeout = setTimeout(updateStopwatch, 1000);
}
@ -299,5 +299,6 @@ function parseQueryParams() {
// Adds one leading zero if necessary
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-family: "Jetbrains Mono";
src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"),
url("/assets/JetBrainsMono-Regular.ttf") format("truetype");
font-family: "Jetbrains Mono";
src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"),
url("/assets/JetBrainsMono-Regular.ttf") format("truetype");
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FAFAFA;
color: #424242;
font-family: "Jetbrains Mono", helvetica, arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FAFAFA;
color: #424242;
font-family: "Jetbrains Mono", helvetica, arial, sans-serif;
}
main {
position: absolute;
width: 100vw;
text-align: center;
top: 50%;
transform: translate(0, -50%);
position: absolute;
width: 100vw;
text-align: center;
top: 50%;
transform: translate(0, -50%);
}
main > span {
font-size: 15vw; /* Browsers that don't support min() */
font-size: min(15vw, 50vh);
color: #9E9E9E;
font-size: 15vw; /* Browsers that don't support min() */
font-size: min(15vw, 50vh);
color: #9E9E9E;
}
main > span.highlighted {
color: #424242;
color: #424242;
}
main > span.red {
color: #F4511E;
color: #F4511E;
}
.progress {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 0;
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 0;
}
#progress-bg {
background-color: #9E9E9E;
background-color: #9E9E9E;
}
#progress-fg {
background-color: #43A047;
animation-timing-function: linear;
animation-fill-mode: forwards;
background-color: #43A047;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100vw;
}
from {
width: 0;
}
to {
width: 100vw;
}
}
/* FontAwesome */
i {
font-size: 12px;
color: #9E9E9E;
font-size: 12px;
color: #9E9E9E;
}
i:hover {
cursor: pointer;
color: #424242;
}
cursor: pointer;
color: #424242;
}

339
script.js
View File

@ -1,213 +1,214 @@
// Make checkboxes green on Chrome
/*if (navigator.vendor === "Google Inc.") {
[].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
// 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")) {
document.getElementById("bookmark").style.display = "inline-block";
document.getElementById("bookmark").style.display = "inline-block";
}
// Open new window when clicking create
document.getElementById("create").onclick = function(event) {
var popup = window.open(
createLink("popup"),
"PopupTimer" + Date.now(),
"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
popup.onblur = function() {
popup.focus();
}
var popup = window.open(
createLink("popup"),
"PopupTimer" + Date.now(),
"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
popup.onblur = function() {
popup.focus();
}
};
// When clicking Create bookmark
document.getElementById("bookmark").onclick = function(event) {
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
if (!event.shiftKey) {
var link = createLink("link");
var title = document.getElementById("name").value;
// Internet explorer
if (window.external && typeof window.external.AddFavorite === "function") {
window.external.AddFavorite(link, title);
showBookmarkAdded();
return;
// Old Firefox, SeaMonkey
} else if (window.sidebar && typeof window.sidebar.addPanel === "function") {
window.sidebar.addPanel(title, link, "");
showBookmarkAdded();
return;
}
}
// Show bookmark instructions in new tab
window.open(
createLink("bookmark"),
"_blank",
""
);
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
if (!event.shiftKey) {
var link = createLink("link");
var title = document.getElementById("name").value;
// Internet explorer
if (window.external && typeof window.external.AddFavorite === "function") {
window.external.AddFavorite(link, title);
showBookmarkAdded();
return;
// Old Firefox, SeaMonkey
} else if (window.sidebar && typeof window.sidebar.addPanel === "function") {
window.sidebar.addPanel(title, link, "");
showBookmarkAdded();
return;
}
}
// Show bookmark instructions in new tab
window.open(
createLink("bookmark"),
"_blank",
""
);
}
// Show a green "Bookmark added" message for a second
function showBookmarkAdded() {
var bookmarkBtn = document.getElementById("bookmark");
bookmarkBtn.innerHTML = "<i class='fas fa-check'></i> <b>Bookmark added</b>";
bookmarkBtn.style.color = "#66BB6A";
bookmarkBtn.classList.add("disabled");
setTimeout(function() {
bookmarkBtn.innerText = "Create bookmark";
bookmarkBtn.style.color = "inherit";
bookmarkBtn.classList.remove("disabled");
}, 1000);
var bookmarkBtn = document.getElementById("bookmark");
bookmarkBtn.innerHTML = "<i class='fas fa-check'></i> <b>Bookmark added</b>";
bookmarkBtn.style.color = "#66BB6A";
bookmarkBtn.classList.add("disabled");
setTimeout(function() {
bookmarkBtn.innerText = "Create bookmark";
bookmarkBtn.style.color = "inherit";
bookmarkBtn.classList.remove("disabled");
}, 1000);
}
// When clicking Timer/Stopwatch
[].slice.call(document.querySelectorAll("#popup-type td")).forEach(function(elem) {
elem.onclick = function(event) {
var elem = event.target;
if (elem.classList.contains("selected")) return;
elem.classList.add("selected");
switch (elem.id) {
case "timer":
document.getElementById("stopwatch").classList.remove("selected");
document.getElementById("input-timer").style.display = "block";
document.getElementById("name").value = "Timer";
break;
case "stopwatch":
document.getElementById("timer").classList.remove("selected");
document.getElementById("input-timer").style.display = "none";
document.getElementById("name").value = "Stopwatch";
break;
}
document.getElementById("input-common").style.display = "block";
var linkElem = document.getElementById("link");
linkElem.innerText = createLink("link");
linkElem.style.display = "inline-block";
}
elem.onclick = function(event) {
var elem = event.target;
if (elem.classList.contains("selected")) return;
elem.classList.add("selected");
switch (elem.id) {
case "timer":
document.getElementById("stopwatch").classList.remove("selected");
document.getElementById("input-timer").style.display = "block";
document.getElementById("name").value = "Timer";
break;
case "stopwatch":
document.getElementById("timer").classList.remove("selected");
document.getElementById("input-timer").style.display = "none";
document.getElementById("name").value = "Stopwatch";
break;
}
document.getElementById("input-common").style.display = "block";
var linkElem = document.getElementById("link");
linkElem.innerText = createLink("link");
linkElem.style.display = "inline-block";
}
});
// Disable buttons on invalid input
[].slice.call(document.getElementsByTagName("input")).forEach(function(input) {
input.oninput = function(event) {
var createBtn = document.getElementById("create");
var bookmarkBtn = document.getElementById("bookmark");
var isInvalid = document.querySelectorAll("input:invalid").length > 0;
if (isInvalid) {
createBtn.disabled = true;
bookmarkBtn.classList.add("disabled");
} else {
createBtn.disabled = false;
bookmarkBtn.classList.remove("disabled");
document.getElementById("link").innerText = createLink("link");
}
}
input.oninput = function(event) {
var createBtn = document.getElementById("create");
var bookmarkBtn = document.getElementById("bookmark");
var isInvalid = document.querySelectorAll("input:invalid").length > 0;
if (isInvalid) {
createBtn.disabled = true;
bookmarkBtn.classList.add("disabled");
} else {
createBtn.disabled = false;
bookmarkBtn.classList.remove("disabled");
document.getElementById("link").innerText = createLink("link");
}
}
});
// Copy link to clipboard when clicked
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();
selection.removeAllRanges();
selection.addRange(range);
var link = createLink("link");
var linkElem = document.getElementById("link");
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
function linkShowMessage(message, color) {
var linkElem = document.getElementById("link");
linkElem.style.backgroundColor = color;
linkElem.style.width = linkElem.offsetWidth + "px";
linkElem.style.color = "white";
linkElem.style.fontFamily = "helvetica, arial, sans-serif";
linkElem.style.fontWeight = "bold";
linkElem.innerText = message;
setTimeout(function() {
linkElem.style.backgroundColor = "#E0E0E0";
linkElem.style.color = "black";
linkElem.style.fontFamily = "'Jetbrains Mono', monospace";
linkElem.style.width = "auto";
linkElem.style.fontWeight = "normal";
linkElem.innerText = createLink("link");
}, 1000);
var linkElem = document.getElementById("link");
linkElem.style.backgroundColor = color;
linkElem.style.width = linkElem.offsetWidth + "px";
linkElem.style.color = "white";
linkElem.style.fontFamily = "helvetica, arial, sans-serif";
linkElem.style.fontWeight = "bold";
linkElem.innerText = message;
setTimeout(function() {
linkElem.style.backgroundColor = "#E0E0E0";
linkElem.style.color = "black";
linkElem.style.fontFamily = "'Jetbrains Mono', monospace";
linkElem.style.width = "auto";
linkElem.style.fontWeight = "normal";
linkElem.innerText = createLink("link");
}, 1000);
}
function createLink(type) {
// Get user input
var input = {};
["hours", "minutes", "seconds", "name"].forEach(function(name) {
input[name] = document.getElementById(name).value;
});
["autostart", "beep"].forEach(function(name) {
input[name] = !!document.getElementById(name).checked;
});
if (document.getElementById("timer").classList.contains("selected")) input.type = "timer";
else input.type = "stopwatch";
// Create URL
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;
return url;
// Get user input
var input = {};
["hours", "minutes", "seconds", "name"].forEach(function(name) {
input[name] = document.getElementById(name).value;
});
["autostart", "beep"].forEach(function(name) {
input[name] = !!document.getElementById(name).checked;
});
if (document.getElementById("timer").classList.contains("selected")) input.type = "timer";
else input.type = "stopwatch";
// Create URL
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;
return url;
}

155
style.css
View File

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