redisignHEADmaster

20 files changed, 318 insertions, 318 deletions

diff --git a/internal/storer/storer.go b/internal/storer/storer.go
index 99da8b8..96ca9be 100644
--- a/internal/storer/storer.go
+++ b/internal/storer/storer.go
@@ -6,8 +6,8 @@ import (
 	"time"
 
 	"github.com/dgraph-io/badger"
+	"github.com/google/uuid"
 	"github.com/neonxp/sendsafe/internal/encryption"
-	"github.com/rs/xid"
 )
 
 type Store struct {
@@ -49,10 +49,10 @@ func (s *Store) Save(text string, pin string, ttl int) (string, error) {
 		return "", err
 	}
 
-	id := xid.New()
+	id := uuid.New()
 	err = s.db.Update(func(txn *badger.Txn) error {
 		return txn.SetEntry(&badger.Entry{
-			Key:       id.Bytes(),
+			Key:       []byte(id.String()),
 			Value:     buf.Bytes(),
 			ExpiresAt: uint64(time.Now().Add(time.Duration(ttl) * time.Minute).Unix()),
 		})
@@ -65,11 +65,7 @@ func (s *Store) IsEncrypted(id string) (bool, error) {
 	var encrypted bool
 
 	return encrypted, s.db.View(func(txn *badger.Txn) error {
-		uid, err := xid.FromString(id)
-		if err != nil {
-			return err
-		}
-		value, err := txn.Get(uid.Bytes())
+		value, err := txn.Get([]byte(id))
 		if err != nil {
 			return err
 		}
@@ -88,11 +84,7 @@ func (s *Store) Get(id string, pin string) (string, error) {
 	var text string
 
 	return text, s.db.Update(func(txn *badger.Txn) error {
-		uid, err := xid.FromString(id)
-		if err != nil {
-			return err
-		}
-		value, err := txn.Get(uid.Bytes())
+		value, err := txn.Get([]byte(id))
 		if err != nil {
 			return err
 		}
@@ -114,7 +106,7 @@ func (s *Store) Get(id string, pin string) (string, error) {
 				return err
 			}
 		}
-		return txn.Delete(uid.Bytes())
+		return txn.Delete([]byte(id))
 	})
 }
 
@@ -126,3 +118,7 @@ type memo struct {
 	Text      string
 	Encrypted bool
 }
+
+func (m *memo) Read(p []byte) (n int, err error) {
+	panic("not implemented") // TODO: Implement
+}
diff --git a/public/css/animation.css b/public/css/animation.css
new file mode 100644
index 0000000..ac5a956
--- /dev/null
+++ b/public/css/animation.css
@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
diff --git a/public/css/fontello-codes.css b/public/css/fontello-codes.css
new file mode 100644
index 0000000..9b15b4f
--- /dev/null
+++ b/public/css/fontello-codes.css
@@ -0,0 +1,4 @@
+
+.icon-left-big:before { content: '\e800'; } /* '' */
+.icon-docs:before { content: '\f0c5'; } /* '' */
+.icon-paper-plane:before { content: '\f1d8'; } /* '' */
\ No newline at end of file
diff --git a/public/css/fontello-embedded.css b/public/css/fontello-embedded.css
new file mode 100644
index 0000000..fe7a182
--- /dev/null
+++ b/public/css/fontello-embedded.css
@@ -0,0 +1,61 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?30397918');
+  src: url('../font/fontello.eot?30397918#iefix') format('embedded-opentype'),
+       url('../font/fontello.svg?30397918#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'fontello';
+  src: url('data:application/octet-stream;base64,d09GRgABAAAAAA38AA8AAAAAF/gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAAQwAAAFY+IFOrY21hcAAAAdgAAABiAAABnMveY/9jdnQgAAACPAAAAAsAAAAOAAAAAGZwZ20AAAJIAAAG7QAADgxiLvl6Z2FzcAAACTgAAAAIAAAACAAAABBnbHlmAAAJQAAAAf4AAAJEylOiXmhlYWQAAAtAAAAAMgAAADYcB8Q1aGhlYQAAC3QAAAAfAAAAJAc/A1RobXR4AAALlAAAABAAAAAQDxH//2xvY2EAAAukAAAACgAAAAoBaADcbWF4cAAAC7AAAAAgAAAAIAE0Do1uYW1lAAAL0AAAAXUAAALNzZ0YGXBvc3QAAA1IAAAANgAAAEdZIYVIcHJlcAAADYAAAAB6AAAAnH62O7Z4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNgZD7COIGBlYGBqYppDwMDQw+EZnzAYMjIBBRlYGVmwAoC0lxTGA68YPh4gznofxZDFHMQwzSgMCNIDgAa/Q1SAHic7ZCxDYAwDATPSUAIMQolYiAqFs0OGYGSTBBsh4IheOss+2W5eGAAorIqCeREMB3qivuR2f3ErvukFeDizrW09p1c4heTT8E+y8ivxfv2btFS61jGd+5YrrV0iA/7vhf6AAB4nGNgQAYAAA4AAQB4nK1Xa1sbxxWe1Q2MAQNC2M267ihjUZcdySRxHGIrDtllURwlqcC43XVuu0i4TZNekt7oNb1flD9zVrRPnW/5aXnPzEoBB9ynz1M+6Lwz886c65xZSGhJ4n4UxlJ2H4n5nS5V7j2I6IZL1+LkoRzej6jQSD+bFtOi31f7br1OIiYRqK2RcESQ+E1yNMnkYZMKWtVVvUlFLQdHxeWa8AOqBjJJ/KywHPhZoxhQIdg7lDSrAIJ0QKXe4ahQKOAYqh9crvPsaL7m+JcloPJHVaeKNUWiFx3EoxWnYBSWNBU9qgUR66OVIMgJrhxI+rxHpdUHo2vOXBD2Q6qEUZ2KjXj3rQhkdxhJ6vUwtQk2bTDaiGOZWTYsuoapfCRpndfXmfl5L5KIxjCVNNOLEsxIXpthdJPRzcRN4jh2ES2aDfokdiMSXSbXMXa7dIXRlW76aEH0mfGoLPbjeJDG5HhxnHsQywH8UX7cpLKWsKDUSOHTVNCLaEr5NK18ZABbkiZVTLgRCTnIpvZ9yYvsrmvN518SSdin8lodi4EcyiF0ZevlBiK0EyU9N92NIxXXY0mb9yKsuRyX3JQmTWk6F3gjUbBpnsZQ+QrlovyUCvsPyenDEJpaa9I5LdnaebhVEvuST6DNJGZKsmWsndGjc/MiCP21+qRwzuuThTRrT3E8mBDA9USGQ5VyUk2whcsJIenCyLGVSK1Kt6yKuTO201XsEu6Xrh3fNK+NQ0dzs6IYQour6vEaiviCzgqFkAbpVpMWNKhS0oXgNT4AABmiBR7tYrRg8rWIgxZMUCRi0IdmWgwSOUwkLSJsTVrS3b0oKw224qs0d6AOm1TV3Z2oe89OunXMV838ss7EUnA/ypaWAnJSnxY9vnIoLT+7wD8L+CFnBbkoNnpRxuGDv/4QGYbahbW6wrYxdu06b8FN5pkYnnRgfwezJ5N1RgozIaoK8UJB3Rk5jmOyVdMiE4VwL6Il5cuQ5lF+c4hw4svkP5cuOWJRVIXv+xyBZaw5abY87dGnnvs0wrUCH2teky7qzGF5CfFm+TWdFVk+pbMSS1dnZZaXdVZh+XWdTbG8orNplt/Q2TmWnlbj+FMlQaSVbJHzDt+WJuljiyuTxY/sYvPY4upk8WO7KLWgC96ZfsKpf1tX2c/j/tXhn4RdT8M/lgr+sbwK/1g24B/LVfjH8pvwj+U1+MfyW/CP5Rr8Y9nSsm0K9rqG2kuJRNNzksCkFJewxTW7rum6R9dxH5/BVejIM7Kp0g3Fjf2JDJe9f3ac4my+EnLF0TNrWdmphRGaInv53LHwnMW5oeXzxvLncZrlhF/ViWt7qi08L1b+Jfhv647ayG44Nfb1JuIBB063H5cl3WjSC7p1sd2kjf9GRWH3QX8RKRIrDdmSHW4JCO3d4bCjOughER4+dF28SBuOU1tGhG+hd63QRdBKaKcNQ8tmhU/nA+9g2FJStoc48/ZJmmzZ86ii/DFbUsI9ZXMnOirJsnSPSqvlp2KfO+0MmrYyO9R2QpXg8euacLezr1IpSAaKynhUsVwKUhc44U73+J4UpqH/q23kWEHDNr9YM4HRgvNOUaJsT62giSAZZRRc+Sun4kQ2osFGFPGbd9IvdaEQ2uNYSMyWV/NYqDbC9NJkiWbM+rbqsFLO4p1JCNkZG2kSe1FLtvGgs/X5pGS78lRQpYHR3ePfLjaJp1V7ni3FJf/yMUuCcboS/sB53OVxijfRP1ocxW26GEQ9F2+qbMetbN1Zxr195cTqrts7seqfuvdJOwJNt7wnKdzSdNsbwjauMTh1JhUJbdE6doTGZa7PVRv5FB9ovnWdC1Th+rRw8+z52zqbwVsz3vI/lnTn/1XF7BP3sbZCqzpWL/U4t7ODBnzLG0flVYxue3WVxyX3ZhKCuwhBzV57fI3ghldbdBO3/LUz5rs4zlmu0gvAr2t6EeINjmKIcMttPLzjaL2puaDpDcBv65EQ2wA9AIfBjh45ZmYXwMzcY04HYI85DO4zh8F3mMPgu/oIvTAAioAcg2J95Ni5B0B27i3mOYzeZp5B7zDPoHeZZ9B7rDMESFgng5R1MthnnQz6zHkVYMAcBgfMYfCQOQy+Z+zaAvq+sYvR+8YuRj8wdjH6wNjF6ENjF6MfGrsY/cjYxejHiHF7ksCfmBFtAn5k4SuAH3PQzcjH6Kd4a3POzyxkzs8Nx8k5v8Dmlyan/tKMzI5DC3nHryxk+q9xTk74jYVM+K2FTPgduHcm5/3ejAz9EwuZ/gcLmf5H7MwJf7KQCX+2kAl/AfflyXl/NSND/5uFTP+7hUz/B3bmhH9ayIShhUz4VI/Omy9bqrijUqEY4p8mtMHY92j6gIpXe4fjx7r5BSXaAUEAAAAAAQAB//8AD3icLVE9b9NQFL33Pfs5dpImbvyeoSJOHKd2m0CLEscVTQTdukStxFIVJDq6KlRiIgtMiK8FFia6dAjywlCxsMMvYAEWFtQhEeIfNA7PiDfcc4/uu1dH5wACzF/SffIHqtDccoFQ8gwQ8DlQALoHlMKBbGDXt4WnsKU2cot5ri2sErJGgH64gVGnhhl3O4LuN6vpaMx5i/d5+tay8AHfFC3Ox/iq2sR7205rbA2s9v8B3ud8VWyK8QrIp0otR3RCb0MNGrAMXRjAw61jD4FVUYegTjSVDqUYBpTFBSldV0GP5Z6mqFoMChg5xYghBySfI3ER84j5PQl5PABJdsMQIRyEg/6NqHd9fe3q6spys+Eu2QsFnUENnQUm2tgRtmkxzW34QS8rZhjdwpvYzwY86pawi1rX3uh50gjNM91eGKGZkcAz6UfbwbqYTSWkX2UR5fNSJCay893tJElPkuT47JtjT9ERxP/u2BPyWP6/82/ttC5wJKLSeVnUxSd7lOCT5PPZdCrksZM3Ikp3yNOJqGP6DgDnc+nVb+nVlSw3blUMBcgiIpAhEJAhyhRlkvjI4YKyy20UGmUa8xrrmNVgDYOejhKy/OiPivKalnIG02YvDFNT8wXEX7MPPy1aoae6RYdF+yIp6yo9fF8kymLhC9mZXdzNXTPIJfUvyOZp0AAAeJxjYGRgYADiyBlpFvH8Nl8Z+JlfAEUY7tQ6eMHo////ZzG/Zg4CcjkYmECiAFC+DKUAAHicY2BkYGAO+p8FJF/8////L/NrBqAICmABALatB5gAA+gAAANZAAAD6AAAA+j//wAAAAAARgDcASIAAAABAAAABAA9AAUAAAAAAAIAHABCAI0AAACBDgwAAAAAeJx1kN9OwjAUh3+VPyokajTx1l4ZiHHAEm9ISEgwcKM3xHBrxhjbyFhJV0h4Dd/Bh/ElfBZ/bMUYiFu6fufr6elZAVzjGwLF88RRsMAZo4JPcIqe5RL9s+Uy+cVyBXW8Wa7Sv1uu4QGh5Tpu8MEKonzOaIFPywJX4tLyCS7EneUS/aPlMrlnuYJb8Wq5Su9brmEiMst13IuvgVptdRxGRjYGTem23Y6cbqWiilMvkd7aREpnsi/nKjVBkijHV8s9j4NwnXh6H+7nSaCzWKWy47T3ahSkgfZMMNtVzzaha8xczrVayqHNkCutFoFvnMiYVbfV+nseBlBYYQuNmFcVwUCiQdvk7KLN0SFNmSGZWWTFSOEhofGw5o4oX8kY9znmjFLagBkJ2YHP7/LIj0kh9yesoo9WD+MJaXdGnHvJrhx2d5g1IqV5ppfb2W/vGTY8zaU13LXrUuddSQwPakjex25tQePTO/mtGNouWnz/+b8f11iERwAAAHicY2BigAAuBuyAhZGJkZmRhZGVgSMnNa1ENykznSUlP7mYuyCxILVItyAnMS+VgQEAjaUJQgAAeJxj8N7BcCIoYiMjY1/kBsadHAwcDMkFGxnYnTYyMGhBaC4UeicDAwM3EmsnAzMDg8tGFcaOwIgNDh0RIH6Ky0YNEH8HBwNEgMElUnqjOkhoF0cDAyOLQ0dyCEwCBDYy8GntYPzfuoGldyMTg8tm1hQ2BhcXAJQcKgcAAA==') format('woff'),
+       url('data:application/octet-stream;base64,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') format('truetype');
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?30397918#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+  
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+.icon-left-big:before { content: '\e800'; } /* '' */
+.icon-docs:before { content: '\f0c5'; } /* '' */
+.icon-paper-plane:before { content: '\f1d8'; } /* '' */
\ No newline at end of file
diff --git a/public/css/fontello-ie7-codes.css b/public/css/fontello-ie7-codes.css
new file mode 100644
index 0000000..fc0a03b
--- /dev/null
+++ b/public/css/fontello-ie7-codes.css
@@ -0,0 +1,4 @@
+
+.icon-left-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-docs { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-paper-plane { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
\ No newline at end of file
diff --git a/public/css/fontello-ie7.css b/public/css/fontello-ie7.css
new file mode 100644
index 0000000..513c3d1
--- /dev/null
+++ b/public/css/fontello-ie7.css
@@ -0,0 +1,15 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'fontello';
+  font-style: normal;
+  font-weight: normal;
+ 
+  /* fix buttons height */
+  line-height: 1em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+ 
+.icon-left-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-docs { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-paper-plane { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
\ No newline at end of file
diff --git a/public/css/fontello.css b/public/css/fontello.css
new file mode 100644
index 0000000..58866f6
--- /dev/null
+++ b/public/css/fontello.css
@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?43538876');
+  src: url('../font/fontello.eot?43538876#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?43538876') format('woff2'),
+       url('../font/fontello.woff?43538876') format('woff'),
+       url('../font/fontello.ttf?43538876') format('truetype'),
+       url('../font/fontello.svg?43538876#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?43538876#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-left-big:before { content: '\e800'; } /* '' */
+.icon-docs:before { content: '\f0c5'; } /* '' */
+.icon-paper-plane:before { content: '\f1d8'; } /* '' */
\ No newline at end of file
diff --git a/public/css/index.css b/public/css/index.css
index a304ed4..e50cd61 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,280 +1,22 @@
-* {
-    --active: rgb(43, 43, 48);
-    --active-inner: #f3f3f3;
-    --focus: 2px rgba(39, 94, 254, .3);
-    --border: #a3a3a3;
-    --border-hover: #f3f3f3;
-    --background: rgb(255, 255, 255);
-    --background-secondary: rgb(230, 230, 230);
-    --disabled: rgb(43, 43, 48);
-    --disabled-inner: #rgb(43, 43, 48);
-    --text: #000;
-}
-
-@media (prefers-color-scheme: dark) {
-    * {
-        --active: rgb(43, 43, 48);
-        --active-inner: #f3f3f3;
-        --focus: 2px rgba(39, 94, 254, .3);
-        --border: #f3f3f3;
-        --border-hover: #f3f3f3;
-        --background: rgb(31, 32, 39);
-        --background-secondary: rgb(43, 43, 48);
-        --disabled: rgb(43, 43, 48);
-        --disabled-inner: #rgb(43, 43, 48);
-        --text: #f3f3f3;
+/* @media (prefers-color-scheme: dark) {
+    html, body>header, body>footer, .invert {
+        filter: invert(1) hue-rotate(180deg);
     }
-}
-
-html, body {
-    padding: 0;
-    margin: 0;
-    background-color: var(--background);
-    color: var(--text);
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-size: 16px;
-}
-
-.turbolinks-progress-bar {
-    height: 5px;
-    background-color: rgb(52, 52, 175);
-}
-
-a, a:hover, a:active, a:visited {
-    color: var(--text);
-}
+    img:not([src*=".svg"]), .dropimage {
+        filter: invert(1) hue-rotate(180deg) saturate(30%);
+    }
+} */
 
-body {
+.content {
     padding-top: 60px;
 }
 
-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background-color: var(--background);
-}
-
-hr {
-    width: auto;
-    border-top: 0;
-    border-bottom: 1px solid var(--border);
-    margin: 16px 8px;
-}
-
-h1 {
-    margin: 16px 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--border);
-}
-
-#header-logo {
-    display: block;
-    padding: 16px;
-    text-decoration: none;
-    font-family: 'Courier New', Courier, monospace;
-    cursor: pointer;
-}
-
-.header-menu {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-}
-
-.header-menu .header-menu--item {
-    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-    display: inline-block;
-    padding: 16px;
-    text-decoration: none;
-}
-
-.header-menu .header-menu--item:hover {
-    background-color: var(--background-secondary);
-}
-
-.layout-center {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-}
-
-form {
-    display: flex;
-    flex-direction: column;
-    /* max-width: 50vh; */
-    width: 600px;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 16px;
-}
-
-form .required {
-    font-size: 14px;
-    font-style: italic;
-    color: rgb(255, 100, 100);
-    align-self: flex-end;
-}
-
-form .optional {
-    font-size: 14px;
-    font-style: italic;
-    align-self: flex-end;
+.required {
+    text-align: right;
 }
 
-form label {
+label.row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-}
-
-.form-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-input, textarea, button {
-    background-color: var(--background-secondary);
-    color: var(--text);
-    border: 1px solid var(--border);
-    padding: 8px;
-    margin: 8px;
-    border-radius: 4px;
-}
-
-textarea {
-    resize: vertical;
-}
-
-label {
-    padding: 8px;
-}
-
-input:active, textarea:active, button:active {
-    background-color: rgb(33, 33, 38);
-}
-
-@supports (-webkit-appearance: none) or (-moz-appearance: none) {
-    input[type=checkbox], input[type=radio] {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        height: 21px;
-        outline: none;
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        margin: 0 8px 0 0;
-        cursor: pointer;
-        border: 1px solid var(--bc, var(--border));
-        background: var(--b, var(--background-secondary));
-        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-    }
-    input[type=checkbox]:after, input[type=radio]:after {
-        content: "";
-        display: block;
-        left: 0;
-        top: 0;
-        position: absolute;
-        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
-    }
-    input[type=checkbox]:checked, input[type=radio]:checked {
-        --b: var(--active);
-        --bc: var(--active);
-        --d-o: .3s;
-        --d-t: .6s;
-        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
-    }
-    input[type=checkbox]:disabled, input[type=radio]:disabled {
-        --b: var(--disabled);
-        cursor: not-allowed;
-        opacity: 0.9;
-    }
-    input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
-        --b: var(--disabled-inner);
-        --bc: var(--border);
-    }
-    input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
-        cursor: not-allowed;
-    }
-    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
-        --bc: var(--border-hover);
-    }
-    input[type=checkbox]:focus, input[type=radio]:focus {
-        box-shadow: 0 0 0 var(--focus);
-    }
-    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
-        width: 21px;
-    }
-    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
-        opacity: var(--o, 0);
-    }
-    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
-        --o: 1;
-    }
-    input[type=checkbox]+label, input[type=radio]+label {
-        font-size: 14px;
-        line-height: 21px;
-        display: inline-block;
-        vertical-align: top;
-        cursor: pointer;
-        margin-left: 4px;
-    }
-    input[type=checkbox]:not(.switch) {
-        border-radius: 7px;
-    }
-    input[type=checkbox]:not(.switch):after {
-        width: 5px;
-        height: 9px;
-        border: 2px solid var(--active-inner);
-        border-top: 0;
-        border-left: 0;
-        left: 7px;
-        top: 4px;
-        transform: rotate(var(--r, 20deg));
-    }
-    input[type=checkbox]:not(.switch):checked {
-        --r: 43deg;
-    }
-    input[type=checkbox].switch {
-        width: 38px;
-        border-radius: 11px;
-    }
-    input[type=checkbox].switch:after {
-        left: 2px;
-        top: 2px;
-        border-radius: 50%;
-        width: 15px;
-        height: 15px;
-        background: var(--ab, var(--border));
-        transform: translateX(var(--x, 0));
-    }
-    input[type=checkbox].switch:checked {
-        --ab: var(--active-inner);
-        --x: 17px;
-    }
-    input[type=checkbox].switch:disabled:not(:checked):after {
-        opacity: 0.6;
-    }
-    input[type=radio] {
-        border-radius: 50%;
-    }
-    input[type=radio]:after {
-        width: 19px;
-        height: 19px;
-        border-radius: 50%;
-        background: var(--active-inner);
-        opacity: 0;
-        transform: scale(var(--s, 0.7));
-    }
-    input[type=radio]:checked {
-        --s: .5;
-    }
 }
diff --git a/public/font/fontello.eot b/public/font/fontello.eot
new file mode 100644
index 0000000..03570f1
--- /dev/null
+++ b/public/font/fontello.eot
diff --git a/public/font/fontello.svg b/public/font/fontello.svg
new file mode 100644
index 0000000..68415cd
--- /dev/null
+++ b/public/font/fontello.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="left-big" unicode="&#xe800;" d="M857 350v-71q0-30-18-51t-47-21h-393l164-164q21-20 21-50t-21-50l-42-43q-21-20-51-20-29 0-50 20l-364 364q-20 21-20 50 0 29 20 51l364 363q21 21 50 21 29 0 51-21l42-41q21-22 21-51t-21-51l-164-164h393q29 0 47-20t18-51z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="docs" unicode="&#xf0c5;" d="M946 636q23 0 38-16t16-38v-678q0-23-16-38t-38-16h-535q-23 0-38 16t-16 38v160h-303q-23 0-38 16t-16 38v375q0 22 11 49t27 42l228 228q15 16 42 27t49 11h232q23 0 38-16t16-38v-183q38 23 71 23h232z m-303-119l-167-167h167v167z m-357 214l-167-167h167v167z m109-361l176 176v233h-214v-233q0-22-15-37t-38-16h-233v-357h286v143q0 22 11 49t27 42z m534-449v643h-215v-232q0-22-15-38t-38-15h-232v-358h500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="paper-plane" unicode="&#xf1d8;" d="M984 844q19-13 15-36l-142-857q-3-16-18-25-8-5-18-5-6 0-13 3l-253 104-135-165q-10-13-27-13-7 0-12 2-11 4-17 13t-7 21v195l482 590-596-516-221 91q-20 8-22 30-1 23 18 33l928 536q9 5 18 5 11 0 20-6z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/public/font/fontello.ttf b/public/font/fontello.ttf
new file mode 100644
index 0000000..09b5c82
--- /dev/null
+++ b/public/font/fontello.ttf
diff --git a/public/font/fontello.woff b/public/font/fontello.woff
new file mode 100644
index 0000000..3844f29
--- /dev/null
+++ b/public/font/fontello.woff
diff --git a/public/font/fontello.woff2 b/public/font/fontello.woff2
new file mode 100644
index 0000000..d666afa
--- /dev/null
+++ b/public/font/fontello.woff2
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 />