87 lines
3.9 KiB
HTML
87 lines
3.9 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">🏠 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">🎓 IHK-Prüfung</a>
|
|
</nav>
|
|
</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/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>
|
|
</body>
|
|
</html>
|