lol
333 lines
11 KiB
HTML
333 lines
11 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-bus-ribbon {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
gavle-marquee {
|
||
--markee-speed: 20;
|
||
--markee-interaction-pause-delay: 1s;
|
||
|
||
width: 100vw;
|
||
|
||
& > gavle-next-bus {
|
||
max-width: 75vw;
|
||
}
|
||
|
||
& > * {
|
||
padding-left: 1.5em;
|
||
}
|
||
}
|
||
|
||
gavle-next-bus {
|
||
|
||
display: grid;
|
||
color: white;
|
||
font-family: sans-serif;
|
||
font-size: 1.5em;
|
||
|
||
grid-template-columns: min-content 1fr;
|
||
grid-template-rows: 1fr min-content;
|
||
column-gap: 0.75em;
|
||
row-gap: 5px;
|
||
|
||
& > :not(img) {
|
||
mix-blend-mode: exclusion;
|
||
}
|
||
|
||
&[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
& > * {
|
||
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: block;
|
||
}
|
||
|
||
& img {
|
||
height: 2em;
|
||
max-width: 3em;
|
||
margin-top: -5px;
|
||
|
||
--outline-size: 1px;
|
||
--outline-color: white;
|
||
filter:
|
||
drop-shadow(0px var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) 0px 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(0px calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) 0px 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
;
|
||
}
|
||
|
||
& p {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.last-passage.warning {
|
||
color: white;
|
||
|
||
--outline-size: 1px;
|
||
--outline-color:#e2001a;
|
||
filter:
|
||
drop-shadow(0px var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) 0px 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(0px calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) 0px 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
;
|
||
|
||
text-transform: uppercase;
|
||
mix-blend-mode: normal;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
|
||
gavle-velov-station {
|
||
display: grid;
|
||
color: white;
|
||
font-family: sans-serif;
|
||
font-size: 1.5em;
|
||
|
||
grid-template-columns: min-content 1fr;
|
||
grid-template-rows: 1fr min-content;
|
||
column-gap: 0.75em;
|
||
row-gap: 5px;
|
||
|
||
& > img {
|
||
grid-column: 1;
|
||
grid-row: 1 / 3;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
& h1 {
|
||
font-size: inherit;
|
||
margin: 0;
|
||
padding-right: 3em;
|
||
width: fit-content;
|
||
}
|
||
|
||
& img {
|
||
height: 1.3em;
|
||
max-width: 3em;
|
||
margin-top: 5px;
|
||
|
||
--outline-size: 1px;
|
||
--outline-color: white;
|
||
filter:
|
||
drop-shadow(0px var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) 0px 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(0px calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) 0px 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
drop-shadow(calc(var(--outline-size) * -1) var(--outline-size) 0px var(--outline-color))
|
||
drop-shadow(var(--outline-size) calc(var(--outline-size) * -1) 0px var(--outline-color))
|
||
;
|
||
}
|
||
|
||
& p {
|
||
font-size: 0.8em;
|
||
margin: 0;
|
||
}
|
||
|
||
& > :not(img) {
|
||
mix-blend-mode: exclusion;
|
||
}
|
||
}
|
||
|
||
@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;
|
||
right: 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;
|
||
}
|
||
}
|
||
|
||
.plurial {
|
||
display: none;
|
||
}
|
||
|
||
.plurial-content .plurial {
|
||
display: inline;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<iframe id="gavle-tv" src="./liquid-shape-distortions/index.html" frameborder="0"></iframe>
|
||
|
||
<script type="module" src="./components/marquee.js"></script>
|
||
<script type="module" src="./components/next-bus.js"></script>
|
||
<script type="module" src="./components/velov-station.js"></script>
|
||
<script type="module">
|
||
let shuffledElements = Array.from(document.getElementById("next-bus-ribbon").children)
|
||
.map(value => ({ value, sort: Math.random() }))
|
||
.sort((a, b) => a.sort - b.sort)
|
||
.map(({ value }) => value)
|
||
|
||
document.getElementById("next-bus-ribbon").replaceChildren(...shuffledElements)
|
||
</script>
|
||
<gavle-marquee id="next-bus-ribbon">
|
||
<gavle-next-bus stop-id="line:SYTNEX:A/forward/stop_point:SYTNEX:46052">
|
||
<!-- Metro A dir Vaulx, Hotel de ville -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:A/backward/stop_point:SYTNEX:42743">
|
||
<!-- Metro A dir Perrache, Hotel de ville -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:9/forward/stop_point:SYTNEX:2494">
|
||
<!-- Bus 9 dir Satoney, Pont de lattre RD -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:9/backward/stop_point:SYTNEX:2494">
|
||
<!-- Bus 9 dir cordeliers, Pont de lattre RD -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C/forward/stop_point:SYTNEX:10787">
|
||
<!-- Métro C dir Cuire, Croix-Paquet -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C6/forward/stop_point:SYTNEX:2496">
|
||
<!-- Bus C6 arret Pont de lattre RD campus lyon ouest -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C6/backward/stop_point:SYTNEX:2495">
|
||
<!-- Bus C6 arret Pont de lattre RD Gare part dieu v. merle -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C13/forward/stop_point:SYTNEX:10169">
|
||
<!-- Bus C13 arret Austerlitz montessuy gutemberg -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C13/backward/stop_point:SYTNEX:10169">
|
||
<!-- Bus C13 arret Austerlitz vers grange blanche -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:PL2/backward/stop_point:SYTNEX:10889">
|
||
<!-- Bus PL2 arret Pont de lattre RD vers Musée des confluences -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:PL2/forward/stop_point:SYTNEX:10169">
|
||
<!-- BUS PL2 arret Austerlitz vers Cuire -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C23/backward/stop_point:SYTNEX:10889">
|
||
<!-- Bus C13 arret Pont de lattre RD vers Flachet - Alain Gilles -->
|
||
</gavle-next-bus>
|
||
<gavle-next-bus stop-id="line:SYTNEX:C23/forward/stop_point:SYTNEX:10889">
|
||
<!-- Bus C13 arret Pont de lattre RD vers Cite internationale -->
|
||
</gavle-next-bus>
|
||
<gavle-velov-station station-id="poi:osm:node:7020557391">
|
||
<!-- Chazette / Lassagne -->
|
||
</gavle-velov-station>
|
||
<gavle-velov-station station-id="poi:osm:node:1332627068">
|
||
<!-- Quai Lassagne -->
|
||
</gavle-velov-station>
|
||
<gavle-velov-station station-id="poi:osm:node:1056768413">
|
||
<!-- Place Tolozan -->
|
||
</gavle-velov-station>
|
||
<gavle-velov-station station-id="poi:osm:node:10621667633">
|
||
<!-- Place d'Helvétie -->
|
||
</gavle-velov-station>
|
||
</gavle-marquee>
|
||
|
||
<script type="module" src="./components/clock.js"></script>
|
||
<gavle-clock id="clock"></gavle-clock>
|
||
</body>
|
||
</html> |