User Reviews and Testimonials

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Reviews</title>  
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<meta name="robots" content="noindex, follow"> 
</head>
<body>

  <div class="container my-5">
    
    <div class="card main-card border-0 shadow-sm">
      
      <div class="card-header bg-white pt-4 pb-3 px-4 border-bottom">
        <h5 class="mb-0 title-text">Customer Reviews</h5>
      </div>

      <div class="card-body p-4">
        <div class="row gx-5">
          
          <div class="col-lg-3 col-md-4">
            
            <button class="btn btn-primary-red w-100 rounded-2 mb-4 py-2 text-white">
              Write a review
            </button>

            <div class="card score-card mb-4">
              <div class="card-body p-3">
                <h6 class="text-muted mb-3">Rating</h6>
                <div class="d-flex align-items-center justify-content-center mb-3">
                  <h1 id="average-score" class="display-5 mb-0 me-3 fw-bold text-dark">0.0</h1>
                  <div id="average-stars" class="stars-gold fs-5 d-flex flex-nowrap">
                    </div>
                </div>
                <hr class="text-muted opacity-25 my-3">
                <div id="total-reviews" class="text-center text-muted small">
                  0 reviews
                </div>
              </div>
            </div>

            <div class="composition-section" id="progress-container">
              <h6 class="text-muted mb-3 small fw-bold">Rating breakdown</h6>
              </div>
          </div>

          <div class="col-lg-9 col-md-8 mt-4 mt-md-0">
            
            <div class="comments-header d-flex justify-content-between align-items-center p-3 glass-header">
              <h6 class="mb-0 fw-bold title-text">Reviews</h6>
              <button class="btn btn-link text-decoration-none p-0 d-flex align-items-center sort-btn">
                <i class="bi bi-arrow-down-up me-2 text-danger"></i> 
                <span class="text-danger me-1">Sort by</span> 
                <span class="text-muted">Highest rated</span>
              </button>
            </div>
            
            <div class="comments-subheader p-3 mb-4 glass-subheader">
              <span id="total-reviews-header" class="text-muted small">0 reviews for this product</span>
            </div>

            <div id="reviews-container">
              <div class="text-center p-5 text-muted">
                <div class="spinner-border text-danger" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading reviews...</p>
              </div>
            </div>

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

  </div>

<script src="./script.js"></script>

</body>
</html>

:root {
  --app-red: #e60033;
  --app-gold: #ffc107;
  --app-border: rgba(226, 226, 226, 0.5);
  --app-text-dark: #444444;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Fundo sutil com gradiente para o glassmorphism funcionar bem */
  background: linear-gradient(135deg, #f6f8fd 0%, #f1f3f9 100%);
  min-height: 100vh;
}

.title-text {
  color: var(--app-text-dark);
  font-weight: 700;
}

.main-card {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--app-border) !important;
}

.btn-primary-red {
  background-color: var(--app-red);
  border-color: var(--app-red);
  font-weight: 700;
  border-radius: 8px !important;
}

.btn-primary-red:hover {
  background-color: #cc002c;
  border-color: #cc002c;
}

.score-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
}

.stars-gold {
  color: var(--app-gold);
}

.progress-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.star-num {
  width: 30px;
  color: #6c757d;
  display: flex;
  align-items: center;
}

.star-num i {
  font-size: 0.75rem;
}

.progress-bar-container {
  flex-grow: 1;
  height: 8px;
  background-color: #e9ecef;
  border-radius: 10px;
  margin: 0 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--app-gold);
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
}

.percent-text {
  width: 45px;
  text-align: right;
  color: #6c757d;
}

.comments-header {
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.comments-subheader {
  border-top: 1px solid #f1f1f1;
  border-bottom: none;
}

.sort-btn {
  font-size: 0.9rem;
}

/* Glassmorphism nos comentários */
.review-item {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #ccc;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.verified-badge {
  background-color: rgba(241, 241, 241, 0.8);
  border: 1px solid rgba(224, 224, 224, 0.5);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 20px;
}

let currentReviews = [];
let sortDescending = true;

document.addEventListener('DOMContentLoaded', () => {
    fetchReviewsData();
    setupSortButton();
});

async function fetchReviewsData() {
    try {
        const mockData = [
            { id: 1, name: "Maria D.", date: "05/17/2026", rating: 5, verified: true, avatar: "https://i.pravatar.cc/150?img=5" },
            { id: 2, name: "HANAKO N.", date: "05/17/2026", rating: 5, verified: true, avatar: "https://i.pravatar.cc/150?img=1" },
            { id: 3, name: "Solange S.", date: "05/15/2026", rating: 4, verified: true, avatar: "https://i.pravatar.cc/150?img=9" },
            { id: 4, name: "Carlos M.", date: "05/10/2026", rating:3,verified: true, avatar: "https://i.pravatar.cc/150?img=11" },
            { id: 5, name: "Ana P.", date: "05/08/2026", rating: 5, verified: false, avatar: "https://i.pravatar.cc/150?img=20" },
            { id: 6, name: "Roberto K.", date: "05/01/2026", rating: 4, verified: true, avatar: "https://i.pravatar.cc/150?img=33" }
        ];

        setTimeout(() => {
            currentReviews = mockData;
            processDashboardStats();
            sortAndRender();
        }, 600);

    } catch (error) {
        console.error("Error fetching reviews:", error);
        document.getElementById('reviews-container').innerHTML = '<p class="text-danger">Error loading reviews.</p>';
    }
}

function processDashboardStats() {
    const totalReviews = currentReviews.length;
    let sumRatings = 0;
    const ratingCounts = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };

    currentReviews.forEach(review => {
        sumRatings += review.rating;
        ratingCounts[review.rating]++;
    });

    const averageScore = (totalReviews > 0) ? (sumRatings / totalReviews).toFixed(1) : "0.0";
    
    updateDashboard(averageScore, totalReviews, ratingCounts);
}

function updateDashboard(average, total, counts) {
    document.getElementById('average-score').textContent = average;
    document.getElementById('total-reviews').textContent = `${total} reviews`;
    document.getElementById('total-reviews-header').textContent = `${total} reviews for this product`;

    let starsHtml = '';
    const roundedAvg = Math.round(average);
    for (let i = 1; i <= 5; i++) {
        starsHtml += `<i class="bi bi-star${i <= roundedAvg ? '-fill' : ''}"></i>`;
    }
    document.getElementById('average-stars').innerHTML = starsHtml;

    const progressContainer = document.getElementById('progress-container');
    progressContainer.innerHTML = '<h6 class="text-muted mb-3 small fw-bold">Rating breakdown</h6>';

    for (let i = 5; i >= 1; i--) {
        const percentage = total > 0 ? ((counts[i] / total) * 100).toFixed(2) : 0;
        
        const row = document.createElement('div');
        row.className = 'progress-row';
        row.innerHTML = `
            <span class="star-num">${i} <i class="bi bi-star-fill text-warning ms-1"></i></span>
            <div class="progress-bar-container">
              <div class="progress-fill" style="width: ${percentage}%;"></div>
            </div>
            <span class="percent-text">${percentage}%</span>
        `;
        progressContainer.appendChild(row);
    }
}

function setupSortButton() {
    const sortBtn = document.querySelector('.sort-btn');
    const sortText = sortBtn.querySelector('.text-muted');
    const sortIcon = sortBtn.querySelector('i');

    sortBtn.addEventListener('click', () => {
        sortDescending = !sortDescending;
        
        if (sortDescending) {
            sortText.textContent = "Highest rated";
            sortIcon.className = "bi bi-sort-down me-2 text-danger";
        } else {
            sortText.textContent = "Lowest rated";
            sortIcon.className = "bi bi-sort-up me-2 text-danger";
        }
        
        sortAndRender();
    });
}

function sortAndRender() {
    const sortedReviews = [...currentReviews].sort((a, b) => {
        if (sortDescending) {
            return b.rating - a.rating;
        } else {
            return a.rating - b.rating;
        }
    });

    renderReviewsList(sortedReviews);
}

function renderReviewsList(reviews) {
    const container = document.getElementById('reviews-container');
    container.innerHTML = '';

    reviews.forEach(review => {
        let starsHtml = '';
        for (let i = 1; i <= 5; i++) {
            starsHtml += `<i class="bi bi-star${i <= review.rating ? '-fill' : ''}"></i>`;
        }

        const verifiedHtml = review.verified 
            ? `<span class="badge verified-badge text-dark fw-normal"><i class="bi bi-check-circle-fill text-success me-1"></i> Verified buyer</span>` 
            : '';

        const reviewHtml = `
            <div class="review-item p-4 mb-4">
              <div class="stars-gold fs-5 mb-3">
                ${starsHtml}
              </div>
              <div class="avatar-wrapper mb-4">
                <img src="${review.avatar}" alt="Avatar" class="avatar-img me-3">
                <div>
                    <span class="d-block text-dark fw-bold small">${review.name}</span>
                    <span class="text-muted small" style="font-size: 0.75rem;">on ${review.date}</span>
                </div>
                <div class="ms-auto">
                    ${verifiedHtml}
                </div>
              </div>
              <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top border-light">
                <span class="text-muted small">Was this review helpful?</span>
                <div class="d-flex gap-3">
                  <button class="btn btn-link text-muted p-0 text-decoration-none small"><i class="bi bi-hand-thumbs-up me-1"></i> (0)</button>
                  <button class="btn btn-link text-muted p-0 text-decoration-none small"><i class="bi bi-hand-thumbs-down me-1"></i> (0)</button>
                </div>
              </div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', reviewHtml);
    });
}

Browse docs

User Reviews and Testimonials

User Reviews

0.0