116 lines
9.0 KiB
HTML
116 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@font-face {font-family: 'ChicagoFont';src: url('https://dangasson.github.io/Resources/Fonts/ChicagoFLF.ttf') format('truetype');font-weight: normal;font-style: normal;}.centered {top: 50%;left: 50%;transform: translate(-50%, -50%);}.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.ipod {width: 415px;height: 692px;border: 1px solid transparent;border-radius: 38px;background: linear-gradient(45deg, #E3E4E5, #FFFFFF);box-shadow: inset 5px -5px 15px 0px grey;}.ipod.small {transform: scale(0.67, 0.67);}.screen {position: relative;margin: 30px auto 0px auto;width: 284px;height: 230px;background: linear-gradient(135deg, #A5A59B, #D6D5D0);border-radius: 10px;box-shadow: inset 0px 0px 10px 2px #4D4D4D;font-family: "ChicagoFont", "Arial";font-size: 130%;color: #484647;}.title {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.title-bar {position: absolute;left: 5px;right: 5px;height: 16%;border-bottom: 2px solid #484647;text-align: center;}.play-icon {position: absolute;display: inline-block;top: 50%;left: 10px;transform: translate(0, -50%);border-left: 18px solid #484647;border-top: 9px solid transparent;border-bottom: 9px solid transparent;height: 0;width: 0;}.battery {position: absolute;right: 5px;height: 50px;width: 100px;background-color: #C1C1BA;border: 5px solid #484647;}.battery:before {content: '';position: absolute;top: 50%;right: -12px;transform: translate(0, -50%);height: 33%;width: 7px;background-color: #C1C1BA;border-right: 5px solid #484647;border-top: 5px solid #484647;border-bottom: 5px solid #484647;}.battery:after {content: '';position: absolute;top: 5px;bottom: 5px;left: 5px;width: 70px;background: repeating-linear-gradient(to right, #484647, #484647 20px, #C1C1BA 20px, #C1C1BA 25px, #484647 25px, #484647 45px, #C1C1BA 45px, #C1C1BA 50px, #484647 50px, #484647 70px);}.battery.small {transform: scale(0.3, 0.3);transform-origin: 100% 25%;}.menu-options {display: flex;flex-direction: column;justify-content: space-around;position: relative;top: 17%;height: 81%;}.option {padding-left: 12px;}.option:after {content: '';position: absolute;right: 18px;border-bottom: 3px solid #484647;border-right: 3px solid #484647;width: 8px;height: 8px;transform: rotate(-45deg) skew(7deg, 7deg);transform-origin: 180%;}.option.selected {background-color: #484647;border-bottom: 2px solid #484647;color: #C1C1BA;}.option.selected:after {border-bottom: 3px solid #C1C1BA;border-right: 3px solid #C1C1BA;}.outer-ring {position: relative;margin: 0 auto;top: 30px;height: 350px;width: 350px;border-radius: 50%;background-color: #FFFFFF;box-shadow: inset 5px -5px 30px -7px #595959;}.outer-ring:before, .outer-ring:after {content: '';position: absolute;width: 0;height: 99%;border: 1px solid #4D4D4D;}.outer-ring:before {left: 50%;transform: rotate(45deg);}.outer-ring:after {top: 0;left: 50%;transform: rotate(135deg);}.touch-wheel {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 276px;width: 276px;border: 2px solid #4D4D4D;border-radius: 50%;background: radial-gradient(farthest-side at 90% -70%, #999999, #F2F2F2);box-shadow: 5px -5px 30px -7px #595959;z-index: 1;}.center-button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 100px;width: 100px;border: 2px solid #BABDC1;border-radius: 50%;background-color: #CBCCCE;background: radial-gradient(farthest-side at -90% 80%, #999999, #F2F2F2);}text {font-family: "Arial";font-size: 110%;font-weight: bold;fill: #BABDC1;}path {fill: transparent;}.skip {position: absolute;top: 50%;transform: translate(0, -50%);background-color: #BABDC1;height: 12px;width: 4px;}.skip:before, .skip:after {content: '';position: absolute;border-left: 9px solid #BABDC1;border-top: 6px solid transparent;border-bottom: 6px solid transparent;}.skip:before {left: -9px;}.skip:after {left: -18px;}.skip.forward {right: 7px;}.skip.back {left: 7px;transform: rotate(180deg) translate(0, 50%);}.play-pause {position: absolute;bottom: 12px;left: 50%;height: 0;width: 0;transform: translate(-13px, 0);border-left: 12px solid #BABDC1;border-top: 6px solid transparent;border-bottom: 6px solid transparent;}.play-pause:before {content: '';position: absolute;bottom: -6px;left: 4px;height: 12px;width: 10px;background: repeating-linear-gradient(to right, #BABDC1, #BABDC1 4px, transparent 4px, transparent 6px, #BABDC1 6px, #BABDC1 10px);}_:-ms-lang(x), .ipod {box-shadow: inset 5px -5px 25px 3px #999999;}_:-ms-lang(x), .screen {box-shadow: inset 0px 0px 20px 1px #595959;}_:-ms-lang(x), .outer-ring {box-shadow: inset 5px -5px 50px -7px #999999;}_:-ms-lang(x), .touch-wheel {box-shadow: 5px -5px 50px -7px #999999;}
|
|
</style>
|
|
<script>
|
|
function action(name) {
|
|
fetch("/?pod="+name)
|
|
}
|
|
|
|
function Touchwheel(selector) {
|
|
this.elem = document.querySelector(selector);
|
|
|
|
this.calc_pos = (ev) => {
|
|
let w = ev.target.clientWidth;
|
|
let h = ev.target.clientHeight;
|
|
let x = ev.offsetX / w - 0.5;
|
|
let y = ev.offsetY / h - 0.5;
|
|
let d = (Math.atan2(y, x) * (180 / Math.PI)) + 90;
|
|
return d;
|
|
}
|
|
|
|
this.last_pos = null;
|
|
this.last_seg = 0;
|
|
this.down_time = null;
|
|
this.mousedown = (ev) => {
|
|
if(ev.target != this.elem) return;
|
|
this.last_pos = this.calc_pos(ev);
|
|
this.down_time = ev.timeStamp;
|
|
}
|
|
|
|
this.mouseup = (ev) => {
|
|
if(ev.target != this.elem) return;
|
|
this.last_pos = null;
|
|
|
|
if(ev.type == "mouseup") {
|
|
let dt = ev.timeStamp - this.down_time;
|
|
if(dt < 100) {
|
|
console.log("clicked");
|
|
if(ev.offsetY / ev.target.clientHeight < 0.5) {
|
|
action("scrollup")
|
|
} else {
|
|
action("scrolldown")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.mousemove = (ev) => {
|
|
if(ev.target != this.elem) return;
|
|
if(this.last_pos === null) return;
|
|
|
|
let pos = this.calc_pos(ev) - this.last_pos;
|
|
let seg = Math.round(pos / 16);
|
|
|
|
if(seg != this.last_seg) {
|
|
console.log(seg);
|
|
if(seg > this.last_seg) {
|
|
action("volup");
|
|
} else if(seg < this.last_seg) {
|
|
action("voldown");
|
|
}
|
|
this.last_seg = seg;
|
|
}
|
|
}
|
|
|
|
this.elem.onmousedown = this.mousedown;
|
|
this.elem.onmousemove = this.mousemove;
|
|
this.elem.onmouseup = this.mouseup;
|
|
this.elem.onmouseleave = this.mouseup;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="ipod small">
|
|
<div class="screen">
|
|
<div class="title-bar">
|
|
<div class="play-icon"></div>
|
|
<div class="title">iPod</div>
|
|
<div class="battery small"></div>
|
|
</div>
|
|
<div class="menu-options">
|
|
<div class="option">Playlists</div>
|
|
<div class="option">Artists</div>
|
|
<div class="option selected">Songs</div>
|
|
<div class="option">Settings</div>
|
|
<div class="option">About</div>
|
|
<div class="option">Now Playing</div>
|
|
</div>
|
|
</div>
|
|
<div class="outer-ring">
|
|
<svg viewBox="-150 5 350 350">
|
|
<path id="curve" d="m0,30 c16,-4 32,-4 48,0" />
|
|
<text onclick="action('menu')">
|
|
<textPath xlink:href="#curve">menu</textPath>
|
|
</text>
|
|
</svg>
|
|
<div class="skip forward" onclick="action('next')"></div>
|
|
<div class="skip back" onclick="action('prev')"></div>
|
|
<div class="play-pause" onclick="action('play')"></div>
|
|
<div class="touch-wheel">
|
|
<div class="center-button" onclick="action('ok')"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const touchwheel = new Touchwheel(".touch-wheel");
|
|
</script>
|
|
<a href="/config.html">Config
|
|
|
|
</body>
|
|
</html> |