diff --git a/src/WebContent.h b/src/WebContent.h index fc80dfd..4870d15 100644 --- a/src/WebContent.h +++ b/src/WebContent.h @@ -4,50 +4,26 @@ const char index_html[] PROGMEM = R"rawliteral( HannaBox - +

HannaBox

%PLAYING%

-

-

-

+ + + +
+ +  
- -
- - -
-
- -
+
+ + +
+
+ +

Content of SD Card:

@@ -82,6 +58,7 @@ const char index_html[] PROGMEM = R"rawliteral( xhr.onreadystatechange = function() { if (xhr.readyState === 4) { displayState(xhr.response); + } } @@ -91,6 +68,13 @@ const char index_html[] PROGMEM = R"rawliteral( function displayState(state) { document.getElementById("state").innerHTML = state; + var elements = document.getElementsByClassName('play-button'); + var btn = elements[0]; + if (state=='-') { + btn.classList.remove('paused'); + } else { + btn.classList.add('paused'); + } } function playNamedSong(song) { diff --git a/src/css.h b/src/css.h new file mode 100644 index 0000000..0815c37 --- /dev/null +++ b/src/css.h @@ -0,0 +1,67 @@ +const char css[] PROGMEM = R"rawliteral( +body { + font-family: Arial; + margin: 5px auto; + padding: 30px; +} + +li { + cursor: pointer; +} + +.play-button { + border: 0; + background: transparent; + box-sizing: border-box; + width: 0; + margin: 5%; + height: 74px; + border-color: transparent transparent transparent grey; + transition: 100ms all ease; + cursor: pointer; + border-style: solid; + border-width: 37px 0 37px 60px; + margin-right: 10%; + margin-left: 10%; + margin-top: 5%; + margin-bottom: 5%; +} +.play-button.paused { + border-style: double; + border-width: 0px 0 0px 60px; +} + .play-button:hover { + border-color: transparent transparent transparent darkgrey; +} + +.next-button { + background: transparent; + padding: 0; + margin: -6px; + border-style: solid; + border-width: 18px 0 18px 30px; + border-color: transparent grey transparent grey; + box-shadow: 10px 0 0 0 grey; +} + +.next-button:hover { + border-color: transparent darkgrey transparent darkgrey; + box-shadow: 10px 0 0 0 darkgrey; +} + +.prev-button { + background: transparent; + padding: 0; + margin: 0; + border-style: solid; + border-width: 18px 30px 18px 0; + border-color: transparent grey transparent grey; + box-shadow: -10px 0 0 0 grey; +} + +.prev-button:hover { + border-color: transparent darkgrey transparent darkgrey; + box-shadow: -10px 0 0 0 darkgrey; +} + +)rawliteral"; \ No newline at end of file diff --git a/src/main.cpp b/src/main.cpp index 484c128..525a367 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -32,6 +32,7 @@ #include "globals.h" #include "WebContent.h" +#include "css.h" #include "DirectoryNode.h" File root; @@ -175,7 +176,7 @@ String getState() } else { - state += "Stopped "; + return "-"; } if (currentNode) { @@ -304,6 +305,9 @@ void setup() server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { request->send_P(200, "text/html", index_html, processor); }); + server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) + { request->send_P(200, "text/css", css); }); + server.on("/state", HTTP_GET, [](AsyncWebServerRequest *request) { String state = getState();