diff --git a/web/13/eigene_loesungen/Aufgabe_01.html b/web/13/eigene_loesungen/Aufgabe_01.html new file mode 100644 index 0000000..63e01ee --- /dev/null +++ b/web/13/eigene_loesungen/Aufgabe_01.html @@ -0,0 +1,40 @@ + + + + + + + Adventskalender + + +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/web/13/eigene_loesungen/Aufgabe_01.js b/web/13/eigene_loesungen/Aufgabe_01.js new file mode 100644 index 0000000..a050adb --- /dev/null +++ b/web/13/eigene_loesungen/Aufgabe_01.js @@ -0,0 +1,62 @@ + +var width = 100 / 6; +var height = 100 / 4; + +var current_width = 0; +var current_height = 0; + +function getRandomColor() { //from https://stackoverflow.com/questions/1484506/random-color-generator + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} + + +for(var i = 0; i < 24; i++){ + var box = document.getElementById("day-"+i.toString()) + + box.style.position = "absolute" + box.style.backgroundColor = getRandomColor() + + box.style.height = height.toString()+"%" + box.style.width = width.toString()+"%" + box.style.border = "2px solid black" + box.style.display = "flex" + box.style.alignItems = "center" + box.style.justifyContent = "center" + box.style.fontSize = "24px" + box.style.fontWeight = "bold" + box.textContent = (i + 1) + + box.style.top = current_height.toString()+"%" + box.style.left = current_width.toString()+"%" + + current_width += width + if((i+1) % 6 == 0){ + current_width = 0 + current_height += height + } +} + +const current_date = new Date(); +const today = current_date.getDate(); +const month = current_date.getMonth(); + +for (let i = 0; i < 24; i++) { + let box = document.getElementById("day-" + i); + if (!box) continue; + + box.addEventListener("click", function () { + let day = Number.parseInt(box.textContent); + + if (month === 11 && day <= today) { + box.style.backgroundColor = 'white'; + box.textContent = "\u{1F381}"; + } else { + alert("Noch schläft das Türchen – wie ein Geschenk unter dem Baum."); + } + }); +} \ No newline at end of file diff --git a/web/13/eigene_loesungen/Aufgabe_02.css b/web/13/eigene_loesungen/Aufgabe_02.css new file mode 100644 index 0000000..1e2d845 --- /dev/null +++ b/web/13/eigene_loesungen/Aufgabe_02.css @@ -0,0 +1,218 @@ +:root { + font-family: "Sansation", sans-serif; + font-size: 16px; + color-scheme: dark; + --bg: #0b1220; + --panel: rgba(94, 39, 27, 0.96); + --panel-border: rgba(17, 224, 103, 0.18); + --accent: #409720; + --accent-strong: #988fa8; + --muted: #94a3b8; +} + +* { + box-sizing: border-box; +} + +html, body { + min-height: 100%; +} + +body { + margin: 0; + padding: 2rem; + background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 24%), + linear-gradient(180deg, #b05d54 0%, #83aa93 40%, #7989af 100%); + color: #e2e8f0; +} + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + background-image: radial-gradient(circle at 20% 15%, rgba(83, 186, 24, 0.12) 0, transparent 32%), + radial-gradient(circle at 80% 10%, rgba(34, 197, 94, 0.08) 0, transparent 30%), + radial-gradient(circle at 50% 80%, rgba(14, 165, 233, 0.07) 0, transparent 28%); +} + +h1 { + margin: 0 0 1.5rem; + font-size: clamp(2rem, 4vw, 3rem); + letter-spacing: 0.08em; + text-transform: uppercase; + text-align: center; + color: #f8fafc; + text-shadow: 0 0 18px rgba(139, 92, 246, 0.35); +} + +form { + max-width: 640px; + margin: 0 auto; + padding: 2rem; + background: var(--panel); + border: 1px solid var(--panel-border); + border-radius: 26px; + backdrop-filter: blur(12px); + box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35); +} + +fieldset { + border: 1px solid rgba(148, 163, 184, 0.18); + border-radius: 18px; + padding: 1.5rem; + margin: 0 0 1.5rem; + background: rgba(15, 23, 42, 0.85); +} + +legend { + font-size: 1rem; + font-weight: 700; + color: #d8b4fe; + padding: 0 0.75rem; +} + +label { + display: inline-block; + margin: 0.4rem 0 0.35rem; + font-size: 0.95rem; + color: #cbd5e1; +} + +input[type="text"], +input[type="email"], +input[type="tel"], +select { + width: 100%; + padding: 0.95rem 1rem; + margin-bottom: 1rem; + font-size: 1rem; + color: #f8fafc; + background: #111827; + border: 1px solid rgba(148, 163, 184, 0.18); + border-radius: 16px; + transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="tel"]:focus, +select:focus { + outline: none; + border-color: var(--accent-strong); + box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); + transform: translateY(-1px); +} + +input::placeholder { + color: var(--muted); +} + +.styled-select { + appearance: none; + background-image: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%), + radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 18%); + background-position: right 1rem center, left top; + background-repeat: no-repeat; + padding-right: 2.5rem; +} + +.styled-checkbox, +.styled-radio { + appearance: none; + margin-right: 0.75rem; + width: 1.35rem; + height: 1.35rem; + border: 2px solid rgba(148, 163, 184, 0.35); + border-radius: 0.5rem; + background: #111827; + vertical-align: middle; + position: relative; + cursor: pointer; + transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease; +} + +.styled-checkbox:hover, +.styled-radio:hover { + transform: translateY(-1px); +} + +.styled-checkbox:checked { + background: linear-gradient(135deg, #8b5cf6, #06b6d4); + border-color: transparent; +} + +.styled-checkbox:checked::after { + content: "\2713"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -52%); + font-size: 1rem; + color: #ffffff; +} + +.styled-radio { + border-radius: 50%; +} + +.styled-radio:checked { + background: radial-gradient(circle at center, #f8fafc 0%, #8b5cf6 55%, #06b6d4 100%); + border-color: transparent; +} + +.styled-radio:checked::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + transform: translate(-50%, -50%); + background: #020617; +} + +.submit-button { + display: inline-flex; + justify-content: center; + align-items: center; + width: 100%; + max-width: 260px; + padding: 1rem 1.2rem; + font-size: 1rem; + font-weight: 700; + color: #ffffff; + background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); + border: none; + border-radius: 999px; + cursor: pointer; + box-shadow: 0 16px 28px rgba(139, 92, 246, 0.22); + transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; +} + +.submit-button:hover { + transform: translateY(-2px); + box-shadow: 0 20px 30px rgba(139, 92, 246, 0.28); +} + +.submit-button:focus-visible { + outline: 3px solid rgba(124, 58, 237, 0.35); +} + +@media (max-width: 560px) { + body { + padding: 1rem; + } + + form { + padding: 1.4rem; + } + + fieldset { + padding: 1.2rem 1rem 1rem; + } +} diff --git a/web/13/eigene_loesungen/Aufgabe_02.html b/web/13/eigene_loesungen/Aufgabe_02.html new file mode 100644 index 0000000..0beec74 --- /dev/null +++ b/web/13/eigene_loesungen/Aufgabe_02.html @@ -0,0 +1,73 @@ + + + + + + + + + + Workshop-Anmeldung + + + +

Workshop-Anmeldung

+
+
+ Persönliche Angaben: +
+
+ +
+
+ +
+
+ +
+

+
+ +
+ Kursauswahl: +
+

+ +
+
+
+ +
+ Zusätzliche Optionen: + +
+ + +
+ + +
+
+ +
+ Teilnahmeformat: + Format wählen:
+ +
+ + +
+
+
+ +
+ + + \ No newline at end of file