mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-20 01:09:35 +05:30
(feat): added reCaptcha in contact form
This commit is contained in:
@@ -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>
|
||||
@@ -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 {
|
||||
margin-top: 1rem;
|
||||
.mt-20 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 1.25rem;
|
||||
.mt-\[100\%\] {
|
||||
margin-top: 100%;
|
||||
}
|
||||
|
||||
.mt-14 {
|
||||
margin-top: 3.5rem;
|
||||
.mt-\[20\%\] {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.mb-14 {
|
||||
margin-bottom: 3.5rem;
|
||||
.mt-28 {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.mt-24 {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
@@ -999,8 +995,17 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[20px\] {
|
||||
height: 20px;
|
||||
.h-32 {
|
||||
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\] {
|
||||
width: 20px;
|
||||
.origin-left {
|
||||
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\%\] {
|
||||
width: 40%;
|
||||
.lg\:w-\[60\%\] {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.lg\:w-\[50\%\] {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.lg\:rotate-0 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user