Abspielknopf

templates/index.html

@@ -44,11 +44,18 @@
         text-align: center;
         color: rgb(181, 181, 181);
     }
+    button{
+        padding: 10px;
+        margin: 5px;
+        border: black;
+        border-radius: 20px;
+    }
 </style>
 <h1>ESC Playlist</h1>
 <h2>2026</h2>
 <a href="/suche?liste={{liste}}">Du willst ein weiteres Lied in der Playlist?</a>
-<p>Die Playlist {{liste}} ist insgesamt lang {{ gesamtLaenge | zeit }} und enthält {{ karten|length }} Lieder</p>
+<p>Die Playlist {{liste}} ist insgesamt {{ gesamtLaenge | zeit }} lang und enthält {{ karten|length }} Lieder</p>
+<button onclick="abspielen()">Abspielen</button>
 <div id = "flex-container">
     {% for karte in karten %}
     {% set karte_loop = loop %}

templates/karte.html

@@ -1,7 +1,8 @@
 <article>
+    <p id="{{karte_loop.index0}}" class="sing"></p>
     <img src="{{ karte.img }}"/>
     {% if karte.ytid %}
-    <audio controls autoplay src="/static/{{karte.datei}}"></audio>
+    <audio src="/static/{{karte.datei}}"></audio>
     {% endif %}
     <h2>{{ karte.titel}}</h2>
         <p><b>Übersetzter Titel:</b>{{ karte.uetitel}}</p>

templates/suche.html

@@ -1,5 +1,5 @@
 <style>
-    form,a{
+    form,a,p{
         display: block;
         text-align: center;
         color: black;