Wuuuuhuuu 💖 – hier ist dein `schnippsi_ui_baukasten.md`:
````markdown
# 🌈 Schnippsi UI Baukasten
## 🎨 Ziel
Ein kindgerechtes, barrierefreies und responsives Web-Template mit interaktivem Element, umgesetzt im Crumbforest-Kuchen (CakePHP-Integration).
---
## 🧁 Grundstruktur
**HTML-Datei (index.html):**
```html
Mein erstes Template – Tag-Nacht-Umschalter
Hallo, Sonnenschein! ☀️
🌙 Nachtmodus aktivieren
Willkommen in der freundlichen Welt von Schnippsi! 🌈
````
---
## 🎨 CSS-Datei (`styles_schnippsi.css`):
```css
body {
font-family: sans-serif;
margin: 0;
padding: 2rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
body.light {
background-color: #fffbea;
color: #333;
}
body.dark {
background-color: #1e1e2f;
color: #f1f1f1;
}
button {
background: #ffd700;
border: none;
padding: 1rem 1.5rem;
font-size: 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #ffcc00;
}
body.dark button {
background: #444;
color: #fff;
}
body.dark button:hover {
background: #666;
}
```
---
## ✨ JavaScript-Datei (`script_schnippsi.js`):
```javascript
const toggleButton = document.getElementById('toggleTheme');
toggleButton.addEventListener('click', () => {
const body = document.body;
const isLight = body.classList.contains('light');
body.classList.toggle('light', !isLight);
body.classList.toggle('dark', isLight);
toggleButton.textContent = isLight
? '☀️ Tagmodus aktivieren'
: '🌙 Nachtmodus aktivieren';
});
```
---
## 📦 Integration im Crumbforest
✅ Das Template funktioniert im Browser
✅ Integration im CakePHP-Projekt ("im Kuchen") erfolgreich
✅ Modular erweiterbar mit Templatus (HTML), PepperPHP (Backend) & Schnippsi (UI/UX)
---
## 🌟 Nächste Ausbaustufen (optional)
* Avatar-Integration
* Blockmenü
* Blockly-Zone für visuelle Steuerung
* Interaktive Spielzeugkiste (JSON-gesteuerte Komponenten)
* Integration von `aria-live` Feedbacks
---
**Schnippsi sagt:**
> „Wir gestalten Interfaces, in denen Kinder tanzen und Systeme leuchten dürfen.“ ✨
---
```
Möchtest du daraus auch eine PDF oder gleich ein neues Frontend-Modul für den Missionsstart bauen?
```
---
### 🧩 Modul 1: Die Spielzeuge anzeigen
Wir starten mit HTML und CSS, um die Spielzeuge hübsch darzustellen:
#### 🧸 Templatus (HTML)
```html
Spielzeuge
In den Korb legen
In den Korb legen
In den Korb legen
```
#### 🎨 CSS (Schnippsis Stil)
```css
.toy-list, .basket-list {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.toy, .basket-item {
border: 2px solid #ccc;
border-radius: 10px;
padding: 1rem;
text-align: center;
background-color: #fefefe;
width: 150px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
button {
margin-top: 0.5rem;
padding: 0.5rem;
font-size: 1rem;
background-color: #88c0d0;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover,
button:focus {
background-color: #5e81ac;
outline: none;
}
```
---
### 🤖 JavaScript (Schnippsis Zauber)
```js
document.addEventListener('DOMContentLoaded', () => {
const basket = document.getElementById('basket');
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', () => {
const toyItem = button.closest('.toy');
const toyName = toyItem.dataset.toy;
const toyImage = toyItem.querySelector('img').src;
const toyAlt = toyItem.querySelector('img').alt;
// Neues Listenelement für den Korb
const basketItem = document.createElement('li');
basketItem.className = 'basket-item';
basketItem.innerHTML = `
${toyName}
Aus dem Korb nehmen
`;
basket.appendChild(basketItem);
// Entfernen-Button aktivieren
basketItem.querySelector('.remove-from-cart').addEventListener('click', () => {
basket.removeChild(basketItem);
});
});
});
});
```
---
### ✅ Barrierefreiheit & Klarheit
- **`aria-labelledby`** verbindet die Überschriften mit den Abschnitten.
- **`aria-live="polite"`** sorgt dafür, dass Screenreader neue Spielzeuge im Korb ansagen.
- **Alt-Texte** sind vorhanden.
- **Buttons** sind klar beschriftet.
---
### 🧠 Kindgerecht erklärt?
Natürlich! Wenn du magst, erkläre ich den Code gerne wie in einer Geschichte für Kinder. Sag einfach:
👉 *„Schnippsi, erklär’s mir wie einem Kind.“*
---
Lust, den Korb noch zu verzieren? Vielleicht mit einer Animation beim Hineinlegen? Oder möchtest du den Korb speichern (PepperPHP kann helfen!)? Sag mir einfach, wie wir weiterschnippseln wollen! ✂️💖 
