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 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">
<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="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. <p>
<br><br> 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> <a href="/">Back</a> &nbsp; <a id="open-popup" href="javascript:void(0);">Open Popup Now</a>
</body> </body>
</html> </html>

9
bookmark/script.js
View File

@ -4,6 +4,15 @@ var popupLink = location.protocol + "//" + location.host + "/popup" + location.s
history.replaceState(null, "", link); history.replaceState(null, "", link);
document.title = parseQueryParams().name + " - Popup Timer"; 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() { document.getElementById("open-popup").onclick = function() {
window.open( window.open(

24
bookmark/style.css
View File

@ -3,6 +3,10 @@ body {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
color: #424242;
}
b {
color: black;
} }
a, a:visited { a, a:visited {
color: #43A047; color: #43A047;
@ -11,4 +15,24 @@ a, a:visited {
a:hover { a:hover {
text-decoration: none; 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 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">
<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> <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>
@ -30,7 +31,7 @@
<label style="float: left;">Time:</label> <label style="float: left;">Time:</label>
<div id="time-input-container"> <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="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 &nbsp; <input id="seconds" class="time-input" type="number" min="0" max="60" step="1" value="0">&nbsp;s
</div> </div>
<br> <br>
@ -53,7 +54,10 @@
<br><br> <br><br>
<button id="create">Create</button> <button id="create">Create</button>
<br> <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> </div>
</main> </main>

5
popup/index.html
View File

@ -11,9 +11,7 @@
<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 --> <body>
<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>
@ -26,7 +24,6 @@
<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>

16
popup/script.js
View File

@ -21,25 +21,21 @@ if (params.beep === "true") {
} catch(e) {} } catch(e) {}
} }
// Autostart // Initialize clock and start
if (params.autostart === "true") { switch (params.type) {
switch (params.type) {
case "timer": case "timer":
initTimer(); initTimer();
startTimer(1000); if (params.autostart === "true") startTimer(1000);
break; break;
case "stopwatch": case "stopwatch":
initStopwatch(); initStopwatch();
startStopwatch(1000); if (params.autostart === "true") startStopwatch(1000);
break; break;
default: default:
location.href = "/"; location.href = "/";
}
} }
// Reset timer/stopwatch // Reset timer/stopwatch
@ -81,8 +77,6 @@ document.getElementById("restart").onclick = function() {
// Pause / Resume // Pause / Resume
playBtn.onclick = function() { playBtn.onclick = function() {
if (!timeout) return;
// Pause // Pause
if (playBtn.classList.contains("fa-pause")) { if (playBtn.classList.contains("fa-pause")) {
@ -152,6 +146,8 @@ function initTimer() {
function startTimer(startOffset) { function startTimer(startOffset) {
if (hours === 0 && minutes == 0 && seconds === 0) return;
playBtn.classList.remove("fa-play"); playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause"); 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 // Open new window when clicking create
document.getElementById("create").onclick = function(event) { document.getElementById("create").onclick = function(event) {
@ -109,6 +103,8 @@ function showBookmarkAdded() {
linkElem.innerText = createLink("link"); linkElem.innerText = createLink("link");
linkElem.style.display = "inline-block"; 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; box-shadow: none;
} }
input[type=checkbox] { input[type=checkbox] {
filter: hue-rotate(290deg); accent-color: #43A047;
} }
#time-input-container { #time-input-container {
display: flex; display: flex;
@ -103,17 +103,17 @@ input[type=checkbox] {
#bookmark { #bookmark {
font-size: 15px; font-size: 15px;
margin-top: 10px; margin-top: 10px;
display: none;
color: inherit; color: inherit;
display: inline-block;
text-decoration: inherit; text-decoration: inherit;
cursor: default; cursor: default;
border: none; border: none;
outline: none; outline: none;
}
#bookmark:not(.disabled):hover {
text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
#bookmark:not(.disabled):hover #bookmark-label {
text-decoration: underline;
}
#link { #link {
display: none; display: none;
background-color: #E0E0E0; background-color: #E0E0E0;