From b8dd1f1953f0f79cf41269e93cea0d95a58b688b Mon Sep 17 00:00:00 2001 From: Patrick Schwarz Date: Wed, 23 Oct 2024 17:16:53 +0200 Subject: [PATCH 01/17] DMX-17 init branch --- src/webtest.cpp | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/webtest.cpp diff --git a/src/webtest.cpp b/src/webtest.cpp new file mode 100644 index 0000000..e69de29 From 55348d19f53cd4736c88a21af51b92a30b964d9a Mon Sep 17 00:00:00 2001 From: Patrick Schwarz Date: Wed, 23 Oct 2024 20:29:31 +0200 Subject: [PATCH 02/17] fixed libs and deleted unnecessary file --- platformio.ini | 2 +- src/webtest.cpp | 0 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 src/webtest.cpp diff --git a/platformio.ini b/platformio.ini index 07919a5..35735e1 100644 --- a/platformio.ini +++ b/platformio.ini @@ -14,4 +14,4 @@ board = lolin_s2_mini framework = arduino lib_deps = hideakitai/ArtNet @ ^0.8.0 - someweisguy/esp_dmx @ ^4.1.0 \ No newline at end of file + me-no-dev/ESP Async WebServer@^1.2.4 \ No newline at end of file diff --git a/src/webtest.cpp b/src/webtest.cpp deleted file mode 100644 index e69de29..0000000 From ab1e60ba03fd3aa82bfdac02ed8b2cd0af7dd01d Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Wed, 23 Oct 2024 22:35:49 +0200 Subject: [PATCH 03/17] added a basic html site --- src/main.cpp | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index f703549..944bec1 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -1,10 +1,8 @@ -// Art-Net DMX Interface Demo -// 2024-10-17 Patrick Schwarz - #include // #include #include "ESPDMX.h" +#include // WiFi stuff const char *ssid = "artnet"; @@ -13,6 +11,8 @@ const IPAddress ip(192, 168, 1, 201); const IPAddress gateway(192, 168, 1, 1); const IPAddress subnet(255, 255, 255, 0); +AsyncWebServer server(80); + // Art-Net stuff ArtnetWiFi artnet; // const String target_ip = "192.168.1.200"; @@ -28,7 +28,7 @@ void setup() { // Serial console - // Serial.begin(115200); + Serial.begin(9600); // WiFi stuff // WiFi.begin(ssid, pwd); @@ -89,6 +89,15 @@ void setup() Serial.print(", size = "); Serial.print(size); Serial.println(")");*/ }); + + server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) + { + Serial.println("ESP32 Web Server: New request received:"); // for debugging + Serial.println("GET /"); // for debugging + request->send(200, "text/html", "

Hello, I'm a DMX-INTERFACE!

"); }); + + server.begin(); + Serial.println("Server started!"); } void loop() From ace5addd8bd6b3e05379aa4fa030ff314fe885aa Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Thu, 24 Oct 2024 17:24:14 +0200 Subject: [PATCH 04/17] added basic website for config --- static/index.html | 89 +++++++++++++++++++++++++++++++++++++++++++++++ static/script.js | 17 +++++++++ static/style.css | 54 ++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+) create mode 100644 static/index.html create mode 100644 static/script.js create mode 100644 static/style.css diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..3adfe3c --- /dev/null +++ b/static/index.html @@ -0,0 +1,89 @@ + + + + + + Document + + + + +

Konfiguration

+ +
+
+ Verbindung + + + +
+ +
+ + + +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ Art-Net + + +
+ + +
+ + diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..5cb05b2 --- /dev/null +++ b/static/script.js @@ -0,0 +1,17 @@ +const form = document.querySelector("form"); +const dynamicInputs = form.querySelectorAll("[data-field][data-values]"); + +document.addEventListener("change", updateVisibility); + +function updateVisibility() { + dynamicInputs.forEach((element) => { + const input = form.querySelector(`#${element.dataset.field}`); + if (element.dataset.values.split("|").includes(input.value)) { + element.classList.remove("hidden"); + } else { + element.classList.add("hidden"); + } + }); +} + +updateVisibility(); diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..52f8086 --- /dev/null +++ b/static/style.css @@ -0,0 +1,54 @@ +:root { + --color-primary: #087e8b; + --color-on-primary: white; +} + +body { + background-color: #222; + color: white; + font-family: Arial, Helvetica, sans-serif; +} + +form > * { + margin-bottom: 16px; +} + +fieldset { + border-radius: 8px; +} + +input, +select { + display: block; + width: 300px; + background-color: #222; + color: white; + border: 1px solid white; + border-radius: 8px; + padding: 8px; + box-sizing: border-box; +} + +input:focus, +select:focus { + outline: none; + border-color: var(--color-primary); +} + +button { + border: none; + inset: none; + border-radius: 8px; + background-color: var(--color-primary); + color: var(--color-on-primary); + padding: 8px 16px; +} + +:is(div:has(:is(input, select)), input, select) + + :is(div:has(:is(input, select)), input, select) { + margin-top: 8px; +} + +.hidden { + display: none; +} From 6665df4cc6e5987f4b1faa926ac83698b2825897 Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:39:41 +0200 Subject: [PATCH 05/17] DMX-17 made data-files possible --- data/index.html | 11 +++++++++++ src/main.cpp | 9 ++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 data/index.html diff --git a/data/index.html b/data/index.html new file mode 100644 index 0000000..9878ae4 --- /dev/null +++ b/data/index.html @@ -0,0 +1,11 @@ + + + + + + Test + + + Your advert could be placed here + + diff --git a/src/main.cpp b/src/main.cpp index 944bec1..cd75af7 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -3,6 +3,7 @@ #include "ESPDMX.h" #include +#include // WiFi stuff const char *ssid = "artnet"; @@ -90,11 +91,17 @@ void setup() Serial.print(size); Serial.println(")");*/ }); + if (!SPIFFS.begin(true)) + { + Serial.println("An Error has occurred while mounting SPIFFS"); + return; + } + server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging - request->send(200, "text/html", "

Hello, I'm a DMX-INTERFACE!

"); }); + request->send(SPIFFS, "/index.html"); }); server.begin(); Serial.println("Server started!"); From 6d2386f080d500b57c6494ada71db95b9edad87b Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:53:30 +0200 Subject: [PATCH 06/17] DMX-17 made server serve static correctly --- src/main.cpp | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index cd75af7..e10e20c 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -97,11 +97,7 @@ void setup() return; } - server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) - { - Serial.println("ESP32 Web Server: New request received:"); // for debugging - Serial.println("GET /"); // for debugging - request->send(SPIFFS, "/index.html"); }); + server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html"); server.begin(); Serial.println("Server started!"); From 0b08427b3eac65be640f1157e1c7693fe65218d7 Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 20:39:07 +0200 Subject: [PATCH 07/17] updated folders to work with default spiffs --- data/index.html | 82 ++++++++++++++++++++++++++++++++++- {static => data}/script.js | 0 {static => data}/style.css | 0 static/index.html | 89 -------------------------------------- 4 files changed, 80 insertions(+), 91 deletions(-) rename {static => data}/script.js (100%) rename {static => data}/style.css (100%) delete mode 100644 static/index.html diff --git a/data/index.html b/data/index.html index 9878ae4..533f1c9 100644 --- a/data/index.html +++ b/data/index.html @@ -3,9 +3,87 @@ - Test + Konfiguration + + - Your advert could be placed here +

Konfiguration

+ +
+
+ Verbindung + + + +
+ +
+ + + +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ Art-Net + + +
+ + +
diff --git a/static/script.js b/data/script.js similarity index 100% rename from static/script.js rename to data/script.js diff --git a/static/style.css b/data/style.css similarity index 100% rename from static/style.css rename to data/style.css diff --git a/static/index.html b/static/index.html deleted file mode 100644 index 3adfe3c..0000000 --- a/static/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - Document - - - - -

Konfiguration

- -
-
- Verbindung - - - -
- -
- - - -
- -
- -
- -
- -
- -
-
- -
- Art-Net - - -
- - -
- - From 813c7385377ca70da0fffb2c46d3e5c9bbbf8e0a Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:44:57 +0200 Subject: [PATCH 08/17] removed code that is currently not needed maybe needed later but bloats the code currently --- src/main.cpp | 48 ++++++------------------------------------------ 1 file changed, 6 insertions(+), 42 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index e10e20c..88220b6 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -52,44 +52,15 @@ void setup() // if Artnet packet comes to this universe, this function is called artnet.subscribeArtDmxUniverse(universe, [&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote) { - /*Serial.print("lambda : artnet data from "); - Serial.print(remote.ip); - Serial.print(":"); - Serial.print(remote.port); - Serial.print(", universe = "); - Serial.print(universe); - Serial.print(", size = "); - Serial.print(size); - Serial.print(") :");*/ + for (size_t i = 0; i < size; ++i) + { + dmx.write((i + 1), data[i]); + } - for (size_t i = 0; i < size; ++i) - { - dmx.write((i + 1), data[i]); - // Serial.print(data[i]); - // Serial.print(","); - } - // Serial.println(); - - dmx.update(); }); + dmx.update(); }); // if Artnet packet comes, this function is called to every universe - artnet.subscribeArtDmx([&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote) - { - /*Serial.print("received ArtNet data from "); - Serial.print(remote.ip); - Serial.print(":"); - Serial.print(remote.port); - Serial.print(", net = "); - Serial.print(metadata.net); - Serial.print(", subnet = "); - Serial.print(metadata.subnet); - Serial.print(", universe = "); - Serial.print(metadata.universe); - Serial.print(", sequence = "); - Serial.print(metadata.sequence); - Serial.print(", size = "); - Serial.print(size); - Serial.println(")");*/ }); + artnet.subscribeArtDmx([&](const uint8_t *data, uint16_t size, const ArtDmxMetadata &metadata, const ArtNetRemoteInfo &remote) {}); if (!SPIFFS.begin(true)) { @@ -106,11 +77,4 @@ void setup() void loop() { artnet.parse(); // check if artnet packet has come and execute callback - - /*value = (millis() / 4) % 256; - memset(data, value, size); - - artnet.setArtDmxData(data, size); - artnet.streamArtDmxTo(target_ip, universe); // automatically send set data in 40fps - // artnet.streamArtDmxTo(target_ip, net, subnet, univ); // or you can set net, subnet, and universe */ } \ No newline at end of file From 3325a18b04f29d7986198c2635e9a2af7831042a Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Thu, 24 Oct 2024 21:54:18 +0200 Subject: [PATCH 09/17] added universe input field per input/output --- data/index.html | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/data/index.html b/data/index.html index 533f1c9..beb02ae 100644 --- a/data/index.html +++ b/data/index.html @@ -73,13 +73,28 @@
- Art-Net + Input/Output 1 +
+ +
+ Input/Output 2 + +
From d0f3ea34c878ac4fa57544e12f2d9695ca98c491 Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:09:19 +0200 Subject: [PATCH 10/17] base logic for config --- src/main.cpp | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index 88220b6..3462312 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -4,33 +4,36 @@ #include "ESPDMX.h" #include #include +#include -// WiFi stuff -const char *ssid = "artnet"; -const char *pwd = "mbgmbgmbg"; -const IPAddress ip(192, 168, 1, 201); -const IPAddress gateway(192, 168, 1, 1); -const IPAddress subnet(255, 255, 255, 0); +Preferences config; +DMXESPSerial dmx; AsyncWebServer server(80); -// Art-Net stuff ArtnetWiFi artnet; -// const String target_ip = "192.168.1.200"; -uint8_t universe = 1; // 0 - 15 const uint16_t size = 512; uint8_t data[size]; -uint8_t value = 0; - -// DMX stuff -DMXESPSerial dmx; void setup() { - - // Serial console Serial.begin(9600); + config.begin("dmx", false); + + uint8_t universe = config.getUChar("universe", 1); + + String ssid = config.getString("ssid", "artnet"); + String pwd = config.getString("pwd", "mbgmbgmbg"); + IPAddress defaultIp(192, 168, 1, 201); + IPAddress ip = config.getUInt("ip", defaultIp); + + IPAddress cidr = config.getUChar("cidr", 24); + + // TODO: \/ Herleiten \/ @psxde + const IPAddress gateway(192, 168, 1, 1); + const IPAddress subnet(255, 255, 255, 0); + // WiFi stuff // WiFi.begin(ssid, pwd); WiFi.softAP(ssid, pwd); @@ -70,6 +73,7 @@ void setup() server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html"); + delay(1000); server.begin(); Serial.println("Server started!"); } From 33fae441633e6a78e4a9a1dd01d09a311e70270f Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:15:42 +0200 Subject: [PATCH 11/17] added basic GET json --- platformio.ini | 3 ++- src/main.cpp | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/platformio.ini b/platformio.ini index 35735e1..2813b14 100644 --- a/platformio.ini +++ b/platformio.ini @@ -14,4 +14,5 @@ board = lolin_s2_mini framework = arduino lib_deps = hideakitai/ArtNet @ ^0.8.0 - me-no-dev/ESP Async WebServer@^1.2.4 \ No newline at end of file + me-no-dev/ESP Async WebServer@^1.2.4 + bblanchon/ArduinoJson @ ^7.2.0 diff --git a/src/main.cpp b/src/main.cpp index 3462312..39c9646 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -1,6 +1,7 @@ #include // #include +#include #include "ESPDMX.h" #include #include @@ -73,6 +74,19 @@ void setup() server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html"); + server.on("/config", HTTP_GET, [&, defaultIp, ssid, pwd, universe](AsyncWebServerRequest *request) + { + DynamicJsonDocument doc(1024); + + doc["ssid"] = ssid; + doc["pwd"] = pwd; + doc["ip"] = defaultIp; + doc["universe"] = universe; + + String jsonString; + serializeJson(doc, jsonString); + + request->send(200, "application/json", jsonString); }); delay(1000); server.begin(); Serial.println("Server started!"); From 1b7e22470add6073af6b3121fb8423515d883297 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Thu, 24 Oct 2024 23:16:36 +0200 Subject: [PATCH 12/17] added switch between input and output --- data/index.html | 21 ++++++++++++++++++++ data/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/data/index.html b/data/index.html index beb02ae..14d1d50 100644 --- a/data/index.html +++ b/data/index.html @@ -74,6 +74,16 @@
Input/Output 1 + Input/Output 2 + + Date: Fri, 25 Oct 2024 23:46:59 +0200 Subject: [PATCH 13/17] renamed file and disabled hidden inputs --- data/index.html | 2 +- data/{script.js => input-visibility.js} | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) rename data/{script.js => input-visibility.js} (62%) diff --git a/data/index.html b/data/index.html index 14d1d50..36043fa 100644 --- a/data/index.html +++ b/data/index.html @@ -5,7 +5,7 @@ Konfiguration - +

Konfiguration

diff --git a/data/script.js b/data/input-visibility.js similarity index 62% rename from data/script.js rename to data/input-visibility.js index 5cb05b2..d22615f 100644 --- a/data/script.js +++ b/data/input-visibility.js @@ -8,8 +8,14 @@ function updateVisibility() { const input = form.querySelector(`#${element.dataset.field}`); if (element.dataset.values.split("|").includes(input.value)) { element.classList.remove("hidden"); + element + .querySelectorAll("input, select, button, textarea") + .forEach((childInput) => (childInput.disabled = false)); } else { element.classList.add("hidden"); + element + .querySelectorAll("input, select, button, textarea") + .forEach((childInput) => (childInput.disabled = true)); } }); } From 552cf376a068419b35d600e78fa215732caacfb7 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sat, 26 Oct 2024 11:29:53 +0200 Subject: [PATCH 14/17] added script that formats and sends the input to the server --- data/index.html | 9 ++++++-- data/submit.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 data/submit.js diff --git a/data/index.html b/data/index.html index 36043fa..bb008ba 100644 --- a/data/index.html +++ b/data/index.html @@ -5,12 +5,13 @@ Konfiguration - + +

Konfiguration

-
+
Verbindung @@ -80,6 +81,8 @@ type="checkbox" name="input-or-output-1" id="input-input-or-output-1" + data-value-not-checked="output" + data-value-checked="input" /> Input @@ -104,6 +107,8 @@ type="checkbox" name="input-or-output-2" id="input-input-or-output-2" + data-value-not-checked="output" + data-value-checked="input" /> Input diff --git a/data/submit.js b/data/submit.js new file mode 100644 index 0000000..6a24318 --- /dev/null +++ b/data/submit.js @@ -0,0 +1,55 @@ +const form = document.querySelector("form"); + +function parseValue(input) { + if (input.type === "checkbox") { + return input.checked + ? input.dataset.valueChecked + : input.dataset.valueNotChecked; + } + + if (input.value === "") { + return null; + } + + if (input.type === "number") { + const number = Number(input.value); + return isNaN(number) ? null : number; + } + + return input.value; +} + +form.addEventListener("submit", (event) => { + event.preventDefault(); + const inputFields = document.querySelectorAll( + "form :is(input, select, textarea):not(:disabled)" + ); + + const data = Array.from(inputFields).reduce((data, input) => { + data[input.name] = parseValue(input); + return data; + }, {}); + console.log(data); + + putData(data); +}); + +async function putData(data) { + try { + const res = await fetch("/config", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + if (!res.ok) { + throw new Error(`Response status: ${res.status}`); + } + + const json = await res.json(); + console.log(json); + } catch (error) { + console.error(error.message); + } +} From 01fd6c69e101ffe179230d89e33116c01d14d123 Mon Sep 17 00:00:00 2001 From: Hendrik Rauh <114620133+HendrikRauh@users.noreply.github.com> Date: Sat, 26 Oct 2024 14:42:57 +0200 Subject: [PATCH 15/17] using patched webserver version --- platformio.ini | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platformio.ini b/platformio.ini index 35735e1..be47cfa 100644 --- a/platformio.ini +++ b/platformio.ini @@ -14,4 +14,4 @@ board = lolin_s2_mini framework = arduino lib_deps = hideakitai/ArtNet @ ^0.8.0 - me-no-dev/ESP Async WebServer@^1.2.4 \ No newline at end of file + ESP Async WebServer \ No newline at end of file From 115442f91e5d4b7617a28f19231d7dbcaf7c67b6 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sat, 26 Oct 2024 23:03:17 +0200 Subject: [PATCH 16/17] added script for loading the config --- data/index.html | 1 + data/load-data.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 data/load-data.js diff --git a/data/index.html b/data/index.html index bb008ba..1623ed9 100644 --- a/data/index.html +++ b/data/index.html @@ -6,6 +6,7 @@ Konfiguration + diff --git a/data/load-data.js b/data/load-data.js new file mode 100644 index 0000000..2ae6f1e --- /dev/null +++ b/data/load-data.js @@ -0,0 +1,35 @@ +const form = document.querySelector("form"); + +async function loadData() { + try { + const req = await fetch("/config", { + method: "GET", + }); + if (!req.ok) { + throw new Error(`Response status: ${req.status}`); + } + + const json = await req.json(); + console.log(json); + return json; + } catch (error) { + console.log(error); + return null; + } +} + +function writeDataToInput(data) { + console.log("write data", typeof data); + for (const [key, value] of Object.entries(data)) { + const element = document.querySelector(`[name=${key}]`); + console.log(element); + element.value = value; + } + // send "change" event + form.dispatchEvent(new Event("change", { bubbles: true })); +} + +const data = await loadData(); +if (data !== null) { + writeDataToInput(data); +} From 7b7ecec534c1c51af846c7021483ba4be28dd6ce Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Mon, 28 Oct 2024 23:35:29 +0100 Subject: [PATCH 17/17] improved ui --- data/index.html | 247 +++++++++++++++++++++++++----------------------- data/style.css | 31 +++++- 2 files changed, 158 insertions(+), 120 deletions(-) diff --git a/data/index.html b/data/index.html index 1623ed9..8011dbf 100644 --- a/data/index.html +++ b/data/index.html @@ -10,122 +10,135 @@ -

Konfiguration

- - -
- Verbindung - - - -
- -
- - - -
- -
- -
- -
- -
- -
-
- -
- Input/Output 1 - - - -
- -
- Input/Output 2 - - - - -
- - - +
+

Konfiguration

+
+
+ Verbindung + +
+ +
+ +
+ +
+
+ +
+
+ +
+
+
+ Input/Output 1 + + +
+
+ Input/Output 2 + + +
+ +
+
diff --git a/data/style.css b/data/style.css index e5bbec7..b0676df 100644 --- a/data/style.css +++ b/data/style.css @@ -4,9 +4,25 @@ } body { - background-color: #222; + margin: 0; + padding: 0; + background: linear-gradient(to left, #065760, black, black, #065760); color: white; font-family: Arial, Helvetica, sans-serif; + overflow: hidden; +} + +main { + background-color: #222; + max-width: 700px; + padding: 8px max(5%, 8px); + margin: 0 auto; + height: 100vh; + overflow: scroll; +} + +h1 { + text-align: center; } form > * { @@ -17,10 +33,17 @@ fieldset { border-radius: 8px; } +label { + display: block; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + input, select { - display: block; - width: 300px; + width: clamp(200px, 100%, 400px); background-color: #222; color: white; border: 1px solid white; @@ -36,12 +59,14 @@ select:focus { } button { + display: block; border: none; inset: none; border-radius: 8px; background-color: var(--color-primary); color: var(--color-on-primary); padding: 8px 16px; + margin: 0 auto; } :is(div:has(:is(input, select)), input, select, label)