89 lines
1.9 KiB
HTML
89 lines
1.9 KiB
HTML
<style>
|
||
#flex-container {
|
||
overflow: auto;
|
||
scroll-snap-type: x mandatory;
|
||
display: flex;
|
||
border: none;
|
||
gap: 5px;
|
||
}
|
||
article {
|
||
flex-wrap: row nowrap;
|
||
border: none;
|
||
flex: 0 0 30rem;
|
||
}
|
||
a,
|
||
h1,
|
||
h2 {
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
article {
|
||
border: 2px solid;
|
||
border-radius: 15px;
|
||
border-color: black;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 20px;
|
||
}
|
||
#kursive {
|
||
font-style: italic;
|
||
}
|
||
img {
|
||
border-radius: 2%;
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: contain;
|
||
}
|
||
a {
|
||
color: black;
|
||
}
|
||
h2 {
|
||
text-align: center;
|
||
}
|
||
#gray {
|
||
font-size: 0.75rem;
|
||
display: block;
|
||
text-align: center;
|
||
color: rgb(181, 181, 181);
|
||
}
|
||
button {
|
||
padding: 10px;
|
||
margin: 5px;
|
||
border: black;
|
||
border-radius: 20px;
|
||
}
|
||
#logo{
|
||
object-fit: scale-down;
|
||
}
|
||
#logocontaner{
|
||
margin: 0 auto;
|
||
height: 25%;
|
||
width: 25%;
|
||
}
|
||
#logo{
|
||
height: 105%;
|
||
scale: 150%;
|
||
|
||
}
|
||
#logocontaner{
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|
||
<a href="/" id="logocontaner"><img id="logo" src="/static/Eurovision_Song_Contest_heart_Wikidata_(2014–2025).svg"></img></a>
|
||
<h1>ESC Playlist</h1>
|
||
<a href="/suche?liste={{liste}}"
|
||
>Du willst ein weiteres Lied in der Playlist?</a
|
||
>
|
||
<p>
|
||
Die Playlist {{liste}} ist insgesamt {{ gesamtLaenge | zeit }} lang und
|
||
enthält {{ karten|length }} Lieder
|
||
</p>
|
||
<p>
|
||
<button id="play" onclick="abspielen()">Abspielen</button
|
||
><button id="loop" onclick="looptrue()">Loop</button>
|
||
</p>
|
||
<div id="flex-container">
|
||
{% for karte in karten %} {% set karte_loop = loop %} {% include
|
||
"karte.html" %} {% endfor %}
|
||
</div>
|
||
<script src="static/script.js"></script>
|