Skip to main content

New Commit: updated settings page

Repository: Hestenb62/_legacy_backup

Author: Hesten Berger

Commit Message: updated settings page

URL: https://github.com/Hestenb62/_legacy_backup/commit/b6cfb8c24cb54a03e78d22d8f9d88a23fb610b4c

Code Changes:

diff --git a/assets/css/pages/settings.css b/assets/css/pages/settings.css
index c88cb47..040810b 100644
--- a/assets/css/pages/settings.css
+++ b/assets/css/pages/settings.css
@@ -1,56 +1,152 @@
-/* assets/css/pages/settings.css */
+/* assets/css/pages/settings.css
+   Modern, Ultra-Accessible, Dynamic Theme Settings Experience
+*/
 
 @layer components {
+  /* ==========================================================================
+     1. Page Container & Hero Header
+     ========================================================================== */
+  .settings-page {
+    max-width: 1360px;
+    margin: 0 auto;
+    padding: 2rem 1.25rem 4rem;
+  }
+
   .settings-page .settings-header {
-    text-align: center;
-    margin-bottom: 2.5rem;
-    animation: rise-in 0.5s ease-out forwards;
+    margin-bottom: 2.25rem;
+    position: relative;
+    padding: 2rem 2.25rem;
+    border-radius: var(--radius-3xl);
+    background: linear-gradient(135deg, 
+      color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-surface)), 
+      color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg-surface))
+    );
+    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    animation: rise-in 0.4s ease-out forwards;
   }
 
-  @media(min-width: 768px) {
-    .settings-page .settings-header {
-      text-align: left;
-    }
+  .settings-page .settings-header::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 320px;
+    height: 320px;
+    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 25%, transparent) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .settings-page .settings-header-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.85rem;
+    border-radius: var(--radius-full);
+    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+    color: var(--color-primary);
+    font-size: 0.775rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 0.85rem;
+    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+    position: relative;
+    z-index: 1;
+  }
+
+  .settings-page .page-title {
+    font-size: 2.25rem;
+    font-weight: 800;
+    color: var(--color-text-main);
+    line-height: 1.2;
+    margin: 0 0 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    position: relative;
+    z-index: 1;
+  }
+
+  .settings-page .page-title-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--radius-xl);
+    background: var(--color-primary);
+    color: var(--color-text-inverse, #ffffff);
+    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  .settings-page .page-subtitle {
+    font-size: 1.05rem;
+    line-height: 1.6;
+    color: var(--color-text-muted);
+    margin: 0;
+    max-width: 750px;
+    position: relative;
+    z-index: 1;
   }
 
+  /* ==========================================================================
+     2. Responsive 2-to-3 Column Layout
+     ========================================================================== */
   .settings-page .settings-layout {
     display: flex;
     flex-direction: column;
     gap: 2rem;
   }
 
-  @media(min-width: 1024px) {
+  @media (min-width: 1024px) {
     .settings-page .settings-layout {
       flex-direction: row;
+      align-items: flex-start;
     }
   }
 
+  /* Navigation Sidebar */
   .settings-page .settings-sidebar {
     width: 100%;
-    animation: rise-in 0.5s ease-out forwards;
-    animation-delay: 0.1s;
+    animation: rise-in 0.4s ease-out forwards;
+    animation-delay: 0.08s;
   }
 
-  @media(min-width: 1024px) {
+  @media (min-width: 1024px) {
     .settings-page .settings-sidebar {
-      width: 25%;
+      width: 260px;
+      flex-shrink: 0;
+      position: sticky;
+      top: 5rem;
     }
   }
 
   .settings-page .settings-nav-panel {
-    position: sticky;
-    top: 6rem;
     background-color: var(--color-bg-surface);
     border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-xl);
-    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+    padding: 1.25rem 1rem;
     border: 1px solid var(--color-border);
   }
 
+  .settings-page .settings-nav-header {
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-text-muted);
+    padding: 0.5rem 0.75rem 0.75rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 0.5rem;
+  }
+
   .settings-page .settings-nav-list {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.35rem;
     list-style: none;
     padding: 0;
     margin: 0;
@@ -59,447 +155,736 @@
   .settings-page .settings-nav-link {
     display: flex;
     align-items: center;
-    padding: 0.75rem;
+    padding: 0.75rem 0.85rem;
     border-radius: var(--radius-xl);
     color: var(--color-text-main);
     font-weight: 700;
+    font-size: 0.925rem;
     text-decoration: none;
     transition: all 0.2s ease-in-out;
+    border: 1px solid transparent;
   }
 
   .settings-page .settings-nav-link:hover {
     background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    transform: translateX(4px);
+    color: var(--color-primary);
+    transform: translateX(3px);
+  }
+
+  .settings-page .settings-nav-link[aria-current="true"],
+  .settings-page .settings-nav-link.active {
+    background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-surface));
+    color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 15%, transparent);
   }
 
   .settings-page .settings-nav-icon {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 2.25rem;
+    height: 2.25rem;
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 0.75rem;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  .settings-page .settings-nav-link:hover .settings-nav-icon {
-    transform: scale(1.1);
-  }
-
-  /* Navigation theme-specific icons */
-  .settings-page .settings-nav-icon-blue {
-    background-color: #dbeafe;
-    color: #2563eb;
-  }
-  [data-theme="dark"] .settings-page .settings-nav-icon-blue,
-  [data-theme="midnight"] .settings-page .settings-nav-icon-blue {
-    background-color: rgba(37, 99, 235, 0.2);
-    color: #93c5fd;
-  }
-
-  .settings-page .settings-nav-icon-emerald {
-    background-color: #d1fae5;
-    color: #059669;
-  }
-  [data-theme="dark"] .settings-page .settings-nav-icon-emerald,
-  [data-theme="midnight"] .settings-page .settings-nav-icon-emerald {
-    background-color: rgba(5, 150, 105, 0.2);
-    color: #6ee7b7;
-  }
-
-  .settings-page .settings-nav-icon-purple {
-    background-color: #f3e8ff;
-    color: #7c3aed;
-  }
-  [data-theme="dark"] .settings-page .settings-nav-icon-purple,
-  [data-theme="midnight"] .settings-page .settings-nav-icon-purple {
-    background-color: rgba(124, 58, 237, 0.2);
-    color: #c084fc;
-  }
-
-  .settings-page .settings-nav-icon-teal {
-    background-color: #ccfbf1;
-    color: #0d9488;
-  }
-  [data-theme="dark"] .settings-page .settings-nav-icon-teal,
-  [data-theme="midnight"] .settings-page .settings-nav-icon-teal {
-    background-color: rgba(13, 148, 136, 0.2);
-    color: #5eead4;
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
   }
 
-  .settings-page .settings-nav-icon-rose {
-    background-color: #ffe4e6;
-    color: #e11d48;
-  }
-  [data-theme="dark"] .settings-page .settings-nav-icon-rose,
-  [data-theme="midnight"] .settings-page .settings-nav-icon-rose {
-    background-color: rgba(225, 29, 72, 0.2);
-    color: #fda4af;
+  .settings-page .settings-nav-link:hover .settings-nav-icon,
+  .settings-page .settings-nav-link.active .settings-nav-icon {
+    background-color: var(--color-primary);
+    color: var(--color-text-inverse, #ffffff);
+    transform: scale(1.08);
   }
 
+  /* Main Settings Area */
   .settings-page .settings-main-area {
     width: 100%;
+    flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 2rem;
   }
 
-  @media(min-width: 1024px) {
-    .settings-page .settings-main-area {
-      width: 50%;
+  /* Live Preview Sidebar */
+  .settings-page .settings-preview-sidebar {
+    width: 100%;
+  }
+

Popular Posts

New Commit: fixed theme issues

Repository: Hestenb62/_legacy_backup Author: Hesten Berger Commit Message: fixed theme issues URL: https://github.com/Hestenb62/_legacy_backup/commit/498741f8c633ecaf6e7e594bb0aed02c47e69b39 Code Changes: diff --git a/assessment/index.php b/assessment/index.php index 822865b..5e8b706 100644 --- a/assessment/index.php +++ b/assessment/index.php @@ -264,7 +264,7 @@ include '../src/header.php'; </div> <!-- Hint Modal (Inline) --> - <div id="hintText" class="hint-box" style="display: none;"> + <div id="hintText" class="hint-box hidden"> <strong>Hint:</strong> <span id="hint-content"></span> </div> </div> diff --git a/assets/css/pages/assessment.css b/assets/css/pages/assessment.css index b57e964..7eb0d74 100644 --- a/assets/c...
Read more

New Commit: added arura mesh

Repository: Hestenb62/_legacy_backup Author: Hesten Berger Commit Message: added arura mesh URL: https://github.com/Hestenb62/_legacy_backup/commit/d8a9c63f2df943f6e40651985fb1c273c5809dd4 Code Changes: diff --git a/assets/css/level-style.css b/assets/css/level-style.css index ed8b60b..49cddf7 100644 --- a/assets/css/level-style.css +++ b/assets/css/level-style.css @@ -100,6 +100,8 @@ h1, h2, h3, h4 { padding: 4rem 1rem 3rem 1rem; background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border-bottom: 1px solid var(--glass-border); + position: relative; + overflow: hidden; } .hero-inner { @@ -111,6 +113,78 @@ h1, h2, h3, h4 { flex-wrap: wrap; gap: 1.5rem; animation: fadeUp 0.6s ease-out; + position: relative; + z-index: 2; +} + +/* Aurora Mesh Background for Level Hero */ +.level-aurora-bg { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; + z-index: 1; +} + +....
Read more

New Commit: Add JSON lesson migration and renderer scaffold Introduces a first-pass migration pipeline from PHP lesson files to structured JSON with `migrate_lessons.php`, and adds a generated `assets/data/lessons.json` catalog containing extracted metadata plus manual-migration placeholders for complex interactive content. Adds a new universal `src/lesson_renderer.php` to render lessons from JSON, along with initial component templates (`interactive-ladder` and `teacher-concepts`) for modular block rendering. Also includes `audit_report.html` documenting current security, accessibility, and architecture findings that motivated the move toward a template-driven lesson system.

Repository: Hestenb62/_legacy_backup Author: Hesten Berger Commit Message: Add JSON lesson migration and renderer scaffold Introduces a first-pass migration pipeline from PHP lesson files to structured JSON with , and adds a generated catalog containing extracted metadata plus manual-migration placeholders for complex interactive content. Adds a new universal to render lessons from JSON, along with initial component templates ( and ) for modular block rendering. Also includes documenting current security, accessibility, and architecture findings that motivated the move toward a template-driven lesson system. URL: https://github.com/Hestenb62/_legacy_backup/commit/f0c974b613ed65b7edcb712abb88bfae61ef0df5 Code Changes: diff --git a/assets/data/lessons.json b/assets/data/lessons.json new file mode 100644 index 0000000..0389666 --- /dev/null +++ b/assets/data/lessons.json @@ -0,0 +1,2835 @@ +{ + "lessons": { + "k-ela-m1-a-1": { + ...
Read more