From 6303358521deb87eb1df98e78392d7940ca4083a Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 22:22:00 +0100 Subject: [PATCH] feat: hide Run button, update LibreTECH branding, improve welcome lessons - Hide Run button (live preview is stable) - Update all references from librete.ch to LibreTECH - Add context to repo links (Gitea Source, GitHub Mirror) - Fix welcome lesson redundant text - Slow down CRISPY animation to 8s - Remove editor-tools margin-right --- lessons/00-welcome.json | 18 ++++----- lessons/de/00-welcome.json | 18 ++++----- lessons/de/06-transitions-animations.json | 33 +++++++++++++--- src/app.js | 2 +- src/i18n.js | 4 +- src/index.html | 31 ++++++++------- src/main.css | 47 ++++++++++++++++++++++- 7 files changed, 109 insertions(+), 44 deletions(-) diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 187d566..39914df 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -27,20 +27,20 @@ }, { "id": "get-started", - "title": "Get Started!", - "description": "You're ready! Open the menu (☰) to explore all modules.

Recommended learning path:
1. HTML Block & Inline - Understand container vs inline elements
2. HTML Forms - Build interactive forms with validation
3. CSS Selectors - Target elements precisely
4. CSS Box Model - Master padding, margin, borders
5. CSS Flexbox - Create flexible layouts
6. CSS Animations - Add motion and transitions

Tips:
• Use Show Expected to see the target result
• Your progress is saved automatically
• Try Emmet in HTML mode: ul>li*3 + Tab

Open Source:
• GitHub · Gitea
• Made by librete.ch · LinkedIn", - "task": "Let's go!", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

こんにちは世界!

Привет мир!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 16px; } p { margin: 8px 0; padding: 8px 16px; border-radius: 8px; font-weight: 600; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.4em; } p:nth-child(2) { background: #dcfce7; color: #166534; font-size: 1.2em; } p:nth-child(3) { background: #dbeafe; color: #1e40af; font-size: 1.1em; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; font-size: 1.3em; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; font-size: 1.1em; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; }", + "title": "Good Luck!", + "description": "You're ready! Open the menu (☰) to explore all modules.

Recommended learning path:
1. HTML Block & Inline - Understand container vs inline elements
2. HTML Forms - Build interactive forms with validation
3. CSS Selectors - Target elements precisely
4. CSS Box Model - Master padding, margin, borders
5. CSS Flexbox - Create flexible layouts
6. CSS Animations - Add motion and transitions

Tips:
• Use Show Expected to see the target result
• Your progress is saved automatically
• Try Emmet in HTML mode: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Made by LibreTECH · Michael Czechowski", + "task": "Click Next to continue", + "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

こんにちは世界!

\n

Привет мир!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

こんにちは世界!

\n

Привет мир!

\n

مرحبا بالعالم!

", + "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", + "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", "previewContainer": "preview-area", "validations": [ { "type": "contains", - "value": "go", - "message": "Write 'Let's go!'" + "value": "Hello", + "message": "Click Next to continue" } ] } diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index ac0ec15..1a3ceab 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -27,20 +27,20 @@ }, { "id": "get-started", - "title": "Los geht's!", - "description": "Du bist bereit! Öffne das Menü (☰) um alle Module zu erkunden.

Empfohlener Lernpfad:
1. HTML Block & Inline - Container vs Inline-Elemente verstehen
2. HTML Formulare - Interaktive Formulare mit Validierung erstellen
3. CSS Selektoren - Elemente präzise ansprechen
4. CSS Box-Model - Padding, Margin, Borders meistern
5. CSS Flexbox - Flexible Layouts erstellen
6. CSS Animationen - Bewegung und Übergänge hinzufügen

Tipps:
• Nutze Lösung einblenden um das Zielergebnis zu sehen
• Dein Fortschritt wird automatisch gespeichert
• Probiere Emmet im HTML-Modus: ul>li*3 + Tab

Open Source:
• GitHub · Gitea
• Entwickelt von librete.ch · LinkedIn", - "task": "Los geht's!", - "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

こんにちは世界!

Привет мир!

مرحبا بالعالم!

", - "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 16px; } p { margin: 8px 0; padding: 8px 16px; border-radius: 8px; font-weight: 600; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.4em; } p:nth-child(2) { background: #dcfce7; color: #166534; font-size: 1.2em; } p:nth-child(3) { background: #dbeafe; color: #1e40af; font-size: 1.1em; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; font-size: 1.3em; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; font-size: 1.1em; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; }", + "title": "Viel Erfolg!", + "description": "Du bist bereit! Öffne das Menü (☰) um alle Module zu erkunden.

Empfohlener Lernpfad:
1. HTML Block & Inline - Container vs Inline-Elemente verstehen
2. HTML Formulare - Interaktive Formulare mit Validierung erstellen
3. CSS Selektoren - Elemente präzise ansprechen
4. CSS Box-Model - Padding, Margin, Borders meistern
5. CSS Flexbox - Flexible Layouts erstellen
6. CSS Animationen - Bewegung und Übergänge hinzufügen

Tipps:
• Nutze Lösung einblenden um das Zielergebnis zu sehen
• Dein Fortschritt wird automatisch gespeichert
• Probiere Emmet im HTML-Modus: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Entwickelt von LibreTECH · Michael Czechowski", + "task": "Klicke auf Weiter", + "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", + "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 12px; } p { margin: 6px 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.95em; } p:nth-child(1) { background: #fef3c7; color: #92400e; font-size: 1.2em; } p:nth-child(2) { background: #dcfce7; color: #166534; } p:nth-child(3) { background: #dbeafe; color: #1e40af; } p:nth-child(4) { background: #fce7f3; color: #9d174d; } p:nth-child(5) { background: #e0e7ff; color: #4338ca; } p:nth-child(6) { background: #fef9c3; color: #854d0e; } p:nth-child(7) { background: #fee2e2; color: #991b1b; } p:nth-child(8) { background: #f3e8ff; color: #7c3aed; } p:nth-child(9) { background: #ccfbf1; color: #0f766e; } p:nth-child(10) { background: #fae8ff; color: #86198f; } p:nth-child(11) { background: #fef3c7; color: #b45309; } p:nth-child(12) { background: #d1fae5; color: #047857; }", "sandboxCSS": "", - "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

こんにちは世界!

\n

Привет мир!

\n

مرحبا بالعالم!

", - "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

こんにちは世界!

\n

Привет мир!

\n

مرحبا بالعالم!

", + "initialCode": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", + "solution": "

Hello World! 🌍

\n

Hallo Welt!

\n

Bonjour le monde!

\n

¡Hola Mundo!

\n

Ciao Mondo!

\n

Olá Mundo!

\n

こんにちは世界!

\n

你好世界!

\n

안녕 세상!

\n

Привет мир!

\n

שלום עולם!

\n

مرحبا بالعالم!

", "previewContainer": "preview-area", "validations": [ { "type": "contains", - "value": "geht", - "message": "Schreibe 'Los geht's!'" + "value": "Hello", + "message": "Klicke auf Weiter" } ] } diff --git a/lessons/de/06-transitions-animations.json b/lessons/de/06-transitions-animations.json index 80c7976..dd7c3a4 100644 --- a/lessons/de/06-transitions-animations.json +++ b/lessons/de/06-transitions-animations.json @@ -18,7 +18,12 @@ "codeSuffix": "}", "previewContainer": "preview-area", "validations": [ - { "type": "contains", "value": "transition", "message": "Verwende die transition Eigenschaft", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "transition", + "message": "Verwende die transition Eigenschaft", + "options": { "caseSensitive": false } + }, { "type": "regex", "value": "transition:\\s*background-color\\s*0\\.3s", @@ -66,14 +71,24 @@ "codeSuffix": "}\n.ball { }", "previewContainer": "preview-area", "validations": [ - { "type": "contains", "value": "@keyframes bounce", "message": "Definiere @keyframes bounce", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "@keyframes bounce", + "message": "Definiere @keyframes bounce", + "options": { "caseSensitive": false } + }, { "type": "regex", "value": "50%.*transform: translateY\\(-20px\\)", "message": "Bei 50%, setze transform: translateY(-20px)", "options": { "caseSensitive": false } }, - { "type": "contains", "value": "animation", "message": "Verwende animation Eigenschaft auf .ball", "options": { "caseSensitive": false } }, + { + "type": "contains", + "value": "animation", + "message": "Verwende animation Eigenschaft auf .ball", + "options": { "caseSensitive": false } + }, { "type": "regex", "value": "animation:.*bounce.*1s.*infinite", @@ -113,8 +128,16 @@ "message": "Verwende animation-fill-mode", "options": { "caseSensitive": false } }, - { "type": "property_value", "value": { "property": "animation-duration", "expected": "2s" }, "message": "Setze animation-duration: 2s" }, - { "type": "property_value", "value": { "property": "animation-delay", "expected": "1s" }, "message": "Setze animation-delay: 1s" }, + { + "type": "property_value", + "value": { "property": "animation-duration", "expected": "2s" }, + "message": "Setze animation-duration: 2s" + }, + { + "type": "property_value", + "value": { "property": "animation-delay", "expected": "1s" }, + "message": "Setze animation-delay: 1s" + }, { "type": "property_value", "value": { "property": "animation-iteration-count", "expected": "2" }, diff --git a/src/app.js b/src/app.js index 72d34ea..00214dd 100644 --- a/src/app.js +++ b/src/app.js @@ -603,7 +603,7 @@ function runCode() { elements.previewWrapper?.classList.add("matched"); setTimeout(() => { elements.previewWrapper?.classList.remove("matched"); - }, 5000); + }, 10000); updateNavigationButtons(); updateProgressDisplay(); diff --git a/src/i18n.js b/src/i18n.js index 71f0acc..47cd041 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -83,7 +83,7 @@ const translations = { // Contact contactTitle: "Contact & Links", - contactText: "Code Crispies is developed by librete.ch", + contactText: "Code Crispies is developed by LibreTECH", // Reset dialog resetDialogTitle: "Reset Progress", @@ -182,7 +182,7 @@ const translations = { // Contact contactTitle: "Kontakt & Links", - contactText: "Code Crispies wird von librete.ch entwickelt", + contactText: "Code Crispies wird von LibreTECH entwickelt", // Reset dialog resetDialogTitle: "Fortschritt zurücksetzen", diff --git a/src/index.html b/src/index.html index 815392e..97e13d2 100644 --- a/src/index.html +++ b/src/index.html @@ -120,8 +120,9 @@ @@ -163,7 +164,6 @@

Keyboard Shortcuts

@@ -178,24 +178,23 @@

More Projects

- + +

Contact & Links

-

Code Crispies is developed by librete.ch

+

Code Crispies is developed by LibreTECH

diff --git a/src/main.css b/src/main.css index 50967e1..0355b51 100644 --- a/src/main.css +++ b/src/main.css @@ -595,7 +595,7 @@ code, kbd { border-radius: var(--border-radius-lg); font-weight: bold; font-size: 1.1rem; - animation: dvd-bounce 4s ease-in-out infinite; + animation: dvd-bounce 8s ease-in-out infinite; z-index: 10; white-space: nowrap; } @@ -914,7 +914,6 @@ button.lesson-list-item { .editor-tools { display: flex; gap: 4px; - margin-right: var(--spacing-sm); } .btn-ghost { @@ -954,6 +953,11 @@ button.lesson-list-item { border-color: var(--primary-dark); } +/* Hide Run button - live preview is stable */ +#run-btn { + display: none; +} + /* ================= TOGGLE SWITCH ================= */ .toggle-switch { display: flex; @@ -1105,6 +1109,45 @@ input:checked + .toggle-slider::before { margin-top: var(--spacing-lg); } +/* Project Cards in Help Dialog */ +.project-cards { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-md); +} + +.project-card { + display: block; + padding: var(--spacing-md); + background: var(--primary-bg-light); + border-radius: var(--border-radius-md); + border: 1px solid var(--primary-bg-medium); + text-decoration: none; + color: var(--text-color); + transition: all 0.2s ease; +} + +.project-card:hover { + background: var(--primary-bg-medium); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(94, 75, 139, 0.15); +} + +.project-card strong { + display: block; + color: var(--primary-color); + font-size: 1rem; + margin-bottom: 4px; +} + +.project-card span { + font-size: 0.9rem; + color: var(--light-text); + line-height: 1.4; +} + /* ================= FOOTER ================= */ .app-footer { padding: var(--spacing-md);