public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: hide Run button, update LibreTECH branding, improve welcome lessons

Browse Source 
- 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
This commit is contained in:
Michael Czechowski
2025-12-30 22:22:00 +01:00
parent c7afc1e4ce
commit 11bcdc9c62
7 changed files with 109 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.js
View File

@@ -603,7 +603,7 @@ function runCode() {
elements.previewWrapper?.classList.add("matched");
setTimeout(() => {
elements.previewWrapper?.classList.remove("matched");
}, 5000);
}, 10000);
updateNavigationButtons();
updateProgressDisplay();

4
src/i18n.js
View File

@@ -83,7 +83,7 @@ const translations = {
// Contact
contactTitle: "Contact & Links",
contactText: "Code Crispies is developed by librete.ch",
contactText: "Code Crispies is developed by <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a>",
// 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 <a href=\"https://librete.ch\" target=\"_blank\">LibreTECH</a> entwickelt",
// Reset dialog
resetDialogTitle: "Fortschritt zurücksetzen",

31
src/index.html
View File

@@ -120,8 +120,9 @@
<footer class="app-footer">
<span data-i18n="openSource">Open Source:</span>
<a href="https://git.librete.ch/public/code-crispies" target="_blank">Gitea</a>
<span data-i18n="by">by</span> <a href="https://librete.ch" title="librete.ch">librete.ch</a>
<a href="https://git.librete.ch/public/code-crispies" target="_blank">Gitea (Source)</a> ·
<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub (Mirror)</a>
<span data-i18n="by">by</span> <a href="https://librete.ch" title="LibreTECH">LibreTECH</a>
</footer>
</aside>
@@ -163,7 +164,6 @@
<h4 data-i18n="keyboardShortcutsTitle">Keyboard Shortcuts</h4>
<ul>
<li data-i18n-html="shortcutRun"><kbd>Ctrl+Enter</kbd> - Validate immediately</li>
<li data-i18n-html="shortcutUndo"><kbd>Ctrl+Z</kbd> - Undo</li>
<li data-i18n-html="shortcutRedo"><kbd>Ctrl+Shift+Z</kbd> - Redo</li>
</ul>
@@ -178,24 +178,23 @@
</ul>
<h4 data-i18n="moreProjectsTitle">More Projects</h4>
<ul>
<li>
<a href="https://nextlevelshit.github.io/html-over-js/" target="_blank"><strong>HTML over JS</strong></a>
<div class="project-cards">
<a href="https://nextlevelshit.github.io/html-over-js/" target="_blank" class="project-card">
<strong>HTML over JS</strong>
<span data-i18n="htmlOverJsDesc"> - Learn to leverage native HTML elements instead of custom JavaScript solutions</span>
</li>
<li>
<a href="https://nextlevelshit.github.io/web-engineering-mandala/" target="_blank"><strong>Web Engineering Mandala</strong></a>
</a>
<a href="https://nextlevelshit.github.io/web-engineering-mandala/" target="_blank" class="project-card">
<strong>Web Engineering Mandala</strong>
<span data-i18n="mandalaDesc"> - Interactive visualization of JavaScript technologies organized by complexity</span>
</li>
</ul>
</a>
</div>
<h4 data-i18n="contactTitle">Contact & Links</h4>
<p data-i18n="contactText">Code Crispies is developed by librete.ch</p>
<p data-i18n-html="contactText">Code Crispies is developed by <a href="https://librete.ch" target="_blank">LibreTECH</a></p>
<ul>
<li><a href="https://librete.ch" target="_blank">librete.ch</a></li>
<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a></li>
<li><a href="https://git.librete.ch/public/code-crispies" target="_blank">Gitea</a></li>
<li><a href="https://www.linkedin.com/in/michael-werner-czechowski" target="_blank">LinkedIn</a></li>
<li><a href="https://git.librete.ch/public/code-crispies" target="_blank">Gitea</a> – Self-hosted source repository</li>
<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a> – Public mirror</li>
<li><a href="https://www.linkedin.com/in/michael-werner-czechowski" target="_blank">LinkedIn</a> – Michael Czechowski</li>
</ul>
</div>
</dialog>

47
src/main.css
View File

@@ -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);