Crumb-Core-v.1/Wuuuuhuuu_.md at 2fd60fdfd5b2afc62a6085dcd6a2c41ac778ffbb

Files

Krümel Branko 6c38ed680b Initial commit: Crumbforest Architecture Refinement v1 (Clean)

2025-12-07 01:26:46 +01:00

5.9 KiB

Raw Blame History

Wuuuuhuuu 💖 – hier ist dein schnippsi_ui_baukasten.md:

# 🌈 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
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mein erstes Template – Tag-Nacht-Umschalter</title>
  <link rel="stylesheet" href="css/styles_schnippsi.css" />
</head>
<body class="light">
  <header>
    <h1>Hallo, Sonnenschein! ☀️</h1>
    <button id="toggleTheme" aria-label="Wechsle zwischen Tag- und Nachtmodus">
      🌙 Nachtmodus aktivieren
    </button>
  </header>

  <main>
    <p>Willkommen in der freundlichen Welt von Schnippsi! 🌈</p>
  </main>

  <script src="js/script_schnippsi.js"></script>
</body>
</html>

🎨 CSS-Datei (`styles_schnippsi.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`):

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)

<section aria-labelledby="toys-title">
  <h2 id="toys-title">Spielzeuge</h2>
  <ul class="toy-list">
    <li class="toy" data-toy="Teddybär">
      <img src="teddy.png" alt="Teddybär" />
      <button class="add-to-cart">In den Korb legen</button>
    </li>
    <li class="toy" data-toy="Ball">
      <img src="ball.png" alt="Ball" />
      <button class="add-to-cart">In den Korb legen</button>
    </li>
    <li class="toy" data-toy="Bauklötze">
      <img src="blocks.png" alt="Bauklötze" />
      <button class="add-to-cart">In den Korb legen</button>
    </li>
  </ul>
</section>

<section aria-labelledby="basket-title">
  <h2 id="basket-title">Dein Spielzeugkorb</h2>
  <ul id="basket" class="basket-list" aria-live="polite">
    <!-- Hier landen die Spielzeuge -->
  </ul>
</section>

🎨 CSS (Schnippsis Stil)

.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)

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 = `
        <img src="${toyImage}" alt="${toyAlt}" />
        <p>${toyName}</p>
        <button class="remove-from-cart">Aus dem Korb nehmen</button>
      `;

      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! ✂️💖

5.9 KiB Raw Blame History Unescape Escape

🎨 CSS-Datei (styles_schnippsi.css):

✨ JavaScript-Datei (script_schnippsi.js):