templates/timobracht/homepage.html.twig line 1

Open in your IDE?
  2. {% extends 'timobracht_homepage.html.twig' %}
  4. {% block main_content %}
  5.   
  6.   <section class="section banner-section" id="start">
  7.     {% if editmode %}
  8.     <div id="myCarousel">
  9.     {% else %}
  10.     <div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  11.     {% endif %}
  13.       {% set contentBlock1 = pimcore_block('carousel1') %}
  14.       {% set activeIndicator = 0 %}
  15.       {% set activeSlide = 0 %}
  16.       
  17.       {% if not editmode %}
  18.       <div class="carousel-indicators">
  19.         {% for i in pimcore_block('carousel1').iterator %}   
  20.         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="{{ activeIndicator }}" {% if activeIndicator == 0 %}class="active" aria-current="true"{% endif %} aria-label="Banner"></button>
  21.         {% set activeIndicator = activeIndicator + 1 %}
  22.         {% endfor %}
  23.       </div>
  24.       {% endif %}
  26.       <div class="carousel-inner" {% if editmode %}style="height:500px; overflow-y:auto; padding:100px 30px;"{% endif %}>
  28.         {% for i in pimcore_block('carousel1').iterator %}   
  29.           {% if editmode %}
  30.             {{ pimcore_select('blocktype1', {
  31.                 "store": [
  32.                     ["carousel-item", "Carousel Slider-Panel"]
  33.                 ],
  34.                 "width": 400,
  35.                 "reload": true
  36.             }) }}
  37.           {% endif %}
  39.           {% if not pimcore_select('blocktype1').isEmpty() %}          
  40.             <div class="carousel-item {% if activeSlide == 0 %}active{% endif %}" {% if editmode %}style="display:block; opacity:1 !important;"{% endif %}>
  41.               {{ include('timobracht/_includes/content-blocks/' ~ pimcore_select('blocktype1').getData() ~ '.html.twig') }}
  42.             </div>   
  43.           {% endif %}
  44.           
  45.           {% set activeSlide = activeSlide + 1 %} 
  46.         {% endfor %}
  47.         
  48.       </div>
  49.       
  50.       {% if not editmode %}
  51.       <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
  52.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  53.         <span class="visually-hidden">Previous</span>
  54.       </button>
  55.       <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
  56.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  57.         <span class="visually-hidden">Next</span>
  58.       </button>
  59.       {% endif %}
  60.     </div>
  61.     <div class="carousel-teaser d-none d-sm-block animate__animated animate__slideInUp">
  62.       <div class="teaser-bg">
  63.         <h3 class="teaser-header">{{ pimcore_input('teaser_header') }}</h3>
  64.         <p class="teaser-text text-center">{{ pimcore_textarea('teaser_text')|nl2br }}</p>
  65.         <div class="teaser-actions">
  66.           <a class="btn btn-teaser" href="#fortbildungen"><span class="lsf">down</span> {{ 'teaser-read-more'|trans }}</a>
  67.         </div>
  68.       </div>
  69.     </div>
  70.     <div class="section-border section-border-top-bg">
  71.       <div class="section-border section-border-top">
  72.       </div>
  73.     </div>
  74.   </section>
  75.   
  76.   <section class="section-padding bg-section">
  77.     <div class="container {% if not editmode %}scroll-animated{% endif %}">
  78.       <div class="row">
  79.         <div class="col-12 col-lg-4">
  80.           <div class="welcome-portrait tour-preview-image-border">
  81.             {{ pimcore_image("home_welcome_image", {"class":"tour-guide-image", "thumbnail":"tour-preview-image"}) }}
  82.           </div>
  83.         </div>
  84.         <div class="col-12 col-lg-8">
  85.           <div class="welcome-text">
  86.             <h1>{{ pimcore_input("home_welcome_header", {}) }}</h1>  
  87.             {{ pimcore_wysiwyg("home_welcome_text", {}) }}          
  88.           </div>
  89.         </div>
  90.       </div>
  91.     </div>
  92.   </section>
  94.   <section class="section banner-section scroll-animated-fade-in">
  95.     <div class="section-border-wave text-center">
  96.       <img src="/themes/{{ siteConfig.getTemplate }}/img/tb-wave.svg" style="width:80%; height:auto;" />
  97.     </div>
  98.   </section>
  99.   
  100.   <section class="section-padding" id="fortbildungen">
  101.     <div class="container">
  102.       <div class="row">
  103.         <div class="col-12 text-center">
  104.           <h1>{{ pimcore_input("tours_header") }}</h1>
  105.           <br />
  106.         </div>
  107.       </div>      
  108.       {% set contentBlock2 = pimcore_block('tours') %}
  109.       {% for i in pimcore_block('tours').iterator %}   
  110.         {% if editmode %}
  111.           {{ pimcore_select('blocktype', {
  112.               "store": [
  113.                   ["panel-6-6-tours", "Tourangebote"]
  114.               ],
  115.               "reload": true
  116.           }) }}
  117.         {% endif %}
  119.         {% if not pimcore_select('blocktype').isEmpty() %}          
  120.             {{ include('timobracht/_includes/content-blocks/' ~ pimcore_select('blocktype').getData() ~ '.html.twig') }}   
  121.         {% endif %}
  122.       {% endfor %}     
  123.       <div class="row">
  124.         <div class="col-12 grey small">
  125.           {{ pimcore_input("tours_information") }}
  126.         </div>
  127.       </div>
  128.     </div>
  129.   </section>
  130.   
  131.   <section class="section banner-section scroll-animated-fade-in">
  132.     <div class="section-border-wave text-center">
  133.       <img src="/themes/{{ siteConfig.getTemplate }}/img/tb-wave.svg" style="width:80%; height:auto;" />
  134.     </div>
  135.   </section>
  136.   
  137.   <section class="section-padding" id="hotel">
  138.     <div class="container">
  139.       <div class="row">
  140.         <div class="col-12 text-center">
  141.           <h2>{{ pimcore_input("mopeds_headline") }}</h2>
  142.           <br />
  143.         </div>
  144.       </div>
  145.       <div class="row">
  146.         <div class="col-12">
  147.           <div class="{% if not editmode %}scroll-animated{% endif %}">
  148.             <p>{{ pimcore_image("mopeds_image", {"minHeight":"200", "minWidth":"600", "thumbnail":"default"}) }}</p>
  149.             <br />
  150.             {{ pimcore_wysiwyg("mopeds_description") }}
  151.           </div>
  152.         </div>
  153.       </div>
  154.     </div>
  155.   </section>
  156.   
  157.   <section class="section banner-section scroll-animated-fade-in">
  158.     <div class="section-border-wave text-center">
  159.       <img src="/themes/{{ siteConfig.getTemplate }}/img/tb-wave.svg" style="width:80%; height:auto;" />
  160.     </div>
  161.   </section>
  162.   
  163.   <section class="section-padding" id="team">
  164.     <div class="container">
  165.       <div class="row">
  166.         <div class="col-12 text-center">
  167.           <h2>{{ pimcore_input("gift_headline") }}</h2>
  168.           <br />
  169.         </div>
  170.       </div>
  171.       <div class="row">
  172.         <div class="col-12">
  173.           <div class="{% if not editmode %}scroll-animated{% endif %}">
  174.             {{ pimcore_wysiwyg("gift_text") }}
  175.           </div>
  176.         </div>
  177.       </div>
  178.     </div>
  179.   </section>
  180.   
  181.   <section class="section banner-section scroll-animated-fade-in">
  182.     <div class="section-border-wave text-center">
  183.       <img src="/themes/{{ siteConfig.getTemplate }}/img/tb-wave.svg" style="width:60%; height:auto;" />
  184.     </div>
  185.   </section>
  186.   
  187.   <section class="section-padding" id="impressionen">
  188.     <div class="" style="width:100%; max-width:100%; overflow-x:hidden;">
  189.       <div class="row">
  190.         <div class="col-12 text-center">
  191.           <h2>{{ pimcore_input("gallery_headline") }}</h2>
  192.           <br />
  193.         </div>
  194.       </div>          
  195.       {{ pimcore_renderlet('imagegallery', {
  196.           "controller" : "App\\Controller\\DocumentController::imageGalleryAction",
  197.           "title" : "Assets-Ordner mit Bildern per Drag+Drop zuweisen",
  198.           "height" : 400
  199.         })
  200.       }}      
  201.       <br />
  202.       <div class="container">
  203.         <div class="row">
  204.           <div class="col-12">
  205.             {{ pimcore_wysiwyg('gallery_description') }}
  206.           </div>
  207.         </div>
  208.       </div>
  209.     </div>
  210.   </section>
  212.   <a class="arrow-down-red {% if not editmode %}scroll-animated-inverted{% endif %}" href="#buchung">
  213.   </a>
  214.   
  215.   <section class="section-padding bg-section" id="buchung">
  216.     <div class="container">
  217.       <div class="row">
  218.         <div class="col-12 text-center">
  219.           <h2>{{ pimcore_input('contact_header', {'placeholder':'Kontakt Titel'}) }}</h2>
  220.           <br />
  221.         </div>
  222.       </div>
  223.       <div class="row">
  224.         <div class="col-12">
  225.           {{ pimcore_wysiwyg('contact_text') }}
  226.         </div>
  227.       </div>
  228.     </div>
  229.   </section>
  230.   
  231.   <!--
  232.   <section class="section-padding bg-section" id="buchung">
  233.     <div class="container">
  234.       <div class="row">
  235.         <div class="col-12 text-center">
  236.           <h2>{{ pimcore_input('contact_header') }}</h2>
  237.           <br />
  238.         </div>
  239.       </div>
  240.       <div class="row">
  241.         <div class="col-12 col-lg-4">
  242.           <div class="contact-data">
  243.             <p>{{'contact-company'|trans}}<br />{{'contact-name'|trans}}<br />{{'contact-street'|trans}}, {{'contact-city'|trans}}</p>
  244.             <p>Telefon: <a href="tel:{{'contact-phone-number'|trans}}" target="_blank">{{'contact-phone'|trans}}</a><br />E-Mail: <a href="mailto:{{'contact-email'|trans}}" target="_blank">{{'contact-email'|trans}}</a></p>
  245.             <p><span class="blue"><strong>Unser Hotel und Schulungszentrum ist das Iberostar Playa de Muro/Mallorca:</strong></span></p>
  246.             <p><a class="btn btn-default" href="https://www.google.com/maps/place/Iberostar+Playa+de+Muro/@39.8070456,3.1174558,15z/data=!4m2!3m1!1s0x0:0x19b06bb3fe8ed289?sa=X&ved=2ahUKEwjF4eSj8M-AAxUVHuwKHeWIDa4Q_BJ6BAheEAA&ved=2ahUKEwjF4eSj8M-AAxUVHuwKHeWIDa4Q_BJ6BAh5EAc" target="_blank">In Google Maps anzeigen</a></p>
  247.           </div>
  248.         </div>
  249.         <div class="col-12 col-lg-7 offset-lg-1">
  250.           <h3>Buchungsanfrage</h3>
  251.           <div class="box-bg">
  252.             
  253.             <form id="bookingForm" class="form booking-form" name="contactForm" method="post">
  254.               <input type="hidden" class="check-finput" name="language" id="language" value="{{app.request.locale}}" />
  255.               <input type="hidden" class="check-finput" name="contactToken" id="contactToken" value="{{ 'now'|date('U') }}" />
  256.               <div class="row form-row">
  257.                 <div class="col-12 col-md-6">
  258.                   <label>Vorname</label>
  259.                   <input class="form-control mb-2 check-finput" name="contactFirstname" id="contactFirstname" required />
  260.                 </div>
  261.                 <div class="col-12 col-md-6">
  262.                   <label>Nachname</label>
  263.                   <input class="form-control mb-2 check-finput" name="contactLastname" id="contactLastname" required />
  264.                 </div>
  265.               </div>
  266.               <div class="row form-row">
  267.                 <div class="col-8 col-md-9">
  268.                   <label>Stra&szlig;e</label>
  269.                   <input class="form-control mb-2 check-finput" name="contactStreet" id="contactStreet" required />
  270.                 </div>
  271.                 <div class="col-4 col-md-3">
  272.                   <label>Nr.</label>
  273.                   <input class="form-control mb-2 check-finput" name="contactStreetNumber" id="contactStreetNumber" required />
  274.                 </div>
  275.               </div>
  276.               <div class="row form-row">
  277.                 <div class="col-4 col-md-3">
  278.                   <label>Plz</label>
  279.                   <input class="form-control mb-2 check-finput" name="contactZip" id="contactZip" required />
  280.                 </div>
  281.                 <div class="col-8 col-md-6">
  282.                   <label>Ort</label>
  283.                   <input class="form-control mb-2 check-finput" name="contactCity" id="contactCity" required />
  284.                 </div>
  285.                 <div class="col-12 col-md-3">
  286.                   <label>Land</label>
  287.                   <input class="form-control mb-2 check-finput" name="contactCountry" id="contactCountry" required />
  288.                 </div>
  289.               </div>
  290.               <div class="row form-row">
  291.                 <div class="col-12 col-md-6">
  292.                   <label>E-Mail-Adresse</label>
  293.                   <input class="form-control mb-2" type="text" name="emailAddress" id="emailAddress" placeholder="E-Mail-Adresse" />
  294.                   <input class="form-control mb-2 check-finput" type="email" name="contactEmail" id="contactEmail" required />
  295.                 </div>
  296.                 <div class="col-12 col-md-6">
  297.                   <label>Mobilnummer</label>
  298.                   <input type="phone" class="form-control mb-2 check-finput" name="contactCellphone" id="contactCellphone" required />
  299.                 </div>
  300.               </div>
  301.               <div class="row form-row">
  302.                 <div class="col-12 col-md-6">
  303.                   <label>Ich w&uuml;nsche die Reise mit Flug ab</label>
  304.                   <input class="form-control mb-2 check-finput" name="contactDeparture" id="contactDeparture" required />
  305.                 </div>
  306.                 <div class="col-12 col-md-6">
  307.                   <label>K&ouml;rpergr&ouml;&szlig;e in cm (f&uuml;r Mietrad Gr&ouml;&szlig;e)</label>
  308.                   <input class="form-control mb-2 check-finput" name="contactSize" id="contactSize" required />
  309.                 </div>
  310.               </div>
  311.               <div class="row form-row">
  312.                 <div class="col-12">
  313.                   <label>Welchen Zimmertyp m&ouml;chten Sie buchen?</label>
  314.                   <input type="hidden" class="check-finput" name="contactRoomType" id="contactRoomType" value="" required />
  315.                   <div class="row">
  316.                     <div class="col-2 col-lg-1">
  317.                       <input type="radio" class="mb-2 check-finput" name="contactSetRoomType" id="contactSetRoomType1" value="Doppelzimmer Alleinnutzung" />
  318.                     </div>
  319.                     <div class="col-10 col-lg-11">
  320.                       Doppelzimmer zur Alleinnutzung (Einzelzimmer)
  321.                     </div>
  322.                   </div>
  323.                   <div class="row">
  324.                     <div class="col-2 col-lg-1">
  325.                       <input type="radio" class="mb-2 check-finput" name="contactSetRoomType" id="contactSetRoomType2" value="Doppelzimmer 2 Personen" />
  326.                     </div>
  327.                     <div class="col-10 col-lg-11">
  328.                       Doppelzimmer f&uuml;r 2 Personen
  329.                       <div id="contactRoomType2Data" style="background:#f9f9f9; padding:1rem; display:none; border-radius:5px;">
  330.                         <div class="row">
  331.                           <div class="col">
  332.                             Bitte Vor- und Nachnamen der zweiten Person angeben:
  333.                           </div>
  334.                         </div>
  335.                         <div class="row form-row">
  336.                           <div class="col-12 col-md-6">
  337.                             <label>Vorname</label>
  338.                             <input class="form-control mb-2 check-finput" name="contactFirstname2" id="contactFirstname2" required />
  339.                           </div>
  340.                           <div class="col-12 col-md-6">
  341.                             <label>Nachname</label>
  342.                             <input class="form-control mb-2 check-finput" name="contactLastname2" id="contactLastname2" required />
  343.                           </div>
  344.                         </div>                        
  345.                         <div class="row form-row">
  346.                           <div class="col-12">
  347.                             <label>M&ouml;chte Person 2 auch am Weiterbildungskurs teilnehmen?</label>
  348.                             <div class="row">
  349.                               <div class="col-2 col-lg-1">
  350.                                 <input type="checkbox" class=" mb-2 check-finput" name="contactSeminar2" id="contactSeminar2" value="" />
  351.                               </div>
  352.                               <div class="col-10 col-lg-11">
  353.                                 Ja, Weiterbildungskurs f&uuml;r Person 2 buchen
  354.                               </div>
  355.                             </div>                
  356.                           </div>
  357.                         </div> 
  358.                         <div class="row form-row">
  359.                           <div class="col-12">
  360.                             <label>K&ouml;rpergr&ouml;&szlig;e in cm (falls Mietrad f&uuml;r Person 2 gew&uuml;nscht)</label>
  361.                             <input class="form-control mb-2 check-finput" style="width:100px;" name="contactSize2" id="contactSize2" />
  362.                           </div>
  363.                         </div>        
  364.                       </div>
  365.                     </div>
  366.                   </div>
  367.                 </div>
  368.               </div>      
  369.               <div class="row form-row">
  370.                 <div class="col-12">
  371.                   <label>Ich w&uuml;nsche einen Reiser&uuml;cktrittschutz</label>
  372.                   <div class="row">
  373.                     <div class="col-2 col-lg-1">
  374.                       <input type="radio" class="mb-2 check-finput" name="contactInsurance" id="contactInsurance" value="Nein" required />
  375.                     </div>
  376.                     <div class="col-10 col-lg-11">
  377.                       Nein
  378.                     </div>
  379.                   </div>
  380.                   <div class="row">
  381.                     <div class="col-2 col-lg-1">
  382.                       <input type="radio" class="mb-2 check-finput" name="contactInsurance" id="contactInsurance" value="Ja" required />
  383.                     </div>
  384.                     <div class="col-10 col-lg-11">
  385.                       Ja, die Versicherung kostet einmalig 34,00EUR/Person
  386.                     </div>
  387.                   </div>                 
  388.                 </div>
  389.               </div>        
  390.               <div class="row form-row">
  391.                 <div class="col-12">
  392.                   <label>Kommentare/Sonstiges</label>
  393.                   <textarea class="form-control mb-2 check-finput" name="contactMessage" id="contactMessage" rows="3"></textarea>
  394.                 </div>
  395.               </div>
  396.               <div class="row form-row">
  397.                 <div class="col-12 small">
  398.                   {{ pimcore_wysiwyg('booking-information') }}
  399.                 </div>
  400.               </div>
  401.               <div class="row form-row">
  402.                 <div class="col-3 col-md-1">
  403.                   <input type="checkbox" class="mb-2 check-finput" name="contactAgbAccepted" id="contactAgbAccepted" value="1" required />
  404.                 </div>
  405.                 <div class="col-9 col-md-11">
  406.                   {{ 'booking-agb-accepted'|trans }}
  407.                 </div>
  408.               </div>
  409.               {% if captcha is defined %}
  410.               <br />
  411.               <div class="row">
  412.                 <div class="col-12 mb-3">
  413.                   <label for="captcha_answer"><strong>Sicherheitsfrage</strong><br />Bitte beantworten Sie die Frage: <strong>&quot;{{ captcha.question|raw }}&quot;</strong></label>  
  414.                 </div>
  415.               </div>
  416.               <div class="row">
  417.                 <div class="col-12 mb-3">
  418.                   <div class="form-captcha">
  419.                     <div class="form-group">                  
  420.                       <input type="hidden" class="check-finput" name="captcha_key" id="captcha_key" value="{{ captcha.key }}" required />
  421.                       <input class="form-control mb-2 check-finput" type="text" name="captcha_answer" id="captcha_answer" value="" required />
  422.                     </div>
  423.                   </div>
  424.                 </div>    
  425.               </div>
  426.               {% endif %}
  427.               <div class="row form-row">
  428.                 <div class="col-12 text-center">
  429.                   <div id="submitContactMessage"></div>
  430.                   <input class="btn btn-default mb-2" type="button" name="submitBookingForm" id="submitBookingForm" value="Buchungsanfrage abschicken" />
  431.                 </div>
  432.               </div>
  433.             </form>           
  434.           </div>
  435.         </div>
  436.       </div>
  437.     </div>
  438.   </section>
  439.   -->
  441. {% endblock %}