{"id":1050,"date":"2025-08-30T22:40:48","date_gmt":"2025-08-30T22:40:48","guid":{"rendered":"https:\/\/bshopma.ma\/?page_id=1050"},"modified":"2025-09-01T18:33:16","modified_gmt":"2025-09-01T18:33:16","slug":"media","status":"publish","type":"page","link":"https:\/\/bshopma.ma\/ar\/media\/","title":{"rendered":"M\u00e9dia"},"content":{"rendered":"<style>\n\/* \u0633\u062a\u0627\u064a\u0644 \u0639\u0627\u0645 *\/\nbody {\n  font-family: 'Arial', sans-serif;\n  line-height: 1.6;\n  color: #333;\n  background-color: #fdf6f0;\n  margin: 0;\n  padding: 0;\n}\n\nsection {\n  padding: 40px 20px;\n  max-width: 1200px;\n  margin: auto;\n  background-color: #fff;\n  margin-bottom: 20px;\n  border-radius: 15px;\n  box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n}\n\nh2 {\n  color: #b84d4d;\n  text-align: center;\n  margin-bottom: 30px;\n  font-size: 28px;\n}\n\n\/* Slider \u0644\u0644\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a *\/\n.slider-container {\n  position: relative;\n}\n\n.slider {\n  display: flex;\n  overflow-x: auto;\n  gap: 20px;\n  scroll-behavior: smooth;\n  padding-bottom: 10px;\n}\n\n.slider::-webkit-scrollbar {\n  height: 8px;\n}\n\n.slider::-webkit-scrollbar-thumb {\n  background: #b84d4d;\n  border-radius: 4px;\n}\n\n.slider iframe {\n  flex: 0 0 auto;\n  width: 300px;\n  height: 200px;\n  border-radius: 10px;\n}\n\n\/* Carousel \u0644\u0644\u0635\u0648\u0631 *\/\n.carousel-container {\n  position: relative;\n}\n\n.image-carousel {\n  display: flex;\n  overflow-x: auto;\n  gap: 15px;\n  scroll-behavior: smooth;\n  padding-bottom: 10px;\n}\n\n.image-carousel img {\n  flex: 0 0 auto;\n  width: 250px;\n  height: 160px;\n  object-fit: cover;\n  border-radius: 10px;\n  box-shadow: 0 3px 8px rgba(0,0,0,0.15);\n  transition: transform 0.3s;\n}\n\n.image-carousel img:hover {\n  transform: scale(1.05);\n}\n\n\/* \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u062a\u0646\u0642\u0644 *\/\n.slider-container button, .carousel-container button {\n  position: absolute;\n  top: 40%;\n  background-color: rgba(184, 77, 77, 0.8);\n  border: none;\n  color: #fff;\n  padding: 10px 15px;\n  cursor: pointer;\n  border-radius: 50%;\n  font-size: 18px;\n}\n\n.slider-container .prev, .carousel-container .prev {\n  left: -20px;\n}\n\n.slider-container .next, .carousel-container .next {\n  right: -20px;\n}\n\n\/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a *\/\n.posts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.post-item {\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 3px 8px rgba(0,0,0,0.15);\n  background-color: #fff;\n  transition: transform 0.3s;\n}\n\n.post-item:hover {\n  transform: translateY(-5px);\n}\n\n.post-item img {\n  width: 70%;\n  height: 150px;\n  object-fit: cover;\n}\n\n.post-item h3 {\n  padding: 10px;\n  font-size: 18px;\n  color: #b84d4d;\n}\n<\/style>\n\n<!-- \u0642\u0633\u0645 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a -->\n<section id=\"videos\">\n  <h2>\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a\u0646\u0627<\/h2>\n  <div class=\"slider-container\">\n    <button class=\"prev\" onclick=\"scrollSlider('videos-slider', -300)\">&#10094;<\/button>\n    <div class=\"slider\" id=\"videos-slider\">\n      <iframe src=\"https:\/\/www.youtube.com\/embed\/2KCmdWKwiQg\" frameborder=\"0\" allowfullscreen><\/iframe>\n      <iframe src=\"https:\/\/www.youtube.com\/embed\/8vZ_HeP0q0M\" frameborder=\"0\" allowfullscreen><\/iframe>\n      <iframe src=\"https:\/\/www.youtube.com\/embed\/_lO154ecv2I\" frameborder=\"0\" allowfullscreen><\/iframe>\n    <\/div>\n    <button class=\"next\" onclick=\"scrollSlider('videos-slider', 300)\">&#10095;<\/button>\n  <\/div>\n<\/section>\n\n<!-- \u0645\u0639\u0631\u0636 \u0627\u0644\u0635\u0648\u0631 -->\n<section id=\"gallery\">\n  <h2>\u0645\u0639\u0631\u0636 \u0627\u0644\u0635\u0648\u0631<\/h2>\n  <div class=\"carousel-container\">\n    <button class=\"prev\" onclick=\"scrollSlider('images-carousel', -300)\">&#10094;<\/button>\n    <div class=\"image-carousel\" id=\"images-carousel\">\n      <img decoding=\"async\" src=\"URL_IMAGE1\" alt=\"\u0635\u0648\u0631\u0629 1\">\n      <img decoding=\"async\" src=\"URL_IMAGE2\" alt=\"\u0635\u0648\u0631\u0629 2\">\n      <img decoding=\"async\" src=\"URL_IMAGE3\" alt=\"\u0635\u0648\u0631\u0629 3\">\n      <img decoding=\"async\" src=\"URL_IMAGE4\" alt=\"\u0635\u0648\u0631\u0629 4\">\n    <\/div>\n    <button class=\"next\" onclick=\"scrollSlider('images-carousel', 300)\">&#10095;<\/button>\n  <\/div>\n<\/section>\n<!-- \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a  -->\n<section id=\"articles\">\n  <h2>\u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a<\/h2>\n  <div id=\"articles-container\" class=\"posts-grid\"><\/div>\n\n  <script>\n    const articles = [\n        {\n            title: \"\u0627\u0644\u0639\u0628\u0627\u064a\u0629 \u0627\u0644\u0634\u0631\u0639\u064a\u0629\u2026 \u0623\u0646\u0627\u0642\u0629 \u0645\u062d\u062a\u0634\u0645\u0629\",\n            image: \"https:\/\/bshopma.ma\/wp-content\/uploads\/2025\/08\/9225DF8B-C91B-4C48-B09B-196874E399CE-e1756730933338.jpeg\",\n            text: \"\u0647\u0646\u0627 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0642\u0627\u0644 \u0627\u0644\u0623\u0648\u0644\u060c \u064a\u0645\u0643\u0646 \u0648\u0636\u0639 \u0646\u0635 \u0645\u0648\u062c\u0632 \u064a\u0634\u062c\u0639 \u0627\u0644\u0642\u0627\u0631\u0626 \u0639\u0644\u0649 \u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0632\u064a\u062f...\",\n            link: \"https:\/\/bshopma.ma\/a1\/\"\n        },\n        {\n            title: \"\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0623\u0644\u0648\u0627\u0646\",\n            image: \"image2.jpg\",\n            text: \"\u0647\u0646\u0627 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0642\u0627\u0644 \u0627\u0644\u062b\u0627\u0646\u064a\u060c \u064a\u0645\u0643\u0646 \u0648\u0636\u0639 \u0646\u0635 \u0645\u0648\u062c\u0632 \u064a\u0634\u062c\u0639 \u0627\u0644\u0642\u0627\u0631\u0626 \u0639\u0644\u0649 \u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0632\u064a\u062f...\",\n            link: \"https:\/\/bshopma.ma\/a2\/\"\n        },\n        {\n            title: \"D\u00e9couvrez le Burkini, l\u2019Alli\u00e9 Parfait pour Allier Modestie et Confort\",\n            image: \"https:\/\/bshopma.ma\/wp-content\/uploads\/2025\/07\/IMG-20250619-WA0040.jpg\",\n            text: \"\u062c\u062f\u064a\u062f\u0646\u0627 \u0627\u0644\u064a\u0648\u0645 \u0628\u0648\u0631\u0643\u064a\u0646\u064a \u0645\u062d\u062c\u0628\u0627\u062a \u062e\u0641\u064a\u0641\u060c \u0645\u062d\u062a\u0634\u0645\u060c \u0648\u0623\u0646\u064a\u0642 \u0645\u0627 \u0643\u064a\u0644\u0635\u0642\u0634 \u0641\u0627\u0644\u062c\u0633\u0645\u060c \u0643\u064a\u0646\u0634\u0641 \u0628\u0633\u0631\u0639\u0629\u060c \u0648\u0645\u062b\u0627\u0644\u064a \u0644\u0644\u0645\u0635\u064a\u0641 \ud83d\udcaf \u063a\u064a\u0631 \u0646\u0641\u0636\u064a\u0647\u2026 \u0648\u0631\u062c\u0639\u064a \u0645\u0631\u062a\u0627\u062d\u0629! \ud83d\ude0d\",\n            link: \"https:\/\/bshopma.ma\/a3\/\"\n        }\n    ];\n\n    const container = document.getElementById(\"articles-container\");\n\n    articles.forEach(article => {\n        const articleDiv = document.createElement(\"div\");\n        articleDiv.className = \"post-item\"; \/\/ \u0644\u0627\u062d\u0638 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u0633\u0645 \u0644\u064a\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 CSS\n\n        articleDiv.innerHTML = `\n            <img decoding=\"async\" src=\"${article.image}\" alt=\"\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0642\u0627\u0644\">\n            <h3>${article.title}<\/h3>\n            <p>${article.text}<\/p>\n            <a href=\"${article.link}\" class=\"read-more\">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a>\n        `;\n\n        container.appendChild(articleDiv);\n    });\n  <\/script>\n<\/section>\n<!-- \u0634\u0627\u062a Tawk.to -->\n<section id=\"chat\">\n  <h2>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0645\u0628\u0627\u0634\u0631\u0629<\/h2>\n  <script type=\"text\/javascript\">\n  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();\n  (function(){\n  var s1=document.createElement(\"script\"),s0=document.getElementsByTagName(\"script\")[0];\n  s1.async=true;\n  s1.src='https:\/\/embed.tawk.to\/YOUR_TAWK_ID\/default';\n  s1.charset='UTF-8';\n  s1.setAttribute('crossorigin','*');\n  s0.parentNode.insertBefore(s1,s0);\n  })();\n  <\/script>\n<\/section>\n\n<script>\nfunction scrollSlider(id, distance) {\n  const slider = document.getElementById(id);\n  slider.scrollBy({ left: distance, behavior: 'smooth' });\n}\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a\u0646\u0627 &#10094; &#10095; \u0645\u0639\u0631\u0636 \u0627\u0644\u0635\u0648\u0631 &#10094; &#10095; \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0645\u0628\u0627\u0634\u0631\u0629<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1050","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/pages\/1050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/comments?post=1050"}],"version-history":[{"count":47,"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/pages\/1050\/revisions"}],"predecessor-version":[{"id":1246,"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/pages\/1050\/revisions\/1246"}],"wp:attachment":[{"href":"https:\/\/bshopma.ma\/ar\/wp-json\/wp\/v2\/media?parent=1050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}