{"id":1478,"date":"2025-06-13T14:24:25","date_gmt":"2025-06-13T14:24:25","guid":{"rendered":"https:\/\/enasoiubogdan.com\/?page_id=1478"},"modified":"2025-06-13T14:23:03","modified_gmt":"2025-06-13T14:23:03","slug":"google-reviews-test","status":"publish","type":"page","link":"https:\/\/enasoiubogdan.com\/","title":{"rendered":"Google Reviews Test"},"content":{"rendered":"\n<!-- Google Reviews Carousel Widget -->\n<div id=\"google-reviews-widget\" data-title=\"Ce spun clien\u021bii Boomag\">\n  <h2 id=\"reviews-title\"><\/h2>\n  <div class=\"carousel\">\n    <button class=\"arrow left\">&#10094;<\/button>\n    <div class=\"carousel-track\"><\/div>\n    <button class=\"arrow right\">&#10095;<\/button>\n  <\/div>\n<\/div>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n<style>\n  #google-reviews-widget {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n    font-family: Arial, sans-serif;\n  }\n  #reviews-title {\n    text-align: center;\n    font-size: 1.8rem;\n    margin-bottom: 20px;\n  }\n  .carousel {\n    position: relative;\n    overflow: hidden;\n  }\n  .carousel-track {\n    display: flex;\n    transition: transform 0.5s ease;\n  }\n  .review-card {\n    flex: 0 0 33.3333%;\n    box-sizing: border-box;\n    padding: 20px;\n    background: var(--card-bg);\n    color: var(--card-text);\n    border-radius: 12px;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    margin: 0 10px;\n    position: relative;\n  }\n  .review-header {\n    display: flex;\n    align-items: center;\n    margin-bottom: 10px;\n  }\n  .review-header img {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    margin-right: 8px;\n  }\n  .stars {\n    color: #fbc02d;\n    margin-bottom: 10px;\n    font-size: 1.1rem;\n  }\n  .arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(0,0,0,0.2);\n    border: none;\n    font-size: 1.2rem;\n    padding: 6px 10px;\n    cursor: pointer;\n    z-index: 10;\n    border-radius: 50%;\n    transition: background 0.3s;\n    color: white;\n  }\n  .arrow.left { left: 5px; }\n  .arrow.right { right: 5px; }\n  .arrow:hover {\n    background: rgba(0,0,0,0.4);\n  }\n  .read-more {\n    color: #007BFF;\n    cursor: pointer;\n    display: inline-block;\n    margin-top: 10px;\n  }\n\n  @media (max-width: 768px) {\n    .review-card {\n      flex: 0 0 100%;\n      margin: 0;\n    }\n    .arrow {\n      font-size: 1rem;\n      padding: 4px 8px;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --card-bg: #1e1e1e;\n      --card-text: #fff;\n    }\n  }\n  @media (prefers-color-scheme: light) {\n    :root {\n      --card-bg: #fff;\n      --card-text: #000;\n    }\n  }\n<\/style>\n\n<script>\nconst reviewsUrl = \"https:\/\/enasoiubogdan.com\/reviews\/recenzii-boomag.json\";\nconst title = document.getElementById(\"google-reviews-widget\").getAttribute(\"data-title\") || \"Ce spun clien\u021bii no\u0219tri\";\ndocument.getElementById(\"reviews-title\").textContent = title;\n\nfetch(reviewsUrl)\n  .then(res => res.json())\n  .then(reviews => {\n    const container = document.querySelector(\".carousel-track\");\n    reviews.slice(0, 30).forEach(r => {\n      const card = document.createElement(\"div\");\n      card.className = \"review-card\";\n\n      const fullText = r.text;\n      const truncatedText = fullText.length > 200 ? fullText.slice(0, 200) + \"...\" : fullText;\n\n      card.innerHTML = `\n        <div class=\"review-header\">\n          <img decoding=\"async\" src=\"${r.author_image || 'https:\/\/www.gravatar.com\/avatar\/?d=mp'}\" alt=\"${r.author}\">\n          <strong>${r.author}<\/strong>\n        <\/div>\n        <div class=\"stars\">${\"\u2605\".repeat(r.stars)}<\/div>\n        <p class=\"review-text\">${truncatedText}<\/p>\n        ${fullText.length > 200 ? '<span class=\"read-more\">Cite\u0219te mai mult<\/span>' : ''}\n        <small>${r.date}<\/small>\n      `;\n\n      container.appendChild(card);\n    });\n\n    let autoSlideInterval;\n    const startAutoSlide = () => {\n      autoSlideInterval = setInterval(() => {\n        const visibleCards = window.innerWidth < 768 ? 1 : 3;\n        const maxIndex = cards.length - visibleCards;\n        currentIndex = (currentIndex + visibleCards > maxIndex) ? 0 : currentIndex + visibleCards;\n        updateCarousel();\n      }, 5000);\n    };\n\n    const stopAutoSlide = () => clearInterval(autoSlideInterval);\n\n    document.querySelectorAll(\".read-more, .review-card\").forEach(el => {\n      el.addEventListener(\"mouseenter\", stopAutoSlide);\n      el.addEventListener(\"mouseleave\", startAutoSlide);\n      el.addEventListener(\"click\", stopAutoSlide);\n    });\n\n    document.querySelectorAll(\".read-more\").forEach(btn => {\n      btn.addEventListener(\"click\", e => {\n        const p = e.target.previousElementSibling;\n        const full = reviews.find(r => r.text.startsWith(p.textContent.slice(0, 20)));\n        p.textContent = full.text;\n        e.target.remove();\n      });\n    });\n\n    const cards = document.querySelectorAll(\".review-card\");\n    let currentIndex = 0;\n\n    const updateCarousel = () => {\n      const cardWidth = cards[0].offsetWidth + 20;\n      const visibleCards = window.innerWidth < 768 ? 1 : 3;\n      const offset = cardWidth * currentIndex;\n      container.style.transform = `translateX(-${offset}px)`;\n    };\n\n    document.querySelector(\".arrow.left\").onclick = () => {\n      const visibleCards = window.innerWidth < 768 ? 1 : 3;\n      currentIndex = Math.max(currentIndex - visibleCards, 0);\n      updateCarousel();\n    };\n\n    document.querySelector(\".arrow.right\").onclick = () => {\n      const visibleCards = window.innerWidth < 768 ? 1 : 3;\n      const maxIndex = cards.length - visibleCards;\n      currentIndex = Math.min(currentIndex + visibleCards, maxIndex);\n      updateCarousel();\n    };\n\n    window.addEventListener(\"resize\", updateCarousel);\n    updateCarousel();\n    startAutoSlide();\n  });\n<\/script>\n\n\n\n\n<p><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ro\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Recenzii BooMag<\/title>\n  <style>\n    :root {\n      --bg-light: #ffffff;\n      --bg-dark: #1e1e1e;\n      --text-light: #1a1a1a;\n      --text-dark: #f0f0f0;\n      --card-bg-light: #f9f9f9;\n      --card-bg-dark: #2a2a2a;\n    }\n\n    body {\n      margin: 0;\n      font-family: \"Segoe UI\", sans-serif;\n      background-color: var(--bg-light);\n      color: var(--text-light);\n      transition: all 0.3s ease-in-out;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      body {\n        background-color: var(--bg-dark);\n        color: var(--text-dark);\n      }\n      .review-card {\n        background-color: var(--card-bg-dark);\n      }\n    }\n\n    .reviews-container {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      padding: 2rem;\n      gap: 1.5rem;\n      max-width: 1200px;\n      margin: auto;\n    }\n\n    .review-card {\n      background-color: var(--card-bg-light);\n      border-radius: 1rem;\n      padding: 1.5rem;\n      max-width: 300px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      transition: transform 0.3s;\n    }\n\n    .review-card:hover {\n      transform: scale(1.03);\n    }\n\n    .review-stars {\n      color: #fbbc04;\n      font-size: 1.2rem;\n    }\n\n    .review-author {\n      font-weight: bold;\n      margin-top: 0.5rem;\n    }\n\n    .review-logo {\n      width: 90px;\n      margin-bottom: 0.5rem;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"reviews-container\" id=\"reviews\"><\/div>\n\n  <script>\n    async function loadReviews() {\n      try {\n        const res = await fetch(\"\/reviews\/recenzii-boomag.json\");\n        const data = await res.json();\n        const container = document.getElementById(\"reviews\");\n\n        const logo = '<img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/1b\/Google_Reviews_logo.svg\/512px-Google_Reviews_logo.svg.png\" alt=\"Google Reviews\" class=\"review-logo\">';\n\n        data.slice(0, 12).forEach((review) => {\n          const card = document.createElement(\"div\");\n          card.className = \"review-card\";\n          card.innerHTML = `\n            ${logo}\n            <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <div class=\"review-text\">${review.text}<\/div>\n            <div class=\"review-author\">\u2014 ${review.author}<\/div>\n          `;\n          container.appendChild(card);\n        });\n      } catch (error) {\n        console.error(\"Eroare la \u00eenc\u0103rcarea recenziilor:\", error);\n      }\n    }\n\n    loadReviews();\n  <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>&#10094; &#10095; Recenzii BooMag<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1478","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/pages\/1478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1478"}],"version-history":[{"count":12,"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/pages\/1478\/revisions"}],"predecessor-version":[{"id":1483,"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=\/wp\/v2\/pages\/1478\/revisions\/1483"}],"wp:attachment":[{"href":"https:\/\/enasoiubogdan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}