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 main %}
  16.   <div class="top">
  17.     <div class="slider-box">
  18.       <div class="slider">
  19.         <div class=""><img src="/html/user_data/assets/img/top/slider1.jpg"></div>
  20.         <div class=""><img src="/html/user_data/assets/img/top/slider2.jpg"></div>
  21.         <div class=""><img src="/html/user_data/assets/img/top/slider3.jpg"></div>
  22.         <div class=""><img src="/html/user_data/assets/img/top/slider4.jpg"></div>
  23.       </div>
  24.       <div class="scroll-wrapper">
  25.         <div class="text">scroll</div>
  26.         <div class="line"></div>
  27.       </div>
  28.     </div>
  29.     <div class="sect1 j-fadein">
  30.       <div class="content">
  31.         <div class="left">
  32.           <img src="/html/user_data/assets/img/top/top1.jpg" class="pc">
  33.           <img src="/html/user_data/assets/img/top/top1_sp.jpg" class="sp">
  34.         </div>
  35.         <div class="right">
  36.           <img class="pc" src="/html/user_data/assets/img/top/top2.png">
  37.           <img class="sp" src="/html/user_data/assets/img/top/top2_sp.svg">
  38.         </div>
  39.       </div>
  40.       <div class="concept">
  41.         <img src="/html/user_data/assets/img/top/concept.svg">
  42.       </div>
  43.     </div>
  44.     <div class="sect2 j-fadein">
  45.       <div class="content1">
  46.         <div class="left">
  47.           <img src="/html/user_data/assets/img/top/top3.jpg">
  48.         </div>
  49.         <div class="right">
  50.           <img src="/html/user_data/assets/img/top/top4.jpg">
  51.         </div>
  52.       </div>
  53.       <div class="content2">
  54.         <img class="pc" src="/html/user_data/assets/img/top/top5.png">
  55.         <img class="sp" src="/html/user_data/assets/img/top/top5_sp.png">
  56.       </div>
  57.     </div>
  58.     <div class="sect3 j-fadein">
  59.       <div class="head">
  60.         <img src="/html/user_data/assets/img/top/menu.svg">
  61.       </div>
  62.       <div class="body">
  63.         <div class="item-row">
  64.           <div class="item">
  65.             <div class="image">
  66.               <div class="overlay-text">
  67.                 <div>お好みに合うように幅広いラインナップをご用意。特にチョコにこだわり、厳選したカカオを使用。酸味のあるもの苦味のあるものなどさまざま。</div>
  68.               </div>
  69.               <img src="/html/user_data/assets/img/top/item1.jpg" />
  70.             </div>
  71.             <div class="category">
  72.               <div class="en">petit gateau</div>
  73.               <div class="ja">プチガトー</div>
  74.               <div class="arrow"><img src="/html/user_data/assets/img/top/category_arrow.svg" /></div>
  75.             </div>
  76.           </div>
  77.           <div class="item">
  78.             <div class="image">
  79.               <div class="overlay-text">
  80.                 <div>フルーツをふんだんに、贅沢に使用したものやスフレ、タルトも。バースデーケーキなどご要望に応じたデコレーションも可能です。</div>
  81.               </div>
  82.               <img src="/html/user_data/assets/img/top/item2.jpg" />
  83.             </div>
  84.             <div class="category">
  85.               <div class="en">hallcake</div>
  86.               <div class="ja">ホールケーキ</div>
  87.               <div class="arrow"><img src="/html/user_data/assets/img/top/category_arrow.svg" /></div>
  88.             </div>
  89.           </div>
  90.         </div>
  91.         <div class="item-row">
  92.           <div class="item">
  93.             <div class="image">
  94.               <div class="overlay-text">
  95.                 <div>マドレーヌ、パウンドケーキ、クッキー…など、多彩な焼き菓子のサクサク、カリカリ、しっとりといったそれぞれの食感を愉しんでください。</div>
  96.               </div>
  97.               <img src="/html/user_data/assets/img/top/item3.jpg" />
  98.             </div>
  99.             <div class="category">
  100.               <div class="en">fours sec</div>
  101.               <div class="ja">焼き菓子</div>
  102.               <div class="arrow"><img src="/html/user_data/assets/img/top/category_arrow.svg" /></div>
  103.             </div>
  104.           </div>
  105.           <div class="item">
  106.             <div class="image">
  107.               <div class="overlay-text">
  108.                 <div>大小さまざまなサイズのボックスがあります。用途に応じて訪問先への手土産や差し入れ、ティータイムを愉しむ際のお供にご活用ください。</div>
  109.               </div>
  110.               <img src="/html/user_data/assets/img/top/item4.jpg" />
  111.             </div>
  112.             <div class="category">
  113.               <div class="en">gift</div>
  114.               <div class="ja">おくりもの</div>
  115.               <div class="arrow"><img src="/html/user_data/assets/img/top/category_arrow.svg" /></div>
  116.             </div>
  117.           </div>
  118.         </div>
  119.       </div>
  120.     </div>
  121.     <div class="sect4 j-fadein">
  122.       <div class="content">
  123.         <div class="head">
  124.           <img src="/html/user_data/assets/img/top/news.svg">
  125.           <div class="instagram"><a href="https://www.instagram.com/patisserie_lazry/?hl=ja"><img src="/html/user_data/assets/img/top/instagram.svg" /></a></div>
  126.         </div>
  127.         <div class="body" id="InstagramFeed">
  128.         </div>
  129.       </div>
  130.     </div>
  131.     <div class="sect5 j-fadein">
  132.       <div class="head">
  133.         <img src="/html/user_data/assets/img/top/shop_info.svg">
  134.       </div>
  135.       <div class="body">
  136.         <div class="slider pc">
  137.           <img src="/html/user_data/assets/img/top/shop_info_slider.jpg"><img src="/html/user_data/assets/img/top/shop_info_slider.jpg">
  138.           <div class="overlay-text"><img src="/html/user_data/assets/img/top/shop_info_overlay_text.svg"></div>
  139.         </div>
  140.         <div class="slider sp">
  141.           <div class="slider-sp-box">
  142.             <div><img src="/html/user_data/assets/img/top/shop_info_slider_sp1.jpg"></div>
  143.             <div><img src="/html/user_data/assets/img/top/shop_info_slider_sp2.jpg"></div>
  144.             <div><img src="/html/user_data/assets/img/top/shop_info_slider_sp3.jpg"></div>
  145.             <div><img src="/html/user_data/assets/img/top/shop_info_slider_sp4.jpg"></div>
  146.           </div>
  147.           <div class="overlay-text"><img src="/html/user_data/assets/img/top/shop_info_overlay_text.svg"></div>
  148.         </div>
  149.         <div class="shop-info">
  150.           <div class="border-left"><img src="/html/user_data/assets/img/top/shop_info_border_left.svg"></div>
  151.           <div class="border-top"><img src="/html/user_data/assets/img/top/shop_info_border_top.svg"></div>
  152.           <div class="left">
  153.             <img src="/html/user_data/assets/img/common/logo.svg">
  154.           </div>
  155.           <div class="right">
  156.             <div class="shop-name-ja">パティスリー ラズリー</div>
  157.             <div class="shop-name-en">Pâtisserie Lazry</div>
  158.             <div class="shop-info-box">
  159.               <div class="shop-info-row">
  160.                 <div class="header">Open</div> 
  161.                 <div class="colon">：</div> 
  162.                 <div class="cell">10：00&nbsp;～&nbsp;19：00</div> 
  163.               </div>
  164.               <div class="shop-info-row">
  165.                 <div class="header">Close</div> 
  166.                 <div class="colon">：</div> 
  167.                 <div class="cell">毎週月曜日・火曜日</div> 
  168.               </div>
  169.               <div class="shop-info-row">
  170.                 <div class="header">Tel</div> 
  171.                 <div class="colon">：</div> 
  172.                 <div class="cell"><span class="tel-link">0566-28-6778</span></div> 
  173.               </div>
  174.               <div class="shop-info-row">
  175.                 <div class="header">Access</div> 
  176.                 <div class="colon">：</div> 
  177.                 <div class="cell">愛知県刈谷市半城土中町<span class="sp">2丁目28-17</span><span class="walk">〈 野田新町駅 南口から<span class="sp">徒歩約21分 〉</span></span></div> 
  178.               </div>
  179.               <div class="shop-info-row">
  180.                 <div class="header">Parking</div> 
  181.                 <div class="colon">：</div> 
  182.                 <div class="cell">7台</div> 
  183.               </div>
  184.             </div>
  185.           </div>
  186.           <div class="border-right"><img src="/html/user_data/assets/img/top/shop_info_border_right.svg"></div>
  187.           <div class="border-bottom"><img src="/html/user_data/assets/img/top/shop_info_border_bottom.svg"></div>
  188.         </div>
  189.         <div class="map">
  190.           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3269.162256748827!2d137.01397351572967!3d34.97760028036443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60049c864414008d%3A0x93653c94b69c92f6!2z44CSNDQ4LTA4MDUg5oSb55-l55yM5YiI6LC35biC5Y2K5Z-O5Zyf5Lit55S677yS5LiB55uu77yS77yY4oiS77yR77yX!5e0!3m2!1sja!2sjp!4v1606205461457!5m2!1sja!2sjp" width="100%" height="356" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  191.         </div>
  192.       </div>
  193.     </div>
  194.     <div class="sect6 j-fadein">
  195.       <div class="back-image">
  196.         <img class="pc" src="/html/user_data/assets/img/top/back_contact.jpg">
  197.         <img class="sp" src="/html/user_data/assets/img/top/back_contact_sp.jpg">
  198.       </div>
  199.       <div class="body">
  200.         <div>
  201.           <a href="/contact">
  202.             <div class="en"><img src="/html/user_data/assets/img/top/contact_us_en.svg" class="pc"><img src="/html/user_data/assets/img/top/contact_us_en_sp.svg" class="sp"></div>
  203.             <div class="ja"></div>
  204.           </a>
  205.         </div>
  206.       </div>
  207.     </div>
  208.   </div>
  209. {% endblock %}
  211. {% block javascript %}
  212.     <script src="/html/user_data/assets/js/InstagramFeed.min.js"></script>
  213.     <script>
  214.         $(function() {
  215.             //メインスライダー
  216.             $('.ec-layoutRole .ec-layoutRole__contents .slider-box .slider').slick({
  217.                 dots: true,
  218.                 arrows: false,
  219.                 autoplay: true,
  220.                 speed: 2000,
  221.                 lazyLoad: 'progressive',
  222.                 fade: true
  223.             });
  224.             $('.ec-layoutRole .ec-layoutRole__contents .sect5 .body .slider.sp .slider-sp-box').slick({
  225.               slidesToShow: 1,
  226.               slidesToScroll: 1,
  227.               autoplay: true,
  228.               autoplaySpeed: 0,
  229.               speed: 24000,
  230.               arrows: false,
  231.               cssEase: 'linear',
  232.             });
  233.             
  234.             //Menuアニメーション
  235.             $(".item").on("mouseover",function(e){
  236.               $(this).find(".overlay-text").stop(true).animate({
  237.                 top:"0%",
  238.               },1400,"easeOutExpo");
  239.               $(this).find(".image").find("img").stop(true).animate({
  240.                 width:"115%",
  241.                 height:"115%",
  242.               },1400,"linear");
  243.             });
  244.             $(".item").on("mouseleave",function(e){
  245.               $(this).find(".overlay-text").stop(true).animate({
  246.                 top:"-100%",
  247.               },1400,"easeOutExpo");
  248.               $(this).find(".image").find("img").stop(true).animate({
  249.                 width:"100%",
  250.                 height:"100%",
  251.               },1400,"linear");
  252.             });
  254.             //スマホの場合電話番号をリンクにする
  255.             var ua = navigator.userAgent;
  256.             if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
  257.               $('.tel-link').each(function(){
  258.                 var str = $(this).text();
  259.                 $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
  260.               });
  261.             }
  263.             //TOPへ戻るボタン
  264.             $(".top-btn").on("click",function(e){
  265.               $('html,body').animate({'scrollTop': 0}, 500);
  266.             });
  268.             //セクションごとのfadein
  269.             $('.j-fadein').css('opacity', '0.0');
  270.             $(window).scroll(function(){
  271.               var size = $(window).height();
  272.               $('.j-fadein').each(function(){
  273.                 if($(window).scrollTop() > $(this).offset().top - size/2){
  274.                   $(this).animate({opacity: 1.0}, 3000,"swing");
  275.                 }
  276.               });
  277.             });
  278.         });
  279.         (function(){
  280.             new InstagramFeed({
  281.                 'username': 'patisserie_lazry',
  282.                 'container': document.getElementById("InstagramFeed"),
  283.                 'display_profile': false,
  284.                 'display_biography': false,
  285.                 'display_gallery': true,
  286.                 'display_captions': false,
  287.                 'callback': null,
  288.                 'styling': true,
  289.                 'items': 8,
  290.                 'items_per_row': 4,
  291.                 'margin': 1 
  292.             });
  293.         })();
  295.     </script>
  296. {% endblock javascript %}