<div class="robot-container">
        <div class="robot-head" id="robotFace">
            <div class="antenna"></div>
            <div class="circuits">
                <div class="circuit circuit-1"></div>
                <div class="circuit circuit-2"></div>
            </div>
            <div class="eyes">
                <div class="eye"></div>
                <div class="eye"></div>
            </div>
        </div>
    
        <div class="qa-container" id="qaContainer">
            <div class="chat-interface">
                <button class="close-chat" id="closeChat" aria-label="Close chat">×</button>
                <h3>How can I help you?</h3>
                <div class="questions">
                    <button class="question-button" data-question="purpose">Question 1</button>
                    <button class="question-button" data-question="work">Question 2</button>
                    <button class="question-button" data-question="learn">Question 3</button>
                </div>
                <div class="answer" id="answerBox"></div>
            </div>
        </div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>

<script type="module">
    import { PlotSpecManager } from './testGUI/PlotSpecManager.js';         
    import { all_buttons } from './testGUI/data_options.js';
    import { overlay } from './testGUI/overlay.js';

    const overlay_container = document.getElementById('overlay');
    const buttons_container = document.getElementById('buttons');

    import { URLfromFile, URLfromServer, GoslingPlotWithLocalData } from './testGUI/plot.js';
    import { trackTemplate } from './testGUI/track_spec.js';
    import {generateTracks} from './testGUI/track.js';
    import {robotInit}  from './testGUI/robot.js'


    document.addEventListener('DOMContentLoaded', async function () { 
        await overlay(overlay_container);
        await all_buttons(buttons_container);
        await generateTracks();
        robotInit();
    });
</script>