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>