app/template/osechi/Drive/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'product_page' %}
  3. {% block javascript %}
  4. <script src="{{ asset('assets/js/lazyload.min.js') }}"></script> 
  5. <script>
  6. $(function(){
  7.     api_url="{{ url('products_calendar_infomation') }}";
  8.     calendar_start_date="{{ calendar_start_date }}";
  9.     calendar_end_date="{{ calendar_end_date }}";
  10.     $('.ec-topicpath a').on('click',function(){
  11.         $('.ec-topicpath div').removeClass('active');
  12.         $(this).parent().addClass('active');
  13.         tid=$(this).attr('id');
  14.          if('all' == tid) {
  15.              $('.ec-shelfRole.list').show();
  16.          } else {
  17.             $('.ec-shelfRole.list').hide();
  18.             $('.ec-shelfRole.list#'+tid).show();
  19.          }
  20.     });
  21.     $("img.lazy").lazyload();
  22. });
  23. </script>
  24.     <script src="//unpkg.com/flatpickr"></script>
  25.     <!-- 日本語の言語ファイル -->
  26.     <script src="//unpkg.com/flatpickr/dist/l10n/ja.js"></script>
  27.     <script src="{{ asset('assets/js/drive.js') }}?{{ env('JS_PARAM') }}"></script>
  28.     <script src="{{ asset('assets/js/rental_common.js') }}?{{ env('JS_PARAM') }}"></script>
  29. {% endblock %}
  30. {% block stylesheet %}
  31.     <link rel="stylesheet" href="//unpkg.com/flatpickr/dist/flatpickr.min.css">
  32.     <!-- カスタムテーマ -->
  33.     <link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
  34.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
  35.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  36.     <link rel="stylesheet" href="{{ asset('assets/css/common.css') }}?{{ env('CSS_PARAM') }}">
  37.     <link rel="stylesheet" href="{{ asset('assets/css/drive.css') }}?{{ env('CSS_PARAM') }}">
  38. {% endblock %}
  39. {% set ProductsSuperCar = 
  40.     [
  41.         11,
  42.         13,
  43.         2,
  44.         12,
  45.         25,
  46.         30,
  47.         5,
  48.         1,
  49.         35,
  50.         34,
  51.         6,
  52.         9,
  53.         8,
  54.         7,
  55.         33
  56.     ]
  57. %}
  58. {% block main %}
  59. <div class="ec-layoutRole__contents">
  60.     <main class="ec-layoutRole__main">
  61.         <form name="form1" id="form1" method="get" action="?">
  62.             <input type="hidden" id="mode" name="mode">
  63.             <input type="hidden" id="category_id" name="category_id">
  64.             <input type="hidden" id="name" name="name">
  65.             <input type="hidden" id="pageno" name="pageno">
  66.             <input type="hidden" id="disp_number" name="disp_number" value="20">
  67.             <input type="hidden" id="orderby" name="orderby" value="1">
  68.         </form>
  69.         <!-- ▼ カテゴリヘッド -->
  70.         <div class="ec-categoryHeadRole">
  71.             <div class="ec-categoryHeadRole__image" style="display: block;">
  72.                 <picture>
  73.                     <source media="(max-width:767px)" srcset="{{ asset('assets/img/drive/drive_sp.webp') }}">
  74.                     <source media="(min-width:768px)" srcset="{{ asset('assets/img/drive/drive_pc.webp') }}">
  75.                     <img src="{{ asset('assets/img/drive/drive_pc.webp') }}" alt="CAR RENTAL">
  76.                 </picture>
  77.             </div>
  78.             <div class="ec-categoryHeadRole__content">
  79.                 <h1 class="title">Car Experience</h1>
  80.                 <div class="description">
  81.                     <p>
  82. Explore landmarks in diverse vehicles, from 1950s Porsches to modern supercars, on a passenger-seat photo tour of Tokyo. Ideal for guests without an International Driving Permit (IDP).
  83.                     </p>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.         <!-- ▲ カテゴリヘッド -->
  88.         <section class="ec-categoryHeadRole" id="prefixmenu"
  89. >
  90.             <div>
  91.             <h2>Prefix Menu</h2>
  92.             <div class="description">
  93.                 <p>
  94. Choose from three flexible driving courses, customizable to your preferences. Option for a professional photographer available.
  95.                 </p>
  96.             </div>
  97.             </div>
  98.             <div class="container service">
  99.                 <div class="item">
  100.                     <p class="main-title">Heritage</p>
  101.                     <div class="sliderArea">
  102.                         <div class="regular slider">
  103.                             <div>
  104.                                 <img src="{{ asset('assets/img/drive/01-00.webp') }}" alt="Heritage">
  105.                                 <p class="title"> </p>
  106.                                 <p class="note">
  107. Immerse yourself in Japan's traditions and spiritual culture. Visit iconic landmarks like the Tokyo Tower and renowned temples, with chances for memorable photos. Optionally, engage in a traditional tea ceremony experience.
  108.                                 </p>
  109.                             </div>
  110.                             <div><img src="{{ asset('assets/img/drive/01-01.webp') }}" alt="Odaiba">
  111.                                 <p class="title"><span>Tokyo Tower</span></p>
  112.                                 <p class="note">
  113. Tokyo Tower is a prominent tourist attraction in Tokyo, standing at a height of 333 meters. Completed in 1958, it is renowned for offering breathtaking night views. Embraced as a symbol of Tokyo, it conveys the vibrancy and history of the city to visitors, making it a beloved landmark.
  114.                                 </p>
  115.                             </div>
  116.                             <div><img src="{{ asset('assets/img/drive/01-02.webp') }}" alt="Hie Shrine">
  117.                                 <p class="title"><span>Hie Shrine</span></p>
  118.                                 <p class="note">
  119. Hie Shrine is a place deeply rooted in Japan's history and traditions. With its beautiful torii gates and solemn atmosphere, it provides visitors with a serene moment. Wrapped in a sacred air and historical significance, Hie Shrine has become a focal point of many faiths.
  120.                                 </p>
  121.                             </div>
  122.                             <div><img src="{{ asset('assets/img/drive/01-03.webp') }}" alt="Kanda Myojin Shrine">
  123.                                 <p class="title"><span>Kanda Myojin Shrine</span></p>
  124.                                 <p class="note">
  125. Known as the guardian deity of Samurai, it gained widespread reverence among warriors during the Edo period. Within its precincts, there are various blessings, such as the ""on'na-zuka"" for memorializing departed children and ""Ebisu-san"" for prosperity in business.
  126.                                 </p>
  127.                             </div>
  128.                             <div><img src="{{ asset('assets/img/drive/01-04.webp') }}" alt="Kabukiza">
  129.                                 <p class="title"><span>Kabukiza</span></p>
  130.                                 <p class="note">
  131. Situated in Tokyo's Ginza district, Kabukiza Theatre is renowned for traditional Japanese Kabuki performances. With its striking architecture, elaborate costumes, and unique acting, it stands as a cultural symbol, drawing tourists and enthusiasts from around the world.
  132.                                 </p>
  133.                             </div>
  134.                             <div><img src="{{ asset('assets/img/drive/01-05.webp') }}" alt="Kagurazaka">
  135.                                 <p class="title"><span>Kagurazaka</span></p>
  136.                                 <p class="note">
  137. This historic town retains its Edo-period charm with cobblestone pathways and traditional streets. Lined with retro shops, izakayas, eateries, and art galleries, it offers a serene ambiance by day and a vibrant izakaya scene at night.
  138.                                 </p>
  139.                             </div>
  140.                             <div><img src="{{ asset('assets/img/drive/01-06.webp') }}" alt="Akasaka Classic House">
  141.                                 <p class="title"><span>Akasaka Classic House</span></p>
  142.                                 <p class="note">
  143. A esignated Tangible Cultural Property, showcases Tudor Revival architecture with its spire arches. Amidst Tokyo's dynamic cityscape, it stands as a serene haven, marked by its elegant contrast of beige and dark brown wood. Located in central Tokyo, it offers a unique, tranquil escape.
  144.                                 </p>
  145.                             </div>
  146.                             <div><img src="{{ asset('assets/img/drive/01-07.webp') }}" alt="Happoen">
  147.                                 <p class="title"><span>Happoen</span></p>
  148.                                 <p class="note">
  149. This historical Japanese garden, created by Emperor Showa, boasts a beautiful pond with impressive koi, bridges, seasonal flowers, and bonsai. Renowned for its cherry blossoms, it offers tranquility and charm, blending nature with history in the city's heart.
  150.                                 </p>
  151.                             </div>
  152.                         </div>
  153.                     </div>
  154.                   </div>
  155.                 <div class="item">
  156.                     <p class="main-title">Metropolis</p>
  157.                     <div class="sliderArea">
  158.                         <div class="regular slider">
  159.                             <div>
  160.                                 <img src="{{ asset('assets/img/drive/02-03.webp') }}" alt="Metropolis">
  161.                                 <p class="title"> </p>
  162.                                 <p class="note">
  163. Experience Tokyo's unique blend, where modern urban advancements and historic districts coexist with vibrant subcultures. This tour showcases the seamless fusion of the city's contemporary and traditional facets.
  164.                                 </p>
  165.                             </div>
  166.                             <div>
  167.                                 <img src="{{ asset('assets/img/drive/02-01.webp') }}" alt="National Diet Building">
  168.                                 <p class="title"><span>Houses of Parliament</span></p>
  169.                                 <p class="note">
  170. Where Japan's legislature convenes, features a large, circular structure combining traditional Japanese and modern elements. Its grand front staircase symbolizes the country's political epicenter, offering visitors a sense of its importance.
  171.                                 </p>
  172.                             </div>
  173.                             <div>
  174.                                 <img src="{{ asset('assets/img/drive/02-02.webp') }}" alt="Tokyo Station">
  175.                                 <p class="title"><span>Tokyo Station</span></p>
  176.                                 <p class="note">
  177. Tokyo Station, a major transport hub in Japan's capital, links domestic and international routes. Famous for its historic red brick design, it serves as a central point for various train lines, including the Shinkansen, in Japan's extensive railway system.
  178.                                 </p>
  179.                             </div>
  180.                             <div>
  181.                                 <img src="{{ asset('assets/img/drive/02-00.webp') }}" alt="Rainbow Bridge">
  182.                                 <p class="title"><span>Rainbow Bridge</span></p>
  183.                                 <p class="note">
  184. Spanning Tokyo Bay, this stunning suspension bridge is a Tokyo landmark. 798 meters long, it features a white coating that glows with night illuminations, offering breathtaking views of the bay and cityscape.
  185.                                 </p>
  186.                             </div>
  187.                             <div>
  188.                                 <img src="{{ asset('assets/img/drive/02-04.webp') }}" alt="Tokyo Sky Tree">
  189.                                 <p class="title"><span>Tokyo Sky Tree</span></p>
  190.                                 <p class="note">
  191. A super-tall radio tower and tourist attraction, opened in 2012 as Japan's tallest structure at 634 meters. Renowned as Tokyo's new symbol, it offers panoramic views from its observation deck, including the Tokyo cityscape and distant Mount Fuji.
  192.                                 </p>
  193.                             </div>
  194.                             <div>
  195.                                 <img src="{{ asset('assets/img/drive/02-05.webp') }}" alt="Tokyo Metropolitan Government Office">
  196.                                 <p class="title"><span>Tokyo Metropolitan Government Office</span></p>
  197.                                 <p class="note">
  198. Located in Shinjuku and designed by Kenzo Tange, this twin-tower building stands at 243 meters and houses Tokyo's administrative functions. It offers free observation decks for panoramic city views and Mount Fuji sightings.
  199.                                 </p>
  200.                             </div>
  201.                             <div>
  202.                                 <img src="{{ asset('assets/img/drive/02-06.webp') }}" alt="Daikoku Pier">
  203.                                 <p class="title"><span>Daikoku Pier</span></p>
  204.                                 <p class="note">
  205. Daikoku Wharf in Tokyo Bay features container and cruise terminals and leisure spots, serving as a maritime hub. Nearby, Daikoku PA becomes a car enthusiast's dream, resembling a car museum with diverse vehicles on evenings and weekends.
  206.                                 </p>
  207.                             </div>
  208.                             <div>
  209.                                 <img src="{{ asset('assets/img/drive/02-07.webp') }}" alt="Tatsumi PA">
  210.                                 <p class="title"><span>Tatsumi PA</span></p>
  211.                                 <p class="note">
  212. You can relish the night view of the surrounding urban areas. As darkness descends, nearby skyscrapers illuminate, forming a stunning cityscape. Similar to Daikoku PA, it's a popular gathering spot for car enthusiasts and classic vehicles.                                </p>
  213.                             </div>
  214.                             <div>
  215.                                 <img src="{{ asset('assets/img/drive/02-08.webp') }}" alt="Minato Mirai">
  216.                                 <p class="title"><span>Minato Mirai</span></p>
  217.                                 <p class="note">
  218. This area features a scenic waterfront, skyscrapers, malls, museums, and a Ferris wheel, creating an urban resort. Landmarks like Yokohama Tower and Queen's Square offer diverse activities for tourists and locals.
  219.                                 </p>
  220.                             </div>
  221.                         </div>
  222.                     </div>
  223.                   </div>
  224.                 <div class="item">
  225.                     <p class="main-title">Nature Escape</p>
  226.                     <div class="sliderArea">
  227.                         <div class="regular slider">
  228.                             <div>
  229.                                 <img src="{{ asset('assets/img/drive/03-08.webp') }}" alt="Nature Escape">
  230.                                 <p class="title"> </p>
  231.                                 <p class="note">
  232. While the metropolis "Tokyo" is developing, you will experience the "nature" left in the city. We have prepared points that Japanese people living in Tokyo visit in search of relaxation.This course will take you one step further from "Visiting famous places."
  233.                                 </p>
  234.                             </div>
  235.                             <div>
  236.                                 <img src="{{ asset('assets/img/drive/03-09.webp') }}" alt="Jingu Gaien">
  237.                                 <p class="title"><span>Jingu Gaien</span></p>
  238.                                 <p class="note">
  239. This area, renowned for its vibrant autumn ginkgo leaves and springtime blossoms, allows visitors to experience Japan's seasonal beauty year-round. On weekends, it also attracts car enthusiasts, making it a popular photography location.
  240.                                 </p>
  241.                             </div>
  242.                             <div>
  243.                                 <img src="{{ asset('assets/img/drive/03-02.webp') }}" alt="Shinjuku Gyoen National Garden">
  244.                                 <p class="title"><span>Shinjuku Gyoen National Garden</span></p>
  245.                                 <p class="note">
  246. This historic garden beautifully blends nature and tradition. With diverse plants and seasonal blooms, it's a serene escape with a Japanese garden. Cherry blossom season attracts many, announcing spring's arrival. Ponds, bridges, and a tranquil ambiance help forget the city's hustle.
  247.                                 </p>
  248.                             </div>
  249.                             <div>
  250.                                 <img src="{{ asset('assets/img/drive/03-03.webp') }}" alt="todoroki valley">
  251.                                 <p class="title"><span>todoroki valley</span></p>
  252.                                 <p class="note">
  253. A nature-rich valley in Setagaya Ward, surrounded by streams, bamboo groves, and Japanese gardens. Ideal for forest bathing and trekking, it offers seasonal beauty, especially in spring with fresh greenery and in autumn with colorful foliage.
  254.                                 </p>
  255.                             </div>
  256.                             <div>
  257.                                 <img src="{{ asset('assets/img/drive/03-04.webp') }}" alt="Sumida River">
  258.                                 <p class="title"><span>Sumida River</span></p>
  259.                                 <p class="note">
  260. Sumida River, flowing through Tokyo's heart, is a historic and popular tourist spot, especially during cherry blossom season. It's renowned for its illuminated night views, combining cherry blossoms and modern buildings along its banks.
  261.                                 </p>
  262.                             </div>
  263.                             <div>
  264.                                 <img src="{{ asset('assets/img/drive/03-05.webp') }}" alt="Mizumoto Park">
  265.                                 <p class="title"><span>Mizumoto Park</span></p>
  266.                                 <p class="note">
  267. A beautiful park in Katsushika Ward's downtown area, known for its rich nature and diverse plant life, including ponds of various sizes and seasonal blooms. It's a popular spot for wedding photos and other special life events.
  268.                                 </p>
  269.                             </div>
  270.                             <div>
  271.                                 <img src="{{ asset('assets/img/drive/03-06.webp') }}" alt="Ueno park">
  272.                                 <p class="title"><span>Ueno park</span></p>
  273.                                 <p class="note">
  274. Historic urban oasis with diverse facilities and natural beauty, including Ueno Park, Tokyo National Museum, Tokyo University of the Arts, a zoo, and more, offering cultural and natural experiences. Known for seasonal flowers and cherry blossoms, it's a popular tourist destination.
  275.                                 </p>
  276.                             </div>
  277.                             <div>
  278.                                 <img src="{{ asset('assets/img/drive/03-07.webp') }}" alt="Kinuta Park">
  279.                                 <p class="title"><span>Kinuta Park</span></p>
  280.                                 <p class="note">
  281. A serene oasis known for cherry blossom viewing, Kinuta Park offers green spaces, ponds, and a perfect setting for outdoor activities and photography. It's a must-visit for cherry blossom enthusiasts and those seeking a peaceful escape
  282.                                 </p>
  283.                             </div>
  284.                         </div>
  285.                     </div>
  286.                   </div>
  287.             </div>
  288.         </section>
  289.         <!-- ▼ 商品一覧 -->
  290.         <div class="ec-shelfRole list anchor" id="supercar">
  291.             <div class="category-title appearEffect">
  292.                 <h2>Car Lineup</h2>
  293.             </div>
  294.             <details class="accordion-006 filter appearEffect" open>
  295.                 <summary>Filter available cars by date</summary>
  296.                 <input type="text" name="datepicker" placeholder="{{ calendar_start_date }}" id="fromCal" class="Form-Item-Input">~<input type="text" name="datepicker"  placeholder="{{ calendar_start_date }}" id="toCal" class="Form-Item-Input">
  297.                 <button class="button btn-clear">×</button>
  298.                 <div>
  299.                 <button class="button btn-search loading">Search</button>
  300.                 </div>
  301.             </details>
  302.             <div id="overlay">
  303.               <div class="cv-spinner">
  304.                 <span class="spinner"></span>
  305.               </div>
  306.             </div>
  307.             <ul class="ec-shelfGrid col_max5 ready product">
  308. {% for id in ProductsSuperCar %}
  309. {% set course = products[id].item14 | json_decode %}
  310.                 <!-- ▼ 商品単位 -->
  311.                 <li class="ec-shelfGrid__item" id="product-{{ products[id].id }}" data-id="{{ products[id].item13 }}">
  312.                     <div class="ec-productItemRole appearEffect">
  313.                         <div class="ec-productItemRole__image">
  314.                             <a href="{{ url('drive_detail', {'id': products[id].id}) }}" class="">
  315.                                 <img data-src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}" class="lazy">
  316.                                 <span class="status-icon">unavailable</span>
  317.                             </a>
  318.                         </div>
  319.                         <div class="ec-productItemRole__content">
  320.                             <h3 class="ec-productItemRole__title"><span>{{ products[id].name }}</span></h3>
  321.                             <div class="ec-price"> <span class="ec-price__price">&yen;{{ course.20|number_format }}~</span></div>
  322.                         </div>
  323.                     </div>
  324.                 </li>
  325.                 <!-- ▲ 商品単位 -->
  326. {% endfor %}
  327.             </ul>
  328.         </div>
  329.         <div class="ec-pagerRole"> </div>
  330.         <!-- ▲ 商品一覧 -->
  331. </div>
  332. {% endblock %}