- admin.html: Executive Dashboard mit KPI-Metriken (User, Rollen, gelöste Aufgaben, DB-Größe) - Userverwaltung: Interaktive Tabelle mit Sofortsuche, Rollen-Filter, Rollenwechsel (Admin/Lehrer/Schüler/Solo), Passwort-Reset & Benutzer löschen/anlegen - Plattform-Einstellungen: Globales Announcement-Banner, Registrierungs-Toggle & Wartungsmodus - Backend-API (server.py): Geschützte Admin-Endpunkte (/api/admin/stats, /api/admin/users, /api/admin/settings etc.) mit rollenbasierter Autorisierung (RBAC) - CLI-Tool make_admin.py zur Vergabe von Administratorrechten im Terminal
704 lines
41 KiB
HTML
704 lines
41 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT-Praxisportal | Die interaktive Lern- & Prüfungsvorbereitungs-Plattform für IT-Berufe</title>
|
||
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
||
<meta name="description" content="IT-Praxisportal: Die interaktive Lernplattform für Fachinformatiker & IT-Entwickler. 216+ Module in 13 Schlüssel-Technologien, Monaco Web-IDE und IHK AP1 & AP2 Prüfungsvorbereitung im Browser.">
|
||
<meta property="og:title" content="IT-Praxisportal | Praxisnahe IT-Kompetenz im Browser">
|
||
<meta property="og:description" content="216+ Module für Linux Bash, SQL, Python, Java, Go, Rust, C#, C++, PowerShell, Web & IHK AP1/AP2 Prüfungssimulation mit integrierter Web-IDE.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://alpha.it-praxisportal.de/">
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<style>
|
||
.portal-container {
|
||
max-width: 1240px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
.badge-ihk {
|
||
background: #eff6ff;
|
||
color: #1d4ed8;
|
||
border: 1px solid #bfdbfe;
|
||
}
|
||
.badge-devops {
|
||
background: #f0fdf4;
|
||
color: #15803d;
|
||
border: 1px solid #bbf7d0;
|
||
}
|
||
.badge-code {
|
||
background: #faf5ff;
|
||
color: #7e22ce;
|
||
border: 1px solid #e9d5ff;
|
||
}
|
||
.badge-data {
|
||
background: #fff7ed;
|
||
color: #c2410c;
|
||
border: 1px solid #fed7aa;
|
||
}
|
||
.portal-card-btn.locked {
|
||
background: rgba(2, 132, 199, 0.1);
|
||
color: #0284c7;
|
||
border: 1px solid rgba(2, 132, 199, 0.3);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.portal-card-btn.locked:hover {
|
||
background: #0284c7;
|
||
color: white;
|
||
border-color: #0284c7;
|
||
}
|
||
.portal-card-btn {
|
||
background: #0284c7;
|
||
color: white;
|
||
border: 1px solid transparent;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
font-size: 0.84rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.portal-card-btn:hover {
|
||
background: #0369a1;
|
||
transform: translateY(-1px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="background: #f8fafc; color: #0f172a; font-family: var(--font-sans); margin: 0; padding: 0;">
|
||
|
||
<!-- 1. STICKY MARKETING HEADER -->
|
||
<header class="portal-header-bar">
|
||
<div class="portal-nav-container">
|
||
<a href="index.html" class="portal-brand">
|
||
<div class="portal-brand-logo">
|
||
<img src="assets/favicon.svg" alt="IT-Praxisportal Logo" style="width: 24px; height: 24px;">
|
||
</div>
|
||
<div>
|
||
<span class="portal-brand-title">IT-Praxisportal</span>
|
||
<span class="portal-brand-badge">Alpha</span>
|
||
</div>
|
||
</a>
|
||
|
||
<nav class="portal-nav-links">
|
||
<a href="#hero" class="portal-nav-link">🚀 Übersicht</a>
|
||
<a href="#katalog" class="portal-nav-link">📚 13 Praxis-Kurse</a>
|
||
<a href="#ihk-section" class="portal-nav-link">🎓 IHK Prüfung</a>
|
||
<a href="#features-ide" class="portal-nav-link">💻 Web-IDE</a>
|
||
<a href="#features" class="portal-nav-link">💎 Vorteile</a>
|
||
<a href="teacher.html" class="portal-nav-link" id="nav-teacher-link" style="display: none;">👨🏫 Dozenten</a>
|
||
<a href="admin.html" class="portal-nav-link" id="nav-admin-link" style="display: none; color: #f87171; font-weight: 800;">🛡️ Admin</a>
|
||
</nav>
|
||
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<span id="nav-auth-user" style="display: none; font-size: 0.82rem; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(56, 189, 248, 0.2);"></span>
|
||
<button type="button" class="btn" id="nav-btn-login" style="padding: 6px 14px; font-size: 0.82rem; background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2);" onclick="window.openAuthModal('login', { allowClose: true })">🔑 Anmelden</button>
|
||
<button type="button" class="btn" id="nav-btn-register" style="padding: 6px 14px; font-size: 0.82rem; background: #0284c7; color: white;" onclick="window.openAuthModal('register', { allowClose: true })">✨ Kostenlos registrieren</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 2. HIGH-CONVERTING HERO SECTION -->
|
||
<section class="portal-hero" id="hero">
|
||
<div class="portal-container">
|
||
<div class="portal-hero-pill">
|
||
<span>⚡ Die #1 Lernplattform für Fachinformatiker & IT-Profis</span>
|
||
<span style="opacity: 0.5;">•</span>
|
||
<span>216+ Module</span>
|
||
<span style="opacity: 0.5;">•</span>
|
||
<span>100% Kostenlos</span>
|
||
</div>
|
||
|
||
<h1>Echte IT-Praxis statt trockener Theorie.</h1>
|
||
<p>Die All-in-One Lernplattform für <strong>Fachinformatiker, Software-Entwickler & IT-Auszubildende</strong>. Beherrsche 13 Schlüssel-Technologien in 216 interaktiven Modulen und bereite dich mit echten IHK-Fragen auf deine Abschlussprüfung vor – direkt im Browser mit professioneller Monaco Web-IDE.</p>
|
||
|
||
<div class="portal-hero-actions">
|
||
<button type="button" id="hero-primary-cta" class="portal-btn-primary" style="cursor: pointer; border: none;" onclick="window.openAuthModal('register', { allowClose: true })">
|
||
<span>🚀 Jetzt kostenlos registrieren</span>
|
||
</button>
|
||
<a href="#katalog" class="portal-btn-secondary">
|
||
<span>📚 Curriculum & Inhalte ansehen ↓</span>
|
||
</a>
|
||
<a href="#ihk-section" class="portal-btn-secondary" style="border-color: #38bdf8; color: #38bdf8;">
|
||
<span>🎓 IHK AP1 & AP2 Prüfungstrainer</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 4 Quick Stats -->
|
||
<div class="portal-stats-bar">
|
||
<div class="portal-stat-card">
|
||
<div class="portal-stat-num">13</div>
|
||
<div class="portal-stat-label">Praxis-Lehrpfade</div>
|
||
<div class="portal-stat-desc">Linux, Cloud, OOP, Systems & Web</div>
|
||
</div>
|
||
<div class="portal-stat-card">
|
||
<div class="portal-stat-num">216+</div>
|
||
<div class="portal-stat-label">Interaktive Module</div>
|
||
<div class="portal-stat-desc">Geführte Subgoals & Sofort-Tests</div>
|
||
</div>
|
||
<div class="portal-stat-card">
|
||
<div class="portal-stat-num">150+</div>
|
||
<div class="portal-stat-label">IHK-Prüfungsfragen</div>
|
||
<div class="portal-stat-desc">AP1 & AP2 Simulation mit Timer</div>
|
||
</div>
|
||
<div class="portal-stat-card">
|
||
<div class="portal-stat-num">0 min</div>
|
||
<div class="portal-stat-label">Installationsaufwand</div>
|
||
<div class="portal-stat-desc">VS Code Monaco Editor im Browser</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. KURS-KATALOG & CURRICULUM ÜBERSICHT -->
|
||
<main class="portal-container" id="katalog" style="padding-top: 48px; padding-bottom: 64px;">
|
||
|
||
<div class="portal-filter-bar">
|
||
<div>
|
||
<h2 style="font-size: 1.8rem; font-weight: 900; margin: 0 0 6px 0; color: #0f172a;">📚 Lehrplan & Kurs-Katalog</h2>
|
||
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Entdecke alle 13 Disziplinen. Registriere dich kostenlos, um alle Aufgaben und die Web-IDE freizuschalten.</p>
|
||
</div>
|
||
|
||
<!-- Search Box -->
|
||
<div class="portal-search-box">
|
||
<span style="font-size: 1rem;">🔍</span>
|
||
<input type="text" id="course-filter-input" placeholder="Kurs oder Thema filtern (z.B. Python, Subnetting, SQL, Bash, Rust)...">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Category Filter Tabs -->
|
||
<div class="portal-filter-tabs" style="margin-bottom: 24px;">
|
||
<button type="button" class="portal-tab-pill active" onclick="filterCourses('all', this)">🌟 Alle Disziplinen (13)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('ihk', this)">🎓 IHK Prüfung (2)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('devops', this)">🐧 DevOps & Linux (2)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('coding', this)">💻 Backend & Systems (6)</button>
|
||
<button type="button" class="portal-tab-pill" onclick="filterCourses('data', this)">🗄️ Daten & Web (3)</button>
|
||
</div>
|
||
|
||
<!-- GRID OF ALL 13 COURSES -->
|
||
<div class="portal-courses-grid" id="courses-grid-container">
|
||
|
||
<!-- 1. IHK AP1 -->
|
||
<div class="portal-card" data-category="ihk" data-title="ihk ap1 lernfelder 1-8 it-arbeitsplatz subnetting trace tabellen simulation">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">📘</div>
|
||
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
|
||
</div>
|
||
<h3 class="portal-card-title">IHK AP1: IT-Arbeitsplatz & Basissysteme</h3>
|
||
<p class="portal-card-desc">Lückenlose Vorbereitung auf die Abschlussprüfung Teil 1. Alle Lernfelder (LF 1 bis LF 8), Subnetting-Drill, Trace-Tabellen, SQL-Labor & 90-Minuten Probeprüfung.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">LF 1–8 Kernqualifikation</span>
|
||
<span class="portal-card-tag">Subnetting Drill</span>
|
||
<span class="portal-card-tag">Trace-Tabellen</span>
|
||
<span class="portal-card-tag">90-Min Simulation</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 12 Module • 100 Pkt.</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. IHK AP2 FISI -->
|
||
<div class="portal-card" data-category="ihk" data-title="ihk ap2 fisi fachinformatiker systemintegration wiso vlan routing storage cloud 40h-projekt">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">📕</div>
|
||
<span class="portal-card-badge badge-ihk">IHK Abschlussprüfung</span>
|
||
</div>
|
||
<h3 class="portal-card-title">IHK AP2: Fachinformatiker Systemintegration</h3>
|
||
<p class="portal-card-desc">Fachrichtung Systemintegration: LF 9 (Netzwerke/VLAN), LF 10 (Server/AD), LF 11 (Storage/RAID), LF 12 (Cloud/Docker), WiSo & offizieller Leitfaden zur 40h-Projektarbeit.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">LF 9–12 FISI</span>
|
||
<span class="portal-card-tag">Active Directory & GPO</span>
|
||
<span class="portal-card-tag">WiSo Prüfungsfragen</span>
|
||
<span class="portal-card-tag">40h-Projektarbeit</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 9 Module • 3 Simulationen</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap2_fisi" data-course-url="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. PYTHON 3 -->
|
||
<div class="portal-card" data-category="coding" data-title="python software entwicklung oop grundlagen tkinter data engineering">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🐍</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Python 3: Vom Einsteiger zum Entwickler</h3>
|
||
<p class="portal-card-desc">Das umfassende Flaggschiff-Curriculum: Grundlagen (G01–G10), Objektorientierung (00–06), Fortgeschrittenes OOP & GUI (07–16) und Data Engineering (17–22).</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">OOP & Klassen</span>
|
||
<span class="portal-card-tag">Pyodide WASM</span>
|
||
<span class="portal-card-tag">Tkinter GUI</span>
|
||
<span class="portal-card-tag">Unit Testing</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 35 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="python" data-course-url="workspace.html?course=python&chapter=01_erste_schritte_taschenrechner">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. LINUX BASH & CLOUD DEVOPS -->
|
||
<div class="portal-card" data-category="devops" data-title="linux bash shell scripting terminal devops jq sed awk docker bats ci/cd">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🐧</div>
|
||
<span class="portal-card-badge badge-devops">DevOps & Cloud</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Linux Bash, Shell Scripting & Cloud DevOps</h3>
|
||
<p class="portal-card-desc">Terminal-Mastery für Sysadmins: I/O Streams, Pipes, Text-Mining mit <code>jq</code>, <code>sed</code> und <code>awk</code>, Parallelisierung (xargs/parallel), Docker-Scripting & BATS Unittests.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">I/O Redirection</span>
|
||
<span class="portal-card-tag">jq JSON Mining</span>
|
||
<span class="portal-card-tag">xargs Multithreading</span>
|
||
<span class="portal-card-tag">BATS Testsuite</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="bash" data-course-url="workspace.html?course=bash&chapter=01_navigation_dateien_und_globbing">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. POWERSHELL 7+ CORE -->
|
||
<div class="portal-card" data-category="devops" data-title="powershell ps7 cmdlets pipeline .net rest api pester active directory">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🛡️</div>
|
||
<span class="portal-card-badge badge-devops">DevOps & Cloud</span>
|
||
</div>
|
||
<h3 class="portal-card-title">PowerShell 7+ Core: Enterprise Automation</h3>
|
||
<p class="portal-card-desc">Modernes Microsoft & Multi-Platform Scripting: Die Objekt-Pipeline, Custom PSCustomObjects, REST-APIs, moderne Parallelisierung mit <code>ForEach-Object -Parallel</code> & Pester Unit Tests.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Objekt-Pipeline</span>
|
||
<span class="portal-card-tag">PSCustomObject</span>
|
||
<span class="portal-card-tag">Parallel-Jobs</span>
|
||
<span class="portal-card-tag">Pester Tests</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="powershell" data-course-url="workspace.html?course=powershell&chapter=01_powershell_konsole_und_cmdlet_architektur">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. SQL & DATENBANKEN -->
|
||
<div class="portal-card" data-category="data" data-title="sql datenbanken postgresql sqlite normalisierung joins cte window-functions acid">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🐬</div>
|
||
<span class="portal-card-badge badge-data">Daten & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">SQL & Relationale Datenbank-Architektur</h3>
|
||
<p class="portal-card-desc">Vollständiges relationales Datenmanagement: Strikte Normalisierung (1NF–3NF), komplexe Multi-Table JOINs, Subqueries, Common Table Expressions (CTEs), Window Functions & ACID Transaktionen.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">1NF–3NF Normalisierung</span>
|
||
<span class="portal-card-tag">JOINs & CTEs</span>
|
||
<span class="portal-card-tag">Window Functions</span>
|
||
<span class="portal-card-tag">Query Plans</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="sql" data-course-url="workspace.html?course=sql&chapter=01_tabellen_und_select">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. JAVASCRIPT & TYPESCRIPT -->
|
||
<div class="portal-card" data-category="coding" data-title="javascript typescript frontend dom async await es6 web-apps">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🌐</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">JavaScript & Modernes TypeScript</h3>
|
||
<p class="portal-card-desc">Moderne Web-Entwicklung: ES6+ Syntax, Klassen & OOP, Async/Await & Promises, DOM-Manipulation, Web Storage, ES-Module und statische Typisierung mit TypeScript Generics.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">ES6+ & OOP</span>
|
||
<span class="portal-card-tag">Async/Await</span>
|
||
<span class="portal-card-tag">DOM Events</span>
|
||
<span class="portal-card-tag">TypeScript Generics</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="javascript" data-course-url="workspace.html?course=javascript&chapter=01_erste_schritte_variablen">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. JAVA 21 ENTERPRISE -->
|
||
<div class="portal-card" data-category="coding" data-title="java 21 enterprise oop virtual threads streams junit5 records">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">☕</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Java 21+ Enterprise & IHK Standard</h3>
|
||
<p class="portal-card-desc">Enterprise-Architektur: Strikte Typisierung, Records, Vererbung & Interfaces, Generics, Collections Framework, Streams API, Virtual Threads & automatisierte JUnit 5 Tests.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Java 21</span>
|
||
<span class="portal-card-tag">Records & OOP</span>
|
||
<span class="portal-card-tag">Streams API</span>
|
||
<span class="portal-card-tag">Virtual Threads</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="java" data-course-url="workspace.html?course=java&chapter=01_java_syntax_und_primitive_typen">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9. RUST SYSTEMS -->
|
||
<div class="portal-card" data-category="coding" data-title="rust systems ownership borrowing concurrency lifetimes cargo">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🦀</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Rust Modern Systems & Safety</h3>
|
||
<p class="portal-card-desc">Zero-Cost Abstractions: Ownership & Borrowing, Lifetimes, Enums mit Option/Result, Traits, Smart Pointer (Box, Arc, Mutex), Fearless Concurrency & LRU-Cache Masterprojekt.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Ownership System</span>
|
||
<span class="portal-card-tag">Lifetimes</span>
|
||
<span class="portal-card-tag">Arc<Mutex></span>
|
||
<span class="portal-card-tag">Cargo Tests</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="rust" data-course-url="workspace.html?course=rust&chapter=01_variablen_mutabilitaet_und_typen">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10. GO CLOUD MICROSERVICES (NEU) -->
|
||
<div class="portal-card" data-category="coding" data-title="go golang microservices concurrency goroutines channels rest apis">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🐹</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">Go Cloud Microservices & Concurrency</h3>
|
||
<p class="portal-card-desc">Entwickle hochskalierbare Cloud-Services mit Google Go: Goroutines, Channel-Pipelines, Mutex Synchronisation, Standard-HTTP-Server, Middleware & REST Microservice Master.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Goroutines</span>
|
||
<span class="portal-card-tag">Channels & Select</span>
|
||
<span class="portal-card-tag">net/http Server</span>
|
||
<span class="portal-card-tag">Table Tests</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="go" data-course-url="workspace.html?course=go&chapter=01_syntax_variablen_und_typen">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11. C# 12 & .NET 8 -->
|
||
<div class="portal-card" data-category="coding" data-title="csharp dotnet c# 12 linq async tasks xunit clean architecture">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🔷</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C# 12 & Modernes .NET 8 Enterprise</h3>
|
||
<p class="portal-card-desc">Moderne Unternehmenssoftware: Top-Level Statements, Pattern Matching, Records, LINQ funktionale Datenabfragen, Asynchrones Task/await, xUnit Tests & Enterprise Order Engine.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">C# 12 Primary Ctors</span>
|
||
<span class="portal-card-tag">LINQ Queries</span>
|
||
<span class="portal-card-tag">Async / Await</span>
|
||
<span class="portal-card-tag">xUnit Testsuite</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="csharp" data-course-url="workspace.html?course=csharp&chapter=01_syntax_datentypen_und_top_level_statements">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 12. C & C++20 SYSTEMS -->
|
||
<div class="portal-card" data-category="coding" data-title="cpp c c++ c++20 pointer speicher raii stl templates googletest">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">⚙️</div>
|
||
<span class="portal-card-badge badge-code">Software & Coding</span>
|
||
</div>
|
||
<h3 class="portal-card-title">C & Modernes C++20 Systems Engineering</h3>
|
||
<p class="portal-card-desc">Das Fundament der Systemprogrammierung: Pointer & dynamischer Speicher, RAII, Klassen & Rule of Five, Templates, Smart Pointer (unique_ptr, shared_ptr), STL & GoogleTest.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Pointer & Heap</span>
|
||
<span class="portal-card-tag">RAII Resource Guard</span>
|
||
<span class="portal-card-tag">Smart Pointer</span>
|
||
<span class="portal-card-tag">GoogleTest Suite</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="cpp" data-course-url="workspace.html?course=cpp&chapter=01_c_syntax_datentypen_und_io">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13. HTML5 & CSS3 -->
|
||
<div class="portal-card" data-category="data" data-title="html css frontend flexbox grid webdesign responsive ui a11y">
|
||
<div>
|
||
<div class="portal-card-top">
|
||
<div class="portal-card-icon">🎨</div>
|
||
<span class="portal-card-badge badge-data">Daten & Web</span>
|
||
</div>
|
||
<h3 class="portal-card-title">HTML5, Modern CSS3 & Responsive UI</h3>
|
||
<p class="portal-card-desc">Modernes UI-Handwerk: Semantische Tags, Barrierefreiheit (ARIA/A11y), CSS Custom Properties, 1D-Layouts mit Flexbox, 2D-Layouts mit CSS Grid, Media Queries & Dark Mode.</p>
|
||
<div class="portal-card-tags">
|
||
<span class="portal-card-tag">Semantik & A11y</span>
|
||
<span class="portal-card-tag">Flexbox & CSS Grid</span>
|
||
<span class="portal-card-tag">Dark Mode Themes</span>
|
||
<span class="portal-card-tag">Responsive Design</span>
|
||
</div>
|
||
</div>
|
||
<div class="portal-card-footer">
|
||
<span class="portal-card-meta">⏱️ 16 Module • 4 Lehrpfade</span>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="html_css" data-course-url="workspace.html?course=html_css&chapter=01_semantisches_html_und_struktur">
|
||
<span>🔒 Kostenlos freischalten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 4. IHK PRÜFUNGSVORBEREITUNG SHOWCASE -->
|
||
<section class="card" id="ihk-section" style="margin-top: 56px; border: 1px solid #bfdbfe; background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%); border-radius: 16px; padding: 32px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
|
||
<div>
|
||
<span class="portal-card-badge badge-ihk" style="font-size: 0.8rem; font-weight: 800;">Offizieller Prüfungsstandard</span>
|
||
<h3 style="margin: 8px 0 6px 0; font-size: 1.6rem; color: #1e3a8a; font-weight: 900;">🎓 IHK Prüfungstrainer AP1 & AP2</h3>
|
||
<p style="margin: 0; color: #475569; font-size: 0.95rem; max-width: 780px;">Realistische Prüfungssimulation nach der neuen Ausbildungsordnung (AO 2020) für Fachinformatiker aller Fachrichtungen (FIAE, FISI, IT-SE, IT-SM).</p>
|
||
</div>
|
||
<button type="button" class="btn" style="background: #1d4ed8; color: white; padding: 10px 20px; font-weight: 800; border-radius: 8px; border: none; cursor: pointer;" onclick="window.openAuthModal('register', { allowClose: true, title: '🔒 Prüfungssimulation freischalten', message: 'Erstelle einen kostenlosen Account, um den 90-Minuten IHK-Prüfungstrainer mit automatischer Punkteberechnung zu starten.' })">
|
||
<span>🚀 Prüfungssimulation starten</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 16px;">
|
||
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
|
||
<h4 style="margin: 0 0 6px 0; color: #1e3a8a; font-size: 1.05rem;">📘 AP1: IT-Arbeitsplatz (LF 1–8)</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Gemeinsame Kernqualifikationen aller Fachinformatiker: Verträge, Ergonomie, IPv4/IPv6 Subnetting, BSI-Schutzbedarf, relationales SQL & Trace-Tabellen.</p>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/01_lf1_unternehmen_und_arbeitsplatz/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
|
||
<span>🔒 AP1 Lehrplan öffnen</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
|
||
<h4 style="margin: 0 0 6px 0; color: #991b1b; font-size: 1.05rem;">📕 AP2: Systemintegration (LF 9–12)</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Fachrichtungsspezifisch: VLANs & Routing, Active Directory GPO, RAID & SAN-Speicher, Virtualisierung, WiSo-Kompaktfragen & 40h-Projektleitfaden.</p>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap2_fisi" data-course-url="courses/ihk_ap2_fisi/01_lf9_netzwerke_und_dienste/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
|
||
<span>🔒 AP2 FISI Lehrplan öffnen</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm);">
|
||
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">⚡ Interaktive Drill-Trainer</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0 0 14px 0;">Blitzschnelles Rechnen: Subnetting-Drill Generator mit Live-Punktevergabe, schrittweise Trace-Tabellen-Simulation und relationale Abfrage-Validierung.</p>
|
||
<button type="button" class="portal-card-btn portal-card-action-btn locked" data-course-id="ihk_ap1" data-course-url="courses/ihk_ap1/11_subnetting_drill_master/index.html" style="font-size: 0.84rem; padding: 8px 14px;">
|
||
<span>🔒 Drill-Trainer öffnen</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. MONACO WEB-IDE SHOWCASE -->
|
||
<section class="card" id="features-ide" style="margin-top: 48px; border-radius: 16px; padding: 32px; background: #090d16; color: #f8fafc; border: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
|
||
<div style="max-width: 640px;">
|
||
<span style="background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); padding: 4px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;">0 Min. Setup • Direkt im Browser</span>
|
||
<h3 style="font-size: 1.6rem; font-weight: 900; margin: 10px 0; color: #f8fafc;">💻 Monaco Web-IDE: Echte Entwickler-Erfahrung</h3>
|
||
<p style="color: #94a3b8; font-size: 0.92rem; line-height: 1.6; margin-bottom: 16px;">Vergiss mühsame Compiler-Installationen oder Treiberprobleme. Das IT-Praxisportal bringt den Original-Code-Editor von Microsoft VS Code direkt in deinen Webbrowser – mit Autovervollständigung, Syntax-Highlighting, Unittests und automatischem Cloud-Save.</p>
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">⚡ Multi-Language Runner</span>
|
||
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">🧪 Automatisierte Unittests</span>
|
||
<span style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;">💡 Intelligente Fehleranalyse</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<button type="button" class="btn" style="background: #10b981; color: white; padding: 12px 24px; font-size: 0.95rem; font-weight: 800; border-radius: 8px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);" onclick="window.openAuthModal('register', { allowClose: true, title: '🔒 Web-IDE freischalten', message: 'Registriere dich kostenlos, um direkt im Browser mit der Monaco IDE zu programmieren.' })">
|
||
<span>✨ Account erstellen & Web-IDE starten →</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. BENTO FEATURE MATRIX (WARUM IT-PRAXISPORTAL?) -->
|
||
<div style="text-align: center; margin: 64px 0 24px 0;" id="features">
|
||
<h2 style="font-size: 1.8rem; font-weight: 900; margin: 0 0 6px 0; color: #0f172a;">🛠️ Warum IT-Praxisportal?</h2>
|
||
<p style="color: #64748b; margin: 0; font-size: 0.95rem;">Wissenschaftlich fundierte Didaktik, moderne Web-Technologien und zero lokale Installation.</p>
|
||
</div>
|
||
|
||
<div class="bento-grid">
|
||
<div class="bento-item">
|
||
<div style="font-size: 1.8rem; margin-bottom: 8px;">⚡</div>
|
||
<h4>Monaco Web-IDE (VS Code)</h4>
|
||
<p>Gleicher professioneller Editor wie in Microsoft VS Code: Syntax-Highlighting, Autocomplete, Shortcuts und automatisierte Tests direkt im Browser.</p>
|
||
</div>
|
||
|
||
<div class="bento-item">
|
||
<div style="font-size: 1.8rem; margin-bottom: 8px;">⏱️</div>
|
||
<h4>Realtime Prüfungssimulation</h4>
|
||
<p>Echte Prüfungsbedingungen: 90 Minuten Countdown, 100 Punkte, dynamisch gemischte 150 IHK-Fragen und automatischer Notenrechner nach IHK-Schlüssel.</p>
|
||
</div>
|
||
|
||
<div class="bento-item">
|
||
<div style="font-size: 1.8rem; margin-bottom: 8px;">🏆</div>
|
||
<h4>Gamification & Zertifikate</h4>
|
||
<p>Sammle XP für bestandene Tests, halte deinen täglichen Lern-Streak und drucke nach Abschluss verifizierbare PDF-Zertifikate für Bewerbungen aus.</p>
|
||
</div>
|
||
|
||
<div class="bento-item">
|
||
<div style="font-size: 1.8rem; margin-bottom: 8px;">🛡️</div>
|
||
<h4>100% DSGVO & Cloud-Sync</h4>
|
||
<p>Gehostet in Deutschland, kein Third-Party Tracking und verschlüsselte Passwörter. Speichere deinen Fortschritt sicher in der Cloud.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. ZIELGRUPPEN / FÜR WEN IST DAS PORTAL? -->
|
||
<section class="card" style="margin-top: 48px; border-radius: 16px; padding: 32px; background: #ffffff;">
|
||
<div style="text-align: center; margin-bottom: 28px;">
|
||
<h3 style="font-size: 1.5rem; font-weight: 900; color: #0f172a; margin: 0 0 6px 0;">👥 Für wen ist das IT-Praxisportal?</h3>
|
||
<p style="color: #64748b; margin: 0; font-size: 0.92rem;">Entwickelt von echten IHK-Dozenten und erfahrenen IT-Architekten.</p>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;">
|
||
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
|
||
<div style="font-size: 1.6rem; margin-bottom: 8px;">👨💻</div>
|
||
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Auszubildende Fachinformatiker</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Der ideale Begleiter vom ersten Ausbildungstag bis zur Abschlussprüfung. Schließe Wissenslücken in Berufsschul-Lernfeldern mit praxisnahem Code.</p>
|
||
</div>
|
||
|
||
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
|
||
<div style="font-size: 1.6rem; margin-bottom: 8px;">🎓</div>
|
||
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Umschüler & Quereinsteiger</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Verständliche Didaktik ohne Vorwissen-Frust. Schritt-für-Schritt Subgoals bringen dich sicher durch technische Prüfungen und Job-Interviews.</p>
|
||
</div>
|
||
|
||
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px;">
|
||
<div style="font-size: 1.6rem; margin-bottom: 8px;">👨🏫</div>
|
||
<h4 style="margin: 0 0 6px 0; color: #0f172a; font-size: 1.05rem;">Berufsschulen & Ausbilder</h4>
|
||
<p style="font-size: 0.86rem; color: #64748b; margin: 0;">Organisiere ganze Klassen mit Invite-Codes. Behalte die Live-Lernmatrix deiner Azubis im Blick und inspiziere abgegebenen Code im Dozenten-Dashboard.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. HIGH-CONVERTING BOTTOM CTA BANNER -->
|
||
<section class="card" style="margin-top: 48px; border-radius: 16px; padding: 40px 24px; text-align: center; background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%); color: white; box-shadow: var(--shadow-xl);">
|
||
<h2 style="font-size: 2rem; font-weight: 900; margin: 0 0 10px 0; color: white;">Bereit für echte IT-Praxis?</h2>
|
||
<p style="font-size: 1.05rem; opacity: 0.9; max-width: 650px; margin: 0 auto 24px auto;">
|
||
Erstelle jetzt deinen Account in weniger als 30 Sekunden. 100% kostenlos, keine Kreditkarte, kein Abonnement.
|
||
</p>
|
||
<button type="button" class="btn" style="background: #ffffff; color: #0284c7; padding: 12px 28px; font-size: 1rem; font-weight: 800; border-radius: 8px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.2);" onclick="window.openAuthModal('register', { allowClose: true })">
|
||
<span>✨ Jetzt kostenlos registrieren →</span>
|
||
</button>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 9. CLEAN MARKETING FOOTER -->
|
||
<footer style="background: #0b0f19; color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 48px 24px;">
|
||
<div class="portal-container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<div class="portal-brand-logo" style="width: 32px; height: 32px;">
|
||
<img src="assets/favicon.svg" alt="Logo" style="width: 20px; height: 20px;">
|
||
</div>
|
||
<div>
|
||
<div style="color: white; font-weight: 800; font-size: 1rem;">it-praxisportal.de</div>
|
||
<div style="font-size: 0.75rem; color: #64748b;">Version 1.0 Alpha • Die moderne Plattform für echte IT-Praxis</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 20px; font-size: 0.85rem;">
|
||
<a href="#hero" style="color: #94a3b8; text-decoration: none;">Übersicht</a>
|
||
<a href="#katalog" style="color: #94a3b8; text-decoration: none;">13 Kurse</a>
|
||
<a href="#ihk-section" style="color: #94a3b8; text-decoration: none;">IHK Prüfung</a>
|
||
<a href="#features-ide" style="color: #94a3b8; text-decoration: none;">Web-IDE</a>
|
||
<a href="teacher.html" style="color: #94a3b8; text-decoration: none;">Dozenten</a>
|
||
</div>
|
||
|
||
<div style="font-size: 0.8rem; color: #64748b;">
|
||
🔒 100% DSGVO-konform • Serverstandort Deutschland
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script src="assets/app_auth.js"></script>
|
||
|
||
<script>
|
||
// Live Filter & Instant Search Engine
|
||
function filterCourses(category, element) {
|
||
document.querySelectorAll('.portal-tab-pill').forEach(btn => btn.classList.remove('active'));
|
||
if (element) element.classList.add('active');
|
||
|
||
const cards = document.querySelectorAll('.portal-card');
|
||
const query = (document.getElementById('course-filter-input').value || '').toLowerCase().trim();
|
||
|
||
cards.forEach(card => {
|
||
const cardCat = card.getAttribute('data-category');
|
||
const cardTitle = (card.getAttribute('data-title') || '').toLowerCase();
|
||
|
||
const matchesCategory = (category === 'all' || cardCat === category);
|
||
const matchesQuery = (!query || cardTitle.includes(query) || card.innerText.toLowerCase().includes(query));
|
||
|
||
if (matchesCategory && matchesQuery) {
|
||
card.style.display = 'flex';
|
||
} else {
|
||
card.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
const searchInput = document.getElementById('course-filter-input');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('input', () => {
|
||
const activeTab = document.querySelector('.portal-tab-pill.active');
|
||
const activeCat = activeTab ? activeTab.getAttribute('onclick').match(/'([^']+)'/)[1] : 'all';
|
||
filterCourses(activeCat, activeTab);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
window.AUTH.updateUI();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|