templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width={% if embedded is defined%}800{% else %}device-width{% endif %}, initial-scale={% if embedded is defined%}1{% else %}1.0{% endif %}">
  6.     <title>Formulaire de Carte de Visite Moderne</title>
  7.     <!-- Inclure le lien vers le fichier CSS de Bootstrap -->
  8.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  9.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
  10.         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  11.         {% block stylesheets %}
  12.             {{ encore_entry_link_tags('app') }}
  13.     <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  14.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  15.     <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" -->
  16. <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet">
  18.     <style>
  22.         /* Style pour les onglets */
  23.         .nav-tabs {
  24.             margin-top: 20px;
  25.         }
  26.         .required-label::after {
  27.             content: " *";
  28.             color: red;
  29.         }
  30.         
  31.         .btn-interdire {
  32.          max-width: 90px;
  33.         }
  34.         
  35.         .bg-primary {
  36.     background-color: #80276C !important;
  37. }
  38.  
  39. .btn-primary,#vcard_btn_validate {
  40.     background-color: #80276C !important;
  41.     border-color: #80276C !important;
  42. }
  44. #vcard_btn_duplicate {
  45. max-width: 40%;
  46.     margin: 20px;
  47. }
  49. #vcard_btn_reject_confirm {
  50.     background-color: #f29400 !important;
  51.     border-color: #f29400 !important;
  52. }
  54. #vcard_btn_validate,#vcard_btn_reject_confirm {
  55.     color: #ffffff;
  56. }
  58. #cardPreview .modal-dialog {
  59.     min-width: 35% !important;
  60. }
  62. .reject-msg-block {
  63.     margin-left: 1.25rem;
  64. }
  66. #comm_error {
  67.     margin: 1em;
  68.     color: red;
  69. }
  70.  
  71. a,.custom-control-input,span.nav-link {
  72.     color: #f29400;
  73.     text-decoration: underline;
  74. }
  75.  
  76. .btn-link {
  77.     color: #f29400;
  78.     text-decoration: none;
  79. }
  81. .social-media-block {
  82.     display: none;
  83.     margin-left: 28%;
  84. }
  86. .photo-perso {
  87.     margin-bottom: 20px;
  88. }
  90. .photo-perso ul {
  91.     list-style-type: none;
  92.       margin: 0;
  93.       padding: 0;
  94. }
  96. .photo-perso li {
  97.     float: left;
  98. }
  100. .photo-perso-img {
  101.     position: absolute;
  103.    width: 77px;
  104.    height: 77px;
  105.    border: 1px solid black;
  106.    margin: 0 auto;
  107.    background: white;
  108. }
  110. .photo-perso-img img {
  111.     width: 100%;
  112.     height: auto;
  113. }
  115. .photo-perso-infos {
  116.     margin-left: 81px;
  117. /*
  118.     max-width: 49%;
  119. */
  120. }
  122. .submit-warning {
  123.     margin: 1em;
  124.         color: red;
  125. }
  127. @media screen and (max-width: 1024px) {
  129. .photo-perso-infos {
  130.     max-width: 48% !important;
  131.     overflow-x: hidden !important;
  132. }
  134. }
  136. {% if embedded is defined %}
  139. @media screen and (orientation: portrait) {
  140.   html {
  141. /*
  142.     transform: rotate(-90deg);
  143. */
  144.     transform-origin: left top;
  146.     width: 70vh;
  147. /*
  148.     height: 100vw;
  149. */
  150.     overflow-x: hidden;
  151.     position: absolute;
  152.     top: 0;
  153.     left: 0;
  154.   }
  156.     .container {
  157.         padding-left: 0px !important;
  158.         padding-right: 0px !important;
  159.     }
  161. }
  163. @media only screen and (orientation:landscape){
  164.   html {
  165.     transform: rotate(0deg);
  166.     width: 90%;
  167.     height: 50%;
  169.   }
  171.   .card-owner-ids-details {
  172.     display: none;
  173.   }
  175.  .photo-bg {
  176.     display: none !important;
  177. }
  179. .social-media-block .inner-block {
  180.     float: left !important;
  181.     margin-left: 20px; 
  182. }
  184. .social-media-block {
  185.    margin-bottom: 0px !important;
  186. }
  188.     #qrcode {
  189.     position: absolute;
  190.     top: 110px;
  191.     right: 47px;
  192. }
  194.     .col-md-9 {
  195.         margin-top: 10px;
  196.     }
  198.     .mt-5, .my-5 {
  199.         margin-top: 0 !important;
  200.     }
  203.   #container {
  204.     -webkit-transform: rotate(0deg);
  205.     -moz-transform: rotate(0deg);
  206.     -o-transform: rotate(0deg);
  207.     -ms-transform: rotate(0deg);
  208.     transform: rotate(0deg);
  209.   }
  211.  .card-body {
  212.     padding-bottom: 0px !important;
  213.  }
  214. }
  216. .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  217.     position: relative;
  218.     width: 100%;
  219.     padding-right: 15px;
  220.     padding-left: 15px;
  221.     max-width: 100% !important;
  222. }
  224. .row {
  225.     display: block !important;
  226. }
  228. {% endif %}
  231. /*** autocomplete **/
  233. .autocomplete{
  234.     width: 250px;
  235.     position: relative;
  236. }
  237. .autocomplete #searchResult{
  238.     list-style: none;
  239.     padding: 0px;
  240.     width: 100%;
  241.     position: absolute;
  242.     margin: 0;
  243.     background: white;
  245.         top: 77px;
  246.     left: 15px;
  247. }
  249. .autocomplete #searchResult li{
  250.     background: #F2F3F4;
  251.     padding: 4px;
  252.     margin-bottom: 1px;
  253. }
  255. .autocomplete #searchResult li:nth-child(even){
  256.     background: #E5E7E9;
  257.     color: black;
  258. }
  260. .autocomplete #searchResult li:hover{
  261.     cursor: pointer;
  262.     background: #CACFD2;
  263. }
  265. .autocomplete input[type=text]{
  266.     padding: 5px;
  267.     width: 100%;
  268.     letter-spacing: 1px;
  269. }
  270.         
  271. /*****/
  273. .nav-item .nav-link.active {
  274.     font-weight: bold;
  276.         background-color: #f0f0f0;
  277.     border-color: #f0f0f0;
  279.     border-top-left-radius: 0; 
  280.      border-top-right-radius: 0;
  282. }
  285.     </style>
  290.         <link href="/css/application.css" rel="stylesheet" crossorigin="anonymous">
  294.         {% endblock %}
  296.         {% block javascripts %}
  297.         <script src="/application.js"></script>
  299.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  300.         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  301.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  302.             {{ encore_entry_script_tags('app') }}
  303.         {% endblock %}
  304.     </head>
  305.     <body>
  306. {%if embedded is not defined%}
  307. <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  308.   <div class="container-fluid">
  309. <span>
  310.     <img id="logo" src="/img/LogoHeader.jpeg">
  311.     <div class="navbar-brand" href="#"></div>
  312. </span>
  314.   </div>
  315. </nav>
  317. <div id="bloc_titre" class="">
  318.         <p>
  319.             </p><h3>Gestion des cartes</h3>
  320.         <p></p>
  321. </div>
  322. {% endif %}
  323. <div class="container mt-5">
  324.     <div class="row">
  325. {%if embedded is not defined%}
  326.         <div class="col-md-3">
  327.             <!-- Onglets -->
  328.             <ul class="nav flex-column nav-tabs" id="myTabs">
  329.     {%if manager_v is not defined %}
  330.     {{ include('_nav.html.twig') }}
  331.     {%endif%}
  332.     {%if false and needs_auth is defined and  back_url is defined %}
  333.         <li class="nav-item">
  334.                     <a class="nav-link" id="cv-tab" data-toggle="tab" href="{{back_url}}" onclick="window.location='/v/card/search';">Retour</a>
  335.                 </li>
  336.     {% elseif needs_auth is not defined and (disp_vcard is defined or disp_search is defined or disp_manager is defined or disp_message is defined) %}
  337.         <li class="nav-item">
  338.                     <a class="nav-link {%if published_card is defined and from_search is not defined%}active{%endif%}" id="cv-tab" data-toggle="tab" href="#" onclick="window.location='/v/card/last';">Version publiée</a>
  339.                 </li>
  340.     {%endif%}
  341.     {%if manager_v is not defined %}
  343.         <li class="nav-item">
  344.                     <a class="nav-link {%if disp_search is defined or from_search is defined %}active{%endif%}" id="search-tab" data-toggle="tab" href="/v/card/search" onclick="window.location='/v/card/search';">Rechercher</a>
  345.                 </li>
  346.     {%endif%}
  347.     {%if is_manager is defined and is_manager%}
  348.         <li class="nav-item">
  349.                     <a class="nav-link {%if disp_manager is defined %}active{%endif%}" id="cv-tab" data-toggle="tab" href="#" onclick="window.location='/v/card/manager';">Administrer les cartes</a>
  350.                 </li>
  351.     {%endif%}
  352.         </ul>
  353.         </li>
  354.             </ul>
  355.         </div>
  356. {%endif%}{# end not embedded #}
  357.         <div class="col-md-9">
  358.             <!-- Contenu des onglets -->
  359.             <div class="tab-content" id="myTabsContent">
  360.                 <!-- Partie 1: Photo -->
  361.                 <div class="tab-pane fade" id="photo-form">
  362.                     <div class="card shadow mb-4">
  363.                         <div class="card-header bg-primary text-white text-center">
  364.                             <h3 class="mb-0">Photo d'identité</h3>
  365.                         </div>
  366.                         <div class="card-body">
  367.                             <form>
  368.                                 <div class="form-group">
  369.                                     <div class="form-group row">
  370.                                         <label for="email" class="col-sm-4 col-form-label required-label">Email</label>
  371.                                         <div class="col-sm-8">
  372.                                             <input type="email" readonly class="form-control" id="photo_form_email" value="{%if  user_email is defined %}{{user_email}}{%endif%}"/>
  373.                                         </div>
  374.                                     </div>
  375.                                 </div>
  376.                                 <div class="form-group">
  377.                                     <label class="required-label" for="photo">Photo d'identité</label>
  378.                                     <p class="font-italic">Les photographies fournies pour établir une carte professionnelle doivent être récentes, de type photographie d’identité (de face et uniquement le visage) et sous un format numérique (préalablement enregistrée sur votre ordinateur). Si la photographie ne respecte pas ces règles, elle sera rejetée et la carte professionnelle ne sera pas délivrée.</p>
  379.                                     <input required type="file" class="form-control-file mb-2" id="photo" accept="image/*">
  380.                                     <div class="text-center">
  381.                                         <img src="#" alt="Aperçu de la photo" id="photo-preview" style="max-width: 200px; height: auto; display: none;">
  382.                                     </div>
  383.                                     <div class="text-center mt-2">
  384.                                         <p id="photo-size" class="text-muted" style="display: none;">Taille de la photo :</p>
  385.                                     </div>
  386.                                     <button type="button" class="btn btn-danger mt-2" id="remove-photo" style="display: none;">Supprimer la photo</button>
  387.                                 </div>
  388.                             </form>
  389.                         </div>
  390.                     </div>
  391.                 </div>
  392.                 <!-- Partie 2 : Droits à l'image -->
  393.                 <div class="tab-pane fade" id="di-form">
  394.                     <div class="card shadow mb-4">
  395.                         <div class="card-header bg-primary text-white text-center">
  396.                             <h3 class="mb-0">Droits à l'image</h3>
  397.                         </div>
  398.                         <div class="card-body">
  399.                             <form>
  400.                                 <div class="form-group">
  401.                                     <div class="form-group row">
  402.                                         <label for="email" class="col-sm-4 col-form-label required-label">Droits à l'image</label>
  403.                                     </div>
  404.                                     <div class="btn-group btn-group-toggle d-flex align-items-center" data-toggle="buttons">
  405.                                         <label class="btn btn-success" onclick="selectImageOption(1)">
  406.                                             <input type="radio" name="image-options" id="image-option1">Autoriser
  407.                                             <i class="fas fa-check-circle"></i>
  408.                                         </label>
  409.                                         <label class="ml-2">J’autorise l’ENSAM à utiliser ma photographie pour un usage interne à l’établissement (notamment dans la diffusion au sein des annuaires)</label>
  410.                                     </div>
  411.                                 </div>
  412.                                 <div class="form-group">
  413.                                     <div class="btn-group btn-group-toggle d-flex align-items-center" data-toggle="buttons">
  414.                                         <label class="btn btn-interdire" onclick="selectImageOption(2)">
  415.                                             <input type="radio" name="image-options" id="image-option2">Interdire
  416.                                             <i class="fas fa-times-circle"></i>
  417.                                         </label>
  418.                                         <label class="ml-2">J’interdis l’ENSAM à utiliser ma photographie à l’exception de la carte professionnelle</label>
  419.                                     </div>
  420.                                 </div>
  421.                                 <p class="font-italic"> « Le droit à l'image permet à toute personne de s'opposer - quelle que soit la nature du support utilisé - à la reproduction et à la diffusion, sans son autorisation expresse, de son image. La diffusion, à partir d'un site web, de l'image ou de la vidéo d'une personne doit respecter ces principes. Pour autant, lorsque la capture de l'image d'une personne a été accomplie au vu et au su de l'intéressée sans qu'elle s'y soit opposée alors qu'elle était en mesure de le faire, le consentement de celle-ci est présumé. La loi "informatique et libertés" conduit le responsable du traitement à informer les personnes dont les images sont utilisées de son identité, de la finalité du traitement (diffusion de son image sur un intranet, sur internet, etc.), des personnes destinataires des images et de l'existence d'un droit d'accès et de rectification. L'article 38 de la loi reconnaît à toute personne physique le droit de "s'opposer, pour des motifs légitimes, à ce que des données à caractère personnel la concernant fassent l'objet d'un traitement." Ainsi, une personne qui contesterait, par exemple, la diffusion de son image par un site web pourrait s'adresser soit au juge en s'appuyant sur les principes du droit à l'image (obligation de recueil du consentement), soit à la CNIL, après avoir, en application du droit d'opposition, demandé sans succès l'arrêt de cette diffusion au responsable du site. » </p>
  422.                             </form>
  423.                         </div>
  424.                     </div>
  425.                 </div>
  426.                 <div class="tab-pane fade show active" id="cv-form">
  428. {% if disp_form is defined %}
  429.     {{ include('v_card/_vcard_form.html.twig') }}
  430. {% elseif disp_search is defined %}
  431.     {{ include('v_card/_search.html.twig') }}
  432. {% elseif disp_message is defined %}
  433.     {{ include('v_card/_message.html.twig') }}
  434. {% elseif disp_vcard is defined %}
  435.     {{ include('v_card/_vcard.html.twig') }}
  436. {% elseif disp_manager is defined %}
  437.     {{ include('v_card/_manager.html.twig') }}
  438. {% endif %}
  439.         </div>
  443.                 <!-- Partie 4 : Restauration CROUS -->
  444.                 <div class="tab-pane fade" id="crous-form">
  445.                     <div class="card shadow mb-4">
  446.                         <div class="card-header bg-primary text-white text-center">
  447.                             <h3 class="mb-0">Restauration CROUS</h3>
  448.                         </div>
  449.                         <div class="card-body">
  450.                             <p class="font-italic">L'établissement a signé des conventions avec les CROUS régionaux qui s'équipent à partir de septembre 2015 de la nouvelle monétique IZLY.
  451.                                 <br> La carte professionnelle intégrera cette nouvelle monétique.</p>
  452.                             <p class="required-label">Demande de création de compte IZLY ?</p>
  453.                             <form>
  454.                                 <div class="form-group">
  455.                                     <div class="custom-control custom-radio">
  456.                                         <input type="radio" id="crous-option1" name="crous-options" class="custom-control-input" checked>
  457.                                         <label class="custom-control-label" for="crous-option1">OUI</label>
  458.                                     </div>
  459.                                     <div class="custom-control custom-radio">
  460.                                         <input type="radio" id="crous-option2" name="crous-options" class="custom-control-input">
  461.                                         <label class="custom-control-label" for="crous-option2">NON</label>
  462.                                     </div>
  463.                                 </div>
  464.                             </form>
  465.                             <p class="font-weight-light">Le compte IZLY vous permettra de gérer le porte-monnaie virtuel servant à payer votre repas au CROUS. Pour plus d'informations, veuillez cliquer ici. La demande de création du porte-monnaie IZLY entraîne l'envoi d'informations personnelles au CROUS. Ces informations personnelles concernent votre identité (prénom, nom, courriel professionnel) ainsi que le code tarif CROUS correspondant à votre indice de rémunération.</p>
  466.                         </div>
  467.                     </div>
  468.                 </div>
  469.             </div>
  470.         </div>
  471.     </div>
  472. </div> <!-- container mt-5 v20231005 //-->
  476. <!-- Inclure le lien vers le fichier JavaScript de Bootstrap -->
  477. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  478. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  479. <script>
  480.     var vcard_tab = document.getElementById('cv-tab');
  482.     if (vcard_tab !== undefined) {
  483.         vcard_tab.onclick = function(evt) {
  484.                 evt.preventDefault();
  485.                 window.location = '/v/card/';
  486.             };
  487.     }
  489.     var protect_link = document.getElementById('protect_donnes');
  491.     if (protect_link !== undefined) {
  492.         protect_link.onclick = function(evt) {
  493.                 evt.preventDefault();
  494.                 let dest = protect_link.getAttribute('href');
  496.                 if (dest !== undefined
  497.                     && dest != ''
  498.                 ) {
  499.                     window.open(dest);
  500.                 }
  501.             };
  503.     }
  506.     // Fonction pour basculer la visibilité des sous-menus
  507.     function toggleSousMenus(menuId) {
  509. /*
  510.      TODO: Enable with Carte Pro
  511.         var sousMenus = document.getElementById(menuId + '-sous-menus');
  512.         if (sousMenus.style.display === 'none') {
  513.             sousMenus.style.display = 'block';
  514.         } else {
  515.             sousMenus.style.display = 'none';
  516.         }
  517. */
  518.     }
  520. </script>
  522. {#
  523. <script>
  524.     $(document).ready(function() {
  525.         // Gérer la sélection de la photo
  526.         $('#photo').change(function() {
  527.             var reader = new FileReader();
  528.             reader.onload = function(e) {
  529.                 $('#photo-preview').attr('src', e.target.result).show();
  530.                 $('#thumbnail').attr('src', e.target.result); // Afficher la miniature
  531.                 $('#thumbnail-container').show();
  532.                 $('#remove-photo').show();
  533.                 
  534.                 // Afficher la taille de la photo
  535.                 var fileSize = (e.total / 1024).toFixed(2); // Taille en kilo-octets (Ko)
  536.                 $('#photo-size').text('Taille de la photo : ' + fileSize + ' Ko').show();
  537.             };
  538.             reader.readAsDataURL(this.files[0]);
  539.         });
  541.         // Gérer la suppression de la photo
  542.         $('#remove-photo').click(function() {
  543.             $('#photo').val('');
  544.             $('#photo-preview').hide();
  545.             $('#thumbnail-container').hide();
  546.             $('#photo-size').hide();
  547.             $(this).hide();
  548.         });
  549.         
  550.         // ajouter téléphone
  551.         $('#toggleTelephone2').click(function() {
  552.             $('#telephone2').toggle();
  553.          $('#indicatifTelephone2').toggle();
  555.             if ($('#telephone2').is(':visible')) {
  556.                 $(this).text('-');
  557.             } else {
  558.                 $(this).text('+');
  559.             }
  560.         });
  561.         
  562.         // ajouter email
  563.         $('#toggleEmail2').click(function() {
  564.             $('#email2').toggle();
  565.             if ($('#email2').is(':visible')) {
  566.                 $(this).text('-');
  567.             } else {
  568.         $('#email2').val('');
  569.                 $(this).text('+');
  570.             }
  571.         });
  572.         
  573.         // ajouter titre
  574.         $('#toggleTitre2').click(function() {
  575.             $('#titre2').toggle();
  576.             if ($('#titre2').is(':visible')) {
  577.                 $(this).text('-');
  578.             } else {
  579.                 $(this).text('+');
  580.             }
  581.         });
  583. {%if embedded is defined %}
  584.     viewport = document.querySelector("meta[name=viewport]");
  585.     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
  586. {% endif %}
  588.     }); // END: $ready
  589.     
  590.     const autoriserButton = document.getElementById('image-option1');
  591.     const interdireButton = document.getElementById('image-option2');
  593.     autoriserButton.addEventListener('click', function () {
  594.         autoriserButton.checked = true;
  595.         interdireButton.checked = false;
  596.     });
  598.     interdireButton.addEventListener('click', function () {
  599.         autoriserButton.checked = false;
  600.         interdireButton.checked = true;
  601.     });
  603. /*
  604.     const vcard_link = document.getElementById('cv-tab');
  605.     vcard_link.onclick = function(evt) {
  606.         document.location = '/v/card';
  607.     };
  608. */
  609.     </script>
  610. #}
  611.         {% block body %}
  612.     {% endblock %}
  613.     </body>
  614. </html>