6 files changed, 97 insertions, 5 deletions
diff --git a/utab/data/css/index.css b/utab/data/css/index.css
index 5f03851..651a540 100644
--- a/utab/data/css/index.css
+++ b/utab/data/css/index.css
@@ -20,13 +20,50 @@ body {
   height: 80px;
 }
 
-.sites-item:hover {
-  border: #ccc 2px solid;
-}
-
 .site-favicon {
   width: 64px;
   height: 64px;
   position: relative;
   top: 8px;
 }
+
+.form-input {
+  border: #888 2px solid;
+  width: 40%;
+  height: 2em;
+  background-color: inherit;
+  color: inherit;
+  margin-left: 20px;
+  margin-bottom: 20px;
+}
+
+.form-button {
+  border: #888 2px solid;
+  border-radius: 5px;
+  height: 36px;
+  margin: 20px;
+  padding: 10px;
+  background-color: inherit;
+  color: white;
+}
+
+.sites-item:hover,
+.form-input:hover,
+.form-button:hover {
+  border: #ccc 2px solid;
+}
+
+.ctrl {
+  margin-top: 20px;
+}
+
+.ctrl-icon {
+  width: 48px;
+  height: 48px;
+  margin: 20px;
+  opacity: 60%;
+}
+
+.ctrl-icon:hover {
+  opacity: 100%;
+}
diff --git a/utab/data/icons/home.svg b/utab/data/icons/home.svg
new file mode 100644
index 0000000..a72c187
--- /dev/null
+++ b/utab/data/icons/home.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path style="fill:#ffffff;fill-opacity:1" id="path2" d="M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z" />
+</svg>
diff --git a/utab/data/icons/pencil.svg b/utab/data/icons/pencil.svg
new file mode 100644
index 0000000..e1df5bf
--- /dev/null
+++ b/utab/data/icons/pencil.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path style="fill:#ffffff;fill-opacity:1" id="path2" d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
+</svg>
diff --git a/utab/data/icons/plus.svg b/utab/data/icons/plus.svg
new file mode 100644
index 0000000..bfbe2aa
--- /dev/null
+++ b/utab/data/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path style="fill:#ffffff;fill-opacity:1" id="path2" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z" />
+</svg>
diff --git a/utab/data/index.html b/utab/data/index.html
index bc6b97b..e2f20b0 100644
--- a/utab/data/index.html
+++ b/utab/data/index.html
@@ -1,11 +1,26 @@
 <!DOCTYPE html>
+<!--Routes using this template:
+/
+/edit
+-->
 <head>
   <title>utab</title>
 </head>
 <body>
-  <h2>Top Sites</h2>
+  <h2>%site_heading%</h2>
   <div id="sites">
     %sites%
   </div>
+  <footer class="ctrl">
+    <a href="/">
+      <img class="ctrl-icon" src="/icons/home.svg" />
+    </a>
+    <a href="/new">
+      <img class="ctrl-icon" src="/icons/plus.svg" />
+    </a>
+    <a href="/edit">
+      <img class="ctrl-icon" src="/icons/pencil.svg" />
+    </a>
+  </footer>
   <link rel="stylesheet" type="text/css" href="/css/index.css" />
 </body>
diff --git a/utab/data/site.html b/utab/data/site.html
new file mode 100644
index 0000000..1406af9
--- /dev/null
+++ b/utab/data/site.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--Routes using this template:
+/new/<url>
+/edit/<url>
+-->
+<head>
+  <title>utab - add new</title>
+</head>
+<body>
+  <h2>%site_heading%</h2>
+  <form action="/%action%" method="GET">
+    <label for="url">URL:</label>
+    <input class="form-input" name="url" type="url" value="%url%" autofocus />
+    <br />
+    <label for="title">Title:</label>
+    <input class="form-input" name="title" type="text" value="%title%" />
+    <br />
+    <label for="favicon">Favicon:</label>
+    <input
+      class="form-input"
+      name="favicon"
+      type="url"
+      value="%favicon_src%"
+      placeholder="%favicon_placeholder%"
+    />
+    <br />
+    <input class="form-button" type="submit" />
+    <a href="/"><button class="form-button">Cancel</button></a>
+  </form>
+  <link rel="stylesheet" type="text/css" href="/css/index.css" />
+</body>