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>
|
||||
<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> <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
|
||||
</body>
|
||||
<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> <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -6,11 +6,11 @@ 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"
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -26,3 +26,4 @@ function parseQueryParams() {
|
||||
});
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
116
index.html
116
index.html
@ -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>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<tr>
|
||||
<td id="timer">Timer</td>
|
||||
<td id="stopwatch">Stopwatch</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="input-timer">
|
||||
<label style="float: left;">Time:</label>
|
||||
<div id="time-input-container">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<label style="float: left;">Time:</label>
|
||||
<div id="time-input-container">
|
||||
<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>
|
||||
<br><br>
|
||||
<span id="link" title="Click to copy"></span>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();">
|
||||
<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>
|
||||
<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-fg" class="progress"></div>
|
||||
<div id="progress-bg" class="progress"></div>
|
||||
<div id="progress-fg" class="progress"></div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
343
popup/script.js
343
popup/script.js
@ -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) {
|
||||
switch (params.type) {
|
||||
|
||||
case "timer":
|
||||
initTimer();
|
||||
startTimer(1000);
|
||||
break;
|
||||
case "timer":
|
||||
initTimer();
|
||||
startTimer(1000);
|
||||
break;
|
||||
|
||||
case "stopwatch":
|
||||
initStopwatch();
|
||||
startStopwatch(1000);
|
||||
break;
|
||||
case "stopwatch":
|
||||
initStopwatch();
|
||||
startStopwatch(1000);
|
||||
break;
|
||||
|
||||
default:
|
||||
location.href = "/";
|
||||
}
|
||||
default:
|
||||
location.href = "/";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Reset timer/stopwatch
|
||||
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) {
|
||||
case "timer":
|
||||
switch (params.type) {
|
||||
case "timer":
|
||||
|
||||
// Reset progress bar
|
||||
// TODO
|
||||
progressBar.animationName = "";
|
||||
progressBar.animationName = "progress";
|
||||
// Reset progress bar
|
||||
// TODO
|
||||
progressBar.animationName = "";
|
||||
progressBar.animationName = "progress";
|
||||
|
||||
initTimer();
|
||||
if (!paused) startTimer(1000);
|
||||
initTimer();
|
||||
if (!paused) startTimer(1000);
|
||||
|
||||
break;
|
||||
case "stopwatch":
|
||||
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");
|
||||
// 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);
|
||||
initStopwatch();
|
||||
if (!paused) startStopwatch(1000);
|
||||
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Pause / Resume
|
||||
playBtn.onclick = function() {
|
||||
|
||||
if (!timeout) return;
|
||||
if (!timeout) return;
|
||||
|
||||
// Pause
|
||||
if (playBtn.classList.contains("fa-pause")) {
|
||||
// Pause
|
||||
if (playBtn.classList.contains("fa-pause")) {
|
||||
|
||||
lastPaused = Date.now();
|
||||
if (params.type === "timer") progressBar.style.animationPlayState = "paused";
|
||||
clearTimeout(timeout);
|
||||
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");
|
||||
// Change icon
|
||||
playBtn.classList.remove("fa-pause");
|
||||
playBtn.classList.add("fa-play");
|
||||
|
||||
// Resume
|
||||
} else {
|
||||
// Resume
|
||||
} else {
|
||||
|
||||
var startOffset = lastPaused % 1000;
|
||||
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;
|
||||
}
|
||||
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");
|
||||
// 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);
|
||||
hours = parseInt(params.h);
|
||||
minutes = parseInt(params.m);
|
||||
seconds = parseInt(params.s);
|
||||
|
||||
if (hours === 0 && minutes === 0 && seconds === 0) return;
|
||||
if (hours === 0 && minutes === 0 && seconds === 0) return;
|
||||
|
||||
// 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");
|
||||
}
|
||||
// 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";
|
||||
// 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");
|
||||
playBtn.classList.remove("fa-play");
|
||||
playBtn.classList.add("fa-pause");
|
||||
|
||||
// Wait the starting offset
|
||||
timeout = setTimeout(updateTimer, startOffset);
|
||||
// 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;
|
||||
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;
|
||||
minutes--;
|
||||
if (minutes === 0 && hours === 0) minutesElem.classList.remove("highlighted");
|
||||
if (minutes <= -1) {
|
||||
minutes = 59;
|
||||
|
||||
hours--;
|
||||
if (hours === 0) hoursElem.classList.remove("highlighted");
|
||||
hours--;
|
||||
if (hours === 0) hoursElem.classList.remove("highlighted");
|
||||
|
||||
hoursElem.innerText = pad(hours) + "h";
|
||||
}
|
||||
minutesElem.innerText = pad(minutes) + "m";
|
||||
}
|
||||
secondsElem.innerText = pad(seconds) + "s";
|
||||
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() {
|
||||
var timeUpInterval = setInterval(function() {
|
||||
|
||||
// Blink red
|
||||
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
||||
elem.classList.toggle("red");
|
||||
});
|
||||
//document.querySelector
|
||||
// Blink red
|
||||
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
||||
elem.classList.toggle("red");
|
||||
});
|
||||
//document.querySelector
|
||||
|
||||
// Blink title
|
||||
if (document.title.indexOf(timesUpStr) === -1) document.title = timesUpStr + document.title;
|
||||
else document.title = document.title.substr(timesUpStr.length);
|
||||
// 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) {}
|
||||
}
|
||||
// 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) {}
|
||||
}
|
||||
|
||||
}, 500);
|
||||
}, 500);
|
||||
|
||||
// Stop when user clicks
|
||||
document.onclick = function() {
|
||||
// Stop when user clicks
|
||||
document.onclick = function() {
|
||||
|
||||
if (oscillator) oscillator.stop();
|
||||
if (oscillator) oscillator.stop();
|
||||
|
||||
// Reset color
|
||||
[].slice.call(document.querySelectorAll("main > span")).forEach(function(elem) {
|
||||
elem.classList.remove("red");
|
||||
});
|
||||
// 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);
|
||||
// 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");
|
||||
playBtn.classList.remove("fa-play");
|
||||
playBtn.classList.add("fa-pause");
|
||||
|
||||
timeout = setTimeout(updateStopwatch, startOffset);
|
||||
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";
|
||||
}
|
||||
// Seconds
|
||||
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
|
||||
function pad(num) {
|
||||
return ("00" + num).substr(-2);
|
||||
return ("00" + num).substr(-2);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
259
script.js
259
script.js
@ -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"
|
||||
);
|
||||
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();
|
||||
}
|
||||
// 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;
|
||||
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) {
|
||||
// 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;
|
||||
var link = createLink("link");
|
||||
var title = document.getElementById("name").value;
|
||||
|
||||
// Internet explorer
|
||||
if (window.external && typeof window.external.AddFavorite === "function") {
|
||||
// Internet explorer
|
||||
if (window.external && typeof window.external.AddFavorite === "function") {
|
||||
|
||||
window.external.AddFavorite(link, title);
|
||||
showBookmarkAdded();
|
||||
return;
|
||||
window.external.AddFavorite(link, title);
|
||||
showBookmarkAdded();
|
||||
return;
|
||||
|
||||
// Old Firefox, SeaMonkey
|
||||
} else if (window.sidebar && typeof window.sidebar.addPanel === "function") {
|
||||
// Old Firefox, SeaMonkey
|
||||
} else if (window.sidebar && typeof window.sidebar.addPanel === "function") {
|
||||
|
||||
window.sidebar.addPanel(title, link, "");
|
||||
showBookmarkAdded();
|
||||
return;
|
||||
window.sidebar.addPanel(title, link, "");
|
||||
showBookmarkAdded();
|
||||
return;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Show bookmark instructions in new tab
|
||||
window.open(
|
||||
createLink("bookmark"),
|
||||
"_blank",
|
||||
""
|
||||
);
|
||||
// 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");
|
||||
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() {
|
||||
setTimeout(function() {
|
||||
|
||||
bookmarkBtn.innerText = "Create bookmark";
|
||||
bookmarkBtn.style.color = "inherit";
|
||||
bookmarkBtn.classList.remove("disabled");
|
||||
bookmarkBtn.innerText = "Create bookmark";
|
||||
bookmarkBtn.style.color = "inherit";
|
||||
bookmarkBtn.classList.remove("disabled");
|
||||
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
|
||||
// When clicking Timer/Stopwatch
|
||||
[].slice.call(document.querySelectorAll("#popup-type td")).forEach(function(elem) {
|
||||
elem.onclick = function(event) {
|
||||
elem.onclick = function(event) {
|
||||
|
||||
var elem = event.target;
|
||||
if (elem.classList.contains("selected")) return;
|
||||
elem.classList.add("selected");
|
||||
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;
|
||||
}
|
||||
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";
|
||||
document.getElementById("input-common").style.display = "block";
|
||||
|
||||
var linkElem = document.getElementById("link");
|
||||
linkElem.innerText = createLink("link");
|
||||
linkElem.style.display = "inline-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) {
|
||||
input.oninput = function(event) {
|
||||
|
||||
var createBtn = document.getElementById("create");
|
||||
var bookmarkBtn = document.getElementById("bookmark");
|
||||
var isInvalid = document.querySelectorAll("input:invalid").length > 0;
|
||||
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");
|
||||
}
|
||||
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");
|
||||
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 {
|
||||
// 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");
|
||||
navigator.clipboard.writeText(link);
|
||||
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
||||
|
||||
} catch(e) {
|
||||
try {
|
||||
} catch(e) {
|
||||
try {
|
||||
|
||||
// Alternatively, just select the text and copy it
|
||||
var range = document.createRange();
|
||||
range.setStart(linkElem, 0);
|
||||
range.setEnd(linkElem, 1);
|
||||
// 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 selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
document.execCommand("copy");
|
||||
document.execCommand("copy");
|
||||
|
||||
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
||||
linkShowMessage("Copied to clipboard!", "#66BB6A");
|
||||
|
||||
} catch(e) {
|
||||
// Browser doesn't support copying
|
||||
console.error(e);
|
||||
linkShowMessage("Couldn't copy link :(", "#EF5350");
|
||||
}
|
||||
}
|
||||
} 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");
|
||||
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;
|
||||
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);
|
||||
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";
|
||||
// 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;
|
||||
// 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
155
style.css
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user