src/Flexy/FrontBundle/Themes/CoWorking/templates/pages/freework.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  4. {% block stylesheets %}
  5. {{ parent() }}
  6.  <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
  7.  
  8. {#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />#}
  9. <style>
  10. .fs-5{
  11.   font-size: 17px !important;
  12. }
  13. .title {
  14. font-family: 'Montserrat', sans-serif;
  15. font-weight:bold;
  16. font-size: 12px;
  17. padding-bottom: 0px;
  18. margin-top: 0px;color:black;
  19. }
  21.   .modal-backdrop.fade.show {
  22.         display: none;
  23. }
  25. i.fa-solid.fa-users {
  26.     font-size: 24px;
  27. }
  29. .col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3 {
  30.     flex: 0 0 86%;
  31. }
  32. i.fa.fa-users {
  33.   font-size: 22px;
  34. }
  35. .titre-page{
  36. margin-top:10px;
  37. font-size: 20px;
  38. line-height:45.29px;
  39. color: #000000;
  40. }
  44.     .imageForMobile{
  45.         display:none;
  46.     } 
  47.     .imageForDesktop{
  48.         display:block;
  49.     }
  50.     
  51.         
  52.  
  53.  
  54.     @media (max-width:767px) {
  55.                 
  56.         .imageForDesktop{
  57.             display:none;
  58.         } 
  59.         .imageForMobile{
  60.             display:block;
  61.         }
  62.         
  63.         .col-sm-8.reservation-steeps{
  64.                 top: 0px
  65.         }
  66.         .divCardsForMobile{
  67.             top: 0px !important;
  68.         }
  69.         .multistep-container .mutistep-form-area{
  70.             margin-top: 0px !important;
  71.         }  
  72.         
  73.           .titre-page{
  74.               padding-left: 10px;
  75.               font-size: 15px !important;
  76.               line-height: 23.29px !important;
  77.               margin-top: 0px !important;
  78.         }
  80.          .forMobile{
  81.                 margin-top: 5% !important;
  82.         }
  83.             #btnTarifs{
  84.                     padding: 5px !important;
  85.                     font-size: 12px !important;
  86.             }
  87.             
  88.              .forMobile .col-sm-6{
  89.                 padding-right: 0px !important;
  90.                 padding-left: 0px !important;
  91.              } 
  92.              
  93.               #btnInformation{
  94.                    width: 170px !important;
  95.                     font-size: 10px !important;
  96.         }
  97.         #btnReservation{
  98.                 font-size: 10px !important;
  99.                 width: 100px!important;
  100.         }
  101.         .bureaux-desc{
  102.             padding: 15px!important;
  103.         }
  104.          .close{
  105.           width:25px !important;
  106.       }
  107.         
  108.       }
  109.       
  110.        #btnTarifs:hover{
  111.             background: #dfb150 !important;
  112.             color: white !important;
  113.         }
  114. </style>
  115.   
  116. {% endblock  %}
  117. {% block body %}
  118.  
  119.  
  120.  
  121.  
  123.      <img loading="lazy" src="{{asset('themes/coworking/front/images/background_FREEWORK.png')}}" style="width: 100%;height: 520px;" class="img-fluid imageForDesktop" />
  124.     <img loading="lazy" src="{{asset('themes/coworking/front/images/BgFreeworkMobile.png')}}" style="width: 100%;" class="img-fluid imageForMobile" />
  125.   
  126.     <div class="container">
  127.     <div class="row">
  129.       
  130.       <div class="col-sm-8 reservation-steeps">
  132.            <div class="row">
  133.           <div class="col-sm-6">
  134.             <h6 class="titre-page">Réservation Freework</h6>
  135.           </div>
  136.           <div class="col-sm-6" style="margin-top:10px;">
  137.             <a href="/themes/coworking/front/images/FREEWORK.pdf" class="btn-res text-center text-light text-uppercase bg-dark" style="float: right;padding: 8px;border-radius: 6px;font-size:13px;" target="_blank"> NOS TARIFS</a>
  138.           </div>
  139.         </div>
  140.         
  141.        
  143.      
  144.         <div class="container">
  145.              {#  <div class="container d-flex justify-content-center align-items-center">
  146.          
  147.          
  148.           <ul id="progressbar">
  149.                     <li class="active"> 
  150.              <span>  Type </span>
  151.              </li>
  152.              <li>Formule</li>
  153.              <li>Dates</li>
  154.              <li>Confirmation</li>
  155.            
  156.           
  157.                 </ul>
  158.         </div> #}
  160.              
  162.             <div class="col-xl-12">
  163.               <div class="multistep-container">
  164.                 <div class="mutistep-form-area">
  165.                
  166.                        
  167.                             <div class="container" style="margin-top:40px;">
  169.                     
  171.                                 <div class="panel">
  172.                                    
  173.                                      
  174.                                     {% for freework in products   %}
  175.                                           <div class="card-brx row mt-3 panel" style="width:auto; border: none; border-radius:17px; box-shadow: 0 0 12px 5px rgba(0, 0, 0, 0.05);">
  176.                                             <div class="col-md-6 col-lg-6 col-sm-12">
  177.                                               <img loading="lazy" class="img-fluid" src="{{ asset('uploads/coworking/shop/products/' ~ freework.image) }}" style="width:90%; border-radius:6px;margin-top: 10px;" />
  178.                                             </div>
  179.                 
  180.                                             <div class="bureaux-desc col-md-6 col-lg-6 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
  181.                                               <div>
  182.                                                    <div style="float: right;">
  183.                                                  <i class="fa fa-user" style="color:black;"></i> 
  184.                                                    </div>
  185.                                                
  186.                                                
  187.                                                 <p class="fs-5 title" >{{ freework.name }}</p>
  188.                                                   <a class="float-left" href="#" id="seePrice"  style="white-space:nowrap;padding-top: 10px;text-decoration:none;font-size:13px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:left;color: #020202;font-weight: 500;width: 139px;">À partir de<br> 80* MAD TTC / Journée</a>
  189.                                                
  190.                                                 <br><br><br><br>
  191.                                                       
  192.                                                         <a  href="#" data-toggle="modal" id="seeDetails" data-target="#aynModal{{ freework.id }}"style="padding: 10px;text-decoration: none;width: 129px;font-size: 13px;font-family: 'PT Sans', sans-serif;letter-spacing: 2px;/* float: right; */color: #020202;text-decoration: underline;margin-right: 10px;margin-right: 10px;font-weight: 800;"><u>Voir Details</u></a>
  193.                                                         <a href="{{path("reservationFreeworkstep1",{id:freework.id})}}" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__"  style="padding:10px; text-decoration:none; width:230px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">Réserver</a>
  194.                                                       
  195.                                                
  196.                                                
  197.                                                
  198.                                                 <div style="color:rgba(107, 111, 123, 1); line-height:20px; font-size:13px; font-weight:400;">
  199.                                                  <!-- <p style="padding-top: 0px;">{{ freework.description }}</p>-->
  200.                                                  
  201.                                                 </div>
  202.                                               </div>
  203.                                             </div>
  204.                 
  205.                                              <div class="col-md-12 col-lg-12 col-sm-12 d-flex justify-content-end align-items-end mb-3">
  206.                                                 {# <div class="row" id="forDesktop">#}
  207.                                                 {#        <div class="col-md-4">#}
  208.                                                         
  209.                                                 {#        </div> #}
  210.                                                 {#         <div class="col-md-4">#}
  211.                                                 {#           <a class="float-right" href="#" data-toggle="modal" id="seeDetails"  data-target="#aynModal{{ freework.id }}" style="padding:10px; text-decoration:none; width:129px; font-size:13px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;color: #020202;font-weight: 800;"><u>Voir Details</u></a>#}
  212.                                                 {#        </div>#}
  213.                                                 {#         <div class="col-md-4">#}
  214.                                                 {#            <a href="{{path("reservationFreeworkstep1",{id:freework.id})}}" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__"   style="padding:10px; text-decoration:none; width:230px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">Réserver</a>#}
  215.                                                 {#        </div> #}
  216.                                                 {#</div>#}
  217.                                                 
  218.                                             </div>
  219.                                             
  220.                                             
  221.                                             
  222.                                             
  223.                                             
  224.                                             
  225.                                             
  226.                                           </div>
  227.                                   
  228.                                    
  229.                                 {% endfor %} 
  230.                                       
  232.                                               
  233.                                 </div>
  234.                                 
  236.                             </div>
  237.                             
  238.                            
  239.                      
  240.  
  241.                     </form>
  242.                   </div>
  243.                   <!--  -->
  245.                   
  247.                  
  248.                   <!--  -->
  249.                 </div>
  250.               </div>
  251.              
  252.           </div>
  253.         </div>
  254.         
  255.     {% for freework in products %}
  256.     <div class="modal fade" id="aynModal{{freework.id}}">
  257.                             <div class="modal-dialog modal-lg">
  258.                                 <div
  259.                                     class="modal-content">
  261.                                     <!-- Modal Header -->
  262.                                     <div class="modal-header" style="justify-content: end;">
  263.                                         <button type="button" class="close" data-dismiss="modal">&times;</button>
  264.                                     </div>
  265.                                     <div class="container">
  266.                                         <div class="row">
  268.                                             <div class="col-sm-6">
  269.                                                 <h2 style="font-size:25px;font-wight:bold;margin-top:5%;">{{freework.name}}</h2>
  270.                                             </div>
  271.                                             <small>
  272.                                             {{freework.shortDescription}}    
  273.                                             </small>
  274.                                             {#<div class="col-sm-6">#}
  275.                                             {#    <a class="btn-res text-center text-light text-uppercase bg-dark" href="#" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%;">#}
  276.                                             {#        Réserver#}
  277.                                             {#    </a>#}
  278.                                             {#</div>#}
  279.                                         </div>
  280.                                         
  281.                                         <!-- Modal body -->
  282.                                     
  283.                                         <div class="modal-body">
  284.                                             
  285.                                            <img loading="lazy" src="{{ asset('uploads/coworking/shop/products/' ~ freework.image) }}"  id="main">
  286.                                             <div id="thumbnails">
  287.                                                  {% for image in freework.images  %} 
  288.                                               <img loading="lazy" src="/uploads/coworking/detail/{{image.path}}">
  289.                    
  290.                                             {% endfor %}
  291.                                             </div>
  292.                                            
  294. <!--<img loading="lazy" src="{{asset('themes/coworking/front/images/iimg6.png')}}" id="main">
  295. <div id="thumbnails">
  296.   <img loading="lazy" src="{{asset('themes/coworking/front/images/iimg6.png')}}">
  297.   <img loading="lazy" src="{{asset('themes/coworking/front/images/iimg1.png')}}">
  298.   <img loading="lazy" src="{{asset('themes/coworking/front/images/iimg2.png')}}">
  299. </div>-->
  300.                                             <div class="row" style="margin-top:5%;">
  301.                                                 <div class="col-sm-6">
  302.                                                     <p class="m-1 fs-6" style="font-weight:bold;">
  303.                                                         Équipements</p>
  304.                                                     <ul style="font-size:12px;">
  305.                                                         <li>{{ freework.description|nl2br|raw }}</li>
  306.                                                          
  307.                                                     </ul>
  308.                                                 </div>
  309.                                                 <div class="col-sm-6">
  310.                                                     <p class="m-1 fs-6" style="font-weight:bold;">Services</p>
  311.                                                     <ul style="font-size:12px;">
  312.                                                         <li>Accès internet wifi haut débit ( Gratuit )</li>
  313.                                                         <li class="souligne">Accès internet par cable</li>
  314.                                                         <li class="souligne">Parking</li>
  315.                                                         <li class="souligne">Restaurants</li>
  316.                                                         <li class="souligne">Fitness et vestiaires</li>
  317.                                                         <li class="souligne">Espace gaming</li>
  318.                                                         <li class="souligne">Nap room</li>
  319.                                                         <li class="souligne">Centre de beauté</li>
  320.                                                         <li class="souligne">Espace kitchenette</li>
  321.                                                          
  322.                                                         <li class="souligne">Free work</li>
  323.                                                         <li class="souligne">Photocopie
  324.                                                         </li>
  325.                                                         <li class="souligne">Secrétariat</li>
  326.                                                     </ul>
  327.                                                 </div>
  328.                                             </div>
  329.                                             
  330.                                             <div class="row">
  331.                                                 <div class="col-sm-12">
  332.                                                     <div>
  333.                                                         <a class="btn-res text-center text-light text-uppercase bg-dark" href="{{path("reservationMeetingstep1",{id:freework.id})}}" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%; margin-bottom:5%;">
  334.                                                             Réserver
  335.                                                         </a>
  336.                                                     </div>
  337.                                                 </div>
  338.                                             </div>
  339.                                         </div>
  342.                                     </div>
  343.                                 </div>
  344.                             </div>
  345.                         </div>
  346. {%  endfor  %}
  351.       </div>
  352.     </div>
  353.   </div>
  354.   
  355.   
  356. {% endblock %}
  363. {% block javascripts %}
  364.   <!-- MAIN CONTENT -->
  367. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  368. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  369. <script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
  370. <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
  372.   <script>
  373.        $(document).ready(function () {
  374.              
  375.       $("#seeDetails").click(function(){
  376.           $(".panel-sticky").css('z-index','0');
  377.       });
  378.        $(".close").click(function(){
  379.           $(".panel-sticky").css('z-index','9999999');
  380.       });
  381.       $("#selectAdon").chosen();
  382.       $('.multistep-container .form-box .button-row .next').click(function () {
  383.         $(this).parents('.form-box').fadeOut('fast')
  384.         $(this).parents('.form-box').next().fadeIn('fast')
  385.       })
  386.       $('.multistep-container .form-box .button-row .previous').click(function () {
  387.         $(this).parents('.form-box').fadeOut('fast')
  388.         $(this).parents('.form-box').prev().fadeIn('fast')
  389.       })
  390.       
  391.     
  392.       
  393.       $('.ReserveNext').click(function () {
  394.         $(this).parents('.form-box').fadeOut('fast')
  395.         $(this).parents('.form-box').next().fadeIn('fast')
  396.       })
  397.       $('.ReservePrevious').click(function () {
  398.         $(this).parents('.form-box').fadeOut('fast')
  399.         $(this).parents('.form-box').prev().fadeIn('fast')
  400.       })
  401.     
  402.     
  403.     
  404.       
  405.     //   alert("frfr");
  407.     var thumbnails = document.getElementById("thumbnails")
  408. var imgs = thumbnails.getElementsByTagName("img")
  409. var main = document.getElementById("main")
  410. var counter=0;
  412. for(let i=0;i<imgs.length;i++){
  413.   let img=imgs[i]
  414.   
  415.   
  416.   img.addEventListener("click",function(){
  417.   main.src=this.src
  418. })
  419.   
  420. }
  421.     });
  422.     
  423.     
  424.     
  425.     
  426.     
  427.     
  428.     /**/
  429.       var stickyHeaders = (function() {
  431.   var $window = $(window),
  432.       $stickies;
  434.   var load = function(stickies) {
  436.     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
  438.       $stickies = stickies.each(function() {
  440.         var $thisSticky = $(this).wrap('<div class="followWrap" />');
  441.   
  442.         $thisSticky
  443.             .data('originalPosition', $thisSticky.offset().top)
  444.             .data('originalHeight', $thisSticky.outerHeight())
  445.               .parent()
  446.               .height($thisSticky.outerHeight());               
  447.       });
  449.       $window.off("scroll.stickies").on("scroll.stickies", function() {
  450.           _whenScrolling();        
  451.       });
  452.     }
  453.   };
  455.   var _whenScrolling = function() {
  457.     $stickies.each(function(i) {            
  459.       var $thisSticky = $(this),
  460.           $stickyPosition = $thisSticky.data('originalPosition');
  461.       
  462.       console.log($thisSticky.data('num') + ' is at' + $stickyPosition);
  464.       if ($stickyPosition <= $window.scrollTop()) {        
  465.         
  466.         var $nextSticky = $stickies.eq(i + 1),
  467.             $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
  469.         $thisSticky.addClass("fixed");
  471.         if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {
  473.           $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
  474.         }
  476.       } else {
  477.         
  478.         var $prevSticky = $stickies.eq(i - 1);
  480.         $thisSticky.removeClass("fixed");
  482.         if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {
  484.           $prevSticky.removeClass("absolute").removeAttr("style");
  485.         }
  486.       }
  487.     });
  488.   };
  490.   return {
  491.     load: load
  492.   };
  493. })();
  495. $(function() {
  496.   stickyHeaders.load($(".followMeBar"));
  497. });
  498.   </script>
  499. {% endblock %}