feat: restructure lesson files and update success indicators

2025-05-14 00:51:10 +02:00
parent 910529a6c3
commit 9249f122a4
17 changed files with 990 additions and 51 deletions
--- a/src/app.js
+++ b/src/app.js
@@ -154,7 +154,9 @@ function selectModule(moduleId) {
 function resetSuccessIndicators() {
 	elements.codeEditor.classList.remove("success-highlight");
 	elements.lessonTitle.classList.remove("success-text");
-	elements.runBtn.classList.remove("success");
+	elements.runBtn.classList.remove("hidden");
+	elements.nextBtn.classList.remove("success");
+	elements.taskInstruction.classList.remove("success-instruction");
 }

 // Load the current lesson
@@ -264,7 +266,9 @@ function runCode() {
 		// Add success visual indicators
 		elements.codeEditor.classList.add("success-highlight");
 		elements.lessonTitle.classList.add("success-text");
-		elements.runBtn.classList.add("success");
+		elements.runBtn.classList.add("hidden");
+		elements.nextBtn.classList.add("success");
+		elements.taskInstruction.classList.add("success-instruction");

 		// Apply the code to see the result
 		lessonEngine.applyUserCode(userCode);
--- a/src/config/lessons.js
+++ b/src/config/lessons.js
@@ -3,13 +3,28 @@
 */

 // Import lesson configs
-import flexboxConfig from "../../lessons/flexbox.json";
-import gridConfig from "../../lessons/grid.json";
-import basicsConfig from "../../lessons/basics.json";
-import tailwindConfig from "../../lessons/tailwindcss.json";
+import basicsConfig from "../../lessons/00-basics.json";
+import boxModelConfig from "../../lessons/01-box-model.json";
+import selectorsConfig from "../../lessons/02-selectors.json";
+import colorsConfig from "../../lessons/03-colors.json";
+import typographyConfig from "../../lessons/04-typography.json";
+import unitVariablesConfig from "../../lessons/05-units-variables.json";
+import transitionsAnimationsConfig from "../../lessons/06-transitions-animations.json";
+import layoutConfig from "../../lessons/07-layouts.json";
+import responsiveConfig from "../../lessons/08-responsive.json";

 // Module store
-const moduleStore = [basicsConfig, flexboxConfig, gridConfig, tailwindConfig];
+const moduleStore = [
+	basicsConfig,
+	boxModelConfig,
+	selectorsConfig,
+	colorsConfig,
+	typographyConfig,
+	unitVariablesConfig,
+	transitionsAnimationsConfig,
+	layoutConfig,
+	responsiveConfig
+];

 /**
 * Load all available modules
--- a/src/helpers/renderer.js
+++ b/src/helpers/renderer.js
@@ -13,7 +13,7 @@ let feedbackElement = null;
 */
 export function renderModuleList(container, modules, onSelectModule) {
 	// Clear the container
-	container.innerHTML = "<h3>Modules</h3>";
+	container.innerHTML = "<h3>CSS Lessons</h3>";

 	// Create list items for each module
 	modules.forEach((module) => {
@@ -86,16 +86,18 @@ export function showFeedback(isSuccess, message) {
 	feedbackElement.textContent = message;

 	// Find where to insert the feedback
-	const insertAfter = document.querySelector(".code-editor");
+	const insertAfter = document.querySelector(".editor-content");
 	if (insertAfter && insertAfter.parentNode) {
 		insertAfter.parentNode.insertBefore(feedbackElement, insertAfter.nextSibling);
 	}

-	// Auto-remove feedback after some time if successful
-	if (isSuccess) {
+	if (!isSuccess) {
 		setTimeout(() => {
-			clearFeedback();
-		}, 5000);
+			if (feedbackElement && feedbackElement.parentNode) {
+				feedbackElement.parentNode.removeChild(feedbackElement);
+			}
+			feedbackElement = null;
+		}, 3_000); // Remove feedback after 3 seconds
 	}
 }

--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,8 @@
 		<div class="app-container">
 			<header class="header">
 				<div class="logo">
-					<h1>🏵️ CODE CRISPIES</h1>
+					<img src="./bar_1680535.png" width="32" alt="CODE CRISPIES Logo" />
+					<h1>CODE<br /><span>CRISPIES</span></h1>
 				</div>
 				<nav class="main-nav">
 					<ul>
--- a/src/main.css
+++ b/src/main.css
@@ -1,14 +1,18 @@
 :root {
-	--primary-color: #4a6bfd;
-	--primary-light: #7a93fe;
-	--primary-dark: #244ae8;
+	--primary-color: #dd3b59;
+	--primary-light: #ff5f7f;
+	--primary-dark: #af2740;
 	--secondary-color: #ff7e5f;
-	--text-color: #2c3e50;
+	--text-color: #13181c;
 	--light-text: #777;
 	--bg-color: #f9f9f9;
 	--panel-bg: #ffffff;
 	--border-color: #e0e0e0;
-	--success-color: #2ecc71;
+	--info-color: #7a93fe;
+	--info-color-dark: #4a6bfd;
+	--success-color: #24b664;
+	--success-color-dark: #1e8f4d;
+	--success-color-light: #a3e6b4;
 	--error-color: #e74c3c;
 	--font-main: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 	--shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
@@ -46,10 +50,21 @@ body {
 	z-index: 100;
 }

+.logo {
+	display: flex;
+	align-items: center;
+	gap: 0.6rem;
+}
+
 .logo h1 {
 	color: var(--text-color);
-	font-size: 1.7rem;
-	font-weight: 700;
+	font-size: 1.1rem;
+	line-height: 0.8;
+	font-weight: 900;
+}
+
+.logo h1 span {
+	color: var(--primary-color);
 }

 .main-nav ul {
@@ -87,6 +102,19 @@ body {
 	margin-bottom: 2rem;
 }

+.module-list h3 {
+	margin-bottom: 1rem;
+	/*color: var(--light-text);*/
+	font-size: 0.7rem;
+	letter-spacing: 1px;
+	font-weight: 800;
+	padding: 0.5rem 1rem;
+	text-transform: uppercase;
+	border-left: 4px solid var(--primary-color);
+	border-radius: 2px;
+	/*background-color: rgba(0, 0, 0, 0.05);*/
+}
+
 .module-list-item {
 	padding: 0.75rem 1rem;
 	margin-bottom: 0.5rem;
@@ -96,13 +124,12 @@ body {
 }

 .module-list-item:hover {
-	background-color: rgba(74, 107, 253, 0.05);
+	background-color: rgba(253, 74, 149, 0.05);
 }

 .module-list-item.active {
-	background-color: rgba(74, 107, 253, 0.1);
+	background-color: rgba(253, 74, 149, 0.1);
 	color: var(--primary-color);
-	font-weight: 600;
 }

 /* Lesson Container */
@@ -170,13 +197,14 @@ body {
 }

 .task-instruction {
-	background-color: rgba(74, 107, 253, 0.05);
+	background-color: rgba(253, 74, 122, 0.05);
 	border-left: 4px solid var(--primary-color);
 	padding: 1rem;
 	border-radius: 4px;
 }

 .code-editor {
+	position: relative;
 	border: 1px solid var(--border-color);
 	border-radius: 6px;
 	overflow: hidden;
@@ -192,11 +220,11 @@ body {
 	color: var(--light-text);
 	border-bottom: 1px solid var(--border-color);
 }
-
+/*.target{color:blue}*/
 .editor-content {
 	background-color: #1e1e1e;
 	color: #d4d4d4;
-	padding: 1rem;
+	padding: 1rem 1rem 4rem;
 	overflow-y: auto;
 	font-family: "JetBrains Mono", "Fira Code", monospace;
 	font-size: 14px;
@@ -271,7 +299,10 @@ code {
 	cursor: pointer;
 	font-family: var(--font-main);
 	font-size: 0.9rem;
-	transition: all 0.2s;
+	transition:
+		background,
+		color 0.2s;
+	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 .btn:hover {
@@ -324,6 +355,26 @@ code {
 	padding: 1.5rem;
 }

+.modal-content ol,
+.modal-content ul {
+	margin-left: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.modal-content h3 {
+	margin-bottom: 0.2rem;
+	font-size: 1.2rem;
+}
+
+.modal-content h4 {
+	margin-bottom: 0.1rem;
+	font-size: 1rem;
+}
+
+.modal-content p {
+	margin-bottom: 1rem;
+}
+
 .modal-close {
 	background: none;
 	border: none;
@@ -338,30 +389,34 @@ code {

 /* Feedback */
 .feedback-success {
-	color: var(--success-color);
-	font-weight: 500;
-	margin-top: 1rem;
+	position: absolute;
+	bottom: 0.8rem;
+	right: 0.8rem;
+	color: var(--success-color-light);
+	font-weight: 800;
 	padding: 0.5rem;
 	border-radius: 4px;
-	background-color: rgba(46, 204, 113, 0.1);
+	background-color: rgba(46, 204, 113, 0.4);
 	border-left: 3px solid var(--success-color);
+	transition: all 0.3s ease;
 }

-.feedback-error {
-	color: var(--error-color);
-	font-weight: 500;
-	margin-top: 1rem;
-	padding: 0.5rem;
-	border-radius: 4px;
-	background-color: rgba(231, 76, 60, 0.1);
-	border-left: 3px solid var(--error-color);
-}
+/*.feedback-error {*/
+/*	color: var(--error-color);*/
+/*	font-weight: 500;*/
+/*	margin-top: 1rem;*/
+/*	padding: 0.5rem;*/
+/*	border-radius: 4px;*/
+/*	background-color: rgba(231, 76, 60, 0.1);*/
+/*	border-left: 3px solid var(--error-color);*/
+/*}*/

 /* Add these styles to your main.css file */

 /* Success highlight for lesson container */
 .success-highlight {
-	box-shadow: 0 0 0 3px var(--success-color);
+	/*box-shadow: 0 0 0 3px var(--success-color);*/
+	border-left: 4px solid var(--success-color);
 	transition: all 0.3s ease;
 }

@@ -371,6 +426,13 @@ code {
 	transition: color 0.3s ease;
 }

+.success-instruction {
+	background-color: rgba(46, 204, 113, 0.1);
+	border-left: 4px solid var(--success-color);
+	padding: 1rem;
+	border-radius: 4px;
+}
+
 .success,
 .success:hover,
 .success:focus {
@@ -380,13 +442,15 @@ code {

 /* Friendlier error feedback */
 .feedback-error {
-	color: #996633;
+	position: absolute;
+	bottom: 0.8rem;
+	right: 0.8rem;
+	color: var(--text-color);
 	font-weight: 500;
-	margin-top: 1rem;
 	padding: 0.5rem;
 	border-radius: 4px;
-	background-color: rgba(255, 248, 230, 0.5);
-	border-left: 3px solid #cc9944;
+	background-color: rgba(244, 244, 244, 0.8);
+	border-left: 3px solid white;
 }

 /* Module selector button with progress */