From 1b1da43c310fe71991bef0d280f900c0af66c483 Mon Sep 17 00:00:00 2001 From: Jacob Williams <47766188+BotSpace@users.noreply.github.com> Date: Sat, 2 Dec 2023 03:00:16 -0500 Subject: [PATCH] updated landing page (still needs work) --- PestoLink-Gamepad/gamepad.html | 4 +-- index.html | 18 ++++++++++-- styles.css | 52 ++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 styles.css diff --git a/PestoLink-Gamepad/gamepad.html b/PestoLink-Gamepad/gamepad.html index 88c25d8..21205f8 100644 --- a/PestoLink-Gamepad/gamepad.html +++ b/PestoLink-Gamepad/gamepad.html @@ -5,13 +5,13 @@ - PestoLink-Online + PestoLink-Gamepad
-
PestoLink-Online
+
PestoLink-Gamepad
Pesto Presto!
diff --git a/index.html b/index.html index a6039f3..f7e5ae9 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,23 @@ PestoLink-Online + -
Welcome to PestoLink-Online!
- PestoLink-Gamepad - PestoLink-Mobile +
+
Welcome to PestoLink-Online!
+ PestoLink-Gamepad + PestoLink-Mobile +

+ Control your robot with PestoLink-Online! PestoLink-Online runs in any browser with Bluetooth Low Energy (BLE) support. If you have a USB Xbox or PlayStation controller, use PestoLink-Gamepad. If you want to use your phone or your laptops keyboard to control your robot, use Pestolink-Mobile. +

+

+ If you set up an Arduino based robot with PestoLink-Receive, you can then open PestoLink-Online in a browser, connect to your MCU with BLE, and send gamepad data to the MCU. +

+

+ PestoLink-Online can also be used to control MicroPython based robots, for example an XRP Kit by using PestoLink-MicroPython. +

+
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a2c180c --- /dev/null +++ b/styles.css @@ -0,0 +1,52 @@ +:root { + --alf-green: #4dae50; + --alf-beige: #efe4b0; +} + +* { + border: 0; + padding: 0; + margin: 0; + font-family: Gotham Rounded, sans-serif; + color: white; + font-weight: bold; + -webkit-user-select: none; + user-select: none; +} + +body { + background: var(--alf-beige); + display: flex; + justify-content: center; + align-items: center; +} + +.box-outer { + display: block; + width: 615px; +} + +.container-title { + margin: 2vw; + background: grey; + border: 1vw solid grey; + border-radius: 2vw; + font-size: 35px; + text-align: center; +} + +.container-link { + margin: 2vw; + background: grey; + border: 1vw solid grey; + border-radius: 2vw; + align-items: center; +} + +.container-text { + margin: 2vw; + background: grey; + border: 1vw solid grey; + border-radius: 2vw; +} +