-
\ No newline at end of file
diff --git a/htdocs/assets/_preloader.php b/htdocs/assets/_preloader.php
index feae240..95738c9 100644
--- a/htdocs/assets/_preloader.php
+++ b/htdocs/assets/_preloader.php
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 51d5aa0..5cd6275 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -283,6 +283,151 @@ background: #38BDF8;
}
}
+/* --- Mobile Navmenu Styling ---*/
+
+.navbtn-circle-popzooom-in {
+ animation: circlePopZoomIn 0.5s ease-in-out;
+ transform: scale(50);
+}
+
+.navbtn-circle-popzooom-out {
+ animation: circlePopZoomOut 0.5s ease-in-out;
+ transform: scale(1);
+}
+
+.navhamline1-to-cross {
+ animation: hamline1ToCross 0.5s ease-in-out;
+ transform: rotate(45deg) translateY(1px);
+}
+
+.navhamline2-to-cross {
+ animation: hamline2ToCross 0.5s ease-in-out;
+ transform: rotate(-45deg) translateY(-1px);
+}
+
+.navhamline1-to-hamline {
+ animation: hamline1ToHamline 0.5s ease-in-out;
+ transform: rotate(0deg) translateY(0px);
+}
+
+.navhamline2-to-hamline {
+ animation: hamline2ToHamline 0.5s ease-in-out;
+ transform: rotate(0deg) translateY(0px);
+}
+
+.navmenu-item-slide-right {
+ animation: navItemSlideRight 0.5s ease-in-out;
+}
+
+.navmenu-item-sliiide-left {
+ animation: navItemSlideRight 0.5s ease-in-out;
+}
+
+.navmenu-button-scale-up {
+ animation: buttonScaleUp 0.5s ease-in-out;
+}
+
+.navmenu-socials-show-up {
+ animation: socialsShowUp 0.3s ease-in-out;
+ opacity: 1;
+}
+
+@keyframes circlePopZoomIn {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(50);
+ }
+}
+
+@keyframes circlePopZoomOut {
+ 0% {
+ transform: scale(50);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes hamline1ToCross {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(45deg);
+ }
+}
+
+@keyframes hamline2ToCross {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-45deg);
+ }
+}
+
+@keyframes hamline1ToHamline {
+ 0% {
+ transform: rotate(45deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes hamline2ToHamline {
+ 0% {
+ transform: rotate(-45deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes navItemSlideRight {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes navItemSlideLeft {
+ 0% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+}
+
+@keyframes buttonScaleUp {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes socialsShowUp {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
/* --- Tooltip Styling --- */
.tippy-box[data-theme~='neosubhamoy'] {
diff --git a/htdocs/assets/js/navmenu-config.js b/htdocs/assets/js/navmenu-config.js
new file mode 100644
index 0000000..157f2f6
--- /dev/null
+++ b/htdocs/assets/js/navmenu-config.js
@@ -0,0 +1,77 @@
+let isMobileNavSliderOpen = false;
+
+function toggleNavSlider(){
+ if(isMobileNavSliderOpen){
+ closeNavslider();
+ isMobileNavSliderOpen = false;
+ }else{
+ showNavslider();
+ isMobileNavSliderOpen = true;
+ }
+}
+
+function showNavslider(){
+ $('#mobilenavbtncircle').removeClass('hidden');
+ $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-out')
+ $('#mobilenavbtncircle').addClass('navbtn-circle-popzooom-in')
+ $('#hamline1').removeClass('navhamline1-to-hamline')
+ $('#hamline1').removeClass('mb-1')
+ $('#hamline2').removeClass('navhamline2-to-hamline')
+ $('#hamline2').removeClass('mt-1')
+ $('#hamline1').addClass('navhamline1-to-cross')
+ $('#hamline2').addClass('navhamline2-to-cross')
+ $('#slidercontainer').removeClass('hidden');
+ $('#slidercontainer').addClass('flex');
+ setTimeout(function(){
+ removeClassSequentially(0, $('.mobnavitem'), 'hidden');
+ addClassSequentially(0, $('.mobnavitem'), 'navmenu-item-slide-right');
+ $('#mobnavmenufooterbtn').removeClass('hidden');
+ $('#mobnavmenufooterbtn').addClass('navmenu-button-scale-up');
+ $('.mobnavmenusocials').removeClass('hidden');
+ removeClassSequentially(0, $('.mobnavmenusocials'), 'opacity-0');
+ addClassSequentially(0, $('.mobnavmenusocials'), 'navmenu-socials-show-up');
+ }, 500);
+ $('body').addClass("overflow-hidden");
+}
+function closeNavslider(){
+ $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-in')
+ $('#mobilenavbtncircle').addClass('navbtn-circle-popzooom-out')
+ $('#hamline1').removeClass('navhamline1-to-cross')
+ $('#hamline2').removeClass('navhamline2-to-cross')
+ $('#hamline1').addClass('navhamline1-to-hamline')
+ $('#hamline2').addClass('navhamline2-to-hamline')
+ $('#hamline1').addClass('mb-1')
+ $('#hamline2').addClass('mt-1')
+ removeClassSequentially(0, $('.mobnavitem'), 'navmenu-item-slide-right');
+ $('#mobnavmenufooterbtn').addClass('hidden');
+ $('#mobnavmenufooterbtn').removeClass('navmenu-button-scale-up');
+ $('.mobnavitem').addClass('hidden');
+ $('.mobnavmenusocials').addClass('hidden');
+ addClassSequentially(0, $('.mobnavmenusocials'), 'opacity-0');
+ removeClassSequentially(0, $('.mobnavmenusocials'), 'navmenu-socials-show-up');
+ setTimeout(function(){
+ $('#mobilenavbtncircle').removeClass('navbtn-circle-popzooom-out')
+ $('#mobilenavbtncircle').addClass('hidden');
+ $('#slidercontainer').removeClass('flex');
+ $('#slidercontainer').addClass('hidden');
+ }, 500);
+ $('body').removeClass("overflow-hidden");
+}
+
+function addClassSequentially(index, elements, className) {
+ if (index < elements.length) {
+ $(elements[index]).addClass(className);
+ setTimeout(function() {
+ addClassSequentially(index + 1, elements, className);
+ }, 100);
+ }
+}
+
+function removeClassSequentially(index, elements, className) {
+ if (index < elements.length) {
+ $(elements[index]).removeClass(className);
+ setTimeout(function() {
+ removeClassSequentially(index + 1, elements, className);
+ }, 100);
+ }
+}
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index b30bff5..a63c580 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -706,10 +706,6 @@ video {
z-index: 20;
}
-.z-30 {
- z-index: 30;
-}
-
.z-40 {
z-index: 40;
}
@@ -722,12 +718,24 @@ video {
z-index: 100;
}
-.z-\[40\] {
- z-index: 40;
+.z-\[70\] {
+ z-index: 70;
}
-.z-\[50\] {
- z-index: 50;
+.z-\[75\] {
+ z-index: 75;
+}
+
+.z-\[80\] {
+ z-index: 80;
+}
+
+.z-\[90\] {
+ z-index: 90;
+}
+
+.z-\[999\] {
+ z-index: 999;
}
.m-2 {
@@ -1099,6 +1107,10 @@ video {
min-height: 15vh;
}
+.min-h-\[20px\] {
+ min-height: 20px;
+}
+
.w-0 {
width: 0px;
}
@@ -1119,12 +1131,12 @@ video {
width: 200px;
}
-.w-\[250px\] {
- width: 250px;
+.w-\[20px\] {
+ width: 20px;
}
-.w-\[25px\] {
- width: 25px;
+.w-\[250px\] {
+ width: 250px;
}
.w-\[27px\] {
@@ -1313,10 +1325,6 @@ video {
overflow: hidden;
}
-.overflow-x-hidden {
- overflow-x: hidden;
-}
-
.overflow-y-scroll {
overflow-y: scroll;
}
@@ -1839,6 +1847,10 @@ video {
color: rgb(255 29 72 / var(--tw-text-opacity));
}
+.text-\[transparent\] {
+ color: transparent;
+}
+
.text-accent_four {
--tw-text-opacity: 1;
color: rgb(172 203 222 / var(--tw-text-opacity));
@@ -1873,6 +1885,10 @@ video {
caret-color: #38BDF8;
}
+.opacity-0 {
+ opacity: 0;
+}
+
.opacity-20 {
opacity: 0.2;
}
@@ -1933,48 +1949,6 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.shadow-\[0px_5px_30px\] {
- --tw-shadow: 0px 5px 30px;
- --tw-shadow-colored: 0px 5px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_10px_20px\] {
- --tw-shadow: 0px 10px 20px;
- --tw-shadow-colored: 0px 10px 20px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_1px_20px\] {
- --tw-shadow: 0px 1px 20px;
- --tw-shadow-colored: 0px 1px 20px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_30px_20px\] {
- --tw-shadow: 0px 30px 20px;
- --tw-shadow-colored: 0px 30px 20px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_30px_30px\] {
- --tw-shadow: 0px 30px 30px;
- --tw-shadow-colored: 0px 30px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_40px_10px\] {
- --tw-shadow: 0px 40px 10px;
- --tw-shadow-colored: 0px 40px 10px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_40px_50px\] {
- --tw-shadow: 0px 40px 50px;
- --tw-shadow-colored: 0px 40px 50px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
.shadow-accent_primary {
--tw-shadow-color: #38BDF8;
--tw-shadow: var(--tw-shadow-colored);
@@ -2073,61 +2047,16 @@ video {
top: 50%;
}
-.before\:-bottom-\[50px\]::before {
- content: var(--tw-content);
- bottom: -50px;
-}
-
-.before\:left-0::before {
- content: var(--tw-content);
- left: 0px;
-}
-
.before\:h-\[40px\]::before {
content: var(--tw-content);
height: 40px;
}
-.before\:h-\[50px\]::before {
- content: var(--tw-content);
- height: 50px;
-}
-
.before\:w-\[20px\]::before {
content: var(--tw-content);
width: 20px;
}
-.before\:w-\[120px\]::before {
- content: var(--tw-content);
- width: 120px;
-}
-
-.before\:w-\[50px\]::before {
- content: var(--tw-content);
- width: 50px;
-}
-
-.before\:w-\[70px\]::before {
- content: var(--tw-content);
- width: 70px;
-}
-
-.before\:w-\[75px\]::before {
- content: var(--tw-content);
- width: 75px;
-}
-
-.before\:w-\[60px\]::before {
- content: var(--tw-content);
- width: 60px;
-}
-
-.before\:w-full::before {
- content: var(--tw-content);
- width: 100%;
-}
-
.before\:rounded-tr-full::before {
content: var(--tw-content);
border-top-right-radius: 9999px;
@@ -2139,12 +2068,6 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
-.before\:bg-accent_primary::before {
- content: var(--tw-content);
- --tw-bg-opacity: 1;
- background-color: rgb(56 189 248 / var(--tw-bg-opacity));
-}
-
.before\:shadow-\[0px_-10px_0_0_transparent\]::before {
content: var(--tw-content);
--tw-shadow: 0px -10px 0 0 transparent;
@@ -2152,68 +2075,6 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.before\:shadow-\[0px_-50px_30px\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px -50px 30px;
- --tw-shadow-colored: 0px -50px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_50px_30px\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 50px 30px;
- --tw-shadow-colored: 0px 50px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_-50px_30px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px -50px 30px inset;
- --tw-shadow-colored: inset 0px -50px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_50px_30px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 50px 30px inset;
- --tw-shadow-colored: inset 0px 50px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_0px_30px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 0px 30px inset;
- --tw-shadow-colored: inset 0px 0px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_10px_30px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 10px 30px inset;
- --tw-shadow-colored: inset 0px 10px 30px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_10px_50px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 10px 50px inset;
- --tw-shadow-colored: inset 0px 10px 50px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-\[0px_5px_50px_inset\]::before {
- content: var(--tw-content);
- --tw-shadow: 0px 5px 50px inset;
- --tw-shadow-colored: inset 0px 5px 50px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.before\:shadow-bg_primary::before {
- content: var(--tw-content);
- --tw-shadow-color: #0F172A;
- --tw-shadow: var(--tw-shadow-colored);
-}
-
.before\:content-\[\'\'\]::before {
--tw-content: '';
content: var(--tw-content);
@@ -2476,6 +2337,10 @@ video {
top: 8.2rem;
}
+ .lg\:z-10 {
+ z-index: 10;
+ }
+
.lg\:my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
diff --git a/htdocs/blog.php b/htdocs/blog.php
index 1a84e30..bc9634c 100644
--- a/htdocs/blog.php
+++ b/htdocs/blog.php
@@ -30,6 +30,7 @@ write_dataset($conn);
+
diff --git a/htdocs/contact.php b/htdocs/contact.php
index df9acd5..5be4314 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -113,6 +113,7 @@ write_dataset($conn);