app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16. <style>
  17.     .slick-slider {
  18.         margin-bottom: 30px;
  19.     }
  21.     .slick-dots {
  22.         position: absolute;
  23.         bottom: -45px;
  24.         display: block;
  25.         width: 100%;
  26.         padding: 0;
  27.         list-style: none;
  28.         text-align: center;
  29.     }
  31.     .slick-dots li {
  32.         position: relative;
  33.         display: inline-block;
  34.         width: 20px;
  35.         height: 20px;
  36.         margin: 0 5px;
  37.         padding: 0;
  39.         cursor: pointer;
  40.     }
  42.     .slick-dots li button {
  43.         font-size: 0;
  44.         line-height: 0;
  45.         display: block;
  46.         width: 20px;
  47.         height: 20px;
  48.         padding: 5px;
  49.         cursor: pointer;
  50.         color: transparent;
  51.         border: 0;
  52.         outline: none;
  53.         background: transparent;
  54.     }
  56.     .slick-dots li button:hover,
  57.     .slick-dots li button:focus {
  58.         outline: none;
  59.     }
  61.     .slick-dots li button:hover:before,
  62.     .slick-dots li button:focus:before {
  63.         opacity: 1;
  64.     }
  66.     .slick-dots li button:before {
  67.         content: " ";
  68.         line-height: 20px;
  69.         position: absolute;
  70.         top: 0;
  71.         left: 0;
  72.         width: 12px;
  73.         height: 12px;
  74.         text-align: center;
  75.         opacity: .25;
  76.         background-color: black;
  77.         border-radius: 50%;
  79.     }
  81.     .slick-dots li.slick-active button:before {
  82.         opacity: .75;
  83.         background-color: black;
  84.     }
  86.     .slick-dots li button.thumbnail img {
  87.         width: 0;
  88.         height: 0;
  89.     }
  90. </style>
  91. {% endblock %}
  93. {% block main %}
  94. <div class="mv">
  95.     <div class="slider-wrap">
  96.         <div class="swiper slider">
  97.             <div class="swiper-wrapper">
  99.                 <!-- サタプラ放送前 -->
  100.                 <div class="swiper-slide satapra-before-1">
  101.                         <picture>
  102.                             <source srcset="{{ asset('assets/img/top/sp/main06.jpg', 'user_data') }}" media="(max-width: 768px)">
  103.                             <img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt="サタプラ放送前">
  104.                         </picture>
  105.                 </div>
  107.                 <!-- サタプラ放送後 -->
  108.                 <div class="swiper-slide satapra-after-1">
  109.                     <a href="https://s23.kaihatsu.space/products/list?category_id=13" target="_blank" class="swiper-slide-link">
  110.                         <picture>
  111.                             <source srcset="{{ asset('assets/img/top/sp/main06-2.jpg', 'user_data') }}" media="(max-width: 768px)">
  112.                             <img src="{{ asset('assets/img/top/main06-2.jpg', 'user_data') }}" alt="サタプラ放送後">
  113.                         </picture>
  114.                     </a>
  115.                 </div>
  117.                 <div class="swiper-slide">
  118.                     <a href="http://hirota-s.shop-pro.jp/?pid=96392868" target="_blank" class="swiper-slide-link">
  119.                         <picture>
  120.                             <source srcset="{{ asset('assets/img/top/sp/main05.jpg', 'user_data') }}" media="(max-width: 768px)">
  121.                             <img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt="">
  122.                         </picture>
  123.                     </a>
  124.                 </div>
  125.                 <div class="swiper-slide">
  126.                     <a href="{{ url('recipe') }}">
  127.                         <picture>
  128.                             <source srcset="{{ asset('assets/img/top/sp/main01.jpg', 'user_data') }}" media="(max-width: 768px)">
  129.                             <img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt="">
  130.                         </picture>
  131.                     </a>
  132.                 </div>
  133.                 <div class="swiper-slide">
  134.                     <a href="http://hirota-s.shop-pro.jp/?pid=96392989" target="_blank">
  135.                         <picture>
  136.                             <source srcset="{{ asset('assets/img/top/sp/main02.jpg', 'user_data') }}" media="(max-width: 768px)">
  137.                             <img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt="">
  138.                         </picture>
  139.                     </a>
  140.                 </div>
  141.                 <div class="swiper-slide">
  142.                     <a href="http://hirota-s.shop-pro.jp/" target="_blank">
  143.                         <picture>
  144.                             <source srcset="{{ asset('assets/img/top/sp/main03.jpg', 'user_data') }}" media="(max-width: 768px)">
  145.                             <img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt="">
  146.                         </picture>
  147.                     </a>
  148.                 </div>
  149.                 <div class="swiper-slide">
  150.                     <a href="http://hirota-s.shop-pro.jp/?pid=96392692" target="_blank">
  151.                         <picture>
  152.                             <source srcset="{{ asset('assets/img/top/sp/main04.jpg', 'user_data') }}" media="(max-width: 768px)">
  153.                             <img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt="">
  154.                         </picture>
  155.                     </a>
  156.                 </div>
  157.             </div>
  158.         </div>
  159.     </div>
  160.     <div class="slider-thumbnail-wrap">
  161.         <div class="swiper slider-thumbnail">
  162.             <div class="swiper-wrapper">
  163.                 <!-- サタプラ放送前 -->
  164.                 <div class="swiper-slide satapra-before-2"><img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt=""></div>
  165.                 <!-- サタプラ放送後 -->
  166.                 <div class="swiper-slide satapra-after-2"><img src="{{ asset('assets/img/top/main06-2.jpg', 'user_data') }}" alt=""></div>
  167.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt=""></div>
  168.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt=""></div>
  169.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt=""></div>
  170.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt=""></div>
  171.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt=""></div>
  172.             </div>
  173.         </div>
  174.         <div class="swiper-button-prev"></div>
  175.         <div class="swiper-button-next"></div>
  176.     </div>
  178.     <script>
  179.         document.addEventListener("DOMContentLoaded", function() {
  181.             // 表示切り替え日時：2025-11-22 08:40（日本時間）
  182.             const switchTime = new Date("2025-11-22T08:40:00+09:00");
  183.             const now = new Date();
  185.             // 対象をまとめて取得
  186.             const beforeSlides = document.querySelectorAll(".satapra-before-1, .satapra-before-2");
  187.             const afterSlides  = document.querySelectorAll(".satapra-after-1, .satapra-after-2");
  189.             if (now < switchTime) {
  190.                 // ▼ 放送前（期間中）
  191.                 beforeSlides.forEach(el => el.style.display = "block");
  192.                 afterSlides.forEach(el  => el.style.display = "none");
  193.             } else {
  194.                 // ▼ 放送後（期間終了後）
  195.                 beforeSlides.forEach(el => el.style.display = "none");
  196.                 afterSlides.forEach(el  => el.style.display = "block");
  197.             }
  198.         });
  199.         </script>
  200. </div>
  201. {% endblock %}