index.html

<!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">
            <!-- Guided Mode -->
            <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">
                        <!-- Dynamic content will be inserted here -->
                    </div>
                </div>
            </div>

            <!-- Full Flowchart Mode -->
            <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>