Edit and Test Design && Add Buttons and Form for new Entrys

app/templates/app/home.html

@@ -24,10 +24,10 @@
 </div>
 
 <div class="d-none" id="dashboard">
-    <div class="row justify-content-around mt-3" style="width: 95vw; color: black;">
+    <div class="row justify-content-around mt-3" style="width: 100vw; color: black;">
         <div class="col-11" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
             <div class="row justify-content-between">
-                <p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr</b> - 450h/600h</p>
+                <p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr:</b> 450h/600h</p>
                 <p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> 150h</p>
             </div>
             <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
@@ -47,15 +47,8 @@
                 <button class="offset-1 col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">LDC: 10h</button>
             </div>
         </div>
-        <!-- <div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
-            <p style="font-size: 1.2rem;"><b>Jahr</b> - 600h</p>
-            <div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
-                <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 51%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
     </div>    
-            <p style="font-size: 1.5rem;">58h/65h</p>
+    <div class="row justify-content-around" style="width: 100vw; color: black; padding-top: 2rem;">
-        </div> -->
-    </div>    
-    <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;">
         <div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
             <p style="font-size: 1.2rem;"><b>Timer</b></p>
             <div class="row justify-content-between" style="margin-top: -1rem;">
@@ -71,10 +64,11 @@
     </div>
     <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
         <div class="col-12" style="height: 40vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
-            <div class="row justify-content-between">
+            <div class="row justify-content-between align-items-center m-0" style="width: 100%;">
-                <p class="col-4" style="font-size: 1.2rem;" ><b>Aktivitäten</b></p>
+                <p class="col-5" style="font-size: 1.2rem; margin: 0 1rem 0 -1rem;" ><b>Aktivitäten</b></p>
-                <span class="col-2" style="margin-left: 32%; padding: 0;"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="height: 35px"></span>
+                <!-- <span class="col-2" style="margin-left: 32%; padding: 0;"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="height: 35px"></span> -->
-                <span class="col-2" style="padding: 0;"><img id="resetTimer" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid" style="height: 30px"></span>
+                <button type="button" class="offset-2 col-2 btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button>
+                <button type="button" class="offset-1 col-2 btn btn-light"><img id="resetTimer" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid"></button>
 
             </div>
             <table class="table table-striped">
@@ -101,12 +95,44 @@
                     <td>08.09.24</td>
                     <td>Dienst</td>
                   </tr>
+                  <tr>
+                    <td></td>
+                    <td></td>
+                  </tr>
                 </tbody>
               </table>
         </div>
     </div>    
 </div>
 
+<!-- Modal -->
+<div class="modal fade" id="newEntryModal" tabindex="-1" aria-labelledby="newEntryModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="newEntryModalLabel">Eingabeformular</h5>
+                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen">X</button>
+            </div>
+            <div class="modal-body">
+                <form method="POST" action="">
+                    {% csrf_token %}
+                    <div class="mb-3">
+                        <label for="inputName" class="form-label">Name</label>
+                        <input type="text" class="form-control" id="inputName" name="name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="inputEmail" class="form-label">E-Mail</label>
+                        <input type="email" class="form-control" id="inputEmail" name="email" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Absenden</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+
 <script>
 
     /* ALLES RUND UM DIE WILLKOMMENSMELDUNG */