i was bored so made up this interface based on webserver code written by Makerbro. It was a lesson for me in CSS and javascript and is basically a webpage running on the wemos that allows you to toggle ON/OFF pins D1 to D8. Obviously pins A0 and D0 arent used but I wanted to connect an 8 module relay board to use for switching lights on and off.
OH and themed in Arduino style 
/*------------------------------------------------------------------------------
07/01/2018
Author: Makerbro
Platforms: ESP8266
Language: C++/Arduino
File: webserver_html.ino
------------------------------------------------------------------------------
Description:
Code for YouTube video demonstrating how to use HTML weppages in a web
server's response.
https://youtu.be/VNgFbQAVboA
Do you like my videos? You can support the channel on Patreon:
https://patreon.com/acrobotic
------------------------------------------------------------------------------
Please consider buying products from ACROBOTIC to help fund future
Open-Source projects like this! We'll always put our best effort in every
project, and release all our design files and code for you to use.
https://acrobotic.com/
------------------------------------------------------------------------------
License:
Please see attached LICENSE.txt file for details.
------------------------------------------------------------------------------*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server;
char* ssid = "Enter you network name";
char* password = "Enter your network password";
IPAddress ip(192,168,1,150); /* Choose a fixed IP address. Change it to what you want */
IPAddress subnet(255,255,255,0);
IPAddress gateway(192,168,1,1); /* Your router address */
char pin[] = {D1, D2, D3, D4, D5, D6, D7, D8};
char webpage[] PROGMEM = R"=====(
<html>
<head>
<title>WEMOS D1 MINI CONTROL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Learn CSS at https://www.w3schools.com/css/default.asp */-->
<style>
* {
box-sizing: border-box;
}
body {
background: black;
font-size: 10px;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
text-decoration: none;
margin: 0;
}
.top {
background: #145252;
margin-bottom: 0;
padding: 18;
}
.header {
color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #33cccc;
width: 100%;
margin: 0;
padding: 10;
}
.footer {
text-align: center;
color: #ff3300;
background: #000;
width: 100%;
padding: 20px 5px;
margin: 0;
}
.button {
background-color: white;
border: 1px solid black;
color: black;
padding: 15px 32px;
width: 100%;
display: inline-block;
font-size: 16px;
font-weight: bold;
transition-duration: 0.2s;
cursor: pointer;
}
.button:hover {
background-color: #33cccc; /* Aqua */
color: black;
border: 1px solid white;
}
.column {
float: left;
width: 50%;
padding: 0;
margin: 0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* scale the screen for smaller devices */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.white {
color: white;
}
.orange {
color: #ff3300;
}
.aqua {
color: #33cccc;
}
</style>
</head>
<body>
<p class="top"></p>
<div>
<p class="header">.:Wemos D1 Mini Pin ON/OFF:.</p>
</div>
<div class="row">
<div class="column">
<button class="button" id="0"><span class="aqua">Toggle</span>(pin[<span class="orange">D1</span>])</button>
<button class="button" id="1"><span class="aqua">Toggle</span>(pin[<span class="orange">D2</span>])</button>
<button class="button" id="2"><span class="aqua">Toggle</span>(pin[<span class="orange">D3</span>])</button>
<button class="button" id="3"><span class="aqua">Toggle</span>(pin[<span class="orange">D4</span>])</button>
</div>
<div class="column">
<button class="button" id="4"><span class="aqua">Toggle</span>(pin[<span class="orange">D5</span>])</button>
<button class="button" id="5"><span class="aqua">Toggle</span>(pin[<span class="orange">D6</span>])</button>
<button class="button" id="6"><span class="aqua">Toggle</span>(pin[<span class="orange">D7</span>])</button>
<button class="button" id="7"><span class="aqua">Toggle</span>(pin[<span class="orange">D8</span>])</button>
</div>
</div>
<div>
<p class="header" style="padding: 10">..:: Choose your destiny ::..</p>
<p class="footer">Connect your output devices to a pin on the WEMOS mini D1
Click on a button to turn the corresponding pin ON or OFF
<span class="white">Original code developed by Makerbro https://www.acrobotic.com
Modified and adapted by the Weekend-Code-Warrior ©
</span>
Designed to make interfacing easy for beginners...[ 100% ]</p>
</div>
</body>
<script>
document.querySelectorAll('.button').forEach(function(b) {
b.addEventListener("click", function(t) {
window.location.href='/toggle?pin_number='+t.target.id
console.log(t.target.id)
})
});
</script>
</html>
)=====";
void setup() {
initialPinState();
WiFi.config(ip, gateway, subnet);
WiFi.begin(ssid,password);
Serial.begin(115200);
while(WiFi.status()!=WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
server.on("/",[](){server.send_P(200,"text/html",webpage);});
server.on("/toggle",toggleFunction);
server.begin();
}
void loop()
{
server.handleClient();
}
void initialPinState()
{
int i;
for (i = 0; i < sizeof(pin); i++) {
pinMode(pin[i], OUTPUT);
digitalWrite(pin[i], HIGH);
}
}
void toggleFunction()
{
String pin_number = server.arg("pin_number");
digitalWrite(pin[pin_number.toInt()],!digitalRead(pin[pin_number.toInt()]));
server.send_P(200,"text/html",webpage);
}
