From 98671c933d4877465fa343855e095e3e8e126dea Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Tue, 10 Feb 2026 15:01:27 +0100 Subject: use german place holders and support multiple slides --- templates/index.css | 13 ++++++------ templates/index.html | 60 +++++++++++++++++++++++++++++++++++----------------- templates/index.js | 50 ++++++++++++++++++++++++++++++------------- 3 files changed, 82 insertions(+), 41 deletions(-) (limited to 'templates') diff --git a/templates/index.css b/templates/index.css index 975c233..08f3f44 100644 --- a/templates/index.css +++ b/templates/index.css @@ -25,11 +25,8 @@ html { body { margin: 0 auto; - /* max-width: 36em; */ - padding-left: 50px; - padding-right: 50px; - padding-top: 50px; - padding-bottom: 50px; + max-width: 80%; + padding: 50px; hyphens: auto; word-wrap: break-word; text-rendering: optimizeLegibility; @@ -37,7 +34,6 @@ body { } footer { - position:absolute; bottom: 0; } @@ -63,11 +59,13 @@ a:visited { /* Position the image container (needed to position the left and right arrows) */ .container { position: relative; + max-height: 100%; } /* Hide the images by default */ -.mySlides { +.slide { display: none; + height: 400px; } /* Add a pointer when hovering over the thumbnail images */ @@ -136,6 +134,7 @@ a:visited { /* Add a transparency effect for thumnbail images */ .demo { opacity: 0.6; + padding: 1px; } .active, diff --git a/templates/index.html b/templates/index.html index 2ee1369..403a8d0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,6 +10,9 @@ {% include 'index.css' %} + @@ -18,53 +21,72 @@

{{ title }}

{% if halloffame %} -
+

Hall of Fame

{% for id, game in halloffame.items() %} -
-
{{ loop.index }}/ {{ loop.length }}
- +
+
{{ loop.index }}/ {{ loop.length }}
+ +
+{% endfor %} + + + + + + +
+

+
+ + +
+{% for _, game in halloffame.items() %} +
+ {{ game.Name }} von {{ game.Team }} {{ game.Lizenz }}
{% endfor %} +
{% endif %} {% for section, subsections in projects.items() %}

{{ section }}

{% for subsection, games in subsections.items() %}

{{ subsection }}

-
+
{% for id, game in games.items() %} -
+
{{ loop.index }}/{{ loop.length }}
-
{% endfor %} - - + +
-

+

{% for _, game in games.items() %}
- {{ game.name }} von {{ game.authors }} {{game.license }} + {{ game.Name }} von {{ game.Team }} {{ game.Lizenz }}
{% endfor %}
diff --git a/templates/index.js b/templates/index.js index 22d8c4e..9fed4c0 100644 --- a/templates/index.js +++ b/templates/index.js @@ -1,33 +1,53 @@ -let slideIndex = 1; +const deep_value = (o, p) => p.split('.').reduce((a, v) => a[v], o); + +let slideIndeces = {}; // Next/previous controls -function plusSlides(n) { - showSlides(slideIndex += n); +function plusSlides(id, n) { + showSlides(id, slideIndeces[id] += n); } // Thumbnail image controls -function currentSlide(n) { - showSlides(slideIndex = n); +function currentSlide(id, n) { + showSlides(id, slideIndeces[id] = n); } -function showSlides(n) { +function showSlides(id, n) { let i; - let slides = document.getElementsByClassName("mySlides"); - let dots = document.getElementsByClassName("demo"); - let captionText = document.getElementById("caption"); - if (n > slides.length) {slideIndex = 1} - if (n < 1) {slideIndex = slides.length} + console.log(`${id}-slide`); + let slides = document.getElementsByClassName(`${id}-slide`); + let dots = document.getElementsByClassName(`${id}-demo`); + let captionText = document.getElementById(`${id}-caption`); + + // Overflow + if (n > slides.length) { slideIndeces[id] = 1; } + // Underflow + if (n < 1) { slideIndeces[id] = slides.length; } + for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } + for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } - slides[slideIndex-1].style.display = "block"; - dots[slideIndex-1].className += " active"; - captionText.innerHTML = dots[slideIndex-1].alt; + + let slide = slides[slideIndeces[id]-1]; + slide.style.display = "block"; + const project = deep_value(projects, slide.id); + dots[slideIndeces[id]-1].className += " active"; + if ('Download' in project) { + captionText.innerHTML = `${project.Name} von ${project.Team} ${project.Lizenz}` + } else { + captionText.innerHTML = dots[slideIndeces[id]-1].alt; + } } window.onload = function () { - showSlides(slideIndex); + let slides = document.getElementsByClassName("container"); + for (let slide of slides) { + let id = slide.id.replace("-slides", ""); + slideIndeces[id] = 1; + showSlides(id, 1); + } } -- cgit v1.2.3