From 1d9f90db00b64a8e5198676f177e4946454d6721 Mon Sep 17 00:00:00 2001
From: kaikubasta <hallo@kaikubasta.de>
Date: Wed, 10 Feb 2016 22:09:38 +0100
Subject: [PATCH] new templates, add css

accessible, responsive, minimalistic
---
 templates/accountform.html | 47 +++++++++++++++-----
 templates/css/style.css    | 88 ++++++++++++++++++++++++++++++++++++++
 templates/error.html       |  6 ++-
 templates/feedset.html     |  8 ++--
 templates/index.html       | 35 ++++++++++-----
 templates/list.html        | 14 +++---
 templates/partials.html    | 38 +++++++++++++---
 templates/signupform.html  | 39 +++++++++++++----
 8 files changed, 230 insertions(+), 45 deletions(-)
 create mode 100644 templates/css/style.css

diff --git a/templates/accountform.html b/templates/accountform.html
index dcec5a5..d730a3b 100644
--- a/templates/accountform.html
+++ b/templates/accountform.html
@@ -1,12 +1,39 @@
 {{ template "header" }}
-    <h1>edit account</h1>
-    <form method="POST" action="/account">
-        E-mail: <input type="text" name="mail" /><br />
-        New password: <input type="password" name="new_password" /><br />
-        New password (repeat): <input type="password" name="new_password2" /><br />
-        <br />
-        Name: <input type="text" name="name" /><br />
-        Old password: <input type="password" name="password" /><br />
-        <input type="submit" value="update" />
-    </form>
+<form method="post" action="feeds">
+	<fieldset>
+		<legend>Edit account</legend>
+
+		<div>
+			<label for="mail">New e-mail address</label>
+			<input type="email" id="mail" name="mail" aria-describedby="mail-desc"/>
+			<p id="mail-desc">Used for password reset and feed owner authentication.</p>
+		</div>
+		
+		<div>
+			<label for="password">New password</label>
+			<input type="password" id="password" name="new_password" />
+		</div>
+
+		<div>
+			<label for="password2">New password <span>(repeat)</span></label>
+			<input type="password" id="password2" name="new_password2" />
+		</div>
+
+		<hr />
+
+		<div>
+			<label for="name">Name</label>
+			<input type="text" id="name" name="name" maxlength="140" required />
+		</div>
+
+		<div>
+			<label for="password-old">Current password</label>
+			<input type="password" id="password-old" name="password" required />
+		</div>
+
+		<hr />
+
+		<button type="submit">Update</button>
+	</fieldset>
+</form>
 {{ template "footer" }}
diff --git a/templates/css/style.css b/templates/css/style.css
new file mode 100644
index 0000000..ef1ef42
--- /dev/null
+++ b/templates/css/style.css
@@ -0,0 +1,88 @@
+body {
+	background-color: white;
+	color: black;
+	font: 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif;
+	max-width: 30rem;
+	padding: 0 1rem;
+	margin: 0 auto;	
+}
+
+a {
+	color: #00c;
+}
+
+a:hover {
+	background-color: #00c;
+	color: white;
+}
+
+a:focus {
+	outline: thin solid;
+}
+
+header,
+nav,
+footer {
+	text-align: center;
+}
+
+nav ul {
+	list-style: none;
+	padding-left: 0;
+}
+
+nav li {
+	display: inline-block;
+	margin: 0 .5rem;
+}
+
+section,
+fieldset {
+	background-color: #eee;
+	padding: 1rem;
+	border: 1px solid black;
+}
+
+section.success {
+	background-color: #cfc;
+}
+
+section.error {
+	background-color: #fcc;
+}
+
+section h2:first-child {
+	margin-top: 0;
+}
+
+form div {
+	margin-bottom: 1rem;
+}
+
+form p,
+label span {
+	color: #444;
+	font-size: .8rem;
+}
+
+form p {
+	margin: 0;
+}
+
+legend,
+label {
+	font-weight: bold;
+}
+
+label {
+	display: block;
+}
+
+button,
+input {
+	font-size: 1rem;
+}
+
+input#twt {
+	width: 100%;
+}
diff --git a/templates/error.html b/templates/error.html
index 0cda565..f44c1f0 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1,4 +1,6 @@
 {{ template "header" }}
-    <h1>error</h1>
-    <p>Something went wrong: {{ .Msg }}</p>
+	<section class="error">
+		<h2>Error</h2>
+		<p>Something went wrong: {{ .Msg }}</p>
+	</section>
 {{ template "footer" }}
diff --git a/templates/feedset.html b/templates/feedset.html
index df1154b..d5be2e7 100644
--- a/templates/feedset.html
+++ b/templates/feedset.html
@@ -1,6 +1,6 @@
 {{ template "header" }}
-    <h1>feed setup</h1>
-    <p>
-    Feed successfully set.
-    </p>
+	<section class="success">
+		<h2>Success</h2>
+		<p>Your account has been created.</p>
+	</section>
 {{ template "footer" }}
diff --git a/templates/index.html b/templates/index.html
index ee334ce..1972ca8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,12 +1,27 @@
 {{ template "header" }}
-    <h1>publish a twtxt</h1>
-    <form method="POST" action="feeds">
-        Message: <input type="text" name="twt" size="140" /><br />
-        Name: <input type="text" name="name" />
-        Password: <input type="password" name="password" /><br />
-        <input type="submit" value="twtxt" />
-    </form>
-    No feed yet? <a href="/signup">Create one!</a><br />
-    Also, check out <a href="/feeds">other people's feeds</a> …<br />
-    Or <a href="/account">edit your account settings</a>.
+<form method="post" action="feeds">
+	<fieldset>
+		<legend>Send tweet</legend>
+
+		<div>
+			<label for="twt">Message</label>
+			<input type="text" id="twt" name="twt" maxlength="140" placeholder="What’s happening?" aria-describedby="txt-desc" required />
+			<p id="txt-desc"><abbr title="Maximum">Max.</abbr> 140 characters</p>
+		</div>
+
+		<div>
+			<label for="name">Name</label>
+			<input type="text" id="name" name="name" required />
+		</div>
+		
+		<div>
+			<label for="password">Password</label>
+			<input type="password" id="password" name="password" required />
+		</div>
+
+		<hr />
+
+		<button type="submit">Publish</button>
+	</fieldset>
+</form>
 {{ template "footer" }}
diff --git a/templates/list.html b/templates/list.html
index afbfdb1..f851d1d 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -1,8 +1,10 @@
 {{ template "header" }}
-    <h1>list of feeds</h1>
-    <ul>
-    {{ range .Dir }}
-        <li><a href="/feeds/{{ . }}">{{ . }}</a></li>
-    {{ end }}
-    </ul>
+<section>
+	<h2>Feeds</h2>
+	<ul>
+	{{ range .Dir }}
+		<li><a href="/feeds/{{ . }}">{{ . }}</a></li>
+	{{ end }}
+	</ul>
+</section>
 {{ template "footer" }}
diff --git a/templates/partials.html b/templates/partials.html
index a7d7911..2422213 100644
--- a/templates/partials.html
+++ b/templates/partials.html
@@ -1,10 +1,38 @@
 {{ define "header" }}
-<html>
-    <a href="/">hosted twtxt server</a>
-    <hr />
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+	<title>hosted twtxt server</title>
+
+	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
+
+</head>
+
+<body>
+
+	<header>
+		<h1><a href="/">hosted twtxt server</a></h1>
+	</header>
+
+	<nav>
+		<ul>
+			<li><a href="/feeds">Feeds</a></li>
+			<li><a href="/signup">Create account</a></li>
+			<li><a href="/account">Edit account</a></li>
+		</ul>
+	</nav>
 {{ end }}
 {{ define "footer" }}
-    <hr />
-    <p>This project is licensed under the <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPLv3</a>, source code <a href="https://github.com/plomlompom/htwtxt">here</a>.</p>
+	<footer>
+		<p>Licensed under <a href="http://www.gnu.org/licenses/agpl-3.0.html" rel="license">AGPLv3</a>. Source code on <a href="https://github.com/plomlompom/htwtxt">GitHub</a>.</p>
+	</footer>
+
+</body>
+
 </html>
 {{ end }}
diff --git a/templates/signupform.html b/templates/signupform.html
index bf49183..82ea936 100644
--- a/templates/signupform.html
+++ b/templates/signupform.html
@@ -1,10 +1,33 @@
 {{ template "header" }}
-    <h1>sign up</h1>
-    <form method="POST" action="/signup">
-        Name: <input type="text" name="name" /> (only up to 140 legal chars: A-Z, a-z, 0-1, _)<br />
-        Password: <input type="password" name="new_password" /><br />
-        Password (repeat): <input type="password" name="new_password2" /><br />
-        E-mail: <input type="text" name="mail" /> (optional; stored internally to reach and/or identify you when there's trouble with your feed, you want to reset your password, etc.; in any such communication, communicating from an address provided here is a necessary condition for you to be treated as the owner of your feed)<br />
-        <input type="submit" value="create" />
-    </form>
+<form method="post" action="feeds">
+	<fieldset>
+		<legend>Create account</legend>
+
+		<div>
+			<label for="name">Name</label>
+			<input type="text" id="name" name="name" maxlength="140" aria-describedby="name-rules" pattern="[a-zA-Z0-9_]{1,140}" required />
+			<p id="name-desc">Legal characters: A-Z, a-z, 0-9, _ (<abbr title="maximum">max.</abbr> 140)</p>
+		</div>
+
+		<div>
+			<label for="mail">E-mail address <span>(optional)</span></label>
+			<input type="email" id="mail" name="mail" aria-describedby="mail-desc"/>
+			<p id="mail-desc">Used for password reset and feed owner authentication.</p>
+		</div>
+		
+		<div>
+			<label for="password">Password</label>
+			<input type="password" id="password" name="new_password" required />
+		</div>
+
+		<div>
+			<label for="password2">Password <span>(repeat)</span></label>
+			<input type="password" id="password2" name="new_password2" required />
+		</div>
+
+		<hr />
+		
+		<button type="submit">Sign up</button>
+	</fieldset>
+</form>
 {{ template "footer" }}