update signature social media, styling, logo, icons

mail_signature/templates/mail_signature/index.html

@@ -41,14 +41,14 @@
                 </div>
                 <div class="flex gap-4 items-center">
                     <label class="basis-56 flex items-center font-bold" for="function">
-                        Název funkce:
+                        Názvy funkcí:
                     </label>
-                    <input
+                    <textarea
                         id="function"
                         name="function"
-                        type="text"
+                        rows="3"
                         class="border border-gray-200 p-2 rounded-md grow w-full"
-                    >
+                    ></textarea>
                 </div>
                 <div class="flex gap-4 items-center">
                     <label class="basis-56 flex items-center font-bold" for="email">
@@ -72,13 +72,47 @@
                         class="border border-gray-200 p-2 rounded-md grow w-full"
                     >
                 </div>
+                
                 <div class="flex gap-4 items-center">
-                    <label class="basis-56 flex items-center font-bold" for="fejsbuk">
-                        Facebook odkaz:
+                    <label class="basis-56 flex items-center font-bold" for="web">
+                        Webové stránky:
                     </label>
                     <input
-                        id="fejsbuk"
-                        name="fejsbuk"
+                        id="web"
+                        name="web"
+                        type="url"
+                        class="border border-gray-200 p-2 rounded-md grow w-full"
+                    >
+                </div>
+                <div class="flex gap-4 items-center">
+                    <label class="basis-56 flex items-center font-bold" for="mastodon">
+                        Mastodon odkaz:
+                    </label>
+                    <input
+                        id="mastodon"
+                        name="mastodon"
+                        type="url"
+                        class="border border-gray-200 p-2 rounded-md grow w-full"
+                    >
+                </div>
+                <div class="flex gap-4 items-center">
+                    <label class="basis-56 flex items-center font-bold" for="twitter">
+                        Twitter odkaz:
+                    </label>
+                    <input
+                        id="twitter"
+                        name="twitter"
+                        type="url"
+                        class="border border-gray-200 p-2 rounded-md grow w-full"
+                    >
+                </div>
+                <div class="flex gap-4 items-center">
+                    <label class="basis-56 flex items-center font-bold" for="instagram">
+                        Instagram odkaz:
+                    </label>
+                    <input
+                        id="instagram"
+                        name="instagram"
                         type="url"
                         class="border border-gray-200 p-2 rounded-md grow w-full"
                     >
@@ -94,6 +128,17 @@
                         class="border border-gray-200 p-2 rounded-md grow w-full"
                     >
                 </div>
+                <div class="flex gap-4 items-center">
+                    <label class="basis-56 flex items-center font-bold" for="fejsbuk">
+                        Facebook odkaz:
+                    </label>
+                    <input
+                        id="fejsbuk"
+                        name="fejsbuk"
+                        type="url"
+                        class="border border-gray-200 p-2 rounded-md grow w-full"
+                    >
+                </div>
                 
                 <div class="text-right">
                     <button id="generate" class="btn btn--icon" type="button">