looks prettier, mehr erklärung

static/css/style.css

@@ -19,18 +19,24 @@ div.log {
 }
 
 div.alarms {
+    margin-top: 8mm;
     grid-area: alarms;
     margin-bottom: 1cm;
 }
 div.savedLogs {
-    border: #454d55;
-    border-radius: 20px;
-    border-width: 5px;
+    border:1px solid gray;
+    border-radius: 10px;
+    padding: 3mm;
+    padding-top: 2mm;
     grid-area: savedLogs;
     margin-right: 2cm;
 }
 
 div.savedAlarms {
+    border:1px solid gray;
+    border-radius: 10px;
+    padding: 3mm;
+    padding-top: 2mm;
     grid-area: savedAlarms;
 }
 

templates/base.html

@@ -18,12 +18,12 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" href="{{url_for('about')}}">About</a>
-            </li>
             <li class="nav-item">
                 <a class="nav-link" href="{{url_for('help')}}">Hilfe</a>
             </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="{{url_for('about')}}">About</a>
+            </li>
             </ul>
         </div>
     </nav>

templates/help.html

@@ -3,14 +3,31 @@
 
 {% block content %}
 <h1>{% block title %} Hilfe! {% endblock %}</h1>
+<h2>Erste Schritte</h2>
 <ul>
-    <li>Schreib was ins log bevor du den ersten Alarm einträgst</li>
+    <li>Schreib was ins log</li>
+    <li>Trag deinen ersten Alarm ein</li>
     <ul>
-        <li>sonst gibt's einen doppelten Alarm, sobald aus Gründen&trade; neu geladen wird</li>
+        <li>Reihenfolge ist relevant, sonst gibt's einen doppelten Alarm, sobald aus Gründen&trade; neu geladen wird</li>
     </ul>
+    <li>Das war's auch schon</li>
+    <li>In den Logs, siehst du die bereit geschriebenen Log-Einträge</li>
+    <li>Die anstehenden Alarme sind Alarme in der Zukunft, bei einem Neustart des Servers werden alle Alarme in der Zukunft <b>und</b> alle Alarme, die in den letzten 2 Minuten stattfinden sollten/stattgefunden haben.</li>
 </ul>
+<h2>How-To</h2>
+<h5><u>Alarm eintragen</u></h5>
+<p>
+Es braucht eine Uhrzeit und eine alarm Nachricht. Wenn kein Datum eingetragen ist, wird heute genommen, 
+außer der Zeitpunkt liegt in der Vergangenheit. Dann wird der Alarm morgen zur angegeben Uhrzeit eingetragen.
+</p>
+<h5><u>Log eintragen</u></h5>
+<p>
+Schreibe einen Text, drücke Enter, sei glücklich. Nein, du kannst das nicht korrigieren.
+</p>
 
-<h3>Debugging Hilfe</h3>
+
+<h2>Debugging Hilfe</h2>
+Wird gefüllt, sobald ich Probleme/Unklarheiten identifiziere oder gesagt bekomme
 
 
 

templates/index.html

@@ -13,7 +13,7 @@
             {% endfor %}
         </div>
         <div class="savedAlarms" id="upcomingAlarms">
-            <h3>Upcoming Alarms</h3>
+            <h3>Anstehende Alarme</h3>
             {% for alarm in alarms %}
                 <div>
                     {{ alarm.datetime }}: {{ alarm.message }}
@@ -24,7 +24,7 @@
             <form method="post" action="/sendLog">
                 
                 <div class="form-group">
-                    <label for="logMessage">logMessage</label>
+                    <label for="logMessage">Log:</label>
                     <input type="text" name="logMessage"
                     class="form-control"
                     value="{{ request.form['logMessage'] }}"></input>
@@ -36,19 +36,17 @@
             <form method="post" action="/setAlarm">
                 
                 <div class="form-group">
-                    <div class="datetime" style="padding-left: 3mm;">    
-                        <label for="time">Datum</label>
+                    <div class="datetime" style="padding-left: 3mm;">
                         <input type="date" name="date"
                         class="form-control"
                         value="{{ request.form['date'] }}" style="width: 150px;"></input>
                     </div>
                     <div class="datetime">
-                        <label for="time">Uhrzeit</label>
                         <input type="time" name="time" class="form-control"
-                        value="{{ request.form['time'] }}" style="width: 80px;" required></input>
+                        value="{{ request.form['time'] }}" style="width: 85px;" required></input>
                     </div>
                     <div style="padding: 3mm;">
-                        <label for="alarmMessage">alarmMessage</label>
+                        <label for="alarmMessage">Alarm-Text</label>
                         <input type="text" name="alarmMessage"
                         class="form-control"
                         value="{{ request.form['alarmMessage'] }}" required></input>
@@ -59,7 +57,7 @@
         </div>
 
         <div class="previousAlarms" id="previousAlarms">
-            <h3>Previous Alarm</h3>
+            <h3>Vergangene Alarme</h3>
             <script>
                 alarms = {{ alarms|tojson }};
                 console.log(alarms);