editor.php

<div id="ks-editor">
    <!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
    <h1>Interface</h1>
    <div id="2d-graph"></div>
    <section id="toolbar"></section>
    <section id="tool-menu">
        <div id="collect-menu" class="hidden">
            <h3>Collected items</h3>
            <button id="clear-collection">Clear</button>
            <ul id="selected-items"></ul>
        </div>
        <div id="select-menu" class="">
            <p id="nothing-selected">Nothing selected</p>
            <div id="node-selected" class="hidden">
                <label for="node-name" hidden>Name</label>
                <input type="text" id="node-name" name="node-name" placeholder="Enter name" class="bottom-space"></input>

                <label for="node-description">Description</label>
                <textarea id="node-description" name="node-description" class="bottom-space"></textarea>

                <label for="node-image">Node Image</label>
                <img id="node-image-preview" class="preview-image" src="" />
                <input type="text" id="node-image" name="node-image" placeholder="Enter file name or URL" class="medium-width bottom-space" />

                <label for="node-detail-image">Info Image</label>
                <img id="node-detail-image-preview" class="preview-image" src="" />
                <input type="text" id="node-detail-image" name="node-detail-image" placeholder="Enter file name or URL" class="medium-width bottom-space" />

                <label for="node-type">Type</label>
                <select id="node-type" name="node-type" class="bottom-space medium-width">
                    <option value="Vorlesung">Vorlesung</option>
                    <option value="Algorithmus">Algorithmus</option>
                    <option value="Definition">Definition</option>
                    <option value="Beispiel">Beispiel</option>
                    <option value="Übung">Übung</option>
                    <option value="Kapitel">Kapitel</option>
                </select>

                <label for="node-video">Video</label>
                <input type="text" placeholder="Video URL" id="node-video" name="node-video"></input>

                <label for="node-references">References</label> <small>One URL per line</small>
                <textarea id="node-references" name="node-references" class="bottom-space"></textarea>
            </div>
            <div id="link-selected" class="hidden">
                <h3 id="link-name"></h3>
            </div>
        </div>
        <div id="settings-menu" class="hidden" checked>
            <input type="checkbox" checked id="label-toggle" name="label-toggle" class="bottom-space">
            <label for="label-toggle">Show labels in graph</label>
            </input>

            </br>
            
            <label>Simulate physics from beginning</label>
            </br>
            <button id="reanimate-button" name="reanimate-button" class="bottom-space">Re-simulate</button>

            </br>

            <label for="stop-physics-delay">Amount of time [in seconds] after which the physics simulation is stopped</label>
            <input type="number" value="5" id="stop-physics-delay" name="stop-physics-delay" class="small-width">
            </input>
        </div>
    </section>
    <button id="save" type="submit" class="primary">Save and publish</button>
</div>