feat: promote Transceiver Academy to own main nav tab
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
This commit is contained in:
Rene Fichtmueller
parent
5a948245ff
commit
91b96a1e03
@ -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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user