/*
 *  JSS-01 |JavaScript Software Synthesizer
 *  Copyright (c) 2023 Michael Kolesidis <michael.kolesidis@gmail.com>
 *  GNU Affero General Public License v3.0
 *
 */

export default function index() {
  return /*html*/ `
<div id="splash-screen">
    <img src="./assets/logo/logo_192.png" alt="" />
</div>
<div id="page-container">
    <div id="content-wrap">
    <!----------------------------------------------------------->
    <!-- Header -->
    <!----------------------------------------------------------->
    <div id="header" tabindex="0"></div>
    <!----------------------------------------------------------->
    <!-- Synthesizer Panel -->
    <!----------------------------------------------------------->
    <div id="synthesizer">
        <!----------------------------------------------------------->
        <!-- Displays -->
        <!----------------------------------------------------------->
        <div id="displays"></div>
        <!----------------------------------------------------------->
        <!-- Synth Section -->
        <!----------------------------------------------------------->
        <div id="synth-section"></div>
        <!----------------------------------------------------------->
        <!-- Modulation  Section -->
        <!----------------------------------------------------------->
        <div id="modulation-section"></div>
        <!----------------------------------------------------------->
        <!-- Effects  Section -->
        <!----------------------------------------------------------->
        <div id="effects"></div>
    </div>
    <!----------------------------------------------------------->
    <!-- Extra Controls (Presets, Sequencer etc.) -->
    <!----------------------------------------------------------->
    <div id="extras">
        <div id="sequencer"></div>
        <!-- <div id="recorder">
        <button type="button" id="rec">●</button>
        <button type="button" id="rec-stop">■</button>
        </div> -->
    </div>
    <!----------------------------------------------------------->
    <!-- Keyboard -->
    <!----------------------------------------------------------->
    <div id="keyboard"></div>
    </div>
    <!----------------------------------------------------------->
    <!-- Footer -->
    <!----------------------------------------------------------->
    <div id="footer"></div>
    <!----------------------------------------------------------->
    <!-- Inverted Colors -->
    <!----------------------------------------------------------->
    <div id="overlay"></div>
</div>
`;
}