From 7fbcfe6e1a06300cdaba1109f69dc0a322a71268 Mon Sep 17 00:00:00 2001
From: Samuel Zielke <git@samuelzielke.de>
Date: Mon, 8 Apr 2024 11:20:41 +0200
Subject: [PATCH] Create default Form

---
 main/static/css/styles.css     |  38 +---
 main/templates/main/base.html  |   2 +-
 main/templates/main/index.html | 396 +++++++++++++++++++++++++++++++--
 3 files changed, 381 insertions(+), 55 deletions(-)

diff --git a/main/static/css/styles.css b/main/static/css/styles.css
index 4ff30e4..b392f3e 100644
--- a/main/static/css/styles.css
+++ b/main/static/css/styles.css
@@ -8,6 +8,7 @@ a {
     margin-top: 2rem;
     margin-bottom: -2rem;
     height: 100vh;
+    width: 90%;
 }
 
 span.curser {
@@ -18,40 +19,3 @@ img.pb {
     max-width: 2rem;
     height: auto;
 }
-
-.infoboxes {
-    margin-top: 2rem;
-}
-
-.mycard-half{
-    border-radius: 1rem;
-    /* box-shadow: .1rem -.1rem .3rem rgb(184, 184, 184); */
-    max-width: 40%;
-    padding: 1rem;
-    text-align: start;
-}
-.mycard{
-    border-radius: 1rem;
-    /* box-shadow: .1rem -.1rem .3rem rgb(184, 184, 184); */
-    max-width: 85%;
-    padding: 1rem;
-    text-align: start;
-}
-
-.card_title {
-    font-size: .8rem;
-    /* padding-top: 1.1rem; */
-}
-
-.card_content  {
-    font-size: 1.4rem;
-    vertical-align: top;
-    margin-top: -1rem;
-    line-height: 1.5rem;
-}
-
-.form-control-clear {
-    z-index: 10;
-    pointer-events: auto;
-    cursor: pointer;
-  }
diff --git a/main/templates/main/base.html b/main/templates/main/base.html
index 0e6dbc2..d01b91d 100644
--- a/main/templates/main/base.html
+++ b/main/templates/main/base.html
@@ -20,7 +20,7 @@
     {% block pushup %}
     {% endblock %}
 
-    <div class="container">
+    <div class="container" style="max-width: 100%;">
         <div class="top_line row justify-content-between">
             <div class="title col-6 text-start dropdown">
                 <h4><c style="color: rgb(221, 196, 107); vertical-align: top;" id="dropdownMenuLink" data-bs-toggle="dropdown">Meeting</c><b>Organizer</b></h4>
diff --git a/main/templates/main/index.html b/main/templates/main/index.html
index e8b9c47..655ada2 100644
--- a/main/templates/main/index.html
+++ b/main/templates/main/index.html
@@ -2,22 +2,384 @@
 
 
 {% block content %}
-<div class="row justify-content-center infoboxes">
-    <!-- <div class="col-lg-2 mycard-half bg-one">
-        <p class="card_title""><b>Inventur:</b></p>
-        <br>
-        <p class="card_content"><b style="font-size: 2.4rem;">{{ inventur_date.days }}</b> <b>Tage</b></p>
-    </div>
-    <div class="col-1" style="max-width: .5rem;"></div>
-    <div class="col-lg-2 mycard-half bg-two">
-        <p class="card_title""><b>Bestellung:</b></p>
-        <br>
-        <p class="card_content"><b style="font-size: 2.4rem;">{{ order_date.day }}.</b> <b>{{ order_date.month }}</b></p>
-    </div>
-    <div class="col-lg-1" style="margin: .8rem;"></div>
-    <div class="col-lg-6 mycard bg-three">
-        <p class="card_title"><b>Aufgaben:</b></p>
-        <p class="card_content"><b>{{ Len_Todos }}</b></p>
-    </div> -->
+<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Lato:400,400italic,700" rel="stylesheet" type="text/css">
+<style type="text/css">
+    body       { font-family: 'Lato',sans-serif; font-size: 1rem; }
+    table      { font-size: inherit; width: 100%; margin: 0; border-collapse: collapse; }
+    td         { height: 2rem; padding: 0; vertical-align: middle; position: relative; }
+    hr         { border: 0; height: 0.100rem; background-color: #cccccc; margin: 0 6.000rem; }
+    h1, h2, h3 { font-family: 'Ubuntu Condensed',serif; text-align: center; }
+    h2, h3, h4 { text-transform: uppercase; }
+    h1         { font-size: 2.000rem; font-weight: normal; color: black; margin: 1.500rem 0 0 0; }
+    h2         { font-size: 1.75rem; font-weight: normal; color: black; margin: 0; }
+    h3         { font-size: 1.5rem; font-weight: bold; color: white; margin: 0 0.250rem; }
+    h4         { font-size: 1.25rem; font-weight: bold; margin: 0 0.500rem; }
+    p          { margin: 0 0rem; line-height: 0.750rem; font-size: .8rem; }
+    .info      { font-weight: normal; color: gray; }
+    .theme     { font-weight: bold; color: black; }
+    .name      { font-weight: normal; font-style: italic; color: #333333; text-align: right; white-space: nowrap; }
+    .infobox   { width: 1.25rem; height: 1.800rem; line-height: 1.8rem; font-size: 1rem; font-weight: bold; text-align: center; color: white; }
+    .starttime { width: 4rem; height: 2rem; line-height: 2rem; margin: auto; font-size: .75rem; color: black; margin-right: .25rem;}
+    .duration  { margin: auto 0 auto auto; }
+    .t     	   { background-color: rgba(5, 72, 81, 0.1); }
+    .s     	   { background-color: lightgray; }
+    .inp_numb  { width: 3rem;}
+    #t         { margin: 0 3.000rem; background-color: rgba(8, 161, 181, 0.1); }
+    #s         { margin: 0 3.000rem; background-color: rgba(210, 214, 214, 0.373); }
+    #other     { margin: 0.250rem 3.000rem; }
+    #technik   { margin: 0 3.000rem; }
+    #header    { padding-bottom: 2rem; }
+</style>
+<section id="header">
+    <h2 style="color: black; margin-top: 1rem; margin-bottom: -1rem;">Woche vom 01.04.24</h2>
+</section>
+
+<!-- INFOS -->
+
+<div id="technik">
+    <table style="margin-top: 2.000rem;">
+        <tr>
+            <td style="width: 2.750rem; background-color: rgba(210, 214, 214, 0.373);">
+            <td style="background-color: rgba(210, 214, 214, 0.373); padding-left: 0.250rem;">
+                <h3 style="text-align: left; color: gray;">Infos</h3>
+            </td>
+        </tr>
+    </table>
+</div>
+<div id="s">
+    <table>
+        
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">Infos</div></td>
+            <td><p class="theme" style="text-align: left"><b>Gastfreundschaft </b><span class="info">Gruppe:</span> <input type="number" min="1" max="5" class="inp_numb" name="gastfreundschaft" id="gastfreundschaft"></p></td>
+            <td><p class="theme" style="text-align: left"><b>Reinigung </b><span class="info">Gruppe:</span> <input type="number" min="1" max="5" class="inp_numb" name="reinigung" id="reinigung"></p></td>
+            <td><p class="theme" style="text-align: left"></p></td>
+        </tr>
+    </table>
+</div>
+
+<!-- PREDIGTDIENST -->
+
+<div id="technik">
+    <table style="margin-top: 2.000rem;">
+        <tr>
+            <td style="width: 2.750rem; background-color: rgba(210, 214, 214, 0.373);">
+            <td style="background-color: rgba(210, 214, 214, 0.373); padding-left: 0.250rem;">
+                <h3 style="text-align: left; color: gray;">Predigtdienst</h3>
+            </td>
+        </tr>
+    </table>
+</div>
+<div id="s">
+    <table>
+
+        <!-- 1. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">1. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_1" id="smd_1">
+                <input type="time" name="smt_1" id="smt_1">
+            </td>
+            <td>
+                <select name="smm_1" id="smm_1">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_1" id="sms_1">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+
+        <!-- 2. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">2. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_2" id="smd_2">
+                <input type="time" name="smt_2" id="smt_2">
+            </td>
+            <td>
+                <select name="smm_2" id="smm_2">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_2" id="sms_2">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+
+        <!-- 3. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">3. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_3" id="smd_3">
+                <input type="time" name="smt_3" id="smt_3">
+            </td>
+            <td>
+                <select name="smm_3" id="smm_3">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_3" id="sms_3">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+
+        <!-- 4. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">4. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_4" id="smd_4">
+                <input type="time" name="smt_4" id="smt_4">
+            </td>
+            <td>
+                <select name="smm_4" id="smm_4">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_4" id="sms_4">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+
+        <!-- 5. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">5. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_5" id="smd_5">
+                <input type="time" name="smt_5" id="smt_5">
+            </td>
+            <td>
+                <select name="smm_5" id="smm_5">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_5" id="sms_5">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+
+        <!-- 6. DIENST -->
+        <tr>
+            <td style="width: 2.750rem;"><div class="infobox starttime s">6. Dienst</div></td>
+            <td>
+                <input type="date" name="smd_6" id="smd_6">
+                <input type="time" name="smt_6" id="smt_6">
+            </td>
+            <td>
+                <select name="smm_6" id="smm_6">
+                    <option value="1">Zoom</option>
+                    <option value="2">Saal</option>
+                </select>
+            </td>
+            <td>
+                <select name="sms_6" id="sms_6">
+                    <option value="1">Br. Test</option>
+                    <option value="2">Br. Moini</option>
+                </select>
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<!-- ORDNUNGSDIENST -->
+
+<div id="technik">
+    <table style="margin-top: 2rem;">
+        <tr>
+            <td style="width: 2.750rem; background-color: rgba(5, 72, 81, 0.1);">
+            <td style="background-color: rgba(5, 72, 81, 0.1); padding-left: 0.250rem;">
+                <h3 style="text-align: left; color: rgba(5, 72, 81, 0.747);">ORDNUNGSDIENST</h3>
+            </td>
+        </tr>
+    </table>
+</div>
+<div id="t">  
+    <table>
+
+        <!-- SAAL -->
+        <tr>
+            <!-- ZEILEN TITEL -->
+            <td style="width: 2.750rem;"><div class="infobox starttime t">Saal</div></td>
+
+            <!-- ZEILEN INHALT -->
+
+            <!-- 1. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 1: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+
+            <!-- 2. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 2: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+        </tr>
+
+        <!-- ANLAGE -->
+        <tr>
+            <!-- ZEILEN TITEL -->
+            <td style="width: 2.750rem;"><div class="infobox starttime t">Foyer</div></td>
+
+            <!-- ZEILEN INHALT -->
+
+            <!-- 1. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 1: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+
+            <!-- 2. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 2: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<!-- TECHNIK -->
+
+<div id="technik">
+    <table style="margin-top: 2rem;">
+        <tr>
+            <td style="width: 2.750rem; background-color: rgba(5, 72, 81, 0.1);">
+            <td style="background-color: rgba(5, 72, 81, 0.1); padding-left: 0.250rem;">
+                <h3 style="text-align: left; color: rgba(5, 72, 81, 0.747);">Technik</h3>
+            </td>
+        </tr>
+    </table>
+</div>
+<div id="t">  
+    <table>
+
+        <!-- ANLAGE -->
+        <tr>
+            <!-- ZEILEN TITEL -->
+            <td style="width: 2.750rem;"><div class="infobox starttime t">Anlage</div></td>
+
+            <!-- ZEILEN INHALT -->
+
+            <!-- 1. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 1: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+
+            <!-- 2. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 2: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+            <!-- Zoom -->
+
+            
+        </tr>
+        <!-- ANLAGE -->
+        <tr>
+            <!-- ZEILEN TITEL -->
+            <td style="width: 2.750rem;"><div class="infobox starttime t">Anlage</div></td>
+
+            <!-- ZEILEN INHALT -->
+
+            <!-- 1. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 1: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+
+            <!-- 2. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 2: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+            <!-- Zoom -->
+
+            
+        </tr>
+        
+        <!-- BÜHNE -->
+        <tr>
+            <!-- ZEILEN TITEL -->
+            <td style="width: 2.750rem;"><div class="infobox starttime t">Bühne</div></td>
+
+            <!-- ZEILEN INHALT -->
+
+            <!-- 1. PERSON -->
+            <td>
+                <p class="theme" style="text-align: left">
+                    <b>Bruder 1: </b> 
+                    <select name="ods_1" id="ods_1">
+                        <option value="1">Br. Test</option>
+                        <option value="2">Br. Moini</option>
+                    </select>
+                </p>
+            </td>
+        </tr>
+    </table>
+</div>
+<p style="display: none;">!Technik_END!</p>
 </div>
 {% endblock %}
\ No newline at end of file