Initial commit

17 files changed, 489 insertions, 0 deletions

diff --git a/ui/blank.html b/ui/blank.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/ui/blank.html
diff --git a/ui/deleteAccount.html b/ui/deleteAccount.html
new file mode 100644
index 0000000..565082f
--- /dev/null
+++ b/ui/deleteAccount.html
@@ -0,0 +1,6 @@
+<form action="{{ @BASE . @ALIASES.delete_acc }}" method="post">
+	<input type="hidden" name="confirm" value="OK" />
+	<p>Do you really want to delete your account?</p>
+	<p><a href="{{ @BASE . @ALIASES.root }}">No</a></p>
+	<p><input type="submit" value="Yes" /></p>
+</form>
\ No newline at end of file
diff --git a/ui/deleteList.html b/ui/deleteList.html
new file mode 100644
index 0000000..a71af7f
--- /dev/null
+++ b/ui/deleteList.html
@@ -0,0 +1,8 @@
+<form action="{{ @BASE }}/list/{{ @listid }}/delete" method="post">
+	<input type="hidden" name="confirm" value="OK" />
+	<p>Do you really want to delete the list "{{ @listname }}"?</p>
+	<p>
+		<a class="fakebutton" href="{{ @BASE . @ALIASES.root }}">No</a>
+		<button type="submit">Yes</button>
+	</p>
+</form>
\ No newline at end of file
diff --git a/ui/img/sprites.png b/ui/img/sprites.png
new file mode 100644
index 0000000..b3af1e4
--- /dev/null
+++ b/ui/img/sprites.png
diff --git a/ui/img/sprites.xcf b/ui/img/sprites.xcf
new file mode 100644
index 0000000..830a6a5
--- /dev/null
+++ b/ui/img/sprites.xcf
diff --git a/ui/list.html b/ui/list.html
new file mode 100644
index 0000000..ce998dd
--- /dev/null
+++ b/ui/list.html
@@ -0,0 +1,46 @@
+<set myurl="{{ @BASE . '/list/' . @listid }}" />
+<form action="{{ @myurl }}" method="post">
+	<h1>
+		<input type="hidden" name="action" value="setname" />
+		<input type="text" name="name" value="{{ @listname }}" class="listname" />
+		<button type="submit" title="Set name">✓</button>
+	</h1>
+</form>
+
+<check if="{{ empty(@listdata) }}">
+	<true><div class="empty">List is empty</div></true>
+	<false>
+		<ul class="todolist">
+			<repeat group="{{ @listdata }}" value="{{ @it }}">
+				<li{{ @it.checked ? ' class="checked"' : '' }}>
+					<form action="{{ @myurl }}" method="post">
+						<input type="hidden" name="checked" value="{{ @it.checked ? 'n' : 'y' }}" />
+						<button type="submit" name="action" value="setchecked" class="chkbtn {{ @it.checked ? 'checked' : '' }}"><input type="checkbox" name="checked_now" disabled="disabled" {{ @it.checked ? 'checked="checked"' : '' }} value="y" /></button>
+						
+						<span class="txt">{{ @it.text }}</span>
+						
+						<input type="hidden" name="id" value="{{ @it.id }}" />
+						<span class="btncluster">
+							<button type="submit" name="action" value="moveup" title="Move up">↑</button>
+							<button type="submit" name="action" value="movedown" title="Move down">↓</button>
+							<button type="submit" name="action" value="delitem" title="Delete">X</button>
+						</span>
+					</form>
+				</li>
+			</repeat>
+		</ul>
+		<div class="delchecked">
+			<form action="{{ @myurl }}" method="post">
+				<button type="submit" name="action" value="delchecked">Delete checked items</button>
+			</form>
+		</div>
+	</false>
+</check>
+
+<div class="additem">
+	<form action="{{ @myurl }}/" method="post">
+		<input type="hidden" name="action" value="additem" />
+		<input type="text" name="itemtext" />
+		<button type="submit" title="Add item">+</button>
+	</form>
+</div>
\ No newline at end of file
diff --git a/ui/login.html b/ui/login.html
new file mode 100644
index 0000000..0b8d2e4
--- /dev/null
+++ b/ui/login.html
@@ -0,0 +1,8 @@
+<h1>Login</h1>
+
+<form action="{{ @BASE . @ALIASES.login }}" method="post" class="tabform">
+	<p><label for="login_name">User:</label> <input id="login_name" type="text" name="name" value="" /></p>
+	<p><label for="login_pass">Password:</label> <input id="login_pass" type="password" name="password" /></p>
+	<p class="formctrl"><input type="submit" /></p>
+</form>
+<p><a href="{{ @BASE . @ALIASES.resetpw }}">Forgot Password?</a> | <a href="{{ @BASE . @ALIASES.register }}">Register a new account</a></p>
\ No newline at end of file
diff --git a/ui/mails/activationcode b/ui/mails/activationcode
new file mode 100644
index 0000000..bb46bfd
--- /dev/null
+++ b/ui/mails/activationcode
@@ -0,0 +1,6 @@
+Hi, {{ @username }}!
+
+You have registered an account for {{ @appname }}.
+To activate the account, visit this URL:
+
+{{ @activationurl }}
\ No newline at end of file
diff --git a/ui/mails/pwreset b/ui/mails/pwreset
new file mode 100644
index 0000000..2c69c37
--- /dev/null
+++ b/ui/mails/pwreset
@@ -0,0 +1,11 @@
+Hi, {{ @username }}!
+
+You have requested a password reset four your account on
+{{ @appname }}.
+
+To reset you password, use this URL:
+
+{{  @reseturl }}
+
+If you did NOT request a password reset, you can simply ignore this
+email.
diff --git a/ui/master.html b/ui/master.html
new file mode 100644
index 0000000..25775f9
--- /dev/null
+++ b/ui/master.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Todo</title>
+	<link rel="stylesheet" type="text/css" href="{{ @BASE }}/ui/style.css" />
+</head>
+<body>
+	<div id="headerwrap"><div id="header">
+		<a href="{{ @BASE . @ALIASES.root }}" id="appname">{{ @appname }}</a>
+		<span id="userinfo">
+			<check if="{{ empty(@user) }}">
+				<true>
+					<a href="{{ @BASE . @ALIASES.login }}">Login</a>
+				</true>
+				<false>
+					Logged in as <span class="username">{{ @user }}</span>.
+					<a href="{{ @BASE . @ALIASES.settings }}">Settings</a>
+					<a href="{{ @BASE . @ALIASES.logout }}">Logout</a>
+				</false>
+			</check>
+		</span>
+	</div></div>
+	
+	<div class="bghelp"></div>
+	<div id="lists">
+		<check if="{{ !empty(@user) }}">
+			<ul>
+				<check if="{{ !empty(@lists) }}">
+					<true>
+						<repeat group="{{ @lists }}" value="{{ @l }}">
+							<li{{ @l.active ? ' class="active"' : '' }}>
+								<a href="{{ @BASE . '/list/' . @l.id }}" class="listlink">{{ @l.name }}</a>
+								<a class="deletelist" href="{{ @BASE . '/list/' . @l.id }}/delete" title="delete">X</a>
+							</li>
+						</repeat>
+					</true>
+					<false>
+						<li class="empty">No lists here. Why not add one below?</li>
+					</false>
+				</check>
+			</ul>
+			
+			<form id="addlist" action="{{ @BASE . @ALIASES.newlist }}" method="post">
+				<input type="text" name="listname" /><button type="submit">+</button>
+			</form>
+		</check>
+	</div>
+	
+	<div id="content">
+		<check if="{{ !empty(@success) }}">
+			<div class="success notify"><span class="icon"></span>{{ @success }}</div>
+		</check>
+		<check if="{{ !empty(@error) }}">
+			<div class="error notify"><span class="icon"></span>{{ @error }}</div>
+		</check>
+		<check if="{{ !empty(@info) }}">
+			<div class="info notify"><span class="icon"></span>{{ @info }}</div>
+		</check>
+		
+		<include href="{{ @content }}" />
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui/noListSelected.html b/ui/noListSelected.html
new file mode 100644
index 0000000..053b8e3
--- /dev/null
+++ b/ui/noListSelected.html
@@ -0,0 +1 @@
+<div class="nolist">No list selected</div>
\ No newline at end of file
diff --git a/ui/pwreset.html b/ui/pwreset.html
new file mode 100644
index 0000000..8d563d0
--- /dev/null
+++ b/ui/pwreset.html
@@ -0,0 +1,7 @@
+<h1>Password reset</h1>
+
+<form action="{{ @URI }}" method="post">
+	<p>New Password: <input type="password" name="password" /></p>
+	<p>Retype Password: <input type="password" name="repeatPassword" /></p>
+	<p><input type="submit" /></p>
+</form>
\ No newline at end of file
diff --git a/ui/pwresetRequest.html b/ui/pwresetRequest.html
new file mode 100644
index 0000000..a6c51b3
--- /dev/null
+++ b/ui/pwresetRequest.html
@@ -0,0 +1,6 @@
+<h1>Password reset</h1>
+
+<form action="{{ @BASE . @ALIASES.resetpw }}" method="post" class="tabform">
+	<p><label for="pwreset_mail">E-Mail:</label> <input id="pwreset_mail" type="text" name="email" /></p>
+	<p class="formctrl"><input type="submit" /></p>
+</form>
\ No newline at end of file
diff --git a/ui/register.html b/ui/register.html
new file mode 100644
index 0000000..8686600
--- /dev/null
+++ b/ui/register.html
@@ -0,0 +1,10 @@
+<h1>Register</h1>
+
+<form action="{{ @BASE . @ALIASES.register }}" method="post" class="tabform">
+	<p><label for="reg_name">Name:</label> <input id="reg_name" type="text" name="name" value="" /></p>
+	<p><label for="reg_mail">E-Mail:</label> <input id="reg_mail" type="text" name="email" value="" /></p>
+	<p><label for="reg_pass">Password:</label> <input id="reg_pass" type="password" name="password" /></p>
+	<p><label for="reg_repeat">Repeat Password:</label> <input id="reg_repeat" type="password" name="repeatPassword" /></p>
+	<p class="formctrl"><input type="submit" /></p>
+</form>
+<p>Already have an account? Go to <a href="{{ @BASE . @ALIASES.login }}">Login</a>.</p>
\ No newline at end of file
diff --git a/ui/settings.html b/ui/settings.html
new file mode 100644
index 0000000..47f3b1b
--- /dev/null
+++ b/ui/settings.html
@@ -0,0 +1,8 @@
+<h1>Account Settings</h1>
+
+<form action="{{ @BASE . @ALIASES.settings }}" method="post" class="tabform">
+	<p><label for="accset_mail">New E-Mail Address:</label> <input id="accset_mail" type="text" name="email" value="{{ @email }}" /></p>
+	<p><label for="accset_newpw">New Password:</label> <input id="accset_newpw" type="password" name="password" /></p>
+	<p><label for="accset_repeatpw">Retype Password:</label> <input id="accset_repeatpw"type="password" name="repeatPassword" /></p>
+	<p class="formctrl"><input type="submit" /></p>
+</form>
\ No newline at end of file
diff --git a/ui/style.css b/ui/style.css
new file mode 100644
index 0000000..18ae794
--- /dev/null
+++ b/ui/style.css
@@ -0,0 +1,306 @@
+@import url("DejaVu_Sans_ExtraLight/stylesheet.css");
+* {
+	font-family: sans-serif;
+}
+html, body {
+	padding: 0px;
+	margin: 0px;
+}
+body {
+	background: white;
+	font-size: 12pt;
+}
+
+input[type="text"], input[type="password"] {
+	background: #fff;
+	border: 1px solid #666;
+	font-size: 12pt;
+	padding: 0.5ex 0ex 0.5ex;
+}
+input[type="text"]:hover, input[type="password"]:hover {
+	border-color: #000;
+}
+button, .fakebutton {
+	background: #eee;
+	border: 1px solid #ccc;
+	font-size: 12pt;
+	padding: 0.5ex 0ex 0.5ex;
+	cursor: pointer;
+}
+button:hover, .fakebutton:hover {
+	background-color: #ccc !important;
+}
+a.fakebutton {
+	color: black;
+	text-decoration: none;
+	display: inline-block;
+}
+
+#headerwrap {
+	position: fixed;
+	top: 0px;
+	width: 100%;
+	background: #aaa;
+	color: #eee;
+	margin: 0px;
+	z-index: 1000;
+}
+
+#header {
+	margin: 0px 7mm 0px;
+}
+
+#header a {
+	display: inline-block;
+	color: #eee;
+	text-decoration: none;
+	border-bottom: 3px solid #bbb;
+	height: 100%;
+	vertical-align: middle;
+	padding: 0.5ex 0ex 0.5ex;
+}
+#header a:hover {
+	color: #fff;
+	border-bottom-color: #55c5ff !important;
+}
+
+#userinfo {
+	position: absolute;
+	right: 7mm;
+}
+.username {
+	color: white;
+}
+
+.bghelp {
+	z-index: -1;
+	background: #eee;
+	position: fixed;
+	margin: 0;
+	padding: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 60mm;
+}
+
+#lists {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 60mm;
+	z-index: 1;
+	padding: 0mm;
+	background: #eee;
+}
+
+#lists ul {
+	list-style: none;
+	margin: 3.5ex 0mm 3em;
+	padding: 0px;
+}
+
+#lists ul li {
+	position: relative;
+	margin: 0;
+	padding: 0.5ex 3ex 0.5ex 1ex;
+}
+#lists ul li:hover {
+	background: #f8f8f8;
+}
+#lists ul li.active {
+	background: #fff;
+}
+#lists a {
+	color: #555;
+	text-decoration: none;
+}
+#lists a:hover {
+	color: black;
+}
+.listlink {
+	display: block;
+}
+
+
+.deletelist {
+	display: inline-block;
+	margin:0;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 3ex;
+	border-left: 1px dotted #555;
+	text-align: center;
+	padding: 0.5ex 0ex 0.5ex 0ex;
+}
+
+.deletelist:hover {
+	background: #ccc;
+}
+
+#addlist {
+	position: fixed;
+	bottom: 0px;
+	width: 58mm;
+	background: #ddd;
+	padding: 1mm;
+	vertical-align: middle;
+}
+#addlist button {
+	position: absolute;
+	right: 1mm;
+	width: 7mm;
+	margin: 0mm;
+}
+#addlist input {
+	width: 100%;
+	margin: 0mm;
+	width: 50mm;
+}
+
+#content {
+	padding: 4ex 2mm 2mm 63mm;
+}
+
+h1 {
+	font-family: "DejaVu Sans ExtraLight", sans-serif;
+	font-weight: bold;
+	font-size: 16pt;
+}
+
+h1 input.listname {
+	border: 1px solid #ccc;
+	font-size: 16pt;
+	margin: 0;
+	font-family: "DejaVu Sans ExtraLight", sans-serif;
+	font-weight: bold;
+}
+h1 input.listname:hover, h1 input.listname:focus {
+	border: 1px solid black;
+}
+h1 button {
+	background-color: #f7f7f7;
+	color: #ddd;
+	border: 1px solid #ddd;
+}
+h1:hover button {
+	background: #eee;
+	border: 1px solid #ccc;
+	color: black;
+}
+
+ul.todolist {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+ul.todolist li {
+	margin: 0;
+	position: relative;
+	padding: 0.6ex 0 0.6ex;
+	border-top: 1px solid #f7f7f7;
+	min-height: 34px
+}
+ul.todolist li:first-child {
+	border-top: none;
+}
+ul.todolist form {
+	display: inline;
+}
+li.checked span.txt {
+	font-style: italic;
+	color: gray;
+	text-decoration: line-through;
+	vertical-align: middle;
+}
+ul.todolist span.btncluster {
+	vertical-align: middle;
+	position: absolute;
+	right: 0;
+}
+ul.todolist span.btncluster button {
+	background: #fbfbfb;
+	border: 1px solid #f2f2f2;
+	color: #bbb;
+}
+ul.todolist li:hover span.btncluster button {
+	background: #eee;
+	border: 1px solid #ccc;
+	color: black;
+}
+
+.chkbtn {
+	padding: 0;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+}
+.chkbtn.checked {
+	background-image: url(img/sprites.png);
+}
+.chkbtn input {
+	display: none;
+}
+
+.notify {
+	margin: -100px auto 1mm;
+	width: 50%;
+	text-align: center;
+	color: white;
+	padding: 100px 5px 5px 35px;
+	position: relative;
+}
+
+.notify .icon {
+	display: block;
+	width: 20px;
+	height: 100%;
+	position: absolute;
+	left: 5px;
+	top: 45px;
+	background-size: 80px 20px;
+	background-repeat: no-repeat;
+	background-image: url(img/sprites.png);
+}
+
+.success {background: #2a0;}
+.success .icon {background-position: left -20px top 50%;}
+.info {background: #48f;}
+.info .icon {background-position: left -40px top 50%;}
+.error {background: #f40;}
+.error .icon {background-position: left -60px top 50%;}
+
+.delchecked {
+	text-align: right;
+}
+
+.empty {
+	font-style: italic;
+	margin: 2mm;
+}
+.nolist {
+	font-style: italic;
+	font-size: 18pt;
+	color: #999;
+	text-align: center;
+	position: absolute;
+	top: 40%;
+}
+
+form.tabform {
+	display: table;
+}
+form.tabform p {
+	display: table-row;
+}
+form.tabform input, form.tabform label {
+	display: table-cell;
+	margin: 1mm;
+}
+form.tabform p.formctrl {
+	display: block;
+	margin: 0;
+}
diff --git a/ui/welcome.html b/ui/welcome.html
new file mode 100644
index 0000000..3b110bb
--- /dev/null
+++ b/ui/welcome.html
@@ -0,0 +1,3 @@
+<h1>Welcome</h1>
+
+<p>Foo!</p>
\ No newline at end of file