updated landing page (still needs work)

AlfredoSystems · Dec 2, 2023 · 1b1da43 · 1b1da43
1 parent bdfbf30
commit 1b1da43
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 5 deletions.
diff --git a/PestoLink-Gamepad/gamepad.html b/PestoLink-Gamepad/gamepad.html
@@ -5,13 +5,13 @@
         <meta http-equiv="Content-Security-Policy" content="script-src 'self' http://xxxx 'unsafe-inline';">
         <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 
-        <title>PestoLink-Online</title>
+        <title>PestoLink-Gamepad</title>
         <link rel="stylesheet" href="gamepad.css">
     </head>
     <body>
         <div class="box-outer">
             <div class="box-title">
-                <div class="text-pesto-1" >PestoLink-Online</div>
+                <div class="text-pesto-1" >PestoLink-Gamepad</div>
                 <div class="text-pesto-2" >Pesto Presto!</div>
             </div>
 

diff --git a/index.html b/index.html
@@ -6,11 +6,23 @@
         <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 
         <title>PestoLink-Online</title>
+        <link rel="stylesheet" href="styles.css">
     </head>
     <body>
-        <div>Welcome to PestoLink-Online!</div>
-        <a href="http://pestol.ink/PestoLink-Gamepad/gamepad.html">PestoLink-Gamepad</a>
-        <a href="http://pestol.ink/PestoLink-Mobile/mobile.html">PestoLink-Mobile</a>
+        <div class="box-outer">
+            <div class="container-title">Welcome to PestoLink-Online!</div>
+            <a class="container-link" href="http://pestol.ink/PestoLink-Gamepad/gamepad.html">PestoLink-Gamepad</a>
+            <a class="container-link" href="http://pestol.ink/PestoLink-Mobile/mobile.html">PestoLink-Mobile</a>
+            <p class="container-text">
+                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.
+            </p>
+            <p class="container-text">
+                If you set up an Arduino based robot with <a href="https://github.com/AlfredoSystems/PestoLink-Receive">PestoLink-Receive</a>, you can then open PestoLink-Online in a browser, connect to your MCU with BLE, and send gamepad data to the MCU.
+            </p>
+            <p class="container-text">
+                PestoLink-Online can also be used to control MicroPython based robots, for example an <a href="https://www.sparkfun.com/products/22230">XRP Kit</a> by using <a href="https://github.com/AlfredoSystems/PestoLink-MicroPython/tree/main">PestoLink-MicroPython</a>.
+            </p>
 
+        </div>
     </body>
 </html>
diff --git a/styles.css 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;
+}
+