Apply formatting
This commit is contained in:
parent
5f0724e283
commit
f18323a1a8
GPG Key ID:
93549FA07F0AE268
37
README.md
37
README.md
@ -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゜)ノ
|
|
||||||
@ -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> <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
|
<a href="/">Back</a> <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -6,11 +6,11 @@ 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"
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -26,3 +26,4 @@ function parseQueryParams() {
|
|||||||
});
|
});
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
116
index.html
116
index.html
@ -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>
|
||||||
|
|
||||||
<main>
|
<table id="popup-type">
|
||||||
|
<tr>
|
||||||
|
<td id="timer">Timer</td>
|
||||||
|
<td id="stopwatch">Stopwatch</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
<h4>Create new</h4>
|
<br><br>
|
||||||
|
|
||||||
<table id="popup-type">
|
<div id="input-timer">
|
||||||
<tr>
|
<label style="float: left;">Time:</label>
|
||||||
<td id="timer">Timer</td>
|
<div id="time-input-container">
|
||||||
<td id="stopwatch">Stopwatch</td>
|
<input id="hours" class="time-input" type="number" min="0" step="1" value="0"> h
|
||||||
</tr>
|
<input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="0"> m
|
||||||
</table>
|
<input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0"> s
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<label>
|
||||||
|
<input id="beep" type="checkbox" checked>Beep when finished
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br><br>
|
<div id="input-common">
|
||||||
|
<div style="display:flex;">
|
||||||
|
<label>Name: </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>
|
||||||
|
|
||||||
<div id="input-timer">
|
<br><br>
|
||||||
<label style="float: left;">Time:</label>
|
<span id="link" title="Click to copy"></span>
|
||||||
<div id="time-input-container">
|
</body>
|
||||||
<input id="hours" class="time-input" type="number" min="0" step="1" value="0"> h
|
|
||||||
<input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="0"> m
|
|
||||||
<input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0"> 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: </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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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> <i id="restart" class="fas fa-redo"></i>
|
<i id="play" class="fas fa-play"></i> <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>
|
||||||
|
|
||||||
|
|||||||
343
popup/script.js
343
popup/script.js
@ -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":
|
case "timer":
|
||||||
initTimer();
|
initTimer();
|
||||||
startTimer(1000);
|
startTimer(1000);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "stopwatch":
|
case "stopwatch":
|
||||||
initStopwatch();
|
initStopwatch();
|
||||||
startStopwatch(1000);
|
startStopwatch(1000);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
location.href = "/";
|
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);
|
hours = parseInt(params.h);
|
||||||
minutes = parseInt(params.m);
|
minutes = parseInt(params.m);
|
||||||
seconds = parseInt(params.s);
|
seconds = parseInt(params.s);
|
||||||
|
|
||||||
if (hours === 0 && minutes === 0 && seconds === 0) return;
|
if (hours === 0 && minutes === 0 && seconds === 0) return;
|
||||||
|
|
||||||
// Only highlight relevant parts
|
// Only highlight relevant parts
|
||||||
if (hours > 0) {
|
if (hours > 0) {
|
||||||
hoursElem.classList.add("highlighted");
|
hoursElem.classList.add("highlighted");
|
||||||
minutesElem.classList.add("highlighted");
|
minutesElem.classList.add("highlighted");
|
||||||
secondsElem.classList.add("highlighted");
|
secondsElem.classList.add("highlighted");
|
||||||
} else if (minutes > 0) {
|
} else if (minutes > 0) {
|
||||||
minutesElem.classList.add("highlighted");
|
minutesElem.classList.add("highlighted");
|
||||||
secondsElem.classList.add("highlighted");
|
secondsElem.classList.add("highlighted");
|
||||||
} else {
|
} else {
|
||||||
secondsElem.classList.add("highlighted");
|
secondsElem.classList.add("highlighted");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Print initial time
|
// Print initial time
|
||||||
hoursElem.innerText = pad(hours) + "h";
|
hoursElem.innerText = pad(hours) + "h";
|
||||||
minutesElem.innerText = pad(minutes) + "m";
|
minutesElem.innerText = pad(minutes) + "m";
|
||||||
secondsElem.innerText = pad(seconds) + "s";
|
secondsElem.innerText = pad(seconds) + "s";
|
||||||
|
|
||||||
// Animate progress bar
|
// Animate progress bar
|
||||||
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
|
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
|
||||||
progressBar.style.animationDuration = totalSeconds + "s";
|
progressBar.style.animationDuration = totalSeconds + "s";
|
||||||
progressBar.style.animationName = "progress";
|
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--;
|
seconds--;
|
||||||
if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
|
if (seconds === 0 && minutes === 0 && hours === 0) secondsElem.classList.remove("highlighted");
|
||||||
if (seconds <= -1) {
|
if (seconds <= -1) {
|
||||||
seconds = 59;
|
seconds = 59;
|
||||||
|
|
||||||
minutes--;
|
minutes--;
|
||||||
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
|
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
|
||||||
if (minutes <= -1) {
|
if (minutes <= -1) {
|
||||||
minutes = 59;
|
minutes = 59;
|
||||||
|
|
||||||
hours--;
|
hours--;
|
||||||
if (hours === 0) hoursElem.classList.remove("highlighted");
|
if (hours === 0) hoursElem.classList.remove("highlighted");
|
||||||
|
|
||||||
hoursElem.innerText = pad(hours) + "h";
|
hoursElem.innerText = pad(hours) + "h";
|
||||||
}
|
}
|
||||||
minutesElem.innerText = pad(minutes) + "m";
|
minutesElem.innerText = pad(minutes) + "m";
|
||||||
}
|
}
|
||||||
secondsElem.innerText = pad(seconds) + "s";
|
secondsElem.innerText = pad(seconds) + "s";
|
||||||
|
|
||||||
if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
|
if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
|
||||||
else timeout = setTimeout(updateTimer, 1000);
|
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() {
|
var timeUpInterval = setInterval(function() {
|
||||||
|
|
||||||
// Blink red
|
// Blink red
|
||||||
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
||||||
elem.classList.toggle("red");
|
elem.classList.toggle("red");
|
||||||
});
|
});
|
||||||
//document.querySelector
|
//document.querySelector
|
||||||
|
|
||||||
// Blink title
|
// Blink title
|
||||||
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title;
|
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title;
|
||||||
else document.title = document.title.substr(timesUpStr.length);
|
else document.title = document.title.substr(timesUpStr.length);
|
||||||
|
|
||||||
// Play beep
|
// Play beep
|
||||||
if (params.beep === "true" && audioContext) {
|
if (params.beep === "true" && audioContext) {
|
||||||
try {
|
try {
|
||||||
oscillator = audioContext.createOscillator();
|
oscillator = audioContext.createOscillator();
|
||||||
oscillator.type = "sine";
|
oscillator.type = "sine";
|
||||||
oscillator.frequency.value = 1000;
|
oscillator.frequency.value = 1000;
|
||||||
oscillator.connect(audioContext.destination);
|
oscillator.connect(audioContext.destination);
|
||||||
oscillator.start();
|
oscillator.start();
|
||||||
oscillator.stop(audioContext.currentTime + 0.25);
|
oscillator.stop(audioContext.currentTime + 0.25);
|
||||||
} catch(e) {}
|
} catch(e) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
// Stop when user clicks
|
// Stop when user clicks
|
||||||
document.onclick = function() {
|
document.onclick = function() {
|
||||||
|
|
||||||
if (oscillator) oscillator.stop();
|
if (oscillator) oscillator.stop();
|
||||||
|
|
||||||
// Reset color
|
// Reset color
|
||||||
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
||||||
elem.classList.remove("red");
|
elem.classList.remove("red");
|
||||||
});
|
});
|
||||||
|
|
||||||
// Remove "TIME UP" from title
|
// Remove "TIME UP" from title
|
||||||
if (document.title.indexOf(timesUpStr) !== -1) document.title = document.title.substr(timesUpStr.length);
|
if (document.title.indexOf(timesUpStr) !== -1) document.title = document.title.substr(timesUpStr.length);
|
||||||
|
|
||||||
// Clean up
|
// Clean up
|
||||||
clearInterval(timeUpInterval);
|
clearInterval(timeUpInterval);
|
||||||
document.onclick = null;
|
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.remove("fa-play");
|
||||||
playBtn.classList.add("fa-pause");
|
playBtn.classList.add("fa-pause");
|
||||||
|
|
||||||
timeout = setTimeout(updateStopwatch, startOffset);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
259
script.js
259
script.js
@ -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 link = createLink("link");
|
||||||
var linkElem = document.getElementById("link");
|
var linkElem = document.getElementById("link");
|
||||||
|
|
||||||
// Catch is called both on promise rejection (insufficient permissons) and if the function doesn't exist
|
// Catch is called both on promise rejection (insufficient permissons) and if the function doesn't exist
|
||||||
try {
|
try {
|
||||||
|
|
||||||
navigator.clipboard.writeText(link);
|
navigator.clipboard.writeText(link);
|
||||||
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
||||||
|
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
// Alternatively, just select the text and copy it
|
// Alternatively, just select the text and copy it
|
||||||
var range = document.createRange();
|
var range = document.createRange();
|
||||||
range.setStart(linkElem, 0);
|
range.setStart(linkElem, 0);
|
||||||
range.setEnd(linkElem, 1);
|
range.setEnd(linkElem, 1);
|
||||||
|
|
||||||
var selection = window.getSelection();
|
var selection = window.getSelection();
|
||||||
selection.removeAllRanges();
|
selection.removeAllRanges();
|
||||||
selection.addRange(range);
|
selection.addRange(range);
|
||||||
|
|
||||||
document.execCommand("copy");
|
document.execCommand("copy");
|
||||||
|
|
||||||
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
||||||
|
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
// Browser doesn't support copying
|
// Browser doesn't support copying
|
||||||
console.error(e);
|
console.error(e);
|
||||||
linkShowMessage("Couldn't copy link :(", "#EF5350");
|
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
155
style.css
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user