v1
This commit is contained in:
lol
+263
@@ -0,0 +1,263 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user