From 96373c6d93f0c310f8b777494c5a40c27fd78a0b Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Wed, 28 Jan 2026 16:03:16 +0100 Subject: initial commit --- templates/index.css | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 81 +++++++++++++++++++++++++++++ templates/index.js | 33 ++++++++++++ 3 files changed, 258 insertions(+) create mode 100644 templates/index.css create mode 100644 templates/index.html create mode 100644 templates/index.js (limited to 'templates') diff --git a/templates/index.css b/templates/index.css new file mode 100644 index 0000000..975c233 --- /dev/null +++ b/templates/index.css @@ -0,0 +1,144 @@ +:root { + /* define applied colors */ + --bg: #fdfdfd; + --fg: #1a1a1a; + --link-color: #0000EE; +} +@media (prefers-color-scheme: dark) { + /* change apllied colors to the dark gruvbox pallet + * https://github.com/morhetz/gruvbox + */ + :root { + --bg: #282828; /* dark bg */ + --fg: #ebdbb2; /* dark fg */ + --link-color: #d79921; /* yellow */ + } +} + +html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: var(--fg); + background-color: var(--bg); +} + +body { + margin: 0 auto; + /* max-width: 36em; */ + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + word-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; +} + +footer { + position:absolute; + bottom: 0; +} + +a { + color: var(--link-color); +} + +a:visited { + color: var(--link-color); +} + +@media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } +} + +* { + box-sizing: border-box; +} + +/* Position the image container (needed to position the left and right arrows) */ +.container { + position: relative; +} + +/* Hide the images by default */ +.mySlides { + display: none; +} + +/* Add a pointer when hovering over the thumbnail images */ +.cursor { + cursor: pointer; +} + +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 40%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +/* Container for image text */ +.caption-container { + text-align: center; + background-color: #222; + padding: 2px 16px; + color: white; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Six columns side by side */ +.column { + float: left; + width: 16.66%; +} + +/* Add a transparency effect for thumnbail images */ +.demo { + opacity: 0.6; +} + +.active, +.demo:hover { + opacity: 1; +} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..2ee1369 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,81 @@ + + + + {{ title }} + + + + + + + + + + +

{{ title }}

+{% if halloffame %} +
+

Hall of Fame

+{% for id, game in halloffame.items() %} +
+
{{ loop.index }}/ {{ loop.length }}
+ +
+{% 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 }} +
+{% endfor %} +
+
+{% endfor %} +{% endfor %} +{% if no_license %} +{% else %} + +{% endif %} + + diff --git a/templates/index.js b/templates/index.js new file mode 100644 index 0000000..22d8c4e --- /dev/null +++ b/templates/index.js @@ -0,0 +1,33 @@ +let slideIndex = 1; + +// Next/previous controls +function plusSlides(n) { + showSlides(slideIndex += n); +} + +// Thumbnail image controls +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(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} + 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; +} + +window.onload = function () { + showSlides(slideIndex); +} -- cgit v1.2.3