add fancy page

core/templates/core/balance.html

@@ -0,0 +1,57 @@
+{% extends "core/base.html" %}
+
+{% block navi %}
+    <a href="{% url 'core:subjects' %}">subjects</a>
+    |
+    <a href="{% url 'admin:index' %}">admin</a>
+    |
+    <a href="{% url 'logout' %}">logout</a>
+{% endblock %}
+
+{% block content %}
+
+    <h1>balance prediction</h1>
+
+    <form method="get" action="{% url 'core:balance' %}">
+        <label for="amount"></label>
+        <input id="amount" name="amount" type="number" step="0.01" placeholder="amount">
+        <input type="submit" value="predict"/>
+        {% if amount_error %}
+            <p>try a number, stupid</p>
+        {% endif %}
+    </form>
+
+    <p>starting with <b>{{ amount }}€</b> ...</p>
+
+    {% if future_transactions %}
+        <div id="transaction-list">
+            {% for transaction in future_transactions %}
+                <div class="transaction-block" style="
+                        background: linear-gradient(90deg, transparent 10%, {{ transaction.color }} 100%);
+                        border-left: 2px solid {{ transaction.color }};
+                        ">
+                    <div class="transaction-block-first">
+                        <div class="date-block" {% if transaction.predicted %}style="color: #77AAEE;"{% endif %}>
+                            {% if transaction.predicted %}&#x1F52E;{% else %}&#x1F5D2;{% endif %}
+                            {{ transaction.date|date:"d.m.Y" }}
+                        </div>
+                        <div class="subject-block">
+                            {{ transaction.subject }}
+                        </div>
+                    </div>
+                    <div class="transaction-block-second">
+                        <div class="amount-block">
+                            {{ transaction.amount }}
+                        </div>
+                        <div class="balance-block">
+                            {{ transaction.balance }}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        <p>no data to show :/</p>
+    {% endif %}
+
+{% endblock %}

core/templates/core/subjects.html

@@ -1,6 +1,8 @@
 {% extends "core/base.html" %}
 
 {% block navi %}
+    <a href="{% url 'core:balance' %}">balance</a>
+    |
     <a href="{% url 'admin:index' %}">admin</a>
     |
     <a href="{% url 'logout' %}">logout</a>
@@ -26,7 +28,7 @@
                         {% if forloop.counter == 1 %}
                             <td rowspan="{{ transactions|length }}" class="subject-cell">{{ subject.name }}</td>
                         {% endif %}
-                        <td class="date-cell">
+                        <td class="date-cell" {% if not transaction.pk %}style="color: #77AAEE;"{% endif %}>
                             {% if transaction.pk %}&#x1F5D2;{% else %}&#x1F52E;{% endif %}
                             {{ transaction.booking_date|date:"d.m.y" }}
                         </td>
@@ -37,9 +39,7 @@
             </tbody>
         </table>
     {% else %}
-        <p>
-            no data to show :/
-        </p>
+        <p>no data to show :/</p>
     {% endif %}
 
 {% endblock %}

core/templates/registration/login.html

@@ -6,19 +6,17 @@
 
 {% block content %}
 
-    <form id="login-form" method="post" action="{% url 'login' %}">
+    <form method="post" action="{% url 'login' %}">
         {% csrf_token %}
-        <label for="id_username">username</label>
-        <input id="id_username" name="username" type="text" placeholder="username">
-        <label for="id_password">password</label>
-        <input id="id_password" name="password" type="password" placeholder="password">
-        {% if form.errors %}
-            <div id="login-warning">
-                nope.
-            </div>
-        {% endif %}
-        <input id="login-button" type="submit" value="login"/>
+        <label for="username"></label>
+        <input id="username" name="username" type="text" placeholder="username">
+        <label for="password">password</label>
+        <input id="password" name="password" type="password" placeholder="password">
+        <input type="submit" value="login"/>
         <input type="hidden" name="next" value="{{ next }}"/>
+        {% if form.errors %}
+            <p>nope.</p>
+        {% endif %}
     </form>
 
 {% endblock %}