Ajout des velov et des derniers passages
This commit is contained in:
lol
+209
-139
@@ -64,135 +64,165 @@
|
||||
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;
|
||||
#next-bus-ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--tcl-red);
|
||||
border: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
transform: translateY(0);
|
||||
transition: ease-out 0.8s transform;
|
||||
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;
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
& > img:first-child {
|
||||
& > img {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
height: 1.3em;
|
||||
align-self: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
|
||||
gavle-velov-station {
|
||||
display: grid;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5em;
|
||||
|
||||
& > * {
|
||||
background: var(--tcl-red);
|
||||
padding: 15px;
|
||||
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;
|
||||
margin-left: auto;
|
||||
padding-right: 3em;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
& .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
|
||||
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))
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
#next-line ~ #last-passage {
|
||||
transition: color 0.5s steps(5);
|
||||
& p {
|
||||
font-size: 0.8em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
transition: opacity 0.5s steps(5);
|
||||
& > :not(img) {
|
||||
mix-blend-mode: exclusion;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,7 +238,7 @@
|
||||
font-family: "bianzhidai nobg pearl";
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
font-size: 17vh;
|
||||
z-index: 1000;
|
||||
color: white;
|
||||
@@ -219,43 +249,83 @@
|
||||
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 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/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>
|
||||
|
||||
Reference in New Issue
Block a user