src/Flexy/FrontBundle/Themes/Lasalle/templates/front/customer/visit.html.twig line 1

  1.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>visite Adhérent la salle </title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  10. <style> 
  12.     body {
  13.     margin: 0; /* Réinitialiser les marges par défaut */
  14.     padding: 0; /* Réinitialiser les paddings par défaut */
  15.     overflow: hidden; /* Empêche tout débordement de la vidéo */
  16.     background-color: black;
  17.     background-image: url('/uploads/lasalle/video/lasalle2.png');
  18.     background-size:cover;
  19.     width: 300px;
  20.     background-repeat: no-repeat;
  21.     background-position: center top;
  22.     }
  25. video {
  26.     position: fixed; /* Fixe la vidéo par rapport à la fenêtre du navigateur */
  27.     top: 50%; /* Déplace la vidéo à 50% du haut de la fenêtre */
  28.     left: 50%; /* Déplace la vidéo à 50% de la largeur de la fenêtre */
  29.     min-width: 100%; /* Remplit la largeur minimale de l'écran */
  30.     min-height: 100%; /* Remplit la hauteur minimale de l'écran */
  31.      /* Ajuste la largeur de la vidéo automatiquement */
  32.     height: 100%; /* Ajuste la hauteur de la vidéo automatiquement */
  33.     transform: translate(-50%, -50%); /* Centre la vidéo dans la fenêtre */
  34.     z-index: -1; /* Place la vidéo en arrière-plan (derrière le contenu) */
  35. }
  37. .user-card {
  38.     opacity: 88%;
  39. }
  40.  
  41. .wrapper{
  42.    display: flex;
  43.    justify-content: center;
  44.    align-items: center;
  45.    /*padding-top: 12%;*/
  46.    padding: 10px;
  47.    
  48.  }
  50.  .logo{
  51.     width: 25%;
  52.     position: absolute;
  53.     right: 100px;
  54.     bottom: 100px;
  55.      }
  57.  
  59.  .user-card {
  60.     display: flex;
  61.     flex-direction: column;
  62.     align-items: center;
  63.     justify-content: center;
  64.     background-color: #fff;
  65.     border-radius: 10px;
  66.     padding: 60px;
  67.     position: fixed;
  68.     top: 0;
  69.     bottom: 0;
  70.     left: 0;
  71.     right: 0;
  72.     overflow: hidden;
  73.     box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.5);
  74. }
  77. .user-card-info h3 {
  79.     font-size: 70px;
  80.     margin: 0;
  81.     margin-bottom: 10px;
  82.     margin-top: 40px;
  83.     font-family: 'Bebas Neue', sans-serif;
  84.     letter-spacing: 3px;
  85. }
  86.  
  87. .user-card:before {
  88.    content: '';
  89.    position: absolute;
  90.    /*height: 300%;*/
  91.    height: 217%;
  92.    width: 173px;
  93.     background: linear-gradient(0deg, rgb(103, 70, 193) 0%, rgb(143, 105, 247) 100%);
  94.    top: -60px;
  95.    left: -125px;
  96.    z-index: 0;
  97.    transform: rotate(17deg);
  98.  }
  99.  
  100.  .user-card-img {
  101.    display: flex;
  102.    justify-content: start;
  103.    align-items: center;   
  104.    z-index: 3;
  105.  }
  106.  
  107.  .user-card-img img {
  108.    width: 380px;
  109.    height: 380px;
  110.    object-fit: cover;
  111.        border-radius: 50%;
  112.  }
  113.  
  114.  .user-card-info {
  115.    text-align: center;
  116.  }
  117.  
  118.  .user-card-info h2 {
  119.    font-size: 60px;
  120.    margin: 0;
  121.    margin-bottom: 10px;
  122.    font-family: 'Bebas Neue', sans-serif;
  123.    letter-spacing: 3px;
  124.  }
  126.  p{font-family: 'Bebas Neue', sans-serif;}
  127.  
  128. .d-none{display:none}
  130.  .user-card-info p {
  131.    /*font-size: 14px;
  132.    margin-bottom: 2px;*/
  133.     font-size: 45px;
  134.     margin-bottom: 2px;
  135.     text-align: center;
  136.  }
  137.  .user-card-info p span {
  138.     font-weight: 700;
  139.     margin-right: 10px;
  140. }
  141.  @media only screen and (min-width: 768px) {
  142.    .user-card {
  143.      flex-direction: row;
  144.      align-items: flex-start;
  145.    }   
  146.    .user-card-img {
  147.      /*margin-right: 20px;*/
  148.      margin-right: 80px;
  149.      margin-bottom: 0;
  150.    }
  151.  
  152.    .user-card-info {
  153.      text-align: left;
  154.    }
  155.  }
  157.  @media (max-width: 767px){
  158.    .wrapper{
  159.       padding-top: 3%;
  160.    }
  161.    .user-card:before {
  162.       width: 300%;
  163.       height: 200px;
  164.       transform: rotate(0);
  165.    }
  166.    .user-card-info h2 {
  167.       margin-top: 25px;
  168.       font-size: 40px;
  169.    }
  170.    .user-card-info p span {
  171.       display: block;
  172.       margin-bottom: 15px;
  173.       font-size: 18px;
  174.    }
  175.  }
  176.  
  177. </style>
  178. </head>
  180. <body>
  187.  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  188.  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  190.  <!-- <video autoplay loop muted>
  191.         <source src="/uploads/lasalle/video/lasalle.mp4" type="video/mp4">
  192.         <!-- Vous pouvez ajouter d'autres sources pour une compatibilité avec différents navigateurs -->
  193.     <!--</video>-->
  194.     
  195. {#{{ dump(customer) }}#}
  196.  
  198. {% if customer and salle2 == true %}
  202.  <div class="wrapper" >
  203.         <div class="user-card">
  204.             <div class="user-card-img">
  205.               <img src="http://lasalleerp-h.com/uploads/lasalle/adherent/{{ customer['image']}}" alt="" style="width:380px">
  206.             </div>
  207.               
  208.             <div class="user-card-info">
  209.           
  210.                 
  211.               <h3> <img src="/uploads/lasalle/check-mark.png" alt="" style="width: 150px"> Bienvenue {{customer['first_name']}} {{customer['last_name']}}    </h3>
  212.               
  213.                 <h2>Salle : <b>Roche Noir </b> </h2>
  214.                  <h2>Fin Abonnement : {{customer['end_at']|date('d/m/Y') }}</h2>
  215.                  <h2><small>réference carte : {{customer['reference']}} </small></h2>
  216.                 
  217.                
  218.                
  219.                {% if timeStatus %}
  220.                 <!-- Alerte Bootstrap avec couleur personnalisée -->
  221.                 <div class="alert d-flex align-items-center mt-4" role="alert" 
  222.                     style="background: linear-gradient(45deg, #ff8a00, #e52e71); color: #fff; font-size: 1.2rem; padding: 9px; border-radius: 8px;">
  223.                    
  224.                     <i class="bi bi-sun-fill me-2" style="font-size: 1.5rem;"></i>
  225.                     <strong> &nbsp; &nbsp; &nbsp; <b> Offre Matinale  </b> </strong> 
  226.                 </div>
  227.             
  228.             {% endif %}
  229.             </div>
  230.             
  231.             <div ><img  class="logo" src="../themes/lasalle/admin/images/logo.png"></div>
  232.         </div>
  233.         
  234.     </div>
  236. {% endif %}
  237. {% if customer and salle2 == false %}
  239.  <div class="wrapper" >
  240.         <div class="user-card">
  241.             <div class="user-card-img">
  242.               <img src="/uploads/lasalle/adherent/{{ customer.image}}" alt="" style="width:380px">
  243.             </div>
  244.               
  245.             <div class="user-card-info">
  246.           
  247.                 
  248.               <h3> <img src="/uploads/lasalle/check-mark.png" alt="" style="width: 150px"> Bienvenue {{ customer.firstName}} {{ customer.lastName}}</h3>
  249.               
  250.                <!--<h2>Salle : {{ customer.store}}</h2>-->
  251.                <h2>Début Abonnement : {{customer.productSubscriptions|last.startAt|date("d/m/Y") }}</h2>
  252.                <h2>Fin Abonnement : {{customer.productSubscriptions|last.endAt|date("d/m/Y") }}</h2>
  253.                
  254.                {% if timeStatus %}
  255.                 <!-- Alerte Bootstrap avec couleur personnalisée -->
  256.                 <div class="alert d-flex align-items-center mt-4" role="alert" 
  257.                     style="background: linear-gradient(45deg, #ff8a00, #e52e71); color: #fff; font-size: 1.2rem; padding: 9px; border-radius: 8px;">
  258.                    
  259.                     <i class="bi bi-sun-fill me-2" style="font-size: 1.5rem;"></i>
  260.                     <strong> &nbsp; &nbsp; &nbsp; <b> Offre Matinale  </b> </strong> 
  261.                 </div>
  262.             
  263.             {% endif %}
  264.             </div>
  265.             
  266.             <div ><img  class="logo" src="../themes/lasalle/admin/images/logo.png"></div>
  267.         </div>
  268.         
  269.     </div>
  271. {% endif %}
  274.  <div class="failed-access wrapper d-none" >
  275.        
  276.         <div class="user-card">
  277.             
  278.               
  279.             <div class="user-card-info">
  280.              
  281.             
  282.               <h3><img src="/uploads/lasalle/supprimer.png" alt="" style="width: 120px"> Acces réfusé</h3>
  283.               <h2>Merci de vérifer avec l'accueil</h2>
  284.               <!--<h2>Date de visite {{ "now"|date("d/m/Y H:i:s") }}</h2>-->
  285.             </div>
  286.             
  287.             <div ><img  class="logo" src="../themes/lasalle/admin/images/logo.png" style="margin-top: 400px  !important;
  288.     margin-left: 0px !important;"></div>
  289.         </div>
  290.         
  291.    
  292.         
  293.     </div>
  300. {% set url = path("visit-customer") %}
  301. <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
  302. <script>
  304.            // var notificationSound = new Audio('flexy/sounds/notification_sound.mp3');
  306.             
  308.             
  309.             setTimeout(function(){
  310.                           $(".wrapper").addClass("d-none");
  311.                         },12000);
  312.             
  313.             {% if settings.get.isMercureEnabled %}
  314.             
  315.             const eventSource = new EventSource("{{ mercure('https://hello.com/books/1')|escape('js') }}");
  316.             eventSource.onmessage = event => {
  318.               setTimeout(function(){
  319.                           $(".wrapper").addClass("d-none");
  320.                         },12000);
  321.                 // Will be called every time an update is published by the server
  322.                 var data = JSON.parse(event.data);
  324.                 if(data.status == "failed"){ 
  326.                     $(".failed-access").removeClass("d-none");
  327.                     // Init Page 
  330.                     // Init Page 
  331.                         
  332.                        
  334.                  }
  335.                 
  336.                 if(data.status == "success"){
  337.                     var customerId = data.customerId;
  338.                     var other = data.otherSalle;
  339.                     if(data.entity == "VisitCustomer"){
  340.                       
  341.                         //notificationSound.loop = true;
  342.                         //notificationSound.play();
  343.                         
  344.                         const flashMessages = document.getElementById('flash-messages');
  345.                         
  346.                         /*$("#flash-messages").append('<div class="alert alert-success alert-dismissible fade show" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>Nouvelle commande a été crée</div>');*/
  347.                        
  348.                         
  349.                         window.location.href= "{{url}}?customerId="+customerId + "&other=" + other;
  354.                        
  355.                         
  357.                     }
  358.                 }
  360.                 
  361.                  
  363.                 
  364.             }
  365.             {% endif %}
  366.             
  368.             </script>
  372. </body>
  374. </html>