From a6b47e15f8def689d6cbdc328196d73742dff2f2 Mon Sep 17 00:00:00 2001
From: mikka <mikka@kleinrot.net>
Date: Wed, 22 Apr 2026 21:33:57 +0200
Subject: [PATCH] Loopfunktion

---
 static/script.js     | 20 ++++++++++++++++++--
 templates/index.html |  2 +-
 templates/karte.html |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/script.js b/static/script.js
index f75471c..81bb2fb 100644
--- a/static/script.js
+++ b/static/script.js
@@ -4,6 +4,18 @@ const signs = document.querySelectorAll(".sing")
 outindex = 0
 playing = false
 playcolor = "#00ff3c"
+loop = true
+function looptrue(){
+  if(loop){
+    loop = false
+    document.querySelector("#loop").innerHTML = "Kein Loop"
+    document.querySelector("#loop").style.beckground
+  }
+  else{
+    loop = true
+    document.querySelector("#loop").innerHTML = "Loop"
+  }
+}
 function abspielen(){
   if(playing){
     audios[outindex].pause()
@@ -11,7 +23,7 @@ function abspielen(){
     playing = false
     articles[outindex].style.margin = "0px"
     articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
-    document.querySelector("button").innerHTML = "Abspielen"
+    document.querySelector("#play").innerHTML = "Abspielen"
   }
   else{
     audios[outindex].play()
@@ -19,7 +31,7 @@ function abspielen(){
     signs[outindex].innerHTML = "Spielt"
     articles[outindex].style.margin = "8px"
     articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
-    document.querySelector("button").innerHTML = "Pausieren"
+    document.querySelector("#play").innerHTML = "Pausieren"
   }
 }
 for (const [index,audio] of audios.entries()){
@@ -32,6 +44,7 @@ for (const [index,audio] of audios.entries()){
     signs[index].innerHTML = ""
     articles[index].style.filter = "grayscale("+(index+1)*50+"%)"
     articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
+    articles[outindex].style.filter = "grayscale(0%)"
     articles[outindex].style.margin = "8px"
     signs[outindex].innerHTML = "Spielt"
     articles[outindex].style.boxShadow = "0 0 6px 1px "+playcolor
@@ -43,6 +56,9 @@ for (const [index,audio] of audios.entries()){
     articles[index].style.margin = "8px"
     signs[index].innerHTML = "Spielt"
     articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
+    if(loop){
+      audios[0].play()
+    }
   }
   })
 }
diff --git a/templates/index.html b/templates/index.html
index a612f7f..39d5eae 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -55,7 +55,7 @@
 <h2>2026</h2>
 <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>
-<button onclick="abspielen()">Abspielen</button>
+<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 %}
diff --git a/templates/karte.html b/templates/karte.html
index 698372f..6ace39a 100644
--- a/templates/karte.html
+++ b/templates/karte.html
@@ -2,7 +2,7 @@
     <p id="{{karte_loop.index0}}" class="sing"></p>
     <img src="{{ karte.img }}"/>
     {% if karte.ytid %}
-    <audio src="/static/{{karte.datei}}"></audio>
+    <audio controls src="/static/{{karte.datei}}"></audio>
     {% endif %}
     <h2>{{ karte.titel}}</h2>
         <p><b>Übersetzter Titel:</b>{{ karte.uetitel}}</p>