125 lines
2.2 KiB
JavaScript
125 lines
2.2 KiB
JavaScript
export const template = document.createElement('template');
|
|
template.innerHTML = `
|
|
<style>
|
|
/* BASE */
|
|
@font-face {
|
|
font-family: 'Clockfont';
|
|
src: url('../legacy/resources/uhr.woff') format('woff');
|
|
}
|
|
|
|
* {
|
|
font-family: 'Clockfont', sans-serif;
|
|
}
|
|
|
|
#clock {
|
|
position: relative;
|
|
height: 100%;
|
|
margin: 0;
|
|
transition: background-color 0.5s;
|
|
width: 100%;
|
|
}
|
|
|
|
#reflection {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
|
|
display: block;
|
|
margin: 0.15em;
|
|
}
|
|
|
|
#letterarea {
|
|
display: block;
|
|
position: absolute;
|
|
top: 12%;
|
|
bottom: 12%;
|
|
left: 12%;
|
|
right: 12%;
|
|
overflow: hidden;
|
|
font-size: 200%;
|
|
}
|
|
|
|
.item {
|
|
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
display: block;
|
|
height: 0;
|
|
width: 0;
|
|
border: 0.2em solid;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.dot.active {
|
|
border-color: #eee;
|
|
box-shadow: 0 0 0.2em #eee;
|
|
}
|
|
|
|
.dot1 {
|
|
top: 3.75%;
|
|
left: 3.75%;
|
|
}
|
|
|
|
.dot2 {
|
|
top: 3.75%;
|
|
right: 3.75%;
|
|
}
|
|
|
|
.dot3 {
|
|
bottom: 3.75%;
|
|
right: 3.75%;
|
|
}
|
|
|
|
.dot4 {
|
|
bottom: 3.75%;
|
|
left: 3.75%;
|
|
}
|
|
|
|
.letter {
|
|
height: 10%;
|
|
width: 9.0909%;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 160%;
|
|
}
|
|
|
|
.letter.active {
|
|
color: #eee;
|
|
text-shadow: 0 0 0.2em #eee;
|
|
}
|
|
/* BLACK */
|
|
#clock.black {
|
|
background-color: #111;
|
|
}
|
|
|
|
.black .onoffswitch-inner:before {
|
|
background-color: #111;
|
|
}
|
|
|
|
#clock.black .dot:not(.active) {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
#clock.black .letter:not(.active) {
|
|
color: rgba(255, 255, 255, 0.1);
|
|
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
</style>
|
|
<div id="clock" class="black">
|
|
<span class="item dot dot1"></span>
|
|
<span class="item dot dot2"></span>
|
|
<span class="item dot dot3"></span>
|
|
<span class="item dot dot4"></span>
|
|
<div id="letterarea"></div>
|
|
<div id="reflection"></div>
|
|
</div>
|
|
<pre id="log"></pre>
|
|
`;
|