Quiz-Startseite mit Kategorie-Kacheln #1
46
quiz/app.js
Normal file
46
quiz/app.js
Normal file
@@ -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);
|
||||||
|
});
|
||||||
8
quiz/assets/icons/film.svg
Normal file
8
quiz/assets/icons/film.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title">
|
||||||
|
<title id="title">Film</title>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M4 5.5h16v13H4z"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M4 9h16"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6 6.5L18 8.2"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6 7.6L18 9.3"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M12.5 12l2.8 3.2-2.8 2.4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 783 B |
6
quiz/assets/icons/technik.svg
Normal file
6
quiz/assets/icons/technik.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title">
|
||||||
|
<title id="title">Technik</title>
|
||||||
|
<circle cx="12" cy="12" r="6.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
<circle cx="12" cy="12" r="2.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M18.2 12h2.4M3.4 12h2.4M12 18.2v2.4M12 3.4v2.4M16.38 16.38l1.7 1.7M5.92 5.92l1.7 1.7M16.38 7.62l1.7-1.7M5.92 18.08l1.7-1.7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 554 B |
7
quiz/assets/icons/wrestling.svg
Normal file
7
quiz/assets/icons/wrestling.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title">
|
||||||
|
<title id="title">Wrestling</title>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M12 3C7 3 4.5 6.2 4.5 9.5V12c0 1.5 1 2.8 2.3 3.4L6 17.2c-.4.8.2 1.8 1 1.8h1.5v1.8c0 .7.5 1.2 1.2 1.2h4.6c.7 0 1.2-.5 1.2-1.2V19h1.5c.8 0 1.4-1 1-1.8l-.8-1.8c1.3-.6 2.3-1.9 2.3-3.4V9.5C19.5 6.2 17 3 12 3Z"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M8.4 9.2l1.7 1.7-1.7 1.7"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M15.6 9.2L13.9 10.9l1.7 1.7"/>
|
||||||
|
<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M10.9 15.9l1.1 1.1 1.1-1.1"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 881 B |
26
quiz/index.html
Normal file
26
quiz/index.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Quiz Startseite</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main id="app">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1>Quiz Startseite</h1>
|
||||||
|
<p class="lead">Wähle eine Kategorie, um dein Quiz zu starten.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Kategorie-Tiles werden von app.js hier eingefügt -->
|
||||||
|
<section id="categories" aria-labelledby="categories-heading">
|
||||||
|
<h2 id="categories-heading" class="visually-hidden">Kategorien</h2>
|
||||||
|
<div class="tiles"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<p id="status" class="status" aria-live="polite">Noch keine Kategorie gewählt.</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
119
quiz/styles.css
Normal file
119
quiz/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user