You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

155 lines
5.0 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Window</title>
<style>
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
width: 100vw;
}
.window {
display: grid;
height: 100vh;
left: 0;
position: absolute;
top: 0;
width: 100vw;
grid-template-columns: 8px 60px min-content auto 132px 8px;
grid-template-rows: 40px 46px auto 16px;
grid-template-areas:
'top-left top-left title handle top-right top-right'
'left-fade center center center center right'
'left center center center center right'
'bottom-left bottom-left bottom-center bottom-center bottom-right bottom-right';
}
.top-left {
background: transparent url('./images/TL.png') no-repeat top left;
grid-area: top-left;
position: relative;
}
.top-left > img {
left: 4px;
position: absolute;
top: 4px;
}
.top-title {
background: transparent url('./images/T1.png') repeat-x top left;
grid-area: title;
}
.top-title > h1 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-smooth: never;
font-weight: normal;
line-height: 40px;
margin: 0;
padding: 0 8px 0 4px;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: none;
white-space: nowrap;
}
.top-handle {
background: transparent url('./images/T2.png') repeat-x top left;
grid-area: handle;
}
.top-right {
background: transparent url('./images/TR.png') no-repeat top right;
grid-area: top-right;
}
.left-fade {
background: transparent url('./images/L1.png') no-repeat top left;
grid-area: left-fade;
}
.center {
grid-area: center;
}
.right {
background: transparent url('./images/R.png') repeat-y top right;
grid-area: right;
}
.left {
background: transparent url('./images/L2.png') repeat-y top left;
grid-area: left;
}
.bottom-left {
background: transparent url('./images/BL.png') no-repeat bottom left;
grid-area: bottom-left;
}
.bottom {
background: transparent url('./images/B.png') repeat-x bottom left;
grid-area: bottom-center;
}
.bottom-right {
background: transparent url('./images/BR.png') no-repeat bottom right;
grid-area: bottom-right;
}
</style>
</head>
<body>
<div class="window">
<div class="top-left">
<img width="32" height="32" id="icon" />
</div>
<div class="top-title">
<h1 id="title"></h1>
</div>
<div class="top-handle"></div>
<div class="top-right"></div>
<div class="left-fade"></div>
<div class="center" id="center"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom-left"></div>
<div class="bottom"></div>
<div class="bottom-right"></div>
</div>
<script>
const getQueryVariable = (variable, defaultValue) => {
const query = window.location.search.substring(1)
const vars = query.split('&')
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=')
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1])
}
}
return defaultValue
}
const center = document.querySelector('#center')
center.style.backgroundColor = `#${getQueryVariable('background', '000')}`
const title = document.querySelector('#title')
title.innerText = getQueryVariable('title', '')
const icon = document.querySelector('#icon')
icon.src = getQueryVariable('icon', '')
</script>
</body>
</html>