Erste version

templates/index.html

@@ -0,0 +1,58 @@
+<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;
+    }
+    article > a{
+        font-size: 0.75rem;
+        display: block;
+        text-align: center;
+        color: rgb(181, 181, 181);
+    }
+</style>
+<h1>ESC Playlist</h1>
+<h2>2026</h2>
+<a href="/suche">Du willst ein weiteres Lied in der Playlist?</a>
+<p>Die Playlist ist insgesamt lang {{ gesamtLaenge | zeit }} und enthält {{ karten|length }} Lieder</p>
+<div id = "flex-container">
+    {% for karte in karten %}
+    {% set karte_loop = loop %}
+    {% include "karte.html" %}
+    {% endfor %}
+</div>
+<script src="static/script.js"></script>

templates/karte.html

@@ -0,0 +1,17 @@
+<article>
+    <img src="{{ karte.img }}"/>
+    <audio controls autoplay src="/static/{{karte.datei}}"></audio>
+    <h2>{{ karte.titel}}</h2>
+        <p><b>Übersetzter Titel:</b>{{ karte.uetitel}}</p>
+        <p><b>Interpreten:</b>{{ karte.interprete}}</p>
+        <p><b>Jahrgang:</b> {{ karte.jahrgang }}</p>
+        <p><b>Plazirung:</b> {{ karte.plazirung }}</p>
+        <p><b>Länge:</b> {{karte.laenge|zeit}}</p>
+        <p><b id = "kursive">Interesanter</b><b> Fakt:</b> {{ karte.interesanterfakt }}</p>
+    {% if karte.text %}
+    <a href="{{ karte.text }}" target="_blank">Original Text</a>
+    {% endif %}
+    {% if admin %}
+    <form method="post"><button name="index" value="{{karte_loop.index0}}">&lt;X&gt;</button></form>
+    {% endif %}
+</article>

templates/suche.html

@@ -0,0 +1,12 @@
+<form><input name="suche" placeholder="Suche" value="{{anfrage or ""}}"></form>
+{% if ergebnisse %}
+<form method="post"><ol>
+{% for ergebnis in ergebnisse %}
+<li><button name="id" value={{ergebnis.id}}>{{ ergebnis["display-label"].value }}</button> <ul><li>{{ ergebnis.description.value }}</li></ul></li>
+{% endfor %}</ol></form>
+
+{%elif anfrage%}
+<p>Leider gibt es diesen Eintrag nicht!</p>
+{%endif%}
+
+<a href="/">Doch nicht?</a>