7 files changed, 52 insertions, 35 deletions
diff --git a/templates/includes/layout.gohtml b/templates/includes/layout.gohtml
index 03cf430..0b3b69b 100644
--- a/templates/includes/layout.gohtml
+++ b/templates/includes/layout.gohtml
@@ -6,15 +6,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SendSafe</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic" />
+    <link rel="stylesheet" href="/css/fontello.css" />
     <link rel="stylesheet" href="/css/index.css" />
     <script src="https://unpkg.com/turbolinks/dist/turbolinks.js" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.3.1" crossorigin="anonymous"></script>
 </head>
 
 <body>
-<header>
-    <a id="header-logo" href="/"></> SendSafe</a>
-</header>
+<nav>
+    <a id="header-logo"  class="brand" href="/"></> SendSafe</a>
+</nav>
 {{template "content" .}}
 </body>
 </html>
diff --git a/templates/pages/error.gohtml b/templates/pages/error.gohtml
index 8d63bbd..6527c79 100644
--- a/templates/pages/error.gohtml
+++ b/templates/pages/error.gohtml
@@ -2,4 +2,5 @@
 {{define "content"}}
 <h1>Error happened.</h1>
 <h2>Nothing can be done.</h2>
+<a href="/" class="button"><i class="icon-left-big"></i>&nbsp;Back</a>
 {{ end }}
diff --git a/templates/pages/index.gohtml b/templates/pages/index.gohtml
index 8cfcae1..6f2bf87 100644
--- a/templates/pages/index.gohtml
+++ b/templates/pages/index.gohtml
@@ -1,21 +1,22 @@
 {{template "layout.gohtml" .}}
 {{define "content"}}
-<div class="layout-center">
-    <form method="POST" action="/save">
-        <h1>New secret</h1>
-        <label for="secret">Secret content:<span class="required">(required)</span></label>
-        <textarea id="secret" name="secret" rows="6" required></textarea>
-        <label><span>Expires after (or <b>first</b> read):</span><span class="required">(required)</span></label>
-        <div class="form-row">
-            <label><input id="days" name="days" type="number" value="0" min="0" max="365" required />days</label>
-            <label><input id="hours" name="hours" type="number" value="0" min="0" max="23" required />hours</label>
-            <label><input id="minutes" name="minutes" type="number" value="30" min="0" max="59" required />minutes</label>
-        </div>
-        {{/* <label for="pin">Pin code to open:<span class="optional">(optional)</span></label> */}}
-        {{/* <input id="pin" name="pin" type="string" value="" /> */}}
-        <hr />
-        <input type="hidden" name="csrf" value={{.csrf}} />
-        <input type="submit" value="Send" />
-    </form>
+<div class="flex content three">
+    <div class="full off-third-800 third-800">
+        <form method="POST" action="/save">
+            <h1>New secret</h1>
+            <label class="row" for="secret">Secret content:<span class="required">(required)</span></label>
+            <textarea id="secret" name="secret" rows="6" required></textarea>
+            <label class="row"><span>Expires after (or <b>first</b> read):</span><span class="required">(required)</span></label>
+            <fieldset class="flex three">
+                <label><input id="days" name="days" type="number" value="0" min="0" max="365" required />days</label>
+                <label><input id="hours" name="hours" type="number" value="0" min="0" max="23" required />hours</label>
+                <label><input id="minutes" name="minutes" type="number" value="30" min="0" max="59" required />minutes</label>
+            </fieldset>
+            {{/* <label for="pin">Pin code to open:<span class="optional">(optional)</span></label> */}}
+            {{/* <input id="pin" name="pin" type="string" value="" /> */}}
+            <input type="hidden" name="csrf" value={{.csrf}} />
+            <input type="submit" value="Send" />
+        </form>
+    </div>
 </div>
 {{ end }}
diff --git a/templates/pages/memo.gohtml b/templates/pages/memo.gohtml
index e981266..f24d289 100644
--- a/templates/pages/memo.gohtml
+++ b/templates/pages/memo.gohtml
@@ -1,7 +1,7 @@
 {{template "layout.gohtml" .}}
 {{define "content"}}
-<div class="layout-center">
-    <form action="/">
+<div class="flex content three">
+    <div class="full off-third-800 third-800">
         <h1>Secret:</h1>
         <div id="content">
             <button
@@ -13,7 +13,6 @@
             </button>
             <span class="htmx-indicator">Loading...</span>
         </div>
-        <input type="submit" value="&larr; Back">
-    </form>
+    </div>
 </div>
 {{ end }}
diff --git a/templates/pages/notfound.gohtml b/templates/pages/notfound.gohtml
index d1b6e85..4112bc9 100644
--- a/templates/pages/notfound.gohtml
+++ b/templates/pages/notfound.gohtml
@@ -1,5 +1,10 @@
 {{template "layout.gohtml" .}}
 {{define "content"}}
-    <h1>Not found.</h1>
-    <p>Link expired or already viewed.</p>
+<div class="flex content three">
+    <div class="full off-third-800 third-800">
+        <h1>Not found.</h1>
+        <p>Link expired or already viewed.</p>
+        <a href="/" class="button"><i class="icon-left-big"></i>&nbsp;Back</a>
+    </div>
+</div>
 {{ end }}
diff --git a/templates/pages/save.gohtml b/templates/pages/save.gohtml
index 2b427f6..318fd51 100644
--- a/templates/pages/save.gohtml
+++ b/templates/pages/save.gohtml
@@ -1,14 +1,25 @@
 {{template "layout.gohtml" .}}
 {{define "content"}}
-<div class="layout-center">
-    <form action="/">
+<div class="flex content three">
+    <div class="full off-third-800 third-800">
         <h1>Saved</h1>
         Secret url:
-        <hr />
-        <p>https://sendsafe.xyz/s/{{.id}}</p>
+        <div class="stack">
+            <input class="stack" type="text" id="link" value="https://sendsafe.xyz/s/{{.id}}" />
+            <button class="stack" id="copy"><i class="icon-docs"></i>&nbsp;Copy link</button>
+        </div>
         <p>Send this link to recepient. This link can be viewed only once!</p>
-        <hr />
-        <input type="submit" value="&larr; Back">
-    </form>
+        <a href="/" class="button"><i class="icon-left-big"></i>&nbsp;Back</a>
+    </div>
 </div>
+<script type="application/javascript">
+htmx.onLoad(function(content) {
+    document.getElementById("copy").onclick = function () {
+        var copyText = document.getElementById("link");
+        copyText.select();
+        copyText.setSelectionRange(0, 99999);
+        document.execCommand("copy");
+    }
+})
+</script>
 {{ end }}
diff --git a/templates/pages/secret.gohtml b/templates/pages/secret.gohtml
index 94af286..4ebb353 100644
--- a/templates/pages/secret.gohtml
+++ b/templates/pages/secret.gohtml
@@ -1,6 +1,4 @@
 <b>Warning!</b> This text already deleted from server! If you refresh or close page - secret will be completely lost!
-<hr />
 <pre id="content">
     {{.secret}}
 </pre>
-<hr />