app/template/daido/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set totalQuantity = get_carts_total_quantity() %}
  4. {% block main %}
  5.   <section class="scrollify" style="position: relative;">
  6.     <!--div id="print" class="scroll-in box box-01" style="display: block;"-->
  7.     <div id="" class="about" style="overflow: hidden;">
  8.       <div class="about_move about_back">
  9.         <h2><img src="/html/template/daido/assets/img/about_tit.png" alt="about"></h2>
  10.         <div class="about_cont">
  11.           <video playsinline autoplay muted loop width="500" height="auto" src="/html/template/daido/assets/mov/top_movie.mp4"></video>
  12.           <style>
  13.             .about_cont video{
  14.               max-width: 40vw;
  15.               margin-top: 2.125rem;
  16.               width: 45%;
  17.             }
  18.           </style>
  19.           <div class="about_txt_wrap">
  20.             <div class="about_txt">
  21.               <span><img src="/html/template/daido/assets/img/about_txt.svg" alt="コンセプトは「個性」"></span>
  22.             </div>
  23.             <div>
  24.               <p>「もっと暮らしの中に<br>あそびゴコロがあってもいい」<br>そんな想いから生まれた、<br>印刷会社の文具ブランド「DAIDO Stationeries」。<br>印刷とあそびゴコロのあるデザインの魅力を<br>「文具」や「雑貨」というカタチで<br>定期的に発信していきます。</p>
  25.             </div>
  26.           </div>
  27.         </div>
  28.       </div>
  29.     </div>
  30.     <div style="width: 100%; max-width: 1860px;position: relative;margin: 0 auto">
  31.       <img class="about_move_hand" src="/html/template/daido/assets/img/about_hand_l.png" alt="" style="position: absolute;bottom:0;left:6.55%; width: 10vw;max-width: 180px; opacity: 0;overflow: hidden;">
  32.       <img class="about_move_hand" src="/html/template/daido/assets/img/about_hand_r.png" alt="" style="position: absolute;bottom:0;right:6.5%; width: 10vw;max-width: 180px; opacity: 0;">
  33.     </div>
  34.   </section>
  35.   <section id="allitems" class="scrollify allitems">
  36.     <div style="width: 100vw; max-width: 1000px; margin: 0 auto;text-align: center;">
  37.       <h2><img src="/html/template/daido/assets/img/allitems_tit.png" alt="" style="margin-top:8rem; margin-bottom: 4rem;"></h2>
  38.       <div class="allitems_gridcont">
  40. {% set Category = repository("Eccube\\Entity\\Category").find(2) %}
  41. {%
  42. set products = repository("Eccube\\Entity\\Product")
  43. .getQueryBuilderBySearchData({'category_id':Category})
  44. .setMaxResults(30)
  45. .getQuery()
  46. .getResult()
  47. %}
  49. {% if products %}
  50.     {% for p in products %}
  51.         {% if p.id == 10 %}
  52.         <div class="allitems_gridcont_item allitems_new">
  53.         {% else %}
  54.         <div class="allitems_gridcont_item">
  55.         {% endif %}
  57.         {% if p.ProductImage|slice(0,1) %}
  58.             {% for ProductImage in p.ProductImage|slice(1,1) %}
  59.           <img src="{{ asset(ProductImage, 'save_image') }}" loading="lazy" alt="{{ p.name }}">
  60.             {% endfor %}
  61.         {% else %}
  62.           <img src="{{ asset('assets/img/stationariery_logo.png') }}" loading="lazy" alt="{{ p.name }}">
  63.         {% endif %}
  65.           <div class="allitems_itemwrap">
  66.             <p>{{ p.name }}</p>
  67.             <div>￥{{ p.getPrice02IncTaxMin ? p.getPrice02IncTaxMin : 0}}<span>(税込)</span></div>
  68.             <a href="{{ url('product_detail', {'id': p.id}) }}"><div class="allitems_linkbtn">詳細はコチラ</div></a>
  69.           </div>
  70.         </div>
  71.     {% endfor %}
  72. {% endif %}
  74.       </div>
  75.     </div>
  76.   </section>
  77.   <section class="making">
  78.     <div class="dino_cont">
  79.       <img src="/html/template/daido/assets/img/making.png" alt="" style="">
  80.       <div class="move_pute" style="position: absolute; top: -5%;left:40%;">
  81.         <div class="pute" style="padding-top: 1rem;"><img src="/html/template/daido/assets/img/making_pute.png" alt=""></div>
  82.       </div>
  83.       <div class="">
  84.         <div class="move_supi">
  85.           <div class="supi" style="position: absolute;bottom: 40px;left: 18%;"><img src="/html/template/daido/assets/img/making_supi.png" alt=""></div>
  86.         </div>
  87.         <div class="move_dhime">
  88.           <div class="dhime" style="position: absolute;bottom:20%; right: 9%;"><img src="/html/template/daido/assets/img/making_dhime.png" alt=""></div>
  89.         </div>
  90.       </div>
  91.     </div>
  92.     <!--仮配置-->
  93.     <div style="display: flex;padding: 2rem;margin: 2rem auto 3rem;justify-content: center;">
  94.       <input type="checkbox" id="popup_1">
  95.       <div style="text-align: center;">
  96.         <label class="popup-open_1" for="popup_1"  style="font-size: 18px; font-weight: 600;color:#fff; background-color:#9C8A78; padding:1rem 2rem;margin: 2rem;">MAKINGムービー_印刷</label>
  97.       </div>
  98.       <div class="popup-overlay_1">
  99.         <div class="popup-window">
  100.           <!--p class="popup-text">ポップアップの中身のテキスト</p-->
  101.           <video playsinline autoplay muted loop width="500" height="auto" src="/html/template/daido/assets/mov/making_printing.mp4"></video>
  102.           <label class="popup-close" for="popup_1">
  103.             <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  104.               <line x1="0" y1="0" x2="18" y2="18" stroke="white" stroke-width="3"></line>
  105.               <line x1="0" y1="18" x2="18" y2="0" stroke="white" stroke-width="3"></line>
  106.             </svg>
  107.           </label>
  108.         </div>
  109.       </div>
  110.       <input type="checkbox" id="popup_2">
  111.       <div style="text-align: center;">
  112.         <label class="popup-open_2" for="popup_2"  style="font-size: 18px; font-weight: 600;color:#fff; background-color:#9C8A78; padding:1rem 2rem;margin: 2rem;">MAKINGムービー_製本</label>
  113.       </div>
  114.       <div class="popup-overlay_2">
  115.         <div class="popup-window">
  116.           <!--p class="popup-text">ポップアップの中身のテキスト</p-->
  117.           <video playsinline autoplay muted loop width="500" height="auto" src="/html/template/daido/assets/mov/making_binding.mp4"></video>
  118.           <label class="popup-close" for="popup_2">
  119.             <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  120.               <line x1="0" y1="0" x2="18" y2="18" stroke="white" stroke-width="3"></line>
  121.               <line x1="0" y1="18" x2="18" y2="0" stroke="white" stroke-width="3"></line>
  122.             </svg>
  123.           </label>
  124.         </div>
  125.       </div>
  126.     </div>
  127.     <style>
  128.       .popup-window video{width: 100%;}
  129.       #popup_1,#popup_2 {
  130.         display: none; /* label でコントロールするので input は非表示に */
  131.       }
  132.       .popup-open_1,.popup-open_2 {
  133.         cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  134.       }
  135.       .popup-overlay_1,.popup-overlay_2 {
  136.         display: none; /* input にチェックが入るまでは非表示に */
  137.       }
  138.       #popup_1:checked ~ .popup-overlay_1 {
  139.         display: block;
  140.         z-index: 99999;
  141.         background-color: #00000070;
  142.         position: fixed;
  143.         width: 100%;
  144.         height: 100vh;
  145.         top: 0;
  146.         left: 0;
  147.       }
  148.       #popup_2:checked ~ .popup-overlay_2 {
  149.         display: block;
  150.         z-index: 99999;
  151.         background-color: #00000070;
  152.         position: fixed;
  153.         width: 100%;
  154.         height: 100vh;
  155.         top: 0;
  156.         left: 0;
  157.       }
  158.       .popup-window {
  159.         width: 90vw;
  160.         max-width: 800px;
  161.         padding: 20px;
  162.         background-color: #ffffff;
  163.         border-radius: 6px;
  164.         position: fixed;
  165.         top: 50%;
  166.         left: 50%;
  167.         transform: translate(-50%, -50%);
  168.       }
  169.       .popup-text {
  170.         margin: 0;
  171.       }
  172.       .popup-text:not(:last-of-type) {
  173.         margin-bottom: 1em
  174.       }
  175.       .popup-close {
  176.         cursor: pointer;
  177.         position: absolute;
  178.         top: -26px;
  179.         right: 0;
  180.       }
  181.     </style>
  182.     <!-------->
  183.   </section>
  184.   <section id="gallaly" class="gallary" style="background-color: #f5f5eb;position: relative;z-index:0; padding: 3.125rem 0 ;">
  185.     <div style="width: 100vw;max-width: 1000px; margin: 0 auto;text-align: center;">
  186.       <h2><img src="/html/template/daido/assets/img/gallary_tit.png" alt=""></h2>
  187.       <div class="gallary_gridcont">
  188.         <div class="gallary_item_1 gallary_gridcont_item" style="padding:20px;text-align: center;">
  189.           <a href="https://www.instagram.com/sapporodaido/" target="_blank" style="z-index: 1">
  190.             <img src="/html/template/daido/assets/img/gallary_photo1.png" alt="" style="width: 100%;">
  191.           </a>
  192.         </div>
  193.         <div class="gallary_item_2 gallary_gridcont_item" style="padding:20px;text-align: center;">
  194.           <a href="https://www.instagram.com/sapporodaido/" target="_blank" style="z-index: 1">
  195.             <img src="/html/template/daido/assets/img/gallary_photo2.png" alt="" style="width: 100%;">
  196.           </a>
  197.         </div>
  198.         <div class="gallary_item_3 gallary_gridcont_item" style="padding:20px;text-align: center;">
  199.           <a href="https://www.instagram.com/sapporodaido/" target="_blank" style="z-index: 1">
  200.             <img src="/html/template/daido/assets/img/gallary_photo3.png" alt="" style="width: 100%;">
  201.           </a>
  202.         </div>
  203.       </div>
  204.       <div style="margin:50px 0;">
  205.         <a href="https://www.instagram.com/sapporodaido/" target="_blank" style="z-index: 1">
  206.           <img src="/html/template/daido/assets/img/gallary_btn.png" alt="大同印刷Instagram">
  207.         </a>
  208.       </div>
  209.     </div>
  210.   </section>
  211.   <section class="re-top_cont">
  212.     <div class="tako"><span></span></div>
  213.     <a class="re-top" href="#top">
  214.       <img style="width: 100px;" src="/html/template/daido/assets/img/return_top.png" alt="トップに戻る">
  215.     </a>
  216.   </section>
  217. {% endblock %}