Beckhoff IPC Connection Matrix

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beckhoff IPC Connection Matrix</title>
<style>
    :root {
        --bg: #f8fafc; --card: #ffffff; --text-main: #0f172a; --text-muted: #64748b;
        --border: #e2e8f0; --border-light: #f1f5f9;
        
        /* Status Colors */
        --ok-bg: #d1fae5; --ok-text: #065f46; --ok-border: #10b981;
        --fail-bg: #fee2e2; --fail-text: #991b1b; --fail-border: #ef4444;
        --warn-bg: #fef3c7; --warn-text: #92400e; --warn-border: #f59e0b;
        --block-bg: #f1f5f9; --block-text: #475569; --block-border: #94a3b8;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        background: var(--bg); color: var(--text-main);
        line-height: 1.5; padding: 32px;
    }

    /* --- HEADER & GLOBAL STATUS --- */
    .dashboard-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 32px; flex-wrap: wrap; gap: 20px;
    }
    .header-title h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
    .header-title p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
    
    .global-status {
        display: flex; align-items: center; gap: 16px;
        background: var(--card); padding: 12px 20px; border-radius: 12px;
        border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    }
    .status-indicator {
        width: 12px; height: 12px; border-radius: 50%; background: var(--fail-border);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
        animation: pulse 2s infinite;
    }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
    .status-text {...