From dd6d5c4bdf373c9fe9bc41d6293ce85b7ea724fd Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 26 Apr 2020 12:46:56 +0200 Subject: [PATCH] Index HTML page and styling w/ capabilties JSON data that defines buttons to display and lets other clients discover its capabilities. --- capabilities.h | 21 +++++++++++++++++++++ index.h | 43 +++++++++++++++++++++++++++++++++++++++++++ style.h | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+) create mode 100644 capabilities.h create mode 100644 index.h create mode 100644 style.h diff --git a/capabilities.h b/capabilities.h new file mode 100644 index 0000000..06ffcab --- /dev/null +++ b/capabilities.h @@ -0,0 +1,21 @@ +const char capabilities[] PROGMEM = R"=====( +const amp = [{ cmd: 'down', name: 'Decrease volume', icon: '' }, + { cmd: 'up', name: 'Increase volume', icon: '' }, + { cmd: 'audio1', name: 'Audio 1', icon: '' }, + { cmd: 'audio2', name: 'Audio 2', icon: '' }, + { cmd: 'av1', name: 'AV 1', icon: '' }, + { cmd: 'av2', name: 'AV 2', icon: '' }, + { cmd: 'av3', name: 'AV 3', icon: '' }, + { cmd: 'av4', name: 'AV 4', icon: '' }, + { cmd: 'hdmi1', name: 'HDMI 1', icon: '' }, + { cmd: 'hdmi2', name: 'HDMI 2', icon: '' }, + { cmd: 'pwrAmp', name: 'Toggle Amp', icon: '' }]; + +const tv = [{ cmd: 'pwrTv', name: 'Toggle TV' }, + { cmd: 'input1', name: 'Switch' }, + { cmd: 'input2', name: 'Xbone' } , + { cmd: 'input3', name: 'Chromecast' }, + { cmd: 'enter', name: 'Enter' }] + +const capabilities = { 'amp': amp, 'tv': tv } +)====="; diff --git a/index.h b/index.h new file mode 100644 index 0000000..a158c81 --- /dev/null +++ b/index.h @@ -0,0 +1,43 @@ +const char html[] PROGMEM = R"=====( + + + + + + +

ESP Media controller

+ + + +)====="; diff --git a/style.h b/style.h new file mode 100644 index 0000000..2677e5e --- /dev/null +++ b/style.h @@ -0,0 +1,47 @@ +const char css[] PROGMEM = R"=====( +body { + font-family: Helvetica Neue; + background-color: black; + color: white; +} +h2 { + text-transform: uppercase; + width: 100%; +} +hr { + width: 100%; + border: 1px solid #323136; + margin-top: 1.5rem; +} +.container { + display: flex; + flex-wrap: wrap; + width: 95%; + max-width: 1000px; + margin: 0 auto; + justify-content: space-between; +} +.container button { + -webkit-apperance: unset; + touch-action: manipulation; + width: 8rem; + height: 2rem; + border-radius: 16px; + border: unset; + background-color: white; + color: black; + font-weight: 600; + margin: 0.3rem 0; + padding: 0.9rem; + font-size: 1.2rem; + line-height: 1.2rem; + box-sizing: unset; + + @media (min-width: 768px) { + margin: 0.3rem; + } +} +.container button i::before { + content: ''; +} +)====="; \ No newline at end of file