Browse Source

added creator template

liontix 10 months ago
parent
commit
5892207715
1 changed files with 131 additions and 0 deletions
  1. 131 0
      src/routes/creator/+page.svelte

+ 131 - 0
src/routes/creator/+page.svelte

@@ -3,4 +3,135 @@
 
 </script>
 
+<style>
+    fieldset {
+        max-width: 90%;
+        margin-inline: auto;
+    }
+</style>
 
+<h3 class="center-align top-padding bottom-padding">Termine</h3>
+
+<fieldset>
+    <div class="field border label">
+        <input>
+        <label>Thema</label>
+    </div>
+
+    <div class="field border label">
+        <input>
+        <label>Ort</label>
+    </div>
+
+    <div class="field label border">
+        <select>
+            <option>01 KW (01.01.2024 - 05.01.2024)</option>
+            <option>02 KW (06.01.2024 - 12.01.2024)</option>
+            <option>03 KW (13.01.2024 - 19.01.2024)</option>
+            <option>04 KW (20.01.2024 - 26.01.2024)</option>
+        </select>
+        <label>Woche</label>
+    </div>
+
+    <div class="field border label">
+        <select>
+            <option>15 Minuten</option>
+            <option>20 Minuten</option>
+            <option>30 Minuten</option>
+            <option>45 Minuten</option>
+            <option>1 Stunde</option>
+        </select>
+        <label>Dauer</label>
+    </div>
+
+    <fieldset>
+        <legend>Select one or more</legend>
+        <nav class="vertical">
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Montag</span>
+            </label>
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Dienstag</span>
+            </label>
+
+            <label class="checkbox" id="checkbox">
+                <input type="checkbox">
+                <span>Mittwoch</span>
+            </label>
+
+            <div class="">
+                <button class="transparent circle large">
+                    <i>content_copy</i>
+                </button>
+                <button class="transparent circle large">
+                    <i>add</i>
+                </button>
+            </div>
+            <div class="field border row">
+                <input type="time">
+                -
+                <input type="time">
+                <button class="transparent circle large">
+                    <i>delete</i>
+                </button>
+            </div>
+            <div class="field border row">
+                <input type="time">
+                -
+                <input type="time">
+                <button class="transparent circle large">
+                    <i>delete</i>
+                </button>
+            </div>
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Donnerstag</span>
+            </label>
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Freitag</span>
+            </label>
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Samstag</span>
+            </label>
+            <label class="checkbox">
+                <input type="checkbox">
+                <span>Sonntag</span>
+            </label>
+        </nav>
+    </fieldset>
+</fieldset>
+
+<fieldset>
+    <legend>Eingaben</legend>
+    <button class="large circle tertiary">
+        <i>add</i>
+        <span>Neues Feld</span>
+    </button>  
+    <div class="row bottom-margin">
+        <div class="max field border">
+            <input>
+            <label>Eingabefeld</label>
+        </div>
+        <div class="max field border">
+            <select>
+                <option>Texteingabe</option>
+                <option>E-Mail</option>
+                <option>Telefonnummer</option>
+            </select>
+            <label>Eingabeart</label>
+        </div>
+        <button class="circle error medium m1">
+            <i>delete</i>
+            <span>Button</span>
+        </button>
+    </div>
+</fieldset>
+
+<div class="grid">
+    <button class="top-margin s6 large red">Loeschen</button>
+    <button class="top-margin s6 large">Speichern</button>
+</div>