lol
263 lines
6.6 KiB
HTML
263 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>GavleTv × Dernier métro</title>
|
||
<style>
|
||
@font-face {
|
||
font-family: "bianzhidai nobg pearl";
|
||
src: url("./bianzhidai_noBG-Pearl.otf");
|
||
}
|
||
|
||
:root {
|
||
--tcl-red: #e2001a;
|
||
}
|
||
|
||
body, html {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
background: black;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#gavle-tv {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.thinking {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
width: 200px;
|
||
height: 200px;
|
||
background: white;
|
||
border: white solid 4px;
|
||
box-shadow: 8px 8px 0 black;
|
||
}
|
||
|
||
.thinking iframe {
|
||
width: 200%;
|
||
height: 200%;
|
||
transform-origin: 0 0;
|
||
transform: scale(0.5);
|
||
border: none;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.thinking img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
opacity: 0.5;
|
||
mix-blend-mode: darken;
|
||
}
|
||
|
||
#next-line {
|
||
font-family: monospace;
|
||
color: white;
|
||
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
font-size: 20px;
|
||
|
||
display: grid;
|
||
gap: 10px;
|
||
grid-template-columns: min-content 1fr;
|
||
grid-template-rows: min-content 1fr;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: var(--tcl-red);
|
||
border: none;
|
||
z-index: 100;
|
||
|
||
transform: translateY(0);
|
||
transition: ease-out 0.8s transform;
|
||
|
||
& > * {
|
||
grid-column: 2;
|
||
margin: 0;
|
||
}
|
||
|
||
& > h1 {
|
||
font-size: 1.3em;
|
||
}
|
||
|
||
& > img:first-child {
|
||
grid-column: 1;
|
||
grid-row: 1;
|
||
height: 1.3em;
|
||
align-self: center;
|
||
}
|
||
}
|
||
|
||
#next-line[hidden] {
|
||
transform: translateY(-100%);
|
||
transition-timing-function: ease-in;
|
||
}
|
||
|
||
#last-passage {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
right: 15px;
|
||
max-width: calc(100% - 30px);
|
||
max-height: calc(100% - 30px);
|
||
|
||
font-size: 20px;
|
||
font-family: monospace;
|
||
|
||
color: white;
|
||
|
||
& > * {
|
||
background: var(--tcl-red);
|
||
padding: 15px;
|
||
margin: 0;
|
||
margin-left: auto;
|
||
}
|
||
|
||
& .last-passage {
|
||
|
||
display: grid;
|
||
|
||
&[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
grid-template-columns: min-content 1fr;
|
||
grid-template-rows: 1fr min-content;
|
||
column-gap: 10px;
|
||
row-gap: 5px;
|
||
|
||
& > * {
|
||
grid-column: 2;
|
||
margin: 0;
|
||
}
|
||
|
||
& > img {
|
||
grid-column: 1;
|
||
grid-row: 1 / 3;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
& h1 {
|
||
font-size: inherit;
|
||
}
|
||
|
||
& h1 small {
|
||
font-size: inherit;
|
||
font-weight: normal;
|
||
display: inline-block;
|
||
}
|
||
|
||
& img {
|
||
height: 2em;
|
||
max-width: 3em;
|
||
}
|
||
}
|
||
|
||
|
||
ul, ol {
|
||
padding-left: calc(15px + 2em);
|
||
margin: 0.75em 0;
|
||
padding-left: 1em;
|
||
|
||
& > li:not(:last-child) {
|
||
margin-bottom: 0.75em;
|
||
}
|
||
}
|
||
}
|
||
|
||
#next-line:not([hidden]) ~ #last-passage {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
|
||
& img {
|
||
opacity: 0.5
|
||
}
|
||
}
|
||
|
||
#next-line ~ #last-passage {
|
||
transition: color 0.5s steps(5);
|
||
|
||
& img {
|
||
transition: opacity 0.5s steps(5);
|
||
}
|
||
}
|
||
|
||
@keyframes deux-points {
|
||
0% { opacity: 1; }
|
||
25% { opacity: 1; }
|
||
25.1% { opacity: 0; }
|
||
100% { opacity: 0; }
|
||
}
|
||
|
||
#clock {
|
||
display: block;
|
||
font-family: "bianzhidai nobg pearl";
|
||
position: fixed;
|
||
bottom: 5px;
|
||
left: 15px;
|
||
font-size: 17vh;
|
||
z-index: 1000;
|
||
color: white;
|
||
mix-blend-mode: exclusion;
|
||
line-height: 0.8;
|
||
|
||
.deux-points {
|
||
animation: deux-points steps(4) 1s infinite;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<iframe id="gavle-tv" src="./liquid-shape-distortions/index.html" frameborder="0"></iframe>
|
||
<script src="index.js" type="module"></script>
|
||
<div id="next-line" hidden>
|
||
<img class="line-picto" src="" />
|
||
<h1 class="line-name"></h1>
|
||
<p>
|
||
<span class="stop-name"></span>:
|
||
prochain départ <span class="stop-passage-time-relative"></span>
|
||
(<time class="stop-passage-time"></time>)
|
||
</p>
|
||
</div>
|
||
<div id="last-passage" style="width: 100%;">
|
||
<section style="max-width: 350px;">
|
||
Quelques petites choses a faire avant de partir :
|
||
<ul>
|
||
<li><strong>Ranger</strong> les établis et les machines</li>
|
||
<li>Faire un petit coup de <strong>vaisselle</strong></li>
|
||
</ul>
|
||
Bonne nuit <strong>:)</strong>
|
||
</section>
|
||
<template class="last-passage-template">
|
||
<article class="last-passage">
|
||
<img class="line-picto" src="" />
|
||
<h1>
|
||
<span class="line-name" ></span>
|
||
<small class="stop-name"></small>
|
||
</h1>
|
||
<p>
|
||
Dernier passage dans <span class="stop-passage-time-relative"></span>
|
||
(<time class="stop-passage-time"></time>)
|
||
</p>
|
||
</article>
|
||
</template>
|
||
</div>
|
||
|
||
<script type="module" src="./components/clock.js"></script>
|
||
<gavle-clock id="clock"></gavle-clock>
|
||
</body>
|
||
</html> |