app/template/biotop/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'front_page' %}
  3. {% block javascript %}
  4. {% endblock javascript %}
  5. {% block main %}
  6. <main>
  7.     <section class="top_inner">
  8.         <div id="main-contents" class="colnum1"><!-- ▼メインビジュアル -->
  9.             <section id="top_insta">
  10.                 <div class="wrap">
  11.                     <div class="ttl_box">
  12.                         <div class="icon"><img src="/html/user_data/assets/img/common/icon_insta.png" alt=""></div>
  13.                         <h2 class="ttl f_tsunagi"><span class="color">インスタグラムでギャラリー公開中!</span><br>サンプル商品をインスタグラムで確認!</h2>
  14.                     </div>
  15.                     <div class="ttl_comment">大阪難波・心斎橋・北新地の花屋biotop(ビオトープ)では<br>インスタグラムで豊富なお花たちをご紹介中!他では見れないビオトープのお花たちをぜひご覧ください!</div>
  16.                     <div class="list_box">
  17.                         <ul>
  18.                             <li><a href="https://www.instagram.com/biotop.gallery/?hl=ja" class="link" target="_blank">
  19.                                     <div class="img"><img src="/html/user_data/assets/img/common/top_insta_img01.jpg" alt="">
  20.                                         <p class="ab_theme">オーダーメイド 商品ギャラリー</p>
  21.                                         <p class="ab_account f_cent">@biotop.gallery</p>
  22.                                     </div>
  23.                                     <div class="text_box_sp sp">
  24.                                         <p class="theme">オーダーメイド 商品ギャラリー</p>
  25.                                         <p class="account f_cent">@biotop.gallery</p>
  26.                                         <p class="btn">インスタグラムを見る &gt;</p>
  27.                                     </div>
  28.                                 </a></li>
  29.                             <li><a href="https://www.instagram.com/biotop.orchid/" class="link" target="_blank">
  30.                                     <div class="img"><img src="/html/user_data/assets/img/common/top_insta_img02.jpg" alt="">
  31.                                         <p class="ab_theme">ビオトープ 胡蝶蘭</p>
  32.                                         <p class="ab_account f_cent">@biotop.orchld</p>
  33.                                     </div>
  34.                                     <div class="text_box_sp sp">
  35.                                         <p class="theme">ビオトープ 胡蝶蘭</p>
  36.                                         <p class="account f_cent">@biotop.orchld</p>
  37.                                         <p class="btn">インスタグラムを見る &gt;</p>
  38.                                     </div>
  39.                                 </a></li>
  40.                             <li><a href="https://www.instagram.com/biotop.towercollection/" class="link" target="_blank">
  41.                                     <div class="img"><img src="/html/user_data/assets/img/common/top_insta_img03.jpg" alt="">
  42.                                         <p class="ab_theme">ビオトープ タワーコレクション</p>
  43.                                         <p class="ab_account f_cent">@biotop.flowercollection</p>
  44.                                     </div>
  45.                                     <div class="text_box_sp sp">
  46.                                         <p class="theme">ビオトープ タワーコレクション</p>
  47.                                         <p class="account f_cent">@biotop.flowercollection</p>
  48.                                         <p class="btn">インスタグラムを見る &gt;</p>
  49.                                     </div>
  50.                                 </a></li>
  51.                             <li><a href="https://www.instagram.com/biotop.plants/" class="link" target="_blank">
  52.                                     <div class="img"><img src="/html/user_data/assets/img/common/top_insta_img04.jpg" alt="">
  53.                                         <p class="ab_theme">ビオトープ プランツ</p>
  54.                                         <p class="ab_account f_cent">@biotop.plants</p>
  55.                                     </div>
  56.                                     <div class="text_box_sp sp">
  57.                                         <p class="theme">ビオトープ プランツ</p>
  58.                                         <p class="account f_cent">@biotop.plants</p>
  59.                                         <p class="btn">インスタグラムを見る &gt;</p>
  60.                                     </div>
  61.                                 </a></li>
  62.                         </ul>
  63.                     </div>
  64.                 </div>
  65.             </section>
  66.             <section id="top_service_slider">
  67.                 <div class="slider_box">
  68.                     <div class="pc">
  69.                         <div class="box js_slider_service">
  70.                             <ul>
  71.                                 <li>
  72.                                     <a href="https://line.me/R/ti/p/@596gdfco?oat_content=url&ts=05011726" class="link">
  73.                                         <img src="/html/user_data/assets/img/common/banner_phone.png" alt="スマホから簡単注文">
  74.                                     </a>
  75.                                 </li>
  76.                                 <li>
  77.                                     <a href="/user_data/original3" class="link">
  78.                                         <img src="/html/user_data/assets/img/common/banner_logo.png" alt="企業のロゴ入りの立て札作成可能です!">
  79.                                     </a>
  80.                                 </li>
  81.                                 <li>
  82.                                     <img src="/html/user_data/assets/img/common/banner_service.png" alt="画像配信サービス">
  83.                                 </li>
  84.                                 <li>
  85.                                     <img src="/html/user_data/assets/img/common/banner_free.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
  86.                                 </li>
  87.                                 <li>
  88.                                     <a href="/user_data/surprise" class="link">
  89.                                         <img src="/html/user_data/assets/img/common/banner_gallary.png" alt="サプライズ装飾ギャラリー">
  90.                                     </a>
  91.                                 </li>
  92.                                 <li>
  93.                                     <a href="https://www.tiktok.com/@biotop.ne.jp?lang=ja-JP&is_from_webapp=1&sender_device=mobile&sender_web_id=7336091762291279368" class="link" target="_blank">
  94.                                         <img src="/html/user_data/assets/img/common/banner_tiktok.png" alt="TikTok">
  95.                                     </a>
  96.                                 </li>
  97.                             </ul>
  98.                         </div>
  99.                     </div>
  100.                     <div class="box js_slider_service sp">
  101.                         <ul>
  102.                             <li>
  103.                                 <a href="https://line.me/R/ti/p/@596gdfco?oat_content=url&ts=05011726" class="link">
  104.                                     <img src="/html/user_data/assets/img/common/banner_phone_sp.png" alt="スマホから簡単注文">
  105.                                 </a>
  106.                             </li>
  107.                             <li>
  108.                                 <a href="/user_data/original3" class="link">
  109.                                     <img src="/html/user_data/assets/img/common/banner_logo_sp.png" alt="企業のロゴ入りの立て札作成可能です!">
  110.                                 </a>
  111.                             </li>
  112.                             <li>
  113.                                 <img src="/html/user_data/assets/img/common/banner_service_sp.png" alt="画像配信サービス">
  114.                             </li>
  115.                             <li>
  116.                                 <img src="/html/user_data/assets/img/common/banner_free_sp.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
  117.                             </li>
  118.                             <li>
  119.                                 <a href="/user_data/surprise" class="link">
  120.                                     <img src="/html/user_data/assets/img/common/banner_gallary_sp.png" alt="サプライズ装飾ギャラリー">
  121.                                 </a>
  122.                             </li>
  123.                             <li>
  124.                                 <a href="https://www.tiktok.com/@biotop.ne.jp?lang=ja-JP&is_from_webapp=1&sender_device=mobile&sender_web_id=7336091762291279368" class="link" target="_blank">
  125.                                     <img src="/html/user_data/assets/img/common/banner_tiktok_sp.png" alt="TikTok">
  126.                                 </a>
  127.                             </li>
  128.                         </ul>
  129.                     </div>
  130.                     <div class="wrap pc">
  131.                         <div class="thumbnail_box js_thumbnail_box">
  132.                             <ul>
  133.                                 <li>
  134.                                     <img src="/html/user_data/assets/img/common/banner_phone.png" alt="スマホから簡単注文">
  135.                                 </li>
  136.                                 <li>
  137.                                     <img src="/html/user_data/assets/img/common/banner_logo.png" alt="企業のロゴ入りの立て札作成可能です!">
  138.                                 </li>
  139.                                 <li>
  140.                                     <img src="/html/user_data/assets/img/common/banner_service.png" alt="画像配信サービス">
  141.                                 </li>
  142.                                 <li>
  143.                                     <img src="/html/user_data/assets/img/common/banner_free.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
  144.                                 </li>
  145.                                 <li>
  146.                                     <img src="/html/user_data/assets/img/common/banner_gallary.png" alt="サプライズ装飾ギャラリー">
  147.                                 </li>
  148.                                 <li>
  149.                                     <img src="/html/user_data/assets/img/common/banner_tiktok.png" alt="TikTok">
  150.                                 </li>
  151.                             </ul>
  152.                         </div>
  153.                     </div>
  154.                 </div>
  155.             </section>
  156.         </div>
  157.     </section>
  158.     <script>
  159.         $(document).ready(function() {
  160.             var today = new Date();
  161.             var formattedToday = ('0' + (today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2);
  162.             $('.view_timer').each(function() {
  163.                 var startDate = $(this).data('start-date');
  164.                 var endDate = $(this).data('end-date');
  165.                 if (formattedToday >= startDate && formattedToday <= endDate) {
  166.                     $(this).addClass('active');
  167.                 }
  168.             });
  169.         });
  170.     </script>
  171.     <script type="text/javascript">
  172.         $(document).ready(function() {
  173.             var activeElements = $(".view_timer.active");
  174.             if (activeElements.length >= 2) {
  175.                 var randomIndex = Math.floor(Math.random() * activeElements.length);
  176.                 activeElements.each(function(index) {
  177.                     if (index !== randomIndex) {
  178.                         $(this).removeClass("active");
  179.                     }
  180.                 });
  181.             }
  182.         });
  183.     </script>
  184.     <script>
  185.         $(function() {
  186.             if ($(window).width() > 750) {
  187.                 $('.js_slider_tab ul').slick({
  188.                     autoplay: true,
  189.                     autoplaySpeed: 3000,
  190.                     speed: 800,
  191.                     arrows: true,
  192.                     slidesToShow: 2,
  193.                     slidesToScroll: 1,
  194.                     centerMode: true,
  195.                 });
  196.                 $('.js_slider_service ul').slick({
  197.                     speed: 1500,
  198.                     slidesToShow: 1,
  199.                     slidesToScroll: 1,
  200.                     centerMode: true,
  201.                     centerPadding: "30%",
  202.                     asNavFor: '.js_thumbnail_box ul',
  203.                     swipeToSlide: false
  204.                 });
  205.                 $('.js_thumbnail_box ul').slick({
  206.                     slidesToShow: 5,
  207.                     slidesToScroll: 1,
  208.                     asNavFor: '.js_slider_service ul',
  209.                     focusOnSelect: true,
  210.                 });
  211.             } else {
  212.                 $('.js_sp_slider ul').slick({
  213.                     autoplay: true,
  214.                     autoplaySpeed: 3000,
  215.                     speed: 800,
  216.                     arrows: false,
  217.                     slidesToShow: 1,
  218.                     slidesToScroll: 1,
  219.                     centerMode: true,
  220.                     dots: true,
  221.                     variableWidth: true,
  222.                 });
  223.             }
  224.         });
  225.     </script>
  226.     <script>
  227.         $(function() {
  228.             $('.js_tab_box ul li').click(function() {
  229.                 console.log('test');
  230.                 $('.js_slider_tab ul').slick('setPosition');
  231.             });
  232.             var item = document.querySelectorAll(".cont");
  233.             var select = document.querySelector('[name="cont"]');
  234.             select.addEventListener("change", function() {
  235.                 item.forEach(function(element) {
  236.                     element.classList.remove("selected");
  237.                 });
  238.                 var selected = select.value;
  239.                 document.querySelector("." + selected).classList.add("selected");
  240.             });
  241.             $(".js_more_view").on("click", function() {
  242.                 $(this).toggleClass("on_click");
  243.                 $(".text_hide").slideToggle(1000);
  244.             });
  245.             var btn = $('.fixed_sp_ft');
  246.             btn.hide();
  247.             $(window).scroll(function() {
  248.                 if ($(this).scrollTop() > 100) {
  249.                     btn.fadeIn();
  250.                 } else {
  251.                     btn.fadeOut();
  252.                 }
  253.             });
  254.         });
  255.     </script>
  256.     <script>
  257.         $(document).ready(function() {
  258.             var today = new Date();
  259.             var formattedToday = ('0' + (today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2);
  260.             $('.view_timer').each(function() {
  261.                 var startDate = $(this).data('start-date');
  262.                 var endDate = $(this).data('end-date');
  263.                 if (formattedToday >= startDate && formattedToday <= endDate) {
  264.                     $(this).addClass('active');
  265.                 }
  266.             });
  267.         });
  268.     </script>
  269.     <script type="text/javascript">
  270.         $(document).ready(function() {
  271.             var activeElements = $(".view_timer.active");
  272.             if (activeElements.length >= 2) {
  273.                 var randomIndex = Math.floor(Math.random() * activeElements.length);
  274.                 activeElements.each(function(index) {
  275.                     if (index !== randomIndex) {
  276.                         $(this).removeClass("active");
  277.                     }
  278.                 });
  279.             }
  280.         });
  281.     </script>
  282.     <script>
  283.         $(function() {
  284.             if ($(window).width() > 750) {
  285.                 $('.js_slider_tab ul').slick({
  286.                     autoplay: true,
  287.                     autoplaySpeed: 3000,
  288.                     speed: 800,
  289.                     arrows: true,
  290.                     slidesToShow: 2,
  291.                     slidesToScroll: 1,
  292.                     centerMode: true,
  293.                 });
  294.                 $('.js_slider_service ul').slick({
  295.                     speed: 1500,
  296.                     slidesToShow: 1,
  297.                     slidesToScroll: 1,
  298.                     centerMode: true,
  299.                     centerPadding: "30%",
  300.                     asNavFor: '.js_thumbnail_box ul',
  301.                     swipeToSlide: false
  302.                 });
  303.                 $('.js_thumbnail_box ul').slick({
  304.                     slidesToShow: 5,
  305.                     slidesToScroll: 1,
  306.                     asNavFor: '.js_slider_service ul',
  307.                     focusOnSelect: true,
  308.                 });
  309.             } else {
  310.                 $('.js_sp_slider ul').slick({
  311.                     autoplay: true,
  312.                     autoplaySpeed: 3000,
  313.                     speed: 800,
  314.                     arrows: false,
  315.                     slidesToShow: 1,
  316.                     slidesToScroll: 1,
  317.                     centerMode: true,
  318.                     dots: true,
  319.                     variableWidth: true,
  320.                 });
  321.             }
  322.         });
  323.     </script>
  324. </main>
  325. {% endblock %}