Dynamische Seite für ESP Chip

[svenpaush]

Hallo, ich habe ein Whirlpool das eine Steuerung mit 5 Tasten und ein Display hat. Nun habe ich ein Programm geschrieben das sich zwischen die Kommunikation hängt. Das Programm zeigt mir als Text den Zustand des Display an und ich kann den Pool über die PC Tastatur steuern. Das Programm habe ich nun auf einen ESP Chip portiert und möchte dafür eine Webseite bauen.

Da ich bis auf eine einfache statische Hallo Welt Webseite noch nie etwas gemacht habe stehe ich gerade vor einem Berg unbekannter.

Nachdem ich hier auf Selfhtml ein paar Stunden gelesen habe dreht sich gerade alles bei mir im Kopf und weiß gar nicht mehr wo ich zuerst anfangen soll.

Ich stelle mir die Seite wie folgt vor. Sie soll einen Titel haben und 3 weitere Bereiche.

1. für die Virtuellen Tasten (Links unter der Überschrift)
2. für das Display (Rechts unter der Überschrift)
3. Ein kleines log Fenster. (unterhalb der Tastatur und Display)

Mein noch nicht sehr hübscher Versuch ist der Link Problematische Seite.

Für die Einteilung der Bereiche habe ich mich an display: grid versucht.

Ich versuche nun die ganze Zeit die Tastatur und den Display Bereich nebeneinander zu bekommen. Bekomme es aber gerade nicht hin.

Die Tasten wären dann Buttons. Diese stehen gerade noch untereinander. Muss ich die dann über eine Tabelle formatieren oder gibt es bessere Möglichkeiten?

Bei dem Display hätte ich gern ein Tipp was es für Möglichkeiten gibt. Ich dachte evtl. auch an Button die ich dann über ein Farbwechsel grau oder rot darstelle. Also rot ist aktiv grau ist aus. Wie gesagt da habt ihr bestimmt noch bessere Ideen.

Für den Log Bereich habe ich textarea genutzt. Per Java Script arbeitet die Seite per websocket. Das mit den Logmeldungen klappt schon einmal und wenn ich einen Button drücke erhält der ESP auch den Tastendruck. Also grundsätzlich funktioniert das ganze. Aber bei dem Layout breche mir gerade einen ab.

So sieht das Original Display aus.