From 91b96a1e038e095c9cbc88dee88c7908fe11ab2f Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Thu, 14 May 2026 22:38:42 +0200
Subject: [PATCH] feat: promote Transceiver Academy to own main nav tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move Academy from hidden Standards sub-tab to a dedicated
top-level tab '🎓 Academy' in the main navigation bar.

- Add <div class="tab" data-tab="training"> to nav
- Create standalone <div id="tab-training"> with full Academy HTML
- Wire initTraining() into goToTab() handler
- Remove std-subtab-training skeleton from Standards section
- Remove training button from Standards sub-tab bar
- Update switchStdSubtab() to only handle standards/formfaktoren
---
 packages/dashboard/index.html | 154 ++++++++++++++++------------------
 1 file changed, 72 insertions(+), 82 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 64369d8..ae43360 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -808,6 +808,7 @@
   <div class="tab" data-tab="equivalences">🔀 Equivalences</div>
   <div class="tab" data-tab="kb">📚 KB</div>
   <div class="tab" data-tab="bulk">🧾 Bulk</div>
+  <div class="tab" data-tab="training">🎓 Academy</div>
 </div>
 
 <div class="main">
@@ -1260,10 +1261,6 @@
         style="padding:8px 20px;font-size:0.85rem;font-weight:600;border:none;background:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer">
         Formfaktoren
       </button>
-      <button id="std-sub-btn-training" onclick="switchStdSubtab('training')"
-        style="padding:8px 20px;font-size:0.85rem;font-weight:600;border:none;background:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer">
-        🎓 Training
-      </button>
     </div>
 
     <!-- Sub-tab: Standards -->
@@ -1330,82 +1327,6 @@
         </div>
       </div>
 
-    <!-- Sub-tab: Training — Transceiver Academy -->
-    <div id="std-subtab-training" class="hidden">
-
-      <!-- Academy header -->
-      <div style="background:linear-gradient(135deg,#6366f1 0%,#4f46e5 60%,#1d4ed8 100%);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem">
-        <div>
-          <div style="font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-0.02em">🎓 Transceiver Academy</div>
-          <div style="font-size:0.75rem;color:rgba(255,255,255,0.75);margin-top:2px">Professional training for engineers, sales and procurement</div>
-        </div>
-        <div style="display:flex;align-items:center;gap:0.75rem">
-          <!-- Language toggle -->
-          <div style="display:flex;background:rgba(255,255,255,0.15);border-radius:20px;padding:3px">
-            <button id="ta-lang-en" onclick="taSetLang('en')" style="border:none;padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:700;cursor:pointer;background:#fff;color:#4f46e5;transition:all 0.15s">EN</button>
-            <button id="ta-lang-de" onclick="taSetLang('de')" style="border:none;padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:700;cursor:pointer;background:transparent;color:rgba(255,255,255,0.8);transition:all 0.15s">DE</button>
-          </div>
-          <!-- Reset -->
-          <button onclick="taResetProgress()" title="Reset progress" style="background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:0.7rem">↺ Reset</button>
-        </div>
-      </div>
-
-      <!-- Progress bar -->
-      <div style="background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.65rem 1rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:0.85rem">
-        <div style="font-size:0.75rem;color:var(--text-dim);white-space:nowrap;font-weight:600">Progress</div>
-        <div style="flex:1;background:var(--surface3);border-radius:4px;height:7px;overflow:hidden">
-          <div id="ta-progress-fill" style="height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:4px;transition:width 0.6s ease"></div>
-        </div>
-        <div id="ta-progress-label" style="font-size:0.75rem;color:var(--text-dim);white-space:nowrap">0 / — completed</div>
-        <div id="ta-stats-badge" style="font-size:0.68rem;padding:2px 8px;border-radius:10px;background:var(--surface3);color:var(--text-dim)">loading…</div>
-      </div>
-
-      <!-- Home view -->
-      <div id="ta-home">
-
-        <!-- Category tabs -->
-        <div id="ta-cat-tabs" style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem"></div>
-
-        <!-- Lesson list for selected category -->
-        <div id="ta-lesson-list" style="display:grid;gap:0.55rem"></div>
-
-        <!-- Category quiz bar -->
-        <div id="ta-cat-quiz-bar" style="display:none;margin-top:1.25rem;padding:0.85rem 1.1rem;border-radius:10px;background:var(--surface2);border:1px solid var(--border);align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap">
-          <div>
-            <div id="ta-cat-quiz-title" style="font-weight:700;font-size:0.88rem;color:var(--text-bright)">📝 Category Quiz</div>
-            <div id="ta-cat-quiz-meta" style="font-size:0.72rem;color:var(--text-dim);margin-top:2px"></div>
-          </div>
-          <button id="ta-cat-quiz-btn" onclick="taStartCategoryQuiz()" style="background:var(--accent);color:#fff;border:none;padding:7px 18px;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:600;white-space:nowrap">Start Quiz →</button>
-        </div>
-
-      </div>
-
-      <!-- Lesson viewer -->
-      <div id="ta-lesson-view" style="display:none">
-        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;flex-wrap:wrap;gap:0.5rem">
-          <button onclick="taCloseLesson()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim)">← Back</button>
-          <div id="ta-lesson-meta" style="font-size:0.72rem;color:var(--text-dim)"></div>
-          <button id="ta-lesson-quiz-btn" onclick="taStartLessonQuiz()" style="background:var(--surface2);border:1px solid var(--accent);color:var(--accent);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;font-weight:600">📝 Lesson Quiz</button>
-        </div>
-        <div id="ta-lesson-content" style="line-height:1.7"></div>
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)">
-          <button id="ta-prev-btn" onclick="taNavLesson(-1)" style="background:var(--surface2);border:1px solid var(--border);padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem;color:var(--text-dim)">← Previous</button>
-          <button id="ta-complete-btn" onclick="taMarkComplete()" style="background:#22c55e;color:#fff;border:none;padding:7px 20px;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:600">✓ Mark Complete</button>
-          <button id="ta-next-btn" onclick="taNavLesson(1)" style="background:var(--accent);color:#fff;border:none;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem">Next →</button>
-        </div>
-      </div>
-
-      <!-- Quiz view -->
-      <div id="ta-quiz-view" style="display:none">
-        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.1rem">
-          <button onclick="taCloseQuiz()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim)">← Back</button>
-          <div id="ta-quiz-title" style="font-size:0.88rem;font-weight:700;color:var(--text-bright)"></div>
-          <div id="ta-quiz-progress" style="margin-left:auto;font-size:0.75rem;color:var(--text-dim)"></div>
-        </div>
-        <div id="ta-quiz-content"></div>
-      </div>
-
-    </div>
     </div>
   </div>
 
@@ -2649,6 +2570,74 @@
     <div id="bulk-results" style="margin-top:1rem"></div>
   </div><!-- end tab-bulk -->
 
+  <!-- TRANSCEIVER ACADEMY -->
+  <div id="tab-training" class="hidden fade-in">
+
+    <!-- Academy header -->
+    <div style="background:linear-gradient(135deg,#6366f1 0%,#4f46e5 60%,#1d4ed8 100%);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem">
+      <div>
+        <div style="font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-0.02em">🎓 Transceiver Academy</div>
+        <div style="font-size:0.75rem;color:rgba(255,255,255,0.75);margin-top:2px">Professional training for engineers, sales and procurement</div>
+      </div>
+      <div style="display:flex;align-items:center;gap:0.75rem">
+        <div style="display:flex;background:rgba(255,255,255,0.15);border-radius:20px;padding:3px">
+          <button id="ta-lang-en" onclick="taSetLang('en')" style="border:none;padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:700;cursor:pointer;background:#fff;color:#4f46e5;transition:all 0.15s">EN</button>
+          <button id="ta-lang-de" onclick="taSetLang('de')" style="border:none;padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:700;cursor:pointer;background:transparent;color:rgba(255,255,255,0.8);transition:all 0.15s">DE</button>
+        </div>
+        <button onclick="taResetProgress()" title="Reset progress" style="background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:0.7rem">↺ Reset</button>
+      </div>
+    </div>
+
+    <!-- Progress bar -->
+    <div style="background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.65rem 1rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:0.85rem">
+      <div style="font-size:0.75rem;color:var(--text-dim);white-space:nowrap;font-weight:600">Progress</div>
+      <div style="flex:1;background:var(--surface3);border-radius:4px;height:7px;overflow:hidden">
+        <div id="ta-progress-fill" style="height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:4px;transition:width 0.6s ease"></div>
+      </div>
+      <div id="ta-progress-label" style="font-size:0.75rem;color:var(--text-dim);white-space:nowrap">0 / — completed</div>
+      <div id="ta-stats-badge" style="font-size:0.68rem;padding:2px 8px;border-radius:10px;background:var(--surface3);color:var(--text-dim)">loading…</div>
+    </div>
+
+    <!-- Home view -->
+    <div id="ta-home">
+      <div id="ta-cat-tabs" style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem"></div>
+      <div id="ta-lesson-list" style="display:grid;gap:0.55rem"></div>
+      <div id="ta-cat-quiz-bar" style="display:none;margin-top:1.25rem;padding:0.85rem 1.1rem;border-radius:10px;background:var(--surface2);border:1px solid var(--border);align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap">
+        <div>
+          <div id="ta-cat-quiz-title" style="font-weight:700;font-size:0.88rem;color:var(--text-bright)">📝 Category Quiz</div>
+          <div id="ta-cat-quiz-meta" style="font-size:0.72rem;color:var(--text-dim);margin-top:2px"></div>
+        </div>
+        <button id="ta-cat-quiz-btn" onclick="taStartCategoryQuiz()" style="background:var(--accent);color:#fff;border:none;padding:7px 18px;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:600;white-space:nowrap">Start Quiz →</button>
+      </div>
+    </div>
+
+    <!-- Lesson viewer -->
+    <div id="ta-lesson-view" style="display:none">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;flex-wrap:wrap;gap:0.5rem">
+        <button onclick="taCloseLesson()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim)">← Back</button>
+        <div id="ta-lesson-meta" style="font-size:0.72rem;color:var(--text-dim)"></div>
+        <button id="ta-lesson-quiz-btn" onclick="taStartLessonQuiz()" style="background:var(--surface2);border:1px solid var(--accent);color:var(--accent);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;font-weight:600">📝 Lesson Quiz</button>
+      </div>
+      <div id="ta-lesson-content" style="line-height:1.7"></div>
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)">
+        <button id="ta-prev-btn" onclick="taNavLesson(-1)" style="background:var(--surface2);border:1px solid var(--border);padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem;color:var(--text-dim)">← Previous</button>
+        <button id="ta-complete-btn" onclick="taMarkComplete()" style="background:#22c55e;color:#fff;border:none;padding:7px 20px;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:600">✓ Mark Complete</button>
+        <button id="ta-next-btn" onclick="taNavLesson(1)" style="background:var(--accent);color:#fff;border:none;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem">Next →</button>
+      </div>
+    </div>
+
+    <!-- Quiz view -->
+    <div id="ta-quiz-view" style="display:none">
+      <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.1rem">
+        <button onclick="taCloseQuiz()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim)">← Back</button>
+        <div id="ta-quiz-title" style="font-size:0.88rem;font-weight:700;color:var(--text-bright)"></div>
+        <div id="ta-quiz-progress" style="margin-left:auto;font-size:0.75rem;color:var(--text-dim)"></div>
+      </div>
+      <div id="ta-quiz-content"></div>
+    </div>
+
+  </div><!-- end tab-training -->
+
   <!-- ── GLOBAL SEARCH OVERLAY (M) ──────────────────────────────────── -->
   <div id="global-search-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)" onclick="if(event.target===this)closeGlobalSearch()">
     <div style="position:absolute;top:15%;left:50%;transform:translateX(-50%);width:min(700px,94vw);background:var(--surface1);border:1px solid var(--border);border-radius:14px;padding:1.25rem;box-shadow:0 24px 80px rgba(0,0,0,0.5)">
@@ -3086,6 +3075,7 @@ function goToTab(tabName) {
   if (tabName === 'review') loadReview();
   if (tabName === 'stock') loadStock();
   if (tabName === 'prices') loadPriceComparison();
+  if (tabName === 'training') initTraining();
 }
 
 document.querySelectorAll('.tab').forEach(function(tab) {
@@ -5614,7 +5604,7 @@ async function loadStandardsList() {
 
 // ── SUB-TAB SWITCHING ───────────────────────────────────────────────────────
 function switchStdSubtab(tab) {
-  ['standards','formfaktoren','training'].forEach(function(t) {
+  ['standards','formfaktoren'].forEach(function(t) {
     var content = el('std-subtab-' + t);
     var btn     = el('std-sub-btn-' + t);
     if (!content || !btn) return;
@@ -5626,7 +5616,7 @@ function switchStdSubtab(tab) {
   if (tab === 'formfaktoren') {
     if (_allFormFactors.length === 0) loadFormFactors(); else renderFormFactors();
   }
-  if (tab === 'training') initTraining();
+  // training moved to own main tab
 }
 
 async function loadFormFactors() {