templates/used_car_inspection/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Prověření historie vozidla online | Autanet.cz{% endblock %}
  4. {% block meta_description %}
  5.     <meta name="description"
  6.           content="Prověřte si ojeté auto před koupí a odhalte skutečně najeté kilometry, historii poškození, odcizení vozidla, servisní historii, záznamy inzerce, využití jako taxi a další.">
  7. {% endblock %}
  9. {% block javascripts %}
  10.     {{ parent() }}
  11.         <script>
  12.             document.addEventListener('DOMContentLoaded', function () {
  13.                 {% if vehicle %}
  14.                 const vehicleInspection = document.getElementById('vehicle-inspection');
  15.                 if (vehicleInspection) {
  16.                     setTimeout(function () {
  17.                         const headerHeight = document.querySelector('header') ? document.querySelector('header').offsetHeight : 0;
  18.                         const elementPosition = vehicleInspection.getBoundingClientRect().top + window.scrollY;
  19.                         const offsetPosition = elementPosition - headerHeight - 20;
  20.                         window.scrollTo({
  21.                             top: offsetPosition,
  22.                             behavior: 'smooth'
  23.                         });
  24.                     }, 100);
  25.                 }
  26.                 {% endif %}
  28.                 const vinElement = $('#vin');
  29.                 vinElement.on('input', function () {
  30.                     let inputLength = $(this).val().length;
  31.                     if (inputLength > 17) {
  32.                         $(this).val($(this).val().substring(0, 17));
  33.                         inputLength = 17;
  34.                     }
  35.                     $('.js-pricelist__form-counter').text(inputLength + ' / 17 znaků');
  36.                 });
  38.                 $('.js-vin-form').on('submit', function(e) {
  39.                     const vinInput = $('#vin');
  40.                     const errorTooltip = $('.js-vin-tooltip');
  41.                     const errorTooltipContent = errorTooltip.find('.js-pricelist__tooltip-content');
  43.                     if (vinInput.val().length !== 17) {
  44.                         e.preventDefault();
  45.                         errorTooltipContent.addClass('active');
  46.                         errorTooltipContent.text('VIN kód musí mít přesně 17 znaků').fadeIn();
  48.                         setTimeout(function () {
  49.                             errorTooltipContent.removeClass('active');
  50.                             errorTooltipContent.fadeOut();
  51.                         }, 4000);
  52.                     }
  53.                 });
  55.                 vinElement.on('input', function() {
  56.                     $('.js-pricelist__tooltip').removeClass('active');
  57.                     $('.js-pricelist__tooltip-content').fadeOut();
  58.                 });
  60.                 $('.js-pricelist__tooltip').on('click', function () {
  61.                     const $tooltipContent = $(this).find('.js-pricelist__tooltip-content');
  62.                     $tooltipContent.stop(true, true).fadeIn();
  64.                     setTimeout(function () {
  65.                         $tooltipContent.fadeOut();
  66.                     }, 4000);
  67.                 });
  69.                 const form = document.getElementById('vinForm');
  70.                 form.addEventListener('submit', function(e) {
  71.                     e.preventDefault();
  72.                     const formData = new FormData(form);
  74.                     fetch('{{ path('verify_vin') }}', {
  75.                         method: 'POST',
  76.                         body: formData,
  77.                         headers: {
  78.                             'X-Requested-With': 'XMLHttpRequest'
  79.                         }
  80.                     })
  81.                         .then(response => response.json())
  82.                         .then(data => {
  83.                             if (data.success) {
  84.                                 window.open(data.redirect, '_blank');
  85.                             } else {
  86.                                 alert(data.error);
  87.                             }
  88.                         })
  89.                         .catch(error => {
  90.                             console.error('Error:', error);
  91.                         });
  92.                 });
  93.             });
  94.         </script>
  95. {% endblock %}
  97. {% block body %}
  99.     <div class="pricelist">
  100.         <div class="pricelist__container">
  101.             <div class="pricelist__online">
  102.                 <h1 style="font-size: 24px; margin-bottom: 0;">
  103.                     Prověření historie vozidla online
  104.                 </h1>
  105.                 <div class="pricelist__online-button">On-line <span class="pricelist__online-button-green">24/7</span>
  106.                 </div>
  107.             </div>
  108.             
  109.             <form class="pricelist__form js-vin-form" action="{{ path('verify_vin') }}" method="POST" id="vinForm">
  110.                 <label for="vin">
  111.                     Zadejte 17místný VIN kód.
  112.                 </label>
  113.                 <div class="pricelist__form-row">
  114.                     <input type="text" placeholder="Zadejte VIN" id="vin" name="vin" maxlength="17" required>
  115.                     <span class="pricelist__form-counter js-pricelist__form-counter">0 / 17 znaků</span>
  116.                     <button class="pricelist__button" type="submit">Prověřit</button>
  117.                 </div>
  118.                 <div class="js-pricelist__tooltip js-vin-tooltip">
  119.                     <div class="js-pricelist__tooltip-content"></div>
  120.                 </div>
  121.             </form>
  122.             
  123.             <div class="pricelist__info">
  124.                 <i class="icon icon-corner-down-right"></i>
  125.                 <p><strong>U vozidel se prověřují:</strong> najeté kilometry, historie poškození, odcizení vozidla, servisní historie, záznamy inzerce, využití jako taxi a další. Přehled dostupných informací zdarma po kliknutí na tlačítko Prověřit. Službu poskytuje Cebia.</p>
  126.             </div>
  127.         </div>
  128.     </div>
  130.     <div class="vin-info">
  131.         <div class="vin-info__container">
  132.             <h2 class="vin-info__caption">Co je VIN kód?</h2>
  133.             <p class="vin-info__description">VIN (Vehicle Identification Number) je 17místný kód, který jednoznačně identifikuje vozidlo (rodné číslo vozidla).</p>
  134.             
  135.             <div class="vin-info__grid">
  136.                 <div class="vin-info__item">
  137.                     <h3 class="vin-info__item-title">Kde VIN kód najdete</h3>
  138.                     <p class="vin-info__item-text">VIN vozidla je vždy uveden ve velkém i malém technickém průkazu, na zelené kartě nebo v servisní knížce. VIN kód také najdete na vozidle: pod čelním sklem, v motorovém prostoru vozidla, na typovém štítku na předních dveřích či sloupku.</p>
  139.                 </div>
  140.                 
  141.                 <div class="vin-info__item">
  142.                     <h3 class="vin-info__item-title">K čemu je VIN dobrý</h3>
  143.                     <p class="vin-info__item-text">Pomocí VIN kódu můžete najít důležité informace o vozidle jako jsou kdy a kde bylo vyrobeno, v jaké barvě a výbavě, pro kterou zemi apod. Zároveň lze na základě VIN zkontrolovat historii vozidla včetně najetých kilometrů, předchozí poškození nebo servisní práce.</p>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </div>
  149.     <div class="intro">
  150.         <div class="intro__container">
  151.             <div class="intro__grid">
  152.                 <div class="intro__text">
  153.                     <h2 class="intro__title">
  154.                         <strong>Proč prověřit auto?</strong><br>
  155.                         Znát historii vozu ještě před koupí se vyplatí.
  156.                     </h2>
  157.                     <p class="intro__perex">Za zlomek ceny vozu získáte ověřené informace z jeho historie, které Vám mohou ušetřit desítky tisíc korun i hodiny starostí a problémů.</p>
  158.                     <ul class="intro__warning-list">
  159.                         <li>Upravený tachometr</li>
  160.                         <li>Problémová historie</li>
  161.                         <li>Oprava po vážné nehodě</li>
  162.                         <li>Nepravidelný servis</li>
  163.                         <li>V minulosti odcizeno</li>
  164.                         <li>Vysoký nájezd jako taxi</li>
  165.                     </ul>
  166.                     <p class="intro__arrow">
  167.                         <i class="icon icon-corner-down-right"></i>
  168.                         Neodhalená historie může výrazně ovlivnit bezpečnost, hodnotu a spolehlivost ojetého vozidla. Cebia má přístup k datům o vozidlech od 2000 partnerů z 32 zemí.
  169.                     </p>
  170.                 </div>
  171.                 <figure class="intro__image">
  172.                     <img src="img/intro__image.png" alt="">
  173.                 </figure>
  174.             </div>
  175.         </div>
  176.     </div>
  178. {% endblock %}