From a0cbeae8fef54c298883c379a9e9e9440f6d3336 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 25 Feb 2021 21:25:25 +0100
Subject: [PATCH] basic ui for profile page

---
 src/components/Profile.vue | 481 +++++++++++++++++--------------------
 svelte-routify-windi-vite  |   1 -
 2 files changed, 216 insertions(+), 266 deletions(-)
 delete mode 160000 svelte-routify-windi-vite

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 8d0c82d..d5d0718 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen w-full p-4">
-    <div class="section-title w-full mb-6 pt-3">
+    <!-- <div class="section-title w-full mb-6 pt-3">
       <div class="flex flex-row items-center justify-between mb-4">
         <div class="flex flex-col">
           <div class="text-xs uppercase font-light text-gray-500">Pages</div>
@@ -10,279 +10,229 @@
     </div>
     <div
       class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
-    >
-      <div class="flex flex-row items-center justify-start p-4">
-        <div class="py-2 px-2">
-          <p class="text-base font-bold whitespace-nowrap">Lucas Smith</p>
-          <p class="text-sm text-gray-500 whitespace-nowrap">Vital Database Dude</p>
-          <div class="flex flex-row items-center justify-start w-full py-1 space-x-2">
-            <svg
-              stroke="currentColor"
-              fill="none"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="stroke-current text-xl text-twitter"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-              />
-            </svg>
-            <svg
-              stroke="currentColor"
-              fill="none"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="stroke-current text-xl text-facebook"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-            </svg>
-            <svg
-              stroke="currentColor"
-              fill="none"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="stroke-current text-xl text-instagram"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-            </svg>
-          </div>
-        </div>
-        <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-          <button
-            class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Subscribe</button>
-          <button
-            class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          >Follow</button>
-        </div>
+    >-->
+    <div class="flex flex-row items-center justify-start p-4">
+      <div class="py-2 px-2">
+        <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+        <p class="text-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p>
       </div>
-      <div class="flex flex-wrap">
-        <div class="w-full p-4">
-          <div class="flex flex-wrap flex-col w-full tabs">
-            <div class="flex lg:flex-wrap flex-row lg:space-x-2">
-              <div class="flex-none">
-                <button class="tab tab-underline tab-active" type="button">Account settings</button>
-              </div>
-              <div class="flex-none">
-                <button class="tab tab-underline" type="button">Email preferences</button>
-              </div>
-              <div class="flex-none">
-                <button class="tab tab-underline" type="button">Security settings</button>
+      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
+        <button
+          type="button"
+          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
+        >
+          <svg
+            style="display:inline;"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-download"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg> Urkunde herunterladen
+        </button>
+        <button
+          type="button"
+          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
+        >Änderungen speichern</button>
+      </div>
+    </div>
+    <div class="flex flex-wrap">
+      <div class="w-full p-4">
+        <div class="flex flex-wrap flex-col w-full tabs">
+          <div class="flex lg:flex-wrap flex-row lg:space-x-2">
+            <div class="flex-none">
+              <button
+                class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
+                type="button"
+              >Mein Profil</button>
+            </div>
+            <div class="flex-none">
+              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button>
+            </div>
+            <div class="flex-none">
+              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button>
+            </div>
+          </div>
+          <div class="tab-content block">
+            <div class="py-4 w-full">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">First name</div>
+                      <input
+                        name="first-name"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        type="text"
+                        placeholder="first name"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">middle name</div>
+                      <input
+                        name="middle-name"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        type="text"
+                        placeholder="middle name"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Last name</div>
+                      <input
+                        name="last-name"
+                        type="text"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="last name"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Email address</div>
+                      <input
+                        name="email"
+                        type="email"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="email address"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">phone number</div>
+                      <input
+                        name="tel"
+                        type="tel"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="phone number"
+                      />
+                    </div>
+                  </div>
+                </form>
               </div>
             </div>
-            <div class="tab-content block">
-              <div class="py-4 w-full">
-                <div class="flex flex-col">
-                  <form class="form flex flex-wrap w-full">
-                    <div class="w-full">
-                      <!--  -->
-                      <div class="relative mb-4">
-                        <label for="email" class="leading-7 text-sm text-gray-400">Email</label>
-                        <input
-                          type="email"
-                          id="email"
-                          name="email"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        />
-                      </div>
-                      <!--  -->
-                      <div class="form-element">
-                        <div class="form-label">First name</div>
-                        <input
-                          name="first-name"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          type="text"
-                          placeholder="Enter you first name"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Last name</div>
-                        <input
-                          name="last-name"
-                          type="text"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you last name"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Email address</div>
-                        <input
-                          name="email"
-                          type="email"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you email address"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Company</div>
-                        <input
-                          name="company"
-                          type="text"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you company"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Position</div>
-                        <input
-                          name="position"
-                          type="text"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you position"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Language</div>
-                        <select name="language" class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
-                          <option>Select language</option>
-                          <option value="english">English</option>
-                          <option value="spanish">Spanish</option>
-                          <option value="portuguese">Portuguese</option>
-                        </select>
+          </div>
+          <div class="tab-content hidden">
+            <div class="py-4 w-full lg:w-1/2">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">Current email</div>
+                      <input
+                        name="email"
+                        type="email"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="current email address"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">New email</div>
+                      <input
+                        name="email"
+                        type="email"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="new email address"
+                      />
+                    </div>
+                    <div class="form-element">
+                      <div class="form-label">Daily updates</div>
+                      <div class="flex items-center justify-start space-x-2">
+                        <label class="flex items-center justify-start space-x-2">
+                          <input
+                            type="radio"
+                            name="daily-updates"
+                            class="form-radio h-4 w-4"
+                            value="yes"
+                          />
+                          <span class>Yes</span>
+                        </label>
+                        <label class="flex items-center justify-start space-x-2">
+                          <input
+                            type="radio"
+                            name="daily-updates"
+                            class="form-radio h-4 w-4"
+                            value="no"
+                          />
+                          <span class>No</span>
+                        </label>
                       </div>
                     </div>
-                    <input
-                      type="submit"
-                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                    />
-                  </form>
-                </div>
+                    <div class="form-element">
+                      <div class="form-label">Weekly updates</div>
+                      <div class="flex items-center justify-start space-x-2">
+                        <label class="flex items-center justify-start space-x-2">
+                          <input
+                            type="radio"
+                            name="weekle-updates"
+                            class="form-radio h-4 w-4"
+                            value="yes"
+                          />
+                          <span class>Yes</span>
+                        </label>
+                        <label class="flex items-center justify-start space-x-2">
+                          <input
+                            type="radio"
+                            name="weekle-updates"
+                            class="form-radio h-4 w-4"
+                            value="no"
+                          />
+                          <span class>No</span>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                  <input
+                    type="submit"
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
+                </form>
               </div>
             </div>
-            <div class="tab-content hidden">
-              <div class="py-4 w-full lg:w-1/2">
-                <div class="flex flex-col">
-                  <form class="form flex flex-wrap w-full">
-                    <div class="w-full">
-                      <div class="form-element">
-                        <div class="form-label">Current email</div>
-                        <input
-                          name="email"
-                          type="email"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you current email address"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">New email</div>
-                        <input
-                          name="email"
-                          type="email"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter you new email address"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Daily updates</div>
-                        <div class="flex items-center justify-start space-x-2">
-                          <label class="flex items-center justify-start space-x-2">
-                            <input
-                              type="radio"
-                              name="daily-updates"
-                              class="form-radio h-4 w-4"
-                              value="yes"
-                            />
-                            <span class>Yes</span>
-                          </label>
-                          <label class="flex items-center justify-start space-x-2">
-                            <input
-                              type="radio"
-                              name="daily-updates"
-                              class="form-radio h-4 w-4"
-                              value="no"
-                            />
-                            <span class>No</span>
-                          </label>
-                        </div>
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Weekly updates</div>
-                        <div class="flex items-center justify-start space-x-2">
-                          <label class="flex items-center justify-start space-x-2">
-                            <input
-                              type="radio"
-                              name="weekle-updates"
-                              class="form-radio h-4 w-4"
-                              value="yes"
-                            />
-                            <span class>Yes</span>
-                          </label>
-                          <label class="flex items-center justify-start space-x-2">
-                            <input
-                              type="radio"
-                              name="weekle-updates"
-                              class="form-radio h-4 w-4"
-                              value="no"
-                            />
-                            <span class>No</span>
-                          </label>
-                        </div>
-                      </div>
+          </div>
+          <div class="tab-content hidden">
+            <div class="py-4 w-full lg:w-1/2">
+              <div class="flex flex-col">
+                <form class="form flex flex-wrap w-full">
+                  <div class="w-full">
+                    <div class="form-element">
+                      <div class="form-label">Current password</div>
+                      <input
+                        name="current-password"
+                        type="password"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="Enter your current password"
+                      />
                     </div>
-                    <input
-                      type="submit"
-                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                    />
-                  </form>
-                </div>
-              </div>
-            </div>
-            <div class="tab-content hidden">
-              <div class="py-4 w-full lg:w-1/2">
-                <div class="flex flex-col">
-                  <form class="form flex flex-wrap w-full">
-                    <div class="w-full">
-                      <div class="form-element">
-                        <div class="form-label">Current password</div>
-                        <input
-                          name="current-password"
-                          type="password"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter your current password"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">New password</div>
-                        <input
-                          name="new-password"
-                          type="password"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter your new password"
-                        />
-                      </div>
-                      <div class="form-element">
-                        <div class="form-label">Confirm new password</div>
-                        <input
-                          name="confirm-new-password"
-                          type="password"
-                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                          placeholder="Enter your new password confirmation"
-                        />
-                      </div>
+                    <div class="form-element">
+                      <div class="form-label">New password</div>
+                      <input
+                        name="new-password"
+                        type="password"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="Enter your new password"
+                      />
                     </div>
-                    <input
-                      type="submit"
-                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                    />
-                  </form>
-                </div>
+                    <div class="form-element">
+                      <div class="form-label">Confirm new password</div>
+                      <input
+                        name="confirm-new-password"
+                        type="password"
+                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        placeholder="Enter your new password confirmation"
+                      />
+                    </div>
+                  </div>
+                  <input
+                    type="submit"
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
+                </form>
               </div>
             </div>
           </div>
@@ -290,6 +240,7 @@
       </div>
     </div>
   </div>
+  <!-- </div> -->
 </template>
 
 <script setup>
diff --git a/svelte-routify-windi-vite b/svelte-routify-windi-vite
deleted file mode 160000
index a424252..0000000
--- a/svelte-routify-windi-vite
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit a4242522d191f8fe2450586f4986c549818893fe