Add a form for creating / joining sessions.

public/css/main.css

@@ -1,10 +1,10 @@
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Indie Flower", serif; }
+  font-family: "Indie Flower", serif;
+  text-align: center; }
 
 h1 {
   font-size: 5em;
-  margin: 0px;
+  margin: 0px; }
-  text-align: center; }
 
 body {
   font-family: "Raleway", sans-serif;
@@ -53,3 +53,63 @@ body {
 
 .white-cell .overlay {
   background-color: white; }
+
+.split-wrapper {
+  display: flex;
+  width: 100%; }
+  @media screen and (max-width: 640px) {
+    .split-wrapper {
+      flex-direction: column; } }
+
+.split-item {
+  flex-grow: 1;
+  box-sizing: border-box; }
+
+.split-wrapper form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px; }
+  .split-wrapper form input {
+    margin-top: 20px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: none;
+    outline: none;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form input[type="radio"] {
+    opacity: 0;
+    width: 0px;
+    height: 0px; }
+    .split-wrapper form input[type="radio"]:checked ~ label {
+      color: tomato;
+      transition: color .25s; }
+  .split-wrapper form input[type="submit"] {
+    padding: 10px;
+    background-color: tomato;
+    color: white; }
+    .split-wrapper form input[type="submit"]:focus, .split-wrapper form input[type="submit"]:hover {
+      background-color: inherit;
+      color: tomato;
+      transition: background-color .25s, color .25s; }
+  .split-wrapper form input[type="text"] {
+    background-color: inherit;
+    border-bottom: solid tomato;
+    border-width: 2px;
+    height: 3em;
+    box-sizing: border-box;
+    display: block; }
+    .split-wrapper form input[type="text"]:focus {
+      border-width: 3px;
+      transition: background-color .25s, border-width .25s; }
+  .split-wrapper form .radio-parent {
+    display: flex;
+    margin-top: 20px;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form .radio-wrapper {
+    flex-grow: 1;
+    display: inline-block;
+    text-align: center; }

public/scss/main.scss

@@ -6,12 +6,12 @@ $background-grey: #f4f4f4;
 
 h1, h2, h3, h4, h5, h6 {
     font-family: "Indie Flower", serif;
+    text-align: center;
 }
 
 h1 {
     font-size: 5em;
     margin: 0px;
-    text-align: center;
 }
 
 body {
@@ -85,3 +85,85 @@ body {
         background-color: white;
     }
 }
+
+.split-wrapper {
+    display: flex;
+    @media screen and (max-width: 640px) {
+        flex-direction: column;
+    }
+    width: 100%;
+}
+
+.split-item {
+    flex-grow: 1;
+    box-sizing: border-box;
+}
+
+.split-wrapper form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+
+    input {
+        margin-top: 20px;
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border: none;
+        outline: none;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    input[type="radio"] {
+        opacity: 0;
+        width: 0px;
+        height: 0px;
+
+        &:checked ~ label {
+            color: tomato;
+            transition: color .25s;
+        }
+    }
+
+    input[type="submit"] {
+        padding: 10px;
+        background-color: tomato;
+        color: white;
+
+        &:focus, &:hover {
+            background-color: inherit;
+            color: tomato;
+            transition: background-color .25s, color .25s;
+        }
+    }
+
+    input[type="text"] {
+        background-color: inherit;
+        border-bottom: solid tomato;
+        border-width: 2px;
+
+        &:focus {
+            border-width: 3px;
+            transition: background-color .25s, border-width .25s;
+        }
+
+        height: 3em;
+        box-sizing: border-box;
+        display: block;
+    }
+    
+    .radio-parent {
+        display: flex;
+        margin-top: 20px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .radio-wrapper {
+        flex-grow: 1;
+        display: inline-block;
+        text-align: center;
+    }
+}

src/Go.cr

@@ -33,7 +33,7 @@ def handle_message(id, game, socket, message)
 end
 
 get "/" do |env|
-    "Hello!"
+    render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
 end
 
 get "/game/:id" do |env|

src/Go/views/index.ecr

@@ -0,0 +1,29 @@
+<div class="split-wrapper">
+    <div class="split-item">
+        <h2>Create Game</h2>
+        <form autocomplete="off" id="create-form" action="/create">
+            <input required placeholder="Session Name" type="text" name="id"></input>
+            <input required placeholder="Your Password" type="text" name="your-password"></input>
+            <input required placeholder="Their Password" type="text" name="their-password"></input>
+            <div class="radio-parent">
+                <div class="radio-wrapper">
+                    <input type="radio" name="color" id="radio-black" value="black" checked></input>
+                    <label for="radio-black">Black</label>
+                </div>
+                <div class="radio-wrapper">
+                    <input type="radio" name="color" id="radio-white" value="white"></input>
+                    <label for="radio-white">White</label>
+                </div>
+            </div>
+            <input type="submit" value="Create Game"></input>
+        </form>
+    </div>
+    <div class="split-item">
+        <h2>Join Game</h2>
+        <form autocomplete="off" id="join-form" action="/game">
+            <input required placeholder="Session Name" type="text" name="id"></input>
+            <input required placeholder="Your Password" type="text" name="password"></input>
+            <input type="submit" value="Join Game"></input>
+        </form>
+    </div>
+</div>