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

327 lines
19 KiB
HTML
Raw Normal View History

First commit!
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">
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
2022-09-09 22:57:19 +00:00
<title>FunnyClock²</title>
First commit!
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>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>
First commit!
2022-09-09 03:45:41 +00:00
</head>
<body>
<div id="back"></div>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
2022-09-09 22:57:19 +00:00
<div id="backconstrain"></div>
First commit!
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>
Added Timer and About. Also, moved Add operations to top.
2022-09-09 18:22:38 +00:00
<sep></sep>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>
Added Timer and About. Also, moved Add operations to top.
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>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>
First commit!
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>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>
First commit!
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>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>
First commit!
2022-09-09 03:45:41 +00:00
</div>
</div>
<div class="poplight">
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
2022-09-09 22:57:19 +00:00
<div class="drag material-symbols-outlined" data-title="Drag Poplight">open_with</div>
First commit!
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>
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
<input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colorred" style="background-color:#800000">RED</label><!--
Fixed Amber positioning and colors
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><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colororange" style="background-color:#804000">ORANGE</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colorblue" style="background-color:#006080">BLUE</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colornavy" value="#5865f2|#08116a|#0b168e|#FFFFFF" /><!--
Fixed Amber positioning and colors
2022-09-09 18:29:59 +00:00
--><label for="colornavy" style="background-color:#0b168e">NAVY</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060|#FFFFFF" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
Added some more backgrounds.
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><!--
--><input type="radio" name="color" id="colorlight" value="#FFFF00|#d0d0d0|#b0b0b0|#000000" checked /><!--
--><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" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
--><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040|#FFFFFF" /><!--
First commit!
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>
Balls
2022-09-09 03:53:37 +00:00
<input type="radio" name="background" id="bgnone" value="../assets/none.png" /><!--
First commit!
2022-09-09 03:45:41 +00:00
--><label for="bgnone" style="background-image: url(./assets/none.png)">NOTHING</label><!--
Balls
2022-09-09 03:53:37 +00:00
--><input type="radio" name="background" id="bgclocks" value="../assets/clock.png" checked /><!--
First commit!
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" /><!--
Added some more backgrounds.
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 />
First commit!
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>
Added Timer and About. Also, moved Add operations to top.
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 /> -->
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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><!--
--><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>
Added Timer and About. Also, moved Add operations to top.
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>
First commit!
2022-09-09 03:45:41 +00:00
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
<script>
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
2022-09-09 22:57:19 +00:00
$(".poplight").draggable({
containment: $("#backconstrain"),
handle: "div.drag"
});
First commit!
2022-09-09 03:45:41 +00:00
var elem = document.documentElement;
function openFullscreen() {
if (document.fullscreenElement == null) {
Added Timer and About. Also, moved Add operations to top.
2022-09-09 18:22:38 +00:00
if (elem.requestFullscreen) {
First commit!
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]);
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
First commit!
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();
})
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040|#FFFFFF").split("|");
First commit!
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]);
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
Fixed the bg issue. bruh
2022-09-09 13:57:36 +00:00
document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
First commit!
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]);
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
document.documentElement.style.setProperty('--foreground', colors[3]);
First commit!
2022-09-09 03:45:41 +00:00
document.documentElement.style.setProperty('--background-light', colors[2]);
})
Added Timer and About. Also, moved Add operations to top.
2022-09-09 18:22:38 +00:00
document.querySelector("#timerform").addEventListener("submit", (e) => {
event.preventDefault();
const formData = new FormData(e.target);
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
2022-09-09 22:57:19 +00:00
var checked = formData.get("ctp") == "on";
Added Timer and About. Also, moved Add operations to top.
2022-09-09 18:22:38 +00:00
var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second"));
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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");
}
Added Timer and About. Also, moved Add operations to top.
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');
})
First commit!
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');
})
Huge QOL upgrade. Added more widgets, small fixes, and timer tones.
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>`);
}
First commit!
2022-09-09 03:45:41 +00:00
</script>
Added some more backgrounds.
2022-09-09 15:09:27 +00:00
<script src="./canvas.js"></script>
First commit!
2022-09-09 03:45:41 +00:00
</body>
</html>
Reference in a new issue Copy permalink