radial-gradient(circle farthest-corner at 32% 26%, #BADA55 0%, #57BA51 36.0321044921875%, #056A07 75.677490234375%)

$colors: (
  purple: #6a0dad,
  blue: #3498db,
  green: #2ecc71
);

@each $key, $val in $colors {
  @debug 'Key: #{$key}, Value: #{$val}';
}


//preview in the terminal

$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);



.card {
  display: block;
  padding: $base-padding;
  border: $base-border-thickness solid $light-grey;
  border-radius: $base-border-radius;
  box-shadow: $base-box-shadow;

  // Loop over all keys in the colors map and use them for background color variations
  @each $key, $val in $colors {
    &--bgcolor-#{$key} {
      background-color: $val;

        // Change text to white if the color is purple
    	// change the text to yellow if the color is red
    	// else leave it at black
      @if $key == "purple" {
        .card__body p {
          color: map-get($colors, "white" )
        }
      } @else if $key == "red"{
        .card__body p {
          color: map-get($colors, "yellow")
        }
      }@else {
        .card__body p {
          color: #000;
        }
      }
    }
  }

  &__title {
    h3 {
      font-size: $font-size-lg;
      padding-bottom: $base-padding;
      font-weight: bold;
    }
  }

  &__body {
    font-size: $base-font-size;

    a {
      text-decoration: underline;
    }
  }
}

// * color pallete creation
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);


// use this to get the data in the terminal
@debug map-get($colors);

//terminal prints
─> sass:map
1 │ @function get($map, $key, $keys...) {
  
  
 
 // Test a color with 
 @debug map-get($colors, "purple");
 // terminal prints: DEBUG: #9900ff
  
  
  // evaluation to true or false
	@debug map-has-key($colors, "firebrick"); //DEBUG: false

input[type="color"]::-webkit-color-swatch {
    border-color: transparent;
}

<style>
.reflection {
  width: 300px;
  height: 215px;
  margin: 50px auto;
}
.reflection-figure {
  position: relative;
  height: 215px;
  margin: 0;
}
.reflection-text {
  font: 0.8em sans-serif;
  position: absolute;
  right: 0; bottom: 20px;
  margin: 0;
  padding: 10px;
  background: rgba(255,255,255,.6);
  color: #000;
  transition: padding .3s;
}
.reflection:hover .reflection-text {
  padding-right: 50px;
}

/* reflection the standard way (detecting support) */
@supports (background: -moz-element(#css-element)) {
  .reflection::after{
    content: '';
    position: absolute;
    width: inherit; height: inherit;
    background: -moz-element(#css-element);
    transform: scaleY(-1);
    mask: url('#mask');
    opacity: .3;
  }
}

/* reflection the old WebKit way */
.reflection {
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3));
}
</style>
<div class="reflection">
  <figure class="reflection-figure" id="css-element">
    <img class="reflection-image" src="https://unsplash.it/300/215?image=84" alt="">
    <figcaption class="reflection-text">San Francisco, CA</figcaption>
  </figure>
</div>
<svg height="0">
  <mask id="mask">
    <rect width="100%" height="215" fill="url(#gradient)"/>
    <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient">
      <stop offset="50%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </mask>
</svg>

<style>
   @import url(https://fonts.googleapis.com/css?family=Droid+Sans:700);

/* counters */

body {
  counter-reset: characters;
}

input:checked {
  counter-increment: characters;
}

.total::after {
  content: counter(characters);
}

/* the rest is just to make things pretty */

body {
  margin: 32px;
  font: 700 32px/1 'Droid Sans', sans-serif;
  color: #fff;
  background-color: #3f584e;
}

h1 {
  margin: 0 0 32px;
  font-size: 48px;
}

h2 {
  margin: 0 0 8px 8px;
  font-size: inherit;
}

section {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .1);
}

input {
  position: absolute;
  left: -9999px;
}

label {
  float: left;
  margin: 8px;
  padding: 16px;
  border-radius: 4px;
  border: solid 2px rgba(255, 255, 255, .4);
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: all .1s;
}

label::before {
  display: inline;
}

input:checked + label {
  border: solid 2px #fff;
  background-color: rgba(255, 255, 255, .4);
  box-shadow: 0 0 10px #fff;
}

.total {
  padding: 16px 24px;
}
  </style>
<h1>בחר קוביה</h1>
<section class="characters">
  <h2>בחר קוביה או קוביות</h2>
  <input id="b" type="checkbox"><label for="b">ראשון</label>
  <input id="c" type="checkbox"><label for="c">שני</label>
  <input id="e" type="checkbox"><label for="e">שלישי</label>
  <input id="g" type="checkbox"><label for="g">רביעי</label>
  <input id="i" type="checkbox"><label for="i">חמישי</label>
  <input id="k" type="checkbox"><label for="k">שישי</label>
  <input id="l" type="checkbox"><label for="l">שביעי</label>
  <input id="o" type="checkbox"><label for="o">שמיני</label>
</section>
<section class="total">
  סה"כ נבחרו:
</section>

<script>
    jQuery(document).ready(function($){
        $(".elementor-field").focus(function() {
            $(this).prev('.elementor-field-label').addClass("active-field-label");
        }).focusout(function() {
            if(!$(this).val()) {
                $(this).prev('.elementor-field-label').removeClass("active-field-label");
            }
        });
    });
</script>
<style>
.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}
</style>

<style>
selector{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }
}
</style>

<!DOCTYPE html>
<html>

<head>
    <style id="grid1">
        * {
          box-sizing: border-box;
        }
        .wrapper {
          max-width: 940px;
          margin: 0 auto;
        }
        
        .wrapper > div {
          border: 2px solid rgb(233 171 88);
          border-radius: 5px;
          background-color: rgb(233 171 88 / 50%);
          padding: 1em;
          color: #d9480f;
        }
        
        .wrapper {
          display: grid;
          grid-template-columns: repeat(3, 5fr);
          gap: 10px;
          grid-auto-rows: minmax(100px, auto);
        }
        .one {
          grid-column: 1 / 3;
          grid-row: 1;
        }
        .two {
          grid-column: 3 ;
          grid-row: 1 / 4;
        }
        .three {
          grid-column: 1;
          grid-row: 2 / 5;
        }
        .four {
          grid-column: 2;
          grid-row: 2 / 4;
        }
        .five {
          grid-column: 2;
          grid-row: 4;
        }
        .six {
          grid-column: 3;
          grid-row: 4;
        }
    </style>
    <style id="grid2">
    .item1 { grid-area: header; }
    .item2 { grid-area: menu; }
    .item3 { grid-area: main; }
    .item4 { grid-area: right; }
    .item5 { grid-area: footer; }

    .grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    </style>
</head>

<body>
    <div class="wrapper" id="grid1">
        <div class="one">One</div>
        <div class="two">Two</div>
        <div class="three">Three</div>
        <div class="four">Four</div>
        <div class="five">Five</div>
        <div class="six">Six</div>
    </div>
    <div class="grid-container" id="grid2">
        <div class="item1">Header</div>
        <div class="item2">Menu</div>
        <div class="item3">Main</div>  
        <div class="item4">Right</div>
        <div class="item5">Footer</div>
	</div>

</body>

</html>

.basic grid{
  display: grid;
  gap: 1rem;
  
  /* 1 too skinny, too much code */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  
  /* 2 cleaner code */
  grid-template-columns: repeat(12, 1fr);
  
  /* 3 better sizing but overflows*/
  grid-template-columns: repeat(12, minmax(240px, 1fr));
  //doesnt get smaller than 240px but get as big as 1fr
  
  /* 4 final*/
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  //works also with auto-fill
  
}

<a class="icon-download btn btn-primary" href="https://[the URL]">Download</a></p>

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  max-height: 80vh; /* Limit height */
  overflow-y: auto; /* Add scroll if needed */
  border-radius: 10px;
}

.modal-header, .modal-body, .modal-footer {
  padding: 10px;
}

.modal-header {
  border-bottom: 1px solid #ddd;
}

.modal-footer {
  border-top: 1px solid #ddd;
  text-align: right;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Header and Dropdown Styles */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

#dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background: none;
  text-align: left;
}

#dropdown-menu button:hover {
  background-color: #ddd;
}

#add-icon {
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

#add-icon:hover {
  color: #666;
}

/* Input and Button Styles */
body {
  font-family: Arial, sans-serif;
}

#word-input {
  width: 50%;
  padding: 10px;
  font-size: 18px;
}

#num-words-input {
  width: 20%;
  padding: 10px;
  font-size: 18px;
}

#generate-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#generate-button:hover {
  background-color: #3e8e41;
}

#result {
  margin-top: 20px;
}

#word-list {
  font-size: 24px;
  font-weight: bold;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  padding: 0;
  list-style-type: none;
}

#word-list li {
  background-color: #f7f7f7;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

/* Reset Button Styles */
#reset {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
}

#reset:hover {
  background-color: #333;
  color: #fff;
}

#word-input:focus, #num-words-input:focus {
  border-color: #aaa;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#generate-button:active {
  transform: translateY(2px);
}

#result {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

#word-list li:nth-child(even) {
  background-color: #fff;
}

/* Flip Card Styles */
/* Flip Card Styles */
.flip-container {
  perspective: 1000px;
  display: inline-block;
  margin: 10px;
}

.flip-card {
  position: relative;
  width: 150px;
  height: 150px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-card .front, .flip-card .back {
  position: absolute;
  width: 100%; /* Ensure both sides take the full width */
  height: 100%; /* Ensure both sides take the full height */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent overflow of content */
  text-align: center; /* Center text horizontally */
  padding: 10px; /* Ensure padding does not push text out */
}

.flip-card .front {
  background-color: #fff;
  color: black;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.flip-card .back {
  background-color: #f9f9f9;
  color: black;
  transform: rotateY(180deg);
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Responsive font size to fit content */
.flip-card .front, .flip-card .back {
  font-size: calc(10px + 1vw); /* Adjust size dynamically based on viewport width */
}

selector {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
  }

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

/*ממקם את שדה ההסכמה בסוף הטופס מתחת לכפתור*/
selector .elementor-field-type-acceptance {
    order:4;
}

/*מעגל פינות ומיישר את הצ'בוקס*/
selector .elementor-field-option *, input[type=checkbox]:checked:before{
    border-radius: 100px;
    transform: translate3d(0px, 5px, 0px)
}

/*מעצב את המצב הלא מסומן*/
selector .elementor-field-option input[type=checkbox] {
		-webkit-appearance: none;
		border:3px solid #E70F57;
		padding:8px;
		display: inline-flex;
		width:8px;
		height:8px;
}

/*מעצב את המצב המסומן*/
input[type=checkbox]:checked:before
 {
        content: '\f00c';
        color: white;
		font-size:10px;
		padding-right: 3px;
		line-height: 19px;
        font-weight: 600;
        background-color: #E70F57;
		width:16px;
		height:16px;
        font-family:'Font Awesome\ 5 Free';
		transform: translate3d(8px, -8px, 0px);
		position: absolute;
}

pointer-events: none;

selector::before {
    content:"";
    width: 50px;
    height: 50px;
    background-image: url('/image.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 100%;
}

selector::after{
content: url("example.jpg");
}

selector::before{
content: url("example.jpg");
}

selector{
content: url("example.jpg");
}

selector .swiper-wrapper {
    transition-timing-function: linear;
}

transiiton: 0.5s;

selector{
    animation-name: floating 3s ease-in-out infinite;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }
}

selector{
    animation:spin 15s linear infinite;
}


@keyframes spin { 100% {
    transform: rotate(360deg); }

}

selector{
    -webkit-mask-image: url(/wp-content/uploads/2023/01/file.svg);
    mask-image: url(/wp-content/uploads/2023/01/file.svg);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mask-size: 100%;
    -webkit-mask-size: 100%;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

selector:hover{

@media only screen and (min-width: 1024px) {
selector{
    color: red !important;
}
}

@media only screen and (max-width: 1024px) {
selector{
    color: red !important;
}
}

opacity: 50%;

transform: translateX(20px);

width: 100px;

height: 100vh;

box-shadow: 0px 20px 40px #888888;

border-radius: 10px;

border-width: 5px;

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

margin: 50px 50px 50px 50px;

margin: 50px;
margin-top: 50px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 80px;

padding: 50px 50px 50px 50px;

padding: 50px;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

background: linear-gradient(180deg, #0000 60%, #FED130 60%, #FED130 85%,  #0000 80%);

color: blue;

font-weight: 100;

font-size: 20px;

font-family: heebo;

html, body{
overflow-x: hidden;
}

background: linear-gradient(195deg, #FE9D01, #ED269B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

background-color: white;
background-color: #ffffff;

background: linear-gradient(195deg, #FE9D01, #ED269B);

\xB0

.more-less .e-n-accordion-item span.mniej {
    display: none;
}

.more-less.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.more {
    display: none;
}
.more-less.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.less {
    display: inline;
}

function sum(...numbers) {
  // The rest operator is three dots followed by the variable name; by convention, it is typically called 'rest'
  // The rest operator must be the last parameter in the function definition
  return numbers.reduce((acc, val) => acc + val, 0);
}   // The reduce method is used to sum all the numbers in the array

<img src="your-image.jpg" alt="description" class="responsive-image">
  //1st way
.responsive-image {
  max-width: 100%;
  height: auto;
}
//2nd way
.responsive-image {
  width: 100%;
  height: auto;
}

<div class="responsive-background"></div>
//3rd way
  .responsive-background {
  width: 100%;
  height: 300px; /* Or any desired height */
  background: url('your-image.jpg') no-repeat center center;
  background-size: cover;
}

//4th way
<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="description" class="responsive-image">
</picture>
.responsive-image {
  width: 100%;
  height: auto;
}

.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}

/*Replace the class .mesh-test with your own as well as the four lines of code 
following right underneath (with the code from Mesher)*/

.mesh-test{
    background-color:hsla(95,0%,0%,1);
    background-image:
    radial-gradient(at 88% 79%, hsla(227,93%,77%,1) 0px, transparent 50%),
    radial-gradient(at 13% 9%, hsla(80,95%,71%,1) 0px, transparent 50%);

animation: gradient 13s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradient {
	0% {
		background-position: 0% 20%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 50% 70%;
	}
	100% {
		background-position: 0% 20%;
	}
}

selector:hover .elementor-heading-title {
     color: #F9F2E8;
     transition-duration: 300ms
}

ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper:before {
    content-visibility: hidden;
}

JavaScript
<script>
document.addEventListener('scroll', function(e) {
var header = document.getElementById('sticky-header');
var scrollTop = window.scrollY || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Scroll Down
header.style.transform = 'translateY(-100%)';
} else {
// Scroll Up
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}, false);

var lastScrollTop = 0;
</script>

CSS
#sticky-header {
transition: transform 0.3s ease-in-out;
}

selector {
overflow-x: auto; /* Enables horizontal scrolling if content overflows */
-webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
}

<!-- in css: -->
<style>
  #p-bar-wrapper {
   	display:none;
   	position: fixed;
   	bottom: 0;
   	right: 0;
   	width: 100vw;
   	height: 8px;
   	background-color:#d1d6d8;
   	z-index: 18;
  }
  #progress-bar {
   	background-color:#295b71;
   	width: 0;
   	height: 8px;
   	transition: .3s;
  }
  #progress-bar span {
   	position: absolute;
   	color: #42616c;
   	top: -18px;
   	font-size: 0.8em;
   	font-weight: 600;
   	margin-right:0;
  }
  #run-bar.right-fix {
   	margin-right: -80px;
  }
  #run-bar.right-fix-2one {
   	margin-right: -77px;
  }
</style>

<!-- in html: -->
<div id="p-bar-wrapper">
    <div id="progress-bar"><span id="run-bar"></span></div>
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
    document.addEventListener("DOMContentLoaded", function() {
    	  document.addEventListener("scroll", function() {
    	    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    	    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    		var windowWidth = window.innerWidth;
    		var p_bar =	document.getElementById("progress-bar");
    		var scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;
     
     	//Check if Tablet or smaller than hide all progress bar
    		if( windowWidth < 767 ){
    			return;
    		}
    		else {
    			jQuery("#p-bar-wrapper").css('display','block').show('slow');
    			p_bar.style.width = scrolled + "%";
    			var scrolled_num = parseInt(scrolled, 10);
    			var span_run = document.getElementById("run-bar");
    			jQuery(span_run).text(scrolled_num + '%').css('right',scrolled + '%');
    				if (scrolled == 100){
    					jQuery(span_run).addClass('right-fix-2one').css('color','#21f1af');
    				}
    				else {
    					jQuery(span_run).removeClass('right-fix-2one').css('color','#42616c');
    					if (scrolled > 15){
    						jQuery(span_run).addClass('right-fix');
    					}
    					else {
    						jQuery(span_run).removeClass('right-fix');
    					}
    				}
    			}
    		});
    	});	
</script>

<!-- in css: -->
<style>
	#up-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
  	  z-index: 15;
	  cursor: pointer;
      transition: all .3s;
  	}
 	img[src$=".svg"]{
		width:48px
    }
</style>

<!-- in html: -->
<div class="btn-hide" data-id="" data-element_type="widget" id="up-btn" data-settings="" alt="scroll to top">
	<img width="40" height="55" src="https://aspx.co.il/wp-content/uploads/2023/04/arrowup.svg" class="" alt="arrowup" /> 
</div>

<!-- in js: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" async>
	jQuery(document).ready(function($){
  
	//Check to see if the window is top if more then 500px from top display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 500) {
			$('#up-btn').fadeIn(300,'linear').removeClass('btn-hide');
		} else {
			$('#up-btn').fadeOut(200).hide('slow').addClass('btn-hide');
		}
	});

	//Click event to scroll to top
	$('#up-btn').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		$(this).addClass('btn-hide');
			return false;
	});
</script>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 h1.closest('header').style.backgroundColor = `var(--color-primary)`;

body {
  background: black;
}

.StyledReceipt {
  background-color: #fff;
  width: 22rem;
  position: relative;
  padding: 1rem;
  box-shadow: 0 -0.4rem 1rem -0.4rem rgba(0, 0, 0, 0.2);
}

.StyledReceipt::after {
  background-image: linear-gradient(135deg, #fff 0.5rem, transparent 0),
    linear-gradient(-135deg, #fff 0.5rem, transparent 0);
  background-position: left-bottom;
  background-repeat: repeat-x;
  background-size: 1rem;
  content: '';
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
  height: 1rem;
}

let heightStr = '56.54px';

let number = parseFloat(heightStr.replace('px', ''));
console.log(number)

// or on a DOM Element

 const message = document.querySelector('.message-container');
 console.log(getComputedStyle(message).height);
message.style.height =
    Number.parseFloat(getComputedStyle(message).height, 10) + 22.5 + 'px';

The Alphacodez Cryptocurrency Exchange Script is a robust solution for launching secure and efficient trading platforms, featuring user management, a high-performance trading engine, and wallet integration. It offers advanced security measures and customization options. Ongoing support and maintenance ensure smooth operation.

The transform-origin property is used to set the point around which a CSS transformation is applied. For example, when performing a rotate, the transform-origin determines around which point the element is rotated.

Remember that the transform property allows you to manipulate the shape of an element. In this case, using the rotate(60deg) value will rotate the element around its transform-origin point by 60 degrees clockwise.

The @keyframes at-rule is used to define the flow of a CSS animation. Within the @keyframes rule, you can create selectors for specific points in the animation sequence, such as 0% or 25%, or use from and to to define the start and end of the sequence.

@keyframes rules require a name to be assigned to them, which you use in other rules to reference. For example, the @keyframes freeCodeCamp { } rule would be named freeCodeCamp.

You now need to define how your animation should start. To do this, create a 0% rule within your @keyframes wheel rule. The properties you set in this nested selector will apply at the beginning of your animation.

As an example, this would be a 12% rule:

Example Code
@keyframes freecodecamp {
  12% {
    color: green;
  }
}

The animation-name property is used to link a @keyframes rule to a CSS selector. The value of this property should match the name of the @keyframes rule.

The animation-duration property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (s) or milliseconds (ms).

The animation-iteration-count property sets how many times your animation should repeat. This can be set to a number, or to infinite to indefinitely repeat the animation. 

The animation-timing-function property sets how the animation should progress over time. 

With your .wheel selector, you created four different properties to control the animation. For your .cabin selector, you can use the animation property to set these all at once.

Set the animation property of the .cabin rule to cabins 10s linear infinite. This will set the animation-name, animation-duration, animation-timing-function, and animation-iteration-count properties in that order.

You can use the ease-in-out timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle.

You can use the skew transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.

table {
  width: 95%;
  border-collapse: collapse;
  text-align: center;
}

td, th {
  padding: 3px;
  width: 50px;
  height: 35px;
  border: 1px solid #000000;
}

table input {
  min-width: calc(100% - 2px);       /* минус 2 пикселя бордеров */
  height: calc(100% + 6px);
  margin: 0 -3px; padding: 0 0.3em;
  font: inherit;
  border: 0;
  background: transparent;
}

table input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0,150,255, 0.3);
}

The loading attribute on an img element can be set to lazy to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load.

The Referer HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the rel attribute to noreferrer omits this information from the HTTP request.

CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements.

CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements.

Use the minmax function to make your columns responsive on any device. The minmax function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, fr, or even a keyword like max-content.

To add space between rows in the grid layout, you can use the row-gap property.

grid-template-columns sets the overall layout in the main rule, but you can adjust the placement in the child rules.

One option is the grid-column property, which is shorthand for grid-column-start and grid-column-end. The grid-column property tells the grid item which grid line to start and end at.

The CSS repeat() function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the grid-template-columns property to repeat(20, 200px) would create 20 columns each 200px wide.

Remember that the grid-column property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use -1 for the end column.

The object-fit property tells the browser how to position the element within its container. In this case, cover will set the image to fill the container, cropping as needed to avoid changing the aspect ratio.

The default settings for CSS Grid will create additional rows as needed, unlike Flexbox.

As an alternative, you can use the grid-auto-flow property.

This property takes either row or column as the first value, with an optional second value of dense. grid-auto-flow uses an auto-placement algorithm to adjust the grid layout. Setting it to column will tell the algorithm to create new columns for content as needed. The dense value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order.

The algorithm defaults the new column width to be auto, which may not match your current columns.

You can override this with the grid-auto-columns property.

Much like Flexbox, with CSS Grid you can align the content of grid items with align-items and justify-items. align-items will align child elements along the column axis, and justify-items will align child elements along the row axis.

You can create columns within an element without using Grid by using the column-width property.

The ::first-letter pseudo-selector allows you to target the first letter in the text content of an element.

The gap property is a shorthand way to set the value of column-gap and row-gap at the same time. If given one value, it sets the column-gap and row-gap both to that value. If given two values, it sets the row-gap to the first value and the column-gap to the second.

The place-items property can be used to set the align-items and justify-items values at the same time. The place-items property takes one or two values. If one value is provided, it is used for both the align-items and justify-items properties. If two values are provided, the first value is used for the align-items property and the second value is used for the justify-items property.

Variable declarations begin with two dashes (-) and are given a name and a value like this: --variable-name: value;
                                             
To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name). Whatever value you gave the variable will be applied to whatever property you use it on.

You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: var(--variable-name, fallback-value). The property will use the fallback value when there's a problem with the variable. 

Variables are often declared in the :root selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere.

Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

Example Code
gradient-type(
  color1,
  color2
);

Gradients can use as many colors as you want like this:

Example Code
gradient-type(
  color1,
  color2,
  color3
);

You can specify where you want a gradient transition to complete by adding it to the color like this:

Example Code
gradient-type(
  color1,
  color2 20%,
  color3
);

Gradient transitions often gradually change from one color to another. You can make the change a solid line like this:

Example Code
linear-gradient(
  var(--first-color) 0%,
  var(--first-color) 40%,
  var(--second-color) 40%,
  var(--second-color) 80%
);

You can specify another direction by adding it before your colors like this:

Example Code
gradient-type(
  direction,
  color1,
  color2
);

You can add multiple gradients to an element by separating them with a comma (,) like this:

Example Code
gradient1(
  colors
),
gradient2(
  colors
);

Use the universal selector to add box-sizing: border-box; to your CSS. This ensures elements include padding and border in their specified width and height.

CSS positioning lets you set how you want an element to be positioned in the browser. It has a position property you can set to static, absolute, relative, sticky or fixed.

Once you set the position property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the top, right, left, or bottom properties.

static is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with top, right, left, or bottom.

When you use the relative value, the element is still positioned according to the normal flow of the document, but the top, left, bottom, and right values become active.

The next position property is absolute. When you use the absolute value for your position property, the element is taken out of the normal flow of the document, and then its position is determined by the top, right, bottom, and left properties.

fixed is a position property value that lets you make an element fixed to the page no matter where the user scrolls to on the page.

The last position property value is sticky. sticky positioning is a hybrid of relative and fixed positioning. It allows an element to stick to a specific position within its containing element or viewport, based on the scroll position.

The transform property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as translate(), rotate(), scale(), skew(), and matrix().

z-index is a property you can use to define the order of overlapping HTML elements. Any element with a higher z-index will always be positioned over an element with a lower z-index.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

The @media at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the max-width and min-width properties.

In the below example the padding is applied to the .card class when the viewport is 960px wide and below.

Example Code
@media (max-width: 960px) {
  .card {
    padding: 2rem;
  }
}

Logical operators can be used to construct more complex media queries. The and logical operator is used to query two media conditions.

For example, a media query that targets a display width between 500px and 1000px would be:

Example Code
@media (min-width: 500px) and (max-width: 1000px){

}

Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.

The only problem occurs when the browser window is narrower than the width of your element. The browser resolves this by creating a horizontal scrollbar on the page. 

Using max-width instead of width in this situation will improve the browser's handling of small windows. 

You can use CSS pseudo selectors to change specific HTML elements.

The span[class~="sr-only"] selector will select any span element whose class includes sr-only.

The CSS clip property is used to define the visible portions of an element. 

The clip-path property determines the shape the clip property should take.

The :first-of-type pseudo-selector is used to target the first element that matches the selector.

The :last-of-type pseudo-selector does the exact opposite - it targets the last element that matches the selector.

The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
.exampleClass {
  margin: 10px;
  width: calc(100% - 20px);
}

Adding position sticky moved the element into its own stack. To ensure your element does not get hidden by different stacks, add a z-index.

The :not() pseudo-selector is used to target all elements that do not match the selector.

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

The [attribute="value"] selector targets any element that has an attribute with a specific value. 

The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total.

The :nth-of-type() pseudo-selector is used to target specific elements based on their order among siblings of the same type.

Vertically align the text to the top, horizontally align the text to the right.
	text-align: right;
	vertical-align: top;

Flexbox helps you design your webpage so that it looks good on any screen size.

The box-sizing property is used to set this behavior. By default, the content-box model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.

The border-box sizing model does the opposite of content-box. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.

Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.

To use it, give an element a display property of flex. This will make the element a flex container. Any direct children of a flex container are called flex items.

Flexbox has a main and cross axis. The main axis is defined by the flex-direction property, which has four possible values:

row (default): horizontal axis with flex items from left to right
row-reverse: horizontal axis with flex items from right to left
column: vertical axis with flex items from top to bottom
column-reverse: vertical axis with flex items from bottom to top

The flex-wrap property determines how your flex items behave when the flex container is too small. Setting it to wrap will allow the items to wrap to the next row or column. nowrap (default) will prevent your items from wrapping and shrink them if needed.

The justify-content property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.

The align-items property positions the flex content along the cross axis. For example, with your flex-direction set to row (horizontal), your cross axis would be vertical.

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

The gap CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The gap property and its row-gap and column-gap sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.

The ::after pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same width as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set justify-content: center on the flex container.

Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.

In the CSS box model, every HTML element is treated as a box with four areas.

Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element.

The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.

Think of the border like the cardboard box your item was shipped in.

Margin is the area outside of the box, and can be used to control the space between other boxes or elements.

Use padding to adjust the spacing within an element.

Use margins to adjust the spacing outside of an element.


The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

Center the elements by setting its margin to auto.

It's helpful to have your margins push in one direction.

The filter property defines visual effects (like blur and saturation) to an element (often <img>).
                                                                                     
The CSS box-shadow property is used to apply one or more shadows to an element.
                                                                                     
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

img {
          margin: 0 auto;
          width: 800px;
          @include respond-to(maxlarge) {
            width: 700px;
          }
            @include respond-to(desktop) {
                width: 600px;
            }
            @include respond-to(tabs) {
                width: 500px;
            }
            @include respond-to(phablet) {
                width: 450px;
            }
          @include respond-to(mobile) {
            width: 420px;
          }
        }


   .slide-video{
            border-radius: 20px;
            width: 800px;
            @include respond-to(maxlarge) {
              width: 700px;
            }
            @include respond-to(desktop) {
              width: 600px;
            }
            @include respond-to(tabs) {
              width: 500px;
            }
            @include respond-to(phablet) {
              width: 450px;
            }
          }

/* single checkbox */

body.snapform .form-group .snap-field .check-box-label{
    padding-left: 40px!important;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:before{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent;
    border-color: var(--QLD-color-light-designAccent);
    background-image: none !important;
}

body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:after{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:before{
	width: 32px!important;
    height: 32px!important;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent!important;
    border-color: var(--QLD-color-light-designAccent)!important;
    background-image: none !important;

}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--QLD-color-light-text)' d='M25.6,11.4c0.2-0.2,0.2-0.5,0-0.7l-2.3-2.3c-0.2-0.2-0.5-0.2-0.7,0L14,17l-3.6-3.6c-0.2-0.2-0.5-0.2-0.7,0l-2.3,2.3 c-0.2,0.2-0.2,0.5,0,0.7l6.3,6.3c0.2,0.2,0.5,0.2,0.7,0L25.6,11.4L25.6,11.4z'/%3E%3C/svg%3E");
    background-size: 30px!important;
    background-position: -2px -2px!important;
    font-size: 20px !important;
    left: 0px!important;

}

@mixin width {
    width: auto !important;
}
table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th,
        tbody td,
        tfoot th,
        tfoot td  {
            @include width;
        }
    }
}

table.table-fit {
  width: auto !important;
  table-layout: auto !important;
}
table.table-fit thead th,
table.table-fit tbody td,
table.table-fit tfoot th,
table.table-fit tfoot td {
  width: auto !important;
}

ol.custom-ordered-list{
       counter-reset: list-counter; /* Initialize the counter */
        list-style: none; /* Remove default list styling */
        padding-left: 0; /* Remove default padding */       
    li{
            counter-increment: list-counter; /* Increment the counter */
            position: relative; /* Positioning for the pseudo-element */
            padding-left: 60px; /* Space for the counter */
            padding-bottom: 12px;
            line-height: 30px;
            left: 0;
        
        &:before{
            content: counter(list-counter, decimal-leading-zero) ""; /* Display the counter with leading zeros */
            position: absolute; /* Position it absolutely within the list item */
            left: 0; /* Align it to the left */
            width: 2em; /* Width for the counter */
            text-align: right; /* Align text to the right */
            font-size: 24px;
            font-weight: bold;
            color: #2E844B;
        }
    }
}

<p>TopHomeworkHelper.com offers comprehensive programming help for students, covering various programming languages like Java, Python, C++, and more. Services include assignment help, coding assistance, and debugging support. With 24/7 availability and experienced tutors, the platform ensures timely and reliable solutions for all programming-related academic needs.<br /><br />Source:&nbsp;<a href="https://tophomeworkhelper.com/programming-help.html" target="_blank" rel="noopener">Programming Homework Help</a></p>
<p>&nbsp;</p>

.noClick {
  pointer-events: none;
}

public delegate void Print(int val);

static void ConsolePrint(int i)
{
    Console.WriteLine(i);
}

static void Main(string[] args)
{           
    Print prnt = ConsolePrint;
    prnt(10);
}

/**
 * Filters the next, previous and submit buttons.
 * Replaces the form's <input> buttons with <button> while maintaining attributes from original <input>.
 *
 * @param string $button Contains the <input> tag to be filtered.
 * @param object $form Contains all the properties of the current form.
 *
 * @return string The filtered button.
 */
add_filter('gform_next_button', 'input_to_button', 10, 2);
add_filter('gform_previous_button', 'input_to_button', 10, 2);
add_filter('gform_submit_button,', 'input_to_button', 10, 2);
function input_to_button($button, $form)
{
  $dom = new DOMDocument();
  $dom->loadHTML('<?xml encoding="utf-8" ?>' . $button);
  $input = $dom->getElementsByTagName('input')->item(0);
  $new_button = $dom->createElement('button');
  $new_button->appendChild($dom->createTextNode($input->getAttribute('value')));
  $input->removeAttribute('value');
  foreach ($input->attributes as $attribute) {
    $new_button->setAttribute($attribute->name, $attribute->value);
  }

  $classes = $new_button->getAttribute('class');
  $classes .= " btn";
  $new_button->setAttribute('class', $classes);
  $input->parentNode->replaceChild($new_button, $input);

  return $dom->saveHtml($new_button);
}

.gfield-choice-input {
      opacity: 0;
      position: absolute;
   // top: 50% !important;
   // transform: translateY(-50%);

      &:checked+label {
        background: $primary;
        color: $white;
      }
    }

    .gchoice {
      input:checked+label {
        &:before {
          filter: brightness(5);
        }
      }
    }

position: -webkit-sticky; //Safari
position: sticky;
top: 120px;

// apply css overflow: visible; or overflow: auto; div all parent

&::-webkit-scrollbar {
  width: 5px;
}
  &::-webkit-scrollbar-track {
  background-color: #EBEBEB;
}
&::-webkit-scrollbar-thumb {
  background-color: #B9B9B9;
  border-radius: 5px;
}

//css
@media (min-width:768px) and (max-width:992px) {
    .foo {
        display:none;
    }
}
//scss
//@media (min-width:768px) and (max-width:992px) {
  // display:none;
//}

 display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
text-overflow: ellipsis;
width: 272px;
height: 59px;
overflow: hidden;

/*
Theme Name: My Custom Theme
Theme URI: http://example.com/my-custom-theme/
Author: Your Name
Author URI: http://example.com
Description: A brief description of the theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

label {
      font-family: $Josef;
      font-size: 1.5rem;
      line-height: 5.2rem;
      position: absolute;
      left: 22px;
      color: $black;
      z-index: 1;
      transition: transform .15s ease-out, font-size .15s ease-out;
    }

    &.focused {
      label {
        top: 0px;
        transform: translateY(5%);
        line-height: 1.5rem;
        font-size: 1.2rem;
        color: $black;
      }
    }

  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid #dd0031!important;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

/*********************
BASE STYLE for Aesthetics Only
*********************/

body {
	background-color: #e6e7e8;
	color: #000000;
	margin-top: 3%;
}

.container {
	background-color: #ffffff;
	width: 75%;
	padding: 1.5%;
}

h2 {
	color: #F79420;
	padding-bottom: 1.5%;
}

.button-container:not(.never-hide):has(a:not([href])) {
  display: none;
}

background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

.gform_wrapper.gravity-theme .gfield-choice-input {
    opacity: 0;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);

    &:checked+label {
      background: green;
      color: $white;
    }
  }

  .gchoice {
    input:checked+label {
      &:before {
        filter: brightness(5);
      }
    }
  }

  .gform_wrapper.gravity-theme .gchoice {
    max-width: 423px;
    margin-right: 0;
    margin-bottom: 1rem;

    @media (min-width: $xl) {
      margin-right: 10px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .gform_wrapper.gravity-theme .gchoice {
    label {
      background: lightgray;
      border-radius: 80px;
      padding: 15px 30px;
      display: inline-block;
      width: auto;
      position: relative;
      color: $black;
      font-size: 20px;
      line-height: 28px;
      display: flex;
      align-items: center;
      max-width: 100%;

      @media (min-width: $xl) {
        padding: 15px 20px;
      }

      @media (min-width: $xxl) {
        padding: 15px 30px;
      }

      &:before {
        position: relative;
        content: '';
        z-index: 1;
        width: 24px;
        height: 20px;
        margin-right: 12px;
        display: block;
        background-repeat: no-repeat !important;
      }
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft Block Path Finder</title>
  <style>
      .minecraft-block-path-finder-main {
    background: none;
    display: block;
    padding: 0px 0px 0px 0px;
    font: bold 17px/30px Arial, Helvetica, sans-serif;
    min-width: 260px;
    margin: 50px auto 0px auto;
    border: none;
  }

  .minecraft-block-path-finder-main:after {
    content: "";
    clear: both;
  }

  .noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .minecraft-block-path-finder-card {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  .minecraft-block-path-finder-cards {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }

  .minecraft-block-path-finder-card00 {
    padding: 1rem 2rem 1rem 2rem;
    height: 70px;
  }

  
  
  .minecraft-block-path-finder-cards00 {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .minecraft-block-path-finder-blocks {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border: none;
    text-align: center;
    min-height: 50px;
  }

  .minecraft-block-path-finder-click-blocks {
    background: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: block;
    padding: 10px 10px 10px 10px;
    margin: 10px 0px;
    border-width: 2px;
    border-style: solid;
    border-color: #108dc7;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 250px;
    color: #108dc7;
    position: relative !important;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .minecraft-block-path-finder-click-blocks::-webkit-scrollbar {
    display: none;
  }

  .minecraft-block-path-finder-click-blocks:hover {
    background: #24aded;
    color: white;
    text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255),
      0px -1px 0px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .minecraft-block-path-finder-cmnd-button {
    transition: color 0.15s ease-in;
    font-size: 35px;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    color: white;
    cursor: pointer;
  }

  .minecraft-block-path-finder-reset-button:hover {
    color: #8d8c85;
    transition: color 0.3s ease-in;
    transition: color 0.3s ease-out;
  }

  .stepper_select {
    display: none;
  }
  
  .tool-input input[type="number"] {
    width: calc(100% - 2px); 
    height: 25px;
    border: none;
    border-radius: 0;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
    outline: none;
}
  
.tool-input input[type="number"]::placeholder {
    color: #E6E6E6;
}


.tool-input input[type="number"]:focus {
    outline: none;
}

  .stepper-input {
    width: 100%;
    height: 25px;
    border: 0px;
    border-radius: 2px;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0px 0px 5px 0px;
  }

  .stepper-input input {
    display: none;
  }

  .stepper-input .input {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .stepper-input .input :active {
    background: #24aded;
  }

  .stepper-input .input .range {
    overflow: hidden;
    text-align: center;
    flex: 1;
  }

  .stepper-input .input .range .list span {
    display: block;
    width: 100%;
    height: 25px;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
  }

  .stepper_btn {
    background: #24aded;
    background: -webkit-linear-gradient(to right, #24aded, #108dc7);
    background: linear-gradient(to right, #24aded, #108dc7);
    height: 100%;
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
    border: none;
    transition: all 300ms ease-in-out;
    flex: 0.2;
    text-align: center;
  }

  .stepper_btn:active {
    transform: translateY(1px);
  }

  .disabledivclick {
    pointer-events: none;
  }

  .table-fixed {
    width: 100%;
    caption-side: bottom;
  }

  .table-fixed tbody {
    display: block;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .table-fixed tbody::-webkit-scrollbar {
    display: none;
  }

  .table-fixed thead,
  .table-fixed tbody tr {
    display: table;
    width: 100%;
  }

  .table-fixed td,
  th {
    text-align: center;
    vertical-align: middle;
    width: 33%;
  }

  .table-fixed caption {
    margin-top: 20px;
  }

  .divparenttable {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #startlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #startlocations::after {
    content: "Start Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
  #endlocations::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: #108dc7; 
    z-index: 1;
    margin: -20px 0;
}
  #endlocations::after {
    content: "End Location";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #24aded;
    padding: 0 10px; 
    z-index: 2;
    margin: -20px 0;
}
	#startlocations,
#endlocations {
  position: relative;
}
  </style>
</head>
<body>
  <div class="minecraft-block-path-finder-main noselect">
    <div style="margin-top:30px; margin-bottom:10px;">
     
      <div id="startlocations" class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="startX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="startZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div id="endlocations" class="minecraft-block-path-finder-cards00" style="margin: 50px 0px 0px 0px;">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
            <div class="tool-input">
              <input id="endX" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
          </div>
          <div style="margin-top:-5px; color : white;">X-Coordinate</div>
        </div>
  
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endY" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Y-Coordinate</div>
        </div>
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="endZ" type="number" oninput="CalcUpdateOutput()" placeholder="enter value">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Z-Coordinate</div>
        </div>
      </div>
      <div class="minecraft-block-path-finder-cards00">
        <div class="minecraft-block-path-finder-card00 minecraft-block-path-finder-blocks">
          <div style="font-size:22px; color : white;">
  
            <div class="tool-input">
              <input id="spacing" type="number" oninput="CalcUpdateOutput()" placeholder="enter value (set to 1 for solid walls/ramps)">
            </div>
  
          </div>
          <div style="margin-top:-5px; color : white;">Block Spacing</div>
        </div>
      </div>
    </div>
    <div id="calc-console" oncontextmenu="return false;" class="divparenttable minecraft-block-path-finder-click-blocks ">
    </div>
  </div>
  <script src="script.js">
  	    let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

  let debounceTimer;

function debounce(func, delay) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(func, delay);
}

function CalcUpdateOutput() {
    debounce(() => {
        let startX = parseInt(document.getElementById("startX").value);
        let startY = parseInt(document.getElementById("startY").value);
        let startZ = parseInt(document.getElementById("startZ").value);
        let endX = parseInt(document.getElementById("endX").value);
        let endY = parseInt(document.getElementById("endY").value);
        let endZ = parseInt(document.getElementById("endZ").value);
        let spacing = parseInt(document.getElementById("spacing").value);

        let calcConsole = document.getElementById("calc-console");
        let blockPositions = '';
        let hasMessage = false;

        if (isNaN(startX) || isNaN(startY) || isNaN(startZ) || isNaN(endX) || isNaN(endY) || isNaN(endZ) || isNaN(spacing)) {
            blockPositions = "Please enter all coordinates and spacing.";
            hasMessage = true;
        } else if (spacing < 1) {
            blockPositions = "Block spacing must be at least 1.";
            hasMessage = true;
        } else {
            let dx = Math.abs(endX - startX);
            let dy = Math.abs(endY - startY);
            let dz = Math.abs(endZ - startZ);
            let maxLength = Math.max(dx, dy, dz);
            let currentStep = 0;

            function calculateNextBlock() {
                if (currentStep <= maxLength) {
                    let x = Math.round(startX + currentStep * (endX - startX) / maxLength);
                    let y = Math.round(startY + currentStep * (endY - startY) / maxLength);
                    let z = Math.round(startZ + currentStep * (endZ - startZ) / maxLength);
                    blockPositions += `#${currentStep / spacing + 1}: ${x}, ${y}, ${z}<br>`;
                    calcConsole.innerHTML = blockPositions;
                    currentStep += spacing;
                    setTimeout(calculateNextBlock, 0);
                }
            }

            calculateNextBlock();
        }

        if (hasMessage) {
            calcConsole.innerHTML = blockPositions;
            calcConsole.classList.add("divparenttable");
        } else {
            calcConsole.classList.remove("divparenttable");
        }
    }, 300);
}

document.addEventListener("DOMContentLoaded", function(event) { CalcUpdateOutput(); });        
  </script>
</body>
</html>

position: -webkit-sticky; //Safari
position: sticky;
top: 162px;

module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}

.header {
  padding: 1.5rem 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: $white;
  z-index: 99;
  @include transition(300ms);

  @media (min-width: $lg) {
    padding: 3rem 0;
  }

  &.sticky {
    background: $white !important;
    padding: 2rem 0;
  }

  &--transperant {
    background: transparent;
  }

  &__logo-link {

    img,
    svg {
      float: left;
      height: auto;
      // height: 100%;
      width: 100%;
      width: auto;

      @media (min-width: $sm) {
        height: 50px;
      }

      @media (min-width: $xl) {
        height: 60px;
      }
    }
  }

  &-btn {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    position: relative;

    @media (min-width:$lg) {
      margin-top: 0;
      display: inline-block;
    }

    @media (min-width:$lg) {
      margin-left: 4.5rem !important;
    }

    a {
      border-radius: 0 15px 0 15px;
      width: auto !important;
      padding: 7px 25px !important;
      font-size: 1.5rem !important;
      line-height: 2.2rem !important;

      @media (min-width: $xl) {
        padding: 5px 43px 5px 30px !important;
        line-height: 3rem !important;
      }
    }
  }

  &__burger {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    float: right;
    position: relative;
    z-index: 10;

    @media (min-width: $lg) {
      display: none;
    }

    .line {
      fill: none;
      stroke: $primary;
      stroke-width: 6;
      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .line1 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }

    .line2 {
      stroke-dasharray: 60 60;
      stroke-width: 6;
    }

    .line3 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }

    &.opened .line1 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }

    &.opened .line2 {
      stroke-dasharray: 1 60;
      stroke-dashoffset: -30;
      stroke-width: 6;
    }

    &.opened .line3 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }
  }

  .col-lg-10 {
    position: static;
  }

  .nav-main {
    float: right;
    display: none;
    position: absolute;
    right: 0;
    padding: 50px 15px;
    width: 100%;
    top: calc(100% + 0px);
    background: $white;
    height: calc(100vh - 80px);

    @media (min-width: $lg) {
      height: auto;
      position: static;
      background: none;
      padding: 0;
      max-width: none;
      width: auto;
      display: flex !important;
      align-items: center;
    }

    @media (max-width: 991px) {
      overflow: auto;
    }

    .primary {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 100%;
      text-align: center;

      @media (min-width: $lg) {
        text-align: left;
        display: flex;
        align-items: center;
      }
    }

    .menu {
      display: block;
      float: left;
      margin: 0;
      padding: 0;

      &-item {
        float: left;
        padding: 0;
        width: 100%;

        @media (min-width: $lg) {
          margin: 0 5px;
          width: auto;
        }

        i.dropdown-arv {
          position: absolute;
          right: 15px;
          width: 12px;
          height: 12px;
          text-align: center;
          top: 43%;
          z-index: 5;
          border-top: 2px solid $dark;
          border-right: 2px solid $dark;
          transform: translateY(-50%) rotate(135deg);

          &.active {
            transform: rotate(-45deg);
            content: "-";
          }
        }

        .dropdown-arv-cont {
          position: absolute;
          top: 4px;
          right: 18%;
          z-index: 5;
          width: 44px;
          height: 100%;
          @include transition(300ms);

          @media (min-width: $sm) {
            right: 35%;
          }

          @media (min-width: $md) {
            right: 40%;
          }

          @media (min-width: $lg) {
            display: none;
          }

          &.active {
            transform: rotate(180deg);
            @include transition(300ms);
          }
        }

        &:before {
          display: none;
        }

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }

        a {
          position: relative;
          font-family: $Quicksand;
          font-weight: $normal;
          float: left;
          color: $dark;
          width: 100%;
          padding: 5px 15px;
          font-size: 2.5rem;
          line-height: 3.5rem;

          @media (min-width: $lg) {
            width: auto;
            padding: 7px 10px;
            border-radius: 10px;
            font-size: 1.7rem;
            line-height: 2.7rem;
          }

          @media (min-width: $xl) {
            padding: 7px 10px;
          }

          @media (min-width: $xxl) {
            padding: 10px 19px;
          }

          &:hover,
          &.active {
            color: $primary;

            .dropdown-arv {
              border-color: $primary;
            }
          }
        }

        &.current-menu-item a,
        &.current-menu-parent>a {
          color: $primary;
          font-weight: $bold;

          .dropdown-arv {
            border-color: $primary;
          }
        }

        .sub-menu {
          display: none;
          width: 100%;
          // padding-bottom: 10px;

          @media (min-width: $lg) {
            width: 240px;
            position: absolute;
            top: 100%;
            left: 0;
            background: $white;
            border-top: 2px solid $blue;
            padding: 10px 0;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
          }

          &.active {
            @media (max-width: 991px) {
              display: block;
              float: left;
              width: 100%;
            }
          }

          .menu-item {
            margin: 0;

            a {
              color: $gray;
              width: 100%;
              padding: 3px 15px;
              font-weight: $normal;
              font-size: 1.6rem;
              line-height: 2.2rem;

              @media (min-width: $lg) {
                padding: 5px 15px;
              }

              &:hover {
                color: $blue;
                background: transparent;
              }

              &:before {
                content: '';
                display: none;
                padding-right: 5px;

                @media (max-width: 991px) {
                  display: inline-block;
                }
              }
            }

            &.current-menu-item a {
              color: $blue;
              background: transparent;
            }
          }
        }

        &:hover {
          .sub-menu {
            @media (min-width: $lg) {
              display: block;
            }
          }
        }

        &-has-children {
          // display: flex;
          // justify-content: center;

          a {
            // display: inline-block;
            // width: auto;
          }
        }
      }
    }
  }

  &__nav-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

body {

  &.home {
    .main-wrapper {
      padding-top: 0;
    }
  }

  .main-wrapper {
    padding-top: 8rem;

    @media (min-width:$lg) {
      padding-top: 12rem;
    }
  }
}

input[value="+"],
input[value="-"] {
	color: $primary;
}

.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

export function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null

  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  )
}

@media (max-width: 1024px) {
	.mobile-nav.wd-right {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: max-content !important;
		transform: translateY(-150%);
		pointer-events: none;
	}
	.mobile-nav.wd-opened {
		transform: translatey(70px);
		pointer-events: auto;
	}
	.wd-close-side.wd-fill.wd-close-side-opened {
		background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 54%), rgb(0 0 0 / 85%));
	}
	.site-mobile-menu li a {
		line-height: 1;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		min-height: 40px;
	}
	.icon-sub-menu {
		height: 40px;
		width: 40px;
		line-height: 40px;
	}
}

<link rel="stylesheet" href="//cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<style>
	label {
		margin: 2.5% !important;
		/* margin-left: 2.5% !important; */
		justify-content: end;
	
	}
</style>


<div class="page-wrapper">
			<!--page-content-wrapper-->
			<div class="page-content-wrapper">
				<div class="page-content">

					<div class="card radius-15">
						<div class="card-body">
							<div class="card-title">
								<div class=" align-items-center">
								<div class="col-6"><h4 class="mb-0">Feedback Details</h4></div>
								<!-- <div class="col-6" align="right">
									 <a href="<?php echo base_url('admin/notice/create'); ?>" class="btn btn-primary">Create</a> -->
								<!-- </div> --> 
								</div>
							</div>
							<hr/>
							<div class="table-responsive ">
								<table id="gallerytable" class="table mb-0 table-bordered table-striped ">
									<thead class="bg-primary text-white text-center ">
										<tr class="text-white">
											<th scope="col" class="text-white">Reason for visit</th>
											<th scope="col" class="text-white">FIR registered</th>
											<th scope="col" class="text-white">Issue addressed</th>
											<th scope="col" class="text-white">Police officer name </th>
											<th scope="col" class="text-white">Served you better</th>
											<th scope="col" class="text-white">Rate Bandra Police Station</th>
											<th scope="col" class="text-white">Victim of crime</th>
											<th scope="col" class="text-white">Safe Bandra West area</th>
											<th scope="col" class="text-white">Rate overall performance</th>
											<th scope="col" class="text-white">We contact you</th>
											<!-- <th scope="col" class="text-white">12</th>
											<th scope="col" class="text-white">13</th>
											<th scope="col" class="text-white">14</th>
											<th scope="col" class="text-white">15</th>
											<th scope="col" class="text-white">16</th>  -->
											<!-- <th scope="col" class="text-white">17</th> -->
										</tr>
									</thead>
									<tbody>
										<?php 
										
										if(!empty($feedbacklist)) { foreach($feedbacklist as $feedback) {?>
										<tr class="text-center">
											<td><?php echo $feedback->f_reason_for_visit_police_station;?></td>
											<td><?php echo $feedback->f_fir_registered;?></td>
											<td><?php echo $feedback->f_issue_addressed;?></td>
											<td><?php echo $feedback->f_police_officer_name;?></td>
											<td><?php echo $feedback->f_served_you_better;?></td>
											<td><?php echo $feedback->f_rate_bandra_police_station;?></td>
											<td><?php echo $feedback->f_victim_of_a_crime;?></td>
											<td><?php echo $feedback->f_feel_safe_in_the_bandra_west;?></td>
											<td><?php echo $feedback->f_rate_of_overall_performance;?></td>
											<td><?php echo $feedback->f_contact;?></td>
										</tr>
										<?php }} ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>

			</div>
		</div>
	</div>

	<!--Datatable-->
<script src="//cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>


<script type="text/javascript">
    $('#gallerytable').DataTable();
</script>

<script type="text/javascript">

   function delete_now(n_id){

   	//console.log(b_id);
   	   var url= "<?php echo base_url('admin/notice/delete?id=') ?>" + n_id;
       var r=confirm("Do you want to delete this?")
        if (r==true){
        	//console.log(url);
         window.location.href = url;
        }
        else{
        	return false;
        }
        
          
        
   }
</script>

html {
  font-size: 100%;
  line-height: 1.5;
}

main {
  padding: 1rlh; /* 🫶 */
}

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

:root {
  --main-bg-color: #f3f4f6;
  --title-color: #262626;
  --text-color: #525252;
  --font-family: "Arial", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main-bg-color);
  font-family: var(--font-family);
}

.blog-header,
.blog-footer {
  text-align: center;
  padding: 1rem;
  background-color: var(--title-color);
  color: white;
}

.blog-post {
  container-type: inline-size;
  margin: 1rem;
  padding: 1rem;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  & .post-title {
    color: var(--title-color);
    margin: 0 0 1rem 0;
    text-wrap: balance;
    font-size: 1em;
  }

  & .post-content {
    color: var(--text-color);
  }
}

@container (min-inline-size: 500px) {
  .blog-post {
    padding: 1.5rem;

    & .post-title {
      font-size: 1.25em;
    }
  }
}

.swiper-container {

    width: 0%;

    height: 100vh;

}

​

.swiper-slide {

    background-color: #5e42ff;

    display: flex;

    align-items: center;
10
    justify-content: center;

}

​

.swiper-hero-progress {

    position: absolute;

    left: 0;

    bottom: px;

    width: 0;

    height: 3px;

    background: #FFF;
20
    z-index: 5;

#cursor {

  position: fixed;

  z-index: 9;

  left: 0;

  top: 0;

  pointer-events: none;

/*   will-change: transform; */

/*   mix-blend-mode: difference; */
9
}

​

@media (hover: hover) and (pointer: fine) {

  .cursor__circle {

    width: 64px;

    height: 64px;

    margin-top: -50%;

    margin-left: -50%;

    border-radius: 50%;

    border: solid 1px rgba(227, 222, 3, 0.64);
19
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),

      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),

/*=========

scrollbar

=========*/

​

.scroll__inner {

  background-color: #ffffff;

  padding: 0 0 px 0;

  overflow-x: scroll;

  -ms-overflow-style: none;

  /* IE, Edge 対応 */

  scrollbar-width: none;

  /* Firefox 対応 */

}

.scroll__inner::-webkit-scrollbar {

  /* Chrome, Safari 対応 */

  display: none;

}

.simplebar-scrollbar::before {

  background: #ffffff;
20
  border-radius: 0;

  height: 5px !important;

  margin-left: 2px;

  margin-top: 3px;

}

// Featured Thumbnail
function featured_thumbnail() { 
	ob_start(); ?>
	<div class="thumbnail-block">
		<?php $featured_img_url = get_the_post_thumbnail_url( get_the_ID(),'full'); ?>
		<div class="page-thumbnail" style="background-image: url('<?php echo $featured_img_url; ?>');"></div>
	</div>
	<?php return ob_get_clean();
}
add_shortcode ('featured_thumbnail','featured_thumbnail');

@media (max-width: 767px) {
    #socket .container {
        text-align: center;
    }

    #socket .social_bookmarks li,
    #socket .social_bookmarks,
    #socket .sub_menu_socket li,
    #socket .sub_menu_socket,
    #socket .copyright {
        float: none !important;
    }

    #socket .sub_menu_socket li,
    #socket .social_bookmarks li {
        display: inline-block;
    }

    #socket .social_bookmarks {
        margin: 0 0 5px 0;
    }

    #socket .sub_menu_socket {
        margin: 0 !important;
        height: 30px;
    }

    #footer .flex_column, .widget {
        margin-bottom: 0 !important;
    }
}

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>

<style> 
  INPUT:checked + label {color: #00F;} 
</style>

<input id="theId" type="checkbox"><label for="theId"> The cat is here</label> 
<fieldset style="width:fit-content"><legend>Where is the Cat?</legend>
	<input id="cat_garden" name="cat_where" type="radio"><label for="cat_garden"> Garden</label> 
	<input id="cat_bed" name="cat_where" type="radio"><label for="cat_bed"> Bed</label> 
	<input id="cat_cushion" name="cat_where" type="radio"><label for="cat_cushion"> Cushion</label> 
</fieldset>

 //HTML





<div class="custom-mouse"></div>





//CSS


.custom-mouse{
    border: none;
    background-color: #fff;
    transform: translate(-50%, -100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}



//JS


let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
   let xValue = details.clientX;
   let yValue = details.clientY;

   setTimeout(() => {
       customMouse.style.top = `${yValue}px`;
       customMouse.style.left = `${xValue}px`;
         
   }, 100);


});

.div{
left: calc(-50vw - -50%);
position: relative;
width: 100vw;
}

.expanding-div {
    width: 200px;
    overflow: hidden;
    max-height: 0; /* Initial max height */
    transition: max-height 0.5s ease; /* Animation transition property */
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.expanding-div:hover {
    max-height: 500px; /* Adjust the max height as needed */
}

 
HTML

 <nav>
      <ul>
          <li class="item">Home</li>
          <li class="item">Content</li>
          <li class="item">About</li>
          <li class="item">Contact Us</li>

      </ul>
  </nav>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="script.js"></script>


CSS


body{
    background-color: #fff;
    overflow: hidden;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.item{
    color: grey;
    font-size: large;
    font-weight: bolder;
    cursor: pointer;
}


JS


let itemList = document.querySelectorAll(".item");


itemList.forEach(function (item, index) {

    let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true  })
    
    item.addEventListener("mouseenter", function() {
        animation.play()
    })
    item.addEventListener("mouseleave", function() {
        animation.reverse()
    })
})

var number;
Console.WriteLine("Enter a number:");
number = Convert.ToInt32(Console.ReadLine());
if (IsPrime(number))
{
    Console.WriteLine("**" + number + " is a prime number**");
}
else
{
    Console.WriteLine("**" + number + " is not a prime number**");
}

public static bool IsPrime(int number)
{
    if (number <= 1) return false;
    if (number == 2) return true;
    if (number % 2 == 0) return false;
    var boundary = (int)Math.Floor(Math.Sqrt(number));
    for (int i = 3; i <= boundary; i += 2)
        if (number % i == 0)
            return false;
    return true;
}

Here's a guide on how to start developing poker software, outlining key steps and code structure:

1. Define the Scope of Your Project:

    Game Variants: Choose which poker variants you'll include (e.g., Texas Hold'em, Omaha, 5-Card Draw).
    Features: Decide on essential features like player accounts, gameplay, betting, tournaments, chat, and multi-platform compatibility.
    Target Platforms: Determine if you're developing for web, desktop, mobile, or a combination.

2. Choose Your Programming Language and Development Environment:

    Common Languages: Python, Java, C++, C#, and JavaScript are popular choices for game development.
    Development Environments: Select an IDE (Integrated Development Environment) like Visual Studio Code, PyCharm, or Eclipse for efficient coding.

3. Structure Your Code:

    Classes: Create classes for representing cards, decks, hands, players, game tables, and the game logic itself.
    Functions: Write functions to handle shuffling, dealing, betting, evaluating hands, and managing game flow.

4. Implement Core Functionalities:

    Card Deck: Create a class to represent a deck of cards, with methods for shuffling and dealing cards.
    Player Hand: Implement a class to hold a player's hand, with methods for evaluating hand strength.
    Game Logic: Write the core game logic, including betting rounds, hand comparisons, and pot management.

5. Design the User Interface (UI):

    Visual Design: Create visually appealing UI elements using graphics libraries or frameworks.
    User Interaction: Implement intuitive controls for players to interact with the game.

6. Test Thoroughly:

    Unit Testing: Test individual code units to ensure they function as intended.
    Integration Testing: Verify that different parts of the code work together seamlessly.
    User Testing: Gather feedback from real users to identify bugs and areas for improvement.

7. Deploy and Maintain:

    Deployment: Make your poker software available to users on your chosen platforms.
    Maintenance: Address any bugs or issues, and update the software with new features or improvements over time.

#container {
  --n:7;   /* number of item */
  --d:12s; /* duration */

  width: 200px;
  height: 200px;
  margin: 40px auto;
  border: 1px solid #000;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
}
.item {
  grid-area:1/1;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(100px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/

#container {
  --n:7;   /* number of item */
  --d:12s; /* duration */

  width: 200px;
  height: 200px;
  margin: 40px auto;
  border: 1px solid #000;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
}
.item {
  grid-area:1/1;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(100px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

:root {
    --theme--page_preview-padding: 0;
}
.notion-table-view{
    padding-left:0;
    padding-right:0;
}
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block .notion-scroller div.notion-table-view, .fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block>div[style*="padding-left"],
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block .notion-scroller div.notion-gallery-view{
  padding-left:0!important;
  padding-right:0!important;
}
.enhancer--tweak-normalise_table_scroll .notion-collection-view-body .notion-table-view {
  width: 100% !important;
  padding-left: 0!important;
  padding-right: 0!important;
}
.layout.layout-wide{
  --margin-width: 30px!important;
}
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block div[style*=left][style*="position: sticky"]{
  left: 0px !important;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nunito+Sans:opsz@6..12&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    color: var(--text-color);
    font-family: 'Nunito Sans', sans-serif;
    user-select: none;
}

:root{
    /* --primary-color: #3498db; */
    --primary-color: #1e90ff;
    --secondary-color: #f5f5f5;
    --white:#fefefe;
    --dark:#303030;
    --text-color:#4a4a4a;
    --border:#eee;
    --border-focus:#bbb;
}

*::selection {
    background-color: var(--primary-color);
    color: var(--white);
}

*::-webkit-scrollbar {
    height: .5rem;
    width: 4px;
}

*::-webkit-scrollbar-track {
    /* background-color: var(--secondary-color); */
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 0;
}

html {
    /* font-size: 62.5%; */
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}

Certainly! The animation property in CSS is used to apply animations to elements on a webpage. Here is a basic example of how to use it:




.element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}




In the above example, we define an animation called slide-in using the @keyframes rule. We then apply this animation to the .element class using the animation-name property. The animation-duration property specifies how long the animation should take, the animation-delay property adds a delay before the animation starts, the animation-iteration-count property specifies how many times the animation should repeat, and the animation-direction property specifies the direction of the animation.

Within the @keyframes rule, we define the different stages of the animation using percentage values. In this example, we start with the element translated to the left by 100% (transform: translateX(-100%)) and end with the element at its original position (transform: translateX(0)).

You can customize the animation by adjusting these properties and the @keyframes rule to achieve different effects.

//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});

// ParentComponent.js:


import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parameterFromChild, setParameterFromChild] = useState('');

  // Callback function to receive the parameter from the child
  const handleChildParameter = (parameter) => {
    setParameterFromChild(parameter);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      
      {/* Render ChildComponent and pass the callback function as a prop */}
      <ChildComponent onParameterChange={handleChildParameter} />

      {/* Display the parameter received from the child */}
      {parameterFromChild && (
        <p>Parameter received from child: {parameterFromChild}</p>
      )}
    </div>
  );
};

export default ParentComponent;




//ChildComponent.js:
import React, { useState } from 'react';

const ChildComponent = ({ onParameterChange }) => {
  const [childParameter, setChildParameter] = useState('');

  const handleButtonClick = () => {
    // Update the childParameter state
    setChildParameter('Hello from ChildComponent!');
    
    // Invoke the callback function in the parent with the parameter
    onParameterChange('Hello from ChildComponent!');
  };

  return (
    <div>
      <h2>Child Component</h2>

      <button onClick={handleButtonClick} className="bg-blue-500 text-white px-4 py-2">
        Click me
      </button>
    </div>
  );
};

export default ChildComponent;

.test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;

    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

.test::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}

.center-five-columns,
.center-seven-columns {
    display: flex;
    column-gap: 30px;
    row-gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
}

.center-five-columns .flex_column,
.center-seven-columns .flex_column {
    width: 100% !important;
}

@media (min-width: 641px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 800px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .center-seven-columns .flex_column {
        width: calc(14.28% - 25.72px) !important;
    }

    .center-five-columns .flex_column {
        width: calc(20% - 24px) !important;
    }
}

@media (max-width: 640px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: 380px !important;
    }
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>flex yapı</title>
	<style type="text/css">
		.container{
			margin: auto;
			display: flex;
			width: 80%;
			flex-direction: column;
			height: 80%;
			position: relative;

		}
		.header{
			text-align: center;
			background-color: pink;
			width: 100%;
			border: 1px solid black;
			height: 25vh;
			margin-bottom: 5px;
		}
		.middleContainer{
			display:flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.box{
			width: 30%;
			height: 25vh;
			background-image: url(https://r.resimlink.com/fe0sC.png);
			margin-bottom: 2px;
		}
		.footer{
			text-align: center;
			background-color: whitesmoke;
			width: 100%;
			border: 1px solid black;
			height: 15vh;
			margin-bottom: 5px;
			background-image: url(https://r.resimlink.com/KIZis6lGL.png);
		}
		
        .metin2 {
           position: absolute;
           top: 85%;
           left: 32%;
        }
        .deneme{
        	background-image: url(https://r.resimlink.com/WfpQin-wy4Y.png);
        }
        .başlık{
        	background-image: url(https://r.resimlink.com/KIZis6lGL.png);
        }
        .metin3 {
           position: absolute;
           top: 92%;
           left: 32%;  
        }
        .metin4 {
           position: absolute;
           top: 92%;
           left: 53%;  
        }
        .font{
        	position: absolute;
            top: 10%;
            left: 26%;
        	font-size:70px;
        	font-weight: bolder;
        	font-style: Math Sans Bold;
        }
	</style>
 
</head>
<body background="https://r.resimlink.com/rfYMb.png">

    <div class="container">
    	<div class="header">
    		  <div class="başlık" style="height: 100%; width: 100%;">
        <div class="font"><a>KAMP MALZEMELERİ</a></div>
        <a href="https://r.resimlink.com/sGwEMYp9.png">→ site logosu ←</a>
        </div>
    	</div>
    	<div class="middleContainer">
    		<div class="box"><img src="çadır.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="lamba.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="sandalye.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="bıçak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="ocak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="masa.png" style="height: 100%; width: 100%;"></div>
        </div>
        <div class="footer"><img src="çerçeve.png" style="height: 100%; width: 100%;"></div>
        <div class="metin2"><a style="font-size:32px" href="https://www.youtube.com/@efeturda6627">→ YOUTUBE ←</a></div>
        <div class="metin3"><a style="font-size:32px" href="mailto:omerfaruksevci1726@gmail.com">→ GMAİL İÇİN ←</a></div>
        <div class="metin4"><a style="font-size:32px" href="https://www.instagram.com/umraniye75cmtal/">→ İNSTAGRAM  ←</a></div>
    </div>
</body>
</html>

const header = document.querySelector('header');
let lastScroll = 0;
const scrollThreshold = 10; 

window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        header.classList.add('small');
    } else if (currentScroll === 0) {
        header.classList.remove('small');
    }

    lastScroll = currentScroll;
});

const hamburger = document.querySelector(".hamburger");
const navmenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navmenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navmenu.classList.remove("active");
}));

<!-- This tells you if your device is dark mode enabled or not. -->
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
<style type=”text/css”>
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>

/* Here you can adjust the colors of your brand’s preferred dark mode theme. */
@media (prefers-color-scheme: dark ) {
.body {
      background-color: #CCCCCC !important;
}
h1, h2, h3, td {
      color: #9ea1f9 !important;
      padding: 0px 0px 0px 0px !important;
}
}

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}

/* General Styles */
body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

/* Carousel */
#carousel-container {
    width: 100%;
    overflow-x: hidden;
    background-color: rgba(255, 255, 255, 0);
    z-index: 920;
}

#carousel {
    white-space: nowrap;
    animation: scroll 40s linear infinite;
    margin-bottom: 20px;
    z-index: 921;
}

#carousel img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin-right: -5px;
}

/* Home Services */
.home-services {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #515151;
    text-align: center;
    padding: 0;
}

.home-services a h2 {
    font-size: 15px;
    color: #ffffff;
    background-color: #515151;
    transition: color .5s ease, background-color .5s ease;
    padding: 20px 30px;
    border-radius: 200px;
    margin: 10px;
    border: 0;
}

.home-services a h2:hover {
    color: #ffffff;
    background-color: #4A1621;
}

/* Home Content */
.home-content {
    line-height: 25px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-item {
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    align-items: center;
    transition: background-color 1s ease;
    border-radius: 200px;
    margin: 20px;
    cursor: pointer;
}

.home-item:hover {
    background-color: #515151;
}

.home-text {
    margin: 0 4vw 0 4vw;
    font-size: 16px;
}

.home-img img {
    width: 20vw;
    height: 100%;
}

.home-item ul {
    font-family: nunito;
    text-indent: 10px;
    color: white;
    line-height: 2vw;
    display: none;
}

.arrow img {
    width: 4vw;
    margin: 0 10vw;
    transform: translateX(0);
    transition: 2s ease;
}

.home-item:hover .arrow img {
    transform: translateX(30px);
}

.home-content h1,
.home-content h2 {
    color: white;
    white-space: nowrap;
}

/* Hero */
.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
    opacity: .4;
    transition: opacity 1s ease-in-out;
}

/* Hero Mobile */
@media (max-width: 900px) {
    .home-title h1 {
        display: none;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 10px 0;
    }

    .hero-image {
        position: relative;
        width: 100%;
        height: auto;
    }

    .hero-image img {
        width: 100%;
        height: 500px;
        display: block;
        object-fit: cover;
    }

    .hero-content {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 20vh;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 1;
        width: 100%;
        justify-content: center;
    }

    .hero-content button {
        border-radius: 200px;
        border: none;
        padding: 15px;
        font-family: Montserrat;
        cursor: pointer;
        margin: 5px;
        background-color: #fff;
        transition: .5s ease;
        width: 60vw;
        font-size: 15px;
        line-height: 14px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .hero-content button:hover {
        background-color: black;
        color: white;
    }
}

<body>
    <div class="hero-image slider">
        <img id="heroBackground" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg" alt="Hero Image">
    </div>

    <div class="hero-content">
        <div class="home-title">
            <h1>Danny Holman Media</h1>
        </div>

        <div class="hero-menu">
            <div class="hero-buttons">
                <a href="#web">
                    <button>Web Design & Development</button>
                </a>
                <a href="https://dannyholmanmedia.com/portfolio/">
                    <h2>View Portfolio >>></h2>
                </a>
            </div>

            <div class="hero-buttons">
                <a href="https://dannyholmanmedia.com/photo-portfolio/">
                    <button>Landscape & Travel Photography</button>
                </a>
                <a href="https://dannyholmanmedia.com/order-prints/">
                    <h2>Order Prints >>></h2>
                </a>
            </div>
        </div>
    </div>

    <div id="carousel-container">
        <div id="carousel">
            <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png" alt="Digital Media Service Icon">
        </div>
    </div>

    <div class="home-services" id="web">
        <a href="https://dannyholmanmedia.com/ux-portfolio/">
            <h2>UX / UI Design</h2>
        </a>
        <a href="https://dannyholmanmedia.com/webdev-portfolio/">
            <h2>Web Development</h2>
        </a>
        <a href="https://dannyholmanmedia.com/media-portfolio/#media">
            <h2>Media</h2>
        </a>
        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <h2>Photography</h2>
        </a>
    </div>

    <div class="home-content">
        <a href="https://dannyholmanmedia.com/ux-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>UX / UI Design</h1>
                    <h2>Concept to Design</h2>
                    <ul>
                        <li>• Case Studies</li>
                        <li>• Design Approach</li>
                        <li>• User Research</li>
                        <li>• Information Architecture</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/1.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/webdev-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Web Development</h1>
                    <h2>Design to Function</h2>
                    <ul>
                        <li>• HTML</li>
                        <li>• CSS</li>
                        <li>• JavaScript</li>
                        <li>• PHP</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/2.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/media-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Media</h1>
                    <h2>Digital Assets</h2>
                    <ul>
                        <li>• Video Production</li>
                        <li>• Graphic Design</li>
                        <li>• Document Design</li>
                        <li>• Data Visualization</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/3.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <div class="home-item">
                <div class="home-text">
                    <h1>Photography</h1>
                    <h2>Landscape & Travel</h2>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/home-photo.png" alt="Description of the image">
                </div>
            </div>
        </a>
    </div>
</body>

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #9600ff;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #20124d;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #fff100;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

color: hsl(50deg, 100%, 50%);

/* Same */
color: hsla(50deg, 100%, 50% / 1)

color: hsl(50deg 100% 50% / .5);

.parent {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .child {
    align-self: center;
  }
}

<span class="counter-value active" data-count="100">100</span>+
if(SDB.App.exists('.sg-counter-ready')){
					$(document).ready(startCounterReady);
					flag = 1;

					function startCounterReady() {
						if ($('.sg-counter-ready').length > 0) {
							$('.sg-counter-ready').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 1500,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
				if(SDB.App.exists('.sg-counter')){
					$(window).scroll(startCounter);
					flag = 1;

					function startCounter() {
						if ($('.sg-counter').length > 0) {
							$('.sg-counter').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 3000,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>

const photos = document.querySelectorAll('.photo');

function enlargeImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.add('enlarged');
    portfolioText.style.display = 'none';
}

function resetImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.remove('enlarged');
    portfolioText.style.display = 'block';
}

photos.forEach(photo => {
    photo.addEventListener('click', () => {
        enlargeImg(photo);
    });

    document.addEventListener('click', event => {
        if (!photo.contains(event.target)) {
            resetImg(photo);
        }
    });
});

* {
    padding: 0;
    margin: 0;
}

.portfolio-grid-container {
    max-width: 90vw;
    width: 95%;
    margin: auto;
    padding: 30px;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo {
    position: relative;
    cursor: pointer;
}

.photo img {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    filter: brightness(100%);
    border: none;
    animation: fadeIn 1s;
    transition: filter 0.5s ease, border 1s ease, width 0.5s ease, height 0.5s ease, animation 0.8s ease-in-out;
}

.photo img.enlarged {
    max-width: 90vw;
    max-height: 700px;
    margin-top: 60px !important;
    margin-bottom: 90px;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 995;
    filter: brightness(100%) !important;
    background-color: rgba(255, 255, 255, 0.482);
    border: 30px solid rgba(255, 255, 255, 0.363);
    animation: fadeIn 1s;
}

.photo.enlarged:hover .portfolio-text {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.photo:hover .portfolio-text {
    opacity: 1;
    cursor: pointer;
}

.photo:hover img {
    filter: brightness(80%);
}

.portfolio-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 994 !important;
}

.portfolio-text h2 {
    font-family: 'Julius Sans One';
    color: white;
    font-size: 30px;
    font-weight: 700;
}

.portfolio-text h3 {
    font-family: 'Nunito';
    color: white;
    font-weight: light;
    font-size: 15px;
}

@media (max-width: 1380px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 965px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

<?php get_header(); ?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/portfolio.css">
    <?php wp_head(); ?>
</head>

<body>
    <div class="overlay"></div>
    <h1 class="page-title">Photography Portfolio</h1>
    <div class="portfolio-grid-container">
        <div class="photo-gallery">
            <?php
            $portfolio_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => -1));

            if ($portfolio_query->have_posts()) :
                $count = 0;

                while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    $location = get_the_content();

                    if ($count % 7 === 0) {
                        echo '<div class="column">';
                    }
                    ?>
                    <div class="photo">
                        <img src="<?php echo esc_url($image_url); ?>" onclick="enlargeImg(this)" alt="">
                        <div class="portfolio-text">
                            <?php echo wp_kses_post($location); ?>
                        </div>
                    </div>
                    <?php
                    $count++;

                    if ($count % 7 === 0) {
                        echo '</div>';
                    }
                endwhile;

                if ($count % 7 !== 0) {
                    echo '</div>';
                }

                wp_reset_postdata();
            else :
                echo 'No portfolio items found.';
            endif;
            ?>
        </div>
    </div>
</body>

<?php
/*
Template Name: Photography Portfolio
*/
$portfolio_query = new WP_Query(array(
    'post_type' => 'portfolio',
    'posts_per_page' => -1,
));

if ($portfolio_query->have_posts()) :
    while ($portfolio_query->have_posts()) :
        $portfolio_query->the_post();
    endwhile;
    wp_reset_postdata();
else :
    echo 'No portfolio items found.';
endif;

get_footer(); ?>

    const images = [
        "https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png",
    
    ];

    const carousel = document.getElementById("carousel");

    images.forEach((imageUrl) => {
        const img = document.createElement("img");
        img.src = imageUrl;
        carousel.appendChild(img.cloneNode(true));
    });


 const slideshowImages = [
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-8.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-12.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-2.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-21.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-16.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg",


];

const heroBackground = document.getElementById("heroBackground");
let currentImageIndex = 0;

function updateHeroBackground() {
    heroBackground.style.opacity = .0;

    // After a short delay, update the image source and fade in
    setTimeout(() => {
        heroBackground.src = slideshowImages[currentImageIndex];
        heroBackground.style.opacity = .4;
    }, 1000);

    currentImageIndex = (currentImageIndex + 1) % slideshowImages.length;
}

setInterval(updateHeroBackground, 5000);

body {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.nav-menu .cart-icon {
    display: inline-block;
    background: url('https://dannyholmanmedia.com/wp-content/uploads/2023/11/Icons-1.png') no-repeat;
    width: 30px;
    height: 30px;
    background-size: contain;
    text-indent: 35px;
    font-family: 'montserrat';
    font-weight: 700;
}

header {
    position: fixed;
    height: 140px;
    transition: 0.5s ease;
    width: 100%;
    top: 0px;
    background-color: black;
    padding-top: 0px;
    z-index: 999;
    padding-bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
}

header #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header #header-logo {
    max-width: 100%;
    width: 150px;
    height: auto;
    padding-left: 0px;
    transition: width 0.5s ease;
    padding-top: 10px;
}

header.small {
    height: 50px;
    background-color: #515151;
}

header.small img {
    width: 10vw;
}

header.small #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header.small #header-logo {
    max-width: 100%;
    width: 60px;
    height: auto;
    padding-left: 0px;
}

@media (max-width: 900px) {
    header {
        position: fixed;
        top: 0px;
        height: 130px;
        transition: 0.5s ease;
    }

    header.small {
        position: fixed;
        top: 0px;
        height: 90px;
    }

    header.small #site-logo {
        display: flex;
        align-items: center;
        height: 100%;
    }

    header.small #header-logo {
        max-width: 100%;
        width: 90px;
        height: auto;
        padding-left: 0px;
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: white;
    text-decoration: none;
    position: center;
}

.navbar {
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
}

#site-menu {
    justify-content: center;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
    white-space: nowrap;
    align-items: center;
}

.nav-menu li {
    position: relative;
    margin: 5px 3vw;
    font-size: 15px;
}

.nav-menu a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    background-color: transparent;
    bottom: -6px;
    left: 0;
    transform-origin: left;
    transition: width 0.6s ease;
}

.nav-menu a:hover::before {
    width: 100%;
    transform: translateX(0);
    background-color: #4A1521;
}

.nav-link {
    transition: 0.3s ease;
}

.nav-link.hover {
    text-decoration: underline;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    align-items: center;
    padding-bottom: 30px;
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

@media (max-width: 900px) {
    .hamburger {
        display: block;
        right: 20px;
        top: 20px;
    }
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

.page-title {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeIn 4s ease-out;
    display: flex;
    justify-content: center;
    font-size: 60px;
    padding-bottom: 60px;
}

.contact-content {
    padding-left: 300px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    #header-logo {
        position: sticky;
        margin: 0;
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 999;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(315deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-315deg);
    }

    .nav-menu a {
        position: relative;
        padding: 20px;
        text-decoration: none !important;
        transition: color 0.3s ease;
        font-size: 35px;
    }

    .nav-menu a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 4px;
        background-color: transparent;
        bottom: -6px;
        transform: translateX(-50%) translateY(50%);
        transform-origin: left;
        transition: width 0.3s ease;
    }

    .nav-menu a:hover {
        color: #000000 !important;
    }

    .nav-menu a:hover::before {
        width: 100%;
        transform: translateX(-50%) translateY(50%);
        background-color: transparent;
    }

    .nav-menu {
        position: fixed;
        right: -200%;
        top: 0;
        gap: 0;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        transition: right 0.5s ease-in-out;
        background: #4a1521

<header>
    <div id="site-logo">
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <img id="header-logo" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH-Media-Logo_2024.png" alt="Turn this into a logo">
        </a>
    </div>

    <div id="site-menu">
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="https://dannyholmanmedia.com/about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/portfolio" class="nav-link">Portfolio</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/photo-portfolio" class="nav-link">Photography</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/order-prints" class="nav-link">Order Prints</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/contact" class="nav-link">Contact</a></li>

                <li class="nav-item">
                    <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="nav-link cart-icon">
                        <?php
                        $cart_count = WC()->cart->get_cart_contents_count();
                        if ($cart_count > 0) {
                            echo '(' . esc_html($cart_count) . ')';
                        }
                        ?>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </div>
</header>

<!DOCTYPE html>
<html>
<head>
    <title>Table with Flip Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="cards">
        <table id="SDGtop">
            <tr>
                <td>
                    <a href="#SDG3">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-3.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG7">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG7-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-7.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG8">
                        <div id="flipcard" class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG8-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-8.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG10">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG10-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-10.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#SDG11">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG11-ICON.svg" width="300" height="300">
                                </div>
                                <div class "flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-11.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG12">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG12-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-12.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG13">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG13-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-13.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG14">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG14-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-14.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>SDG 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="SDG3">
        <img class="img3" src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="2000" height="2000" alt="SDG 3">
        <div class="text3" style="text-align: left;">
            <h2><strong>SDG 3: Good Health and Well-being</strong></h2>
            <p style="color: black;"><strong>Ensure healthy lives and promote well-being for all at all ages</strong></p>
            <p style="color: black; font-size: 8vw;">
                Phasing out mercury-ladened fluorescent lamps will help to achieve
                <a href="https://sdgs.un.org/goals/goal3">objective 3.9</a>
                which seeks to substantially reduce the number of deaths and illnesses from hazardous chemicals and air, water and soil pollution and contamination.
            </p>
        </div>
    </div>
</body>
</html>

.cards {
    align-items: center;
    max-width: none;
    padding-left: 30px;
}

table {
    border-collapse: collapse;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    align-items: center;
}

td {
    border: 20px solid white;
    padding: 0;
    margin: auto;
}

.flip-card {
    background-color: white !important;
    border: 1px solid white;
    height: 300px;
    perspective: 1000px;
    width: auto;
    max-width: 20vw !important;
}

.flip-card-inner {
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 20vw;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    transform-origin: center !important;
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.flip-card-front {
    background-color: white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flip-card-back {
    color: #000000;
    transform: rotateY(180deg);
    display: auto;
    align-items: center;
    justify-content: auto;
}

h5,
p {
    margin: 20px;
    color: #FFFFFF;
}

@media (min-width: 1541px) {
    .flip-card {
        width: 15vw;
    }
    .cards {
        padding-left: 100px;
    }
}

.img3 {
    max-width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50px);
    transition: all 1.5s ease-out;
    opacity: 0;
    margin-left: 200px;
    margin-right: 20px;
}

.text3 {
    color: black;
    opacity: 0;
    transition: all 1.5s ease-out;
    transform: translateX(50px);
    text-align: left;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
}

.animate {
    opacity: 1;
    transform: translateX(0);
}

#SDG3 {
    display: flex;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1593px) {
    #SDG3 {
        max-width: 80vw;
        padding-left: 200px;
    }
}

@media (max-width: 1050px) {
    .text3 {
        padding-top: 30px;
        transform: translateX(0);
        max-width: 70%;
        text-align: center;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }
    .img3 {
        transform: translateX(0);
        max-width: 300px;
        height: auto;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }

    #SDG3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);

}

.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

}

.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);

}

<html>

<body>
    <div class="dark relative min-h-screen transition-all ease-out" id="parent">
        <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2">
            <span>dark</span>
            <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" />
        </label>
        <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl">
            <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1>
            <div>
                <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p>
            </div>
        </div>
    </div>
</body>

</html>

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

/* Mobile */
@media (max-width: 480px) { // styles
}
/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px) { // styles
}
/* Small tablets */
@media (min-width: 768px) and (max-width: 991px) { // styles
}
/* Large tablets/laptops */
@media (min-width: 992px) and (max-width: 1199px) { // styles
}
/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) { // styles
}
/* Extra large screens */
@media (min-width: 1920px) {
// styles
}

1.To check which Git credentials are configured in your system, you can use the following command in the terminal:

```bash
git config --list
```

2. To permanently remove the user.email and user.name settings from your Git configuration, you can use the following commands in the terminal:

```bash
git config --global --unset user.email
git config --global --unset user.name
```

3. Then run the git config --list command to check your Git configuration, the output will not include the user.email and user.name settings.

export enum ThemeOptions {
  Red = 'red',
}
  
export enum ThemeModes {
  Light = 'light-theme',
  Dark = 'dark-theme',
}
  
themeOptions: ThemeOption[] = [
    {
      text: 'Red',
      value: ThemeOptions.Red,
    },
];
  
themeChanged() { // Theme color changed
    document.body.className = '';
    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}

themeModeToggled() { // Theme mode changed: Light / Dark
    document.body.className = '';
    if (this.themeMode === ThemeModes.Light) {
      this.themeMode = ThemeModes.Dark;
    } else {
      this.themeMode = ThemeModes.Light;
    }

    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  switchTheme(theme: string) {
    let themeLink = this.document.getElementById(
      'app-theme'
    ) as HTMLLinkElement;

    if (themeLink) {
      themeLink.href = theme + '.css';
    }
  }
}

<link id="app-theme" rel="stylesheet" type="text/css" href="red-light.css"/>

{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-light-theme.scss",
  "bundleName": "red-light-theme",
  "inject": false
},
{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-dark-theme.scss",
  "bundleName": "red-dark-theme",
  "inject": false
},

.text{
    color: var(--black);
}
:root{
    --black: #000;
    --white: #fff;
}

@media (prefers-color-scheme: dark){
    :root{
        --black: #fff;
        --white: #000;
    }
}

<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>

<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>

/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);

<div>
    <div class="sticky top-0 flex h-12 w-full items-center bg-black">
        <input type="checkbox" class="peer hidden" id="a" />
        <label for="a" class="select-none border px-4 py-2 text-white"> ☰ </label>

        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 mt-12 w-64 -translate-x-full transform bg-gray-800 px-4 transition-transform duration-300 ease-in-out peer-checked:translate-x-0">
            <div class="flex h-full flex-col justify-between gap-4">
                <div class="border border-emerald-500">
                    <h1 class="text-2xl leading-loose text-white">Logo</h1>
                </div>
                <div class="overflow-y-auto border border-orange-500">
                    <!-- Links -->
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 1</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 2</a>
                    <div class="group">
                        <div class="relative">
                            <a href="#" class="group block py-2 text-white hover:bg-gray-700">
                                Link 3
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 transform text-white transition-transform group-hover:rotate-180">▼</span>
                            </a>
                        </div>
                        <div class="mt-2 hidden space-y-2 pl-4 group-hover:flex group-hover:flex-col">
                            <a href="#" class="text-white">Link 3.1</a>
                            <a href="#" class="text-white">Link 3.2</a>
                        </div>
                    </div>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                </div>
                <!-- Settings -->
                <div class="border border-lime-500"><button class="block py-2 text-white hover:bg-gray-700">Settings</button></div>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-grow bg-gray-100 p-4">
        <!-- Your Main Content Goes Here -->
        <p>....</p>
    </div>
</div>

function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);

// copy paste react
return (
<>
<style>
{`
.animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;}

.animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;}

.wrapper:hover .animated-text::after, .wrapper:hover .animated-text {
            transform: scaleX(1);}

//or (removing redundant, see if it works)
.wrapper:hover .animated-text1::after{
            transform: scaleX(1);}
 `}
<style>
<button className="wrapper">
<p className="animated-text">click</p>
</button>
</>
)

// copy paste for react 
return (
<>
    <style>{`
        .animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;
        }

        .animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: blue;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .animated-text:hover::after {
            transform: scaleX(1);
        }
    `}
</style>

    <p class="animated-text">Hover over this text to animate the underline.</p>

</>
)

selector input.jet-search-filter__input{
  
    background-image: url("https://desenvolvimento.pinaculodigital.com.br/andav/wp-content/uploads/2023/10/Vector.svg");
    background-repeat: no-repeat;
    background-position: 24px;
    padding-left: 52px !important;
    
}
selector input.jet-search-filter__input:focus-visible {
    outline: 1px solid #F47E54!important;
}

<body>
   <h2>About</h2>
   <p>
     <!-- Just add text decoration style:None -->
      Our <a href="" style="text-decoration: none;">Team</a>
   </p>
</body>

const [formErrors, setFormErrors] = useState<Partial<UserRegistrationFormAddressInfoDetails>>({
  address: '',
  countryName: '',
  nationalityName: '',
  cityName: '',
  passportNo: '',
  passportExpiryDate: '',
  // nationality: '',
  resident: '',
  companyAdd: '',
});


handleEmptyField('passportNo', userData.passportNumber || passportNo, 'Passport No is required');


useEffect(() => {
  if (passportNo) {
    setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
  }
}, [passportNo]);

<input
      type="text"
      className={`form-control passport-number-input ${formErrors.passportNo ? 'input-error' : ''}`}
      id="passportNumber"
      placeholder="Enter Your Passport Number"
      defaultValue={userData.passportNumber}
      maxLength={12}
      onChange={(e) => {
        setPassportNo(e.target.value);
        if (e.target.value) {
        setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
        }
        }}
      onInput={(e) => {
        const input = e.target as HTMLInputElement;
        input.value = input.value.replace(/[^a-zA-Z0-9 ]/g, '');
        setPassportNo(input.value);
        }}
      {...register('passportNo', {
      required: true,
      })}
/>

$md-primary: (
  50: #f2e7fe,
  100: #dbb2ff,
  200: #bb86fc,
  300: #985eff,
  400: #7f39fb,
  500: #6200ee,
  600: #5600e8,
  700: #3700b3,
  800: #30009c,
  900: #23036a,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  ),
);

$md-accent: (
  50: #c8fff4,
  100: #70efde,
  200: #03dac5,
  300: #00c4b4,
  400: #00b3a6,
  500: #01a299,
  600: #019592,
  700: #018786,
  800: #017374,
  900: #005457,
  A100: #a7ffeb,
  A200: #64ffda,
  A400: #1de9b6,
  A700: #00bfa5,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  ),
);

$md-warn: (
  50: #ffebef,
  100: #cf6679,
  200: #ff7597,
  300: #e77179,
  400: #f24e58,
  500: #f83a40,
  600: #e9313e,
  700: #d72638,
  800: #ff0266,
  900: #bb0d24,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
  ),
);

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

// Shortcode [king_events]

function king_events ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'king_events'
    );
    $args = array(
        'post_type' => 'tkc-event',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'event_date',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'compare' => '>',
                'value' => $today,
                'type' => 'DATE'
            )
        ),
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'event_type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $events_query = new WP_Query($args);

    ob_start();
    if($events_query->have_posts()) { ?>

    <div class="events-wrap">

    <?php

    while ($events_query->have_posts()) {
    $events_query->the_post(); ?>

    <div class="belove-event-inner">
        <div class="belove-event-img">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail('big-square'); } ?>
            </a>
        </div>
        <div class="belove-event-content">
            <h3><?php echo the_title(); ?></h3>
            <div class="event-details">
                <?php echo the_content(); ?>
            </div>
			<?php if (get_field('event_link')) { ?>
            <div class="belove-event-link">
                <?php if(get_field('button_label')) { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank"><?php echo get_field('button_label'); ?></a>
                <?php }else { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank">Registration</a>
                <?php }?>
            </div>
			<?php } ?>
        </div>
    </div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No Events found</div>
    <?php }
    return ob_get_clean();
}

add_shortcode('king_events', 'king_events');

  props,
  ref,
) => <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />);

export default function PhoneOTPVerification() {
  const [inputValue, setInputValue] = useState(['', '', '', '', '', '']);
  const [isVerified, setIsVerified] = useState(false);
  const [showInvalidOTPModal, setShowInvalidOTPModal] = useState(false);
  const [open, setOpen] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');

  const navigate = useNavigate();

  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
    // Only allow digit characters
    const value = e.target.value.replace(/\D/g, '');
    // Create a new array with the updated value
    const newValue = [...inputValue];
    newValue[index] = value;
    setInputValue(newValue);
  };

  const handleKeyDown = (e: { key: string; }) => {
    if (e.key === 'Backspace') {
      setInputValue(inputValue.slice(0, -1)); // Remove the last character from the input value
    }
  };
  const { userGuid } = useParams();
  const verifyPhoneNumber = async () => {
    // Join the inputValue array into a single string
    const userOtp = inputValue.join('');
    // Check if the length is 6 (since we have 6 input fields)
    if (userOtp.length === 6) {
      const response = await trackPromise(api.verifyOtp(userOtp, userGuid));
      if (response?.data?.Output?.phoneVerified) {
        setIsVerified(true);
        navigate(`/accounts/signup/identity-verification/${userGuid}`);
      } else {
        setOpen(true);
        setErrorMessage('Invalid OTP');
      }
    } else {
      setIsVerified(false);
    }
  };

  const resentOtp = async () => {
    const response = await trackPromise(api.resendOtp(userGuid));
    console.log('otp resend response:', response);
    // show success sbackbart nessga if otp resend successfully
    if (response?.data?.Output?.phoneNumber) {
      setPhoneNumber(response?.data?.Output?.phoneNumber);
      setSnackbarSeverity('success');
      setSnackbarMessage('OTP resend successfully');
      setSnackbarOpen(true);
    } else {
      setSnackbarSeverity('error');
      setSnackbarMessage('OTP resend failed. Try again.');
      setSnackbarOpen(true);
    }
  };

  // useEffect(() => {
  //   resentOtp();
  // }, []);

  return (
    <>
      <main className="otp-verify-container">
        <header className="header">
          <img src={Headericon} alt="Header Image" />
        </header>
        <section className="verification-section">
          <h1 className="verification-title">Phone Number Verification</h1>
          <article className="verification-content">
            <div className="verification-icon">
              <img src={SMSIcon} alt="SMS Icon" />
            </div>
            <div className="verification-subtitle">Enter 6 Digit OTP</div>
            <div className="verification-message">
              <span className="verification-message-text">
                We have sent an OTP on
                {' '}
                <span className="verification-message-phone">{phoneNumber}</span>
              </span>
              <button
                onClick={resentOtp}
                className="resend-link"
              >
                Resend OTP
              </button>
            </div>
            <div className="verification-input mb-5">
              {[...Array(6)].map((_, index) => (
                <input
                  key={index}
                  type="text"
                  maxLength={1}
                  className="otp-input"
                  value={inputValue[index] || ''}
                  onChange={(e) => handleChange(e, index)}
                />
              ))}
              <button type="button" onClick={verifyPhoneNumber}>
                Verify
              </button>
            </div>
          </article>
        </section>
        <InvalidOTPModal
          show={showInvalidOTPModal}
          handleClose={() => setShowInvalidOTPModal(false)}
        />

      </main>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="error" sx={{ width: '100%', backgroundColor: '#C13254' }}>
          {/* Oops! Something went wrong. Please try again later. */}
          {errorMessage}
        </Alert>
      </Snackbar>

      {/* snacbar for otp resend */}
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={() => setSnackbarOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={() => setSnackbarOpen(false)}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

    </>
  );
}

.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
 }
.item {
  flex: 0 0 auto; 
}

#cssDisplay {
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #1D2ECC;
  padding: 3px;
  margin: 3px;
  font-family: arial;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-variant: normal;
  line-height: 20px;
  background-image: url(img2.png);
  background-repeat: repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  position: static;
  border-radius: 8px;
  box-shadow: -1px 1px 1px #4A4A48;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Your Website Title</title>
    <link rel="stylesheet" type="text/css" href="code-1.css">
</head>
<body>
    <header>
        <h1>Welcome to Your Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about us section.</p>
        </section>

        <section>
            <h2>Contact Us</h2>
            <p>You can reach us at <a href="mailto:info@example.com">info@example.com</a>.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
</body>
</html>

.pv-inline-form{
	.gform_body{
		padding-top: 80px;
		@media(max-width: 860px){
			padding-top: 25px;
		}
		.gform_fields{
			.gfield{
				.ginput_container{
					flex-grow: 1;
					select {
						appearance: none;
						-webkit-appearance: none;
						-moz-appearance: none;
						background-image: url('/wp-content/uploads/2023/06/arrow-down.svg');
						background-repeat: no-repeat;
						background-size: 16px;
						background-position: right center;
						padding-right: 30px;
						/* padding-left: 0; */
					}
					@media(min-width: 861px){
						select{
							text-align: center !important;
							text-align: -webkit-center !important;
							text-align-last: center;
							-webkit-text-alig-last: center;
							-moz-text-align-last: center;
							direction: ltr;
							background-position: 70% center;
						}
						input{
							text-align: center !important;
						}
					}
				}
				@media(min-width: 861px){
					label, .gfield_description{
						flex: 0 0 auto;
					}
					.gfield_description{
						font-size: 20px;
					}
					&.scta-top{
						display: inline-flex;
						//width: 33.333% !important;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						&.scta-name{
							width: 38%;
						}
						&.scta-company{
							width: 31%;
						}
						&.scta-job{
							width: 31%;
						}
					}
					&.scta-center{
						display: inline-flex;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						padding-top: 25px;
					}
					&.scta-center.scta-subject{
						width: 33.3333%;
					}
					&.scta-center.scta-message{
						width: 66.6666%;
					}
					&.scta-bottom{
						display: inline-flex;
						width: 100%;
						justify-content: flex-start;
						align-items: center;
						gap: 10px;
						vertical-align: middle;
						padding-top: 25px;
					}
					&.scta-top:not(:first-child),
					&.scta-message{
						padding-left: 10px;
					}
				}
				@media(max-width: 860px){
					display: block !important;
					width: 100% !important;
					label{
						margin-bottom: 0 !important;
					}
					.gfield_description{
						padding-top: 15px;
						font-size: 16px;
					}
					.ginput_container{
						input, select{
							padding: 15px 0 !important;
						}
					}
					&:not(:first-child){
						margin-top: 20px;
					}
				}
				&.gfield_error{
					.ginput_container{
						input, select{
							border-color: red !important;
							border: unset !important;
							border-bottom: 1px solid red !important;
						}
					}
					.gfield_validation_message{
						display: none !important;
					}
				}
			}
		}
	}
	.gform_footer{
		padding-top: 45px;
		span.fas.fa-arrow-right{
			&::before{
				@include arrow-white;
				margin-left: 10px;
			}
		}
		@media(max-width: 860px){
			padding-top: 0 !important;
		}
	}
} 

// Bx Slider 
 
function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}
 
add_action('wp_enqueue_scripts', 'custom_scripts');
 
function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }
 
add_action ('wp_footer', 'bxslider_init');

<!-- MARKUP - Put Codeblock Class as 'slider-logos' -->

<div class="image-ticker" style="display:none">
    <span class="logo-item"><img src="#"></span>

</div>

<!-- STYLE -->

<style>
.bx-wrapper {
    max-width: 100% !important;
}

.logo-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 25px;
    height: 80px;
    width: auto !important;
}

.logo-item img {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}

.bx-viewport {
    height: auto !important;
}
</style>

<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​

/*__Responsive Media Queries __*/

/* Mobile & Small devices */
@media only screen and (max-width: 480px) {...}

/* Portrait Tablets and Ipads devices) */
@media only screen and (max-width: 768px) {...}

/* Laptops and Small screens  */
@media only screen and (max-width: 1024px) {...}

/* Laptops, Desktops Large devices */
@media only screen and (max-width: 1280px) {...}

/* Extra large devices (large laptops and desktops) */
@media only screen and (min-width: 1281px) {...}

.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

import { useRef, useState } from "react";

const Modal = () => {
  const contentRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = (event) => {
    if (contentRef.current && !contentRef.current.contains(event.target)) {
      console.log(`object`);
      setIsOpen(false);
    }
  };

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  

  return (
    <div>
      <style>
        {`
/* Modal container */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal content */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  text-align: center;
}
	`}
      </style>
      <button
        className="px-2 bg-blue-300 py-1 rounded-lg"
        onClick={toggleModal}
      >
        Toggle Modal
      </button>
      {isOpen && (
        <div
          className="modal-container border border-pink-600 select-none"
          onClick={handleClickOutside}
        >
          <div className="modal-content" ref={contentRef}>
            <h2>Click outside to close</h2>
            <p>This is a modal. Click outside to close.</p>
            <button
              className="px-3 py-1 mt-3 rounded-md bg-teal-300"
              onClick={() => setIsOpen(false)}
            >
              ok
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;

import {userRef,UseEffect} from "react"
function App()=>{
  const refOne = useRef(null);
  
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
  }, []);
  
  const handleClickOutside = (e) => {
    if (refOne.current && !refOne.current.contains(e.target)) {
      console.log("clicked outside");
    } else {
      console.log(`clicked inside div`);
    }
  };
 return(
 <div style={{width:"10rem",height:"10rem", backGround:"red"}}>
 </div>) 
}

 <div className="row form-row mb-5">
            {/* Country Col */}
            <div className="col-md-6">
              <label
                htmlFor="country"
                className="form-label w-100 country-label"
              >
                Country*
              </label>
              <Autocomplete
                disablePortal
                id="country"
                defaultValue={userData?.countryName ?? ''}
                options={countriesList}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('countryName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="country-input"
                    placeholder="Select Country"
                  />
                )}
                // onchange event handler to set the countryName state
                onChange={(e: any, newVal: any) => {
                  setCountryID(newVal.countryID);
                  setCountrySelected(true);
                  setCityID(0); // Clear the city ID
                  // Also clear any other city-related states if you have them
                }}
              />
            </div>

            {/* City Col */}
            {countrySelected && (
            <div className="col-md-6">
              <label
                htmlFor="city"
                className="form-label w-100 city-label"
              >
                City*
              </label>
              <Autocomplete
                disablePortal
                id="city"
                value={cityID ? citiesListBycountry.find((city: { cityID: number; }) => city.cityID === cityID) : null} // Use the cityID state to control the value
                options={citiesListBycountry}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('cityName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="city-input"
                    placeholder="Choose City*"
                  />
                )}
                onChange={(e, value: any) => setCityID(
                  value?.cityID,
                )}
              />
              {/* handle errors */}
              {/* {formErrors.cityName && (
              <span className="error-message">{formErrors.cityName}</span>
              )} */}
            </div>
            )}
          </div>

<DatePicker
                onChange={handleDatePicker}
                value={userData.passportExpiryDate || null || passportExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Select Date of Expiry',
                    }}
                    {...register('passportExpiryDate', {
                      required: true,
                    })}
                    // className="date-picker date-picker-input"
                    error={
                      (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '')
                    }
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                  />
                )}
              />

  const handleFileDrop = (acceptedFiles: any) => {
    console.log('Accepted Files:', acceptedFiles);
    checkFileValidity(acceptedFiles, documentTypeID);

    // Accept same file again
    if (dropzoneInputRef.current) {
      dropzoneInputRef.current.value = '';
    }
  };

@media (min-width: 768px) {
    .inner-five-col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .inner-five-col .flex_column {
        margin: 0 !important;
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 990px) {
    .inner-five-col .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .inner-five-col .flex_column {
        width: calc(20% - 24px) !important;
    }
}

.my-class.special {
  background: royalblue;
}

#my-id {
  background: aquamarine;
}

.my-class {
  background: royalblue;
}

p {
  background: deeppink;
}

div * {
  background: coral;
}

<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->

.center-three-columns .flex_column {
    width: 100% !important;
    margin: 0 !important;
}

.center-three-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .center-three-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}


@media (min-width: 1251px) {
    .center-three-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

<Autocomplete
  id="google-map-demo"
  defaultValue={userData.addressLine1 || ''}
  freeSolo // <-- Add this line
  clearOnEscape={false}
  clearIcon={null}
  // ...rest of your props
/>

onChange={(event: any, newValue: PlaceType | string | null) => {
  if (typeof newValue === 'string') {
    // The user entered a new address manually
    setAddress(newValue);
    console.log('Manual input:', newValue);
  } else if (newValue) {
    // The user selected an address from the dropdown
    setAddress(newValue.description);
    console.log('Selected Value:', newValue.description);
  }
}}

    
    

                clearOnEscape={false}
                clearIcon={null}

    // Check if primaryEmail and secondaryEmail are same
    if (primaryEmail === secondaryEmail && primaryEmail !== '' && secondaryEmail !== '') {
      errors.primaryEmail = 'Primary and Secondary email cannot be the same';
      errors.secondaryEmail = 'Primary and Secondary email cannot be the same';
    }

  // Check if primaryMobileNumber and secondaryMobileNumber are same
    if (primaryMobileNumber === secondaryMobileNumber && primaryMobileNumber !== '' && secondaryMobileNumber !== '') {
      errors.primaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
      errors.secondaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
    }

<div className="col-md-6">
              <label htmlFor="email" className="form-label w-100 email-label">
                Primary Email*
              </label>
              
// primary email

<input
                type="email"
                className={`form-control email-input ${formErrors.primaryEmail ? 'input-error' : ''}`}
                id="email"
                placeholder="abc@babc.com"
                defaultValue={userData.primaryEmail}
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />
              {
                primaryEmail === secondaryEmail
                && primaryEmail !== ''
                && secondaryEmail !== ''
                  && (
                  <div className="error-message">
                    {formErrors.primaryEmail}
                  </div>
                  )
              }
            </div>

 // secondary email

<input
                    type="email"
                    className={`form-control secondary-email-input ${formErrors.secondaryEmail ? 'input-error' : ''}`}
                    id="secondary-email"
                    placeholder="secondary@abc.com"
                    defaultValue={userData.secondaryEmail}
                    // onchange
                    onChange={(e) => setSecondaryEmail(e.target.value)}
                    // register
                    {...register('secondaryEmail', {
                      required: true,
                    })}
                  />
                  {formErrors.secondaryEmail && <div className="error-message mt-1">{formErrors.secondaryEmail}</div>}


// primary mobile number

<input
                  type="text"
                  className={`form-control mobile-input ${formErrors.primaryMobileNumber ? 'input-error' : ''}`}
                  id="mobile"
                  placeholder="XXXXXXXXXXXXXX"
                  defaultValue={userData.primaryMobileNumber}
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setPrimaryMobileNumber(input.value);
                  }}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />


// secondary mobile number

                    <input
                      type="text"
                      className={`form-control secondary-mobile-input ${formErrors.secondaryMobileNumber ? 'input-error' : ''}`}
                      id="secondary-mobile"
                      placeholder="XXXXXXXXXXX"
                      defaultValue={userData.secondaryMobileNumber}
                      onInput={(e) => {
                        const input = e.target as HTMLInputElement;
                        const value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                        input.value = value;
                        setSecondaryMobileNumber(value);
                      }}
                      {...register('secondaryMobileNumber', {
                        required: true,
                      })}
                    />
                    {/* {
                      primaryMobileNumber === secondaryMobileNumber
                      && primaryMobileNumber !== ''
                      && secondaryMobileNumber !== ''
                        && (
                        <div className="error-message mt-1">
                          {formErrors.primaryMobileNumber}
                        </div>
                        )
                    } */}
                  </div>
                  {
                      formErrors.secondaryMobileNumber
                      && (
                      <div
                        className="error-message mt-1"
                      >
                        {formErrors.secondaryMobileNumber}
                      </div>
                      )
                    }

  // Scroll to top of page on component mount
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

As of Bootstrap 4.6.0, the default breakpoints for responsive classes are as follows:

Extra small devices (less than 576px): .col-
Small devices (576px and up): .col-sm-
Medium devices (768px and up): .col-md-
Large devices (992px and up): .col-lg-
Extra large devices (1200px and up): .col-xl-

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

/* eslint-disable no-restricted-syntax */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';
import { Alert, AlertColor, Snackbar } from '@mui/material';
import MuiAlert from '@mui/material/Alert';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // State for managing snackbar
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('error'); // You can change 'error' to 'warning' or other values if needed

  // Snackbar message to display
  const snackbarMessage = 'Please upload all required documents before proceeding to the next step.';

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  const handleNextStepClick = () => {
    if (!documentIsRequired) {
      // Handle Next Step click logic here
      handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload');
    } else {
      // Show the snackbar with an error message
      setSnackbarSeverity('error'); // You can change 'error' to 'warning' or other values if needed
      setSnackbarOpen(true);
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={handleNextStepClick}
        >
          Next Step
        </button>
      </Box>
      {/* Snackbar */}
      <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={() => setSnackbarOpen(false)}>
        <MuiAlert
          elevation={6}
          variant="filled"
          severity={snackbarSeverity}
          onClose={() => setSnackbarOpen(false)}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;

import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';


// snackbar states
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');



  const handleSnackbarClose = () => {
    // Handle the closing here
    setSnackbarOpen(false);
  };


 	try {
        const response = await trackPromise(api.saveUserRegistrationInformation(formData));
        // console.log('user reg response:', response?.data?.itemGUID);
        if (response?.data?.Output?.isAlreadyExists) {
          setSnackbarMessage('User already exists');
          setSnackbarSeverity('error');
          setSnackbarOpen(true);
        } else {
          dispatch(setUserInfo(response?.data?.Output?.itemGUID));
          setSnackbarMessage('User registered successfully');
          setSnackbarSeverity('success');
          setSnackbarOpen(true);
          setShowModal(true);
        }
      } catch (error) {
        setSnackbarMessage('An error occurred while submitting user registration');
        setSnackbarSeverity('error');
        setSnackbarOpen(true);
      }

// place snackbar at end of root jsx element. for example if parent jsx element is <main>,
 // place snackbar at the end of <main> element.
 
	  <Snackbar
        open={snackbarOpen}
        autoHideDuration={2000}
        onClose={handleSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={handleSnackbarClose}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

yes it is working, our client needs further upadates here.

when user uploads all the required files and then moves to other component and return back to DocumentManager component. isRequired property is true in which userhas to upload the requried files again. 

i want to keep documentTypeArray in redux or any state management technique. so when user returns back it should be available. or you can try any other methods. 

ie once reuiqred docs are updated and when we move to documentmanager component, next step button should be disabled. 

below attaching code for your reference:

"""
function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

"""

.details-container::before {
  content: "";
  position: absolute;
  top: 0; /* can delete top/left etc if sizes are 100% */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1; /* must be lower number than objects needing to be in front */
}

/* For Mobile Devices (320px - 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /* Your CSS styles for mobile devices here */
}

/* For iPads and Tablets (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Your CSS styles for iPads and Tablets here */
}

/* For Laptops and Small Screens (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Your CSS styles for laptops and small screens here */
}

/* For Large Screens and Desktops (1025px - 1200px) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  /* Your CSS styles for large screens and desktops here */
}

/* For TV and Extra Large Screens (1201px and more) */
@media screen and (min-width: 1201px) {
  /* Your CSS styles for TV and extra large screens here */
}

/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // state for documentIsRequired with boolean type

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  // Show a modal on load
  // useEffect(() => {
  //   dispatch<any>(fetchAppointmentDetail(profileGuid))
  //     .then((response: any) => {
  //       console.log('fetchAppointmentDetailResult', response);
  //       // log the response status
  //       if (!response) {
  //         handleBookAppointmentModalOpen();
  //       }
  //     });
  // }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
    // log the document type array with a message
    console.log('Document types array:', documentTypeArray);
  };

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(
    documentTypeArray.some((d) => d.isRequired),
  );

  // Check for Document Required or not
  // if (documentTypeArray.some((d) => d.isRequired)) {
  //   // list reuiqred documents
  //   const requiredDocuments = documentTypeArray.filter((d) => d.isRequired);
  //   console.log('Required documents:', requiredDocuments);
  // }

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
    console.log(witnessProfileGUID, uniqueDocumentId);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */
  const [documentTypeArrayCopy, setDocumentTypeArrayCopy] = useState([...documentTypeArray]);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    documentTypeArrayCopy.forEach((d) => {
      if (d.isRequired) {
        setDocumentIsRequired(true);
        // update the documentTypeArrayCopy with the new value of documentIsRequired
        documentTypeArrayCopy.push({ ...d, isRequired: false });
        // log the updated documentTypeArrayCopy
        console.log('documentTypeArrayCopy:', documentTypeArrayCopy);
        setDocumentTypeArrayCopy(documentTypeArrayCopy);
      }
      setDocumentIsRequired(false);
    });
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
    // store documentTypeArray to a new array
    // check if any of the documents is required, if yes, set documentIsRequired to true

    // const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    // // log the result of the check
    // console.log('isRequiredDocumentsExist:', isRequiredDocumentsExist);
    // setDocumentIsRequired(isRequiredDocumentsExist);
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: any) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: any) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      if (uploadedFiles) {
        const formData = new FormData();
        for (let i = 0; i < validFiles.length; i++) {
          const file = validFiles[i];
          formData.append('FileDoc', file, file.name);
        }

        dispatch<any>(saveDocument(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID, formData));
      }
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        {documentIsRequired}
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {/* render DocumentManagerModal */}
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;

<DesktopDatePicker 
    value={dateOfBirth} 
    disableFuture 
    onChange={(e:any, newVal:any)=> handleDate(e, newVal)}
    renderInput={(params:any) =>
        <TextField {...params} error={false} />}
    />
 
HandleChange Function
    const handleDate = (e: any, newVal: any) => {
      console.log('formatted date', moment(e?._d).format());
      const formattedDate = moment(e?._d).format();
      setDateOfBirth(formattedDate);
    };
 
State variable and datatype
    const [dateOfBirth, setDateOfBirth] = useState<string>(null);
 
Repopulating value
    setDateOfBirth(selectedBeneficiary?.dateOfBirth?.slice(0, 10));

<button onclick="copyCouponCode()">
  <i class="fas fa-link"></i> קוד קופון: POLRAM17
</button>

<script>
  function copyCouponCode() {
    var couponCode = "POLRAM17";
    navigator.clipboard.writeText(couponCode).then(function() {
      alert("הקוד הועתק בהצלחה!");
    }, function() {
      alert("שגיאה בעת העתקת הקוד.");
    });
  }
</script>

"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

You are react developer expert.
when i click on card-container-draft-will div element, to attribute of Link component is not changing.
it should be `/wills/Templated-Full-Will/6`.
right now it is `/wills//`.
pleasde make neccessary change ans return the correct code.


your solution is appreciated gpt.
but when i click on card-container-draft-will div element second time, route is not updating. initially when component loads, route is correct, route navigated to `/wills/Templated-Full-Will/6`.
but when user clicks on second time or more it is set to  `/wills//` as route.
somethnig is wrong. please check code thouroghly and find a solution to resolve this bug.

It is still not working.
when component loads initially, route is /wills/Templated-Full-Will/6, then i click on card-container-will-copy-upload, route again updated to wills/Full-Will/1, but when i again click on 
card-container-draft-will div element, route is not set to /wills/Templated-Full-Will/6. i want the route to set to /wills/Templated-Full-Will/6. there are some bugs in handleCardClick function.
please update the code.\


  const handleContinueButtonClick = () => {
    const formattedWillTypeName = selectedWillCard.willTypeName.split(' ').join('-');
    const toPath = `/wills/${formattedWillTypeName}/${selectedWillCard.willTypeID}`;
    console.log('Path: ', toPath);
    navigate(toPath, { state: selectedWillCard.willTypeName });
  };

Path:  /wills//

i am getting the path as above when i again click on card-container-draft-will div element.

 i want path to be: /wills/Templated-Full-Will/6

"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    // log the card name
    console.log(cardName);
    // log active card
    console.log(activeCard);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page.
please update the code. and make it correct.
but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.