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