use german place holders and support multiple slides

1 files changed, 41 insertions, 19 deletions

diff --git a/templates/index.html b/templates/index.html
index 2ee1369..403a8d0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,6 +11,9 @@
   </style>
 
   <script language="javascript" type="text/javascript">
+    var projects = JSON.parse('{{ projects|tojson }}');
+  </script>
+  <script language="javascript" type="text/javascript">
 {% include 'index.js' %}
   </script>
 </head>
@@ -18,53 +21,72 @@
 <body>
   <h1>{{ title }}</h1>
 {% if halloffame %}
-  <div id='hall-of-fame'>
+  <div id='halloffame-slides' class="container">
   <h2>Hall of Fame</h2>
 {% for id, game in halloffame.items() %}
-    <div class="mySlides">
-      <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div>
-        <iframe src="{{ game.path }}/{{ game.entry }}"
-                pid="{{ id }}"
-                title="{{ game.name }}"
-                style="width:100%"
-                allow="fullscreen *">
-        </iframe>
+  <div class="slide halloffame-slide">
+    <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div>
+      <iframe src="{{ game.Pfad }}/{{ game.Datei }}"
+              pid="{{ id }}"
+              title="{{ game.Name }}"
+              style="width:100%; height:100%"
+              allow="fullscreen *">
+      </iframe>
+  </div>
+{% endfor %}
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides('halloffame', -1)">&#10094;</a>
+  <a class="next" onclick="plusSlides('halloffame', 1)">&#10095;</a>
+
+  <!-- Image text -->
+  <div class="caption-container">
+    <p id="halloffame-caption"></p>
+  </div>
+
+  <!-- Thumbnail images -->
+  <div class="row">
+{% for _, game in halloffame.items() %}
+    <div class="column">
+      <img class="demo cursor halloffame-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('halloffame', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} ">
     </div>
 {% endfor %}
+  </div>
   </div> 
 {% endif %}
 {% for section, subsections in projects.items() %}
 <h2>{{ section }}</h2>
 {% for subsection, games in subsections.items() %}
 <h3>{{ subsection }}</h2>
-<div class="container">
+<div id="{{ section }}-{{ subsection }}-slides" class="container">
 {% for id, game in games.items() %}
   <!-- Full-width iframes with number text -->
-  <div class="mySlides">
+  <div id="{{ section }}.{{ subsection }}.{{ id }}" class="slide {{ section }}-{{ subsection }}-slide">
     <div class="numbertext">{{ loop.index }}/{{ loop.length }}</div>
-      <iframe src="{{ game.path }}/{{ game.entry }}"
+      <iframe src="{{ game.Pfad }}/{{ game.Datei }}"
               pid="{{ id }}"
-              title="{{ game.name }}"
-              style="width:100%"
-              allow="fullscreen *">
+              title="{{ game.Name }}"
+              style="width:100%; height:100%"
+              allow="fullscreen *"
+              loading="lazy">
       </iframe>
   </div>
 {% endfor %}
 
   <!-- Next and previous buttons -->
-  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
-  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+  <a class="prev" onclick="plusSlides('{{section }}-{{ subsection}}', -1)">&#10094;</a>
+  <a class="next" onclick="plusSlides('{{section }}-{{ subsection}}', 1)">&#10095;</a>
 
   <!-- Image text -->
   <div class="caption-container">
-    <p id="caption"></p>
+    <p id="{{section }}-{{ subsection}}-caption"></p>
   </div>
 
   <!-- Thumbnail images -->
   <div class="row">
 {% for _, game in games.items() %}
     <div class="column">
-      <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide({{ loop.index }})" alt="{{ game.name }} von {{ game.authors }} {{game.license }} ">
+      <img class="demo cursor {{ section }}-{{ subsection }}-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('{{ section }}-{{ subsection }}', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} ">
     </div>
 {% endfor %}
   </div>