(feat): added reCaptcha in contact form

htdocs/assets/_integrate.php

@@ -6,4 +6,5 @@
 <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
-<script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
+<script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
+<script src="https://www.google.com/recaptcha/api.js" async defer></script>

htdocs/assets/style.css

@@ -539,6 +539,10 @@ video {
   right: 0px;
 }
 
+.-top-\[0\.60rem\] {
+  top: -0.60rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -567,6 +571,10 @@ video {
   left: 0.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .left-\[2\.5rem\] {
   left: 2.5rem;
 }
@@ -619,34 +627,6 @@ video {
   top: 4.7rem;
 }
 
-.left-4 {
-  left: 1rem;
-}
-
-.top-\[-10\] {
-  top: -10;
-}
-
-.top-2 {
-  top: 0.5rem;
-}
-
-.-top-2 {
-  top: -0.5rem;
-}
-
-.-top-1 {
-  top: -0.25rem;
-}
-
-.-top-3 {
-  top: -0.75rem;
-}
-
-.-top-\[0\.60rem\] {
-  top: -0.60rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -724,6 +704,11 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -734,11 +719,6 @@ video {
   margin-bottom: 0.30rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -751,6 +731,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-14 {
+  margin-bottom: 3.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -855,6 +839,10 @@ video {
   margin-right: 1rem;
 }
 
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -867,6 +855,10 @@ video {
   margin-top: 3rem;
 }
 
+.mt-14 {
+  margin-top: 3.5rem;
+}
+
 .mt-16 {
   margin-top: 4rem;
 }
@@ -899,24 +891,28 @@ video {
   margin-top: 30vh;
 }
 
-.mt-4 {
+.mt-20 {
-  margin-top: 1rem;
+  margin-top: 5rem;
 }
 
-.mt-6 {
+.mt-auto {
-  margin-top: 1.5rem;
+  margin-top: auto;
 }
 
-.mr-5 {
+.mt-\[100\%\] {
-  margin-right: 1.25rem;
+  margin-top: 100%;
 }
 
-.mt-14 {
+.mt-\[20\%\] {
-  margin-top: 3.5rem;
+  margin-top: 20%;
 }
 
-.mb-14 {
+.mt-28 {
-  margin-bottom: 3.5rem;
+  margin-top: 7rem;
+}
+
+.mt-24 {
+  margin-top: 6rem;
 }
 
 .flex {
@@ -999,8 +995,17 @@ video {
   height: 100vh;
 }
 
-.h-\[20px\] {
+.h-32 {
-  height: 20px;
+  height: 8rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .w-0 {
@@ -1088,8 +1093,8 @@ video {
   width: 30%;
 }
 
-.w-\[20px\] {
+.origin-left {
-  width: 20px;
+  transform-origin: left;
 }
 
 .rotate-\[15deg\] {
@@ -1097,6 +1102,12 @@ video {
   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));
 }
 
+.scale-\[0\.70\] {
+  --tw-scale-x: 0.70;
+  --tw-scale-y: 0.70;
+  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));
+}
+
 .transform {
   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));
 }
@@ -1172,6 +1183,10 @@ video {
   align-self: flex-start;
 }
 
+.self-end {
+  align-self: flex-end;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1302,10 +1317,6 @@ video {
   border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
 }
 
-.border-b-accent_secondary_transparent {
-  border-bottom-color: rgba(255, 255, 255, 0.30);
-}
-
 .bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] {
   background-color: rgba(0, 0, 0, 0.4);
 }
@@ -1364,14 +1375,14 @@ video {
   padding: 1rem;
 }
 
-.p-\[0\.30rem\] {
-  padding: 0.30rem;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
 
+.p-\[0\.30rem\] {
+  padding: 0.30rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1565,10 +1576,6 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
-.text-accent_secondary_transparent {
-  color: rgba(255, 255, 255, 0.30);
-}
-
 .caret-accent_primary {
   caret-color: #38BDF8;
 }
@@ -1710,11 +1717,6 @@ video {
   border-color: rgb(255 28 73 / var(--tw-border-opacity));
 }
 
-.invalid\:border-\[\#ff8099\]:invalid {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 128 153 / var(--tw-border-opacity));
-}
-
 .hover\:scale-125:hover {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -1790,10 +1792,6 @@ video {
   border-color: rgb(56 189 248 / var(--tw-border-opacity));
 }
 
-.focus\:border-accent_primary_transparent:focus {
-  border-color: rgba(56, 189, 248, 0.30);
-}
-
 .group:hover .group-hover\:block {
   display: block;
 }
@@ -1810,11 +1808,6 @@ video {
   width: 100%;
 }
 
-.group:focus .group-focus\:text-accent_primary {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
 .peer:invalid ~ .peer-invalid\:text-\[\#ff1c49\] {
   --tw-text-opacity: 1;
   color: rgb(255 28 73 / var(--tw-text-opacity));
@@ -2046,12 +2039,20 @@ video {
     width: 350px;
   }
 
+  .lg\:w-\[40\%\] {
+    width: 40%;
+  }
+
   .lg\:w-auto {
     width: auto;
   }
 
-  .lg\:w-\[40\%\] {
+  .lg\:w-\[60\%\] {
-    width: 40%;
+    width: 60%;
+  }
+
+  .lg\:w-\[50\%\] {
+    width: 50%;
   }
 
   .lg\:rotate-0 {

htdocs/contact.php

@@ -36,7 +36,7 @@ require 'core/query_functions.php';
             </div>
         </div>
         <div id="contactsection" class="contactsection w-full flex flex-col justify-start lg:flex-row lg:justify-between items-start mt-32 mb-72 lg:mb-32 px-2 lg:px-0">
-            <div class="leftsec mb-14 lg:mb-0">
+            <div class="leftsec mb-14 w-full lg:w-[50%] lg:mb-0">
                 <h4 class="text-2xl font-bold mb-10">My <span class="text-accent_primary">Contact</span> Details</h4>
                 <div class="contactinfocont mt-14">
                     <div class="flex items-center my-4">
@@ -68,6 +68,9 @@ require 'core/query_functions.php';
                         <textarea type="text" rows="5" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary"></textarea>
                         <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Message</span>
                     </div>
+                    <div class="captchacont w-full mb-4">
+                        <div id="recaptcha" class="g-recaptcha w-full h-fit transform scale-[0.70] origin-left" data-sitekey="6Lfq2SspAAAAADDI2jvOiZ2snM_H0JENRK8vajoX" data-theme="dark"></div>
+                    </div>
                     <div class="contactsubmit w-full">
                         <button type="submit" class="bg-accent_primary rounded-full py-2 px-6 text-bg_primary font-bold hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500">SEND <i class="fa-regular fa-paper-plane ml-2"></i></button>
                     </div>