+
+
+
+ Connect the device to your home WiFi network.
+
+
+
+
diff --git a/devices/sh_core_esp8266/src/styles.cpp b/devices/sh_core_esp8266/src/styles.cpp
new file mode 100644
index 0000000..50011d9
--- /dev/null
+++ b/devices/sh_core_esp8266/src/styles.cpp
@@ -0,0 +1,234 @@
+#include "styles.h"
+
+const char css_styles[] PROGMEM = R"CSS(
+* {
+ margin: 0;
+ padding: 0;
+ outline: none;
+ box-sizing: border-box;
+}
+
+body {
+ background: #000;
+ color: #fefefe;
+ font-family: sans-serif;
+}
+
+.container {
+ width: 100%;
+ max-width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.window {
+ width: 100%;
+ margin: 40px 0;
+ border: 4px solid #fefefe;
+}
+
+.window-heading {
+ padding: 15px 30px;
+ background: #fefefe;
+ color: black;
+ width: max-content;
+ min-width: 320px;
+ text-transform: uppercase;
+}
+
+.window-content {
+ padding: 30px;
+}
+
+.row {
+ display: flex;
+ flex-direction: row;
+ gap: 30px;
+}
+
+.col {
+ width: 100%;
+}
+
+p, .mb {
+ margin-bottom: 15px;
+}
+
+.mt {
+ margin-top: 15px;
+}
+
+.mt-2 {
+ margin-top: 30px;
+}
+
+.wifi-list-header {
+ margin-bottom: 15px;
+ display: flex;
+ flex-direction: row;
+ gap: 30px;
+ justify-content: space-between;
+ width: 100%;
+ align-items: center;
+}
+
+.wifi-list-header .heading, .window-content .sub-heading {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.wifi-list-container {
+ width: 100%;
+}
+
+.wifi-list {
+ width: 100%;
+}
+
+.wifi-list-body {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.wifi-row {
+ width: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 15px;
+}
+
+.wifi-row button, .signal, .wifi-list-header button, .btn {
+ width: 100%;
+ background: #fefefe;
+ border: 2px solid #fefefe;
+ color: #000;
+ padding: 15px 20px;
+ text-align: left;
+ font-size: 18px;
+ font-weight: 600;
+ position: relative;
+ transition-duration: .2s;
+ transition-property: border-color, background, color;
+}
+
+.btn:hover, .wifi-row button:hover, .wifi-list-header button:hover {
+ background: #1dd3b0;
+ border-color: #1dd3b0;
+}
+
+.wifi-row button:before, .btn:before {
+ content: "►";
+ display: block;
+ position: absolute;
+ right: 20px;
+}
+
+.wifi-row .signal, .wifi-list-header button {
+ width: 75px;
+ min-width: 75px;
+ height: 100%;
+ border: 2px solid #fefefe;
+ display: flex;
+ padding: 15px;
+ justify-content: center;
+}
+
+.wifi-list-header button {
+ font-size: 36px;
+ height: 54px;
+ display: flex;
+ align-items: center;
+}
+
+.wifi-row .signal {
+ color: #fefefe;
+ background: transparent;
+}
+
+.signal-bar {
+ display: none;
+}
+
+footer {
+ padding: 0 30px;
+}
+
+.window-content .sub-heading {
+ height: 54px;
+ display: flex;
+ align-items: center;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.form-group .btn {
+ background: #1dd3b0;
+ border-color: #1dd3b0;
+}
+
+.form-group .btn:hover {
+ border-color: #17ffc4;
+ background: #17ffc4;
+}
+
+.form-control {
+ width: 100%;
+ height: 54px;
+ border: 2px solid #1dd3b0;
+ color: #1dd3b0;
+ background: transparent;
+ padding: 15px 20px;
+ font-size: 18px;
+ font-weight: 600;
+ transition-duration: .2s;
+ transition-property: border-color;
+}
+
+.form-control::placeholder {
+ color: #ccc;
+}
+
+.form-control:focus {
+ border-color: #17ffc4;
+}
+
+.error-box {
+ min-height: 54px;
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 600;
+ color: #f72585;
+ padding: 15px 20px;
+ border: 2px solid #f72585;
+}
+
+.scanning {
+ min-height: 54px;
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 600;
+ color: #1dd3b0;
+ padding: 15px 20px;
+ border: 2px solid #1dd3b0;
+}
+
+@media (max-width: 900px) {
+ .window-content > .row {
+ flex-direction: column;
+ }
+}
+)CSS";
+
+String get_css_styles() {
+ return String(FPSTR(css_styles));
+}
\ No newline at end of file
diff --git a/devices/sh_core_esp8266/src/styles.h b/devices/sh_core_esp8266/src/styles.h
new file mode 100644
index 0000000..88e2bf7
--- /dev/null
+++ b/devices/sh_core_esp8266/src/styles.h
@@ -0,0 +1,11 @@
+#ifndef SH_STYLES_H
+#define SH_STYLES_H
+
+#include
+#include
+
+extern const char css_styles[] PROGMEM;
+
+String get_css_styles();
+
+#endif