some style for login and inxed pages

6 years ago · 872bb03d9e
3 changed files with 71 additions and 11 deletions
--- a/journalmarks/templates/base.html
+++ b/journalmarks/templates/base.html
@ -1,7 +1,43 @@
				@@ -1,7 +1,43 @@
 <!doctype html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Journalmarks</title>
 <link rel=stylesheet type=text/css href="{{ url_for('journalmarks.static', filename='style.css') }}">
+<link rel=stylesheet type=text/css href="{{ url_for('journalmarks.static', filename='pure-min.css') }}">
+<link rel=stylesheet type=text/css href="{{ url_for('journalmarks.static', filename='grids-responsive-min.css') }}">
 <script src="{{ url_for('journalmarks.static', filename='journalmarks.js') }}"></script>
 <script src="{{ url_for('journalmarks.static', filename='base64js.min.js') }}"></script>
+<style>
+body {
+    font-weight: 100;
+}
+
+h1 {
+    text-align: center;
+    font-weight: normal;
+}
+
+a, a:visited {
+    text-decoration: none;
+    color: #0078e7;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+#content {
+    padding: 0.3em;
+}
+
+.errmsg {
+    display: none;
+    color: #ab0000;
+}
+</style>
 {% block script %}{% endblock %}
+
+<div class="pure-g">
+<div class="pure-u-1 pure-u-lg-1-3"></div>
+<div id="content" class="pure-u-1 pure-u-lg-1-3">
 {% block body %}{% endblock %}
+</div>
+</div>
--- a/journalmarks/templates/index.html
+++ b/journalmarks/templates/index.html
@ -45,13 +45,12 @@ else document.attachEvent('onreadystatechange', function(){
				@@ -45,13 +45,12 @@ else document.attachEvent('onreadystatechange', function(){
 </script>
 {% endblock %}
 {% block body %}
-Welcome!
-<p>
-<a href="{{ url_for('journalmarks.overview') }}">overview</a>
-<a href="{{ url_for('journalmarks.logout') }}">logout</a>
+<h1>Welcome!</h1>
+<p>You can now create a new Journalmark by simply pasting a URL into the text field. To access an existing Journalmark, enter its tag code. There's also a listing of all your Journalmarks on the <a href="{{ url_for('journalmarks.overview') }}">overview page</a>. Finally, you can also <a href="{{ url_for('journalmarks.logout') }}">logout</a> again.
 </p>

-<input id="url" type="text">
-<button id="create">ok</button>
-
+<form class="pure-form">
+    <input id="url" type="text" placeholder="URL or Journalmark tag">
+    <button id="create" class="pure-button pure-button-primary">Go</button>
+</form>
 {% endblock %}
--- a/journalmarks/templates/login.html
+++ b/journalmarks/templates/login.html
@ -11,6 +11,7 @@ function run() {
				@@ -11,6 +11,7 @@ function run() {
            .then(journalmarks_initkey(username, password)).then(function() {
                window.location.href = '{{ next }}';
            }).catch(function(error) {
+                document.getElementById('login-failed').style.display = 'block';
                console.log('login error', error);
            });
        });
@ -28,11 +29,35 @@ else document.attachEvent('onreadystatechange', function(){
				@@ -28,11 +29,35 @@ else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
 });
 </script>
+<style>
+.login-form {
+    text-align: center;
+}
+#username, #password {
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>
 {% endblock %}
 {% block body %}
-<h1>Login</h1>
+<h1>Welcome!</h1>
+
+<div class="login-form pure-form pure-form-aligned">
+    <p id="login-failed" class="errmsg">
+    <i>Login failed.</i>
+    </p>
+
+    <fieldset class="pure-group">
+        <input class="pure-input-1-2" id="username" type="text" placeholder="Username">
+        <input class="pure-input-1-2" id="password" type="password" placeholder="Password">
+    </fieldset>
+
+    <div clas="pure-controls">
+        <button id="login" class="pure-input-1-2 pure-button pure-button-primary">Login</button>
+    </div>

-<input type="text" id="username">
-<input type="password" id="password">
-<button id="login">Login</button>
+    <p>
+    <a href="{{ url_for('journalmarks.register') }}">Create new account</a>
+    </p>
+</div>
 {% endblock %}