Files
crumbmissions/missions/challenges/schnippsi_ui_design.sh
2025-12-23 20:52:00 +01:00

71 lines
2.5 KiB
Bash
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

#!/bin/bash
# 🖌️ Design-Challenge: Dein Zeichen im Wald
# Eine Mission über Struktur, Stil und Gefühl.
# Waldwächter laden
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
# Relativer Pfad zur Lib, da wir in missions/challenges/ sind (2 Ebenen tiefer)
LIB_PATH="${SCRIPT_DIR}/../../lib/waldwaechter.sh"
if [ -f "$LIB_PATH" ]; then
source "$LIB_PATH"
else
# Fallback für direkte Ausführung
echo "⚠️ Waldwächter Lib nicht gefunden. Nutze Standard-Ausgabe."
function templatus() { echo "🏛️ Templatus: $1"; }
function schnippsi() { echo "✂️ Schnippsi: $1"; }
function pepperphp() { echo "🌶️ Pepper: $1"; }
fi
clear
cat << "EOF"
🎨 DEIN ZEICHEN IM WALD 🎨
Eine Mission für HTML, CSS und das gute Gefühl.
EOF
echo ""
sleep 1
echo "🏛️ Templatus betritt die Lichtung..."
echo ""
templatus "Sei gegrüßt, Architekt. Der Wald braucht Struktur. Ein Baum ist nicht nur Holz, er ist ein Gerüst (DOM). Wir brauchen ein stabiles Fundament."
templatus "Deine Aufgabe: Erstelle ein HTML-Dokument. Ein 'Blatt' im Wind des Browsers."
echo ""
read -p " (Drücke ENTER um das Gerüst zu bauen...)"
echo ""
echo "✂️ Schnippsi schwebt herein..."
echo ""
schnippsi "Struktur? Pfff, Templatus, du bist so trocken wie altes Papier! Ein Blatt muss LEBEN!"
schnippsi "Es braucht Farbe, Licht und Schatten. Wir wollen Glassmorphism durchscheinend wie Tau auf einem Blatt. Und es muss auf jedem Gerät gut aussehen (Responsive). Das ist Ästhetik!"
echo ""
read -p " (Drücke ENTER für den Style...)"
echo ""
echo "🌶️ PepperPHP flitzt vorbei..."
echo ""
pepperphp "Und es muss was TUN! Ein statisches Blatt ist langweilig. Wenn man draufklickt, muss ein MODAL aufgehen! 'onClick', 'classList.add', Action! Wir wollen eine Nachricht hinterlassen."
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""
echo "📋 DEINE MISSION:"
echo "1. Öffne im Browser: crumbblocks/schnippsi_ui.html"
echo "2. Betrachte das Werk. Es ist... noch leer (oder?)"
echo "3. Dein Ziel: Eine mittige Box ('Das Zeichen')."
echo "4. Klick -> Modal -> Nachricht eingeben -> Senden."
echo "5. Das Ergebnis bringst du zurück zur Crew."
echo ""
read -p "🚀 Bereit zum Coden? (j/n) " READY
if [[ "$READY" == "j" ]]; then
echo ""
echo "Dann los! Starte den Server:"
echo "./start_crumbblocks.sh"
echo ""
echo "Und bearbeite die Datei: crumbblocks/schnippsi_ui.html"
else
echo "Lass dir Zeit. Gutes Design braucht Muße."
fi