133 lines
6.5 KiB
HTML
133 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IHK Diagramm-Studio | ER-Modell, Struktogramm & UML Editor</title>
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
|
<meta name="description" content="Offizielles IHK Diagramm-Studio: Interaktiver ER-Modell Editor (Chen/Krähenfuß), DIN 66261 Nassi-Shneiderman Struktogramme und UML Klassendiagramme für IT-Prüfungsvorbereitung.">
|
|
<link rel="stylesheet" href="assets/style.css?v=2.2.4">
|
|
<link rel="stylesheet" href="assets/ihk_tools/ihk_tools.css">
|
|
<link rel="stylesheet" href="assets/ihk_tools/diagram_studio.css">
|
|
</head>
|
|
<body style="background: #090d16; color: #f8fafc; font-family: var(--font-sans); margin: 0; padding: 0;">
|
|
|
|
<!-- Sticky Topbar -->
|
|
<header class="portal-header-bar">
|
|
<div class="portal-nav-container">
|
|
<a href="dashboard.html" class="portal-brand">
|
|
<div class="portal-brand-logo">
|
|
<img src="assets/favicon.svg" alt="Logo" style="width: 22px; height: 22px;">
|
|
</div>
|
|
<div>
|
|
<span class="portal-brand-title">IT-Praxisportal</span>
|
|
<span class="portal-brand-badge">Diagramm-Studio</span>
|
|
</div>
|
|
</a>
|
|
|
|
<nav class="portal-nav-links">
|
|
<a href="dashboard.html" class="portal-nav-link">📚 Kurse & Dashboard</a>
|
|
<a href="workspace.html?course=python" class="portal-nav-link">💻 Web-IDE</a>
|
|
<a href="dashboard.html#ihk-section" class="portal-nav-link" id="nav-ihk-link" style="display: none;">🎓 IHK-Prüfung</a>
|
|
</nav>
|
|
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<!-- Modern User Avatar Dropdown -->
|
|
<div class="portal-user-dropdown" id="portal-user-dropdown" style="display: none;">
|
|
<button type="button" class="portal-user-btn" id="portal-user-btn" aria-haspopup="true" aria-expanded="false" onclick="toggleUserDropdown(event)" title="Benutzerprofil">
|
|
<span class="portal-user-avatar" id="portal-user-avatar">IT</span>
|
|
<span class="portal-user-name" id="portal-user-name">Benutzer</span>
|
|
<span class="portal-user-caret">▼</span>
|
|
</button>
|
|
<div class="portal-dropdown-menu" id="portal-dropdown-menu">
|
|
<div class="portal-dropdown-header">
|
|
<div class="portal-dropdown-name" id="portal-dropdown-user-fullname">Lädt...</div>
|
|
<div class="portal-dropdown-meta" id="portal-dropdown-user-email">user@portal.local</div>
|
|
<div class="portal-dropdown-badge" id="portal-dropdown-user-badge">Teilnehmer</div>
|
|
</div>
|
|
<a href="dashboard.html" class="portal-dropdown-item">
|
|
<span>🏠</span> <span>Zum Kurs-Dashboard</span>
|
|
</a>
|
|
<a href="dashboard.html#zertifikate-section" class="portal-dropdown-item">
|
|
<span>🏆</span> <span>Meine Zertifikate</span>
|
|
</a>
|
|
<div class="portal-dropdown-divider" id="dropdown-teacher-divider" style="display: none;"></div>
|
|
<a href="teacher.html" class="portal-dropdown-item" id="dropdown-link-teacher" style="display: none;">
|
|
<span>👨🏫</span> <span>Dozenten-Portal</span>
|
|
</a>
|
|
<a href="admin.html" class="portal-dropdown-item" id="dropdown-link-admin" style="display: none; color: #f87171;">
|
|
<span>🛡️</span> <span>Administration</span>
|
|
</a>
|
|
<div class="portal-dropdown-divider"></div>
|
|
<button type="button" class="portal-dropdown-item danger" onclick="if(confirm('Möchtest du dich wirklich abmelden?')) window.AUTH.logout();">
|
|
<span>🚪</span> <span>Abmelden</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Studio Header -->
|
|
<section class="portal-hero" style="padding: 28px 24px 22px 24px; border-bottom: 1px solid #1e293b;">
|
|
<div class="header-container" style="max-width: 1400px; margin: 0 auto;">
|
|
<div class="portal-hero-pill">
|
|
<span>📐 IHK Entwurfswerkzeuge</span>
|
|
<span style="opacity: 0.5;">•</span>
|
|
<span>Standard DIN 66261, ANSI SQL & UML 2.5</span>
|
|
</div>
|
|
<h1 style="font-size: 1.8rem; margin: 0 0 6px 0; color: #ffffff;">
|
|
IHK Diagramm-Studio: ER-Modell, Struktogramm & UML
|
|
</h1>
|
|
<p style="margin: 0; font-size: 0.92rem; color: #cbd5e1; max-width: 820px; line-height: 1.55;">
|
|
Visuelle Modellierung und Codegenerierung für Fachinformatiker (AP1 & AP2). Erstelle relationale Schemata, Nassi-Shneiderman Struktogramme mit Python-Transpiler und objektorientierte UML-Klassenhierarchien.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Studio Layout with Tabs -->
|
|
<main class="ds-container">
|
|
<div class="ds-tab-nav">
|
|
<button type="button" class="ds-tab-btn active" id="tab-btn-er">
|
|
<span>🗄️</span> <span>ER-Modell Editor (Relational & DDL)</span>
|
|
</button>
|
|
<button type="button" class="ds-tab-btn" id="tab-btn-struktogramm">
|
|
<span>📐</span> <span>Struktogramm Editor (DIN 66261)</span>
|
|
</button>
|
|
<button type="button" class="ds-tab-btn" id="tab-btn-uml">
|
|
<span>🔷</span> <span>UML 2.5 Studio (Klassen, Sequenz, Use Case)</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab 1: ER Editor -->
|
|
<div id="panel-er" style="display: block;"></div>
|
|
|
|
<!-- Tab 2: Struktogramm Editor -->
|
|
<div id="panel-struktogramm" style="display: none;"></div>
|
|
|
|
<!-- Tab 3: UML Editor -->
|
|
<div id="panel-uml" style="display: none;"></div>
|
|
</main>
|
|
|
|
<footer style="margin-top: 40px; padding: 20px; border-top: 1px solid #1e293b; text-align: center; font-size: 0.8rem; color: #94a3b8;">
|
|
IT-Praxisportal • IHK Prüfungsvorbereitung für Fachinformatiker • Standard DIN 66261 & ISO/IEC 19505
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="assets/app_auth.js"></script>
|
|
<script src="assets/ihk_tools/er_editor.js"></script>
|
|
<script src="assets/ihk_tools/struktogramm_editor.js"></script>
|
|
<script src="assets/ihk_tools/uml_editor.js"></script>
|
|
<script src="assets/ihk_tools/diagram_studio.js"></script>
|
|
<script>
|
|
// Conditional nav-ihk-link visibility in Diagram Studio
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const u = window.AUTH ? window.AUTH.getUser() : null;
|
|
const navIhk = document.getElementById('nav-ihk-link');
|
|
if (navIhk && u && (u.profession || u.role === 'admin' || u.role === 'teacher')) {
|
|
navIhk.style.display = 'inline-flex';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|