MeowcaTheoRange/Clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Huge QOL upgrade. Added more widgets, small fixes, and timer tones.

Browse source
This commit is contained in:
MeowcaTheoRange 2022-09-09 17:57:19 -05:00
parent 726ed7c23b
commit f782236bf8
14 changed files with 173 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/tones/beethoven.mp3 Normal file
View file

Binary file not shown.

BIN
assets/tones/megalo.mp3 Normal file
View file

Binary file not shown.

BIN
assets/tones/none.mp3 Normal file
View file

Binary file not shown.

BIN
assets/tones/ringer.mp3 Normal file
View file

Binary file not shown.

BIN
assets/tones/sweet.mp3 Normal file
View file

Binary file not shown.

0
assets/tone.mp3 → assets/tones/tone.mp3
View file

BIN
assets/tones/twinkle.mp3 Normal file
View file

Binary file not shown.

BIN
assets/tones/violin.mp3 Normal file
View file

Binary file not shown.

10
canvas.js
View file

@ -1,4 +1,4 @@
var tone = new Audio("./assets/tone.mp3"); var tone = new Audio();
document.querySelectorAll(".clock").forEach((clock) => { document.querySelectorAll(".clock").forEach((clock) => {
var canvas = clock.querySelector("canvas"); var canvas = clock.querySelector("canvas");
@ -130,11 +130,19 @@ function updateTimer() {
setInterval(() => { setInterval(() => {
document.querySelectorAll(".timer-enabled:not(.timer-paused)").forEach((clock, i) => { document.querySelectorAll(".timer-enabled:not(.timer-paused)").forEach((clock, i) => {
var timer = clock.dataset.time; var timer = clock.dataset.time;
var bool = clock.dataset.ctp == "true";
clock.dataset.time--; clock.dataset.time--;
if (bool) {
document.querySelector(".poplight .press").classList.remove("popped");
}
if (timer <= 0) { if (timer <= 0) {
clock.classList.remove("timer-enabled"); clock.classList.remove("timer-enabled");
tone.src = "./assets/tones/" + clock.dataset.tone + ".mp3";
tone.currentTime = 0; tone.currentTime = 0;
tone.play(); tone.play();
if (bool) {
document.querySelector(".poplight .press").classList.add("popped");
}
} }
}); });
updateTimer(); updateTimer();

78
index.html
View file

@ -6,27 +6,32 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Clock</title> <title>FunnyClock²</title>
<link rel="stylesheet" href="./styles/root.css"> <link rel="stylesheet" href="./styles/root.css">
<link rel="stylesheet" href="./styles/clock.css"> <link rel="stylesheet" href="./styles/clock.css">
<link rel="stylesheet" href="./styles/style.css"> <link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/dialog.css"> <link rel="stylesheet" href="./styles/dialog.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="jqtp.js"></script>
</head> </head>
<body> <body>
<div id="back"></div> <div id="back"></div>
<div id="backconstrain"></div>
<div class="header"> <div class="header">
<div> <div>
<button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button> <button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button>
<sep></sep> <sep></sep>
<button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">add_circle</button> <button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">schedule</button>
<button class="material-symbols-outlined" data-title="Add Timer" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timer--').classList.add('open');">timer</button> <button class="material-symbols-outlined" data-title="Add Timer" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timer--').classList.add('open');">timer</button>
<button class="material-symbols-outlined" data-title="Add Note" onclick="addNote();">description</button>
<button class="material-symbols-outlined" data-title="Add Checklist" onclick="addChecklist();">checklist</button>
</div> </div>
<div> <div>
<button class="material-symbols-outlined" data-title="Customize Color" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-dialog--').classList.add('open');">palette</button> <button class="material-symbols-outlined" data-title="Customize Color" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-dialog--').classList.add('open');">palette</button>
<button class="material-symbols-outlined" data-title="Open Fullscreen" onclick="openFullscreen();">fullscreen</button> <button class="material-symbols-outlined" data-title="Open Fullscreen" onclick="openFullscreen();">fullscreen</button>
<button class="material-symbols-outlined" data-title="About" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-about--').classList.add('open');">info</button> <button class="material-symbols-outlined" data-title="About FunnyClock²" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-about--').classList.add('open');">info</button>
</div> </div>
</div> </div>
<div class="body"> <div class="body">
@ -35,14 +40,13 @@
--><div class="labels"> --><div class="labels">
<h1 class="title">Loading...</h1><br /> <h1 class="title">Loading...</h1><br />
<p class="timezone">Loading...</p> <p class="timezone">Loading...</p>
</div> </div><br />
<h1>Welcome!</h1> <textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
<span>Feel free to take some notes.</span><br />
<textarea class="txt" title="Notes" placeholder="Type here." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
</div> </div>
</div> </div>
<div class="poplight"> <div class="poplight">
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button> <button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
<div class="drag material-symbols-outlined" data-title="Drag Poplight">open_with</div>
<button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button> <button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button>
</div> </div>
<div class="scrim-over-- scr-dialog--"> <div class="scrim-over-- scr-dialog--">
@ -143,7 +147,25 @@
<p class="dlg-top">Configure Timer</p> <p class="dlg-top">Configure Timer</p>
<form id="timerform"> <form id="timerform">
<!-- <Peter... the="horse" is h=ere /> --> <!-- <Peter... the="horse" is h=ere /> -->
<input type="number" name="minute" placeholder="05" min="00" value="05" /><span>:</span><input type="number" name="second" placeholder="00" min="00" value="00" max="59" /> <input type="number" name="minute" placeholder="05" min="00" value="05" /><span>:</span><input type="number" name="second" placeholder="00" min="00" value="00" max="59" /><br />
<input type="checkbox" name="ctp" id="ctp" /> <label for="ctp">Connected To Poplight (running = on, done = off)</label><br />
<p class="dlg-top">Configure Tone</p>
<input type="radio" name="tone" id="tonebeet" value="beethoven" /><!--
--><label for="tonebeet">BEETHOVEN</label><!--
--><input type="radio" name="tone" id="tonemegalo" value="megalo" /><!--
--><label for="tonemegalo">MEGALO</label><!--
--><input type="radio" name="tone" id="toneringer" value="ringer" /><!--
--><label for="toneringer">RINGER</label><!--
--><input type="radio" name="tone" id="tonesweet" value="sweet" /><!--
--><label for="tonesweet">DANCE</label><!--
--><input type="radio" name="tone" id="tonetone" value="tone" checked /><!--
--><label for="tonetone">DRY</label><!--
--><input type="radio" name="tone" id="tonetwinkle" value="twinkle" /><!--
--><label for="tonetwinkle">TWINKLE</label><!--
--><input type="radio" name="tone" id="toneviolin" value="violin" /><!--
--><label for="toneviolin">VIOLIN</label><!--
--><input type="radio" name="tone" id="tonenone" value="none" /><!--
--><label for="tonenone">NONE</label>
<div> <div>
<input type="submit" name="action" value="DONE"/> <input type="submit" name="action" value="DONE"/>
</div> </div>
@ -174,6 +196,11 @@
</div> </div>
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div> <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
<script> <script>
$(".poplight").draggable({
containment: $("#backconstrain"),
handle: "div.drag"
});
var elem = document.documentElement; var elem = document.documentElement;
function openFullscreen() { function openFullscreen() {
@ -230,8 +257,9 @@ document.querySelector("#color").addEventListener("change", (e) => {
document.querySelector("#timerform").addEventListener("submit", (e) => { document.querySelector("#timerform").addEventListener("submit", (e) => {
event.preventDefault(); event.preventDefault();
const formData = new FormData(e.target); const formData = new FormData(e.target);
var checked = formData.get("ctp") == "on";
var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second")); var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second"));
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="timer timer-enabled" data-time="${time}" data-orig="${time}"> document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="timer timer-enabled" data-time="${time}" data-orig="${time}" data-ctp="${checked}" data-tone="${formData.get("tone")}">
<canvas width="64" height="64"></canvas><!-- <canvas width="64" height="64"></canvas><!--
--><div class="labels"> --><div class="labels">
<h1 class="time"><span class="mins">00</span>:<span class="seconds">00</span></h1><br /> <h1 class="time"><span class="mins">00</span>:<span class="seconds">00</span></h1><br />
@ -239,7 +267,10 @@ document.querySelector("#timerform").addEventListener("submit", (e) => {
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button> <button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
<button class="normalclock material-symbols-outlined" onclick="this.parentElement.classList.toggle('timer-paused');">pause</button> <button class="normalclock material-symbols-outlined" onclick="this.parentElement.classList.toggle('timer-paused');">pause</button>
<button class="normalclock material-symbols-outlined" onclick="this.parentElement.dataset.time = this.parentElement.dataset.orig;this.parentElement.classList.add('timer-enabled');updateTimer()">refresh</button> <button class="normalclock material-symbols-outlined" onclick="this.parentElement.dataset.time = this.parentElement.dataset.orig;this.parentElement.classList.add('timer-enabled');updateTimer()">refresh</button>
</div>`); </div>`);
if (checked) {
document.querySelector(".poplight .press").classList.remove("popped");
}
updateTimer(); updateTimer();
document.querySelector('.scr-timer--').classList.remove('open'); document.querySelector('.scr-timer--').classList.remove('open');
}) })
@ -263,6 +294,33 @@ document.querySelector("#timezone").addEventListener("submit", (e) => {
update(); update();
document.querySelector('.scr-timezone--').classList.remove('open'); document.querySelector('.scr-timezone--').classList.remove('open');
}) })
function addNote() {
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
<textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
</div>`);
}
function addChecklist() {
document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
<div class="lister">
<div class="checkobject">
<button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
<input type="text" placeholder="Checklist item" />
</div>
</div>
<button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
<button class="normalclock material-symbols-outlined" onclick="addCheckbox(this.parentElement.querySelector('.lister'));">add</button>
</div>`);
}
function addCheckbox(obj) {
obj.insertAdjacentHTML( "beforeend", `<div class="checkobject">
<button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
<input type="text" placeholder="Checklist item" />
</div>`);
}
</script> </script>
<script src="./canvas.js"></script> <script src="./canvas.js"></script>
</body> </body>

11
jqtp.js Normal file
View file

@ -0,0 +1,11 @@
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

16
styles/clock.css
View file

@ -1,7 +1,7 @@
.body { .body {
width: calc(100vw - 64px); width: calc(100vw - 64px);
height: 100vh; height: 100%;
position: fixed; position: fixed;
left: 64px; left: 64px;
top: 0; top: 0;
@ -11,7 +11,7 @@
overflow-y: auto; overflow-y: auto;
} }
.body .clock, .body .timer { .body .clock, .body .timer, .body .noteobject {
width: 100%; width: 100%;
min-height: max-content; min-height: max-content;
border-radius: 8px; border-radius: 8px;
@ -24,7 +24,7 @@
zoom: 1.25; zoom: 1.25;
} }
.body .clock::before, .body .timer::before { .body .clock::before, .body .timer::before, .body .noteobject::before {
content: ""; content: "";
background-color: #FFFFFF40; background-color: #FFFFFF40;
position: absolute; position: absolute;
@ -50,7 +50,7 @@
.body .clock h1, .body .timer h1 { .body .clock h1, .body .timer h1, .body .noteobject h1 {
margin: 0; margin: 0;
margin-top: 16px; margin-top: 16px;
padding: 0; padding: 0;
@ -61,12 +61,12 @@
.body .clock div.labels, .body .timer div.labels { .body .clock div.labels, .body .timer div.labels, .body .noteobject div.labels {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.body .clock div.labels *, .body .timer div.labels * { .body .clock div.labels *, .body .timer div.labels *, .body .noteobject div.labels * {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--foreground); color: var(--foreground);
@ -75,7 +75,7 @@
vertical-align: middle; vertical-align: middle;
} }
.body .clock div.labels .timezone, .body .timer div.labels .timezone { .body .clock div.labels .timezone, .body .timer div.labels .timezone, .body .noteobject div.labels .timezone {
color: #888888; color: #888888;
} }
@ -103,6 +103,7 @@ textarea {
.deleteclock { .deleteclock {
margin-top: 16px; margin-top: 16px;
min-width: 32px;
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0; padding: 0;
@ -127,6 +128,7 @@ textarea {
.normalclock { .normalclock {
margin-top: 16px; margin-top: 16px;
min-width: 32px;
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0; padding: 0;

31
styles/dialog.css
View file

@ -131,3 +131,34 @@ input[type="radio"]:focus + label {
background-color: #00000040; background-color: #00000040;
color: var(--foreground); color: var(--foreground);
} }
.checkobject input[type="text"] {
width: 100%;
margin: 8px 0;
box-sizing: border-box;
height: max-content;
max-height: 100%;
padding: 8px;
border: none;
border-radius: 4px;
font-size: 48px;
background-color: #00000040;
color: var(--foreground);
}
.checkobject {
display: flex;
gap: 12px;
flex-direction: row;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: space-around;
align-items: center;
}
.checkobject .deleteclock {
padding: 0;
margin: 0;
}

53
styles/style.css
View file

@ -14,17 +14,25 @@ body {
background-position: center; background-position: center;
opacity: 0.35; opacity: 0.35;
position: fixed; position: fixed;
height: 100%; height: 100vh;
width: 100%; width: 100vw;
}
#backconstrain {
position: fixed;
height: calc(100vh - 80px);
width: calc(100vw - 36px);
left: 20px;
top: 64px;
} }
* { * {
font-family: 'Courier New', Courier, monospace; font-family: monospace;
} }
.header { .header {
width: 64px; width: 64px;
height: 100vh; height: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@ -130,7 +138,7 @@ body {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
content: attr(data-title); content: attr(data-title);
font-family: 'Courier New', Courier, monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
height: 12px; height: 12px;
box-sizing: content-box; box-sizing: content-box;
@ -191,11 +199,10 @@ sep {
position: fixed; position: fixed;
right: 16px; right: 16px;
bottom: 16px; bottom: 16px;
width: 128px; width: 192px;
height: 128px; height: 192px;
transition: bottom 0.125s; transition: bottom 0.125s;
z-index: 9; z-index: 9;
zoom: 1.25;
} }
.poplight.hidden { .poplight.hidden {
@ -206,7 +213,7 @@ sep {
position: absolute; position: absolute;
width: 32px; width: 32px;
height: 32px; height: 32px;
right: -0px; right: 48px;
top: -48px; top: -48px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -220,7 +227,7 @@ sep {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
content: attr(data-title); content: attr(data-title);
font-family: 'Courier New', Courier, monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
height: 12px; height: 12px;
box-sizing: content-box; box-sizing: content-box;
@ -260,20 +267,20 @@ sep {
right: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 64px; border-radius: 96px;
background-color: #808080; background-color: #808080;
overflow: hidden; overflow: hidden;
border: none; border: none;
font-size: 64px; font-size: 96px;
transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s; transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s;
} }
.poplight.hidden button.press { .poplight.hidden button.press {
top: -48px; top: -48px;
right: 48px; right: 96px;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 64px; border-radius: 128px;
font-size: 24px; font-size: 24px;
color: transparent; color: transparent;
} }
@ -290,7 +297,7 @@ sep {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 64px; border-radius: 128px;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -309,3 +316,19 @@ sep {
.poplight button.press.popped::after { .poplight button.press.popped::after {
content: "phonelink_off"; content: "phonelink_off";
} }
.poplight .drag {
position: absolute;
width: 32px;
height: 32px;
right: 0;
top: -48px;
margin: 0;
padding: 4px;
border: none;
border-radius: 16px;
box-sizing: border-box;
user-select: none;
background-color: transparent;
color: var(--foreground);
}