259 lines
12 KiB
HTML
259 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MYP Netzwerk-Architektur | Mercedes-Benz 3D-Druck-Management</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="diagram-container">
|
|
<!-- Header -->
|
|
<header class="diagram-header">
|
|
<h1>MYP Netzwerk-Architektur</h1>
|
|
<p>Mercedes-Benz 3D-Druck-Management-System | TBA Marienfelde</p>
|
|
<div class="system-status">
|
|
<span class="status-indicator online"></span>
|
|
<span>Production System Online</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Network Diagram -->
|
|
<div class="network-diagram">
|
|
|
|
<!-- Frontend Nodes -->
|
|
<div class="node frontend-node" id="kiosk" style="left: 100px; top: 100px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🏭</div>
|
|
<div class="node-label">Mercedes Kiosk</div>
|
|
<div class="node-detail">TBA Terminal</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node frontend-node" id="webapp" style="left: 400px; top: 100px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">⚛️</div>
|
|
<div class="node-label">Next.js PWA</div>
|
|
<div class="node-detail">Web Interface</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node frontend-node" id="auth" style="left: 700px; top: 100px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔐</div>
|
|
<div class="node-label">Auth System</div>
|
|
<div class="node-detail">bcrypt + OTP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backend Nodes -->
|
|
<div class="node backend-node server-main" id="server" style="left: 100px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖥️</div>
|
|
<div class="node-label">Raspberry Pi 4B</div>
|
|
<div class="node-detail">192.168.0.100</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node backend-node" id="flask" style="left: 300px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🐍</div>
|
|
<div class="node-label">Flask Backend</div>
|
|
<div class="node-detail">REST API</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node backend-node" id="database" style="left: 500px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🗄️</div>
|
|
<div class="node-label">SQLite WAL</div>
|
|
<div class="node-detail">Database</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node backend-node" id="scheduler" style="left: 700px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">⏰</div>
|
|
<div class="node-label">Job Scheduler</div>
|
|
<div class="node-detail">APScheduler</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node backend-node" id="security" style="left: 900px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🛡️</div>
|
|
<div class="node-label">Security Suite</div>
|
|
<div class="node-detail">SSL/TLS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node backend-node" id="monitor" style="left: 1100px; top: 300px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">📊</div>
|
|
<div class="node-label">Monitoring</div>
|
|
<div class="node-detail">Analytics</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Smart Plug Nodes -->
|
|
<div class="node smartplug-node" id="plug1" style="left: 200px; top: 500px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔌</div>
|
|
<div class="node-label">Tapo P110 #1</div>
|
|
<div class="node-detail">192.168.0.101</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node smartplug-node" id="plug2" style="left: 400px; top: 500px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔌</div>
|
|
<div class="node-label">Tapo P110 #2</div>
|
|
<div class="node-detail">192.168.0.102</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node smartplug-node" id="plug3" style="left: 600px; top: 500px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔌</div>
|
|
<div class="node-label">Tapo P110 #3</div>
|
|
<div class="node-detail">192.168.0.103</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node smartplug-node" id="plug4" style="left: 800px; top: 500px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔌</div>
|
|
<div class="node-label">Tapo P110 #4</div>
|
|
<div class="node-detail">192.168.0.104</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node smartplug-node" id="plug6" style="left: 1000px; top: 500px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🔌</div>
|
|
<div class="node-label">Tapo P110 #6</div>
|
|
<div class="node-detail">192.168.0.106</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3D Printer Nodes -->
|
|
<div class="node printer-node" id="printer1" style="left: 200px; top: 700px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖨️</div>
|
|
<div class="node-label">Arbeitsplatz 1</div>
|
|
<div class="node-detail">Prusa MK3S+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node printer-node" id="printer2" style="left: 400px; top: 700px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖨️</div>
|
|
<div class="node-label">Arbeitsplatz 2</div>
|
|
<div class="node-detail">Ender 3 Pro</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node printer-node" id="printer3" style="left: 600px; top: 700px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖨️</div>
|
|
<div class="node-label">Arbeitsplatz 3</div>
|
|
<div class="node-detail">Bambu Lab A1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node printer-node" id="printer4" style="left: 800px; top: 700px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖨️</div>
|
|
<div class="node-label">Arbeitsplatz 4</div>
|
|
<div class="node-detail">Prusa MINI+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node printer-node" id="printer5" style="left: 1000px; top: 700px;">
|
|
<div class="node-content">
|
|
<div class="node-icon">🖨️</div>
|
|
<div class="node-label">Arbeitsplatz 5</div>
|
|
<div class="node-detail">Artillery X1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Lines SVG -->
|
|
<svg class="connections-layer" width="1300" height="850">
|
|
<!-- Frontend Internal Connections -->
|
|
<line class="connection frontend-conn" x1="175" y1="150" x2="425" y2="150" />
|
|
<line class="connection frontend-conn" x1="475" y1="150" x2="725" y2="150" />
|
|
|
|
<!-- Frontend to Backend -->
|
|
<line class="connection api-conn" x1="175" y1="200" x2="175" y2="250" />
|
|
<line class="connection api-conn" x1="475" y1="200" x2="375" y2="250" />
|
|
<line class="connection auth-conn" x1="775" y1="200" x2="975" y2="250" />
|
|
|
|
<!-- Backend Chain -->
|
|
<line class="connection backend-conn" x1="175" y1="350" x2="325" y2="350" />
|
|
<line class="connection backend-conn" x1="375" y1="350" x2="525" y2="350" />
|
|
<line class="connection backend-conn" x1="575" y1="350" x2="725" y2="350" />
|
|
<line class="connection backend-conn" x1="775" y1="350" x2="925" y2="350" />
|
|
<line class="connection backend-conn" x1="975" y1="350" x2="1125" y2="350" />
|
|
|
|
<!-- Scheduler to Smart Plugs -->
|
|
<line class="connection control-conn" x1="775" y1="400" x2="275" y2="450" />
|
|
<line class="connection control-conn" x1="775" y1="400" x2="475" y2="450" />
|
|
<line class="connection control-conn" x1="775" y1="400" x2="675" y2="450" />
|
|
<line class="connection control-conn" x1="775" y1="400" x2="875" y2="450" />
|
|
<line class="connection control-conn" x1="775" y1="400" x2="1075" y2="450" />
|
|
|
|
<!-- Smart Plugs to Printers (1:1) -->
|
|
<line class="connection power-conn" x1="275" y1="600" x2="275" y2="650" />
|
|
<line class="connection power-conn" x1="475" y1="600" x2="475" y2="650" />
|
|
<line class="connection power-conn" x1="675" y1="600" x2="675" y2="650" />
|
|
<line class="connection power-conn" x1="875" y1="600" x2="875" y2="650" />
|
|
<line class="connection power-conn" x1="1075" y1="600" x2="1075" y2="650" />
|
|
|
|
<!-- Monitoring Connections -->
|
|
<line class="connection monitor-conn" x1="1175" y1="400" x2="1075" y2="450" stroke-dasharray="5,5" />
|
|
<line class="connection monitor-conn" x1="1175" y1="400" x2="1075" y2="650" stroke-dasharray="5,5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="diagram-legend">
|
|
<h3>Verbindungstypen</h3>
|
|
<div class="legend-items">
|
|
<div class="legend-item">
|
|
<div class="legend-line frontend-conn"></div>
|
|
<span>Frontend-Kommunikation</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line api-conn"></div>
|
|
<span>HTTPS API Calls</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line auth-conn"></div>
|
|
<span>Authentifizierung</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line backend-conn"></div>
|
|
<span>Backend Module</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line control-conn"></div>
|
|
<span>Tapo API Control</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line power-conn"></div>
|
|
<span>230V Stromversorgung</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line monitor-conn"></div>
|
|
<span>System Monitoring</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |