Making good progress. Added styling and a toggle for card type.

flash_cards.py

@@ -62,6 +62,8 @@ def index():
 
 @app.route('/cards')
 def cards():
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
     db = get_db()
     cur = db.execute('SELECT type, front, back, known FROM cards ORDER BY id DESC')
     cards = cur.fetchall()
@@ -71,7 +73,7 @@ def cards():
 @app.route('/add', methods=['POST'])
 def add_card():
     if not session.get('logged_in'):
-        abort(401)
+        return redirect(url_for('login'))
     db = get_db()
     db.execute('INSERT INTO cards (type, front, back) VALUES (?, ?, ?)',
                [request.form['type'],
@@ -83,13 +85,24 @@ def add_card():
     return redirect(url_for('cards'))
 
 
+@app.route('/general')
+def general():
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
+    return render_template('general.html')
+
+
+@app.route('/code')
+def code():
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
+    return render_template('code.html')
+
+
 @app.route('/login', methods=['GET', 'POST'])
 def login():
     error = None
     if request.method == 'POST':
-        # return request.form['username'] + " / " + app.config['USERNAME'] + " / " \
-        #      + request.form['password'] + " / " + app.config['PASSWORD']
-
         if request.form['username'] != app.config['USERNAME']:
             error = 'Invalid username'
         elif request.form['password'] != app.config['PASSWORD']:

static/style.css

@@ -1,18 +1,4 @@
-body            { font-family: sans-serif; background: #eee; }
-a, h1, h2       { color: #377ba8; }
-h1, h2          { font-family: 'Georgia', serif; margin: 0; }
-h1              { border-bottom: 2px solid #eee; }
-h2              { font-size: 1.2em; }
-
-.page           { margin: 2em auto; width: 80%; border: 5px solid #ccc;
-                  padding: 0.8em; background: white; }
-.entries        { list-style: none; margin: 0; padding: 0; }
-.entries li     { margin: 0.8em 1.2em; }
-.entries li h2  { margin-left: -1em; }
-.add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
-.add-entry dl   { font-weight: bold; }
-.metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
-                  margin-bottom: 1em; background: #fafafa; }
-.flash          { background: #cee5F5; padding: 0.5em;
-                  border: 1px solid #aacbe2; }
-.error          { background: #f0d6d6; padding: 0.5em; }
+.toggleSelected {
+    background-color: #62b06b;
+    color: #ffffff;
+}

templates/cards.html

@@ -2,42 +2,85 @@
 {% block body %}
     {% if session.logged_in %}
         <form action="{{ url_for('add_card') }}" method=post class=add-card>
-            <dl>
-                <dt>
-                    <label for="type">Type:</label>
-                </dt>
-                <dd>
-                    <select name="type">
-                        <option value="1">General</option>
-                        <option value="2">Code</option>
-                    </select>
-                </dd>
-                <dt>
-                    <label for="front">Front:</label>
-                </dt>
-                <dd><input type="text" size=30 name="front" /></dd>
-                <dt>
-                    <label for="back">Back:</label>
-                </dt>
-                <dd><textarea name="back" rows="15" cols="60"></textarea></dd>
-                <dd><input type="submit" value="Save" /></dd>
-            </dl>
+
+            <div class="form-group">
+                <label for="type">Type</label>
+                <label for="general" class="toggleButton btn btn-default btn-lg">General &nbsp;
+                    <input type="radio" name="type" value="1" id="general"/>
+                </label>
+                <label for="code" class="toggleButton btn btn-default btn-lg">Code &nbsp;
+                    <input type="radio" name="type" value="2" id="code"/>
+                </label>
+            </div>
+            <div class="form-group fieldFront">
+                <label for="front">Front of Card</label>
+                <input type="text" name="front" class="form-control">
+            </div>
+            <div class="form-group fieldBack">
+                <label for="back">Back of Card</label>
+                <textarea name="back"
+                          class="form-control"
+                          id="back"
+                          placeholder="back of card"
+                          rows="12"></textarea>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="saveButton btn btn-lg btn-primary">Save</button>
+            </div>
         </form>
     {% endif %}
-    <hr />
-    <ul class=cards>
-        {% for card in cards %}
-            <li>
-                <h3>{{ card.front }}</h3>
-                {% if card.type == 1 %}
-                    {{ card.back|replace("\n", "<br />") }}
-                {% else %}
-                    <pre><code>{{ card.back|safe }}</code></pre>
-                {% endif %}
-                <hr>
-            </li>
-        {% else %}
-            <li><em>Unbelievable. No cards here so far.</em>
-        {% endfor %}
-    </ul>
-{% endblock %}
+
+    <hr/>
+
+    <div class="page-header">
+      <h2>{{ cards|length }} Card{{ '' if (cards|length == 1) else 's' }}</h2>
+    </div>
+
+    {% for card in cards %}
+        <div>
+            <h3>{{ card.front }}</h3>
+            {% if card.type == 1 %}
+                {{ card.back|replace("\n", "<br />") }}
+            {% else %}
+                <pre>{{ card.back|safe }}</pre>
+            {% endif %}
+            <hr>
+        </div>
+    {% else %}
+        <li><em>Unbelievable. No cards here so far.</em>
+    {% endfor %}
+
+    <script type=text/javascript>
+
+        $(document).ready(function () {
+            function checkit() {
+                var checkedVal = $('input[name=type]:checked').val();
+                if (checkedVal === undefined) {
+                    // hide the fields
+                    $('.fieldFront').hide();
+                    $('.fieldBack').hide();
+                    $('.saveButton').hide();
+                } else {
+                    $('.toggleButton').removeClass('toggleSelected');
+                    $(this).addClass('toggleSelected');
+
+                    if (checkedVal == '1') {
+                        $('textarea[name=back]').attr('rows', 5);
+                    } else {
+                        $('textarea[name=back]').attr('rows', 12);
+                    }
+
+                    $('.fieldFront').show();
+                    $('.fieldBack').show();
+                    $('.saveButton').show();
+                }
+            }
+
+            $('.toggleButton').click(checkit);
+
+            checkit();
+        });
+
+    </script>
+
+{% endblock %}

templates/code.html

@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block body %}
+  code
+{% endblock %}

templates/general.html

@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block body %}
+  general
+{% endblock %}

templates/layout.html

@@ -1,20 +1,55 @@
 <!doctype html>
-<title>CS Flash Cards</title>
-<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
-<div class=page>
-    <h1>CS Flash Cards</h1>
-    <div class=metanav>
-        {% if not session.logged_in %}
-            <a href="{{ url_for('login') }}">log in</a>
-        {% else %}
-            <a href="{{ url_for('cards') }}">cards</a>
-            &nbsp;
-            &nbsp;
-            <a href="{{ url_for('logout') }}">log out</a>
-        {% endif %}
+<html>
+<head>
+    <title>CS Flash Cards</title>
+    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}" />
+    <!-- I know this doesn't belong in head, but I have script in a template that needs to have jQuery -->
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12">
+
+                <br />
+                <nav class="navbar navbar-default">
+                  <div class="container-fluid">
+                    <!-- toggle menu -->
+                    <div class="navbar-header">
+                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                      </button>
+                      <a class="navbar-brand" href="#">CS Flash Cards</a>
+                    </div>
+
+                    <!-- full menu -->
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                      <ul class="nav navbar-nav navbar-right">
+                        {% if not session.logged_in %}
+                            <li><a href="{{ url_for('login') }}">log in</a></li>
+                        {% else %}
+                            <li><a href="{{ url_for('cards') }}">cards</a></li>
+                            <li><a href="{{ url_for('general') }}">general</a></li>
+                            <li><a href="{{ url_for('code') }}">code</a></li>
+                            <li><a href="{{ url_for('logout') }}">log out</a></li>
+                        {% endif %}
+                      </ul>
+                    </div><!-- /.navbar-collapse -->
+                  </div><!-- /.container-fluid -->
+                </nav>
+
+
+                {% for message in get_flashed_messages() %}
+                    <div class="alert alert-success" role="alert">{{ message }}</div>
+                {% endfor %}
+                {% block body %}{% endblock %}
+            </div>
+        </div>
     </div>
-    {% for message in get_flashed_messages() %}
-        <div class=flash>{{ message }}</div>
-    {% endfor %}
-    {% block body %}{% endblock %}
-</div>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/login.html

@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 {% block body %}
   <h2>Login</h2>
-  {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
+  {% if error %}<div class="alert alert-danger" role="alert">{{ error }}</div>{% endif %}
   <form action="{{ url_for('login') }}" method=post>
     <dl>
       <dt>Username: