From 1919f892ec96aba771367e2e6a6103830d2757c0 Mon Sep 17 00:00:00 2001 From: AiTeam Coding Agent Date: Sat, 1 Aug 2026 17:18:10 +0000 Subject: [PATCH] chore(aiteam): finalize tested changes for review --- quiz/app.js | 46 ++++++++++++ quiz/assets/icons/film.svg | 8 +++ quiz/assets/icons/technik.svg | 6 ++ quiz/assets/icons/wrestling.svg | 7 ++ quiz/index.html | 26 +++++++ quiz/styles.css | 119 ++++++++++++++++++++++++++++++++ 6 files changed, 212 insertions(+) create mode 100644 quiz/app.js create mode 100644 quiz/assets/icons/film.svg create mode 100644 quiz/assets/icons/technik.svg create mode 100644 quiz/assets/icons/wrestling.svg create mode 100644 quiz/index.html create mode 100644 quiz/styles.css diff --git a/quiz/app.js b/quiz/app.js new file mode 100644 index 0000000..e0bf3d6 --- /dev/null +++ b/quiz/app.js @@ -0,0 +1,46 @@ +"use strict"; + +const categories = [ + { name: "Wrestling", icon: "assets/icons/wrestling.svg" }, + { name: "Film", icon: "assets/icons/film.svg" }, + { name: "Technik", icon: "assets/icons/technik.svg" }, +]; + +const appContainer = document.getElementById("categories"); +const statusRegion = document.getElementById("status"); + +function buildTile(category) { + const button = document.createElement("button"); + button.type = "button"; + button.className = "tile"; + button.dataset.category = category.name; + + const img = document.createElement("img"); + img.src = category.icon; + img.alt = ""; + img.width = 48; + img.height = 48; + + const label = document.createElement("span"); + label.className = "tile-label"; + label.textContent = category.name; + + button.append(img, label); + + button.addEventListener("click", () => { + statusRegion.textContent = "Kategorie gewählt: " + category.name; + }); + + return button; +} + +document.addEventListener("DOMContentLoaded", () => { + const tilesContainer = appContainer.querySelector(".tiles"); + + const fragment = document.createDocumentFragment(); + categories.forEach((category) => { + fragment.appendChild(buildTile(category)); + }); + + tilesContainer.appendChild(fragment); +}); diff --git a/quiz/assets/icons/film.svg b/quiz/assets/icons/film.svg new file mode 100644 index 0000000..fbd4943 --- /dev/null +++ b/quiz/assets/icons/film.svg @@ -0,0 +1,8 @@ + + Film + + + + + + diff --git a/quiz/assets/icons/technik.svg b/quiz/assets/icons/technik.svg new file mode 100644 index 0000000..75683d1 --- /dev/null +++ b/quiz/assets/icons/technik.svg @@ -0,0 +1,6 @@ + + Technik + + + + diff --git a/quiz/assets/icons/wrestling.svg b/quiz/assets/icons/wrestling.svg new file mode 100644 index 0000000..a3ccb85 --- /dev/null +++ b/quiz/assets/icons/wrestling.svg @@ -0,0 +1,7 @@ + + Wrestling + + + + + diff --git a/quiz/index.html b/quiz/index.html new file mode 100644 index 0000000..89adc16 --- /dev/null +++ b/quiz/index.html @@ -0,0 +1,26 @@ + + + + + + Quiz Startseite + + + + +
+
+

Quiz Startseite

+

Wähle eine Kategorie, um dein Quiz zu starten.

+
+ + +
+ +
+
+ +

Noch keine Kategorie gewählt.

+
+ + diff --git a/quiz/styles.css b/quiz/styles.css new file mode 100644 index 0000000..a47b97e --- /dev/null +++ b/quiz/styles.css @@ -0,0 +1,119 @@ +:root { + --color-bg: #f6f7fb; + --color-surface: #ffffff; + --color-text: #1c2430; + --color-muted: #5a6675; + --color-accent: #2f6fed; + --color-accent-strong: #1c4fd0; + --color-border: #e2e6ee; + --focus-ring: #f5a623; + --radius: 12px; + --shadow: 0 4px 14px rgba(28, 36, 48, 0.08); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background: var(--color-bg); + color: var(--color-text); + line-height: 1.5; +} + +#app { + max-width: 900px; + margin: 0 auto; + padding: 32px 20px 48px; +} + +.page-header { + text-align: center; + margin-bottom: 28px; +} + +.page-header h1 { + margin: 0 0 8px; + font-size: clamp(1.6rem, 4vw, 2.2rem); +} + +.page-header .lead { + margin: 0; + color: var(--color-muted); +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + clip-path: inset(50%); + white-space: nowrap; +} + +.tiles { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 20px; +} + +.tile { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + padding: 28px 16px; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + box-shadow: var(--shadow); + font-size: 1.1rem; + font-weight: 600; + color: var(--color-text); + cursor: pointer; + transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; +} + +.tile:hover { + border-color: var(--color-accent); + box-shadow: 0 8px 20px rgba(28, 36, 48, 0.12); + transform: translateY(-2px); +} + +.tile:active { + transform: translateY(0); +} + +.tile img { + width: 48px; + height: 48px; + color: var(--color-accent); + pointer-events: none; +} + +button:focus-visible { + outline: 3px solid var(--focus-ring); + outline-offset: 2px; +} + +.status { + margin-top: 32px; + text-align: center; + font-size: 1.05rem; + color: var(--color-muted); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: 14px 18px; + min-height: 1.5em; +} + +@media (prefers-reduced-motion: reduce) { + .tile { + transition: none; + } +}