<!DOCTYPE html>

<html lang="en">
    <head>
        <title>LED Cube</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script defer type="text/javascript" src="index.js"></script>
    </head>

    <body>
        <div id="cube-window">
            <div id="cube">
                <!--
                <div class="layer">
                    <div class="row">
                        <div class="led led-off"></div>
                        <div class="led led-previous"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="layer-submenu">
                        <div class="submenu-line"></div>
                        <div class="layer-buttons">
                            <div class="layer-button layer-button-on" title="Alle an"></div>
                            <div class="layer-button layer-button-off" title="Alle aus"></div>
                        </div>
                    </div>
                </div>

                <div class="layer">
                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>
                </div>

                <div class="layer">
                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>
                </div>

                <div class="layer">
                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>

                    <div class="row">
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>
                        <div class="led"></div>    
                    </div>
                </div>
                -->
            </div>
        </div>

        <div id="animation-window">
            <div id="frame-menu">
                <button class="icon-button icon-button-play" id="button-play-frames" title="Animation abspielen"></button>
                <button id="button-stop-frames" class="icon-button icon-button-stop" title="Animation stoppen"></button>

                <div id="frame-bar">
                    <div id="frame-display">Frame: <span id="current-frame">1</span>/<span id="frame-number">1</span></div>
                    <input id="frame-slider" type="range" step="1" min="1" max="1" value="1">
                </div>

                <input type="number" class="suffix suffix-ms" min="1" step="1" max="65355" value="100" title="Frame-Dauer (ms)">

                <button id="button-add-frame" title="Frame hinzufügen">+</button>
                <button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen"></button>
            </div>
        </div>
    </body>
</html>