test

files/templates/add_ausgabe.html

@@ -1,22 +1,49 @@
 {% extends "base.html" %}
 {% block body %}
-  <form action="{{ url }}" method="POST">
-    <input type="number"
-           step="0.01"
-           min="1"
-           max="10000"
-           placeholder="Ausgaben" 
-           name="{{ select_id_text }}"
-           id="{{ select_id_text }}">
-    &nbsp;
-    <select name="{{ select_id }}" id="{{ select_id }}"> 
-      {% for name in data %}  
-          <option value="{{ name }}">{{ name }}</option>
-      {% endfor %}
-    </select>
-      &nbsp;
-    <button type="submit"> Eingabe </button> 
+  <div class="max-w-md mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+    <div class="px-6 py-4 bg-slate-50 border-b border-slate-100">
+      <h3 class="font-bold text-slate-800 text-lg">Neue Ausgabe eintragen</h3>
+      <p class="text-xs text-slate-500 mt-1">Geben Sie den Betrag und die entsprechende Kategorie an.</p>
+    </div>
+    
+    <form action="{{ url }}" method="POST" class="p-6 space-y-5">
+      <div>
+        <label for="{{ select_id_text }}" class="block text-sm font-medium text-slate-700 mb-1">Betrag in €</label>
+        <div class="relative rounded-md shadow-sm">
+          <input type="number"
+                 step="0.01"
+                 min="1"
+                 max="10000"
+                 placeholder="0.00" 
+                 name="{{ select_id_text }}"
+                 id="{{ select_id_text }}"
+                 required
+                 class="block w-full rounded-lg border-slate-200 pl-4 pr-12 py-2.5 text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm">
+          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+            <span class="text-slate-500 sm:text-sm">EUR</span>
+          </div>
+        </div>
+      </div>
 
+      <div>
+        <label for="{{ select_id }}" class="block text-sm font-medium text-slate-700 mb-1">Kategorie / Beschreibung</label>
+        <select name="{{ select_id }}" 
+                id="{{ select_id }}"
+                class="block w-full rounded-lg border-slate-200 px-4 py-2.5 text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm"> 
+          {% for name in data %}  
+              <option value="{{ name }}">{{ name }}</option>
+          {% endfor %}
+        </select>
+      </div>
 
-  </form>
+      <div class="pt-2 flex gap-3">
+        <a href="/" class="flex-1 text-center py-2.5 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+          Abbrechen
+        </a>
+        <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2.5 px-4 rounded-lg text-sm font-semibold shadow transition-colors">
+          Speichern
+        </button> 
+      </div>
+    </form>
+  </div>
 {% endblock %}