|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EU AI Obligations for Developers - Interactive Flowchart</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<h1>🇪🇺 EU AI Act Obligations for GPAI 🇪🇺</h1> |
|
|
<p class="subtitle">Interactive flowchart to determine your obligations under the EU AI Act</p> |
|
|
</header> |
|
|
|
|
|
<div class="mode-selector"> |
|
|
<button id="guided-btn" class="mode-btn active">Guided Mode</button> |
|
|
<button id="flowchart-btn" class="mode-btn">Full Flowchart</button> |
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div id="guided-mode" class="guided-mode"> |
|
|
<div class="navigation-panel"> |
|
|
<div class="context-section"> |
|
|
<h3>Context</h3> |
|
|
<div class="context-text">You develop a GPAI model</div> |
|
|
</div> |
|
|
|
|
|
<div class="history-section"> |
|
|
<h3>Decision History</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="current-panel"> |
|
|
<div id="question-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="flowchart-mode" class="flowchart-mode hidden"> |
|
|
<div class="controls"> |
|
|
<button class="control-btn" onclick="zoomIn()" title="Zoom In">+</button> |
|
|
<button class="control-btn" onclick="zoomOut()" title="Zoom Out">−</button> |
|
|
<button class="control-btn" onclick="resetView()" title="Reset View">⌂</button> |
|
|
</div> |
|
|
<div class="flowchart-container" id="flowchart-container"> |
|
|
<div id="mermaid-container"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
