First commit!
This commit is contained in:
MeowcaTheoRange
commit
6b3f13a34f
18 changed files with 827 additions and 0 deletions
BIN
assets/chemistry.png
Normal file
BIN
assets/chemistry.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
BIN
assets/clock.png
Normal file
BIN
assets/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/clock2.png
Normal file
BIN
assets/clock2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
assets/hourglass.png
Normal file
BIN
assets/hourglass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
BIN
assets/interro.png
Normal file
BIN
assets/interro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 874 B |
BIN
assets/mark.png
Normal file
BIN
assets/mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/none.png
Normal file
BIN
assets/none.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
BIN
assets/rainbow.png
Normal file
BIN
assets/rainbow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
BIN
assets/sport.png
Normal file
BIN
assets/sport.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/sussy.png
Normal file
BIN
assets/sussy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/trans.png
Normal file
BIN
assets/trans.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 423 B |
89
canvas.js
Normal file
89
canvas.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
document.querySelectorAll(".clock").forEach((clock) => {
|
||||
var canvas = clock.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.resetTransform();
|
||||
ctx.translate(32, 32);
|
||||
ctx.strokeStyle = "#FFFFFF";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "round";
|
||||
update();
|
||||
});
|
||||
function update() {
|
||||
document.querySelectorAll(".clock").forEach((clock, i) => {
|
||||
if (clock.classList.contains("main-clock")) return;
|
||||
var canvas = clock.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.resetTransform();
|
||||
ctx.translate(32, 32);
|
||||
ctx.strokeStyle = "#FFFFFF";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = "round";
|
||||
var canvas = clock.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var now = new Date();
|
||||
var hour = now.toLocaleTimeString(undefined, {
|
||||
timeZone: clock.dataset.timezone,
|
||||
hour: "2-digit",
|
||||
hour12: false
|
||||
}) % 12;
|
||||
var minute = now.getMinutes();
|
||||
clock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, {
|
||||
timeZone: clock.dataset.timezone,
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
weekday: "long",
|
||||
timeZoneName: 'long'
|
||||
});
|
||||
clock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, {
|
||||
timeZone: clock.dataset.timezone,
|
||||
hc: "h12", timeStyle: "short"
|
||||
});
|
||||
ctx.clearRect(-32,-32, 64, 64);
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 30, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16);
|
||||
drawHand(ctx, (minute*Math.PI/30), 24);
|
||||
});
|
||||
}
|
||||
|
||||
function drawHand(ctx, pos, length) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0,0);
|
||||
ctx.rotate(pos);
|
||||
ctx.lineTo(0, -length);
|
||||
ctx.stroke();
|
||||
ctx.rotate(-pos);
|
||||
}
|
||||
|
||||
var theClock = document.querySelector(".main-clock");
|
||||
var prevMin = new Date().getMinutes();
|
||||
function updateMain() {
|
||||
var canvas = theClock.querySelector("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var now = new Date();
|
||||
var hour = now.getHours() % 12;
|
||||
var minute = now.getMinutes();
|
||||
if (prevMin != minute) update();
|
||||
prevMin = minute;
|
||||
theClock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
weekday: "long",
|
||||
timeZoneName: 'long'
|
||||
});
|
||||
theClock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, {
|
||||
hc: "h12", timeStyle: "short"
|
||||
});
|
||||
ctx.clearRect(-32,-32, 64, 64);
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 30, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16);
|
||||
drawHand(ctx, (minute*Math.PI/30), 24);
|
||||
window.requestAnimationFrame(updateMain);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(updateMain);
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
198
index.html
Normal file
198
index.html
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<!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">
|
||||
<title>Clock</title>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="back"></div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<sep></sep>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<h1>Welcome!</h1>
|
||||
<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 class="poplight">
|
||||
<button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
|
||||
<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>
|
||||
<input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000" checked /><!--
|
||||
--><label for="colorred" style="background-color:#800000">RED</label><!--
|
||||
--><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000" /><!--
|
||||
--><label for="colororange" style="background-color:#804000">ORANGE</label><!--
|
||||
--><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000" /><!--
|
||||
--><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
|
||||
--><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000" /><!--
|
||||
--><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
|
||||
--><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080" /><!--
|
||||
--><label for="colorblue" style="background-color:#006080">BLUE</label><!--
|
||||
--><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060" /><!--
|
||||
--><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
|
||||
--><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040" /><!--
|
||||
--><label for="colordark" style="background-color:#404040">DARK</label><br /><!--
|
||||
--><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040" /><!--
|
||||
--><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
|
||||
--><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040" /><!--
|
||||
--><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
|
||||
<p class="dlg-top">Customize Background</p>
|
||||
<input type="radio" name="background" id="bgnone" value="../assets/none.png" checked /><!--
|
||||
--><label for="bgnone" style="background-image: url(./assets/none.png)">NOTHING</label><!--
|
||||
--><input type="radio" name="background" id="bgclocks" value="../assets/clock.png" /><!--
|
||||
--><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" /><!--
|
||||
--><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><br />
|
||||
<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>
|
||||
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
|
||||
<script src="./canvas.js"></script>
|
||||
<script>
|
||||
var elem = document.documentElement;
|
||||
|
||||
function openFullscreen() {
|
||||
if (document.fullscreenElement == null) {
|
||||
if (elem.requestFullscreen) {
|
||||
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]);
|
||||
document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
|
||||
document.querySelector('.scr-dialog--').classList.remove('open');
|
||||
event.preventDefault();
|
||||
})
|
||||
|
||||
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040").split("|");
|
||||
document.documentElement.style.setProperty('--main-color', colors[0]);
|
||||
document.documentElement.style.setProperty('--background', colors[1]);
|
||||
document.documentElement.style.setProperty('--background-light', colors[2]);
|
||||
document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "./assets/clock.png") + ")");
|
||||
|
||||
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]);
|
||||
document.documentElement.style.setProperty('--background-light', colors[2]);
|
||||
})
|
||||
|
||||
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');
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
styles/clock.css
Normal file
111
styles/clock.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
.body {
|
||||
width: calc(100vw - 64px);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 64px;
|
||||
top: 0;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.body .clock {
|
||||
width: 100%;
|
||||
min-height: max-content;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.body .clock::before {
|
||||
content: "";
|
||||
background-color: #FFFFFF40;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.body .clock h1 {
|
||||
margin: 0;
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-weight: lighter;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.body .clock div.labels {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.body .clock div.labels * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-weight: lighter;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.body .clock div.labels .timezone {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
margin: 0;
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
box-sizing: border-box;
|
||||
height: max-content;
|
||||
max-height: 100%;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #00000040;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.deleteclock {
|
||||
margin-top: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: #FF000080;
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
transition: background-color 0.125s;
|
||||
}
|
||||
|
||||
.deleteclock:focus {
|
||||
background-color: #FF0000A0;
|
||||
}
|
||||
|
||||
.deleteclock:hover {
|
||||
background-color: #FF0000C0;
|
||||
}
|
||||
|
||||
.deleteclock:active {
|
||||
background-color: #FF0000FF;
|
||||
}
|
||||
112
styles/dialog.css
Normal file
112
styles/dialog.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
.scrim-over--.open {
|
||||
background-color: #0006;
|
||||
backdrop-filter: blur(4px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.scrim-over-- .dialog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrim-over--.open .dialog {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
min-width: 320px;
|
||||
min-height: 128px;
|
||||
background-color: var(--background-light);
|
||||
transition: background-color 0.125s;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dialog p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dialog .dlg-top {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.dialog form div {
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog form div input[type=submit] {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--main-color);
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.125s, color 0.125s;
|
||||
}
|
||||
|
||||
.dialog form div input:focus {
|
||||
background-color: #00000020;
|
||||
}
|
||||
|
||||
.dialog form div input:hover {
|
||||
background-color: #00000040;
|
||||
}
|
||||
|
||||
.dialog form div input:active {
|
||||
background-color: #00000080;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
width: 96px;
|
||||
height: 64px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px 2px rgba(0,0,0,0.25);
|
||||
transition: border 0.25s;
|
||||
box-sizing: border-box;
|
||||
border: 8px solid transparent;
|
||||
background-size: 96px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label {
|
||||
border: 8px solid #FFF6;
|
||||
}
|
||||
|
||||
input[type="radio"]:focus + label {
|
||||
outline: 4px solid white;
|
||||
}
|
||||
|
||||
.dialog select {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
height: max-content;
|
||||
max-height: 100%;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #00000040;
|
||||
color: white;
|
||||
}
|
||||
7
styles/root.css
Normal file
7
styles/root.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
:root {
|
||||
--main-color: #FFFF00;
|
||||
--background: #202020;
|
||||
--background-light: #404040;
|
||||
--background-grad: url("../assets/none.png");
|
||||
--background-image: url("../assets/clocks.png");
|
||||
}
|
||||
310
styles/style.css
Normal file
310
styles/style.css
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
body {
|
||||
background: var(--background);
|
||||
background-size: 100vw 100vh;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
transition: background 0.125s;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#back {
|
||||
background-image: var(--background-image);
|
||||
background-size: 128px;
|
||||
background-position: center;
|
||||
opacity: 0.15;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 64px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-content: stretch;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
transition: width 0.125s;
|
||||
}
|
||||
|
||||
.header.wide {
|
||||
width: 256px;
|
||||
}
|
||||
.scrim--, .scrim-over-- {
|
||||
display: inline-block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
backdrop-filter: none;
|
||||
pointer-events: none;
|
||||
transition: background-color 0.125s, backdrop-filter 0.125s;
|
||||
}
|
||||
.scrim-over-- {
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.header.wide ~ .scrim-- {
|
||||
background-color: #0006;
|
||||
backdrop-filter: blur(4px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
background-color: #FFFFFF40;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.header div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-content: space-around;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.header div:first-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.header div:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header button {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
margin: none;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.125s;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.header.wide button {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header button:hover {
|
||||
background-color: #FFFFFF40;
|
||||
}
|
||||
|
||||
.header button::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: attr(data-title);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 12px;
|
||||
height: 12px;
|
||||
box-sizing: content-box;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
left: calc(100% + 16px);
|
||||
border-radius: 4px;
|
||||
top: calc(50% - 14px);
|
||||
transition: color 0.125s, width 0.125s;
|
||||
width: 0;
|
||||
padding: 8px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header:not(.wide) button:hover::after {
|
||||
background-color: #202020;
|
||||
color: #FFFFFF;
|
||||
width: initial;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header:not(.wide) button:focus::after {
|
||||
background-color: #202020;
|
||||
color: #FFFFFF;
|
||||
width: initial;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header.wide button::after {
|
||||
left: 48px;
|
||||
top: calc(50% - 7px);
|
||||
color: white;
|
||||
width: initial;
|
||||
height: 14px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header button:focus {
|
||||
background-color: #FFFFFF20;
|
||||
}
|
||||
|
||||
.header button:active {
|
||||
background-color: #FFFFFF80;
|
||||
}
|
||||
|
||||
sep {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
border: 1px dashed #FFFFFF;
|
||||
margin: 4px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.poplight {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
transition: bottom 0.125s;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.poplight.hidden {
|
||||
bottom: -128px;
|
||||
}
|
||||
|
||||
.poplight button.hide {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
right: -0px;
|
||||
top: -48px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.poplight button.hide::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: attr(data-title);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 12px;
|
||||
height: 12px;
|
||||
box-sizing: content-box;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
right: 0;
|
||||
border-radius: 4px;
|
||||
top: -48px;
|
||||
transition: color 0.125s, width 0.125s;
|
||||
width: 0;
|
||||
padding: 8px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.poplight button.hide:hover::after {
|
||||
background-color: #202020;
|
||||
color: #FFFFFF;
|
||||
width: initial;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.poplight button.hide:focus {
|
||||
background-color: #FFFFFF20;
|
||||
}
|
||||
|
||||
.poplight button.hide:hover {
|
||||
background-color: #FFFFFF40;
|
||||
}
|
||||
|
||||
.poplight button.hide:active {
|
||||
background-color: #FFFFFF80;
|
||||
}
|
||||
|
||||
.poplight button.press {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 64px;
|
||||
background-color: #808080;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
font-size: 64px;
|
||||
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 {
|
||||
top: -48px;
|
||||
right: 48px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 64px;
|
||||
font-size: 24px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.poplight button.press.popped {
|
||||
background-color: var(--main-color);
|
||||
box-shadow: 0px 0px 32px 0px var(--main-color);
|
||||
}
|
||||
|
||||
.poplight button.press::after {
|
||||
position: absolute;
|
||||
content: "devices";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.poplight button.press:hover::after {
|
||||
background-color: #ffffff40;
|
||||
}
|
||||
|
||||
.poplight button.press:active::after {
|
||||
background-color: #ffffff80;
|
||||
}
|
||||
|
||||
.poplight button.press.popped::after {
|
||||
content: "phonelink_off";
|
||||
}
|
||||
Loading…
Reference in a new issue