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

Cleanup and various fixes

Browse Source
This commit is contained in:
Reimar 2025-08-05 18:04:45 +02:00
parent f18323a1a8
commit 4f2c1fb07d
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
8 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
bookmark/index.html
View File

@ -4,13 +4,22 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script>
<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>
<p>
Press
<span id="win"><kbd>Ctrl</kbd> + <kbd>D</kbd></span>
<span id="mac"><kbd style="font-size: 1em">⌘</kbd> + <kbd>D</kbd></span>
or click the <b><i class="far fa-star"></i> Star Icon</b> in your browser
to add this <span class="type"></span> to your bookmarks.
</p>
<p>Next time you open the bookmark, the <span class="type"></span> will automatically be opened.</p>
<a href="/">Back</a> &nbsp; <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
</body>
</html>

9
bookmark/script.js
View File

@ -4,6 +4,15 @@ var popupLink = location.protocol + "//" + location.host + "/popup" + location.s
history.replaceState(null, "", link);
document.title = parseQueryParams().name + " - Popup Timer";
if (navigator.platform.match(/Mac/i)) {
document.getElementById("win").style.display = "none";
document.getElementById("mac").style.display = "inline";
}
[].slice.call(document.getElementsByClassName("type")).forEach(function(elem) {
elem.innerText = parseQueryParams().name.toLowerCase();
});
document.getElementById("open-popup").onclick = function() {
window.open(

24
bookmark/style.css
View File

@ -3,6 +3,10 @@ body {
font-family: helvetica, arial, sans-serif;
font-size: 18px;
text-align: center;
color: #424242;
}
b {
color: black;
}
a, a:visited {
color: #43A047;
@ -11,4 +15,24 @@ a, a:visited {
a:hover {
text-decoration: none;
}
kbd {
background-color: #EEE;
border-radius: 3px;
border: 1px solid #B4B4B4;
box-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
color: #333;
display: inline-block;
font-weight: 700;
line-height: 1;
padding: 3px 6px;
white-space: nowrap;
}
.fa-star {
background-color: #EEE;
padding: 3px;
border-radius: 3px;
}
#mac {
display: none;
}

8
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Easily create a timer or stopwatch as a popup on your screen, directly from within your browser">
<title>Popup Timer</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/b3a602c8a0.js" crossorigin="anonymous"></script>
@ -30,7 +31,7 @@
<label style="float: left;">Time:</label>
<div id="time-input-container">
&nbsp; <input id="hours" class="time-input" type="number" min="0" step="1" value="0">&nbsp;h
&nbsp; <input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;m
&nbsp; <input id="minutes" class="time-input" type="number" min="0" max="60" step="1" value="10">&nbsp;m
&nbsp; <input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;s
</div>
<br>
@ -53,7 +54,10 @@
<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>
<span id="bookmark" title="Adds a shortcut for creating the popup to your bookmarks">
<i class="far fa-bookmark"></i>
<span id="bookmark-label">Bookmark this <span id="bookmark-type"></span></span>
</span>
</div>
</main>

5
popup/index.html
View File

@ -11,9 +11,7 @@
<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();">
<body>
<main>
<span id="hours">00h</span> <span id="minutes">00m</span> <span id="seconds">00s</span>
@ -26,7 +24,6 @@
<div id="progress-bg" class="progress"></div>
<div id="progress-fg" class="progress"></div>
</body>
</html>

16
popup/script.js
View File

@ -21,25 +21,21 @@ if (params.beep === "true") {
} catch(e) {}
}
// Autostart
if (params.autostart === "true") {
switch (params.type) {
// Initialize clock and start
switch (params.type) {
case "timer":
initTimer();
startTimer(1000);
if (params.autostart === "true") startTimer(1000);
break;
case "stopwatch":
initStopwatch();
startStopwatch(1000);
if (params.autostart === "true") startStopwatch(1000);
break;
default:
location.href = "/";
}
}
// Reset timer/stopwatch
@ -81,8 +77,6 @@ document.getElementById("restart").onclick = function() {
// Pause / Resume
playBtn.onclick = function() {
if (!timeout) return;
// Pause
if (playBtn.classList.contains("fa-pause")) {
@ -152,6 +146,8 @@ function initTimer() {
function startTimer(startOffset) {
if (hours === 0 && minutes == 0 && seconds === 0) return;
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");

8
script.js
View File

@ -5,12 +5,6 @@
});
}*/
// 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";
}
// Open new window when clicking create
document.getElementById("create").onclick = function(event) {
@ -109,6 +103,8 @@ function showBookmarkAdded() {
linkElem.innerText = createLink("link");
linkElem.style.display = "inline-block";
document.getElementById("bookmark-type").innerText = elem.id;
}
});

10
style.css
View File

@ -69,7 +69,7 @@ input:invalid {
box-shadow: none;
}
input[type=checkbox] {
filter: hue-rotate(290deg);
accent-color: #43A047;
}
#time-input-container {
display: flex;
@ -103,17 +103,17 @@ input[type=checkbox] {
#bookmark {
font-size: 15px;
margin-top: 10px;
display: none;
color: inherit;
display: inline-block;
text-decoration: inherit;
cursor: default;
border: none;
outline: none;
}
#bookmark:not(.disabled):hover {
text-decoration: underline;
cursor: pointer;
}
#bookmark:not(.disabled):hover #bookmark-label {
text-decoration: underline;
}
#link {
display: none;
background-color: #E0E0E0;