// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
  <head>
    <title>HannaBox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link rel='stylesheet' href='/style.css' type='text/css' media='all' />
  </head>
  <body>
    <h1>🎵 HannaBox 🎵</h1>
    <span id="state"></span><br/><br/>
    <span id="voltage"></span><br/>
    <span id="uid"></span><br/>
    <span id="heap"></span><br/>

<div>
    <button class="prev-button" onclick="simpleGetCall('previous');""></button>
    <button class="play-button" onclick="simpleGetCall('toggleplaypause');"></button>
    <button class="next-button" onclick="simpleGetCall('next');"></button><br/><br/>
</div>   
  <div class="slidecontainer">
    
    <input name="progress" type="range" min="0" max="100" value="0" class="slider" id="progressSlider" 
    onchange="postValue('progress',document.getElementById('progressSlider').value);lastChange = Date.now();userIsInteracting = false;"
    oninput="userIsInteracting = true;"
    >
    <label for="progress" id="progressLabel"></label>
  </div>
  <div class="slidecontainer">    
    <input name="volume" type="range" min="0" max="15" value="7" class="slider" id="volumeSlider" 
    onchange="postValue('volume',document.getElementById('volumeSlider').value);lastChange = Date.now()"
    >
    <label for="volume">Vol</label>
  </div> 
<!--
    <button onmouseup="simpleGetCall('stop');" ontouchend="simpleGetCall('stop');">Stop</button>&nbsp; 
    -->

   <p class="playlist-container">
   <h2>🎶 Playlist 🎶</h2>
   %DIRECTORY%
   </p>

   <form id="uploadForm" method="POST" action="/upload" enctype="multipart/form-data">
      <input type="file" name="data" id="uploadFile" accept=".mp3,.wav,.flac,.m4a,.ogg"/>
      <input type="submit" name="upload" value="Upload" title="Upload Audio File" id="uploadButton"/>
      <div id="uploadStatus"></div>
      <div id="uploadProgress" style="display: none;">
        <div class="progress-bar">
          <div class="progress-fill" id="progressFill"></div>
        </div>
        <span id="progressText">0%</span>
      </div>
    </form>

    <h2>Edit RFID Mapping</h2>
    <form id="editMappingForm">
      <label for="rfid">RFID:</label>
      <input type="text" id="rfid" name="rfid" required><br>
      <label for="song">Song:</label>
      <input type="text" id="song" name="song" required><br>
      <button type="button" onclick="editMapping()">Update Mapping</button>
    </form>

   <script src="/script.js"></script>
  </body>
</html>)rawliteral";
