(refactor): minor alert message tweaks and autofill prevention

htdocs/assets/js/contactform-config.js

@@ -25,7 +25,7 @@ $(document).ready(function() {
             }
         }
         else {
-            show_alert("Please fill-up all the fields", "info");
+            show_alert("Please fill-up all fields", "info");
         }
     });
 });

htdocs/assets/style.css

@@ -891,30 +891,6 @@ video {
   margin-top: 30vh;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
-.mt-auto {
-  margin-top: auto;
-}
-
-.mt-\[100\%\] {
-  margin-top: 100%;
-}
-
-.mt-\[20\%\] {
-  margin-top: 20%;
-}
-
-.mt-28 {
-  margin-top: 7rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .flex {
   display: flex;
 }
@@ -987,6 +963,11 @@ video {
   height: 70px;
 }
 
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .h-full {
   height: 100%;
 }
@@ -995,19 +976,6 @@ video {
   height: 100vh;
 }
 
-.h-32 {
-  height: 8rem;
-}
-
-.h-28 {
-  height: 7rem;
-}
-
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -1044,6 +1012,10 @@ video {
   width: 35px;
 }
 
+.w-\[40\%\] {
+  width: 40%;
+}
+
 .w-\[40px\] {
   width: 40px;
 }
@@ -1089,10 +1061,6 @@ video {
   width: 100vw;
 }
 
-.w-\[30\%\] {
-  width: 30%;
-}
-
 .origin-left {
   transform-origin: left;
 }
@@ -1183,10 +1151,6 @@ video {
   align-self: flex-start;
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1259,6 +1223,10 @@ video {
   border-left-width: 1px;
 }
 
+.border-l-\[7px\] {
+  border-left-width: 7px;
+}
+
 .border-t-\[1px\] {
   border-top-width: 1px;
 }
@@ -1275,8 +1243,19 @@ video {
   border-top-width: 5px;
 }
 
-.border-l-\[7px\] {
+.border-\[rgb\(22\2c _163\2c _74\)\] {
-  border-left-width: 7px;
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
+.border-\[rgb\(249\2c _115\2c _22\)\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 115 22 / var(--tw-border-opacity));
+}
+
+.border-\[rgb\(255\2c _29\2c _72\)\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 29 72 / var(--tw-border-opacity));
 }
 
 .border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
@@ -1306,21 +1285,6 @@ video {
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
 }
 
-.border-\[rgb\(249\2c _115\2c _22\)\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 115 22 / var(--tw-border-opacity));
-}
-
-.border-\[rgb\(255\2c _29\2c _72\)\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 29 72 / var(--tw-border-opacity));
-}
-
-.border-\[rgb\(22\2c _163\2c _74\)\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
-}
-
 .border-l-accent_primary {
   --tw-border-opacity: 1;
   border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1340,10 +1304,22 @@ video {
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+.bg-\[rgba\(22\2c _163\2c _74\2c _0\.2\)\] {
+  background-color: rgba(22, 163, 74, 0.2);
+}
+
+.bg-\[rgba\(249\2c _115\2c _22\2c _0\.2\)\] {
+  background-color: rgba(249, 115, 22, 0.2);
+}
+
 .bg-\[rgba\(255\2c _255\2c _255\2c _0\.25\)\] {
   background-color: rgba(255, 255, 255, 0.25);
 }
 
+.bg-\[rgba\(255\2c _29\2c _72\2c _0\.2\)\] {
+  background-color: rgba(255, 29, 72, 0.2);
+}
+
 .bg-accent_four {
   --tw-bg-opacity: 1;
   background-color: rgb(172 203 222 / var(--tw-bg-opacity));
@@ -1364,56 +1340,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-\[rgb\(249\2c _115\2c _22\)\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
-
-.bg-\[rgb\(254\2c _215\2c _170\)\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-}
-
-.bg-\[rgb\(249\2c _115\2c _22\2c _0\.3\)\] {
-  background-color: rgb(249, 115, 22, 0.3);
-}
-
-.bg-\[rgb\(255\2c _29\2c _72\2c _0\.3\)\] {
-  background-color: rgb(255, 29, 72, 0.3);
-}
-
-.bg-accent_primary_transparent {
-  background-color: rgba(56, 189, 248, 0.30);
-}
-
-.bg-\[rgb\(22\2c _163\2c _74\2c _0\.3\)\] {
-  background-color: rgb(22, 163, 74, 0.3);
-}
-
-.bg-\[rgb\(255\2c _29\2c _72\2c _0\.2\)\] {
-  background-color: rgb(255, 29, 72, 0.2);
-}
-
-.bg-\[rgb\(22\2c _163\2c _74\2c _0\.2\)\] {
-  background-color: rgb(22, 163, 74, 0.2);
-}
-
-.bg-\[rgb\(249\2c _115\2c _22\2c _0\.2\)\] {
-  background-color: rgb(249, 115, 22, 0.2);
-}
-
-.bg-\[rgba\(22\2c _163\2c _74\2c _0\.2\)\] {
-  background-color: rgba(22, 163, 74, 0.2);
-}
-
-.bg-\[rgba\(249\2c _115\2c _22\2c _0\.2\)\] {
-  background-color: rgba(249, 115, 22, 0.2);
-}
-
-.bg-\[rgba\(255\2c _29\2c _72\2c _0\.2\)\] {
-  background-color: rgba(255, 29, 72, 0.2);
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1547,6 +1473,10 @@ video {
   padding-bottom: 0.30rem;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1615,6 +1545,21 @@ video {
   font-weight: 300;
 }
 
+.text-\[rgb\(22\2c _163\2c _74\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.text-\[rgb\(249\2c _115\2c _22\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(249 115 22 / var(--tw-text-opacity));
+}
+
+.text-\[rgb\(255\2c _29\2c _72\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 29 72 / var(--tw-text-opacity));
+}
+
 .text-accent_four {
   --tw-text-opacity: 1;
   color: rgb(172 203 222 / var(--tw-text-opacity));
@@ -1645,26 +1590,6 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
-.text-\[rgb\(234\2c _88\2c _12\)\] {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
-}
-
-.text-\[rgb\(249\2c _115\2c _22\)\] {
-  --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
-}
-
-.text-\[rgb\(255\2c _29\2c _72\)\] {
-  --tw-text-opacity: 1;
-  color: rgb(255 29 72 / var(--tw-text-opacity));
-}
-
-.text-\[rgb\(22\2c _163\2c _74\)\] {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
 .caret-accent_primary {
   caret-color: #38BDF8;
 }
@@ -2132,18 +2057,14 @@ video {
     width: 40%;
   }
 
-  .lg\:w-auto {
-    width: auto;
-  }
-
-  .lg\:w-\[60\%\] {
-    width: 60%;
-  }
-
   .lg\:w-\[50\%\] {
     width: 50%;
   }
 
+  .lg\:w-auto {
+    width: auto;
+  }
+
   .lg\:rotate-0 {
     --tw-rotate: 0deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

htdocs/contact.php

@@ -56,13 +56,13 @@ require 'core/query_functions.php';
             <div class="rightsec w-full lg:w-[40%]">
                 <form id="contactForm" class="contactform w-full flex flex-col justify-center bg-bg_secondary rounded-lg p-5" method="POST" enctype="application/x-www-form-urlencoded" autocomplete="off">
                     <input class="hidden" autocomplete="false" name="hidden" type="text">
-                    <p class="self-start text-lg mb-4"><i class="fa-solid fa-bell text-accent_primary"></i>&nbsp; Contact Form</p>
+                    <p class="self-start w-[40%] pb-1 text-lg mb-4"><i class="fa-solid fa-bell text-accent_primary"></i>&nbsp; Contact Form</p>
                     <div class="nameinputcont w-full relative my-4">
                         <input id="contactNameInput" type="text" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary">
                         <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Your Full Name</span>
                     </div>
                     <div class="emailinputcont w-full relative my-4">
-                        <input id="contactEmailInput" type="email" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary invalid:border-[#ff1c49]">
+                        <input id="contactEmailInput" type="email" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary invalid:border-[#ff1c49]" autocomplete="new-password">
                         <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary peer-invalid:text-[#ff1c49]">Your Email</span>
                     </div>
                     <div class="messagetextcont w-full relative my-4">