diff --git a/index.html b/index.html
index 77ed309..a3d1594 100644
--- a/index.html
+++ b/index.html
@@ -1,54 +1,32 @@
-
-Pi-power - socket control
-
-
-
-
+
+
+ Pi-power - control
+
+
+
+
+
+
-
-Pi power web control
-
-
-
-
-
+
+
+ - One
+ - One
+ - Two
+ - Two
+ - Three
+ - Three
+ - Four
+ - Four
+ - All
+ - All
+
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..dbc932a
Binary files /dev/null and b/public/icon.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..88b9ac9
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,14 @@
+{
+ "short_name": "pi-power",
+ "name": "Penguin Tutors Pi-power",
+ "icons": [
+ {
+ "src": "icon.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ }
+ ],
+ "start_url": "/",
+ "display": "standalone",
+ "orientation": "portrait"
+}
\ No newline at end of file
diff --git a/public/offbutton.png b/public/offbutton.png
deleted file mode 100644
index 0162298..0000000
Binary files a/public/offbutton.png and /dev/null differ
diff --git a/public/onbutton.png b/public/onbutton.png
deleted file mode 100644
index 1ff348c..0000000
Binary files a/public/onbutton.png and /dev/null differ
diff --git a/public/pipower.css b/public/pipower.css
index 5ce39c5..85e1090 100644
--- a/public/pipower.css
+++ b/public/pipower.css
@@ -1,15 +1,85 @@
+html, body {
+ height: 100%;
+ margin: 0;
+ background-color: darkslategrey !important;
+ font-family: 'Open Sans', sans-serif;
+}
+.flex-container {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ list-style: none;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ align-content: stretch;
+ align-items: stretch;
+ justify-content: space-around;
+}
-div#centre {
- position:relative;
- margin-left:auto;
- margin-right:auto;
- top: 20px;
- width: 400px;
- background-color: #CCCCCC;
+.flex-item-on {
+ width: 50%;
+ box-sizing: border-box;
+ color: white;
+ font-size: 7vw;
+ font-weight: bold;
+ text-align: center;
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ padding-left: 4px;
+ padding-right: 2px;
+ padding-bottom: 4px;
+ background-image: linear-gradient(mediumseagreen, mediumseagreen), linear-gradient(darkslategrey, darkslategrey);
+ background-clip: content-box, padding-box;
}
-.imgonbutton, .imgoffbutton {
- cursor: pointer;
+.flex-item-off {
+ width: 50%;
+ box-sizing: border-box;
+ color: white;
+ font-size: 7vw;
+ font-weight: bold;
+ text-align: center;
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ padding-left: 2px;
+ padding-right: 4px;
+ padding-bottom: 4px;
+ padding-top: 0px;
+ background-image: linear-gradient(tomato, tomato), linear-gradient(darkslategrey, darkslategrey);
+ background-clip: content-box, padding-box;
+}
+.flex-item-header {
+ background: darkslategrey;
+ width: 100%;
+ box-sizing: border-box;
+ color: white;
+ font-size: 7vw;
+ font-weight: bold;
+ text-align: center;
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: auto;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
}
