templates/app/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% set body_class = 'home' %}
  5. {% block title %}Login{% endblock %}
  7. {% block body %}
  9.   <header>
  11.     <nav class="navbar navbar-expand-lg navbar-light mb-5">
  12.       <div class="container-fluid justify-content-end">
  13.         {% include 'utils/lang.switcher.html.twig' %}
  14.       </div>
  15.     </nav>
  16.     <div id="cloud2" class="cloud2"></div>
  18.     <div id="flying-steve" class="flying-steve d-none d-lg-block"></div>
  19.     <div class="container">
  20.       <div class="row">
  21.         <div class="col-lg-5 offset-lg-1">
  22.           <div class="logo mx-5">
  23.             <img src="{{ asset('build/logo_new/Loga_MyWow_vyskove.png') }}" alt="MyWow logo">
  24.           </div>
  25.           <div class="head-intext">
  26.             <h1>{{ 'login.welcome'|trans }}</h1>
  27.             <p>{{ 'home.header.p1'|trans }}</p>
  28.             <p>{{ 'home.header.p2'|trans }}</p>
  29.             <p>{{ 'home.header.p3'|trans }}</p>
  30.             <div class="button_holder d-none d-lg-flex">
  31.               <a href="{{ url('security_register') }}" class="register">{{ 'home.join'|trans }}</a>
  32.             </div>
  33.           </div>
  34.         </div>
  35.         <div class="col-lg-5">
  36.           {% include 'app/partials/_login_box.html.twig' %}
  37.         </div>
  38.       </div>
  39.     </div>
  40.     <div id="cloud1" class="cloud1 d-none d-lg-block"></div>
  41.   </header>
  42.   <section class="video-container">
  43.     <div class="container">
  44.       <div class="row">
  45.         <div class="col-lg-8 offset-lg-2">
  46.           <div class="videowrapper">
  47.             <iframe src="https://player.vimeo.com/video/305973744?h=43e5066b48" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  49.           </div>
  50.         </div>
  51.       </div>
  52.     </div>
  53.     <div class="cloud2"></div>
  54.   </section>
  55.   <section class="account-benefits">
  56.     <div class="tux d-none d-md-block"></div>
  57.     <div class="steve_jump d-none d-lg-block"></div>
  58.     <div class="container">
  59.       <div class="row">
  60.         <div class="col-md-12">
  61.           <h2>{{ 'home.benefits.header'|trans }}</h2>
  62.           <ul>
  63.             <li>{{ 'home.benefits.point1'|trans }}</li>
  64.             <li>{{ 'home.benefits.point2'|trans }}</li>
  65.             <li>{{ 'home.benefits.point3'|trans }}</li>
  66.             <li>{{ 'home.benefits.point5'|trans }}</li>
  67.             <li>{{ 'home.benefits.point6'|trans }}</li>
  68.             <li>{{ 'home.benefits.point7'|trans }}</li>
  69.           </ul>
  70.         </div>
  71.       </div>
  72.     </div>
  73.   </section>
  74.   <section class="film-strip">
  75.     <div class="container">
  76.       <div class="row">
  77.         <div class="col-lg-10 offset-lg-1">
  78.           <div class="film-strip-container">
  79.             <div class="video_holder">
  80.               <div class="video-container embed-responsive embed-responsive-16by9">
  81.                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/2Gsu7ityl98" frameborder="0"
  82.                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  83.               </div>
  84.               <div class="video-container embed-responsive embed-responsive-16by9">
  85.                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ybcxIs2tnfE" frameborder="0"
  86.                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  87.               </div>
  88.               <div class="video-container embed-responsive embed-responsive-16by9">
  89.                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gEZX7nTpzuk" frameborder="0"
  90.                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  91.               </div>
  92.               <div class="video-container embed-responsive embed-responsive-16by9">
  93.                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/nGgDV3QZcMg" frameborder="0"
  94.                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  95.               </div>
  96.             </div>
  97.           </div>
  98.         </div>
  99.       </div>
  100.     </div>
  101.   </section>
  102.   <section class="about-mywow">
  103.     <div class="container">
  104.       <div class="row">
  105.         <div id="face" class="col-md-5 d-none d-md-block d-lg-block">
  106.           <img src="{{ asset('build/faces/steve1.png') }}" alt="Steve">
  107.         </div>
  108.         <div class="col-md-7 text-box-holder">
  109.           <div class="text-box">
  110.             <p>{{ 'home.about.p1'|trans }}</p>
  111.             <p>{{ 'home.about.p2'|trans }}</p>
  112.             <p>{{ 'home.about.p3'|trans }}</p>
  113.             <div class="text-center">
  114.               <a href="{{ url('security_register') }}" class="btn btn-blue">{{ 'home.register'|trans }}</a>
  115.             </div>
  116.           </div>
  117.         </div>
  118.       </div>
  119.     </div>
  120.   </section>
  121.   <section class="bottom-intext">
  122.     <div class="container">
  123.       <div class="row">
  124.         <div class="col-lg-8 offset-lg-2 text-center">
  125.           <h2>{{ 'home.bottom.header'|trans }}</h2>
  126.           <p>
  127.             {{ 'home.bottom.p1'|trans }}<br>
  128.             {{ 'home.bottom.p2'|trans }}<br>
  129.             {{ 'home.bottom.p3'|trans }}
  130.           </p>
  131.           <a href="{{ url('security_register') }}" class="btn btn-white">{{ 'home.register'|trans }}</a>
  132.         </div>
  133.       </div>
  134.     </div>
  135.   </section>
  136.   {#<!-- Modal -->
  137.   <div class="modal fade" id="homeCoronaModal" tabindex="-1" role="dialog" aria-labelledby="homeCoronaModalTitle" aria-hidden="true">
  138.     <div class="modal-dialog modal-dialog-centered" role="document">
  139.       <div class="modal-content">
  140.         <div class="modal-header">
  141.           <h3 class="modal-title" id="homeCoronaModalTitle">{{ 'home.modal-korona.title'|trans }}</h3>
  142.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  143.             <span aria-hidden="true">&times;</span>
  144.           </button>
  145.         </div>
  146.         <div class="modal-body">
  147.           <div class="row">
  148.             <div class="col">
  149.               <img class="float-right d-none d-sm-block" style="max-width: 30%" src="{{ asset('build/steve_stands.png') }}" alt="Steve">
  150.               {{ 'home.modal-korona.body'|trans }}
  151.             </div>
  152.           </div>
  153.           <div class="row">
  154.             <div class="col text-center">
  155.               <button type="button" class="btn btn-outline-secondary my-2" data-dismiss="modal" style="font-size: 1.5rem">
  156.                 <img src="{{ asset('build/like_button.svg') }}" alt="like" style="height: 1.5rem">
  157.                 {{ 'home.modal-korona.button'|trans }}
  158.               </button>
  159.             </div>
  160.           </div>
  161.         </div>
  162.       </div>
  163.     </div>
  164.   </div>#}
  165. {% endblock %}
  167. {% block javascripts %}
  168.   {{ parent() }}
  169.   <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
  170.   {% include 'app/partials/_login_sso_js.html.twig' %}
  171.   <script nonce="{{ app_nonce() }}">
  173.     /* ANIMATIONS */
  174.     var cloud1 = $('#cloud1'),
  175.         cloud2 = $('#cloud2'),
  176.         steve  = $('#flying-steve');
  178.     function scrollDepend () {
  179.       var actualScroll = $(window).scrollTop();
  181.       if (actualScroll < $('.video-container').offset().top) {
  183.         cloud1.css('transform', 'translate3d(0,' + Math.round(actualScroll / 1.3) + 'px,0)');
  185.         cloud2.css('transform', 'translate3d(0,' + Math.round(actualScroll / -3) + 'px,0)');
  187.         steve.css('transform', 'translate3d(-50%,' + Math.round(actualScroll / 1.5) + 'px,0)');
  188.       }
  189.     }
  191.     $(window).resize(function () {
  192.       scrollDepend();
  193.     });
  195.     $(window).scroll(function () {
  196.       scrollDepend();
  197.     });
  199.     var face           = $('#face'),
  200.         facenum        = 1,
  201.         faceCollection = [];
  202.     for (var i = 1; i <= 6; i++) {
  203.       faceCollection[i] = $('<img src="https://1907427404.rsc.cdn77.org/assets/images/faces/steve' + i + '.png" alt="Steve"/>');
  204.     }
  205.     (function changeSteve () {
  206.       face.html(faceCollection[facenum]);
  207.       facenum = (facenum % 6) + 1;
  208.       setTimeout(changeSteve, 500);
  209.     })();
  211.     /*if (!Cookies.get('homeCoronaModal_dismissed')) {
  212.       $('#homeCoronaModal').modal('show').on('hidden.bs.modal', function () {
  213.         Cookies.set('homeCoronaModal_dismissed', true, { expires: 60, path: '/' });
  214.       });
  215.     }*/
  216.   </script>
  217. {% endblock %}