Spruce it up a bit (unfinished)

static/crossroad.css

@@ -1,16 +1,24 @@
+:root {
+    --red: #cb0b0b;
+    --blue: #2081c3;
+    --large: 2em;
+    --medium: 1em;
+}
+
 html,
 body {
-    background: linear-gradient(300deg, #cb0b0b, #2081c3);
+    background: linear-gradient(300deg, var(--red), var(--blue));
     background-size: 100vw 100vh;
     margin: 0;
     min-height: 100vh;
     height: 100vh;
+    font-family: sans-serif;
 }
 
 dialog {
     background-color: white;
     border: 0;
-    border-radius: 2em;
+    border-radius: var(--large);
     opacity: 0;
     transition: opacity 0.125s ease-out;
 }
@@ -35,6 +43,15 @@ dialog[open] {
     }
 }
 
+header {
+    display: flex;
+    justify-content: space-between;
+}
+
+abbr[title] {
+    text-decoration-color: var(--blue);
+}
+
 .flex-vcenter {
     display: flex;
     flex-direction: column;
@@ -42,3 +59,28 @@ dialog[open] {
     width: 100%;
     height: 100%;
 }
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.half-width {
+    min-width: 50%;
+}
+
+.half-height {
+    min-height: 50%;
+}
+
+.separator-bottom {
+    border-bottom: solid 1px #0008;
+}
+
+.margin-auto-top {
+    margin-top: auto;
+}
+
+.margin-large-bottom {
+    margin-bottom: var(--large);
+}

static/crossroad.html

@@ -14,17 +14,27 @@
         getMainDialog().show(); // Don't show until the page is ready
     </script>
     <div class="flex-vcenter">
-        <dialog id="mainDialog">
+        <dialog id="mainDialog" class="half-width half-height">
-            <h1>FeDirect</h1>
+            <header class="separator-bottom margin-large-bottom">
-            <p>By Nekomata</p>
+                <div class="flex-row">
-            <form>
+                    <h1>FeDirect</h1>
-                <input id="radio" type="radio" />
+                    <p class="margin-auto-top">&ThickSpace;By Nekomata</p>
-                <label for="radio">
+                </div>
-                    Instances and stuff go here!
+                <img src="/static/nekomata_small.png" alt="Nekomata Logo" style="height: 4em;" />
-                </label>
+            </header>
-            </form>
+            <div class="flex-row">
-            <br>
+                <div class="half-width">
-            <button onclick="showAddInstanceDialog()">Add an instance</button>
+                    <form>
+                        <input id="radio" type="radio" />
+                        <label for="radio">
+                            Instances and stuff go here!
+                        </label>
+                    </form>
+                    <br>
+                    <button onclick="showAddInstanceDialog()">Add an instance</button>
+                </div>
+                <div class="half-width"></div>
+            </div>
         </dialog>
     </div>
     <dialog id="addInstance">
@@ -35,6 +45,15 @@
             </label>
             <input id="instanceHost" type="text" name="instanceHost" />
             <br>
+            <input id="autoQueryMetadata" type="checkbox" name="autoQueryMetadata" checked />
+            <label for="autoQueryMetadata">
+                <abbr title="This makes a single API request to FeDirect to automatically try to detect instance metadata, such as the name, software, and an icon.
+We do this on the backend to avoid CORS problems.
+We do not track or save any requests or data.">
+                    Automatically query metadata
+                </abbr>
+            </label>
+            <br><br>
             <button type="submit">OK</button>
             <button type="reset" class="close">Cancel</button>
         </form>