templates/Accueil/album.html.twig line 1

Open in your IDE?
  1. {# * Product Gallery Page - 5sur5séjour * Clean rewrite with self-contained
  2. styles * Original purpose: Display products with image galleries and ordering
  3. capability #} {% extends 'Accueil/layoutAccueil.html.twig' %} {% block
  4. stylesheets %}
  5. {{ parent() }}
  6. <style>
  7.   /* ============================================
  8.            5sur5séjour Product Gallery - Clean Styles
  9.            ============================================ */
  11.   :root {
  12.     --primary: #41a2aa;
  13.     --primary-dark: #359ba3;
  14.     --primary-light: rgba(65, 162, 170, 0.1);
  15.     --orange: #f56040;
  16.     --text-dark: #1a1a1a;
  17.     --text-muted: #6b7280;
  18.     --bg-light: #f8fafb;
  19.     --white: #ffffff;
  20.     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  21.     --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  22.     --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
  23.     --radius-sm: 8px;
  24.     --radius-md: 12px;
  25.     --radius-lg: 20px;
  26.   }
  28.   /* Page Container */
  29.   .product-page {
  30.     background: var(--bg-light);
  31.     min-height: 100vh;
  32.     padding: 40px 20px;
  33.   }
  35.   .product-container {
  36.     max-width: 1200px;
  37.     margin: 0 auto;
  38.   }
  40.   /* Login Modal */
  41.   .login-modal-overlay {
  42.     display: none;
  43.     position: fixed;
  44.     top: 0;
  45.     left: 0;
  46.     right: 0;
  47.     bottom: 0;
  48.     background: rgba(0, 0, 0, 0.5);
  49.     z-index: 10000;
  50.     align-items: center;
  51.     justify-content: center;
  52.   }
  54.   .login-modal-overlay.active {
  55.     display: flex;
  56.   }
  58.   .login-modal {
  59.     background: var(--white);
  60.     border-radius: var(--radius-lg);
  61.     padding: 32px;
  62.     max-width: 400px;
  63.     width: 90%;
  64.     text-align: center;
  65.     box-shadow: var(--shadow-lg);
  66.   }
  68.   .login-modal h3 {
  69.     color: var(--text-dark);
  70.     font-size: 20px;
  71.     font-weight: 600;
  72.     margin-bottom: 24px;
  73.   }
  75.   .login-modal-close {
  76.     position: absolute;
  77.     top: 16px;
  78.     right: 16px;
  79.     background: none;
  80.     border: none;
  81.     font-size: 24px;
  82.     cursor: pointer;
  83.     color: var(--text-muted);
  84.   }
  86.   /* Product Card */
  87.   .product-card {
  88.     display: none;
  89.     background: var(--white);
  90.     border-radius: var(--radius-lg);
  91.     box-shadow: var(--shadow-md);
  92.     overflow: hidden;
  93.     margin-bottom: 30px;
  94.   }
  96.   .product-card.active {
  97.     display: block;
  98.   }
  100.   .product-card-inner {
  101.     display: grid;
  102.     grid-template-columns: 1fr 1fr;
  103.     gap: 0;
  104.   }
  106.   /* Gallery Section */
  107.   .product-gallery {
  108.     padding: 30px;
  109.     display: flex;
  110.     flex-direction: column;
  111.     align-items: center;
  112.   }
  114.   .main-image-container {
  115.     position: relative;
  116.     width: 100%;
  117.     max-width: 500px;
  118.     margin-bottom: 20px;
  119.   }
  121.   .main-image {
  122.     width: 100%;
  123.     height: auto;
  124.     border-radius: var(--radius-md);
  125.     box-shadow: var(--shadow-md);
  126.     transition: transform 0.3s ease, opacity 0.2s ease;
  127.     cursor: zoom-in;
  128.   }
  130.   .main-image:hover {
  131.     transform: scale(1.02);
  132.   }
  134.   .thumbnails {
  135.     display: flex;
  136.     flex-wrap: wrap;
  137.     gap: 10px;
  138.     justify-content: center;
  139.     max-width: 500px;
  140.   }
  142.   .thumbnail {
  143.     width: 70px;
  144.     height: 70px;
  145.     border-radius: var(--radius-sm);
  146.     object-fit: cover;
  147.     cursor: pointer;
  148.     border: 3px solid transparent;
  149.     transition: all 0.3s ease;
  150.     box-shadow: var(--shadow-sm);
  151.   }
  153.   .thumbnail:hover {
  154.     transform: translateY(-3px);
  155.     box-shadow: var(--shadow-md);
  156.   }
  158.   .thumbnail.active {
  159.     border-color: var(--primary);
  160.   }
  162.   /* Product Info Section */
  163.   .product-info {
  164.     padding: 40px;
  165.     display: flex;
  166.     flex-direction: column;
  167.   }
  169.   .product-title {
  170.     font-size: 28px;
  171.     font-weight: 700;
  172.     color: var(--text-dark);
  173.     margin-bottom: 24px;
  174.     line-height: 1.3;
  175.   }
  177.   /* Feature Blocks */
  178.   .feature-block {
  179.     background: var(--primary-light);
  180.     border-radius: var(--radius-md);
  181.     padding: 20px;
  182.     margin-bottom: 16px;
  183.     border: 1px solid rgba(65, 162, 170, 0.15);
  184.   }
  186.   .feature-header {
  187.     display: flex;
  188.     align-items: center;
  189.     gap: 12px;
  190.     margin-bottom: 12px;
  191.   }
  193.   .feature-icon {
  194.     width: 24px;
  195.     height: 24px;
  196.     flex-shrink: 0;
  197.   }
  199.   .feature-title {
  200.     font-size: 16px;
  201.     font-weight: 600;
  202.     color: var(--text-dark);
  203.     margin: 0;
  204.   }
  206.   .feature-content {
  207.     font-size: 14px;
  208.     color: var(--text-muted);
  209.     line-height: 1.7;
  210.     margin: 0;
  211.   }
  213.   /* Order Button */
  214.   .order-btn {
  215.     display: inline-flex;
  216.     align-items: center;
  217.     justify-content: center;
  218.     gap: 8px;
  219.     background: linear-gradient(
  220.       135deg,
  221.       var(--primary) 0%,
  222.       var(--primary-dark) 100%
  223.     );
  224.     color: var(--white);
  225.     border: none;
  226.     border-radius: var(--radius-md);
  227.     padding: 16px 32px;
  228.     font-size: 16px;
  229.     font-weight: 600;
  230.     cursor: pointer;
  231.     transition: all 0.3s ease;
  232.     box-shadow: 0 4px 14px rgba(65, 162, 170, 0.35);
  233.     margin-top: auto;
  234.     width: fit-content;
  235.   }
  237.   .order-btn:hover {
  238.     transform: translateY(-2px);
  239.     box-shadow: 0 6px 20px rgba(65, 162, 170, 0.45);
  240.   }
  242.   .order-btn:active {
  243.     transform: translateY(0);
  244.   }
  246.   /* Navigation Controls */
  247.   .product-nav {
  248.     display: flex;
  249.     justify-content: center;
  250.     gap: 16px;
  251.     margin-top: 20px;
  252.   }
  254.   .nav-btn {
  255.     width: 50px;
  256.     height: 50px;
  257.     border-radius: 50%;
  258.     background: var(--white);
  259.     border: none;
  260.     box-shadow: var(--shadow-md);
  261.     cursor: pointer;
  262.     display: flex;
  263.     align-items: center;
  264.     justify-content: center;
  265.     transition: all 0.3s ease;
  266.   }
  268.   .nav-btn:hover {
  269.     transform: scale(1.1);
  270.     box-shadow: var(--shadow-lg);
  271.   }
  273.   .nav-btn svg {
  274.     width: 20px;
  275.     height: 20px;
  276.     fill: var(--text-dark);
  277.   }
  279.   /* Product Dots Navigation */
  280.   .product-dots {
  281.     display: flex;
  282.     justify-content: center;
  283.     gap: 8px;
  284.     margin-top: 16px;
  285.   }
  287.   .dot {
  288.     width: 10px;
  289.     height: 10px;
  290.     border-radius: 50%;
  291.     background: #ddd;
  292.     border: none;
  293.     cursor: pointer;
  294.     transition: all 0.3s ease;
  295.   }
  297.   .dot.active {
  298.     background: var(--primary);
  299.     transform: scale(1.2);
  300.   }
  302.   .dot:hover {
  303.     background: var(--primary-dark);
  304.   }
  306.   /* ============================================
  307.            Mobile Styles
  308.            ============================================ */
  310.   .mobile-slider {
  311.     display: none;
  312.   }
  314.   @media (max-width: 991px) {
  315.     .product-card-inner {
  316.       grid-template-columns: 1fr;
  317.     }
  319.     .product-gallery {
  320.       padding: 20px;
  321.     }
  323.     .product-info {
  324.       padding: 24px;
  325.     }
  327.     .product-title {
  328.       font-size: 22px;
  329.     }
  330.   }
  332.   @media (max-width: 768px) {
  333.     .product-page {
  334.       padding: 20px 12px;
  335.     }
  337.     .desktop-view {
  338.       display: none;
  339.     }
  341.     .mobile-slider {
  342.       display: block;
  343.     }
  345.     .mobile-product-card {
  346.       background: var(--white);
  347.       border-radius: var(--radius-lg);
  348.       box-shadow: var(--shadow-md);
  349.       overflow: hidden;
  350.       margin-bottom: 20px;
  351.     }
  353.     .mobile-main-image {
  354.       width: 100%;
  355.       height: auto;
  356.       display: block;
  357.     }
  359.     .mobile-thumbnails {
  360.       display: flex;
  361.       gap: 8px;
  362.       padding: 12px;
  363.       overflow-x: auto;
  364.       -webkit-overflow-scrolling: touch;
  365.     }
  367.     .mobile-thumbnail {
  368.       width: 60px;
  369.       height: 60px;
  370.       border-radius: var(--radius-sm);
  371.       object-fit: cover;
  372.       flex-shrink: 0;
  373.       cursor: pointer;
  374.       border: 2px solid transparent;
  375.       transition: border-color 0.3s ease;
  376.     }
  378.     .mobile-thumbnail.active {
  379.       border-color: var(--primary);
  380.     }
  382.     .mobile-product-info {
  383.       padding: 20px;
  384.     }
  386.     .mobile-product-title {
  387.       font-size: 20px;
  388.       font-weight: 700;
  389.       color: var(--text-dark);
  390.       margin-bottom: 16px;
  391.     }
  393.     .feature-block {
  394.       padding: 16px;
  395.       margin-bottom: 12px;
  396.     }
  398.     .feature-title {
  399.       font-size: 15px;
  400.     }
  402.     .feature-content {
  403.       font-size: 13px;
  404.     }
  406.     .order-btn {
  407.       width: 100%;
  408.       padding: 14px 24px;
  409.     }
  411.     .thumbnail {
  412.       width: 55px;
  413.       height: 55px;
  414.     }
  415.   }
  417.   /* Slick Slider Overrides for Mobile */
  418.   .mobile-slider .slick-slide {
  419.     padding: 0 5px;
  420.   }
  422.   .mobile-slider .slick-dots {
  423.     bottom: -30px;
  424.   }
  426.   .mobile-slider .slick-dots li button:before {
  427.     color: var(--primary);
  428.   }
  430.   .mobile-slider .slick-prev,
  431.   .mobile-slider .slick-next {
  432.     z-index: 10;
  433.   }
  435.   .mobile-slider .slick-prev {
  436.     left: 10px;
  437.   }
  439.   .mobile-slider .slick-next {
  440.     right: 10px;
  441.   }
  443.   /* Image Loading States */
  444.   .main-image.loading {
  445.     opacity: 0.6;
  446.   }
  448.   /* Lightbox (optional enhancement) */
  449.   .lightbox-overlay {
  450.     display: none;
  451.     position: fixed;
  452.     top: 0;
  453.     left: 0;
  454.     right: 0;
  455.     bottom: 0;
  456.     background: rgba(0, 0, 0, 0.9);
  457.     z-index: 10001;
  458.     align-items: center;
  459.     justify-content: center;
  460.     cursor: zoom-out;
  461.   }
  463.   .lightbox-overlay.active {
  464.     display: flex;
  465.   }
  467.   .lightbox-image {
  468.     max-width: 90%;
  469.     max-height: 90%;
  470.     border-radius: var(--radius-md);
  471.   }
  473.   .lightbox-close {
  474.     position: absolute;
  475.     top: 20px;
  476.     right: 20px;
  477.     background: var(--white);
  478.     border: none;
  479.     width: 40px;
  480.     height: 40px;
  481.     border-radius: 50%;
  482.     font-size: 24px;
  483.     cursor: pointer;
  484.     display: flex;
  485.     align-items: center;
  486.     justify-content: center;
  487.   }
  488. </style>
  489. {% endblock %} {% block Header %} {% if app.user %}
  490. {{
  491.   render(controller("App\\Controller\\EspaceParentController::headerparenrt"))
  492. }}
  493. {% else %}
  494. {{ render(controller("App\\Controller\\AccueilController::header")) }}
  495. {% endif %} {% endblock %} {% block Content %}
  496. <div class="product-page">
  497.   <div class="product-container">
  498.     <!-- Login Required Modal -->
  499.     <div class="login-modal-overlay" id="loginModal">
  500.       <div class="login-modal">
  501.         <h3>Veuillez d'abord vous connecter !</h3>
  502.         <a href="/" class="order-btn">OK</a>
  503.       </div>
  504.     </div>
  506.     <!-- Lightbox for Image Zoom -->
  507.     <div class="lightbox-overlay" id="lightbox" onclick="closeLightbox()">
  508.       <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
  509.       <img class="lightbox-image" id="lightboxImage" src="" alt="" />
  510.     </div>
  512.     <!-- Desktop View -->
  513.     <div class="desktop-view">
  514.       {% for product in produit %} {% if product.labeleType != "Connexion" %}
  515.       <div
  516.         class="product-card"
  517.         id="product-{{ loop.index }}"
  518.         data-product-id="{{ product.labeleType|replace({' ': ''}) }}"
  519.         {%
  520.         if
  521.         loop.first
  522.         %}style="display: block;"
  523.         {%
  524.         endif
  525.         %}
  526.       >
  527.         <div class="product-card-inner">
  528.           <!-- Gallery -->
  529.           <div class="product-gallery">
  530.             <div class="main-image-container">
  531.               <img
  532.                 class="main-image"
  533.                 id="mainImage-{{ loop.index }}"
  534.                 src="{{ (product.attachements[0].idAttachement.path)|replace({'/upload/': '/upload/f_auto,q_auto,w_800/'}) }}"
  535.                 alt="{{ product.labeleType }}"
  536.                 onclick="openLightbox(this.src)"
  537.                 loading="eager"
  538.               />
  539.             </div>
  541.             <div class="thumbnails">
  542.               {% for attachment in product.attachements %} {% if
  543.               attachment.statut == "pageProduit" %}
  544.               <img
  545.                 class="thumbnail {% if loop.first %}active{% endif %}"
  546.                 src="{{ attachment.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_150,h_150,c_fill/'}) }}"
  547.                 data-full="{{ attachment.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_800/'}) }}"
  548.                 alt="{{ product.labeleType }} - Photo {{ loop.index }}"
  549.                 onclick="changeMainImage(this, 'mainImage-{{
  550.                   loop.parent.loop.index
  551.                 }}')"
  552.                 loading="lazy"
  553.               />
  554.               {% endif %} {% endfor %}
  555.             </div>
  556.           </div>
  558.           <!-- Product Info -->
  559.           <div class="product-info">
  560.             <h2 class="product-title">{{ product.labeleType }}</h2>
  562.             <!-- Caractéristiques -->
  563.             <div class="feature-block">
  564.               <div class="feature-header">
  565.                 <img
  566.                   class="feature-icon"
  567.                   src="{{ asset('images/SVG/5sur5-caracteristiques.svg') }}"
  568.                   alt=""
  569.                 />
  570.                 <h4 class="feature-title">Caractéristiques produit</h4>
  571.               </div>
  572.               <p class="feature-content">
  573.                 {% if product.description %}{{ product.description | nl2br }}{%
  574.                 endif %}
  575.               </p>
  576.             </div>
  578.             <!-- Les Plus -->
  579.             <div class="feature-block">
  580.               <div class="feature-header">
  581.                 <img
  582.                   class="feature-icon"
  583.                   src="{{ asset('images/LesPlus5sur5.svg') }}"
  584.                   alt=""
  585.                 />
  586.                 <h4 class="feature-title">Les plus produit</h4>
  587.               </div>
  588.               <p class="feature-content">
  589.                 {{ product.plusDescription | nl2br }}
  590.               </p>
  591.             </div>
  593.             <!-- Tarifs -->
  594.             <div class="feature-block">
  595.               <div class="feature-header">
  596.                 <img
  597.                   class="feature-icon"
  598.                   src="{{ asset('images/SVG/5sur5-tarifs.svg') }}"
  599.                   alt=""
  600.                 />
  601.                 <h4 class="feature-title">Tarif & Frais de port</h4>
  602.               </div>
  603.               <p class="feature-content">{{ product.tarifs | nl2br }}</p>
  604.             </div>
  606.             <!-- Order Button -->
  607.             {% if app.user %} {% if is_granted('ROLE_PARENT') %}
  608.             <button
  609.               class="order-btn"
  610.               onclick="location.href='{{ path('projet-Parent') }}'"
  611.             >
  612.               Commander
  613.             </button>
  614.             {% elseif is_granted('ROLE_ACC') %}
  615.             <button
  616.               class="order-btn"
  617.               onclick="location.href='{{
  618.                 path('ProjetsAccompagnateur', { id: sejour.id })
  619.               }}'"
  620.             >
  621.               Commander
  622.             </button>
  623.             {% endif %} {% else %}
  624.             <button class="order-btn" onclick="showLoginModal()">
  625.               Commander
  626.             </button>
  627.             {% endif %}
  628.           </div>
  629.         </div>
  630.       </div>
  631.       {% endif %} {% endfor %}
  633.       <!-- Navigation -->
  634.       {% set productCount = 0 %} {% for product in produit %} {% if
  635.       product.labeleType != "Connexion" %} {% set productCount = productCount +
  636.       1 %} {% endif %} {% endfor %} {% if productCount > 1 %}
  637.       <div class="product-nav">
  638.         <button
  639.           class="nav-btn"
  640.           onclick="navigateProduct(-1)"
  641.           aria-label="Produit précédent"
  642.         >
  643.           <svg viewBox="0 0 24 24">
  644.             <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
  645.           </svg>
  646.         </button>
  647.         <button
  648.           class="nav-btn"
  649.           onclick="navigateProduct(1)"
  650.           aria-label="Produit suivant"
  651.         >
  652.           <svg viewBox="0 0 24 24">
  653.             <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
  654.           </svg>
  655.         </button>
  656.       </div>
  658.       <div class="product-dots">
  659.         {% set dotIndex = 0 %} {% for product in produit %} {% if
  660.         product.labeleType != "Connexion" %}
  661.         <button
  662.           class="dot {% if dotIndex == 0 %}active{% endif %}"
  663.           onclick="goToProduct({{ dotIndex }})"
  664.           aria-label="Voir {{ product.labeleType }}"
  665.         ></button>
  666.         {% set dotIndex = dotIndex + 1 %} {% endif %} {% endfor %}
  667.       </div>
  668.       {% endif %}
  669.     </div>
  671.     <!-- Mobile View -->
  672.     <div class="mobile-slider">
  673.       {% for product in produit %} {% if product.labeleType != "Connexion" %}
  674.       <div class="mobile-product-card">
  675.         <img
  676.           class="mobile-main-image"
  677.           id="mobileMainImage-{{ loop.index }}"
  678.           src="{{ (product.attachements[0].idAttachement.path)|replace({'/upload/': '/upload/f_auto,q_auto,w_600/'}) }}"
  679.           alt="{{ product.labeleType }}"
  680.           loading="lazy"
  681.         />
  683.         <div class="mobile-thumbnails">
  684.           {% for attachment in product.attachements %} {% if attachment.statut
  685.           == "pageProduit" %}
  686.           <img
  687.             class="mobile-thumbnail {% if loop.first %}active{% endif %}"
  688.             src="{{ attachment.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_120,h_120,c_fill/'}) }}"
  689.             data-full="{{ attachment.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_600/'}) }}"
  690.             alt="{{ product.labeleType }} - Photo {{ loop.index }}"
  691.             onclick="changeMobileImage(this, 'mobileMainImage-{{
  692.               loop.parent.loop.index
  693.             }}')"
  694.             loading="lazy"
  695.           />
  696.           {% endif %} {% endfor %}
  697.         </div>
  699.         <div class="mobile-product-info">
  700.           <h2 class="mobile-product-title">{{ product.labeleType }}</h2>
  702.           <div class="feature-block">
  703.             <div class="feature-header">
  704.               <img
  705.                 class="feature-icon"
  706.                 src="{{ asset('images/SVG/5sur5-caracteristiques.svg') }}"
  707.                 alt=""
  708.               />
  709.               <h4 class="feature-title">Caractéristiques produit</h4>
  710.             </div>
  711.             <p class="feature-content">
  712.               {% if product.description %}{{ product.description | nl2br }}{%
  713.               endif %}
  714.             </p>
  715.           </div>
  717.           <div class="feature-block">
  718.             <div class="feature-header">
  719.               <img
  720.                 class="feature-icon"
  721.                 src="{{ asset('images/LesPlus5sur5.svg') }}"
  722.                 alt=""
  723.               />
  724.               <h4 class="feature-title">Les plus produit</h4>
  725.             </div>
  726.             <p class="feature-content">{{ product.plusDescription | nl2br }}</p>
  727.           </div>
  729.           <div class="feature-block">
  730.             <div class="feature-header">
  731.               <img
  732.                 class="feature-icon"
  733.                 src="{{ asset('images/SVG/5sur5-tarifs.svg') }}"
  734.                 alt=""
  735.               />
  736.               <h4 class="feature-title">Tarif & Frais de port</h4>
  737.             </div>
  738.             <p class="feature-content">{{ product.tarifs | nl2br }}</p>
  739.           </div>
  741.           {% if app.user %} {% if is_granted('ROLE_PARENT') %}
  742.           <button
  743.             class="order-btn"
  744.             onclick="location.href='{{ path('projet-Parent') }}'"
  745.           >
  746.             Commander
  747.           </button>
  748.           {% elseif is_granted('ROLE_ACC') %}
  749.           <button
  750.             class="order-btn"
  751.             onclick="location.href='{{
  752.               path('ProjetsAccompagnateur', { id: sejour.id })
  753.             }}'"
  754.           >
  755.             Commander
  756.           </button>
  757.           {% endif %} {% else %}
  758.           <button class="order-btn" onclick="showLoginModal()">
  759.             Commander
  760.           </button>
  761.           {% endif %}
  762.         </div>
  763.       </div>
  764.       {% endif %} {% endfor %}
  765.     </div>
  766.   </div>
  767. </div>
  768. {% endblock %} {% block Footer %}
  769. {{ parent() }}
  770. {% endblock %} {% block javascript %}
  771. {{ parent() }}
  772. <script>
  773.   // ============================================
  774.   // Product Gallery - JavaScript
  775.   // ============================================
  777.   let currentProductIndex = 0;
  778.   const productCards = document.querySelectorAll('.desktop-view .product-card');
  779.   const dots = document.querySelectorAll('.dot');
  780.   const totalProducts = productCards.length;
  782.   // Initialize based on URL parameter or showArt variable
  783.   document.addEventListener('DOMContentLoaded', function() {
  784.       {% if showArt is defined and showArt != "ALL" %}
  785.           const targetId = "{{ showArt|replace({' ': ''}) }}";
  786.           productCards.forEach((card, index) => {
  787.               if (card.dataset.productId === targetId) {
  788.                   goToProduct(index);
  789.               }
  790.           });
  791.       {% endif %}
  793.       // Initialize mobile slider if Slick is available
  794.       if (typeof $.fn.slick !== 'undefined') {
  795.           $('.mobile-slider').slick({
  796.               slidesToShow: 1,
  797.               slidesToScroll: 1,
  798.               autoplay: true,
  799.               autoplaySpeed: 4000,
  800.               dots: true,
  801.               arrows: false,
  802.               adaptiveHeight: true
  803.           });
  804.       }
  805.   });
  807.   // Navigate between products
  808.   function navigateProduct(direction) {
  809.       currentProductIndex += direction;
  811.       if (currentProductIndex >= totalProducts) {
  812.           currentProductIndex = 0;
  813.       } else if (currentProductIndex < 0) {
  814.           currentProductIndex = totalProducts - 1;
  815.       }
  817.       updateProductDisplay();
  818.   }
  820.   // Go to specific product
  821.   function goToProduct(index) {
  822.       currentProductIndex = index;
  823.       updateProductDisplay();
  824.   }
  826.   // Update display
  827.   function updateProductDisplay() {
  828.       productCards.forEach((card, index) => {
  829.           card.style.display = index === currentProductIndex ? 'block' : 'none';
  830.       });
  832.       dots.forEach((dot, index) => {
  833.           dot.classList.toggle('active', index === currentProductIndex);
  834.       });
  835.   }
  837.   // Change main image from thumbnail (Desktop)
  838.   function changeMainImage(thumbnail, mainImageId) {
  839.       const mainImage = document.getElementById(mainImageId);
  840.       const container = thumbnail.closest('.product-gallery');
  842.       // Update active state
  843.       container.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
  844.       thumbnail.classList.add('active');
  846.       // Animate transition
  847.       mainImage.classList.add('loading');
  848.       mainImage.style.transform = 'scale(0.98)';
  850.       setTimeout(() => {
  851.           mainImage.src = thumbnail.dataset.full;
  852.           mainImage.onload = function() {
  853.               mainImage.classList.remove('loading');
  854.               mainImage.style.transform = 'scale(1)';
  855.           };
  856.       }, 150);
  857.   }
  859.   // Change main image from thumbnail (Mobile)
  860.   function changeMobileImage(thumbnail, mainImageId) {
  861.       const mainImage = document.getElementById(mainImageId);
  862.       const container = thumbnail.closest('.mobile-product-card');
  864.       container.querySelectorAll('.mobile-thumbnail').forEach(t => t.classList.remove('active'));
  865.       thumbnail.classList.add('active');
  867.       mainImage.style.opacity = '0.7';
  869.       setTimeout(() => {
  870.           mainImage.src = thumbnail.dataset.full;
  871.           mainImage.onload = function() {
  872.               mainImage.style.opacity = '1';
  873.           };
  874.       }, 150);
  875.   }
  877.   // Lightbox functions
  878.   function openLightbox(src) {
  879.       const lightbox = document.getElementById('lightbox');
  880.       const lightboxImage = document.getElementById('lightboxImage');
  881.       lightboxImage.src = src;
  882.       lightbox.classList.add('active');
  883.       document.body.style.overflow = 'hidden';
  884.   }
  886.   function closeLightbox() {
  887.       const lightbox = document.getElementById('lightbox');
  888.       lightbox.classList.remove('active');
  889.       document.body.style.overflow = '';
  890.   }
  892.   // Login modal
  893.   function showLoginModal() {
  894.       document.getElementById('loginModal').classList.add('active');
  895.   }
  897.   function hideLoginModal() {
  898.       document.getElementById('loginModal').classList.remove('active');
  899.   }
  901.   // Close modal on overlay click
  902.   document.getElementById('loginModal').addEventListener('click', function(e) {
  903.       if (e.target === this) {
  904.           hideLoginModal();
  905.       }
  906.   });
  908.   // Keyboard navigation
  909.   document.addEventListener('keydown', function(e) {
  910.       if (e.key === 'Escape') {
  911.           closeLightbox();
  912.           hideLoginModal();
  913.       } else if (e.key === 'ArrowLeft') {
  914.           navigateProduct(-1);
  915.       } else if (e.key === 'ArrowRight') {
  916.           navigateProduct(1);
  917.       }
  918.   });
  919. </script>
  920. {% endblock %}