commit 9e9bf2ec5e2009d514c91da0cb4378d27b06c424 Author: Pbt3h24adi Date: Wed Nov 26 14:11:06 2025 +0100 Grundgerüst diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..a1595cb --- /dev/null +++ b/Index.html @@ -0,0 +1,28 @@ + + + + + + Hasen-Simulator + + + + + + +
+ Hasen-Simulator des Zoo Herr Richtigmacher +
+ +
+
Monat: 1
+ + + +
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6e8fc97 --- /dev/null +++ b/script.js @@ -0,0 +1,58 @@ + +let currentMonth = 1; + + +function getFibonacci(n) { + if (n <= 2) return 1; + + let a = 1, b = 1; + + for (let i = 3; i <= n; i++) { + let next = a + b; + a = b; + b = next; + } + + return b; +} + + +function showMonth(month) { + document.getElementById("monthDisplay").textContent = "Monat: " + month; +} + + +function clearRabbits() { + document.getElementById("rabbitContainer").innerHTML = ""; +} + + +function createRabbitPair() { + const pair = document.createElement("div"); + pair.classList.add("rabbit"); + pair.textContent = "🐇🐇"; + return pair; +} + + +function showRabbits(count) { + clearRabbits(); + const container = document.getElementById("rabbitContainer"); + + for (let i = 0; i < count; i++) { + container.appendChild(createRabbitPair()); + } +} + + +function nextMonth() { + currentMonth++; + showMonth(currentMonth); + + const rabbitCount = getFibonacci(currentMonth); + showRabbits(rabbitCount); +} + + +document.getElementById("nextMonthButton") + .addEventListener("click", nextMonth); diff --git a/style.css b/style.css new file mode 100644 index 0000000..59521d1 --- /dev/null +++ b/style.css @@ -0,0 +1,78 @@ +body { + margin: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #f4f8ff, #d9eaff); + color: #333; +} + +header { + background: #4a85ff; + color: white; + padding: 20px 40px; + font-size: 26px; + font-weight: bold; + text-align: center; + box-shadow: 0 3px 8px rgba(0,0,0,0.2); +} + +main { + max-width: 900px; + margin: 40px auto; + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0,0,0,0.15); +} + +#monthDisplay { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + text-align: center; +} + +button { + display: block; + margin: 0 auto; + padding: 15px 30px; + font-size: 18px; + background: #4a85ff; + color: white; + border: none; + border-radius: 10px; + cursor: pointer; + transition: 0.2s; + box-shadow: 0 4px 10px rgba(0,0,0,0.2); +} + +button:hover { + background: #3467d8; + transform: scale(1.03); +} + +button:active { + transform: scale(0.98); +} + +#rabbitContainer { + margin-top: 30px; + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; + padding: 10px; +} + +.rabbit { + font-size: 36px; + background: #eef4ff; + padding: 10px 14px; + border-radius: 12px; + box-shadow: 0 3px 8px rgba(0,0,0,0.15); + user-select: none; + transition: transform 0.15s; +} + +.rabbit:hover { + transform: scale(1.15) rotate(3deg); +}