2022-09-09 03:45:41 +00:00
<!DOCTYPE html>
<!-- [if lt IE 7]> <html class="no - js lt - ie9 lt - ie8 lt - ie7"> <![endif] -->
<!-- [if IE 7]> <html class="no - js lt - ie9 lt - ie8"> <![endif] -->
<!-- [if IE 8]> <html class="no - js lt - ie9"> <![endif] -->
<!-- [if gt IE 8]> <html class="no - js"> <! - - <![endif] -->
< html >
< head >
< meta charset = "utf-8" >
2022-09-09 22:57:19 +00:00
< title > FunnyClock²< / title >
2022-09-09 03:45:41 +00:00
< link rel = "stylesheet" href = "./styles/root.css" >
< link rel = "stylesheet" href = "./styles/clock.css" >
< link rel = "stylesheet" href = "./styles/style.css" >
< link rel = "stylesheet" href = "./styles/dialog.css" >
< 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 >
2022-09-09 22:57:19 +00:00
< 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 >
2022-09-09 03:45:41 +00:00
< / head >
< body >
< div id = "back" > < / div >
2022-09-09 22:57:19 +00:00
< div id = "backconstrain" > < / div >
2022-09-09 03:45:41 +00:00
< div class = "header" >
< div >
< button class = "material-symbols-outlined hiw" data-title = "Menu" onclick = "this.parentElement.parentElement.classList.toggle('wide')" > menu< / button >
2022-09-09 18:22:38 +00:00
< sep > < / sep >
2022-09-09 22:57:19 +00:00
< 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 >
2022-09-09 18:22:38 +00:00
< 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 >
2022-09-09 22:57:19 +00:00
< 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 >
2022-09-09 03:45:41 +00:00
< / 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 = "Open Fullscreen" onclick = "openFullscreen();" > fullscreen< / button >
2022-09-09 22:57:19 +00:00
< 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 >
2022-09-09 03:45:41 +00:00
< / div >
< / div >
< div class = "body" >
< div class = "clock main-clock" >
< canvas width = "64" height = "64" > < / canvas > <!--
-->< div class = "labels" >
< h1 class = "title" > Loading...< / h1 > < br / >
< p class = "timezone" > Loading...< / p >
2022-09-09 22:57:19 +00:00
< / div > < br / >
< textarea class = "txt" title = "Notes" placeholder = "Take some notes..." oninput = 'this.style.height = "";this.style.height = this.scrollHeight + "px"' > < / textarea >
2022-09-09 03:45:41 +00:00
< / div >
< / div >
< div class = "poplight" >
2022-09-10 05:01:49 +00:00
< button class = "hide material-symbols-outlined" data-title = "Toggle Poplight Size" onclick = "checkHeight(this.parentElement)" > unfold_less< / button >
2022-09-10 05:12:11 +00:00
< div class = "drag material-symbols-outlined" data-title = "Drag Poplight" ondblclick = "checkHeight(this.parentElement)" > open_with< / div >
2022-09-09 03:45:41 +00:00
< button class = "press material-symbols-outlined popped" onclick = "this.classList.toggle('popped')" > < / button >
< / div >
< div class = "scrim-over-- scr-dialog--" >
< div class = "dialog" id = "colordia" >
< form id = "color" >
< p class = "dlg-top" > Customize Color< / p >
2022-09-09 15:09:27 +00:00
< input type = "radio" name = "color" id = "colorred" value = "#FF0000|#400000|#800000|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colorred" style = "background-color:#800000" > RED< / label > <!--
2022-09-09 18:29:59 +00:00
-->< input type = "radio" name = "color" id = "coloramber" value = "#f2aa58|#582007|#7c300a|#FFFFFF" / > <!--
-->< label for = "coloramber" style = "background-color:#7c300a" > AMBER< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colororange" value = "#FF8000|#402000|#804000|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colororange" style = "background-color:#804000" > ORANGE< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "coloryellow" value = "#FFFF00|#404000|#808000|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "coloryellow" style = "background-color:#808000" > YELLOW< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colorgreen" value = "#00FF00|#003000|#006000|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colorgreen" style = "background-color:#006000" > GREEN< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colorblue" value = "#00FFFF|#003040|#006080|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colorblue" style = "background-color:#006080" > BLUE< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colornavy" value = "#5865f2|#08116a|#0b168e|#FFFFFF" / > <!--
2022-09-09 18:29:59 +00:00
-->< label for = "colornavy" style = "background-color:#0b168e" > NAVY< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colorpurple" value = "#FF00FF|#300030|#600060|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colorpurple" style = "background-color:#600060" > PURPLE< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colordark" value = "#FFFF00|#202020|#404040|#FFFFFF" checked / > <!--
-->< label for = "colordark" style = "background-color:#404040" > DARK< / label > <!--
2022-09-10 18:42:41 +00:00
-->< input type = "radio" name = "color" id = "colorlight" value = "#FFFF00|#d0d0d0|#b0b0b0|#000000" / > <!--
2022-09-09 15:09:27 +00:00
-->< label for = "colorlight" style = "background-color:#d0d0d0;color:#000000;" > LIGHT< / label > < br / > <!--
-->< input type = "radio" name = "color" id = "colortrans" value = "#FFFF00|url(../assets/trans.png)|#404040|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colortrans" style = "background:url(./assets/trans.png)" > TRANS< / label > <!--
2022-09-09 15:09:27 +00:00
-->< input type = "radio" name = "color" id = "colorrainbow" value = "#FFFF00|url(../assets/rainbow.png)|#404040|#FFFFFF" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "colorrainbow" style = "background:url(./assets/rainbow.png)" > RAINBOW< / label > < br / >
< p class = "dlg-top" > Customize Background< / p >
2022-09-09 03:53:37 +00:00
< input type = "radio" name = "background" id = "bgnone" value = "../assets/none.png" / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "bgnone" style = "background-image: url(./assets/none.png)" > NOTHING< / label > <!--
2022-09-09 03:53:37 +00:00
-->< input type = "radio" name = "background" id = "bgclocks" value = "../assets/clock.png" checked / > <!--
2022-09-09 03:45:41 +00:00
-->< label for = "bgclocks" style = "background-image: url(./assets/clock.png)" > CLOCKS< / label > <!--
-->< input type = "radio" name = "background" id = "bgclockstwo" value = "../assets/clock2.png" / > <!--
-->< label for = "bgclockstwo" style = "background-image: url(./assets/clock2.png)" > CLOCKS 2< / label > <!--
-->< input type = "radio" name = "background" id = "bgsus" value = "../assets/sussy.png" / > <!--
-->< label for = "bgsus" style = "background-image: url(./assets/sussy.png)" > SUSSY< / label > <!--
-->< input type = "radio" name = "background" id = "bghour" value = "../assets/hourglass.png" / > <!--
-->< label for = "bghour" style = "background-image: url(./assets/hourglass.png)" > WORKING< / label > <!--
-->< input type = "radio" name = "background" id = "bginter" value = "../assets/interro.png" / > <!--
-->< label for = "bginter" style = "background-image: url(./assets/interro.png)" > INTERRO< / label > <!--
-->< input type = "radio" name = "background" id = "bgbad" value = "../assets/chemistry.png" / > <!--
-->< label for = "bgbad" style = "background-image: url(./assets/chemistry.png)" > CHEMIST< / label > <!--
-->< input type = "radio" name = "background" id = "bgsport" value = "../assets/sport.png" / > <!--
-->< label for = "bgsport" style = "background-image: url(./assets/sport.png)" > SPORT< / label > <!--
-->< input type = "radio" name = "background" id = "bgmark" value = "../assets/mark.png" / > <!--
2022-09-09 15:09:27 +00:00
-->< label for = "bgmark" style = "background-image: url(./assets/mark.png)" > MARK< / label > <!--
-->< input type = "radio" name = "background" id = "bgtile" value = "../assets/tile.png" / > <!--
-->< label for = "bgtile" style = "background-image: url(./assets/tile.png)" > TILE< / label > <!--
-->< input type = "radio" name = "background" id = "bgtiletwo" value = "../assets/tile2.png" / > <!--
-->< label for = "bgtiletwo" style = "background-image: url(./assets/tile2.png)" > DIAG< / label > < br / >
2022-09-09 03:45:41 +00:00
< div >
< input type = "submit" name = "action" value = "DONE" / >
< / div >
< / form >
< / div >
< / div >
< div class = "scrim-over-- scr-timezone--" >
< div class = "dialog" id = "timezonedia" >
< p class = "dlg-top" > Select Timezone< / p >
< form id = "timezone" >
< select name = "timezone" title = "Timezone" >
< option value = "Etc/GMT" > GMT< / option >
< option value = "Etc/GMT-1" > GMT+1 ECT< / option >
< option value = "Etc/GMT-2" > GMT+2 ART< / option >
< option value = "Etc/GMT-3" > GMT+3 EAT< / option >
< option value = "Etc/GMT-4" > GMT+4 NET< / option >
< option value = "Etc/GMT-5" > GMT+5 IET< / option >
< option value = "Etc/GMT-6" > GMT+6 BST< / option >
< option value = "Etc/GMT-7" > GMT+7 VST< / option >
< option value = "Etc/GMT-8" > GMT+8 CTT< / option >
< option value = "Etc/GMT-9" > GMT+9 JST< / option >
< option value = "Etc/GMT-10" > GMT+10 AET< / option >
< option value = "Etc/GMT-11" > GMT+11 SST< / option >
< option value = "Etc/GMT+1" > GMT-1 ???< / option >
< option value = "Etc/GMT+2" > GMT-2 ???< / option >
< option value = "Etc/GMT+3" > GMT-3 BET< / option >
< option value = "Etc/GMT+4" > GMT-4 PRT< / option >
< option value = "Etc/GMT+5" > GMT-5 EST< / option >
< option value = "Etc/GMT+6" > GMT-6 CST< / option >
< option value = "Etc/GMT+7" > GMT-7 MST< / option >
< option value = "Etc/GMT+8" > GMT-8 PST< / option >
< option value = "Etc/GMT+9" > GMT-9 AST< / option >
< option value = "Etc/GMT+10" > GMT-10 HST< / option >
< option value = "Etc/GMT+11" > GMT-11 ???< / option >
< option value = "Etc/GMT+12" > GMT12< / option >
< / select >
< div >
< input type = "submit" name = "action" value = "DONE" / >
< / div >
< / form >
< / div >
< / div >
2022-09-09 18:22:38 +00:00
< div class = "scrim-over-- scr-timer--" >
< div class = "dialog" id = "timerdia" >
< p class = "dlg-top" > Configure Timer< / p >
< form id = "timerform" >
<!-- <Peter... the="horse" is h=ere /> -->
2022-09-09 22:57:19 +00:00
< 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 > <!--
2022-09-10 18:42:41 +00:00
-->< input type = "radio" name = "tone" id = "toneringertwo" value = "ringer2" / > <!--
-->< label for = "toneringertwo" > RINGER 2< / label > <!--
2022-09-09 22:57:19 +00:00
-->< 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 >
2022-09-09 18:22:38 +00:00
< div >
< input type = "submit" name = "action" value = "DONE" / >
< / div >
< / form >
< / div >
< / div >
< div class = "scrim-over-- scr-about--" >
< div class = "dialog" id = "aboutdia" >
< p class = "dlg-top" > About FunnyClock²< / p >
< form id = "aboutform" >
<!-- FUCK -->
< p > FunnyClock² is the successor of FunnyClock, an application made for my school to show when smartboards are idle.< / p >
< p > FunnyClock was originally a single-file local webpage hosted on the computers of the teachers, and now with FunnyClock², it's a multi-file customizable suite for clocks and timers.< / p >
< p class = "dlg-top" > Special Thanks to< / p >
< ul >
< li > Josh, science and tech teacher< / li >
< li > Everyone who accepted my pitch for the FunnyClock² app< / li >
< li > Among Us (Sussy background)< / li >
< li > Portal 2 (Tile background)< / li >
< li > Kaboom.js (Mark background)< / li >
< li > Material Design (UI inspiration)< / li >
< / ul >
< div >
< input type = "submit" name = "action" value = "OK" / >
< / div >
< / form >
< / div >
< / div >
2022-09-09 03:45:41 +00:00
< div class = "scrim--" onclick = "document.querySelector('.header').classList.remove('wide')" > < / div >
< script >
2022-09-09 22:57:19 +00:00
$(".poplight").draggable({
containment: $("#backconstrain"),
2022-09-10 05:01:49 +00:00
handle: "div.drag",
drag: (e, u) => {
var bottom = ($(window).height() - u.position.top);
if ((bottom < 210 & & bottom > = 78) & & !u.helper[0].classList.contains("hidden")) {
u.position.top = ($(window).height() - 210);
} else if (bottom < 78 ) {
u.helper[0].classList.add("hidden");
}
}
2022-09-09 22:57:19 +00:00
});
2022-09-10 05:01:49 +00:00
function checkHeight(el) {
var bottom = ($(window).height() - el.getBoundingClientRect().top);
if (bottom < 210 ) {
el.classList.add('hidden');
} else {
el.classList.toggle('hidden');
}
}
2022-09-09 03:45:41 +00:00
var elem = document.documentElement;
function openFullscreen() {
if (document.fullscreenElement == null) {
2022-09-09 18:22:38 +00:00
if (elem.requestFullscreen) {
2022-09-09 03:45:41 +00:00
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
}
document.querySelector("#color").addEventListener("submit", (e) => {
const formData = new FormData(e.target);
var colors = formData.get("color").split("|");
localStorage.setItem("colors", formData.get("color"));
console.log(colors);
localStorage.setItem("background", formData.get("background"));
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]);
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
2022-09-09 03:45:41 +00:00
document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
document.querySelector('.scr-dialog--').classList.remove('open');
event.preventDefault();
})
2022-09-09 15:09:27 +00:00
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040|#FFFFFF").split("|");
2022-09-09 03:45:41 +00:00
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]);
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
2022-09-09 13:57:36 +00:00
document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
2022-09-09 03:45:41 +00:00
document.querySelector("#color").addEventListener("change", (e) => {
const formData = new FormData(document.querySelector("#color"));
var colors = formData.get("color").split("|");
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
2022-09-09 03:45:41 +00:00
document.documentElement.style.setProperty('--background-light', colors[2]);
})
2022-09-09 18:22:38 +00:00
document.querySelector("#timerform").addEventListener("submit", (e) => {
event.preventDefault();
const formData = new FormData(e.target);
2022-09-09 22:57:19 +00:00
var checked = formData.get("ctp") == "on";
2022-09-09 18:22:38 +00:00
var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second"));
2022-09-09 22:57:19 +00:00
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 > <!--
-->< div class = "labels" >
< h1 class = "time" > < span class = "mins" > 00< / span > :< span class = "seconds" > 00< / span > < / h1 > < br / >
< / div > < br / >
< 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.dataset.time = this.parentElement.dataset.orig;this.parentElement.classList.add('timer-enabled');updateTimer()" > refresh< / button >
< / div > `);
if (checked) {
document.querySelector(".poplight .press").classList.remove("popped");
}
2022-09-09 18:22:38 +00:00
updateTimer();
document.querySelector('.scr-timer--').classList.remove('open');
})
document.querySelector("#aboutform").addEventListener("submit", (e) => {
event.preventDefault();
document.querySelector('.scr-about--').classList.remove('open');
})
2022-09-09 03:45:41 +00:00
document.querySelector("#timezone").addEventListener("submit", (e) => {
event.preventDefault();
const formData = new FormData(e.target);
document.querySelector(".body").insertAdjacentHTML( "beforeend", `< div class = "clock" data-timezone = "${formData.get(" timezone " ) } " >
< canvas width = "64" height = "64" > < / canvas > <!--
-->< div class = "labels" >
< h1 class = "title" > Loading...< / h1 > < br / >
< p class = "timezone" > Loading...< / p >
< / div > < br / >
< button class = "deleteclock material-symbols-outlined" onclick = "this.parentElement.remove()" > close< / button >
< / div > `);
update();
document.querySelector('.scr-timezone--').classList.remove('open');
})
2022-09-09 22:57:19 +00:00
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 > `);
}
2022-09-09 03:45:41 +00:00
< / script >
2022-09-09 15:09:27 +00:00
< script src = "./canvas.js" > < / script >
2022-09-09 03:45:41 +00:00
< / body >
< / html >