1#@!#!123s

: / home / realadss / kavyaeventz.in /
Filename : test.php
back
<?php 
    include("admin/connection.php");
    
	$fetchtestimonal = mysqli_query($conn, "SELECT * FROM `testimonials`");
	$rowfetch =mysqli_fetch_array($fetchtestimonal); 
	$testimonials = [];
    while ($rowfetch = mysqli_fetch_array($fetchtestimonal)) {
        $testimonials[] = [
            'name' => $rowfetch['name'],
            'position' => $rowfetch['profile'],
            'photo' => $rowfetch['photo'],
            'text' => $rowfetch['des']
        ];
    }
	
?>

<style>
    @import url("https://fonts.googleapis.com/css?family=Montserrat");

* {
  box-sizing: border-box;
}


.testimonial-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 2rem;
  background-color: #fff;
  color: #333;
  border-radius: 15px;
  margin: 20px auto;
  padding: 50px 80px;
  /*min-width: 800px;*/
  /*min-height: 430px;*/
  position: relative;
}

.stars {
  font-size: 14px;
}

.testimonial {
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: 900;
  height: 100%;
  line-height: 28px;
  margin: 0;
}

.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.user .user-image {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  object-fit: cover;
}

.user .user-details {
  text-align: center;
}

.user .username {
  margin: 0;
  font-size: 14px;
}

.user .role {
  margin: 0;
  font-size: 12px;
}

.progress-dots {
  display: flex;
  gap: 5px;
}

.progress-dot {
  width: 5px;
  height: 5px;
  background-color: #eee;
  border-radius: 50%;
}

.progress-dot.active {
  background-color: #555;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  font-size: 10px;
  cursor: pointer;
  transition: 0.1s ease;
}

.btn:hover {
  background-color: #eee;
}

#btn-prev {
  left: 25px;
}

#btn-next {
  right: 25px;
}

</style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<div class="testimonial-container">
  <div class="btn" id="btn-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="btn" id="btn-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="stars">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
  </div>
  <p class="testimonial">
    
  </p>
  <div class="user">
    <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="user" class="user-image" />
    <div class="user-details">
      <h4 class="username"></h4>
      <p class="role"></p>
    </div>
  </div>
  <div class="progress-dots" id="progress-dots"></div>
</div>


<script>
    const testimonials = <?php echo json_encode($testimonials); ?>;
    
    const testimonialsContainer = document.querySelector(".testimonials-container");
    const testimonial = document.querySelector(".testimonial");
    const userImage = document.querySelector(".user-image");
    const username = document.querySelector(".username");
    const role = document.querySelector(".role");
    const btnPrev = document.getElementById("btn-prev");
    const btnNext = document.getElementById("btn-next");
    const progressDots = document.getElementById("progress-dots");
    
    let idx = 0;
    
    testimonials.forEach((testimonial) => {
      const dot = document.createElement("div");
      dot.classList.add("progress-dot");
      progressDots.appendChild(dot);
    });
    
    function displayTestimonial() {
      const { name, position, photo, text } = testimonials[idx];
    
      testimonial.innerHTML = text;
      userImage.src = 'admin/images/new/'+photo;
      username.innerHTML = name;
      role.innerHTML = position;
    
      updateProgressDots();
    }
    
    function updateProgressDots() {
      const dots = progressDots.children;
      [...dots].forEach((dot) => {
        dot.classList.remove("active");
      });
      dots[idx].classList.add("active");
    }
    
    btnNext.addEventListener("click", () => {
      idx === testimonials.length - 1 ? (idx = 0) : idx++;
      console.log(idx);
    
      displayTestimonial();
    });
    
    btnPrev.addEventListener("click", () => {
      idx === 0 ? (idx = testimonials.length - 1) : idx--;
      console.log(idx);
    
      displayTestimonial();
    });
    
    displayTestimonial();

</script>