templates/utilisateurs/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <!-- 
  3. Template Name:  SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
  4. Version: 4.5.1
  5. Author: Sunnyat A.
  6. Website: http://gootbootstrap.com
  7. Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0?ref=myorange
  8. License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
  9. -->
  10. <html lang="en">
  11.     <head>
  12.         <meta charset="utf-8">
  13.         <title>
  14.             TELMA
  15.         </title>
  16.         <meta name="description" content="Login">
  17.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
  19.         <!-- Call App Mode on ios devices -->
  20.         <meta name="apple-mobile-web-app-capable" content="yes" />
  21.         <!-- Remove Tap Highlight on Windows Phone IE -->
  22.         <meta name="msapplication-tap-highlight" content="no">
  23.         <!-- base css -->
  24.         <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
  25.         <link id="appbundle" rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
  26.         <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
  27.         <link id="myskin" rel="stylesheet" media="screen, print" href="{{asset('assets/css/skins/skin-master.css')}}">
  28.         <!-- Place favicon.ico in the root directory -->
  29.         <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/img/favicon/apple-touch-icon.png')}}">
  30.         <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/img/favicon/favicon-32x32.png')}}">
  31.         <link rel="mask-icon" href="{{asset('assets/img/favicon/safari-pinned-tab.svg')}}" color="#5bbad5">
  32.         <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
  33.     </head>
  34.     <body>
  35.         <script>
  36.             
  37.             'use strict';
  39.             var classHolder = document.getElementsByTagName("BODY")[0],
  40.                 /** 
  41.                  * Load from localstorage
  42.                  **/
  43.                 themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
  44.                 {},
  45.                 themeURL = themeSettings.themeURL || '',
  46.                 themeOptions = themeSettings.themeOptions || '';
  47.             /** 
  48.              * Load theme options
  49.              **/
  50.             if (themeSettings.themeOptions)
  51.             {
  52.                 classHolder.className = themeSettings.themeOptions;
  53.                 console.log("%c✔ Theme settings loaded", "color: #148f32");
  54.             }
  55.             else
  56.             {
  57.                 console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
  58.             }
  59.             if (themeSettings.themeURL && !document.getElementById('mytheme'))
  60.             {
  61.                 var cssfile = document.createElement('link');
  62.                 cssfile.id = 'mytheme';
  63.                 cssfile.rel = 'stylesheet';
  64.                 cssfile.href = themeURL;
  65.                 document.getElementsByTagName('head')[0].appendChild(cssfile);
  67.             }
  68.             else if (themeSettings.themeURL && document.getElementById('mytheme'))
  69.             {
  70.                 document.getElementById('mytheme').href = themeSettings.themeURL;
  71.             }
  72.             /** 
  73.              * Save to localstorage 
  74.              **/
  75.             var saveSettings = function()
  76.             {
  77.                 themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item)
  78.                 {
  79.                     return /^(nav|header|footer|mod|display)-/i.test(item);
  80.                 }).join(' ');
  81.                 if (document.getElementById('mytheme'))
  82.                 {
  83.                     themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
  84.                 };
  85.                 localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
  86.             }
  87.             /** 
  88.              * Reset settings
  89.              **/
  90.             var resetSettings = function()
  91.             {
  92.                 localStorage.setItem("themeSettings", "");
  93.             }
  95.         </script>
  96.         <style>
  97.         button {
  98.   background-color: #0997fd;
  99.   color: white;
  100.   padding: 14px 20px;
  101.   margin: 8px 0;
  102.   cursor: pointer;
  103.   width: 100%;
  104.   border:double;
  105.   border-color:#67c0ca7a;
  106. }
  108. button:hover {
  109.   opacity: 0.8;
  110. }
  112.     .page-logo img {
  113.         width: 30px!important;
  114.         height: min-content;
  115.     }
  117.     .page-logo-connexion{
  118.         width: 70px!important;
  119.         height: min-content;
  120.     }
  122.     .page-logo-text2{
  123.             font-size:24px !important ;
  124.         }
  125.     .page-logo-text3{
  126.             font-size:19px !important ;
  127.     }
  129. .bg-brand-gradient1 {
  130.     background-image: -webkit-gradient(linear, right top, left top, from(rgba(51, 148, 225, 0.18)), to(transparent))  !important;
  131.     background-image: linear-gradient(270deg, rgba(51, 148, 225, 0.18), transparent)  !important;
  132.     background-color: #0e8c8075 !important;
  133. }
  134. .custom-control-input:checked ~ .custom-control-label::before {
  135.     color: #fff !important; 
  136.     border-color: #1e70ec !important;
  137.     background-color: #0997fd!important;
  138. }
  140.         </style>
  141.         <div class="page-wrapper auth">
  142.             <div class="page-inner  bg-brand-gradient1">
  143.                 <div class="page-content-wrapper bg-transparent m-0">
  144.                     <div class="height-10 w-100 shadow-lg px-4   bg-brand-gradient1">
  145.                         <div class="d-flex align-items-center container p-0">
  146.                             <div class="page-logo width-mobile-auto m-0 align-items-center justify-content-center p-0 bg-transparent bg-img-none shadow-0 height-9 border-0">
  147.                                 <a href="javascript:void(0)" class="page-logo-link press-scale-down d-flex align-items-center">
  148.                                     <img src="{{asset('assets/img/logo.png') }}" alt="TELMA" aria-roledescription="logo">
  149.                                     <span class="page-logo-text2 page-logo-text mr-1">TELMA</span>
  150.                                 </a>
  151.                             </div>
  152.                             <!--<a href="page_register.html" class="btn-link text-white ml-auto">
  153.                                 Create Account
  154.                             </a>-->
  155.                         </div>
  156.                     </div>
  157.                     <div class="flex-1" style="background: url({{ asset('assets/img/svg/pattern-1.svg') }}) no-repeat center bottom fixed; background-size: cover;">
  158.                         <div class="container py-4 py-lg-5 my-lg-5 px-4 px-sm-0">
  159.                             <div class="row">
  160.                                 <div class="col col-md-6 col-lg-7 hidden-sm-down">
  161.                                     <h2 class="fs-xxl fw-500 mt-4 text-white"> SMART ELECTRONIC SOLUTIONS INTERNATIONAL TECHNOLOGY
  162.                                         <small class="h3 fw-300 mt-3 mb-5 text-white opacity-60">À propos de SESIT
  163. SESIT est dotée d’un bureau d’étude combine à la fois le développement hardware et software et la conception des solutions technologiques électroniques peuvent être intégrés dans plusieurs secteurs
  165. Notre atout des ingénieurs développeurs hautement qualifiés pour répondre aux exigences et cahiers de charges clients.
  166.                                         </small>
  167.                                     </h2>
  168.                                     <a href="http://sesit.tn/fr/" class="fs-lg fw-500 text-white opacity-70">en savoir plus &gt;&gt;</a>
  169.                                     
  170.                                     <div>
  171.                                         <img class="page-logo-connexion" src="{{asset('assets/img/logo_connexion.png') }}" alt="TELMA" aria-roledescription="logo">
  172.                                     </div>
  173.                                         <!--<a href="page_register.html" class="btn-link text-white ml-auto">
  174.                                             Create Account
  175.                                         </a>-->
  176.                                     <div class="d-sm-flex flex-column align-items-center justify-content-center d-md-block">
  177.                                         <div class="px-0 py-1 mt-5 text-white2 fs-nano opacity-50">
  178.                                             Retrouvez-nous sur les réseaux sociaux
  179.                                         </div>
  180.                                         <div class="d-flex flex-row opacity-70">
  181.                                             <a href="#" class="mr-2 fs-xxl text-white">
  182.                                                 <i class="fab fa-facebook-square"></i>
  183.                                             </a>
  184.                                             <a href="#" class="mr-2 fs-xxl text-white">
  185.                                                 <i class="fab fa-twitter-square"></i>
  186.                                             </a>
  187.                                             <a href="#" class="mr-2 fs-xxl text-white">
  188.                                                 <i class="fab fa-google-plus-square"></i>
  189.                                             </a>
  190.                                             <a href="#" class="mr-2 fs-xxl text-white">
  191.                                                 <i class="fab fa-linkedin"></i>
  192.                                             </a>
  193.                                         </div>
  194.                                     </div>
  195.                                 </div>
  196.                                 <div class="col-sm-12 col-md-6 col-lg-5 col-xl-4 ml-auto">
  197.                                     <h1 class="text-white fw-300 mb-3 d-sm-block d-md-none">
  198.                                         Se connecter
  199.                                     </h1>
  200.                                     <div class="card p-4 rounded-plus bg-faded">
  201.                                         <form id="js-login" novalidate="" action="{{path('connexion')}}" method="post" >
  202.                                             <div class="form-group">
  203.                                                 <label class="form-label" for="username">Nom d'utilisateur</label>
  204.                                                 <input type="text" id="username" name="login" class="form-control form-control-lg" value="" required>
  205.                                                 <div class="invalid-feedback">Champ obligatoire.</div>
  206.                                             </div>
  207.                                             <div class="form-group">
  208.                                                 <label class="form-label" for="password">Mot de passe</label>
  209.                                                 <input type="password" id="password" name="mdp" class="form-control form-control-lg" value="" required>
  210.                                                 <div class="invalid-feedback">Champ obligatoire.</div>
  211.                                             </div>
  212.                                             <!--<div class="form-group text-left">
  213.                                                 <div class="custom-control custom-checkbox">
  214.                                                     <input type="checkbox" class="custom-control-input " id="rememberme">
  215.                                                     <label class="custom-control-label  " for="rememberme"> Se souvenir de moi pour les 30 prochains jours</label>
  216.                                                 </div>
  217.                                             </div>-->
  218.                                             {% if msg!='' %}
  219.                                             <div class="alert alert-danger text-dark" role="alert">{{msg}}</div>
  220.                                             {% endif %}
  221.                                             
  222.                                             <div class="row no-gutters">
  223.                                                 
  224.                                                 <div class="col-lg-12 pl-lg-1 my-2">
  225.                                                     <button name="confirmer" value="confirmer" id="js-login-btn" type="submit" class="page-logo-text3">Se connecter </button>
  226.                                                 </div>
  227.                                             </div>
  228.                                         </form>
  229.                                     </div>
  230.                                 </div>
  231.                             </div>
  232.                              
  233.                             <!--<div class="position-absolute pos-bottom pos-left pos-right p-3 text-center text-white">
  234.                                 <a href='https://www.gotbootstrap.com' class='text-white opacity-40 fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a>
  235.                             </div>-->
  236.                        
  237.                         </div>
  238.                     </div>
  239.                 </div>
  240.             </div>
  241.         </div>
  242.         <!-- BEGIN Color profile -->
  243.         <!-- this area is hidden and will not be seen on screens or screen readers -->
  244.         <!-- we use this only for CSS color refernce for JS stuff -->
  245.         <p id="js-color-profile" class="d-none">
  246.             <span class="color-primary-50"></span>
  247.             <span class="color-primary-100"></span>
  248.             <span class="color-primary-200"></span>
  249.             <span class="color-primary-300"></span>
  250.             <span class="color-primary-400"></span>
  251.             <span class="color-primary-500"></span>
  252.             <span class="color-primary-600"></span>
  253.             <span class="color-primary-700"></span>
  254.             <span class="color-primary-800"></span>
  255.             <span class="color-primary-900"></span>
  256.             <span class="color-info-50"></span>
  257.             <span class="color-info-100"></span>
  258.             <span class="color-info-200"></span>
  259.             <span class="color-info-300"></span>
  260.             <span class="color-info-400"></span>
  261.             <span class="color-info-500"></span>
  262.             <span class="color-info-600"></span>
  263.             <span class="color-info-700"></span>
  264.             <span class="color-info-800"></span>
  265.             <span class="color-info-900"></span>
  266.             <span class="color-danger-50"></span>
  267.             <span class="color-danger-100"></span>
  268.             <span class="color-danger-200"></span>
  269.             <span class="color-danger-300"></span>
  270.             <span class="color-danger-400"></span>
  271.             <span class="color-danger-500"></span>
  272.             <span class="color-danger-600"></span>
  273.             <span class="color-danger-700"></span>
  274.             <span class="color-danger-800"></span>
  275.             <span class="color-danger-900"></span>
  276.             <span class="color-warning-50"></span>
  277.             <span class="color-warning-100"></span>
  278.             <span class="color-warning-200"></span>
  279.             <span class="color-warning-300"></span>
  280.             <span class="color-warning-400"></span>
  281.             <span class="color-warning-500"></span>
  282.             <span class="color-warning-600"></span>
  283.             <span class="color-warning-700"></span>
  284.             <span class="color-warning-800"></span>
  285.             <span class="color-warning-900"></span>
  286.             <span class="color-success-50"></span>
  287.             <span class="color-success-100"></span>
  288.             <span class="color-success-200"></span>
  289.             <span class="color-success-300"></span>
  290.             <span class="color-success-400"></span>
  291.             <span class="color-success-500"></span>
  292.             <span class="color-success-600"></span>
  293.             <span class="color-success-700"></span>
  294.             <span class="color-success-800"></span>
  295.             <span class="color-success-900"></span>
  296.             <span class="color-fusion-50"></span>
  297.             <span class="color-fusion-100"></span>
  298.             <span class="color-fusion-200"></span>
  299.             <span class="color-fusion-300"></span>
  300.             <span class="color-fusion-400"></span>
  301.             <span class="color-fusion-500"></span>
  302.             <span class="color-fusion-600"></span>
  303.             <span class="color-fusion-700"></span>
  304.             <span class="color-fusion-800"></span>
  305.             <span class="color-fusion-900"></span>
  306.         </p>
  307.         <!-- END Color profile -->
  308.         <!-- base vendor bundle: 
  309.              DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations 
  310.                         + pace.js (recommended)
  311.                         + jquery.js (core)
  312.                         + jquery-ui-cust.js (core)
  313.                         + popper.js (core)
  314.                         + bootstrap.js (core)
  315.                         + slimscroll.js (extension)
  316.                         + app.navigation.js (core)
  317.                         + ba-throttle-debounce.js (core)
  318.                         + waves.js (extension)
  319.                         + smartpanels.js (extension)
  320.                         + src/../jquery-snippets.js (core) -->
  321.         <script src="{{asset('assets/js/vendors.bundle.js') }}"></script>
  322.         <script src="{{asset('assets/js/app.bundle.js') }}"></script>
  323.         <script>
  324.             $("#js-login-btn").click(function(event)
  325.             {
  327.                 // Fetch form to apply custom Bootstrap validation
  328.                 var form = $("#js-login")
  330.                 if (form[0].checkValidity() === false)
  331.                 {
  332.                     event.preventDefault()
  333.                     event.stopPropagation()
  334.                 }
  336.                 form.addClass('was-validated');
  337.                 // Perform ajax submit here...
  338.             });
  340.         </script>
  341.     </body>
  342.     <!-- END Body -->
  343. </html>