templates/security/login.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Sign in | Flannery</title>
  7.     <link rel="icon" href="{{ asset('Images/close-button.eps.ico') }}" type="image/gif" sizes="32x32">
  8.     <meta name="author" content="LTS">
  9.     <meta name="description" content="Signin | Flannery">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <!--  custome & bootstrap css  -->
  12.     <link rel="stylesheet" href="{{ asset('css/style.css') }}">
  13.     <link rel="stylesheet" href="{{ asset('css/media.css') }}">
  14.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  15.     <link rel="stylesheet" href="{{ asset('css/w3.css')}}">
  16.     <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/css/cmxform.css">
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  18.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  19.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin="anonymous"></script>
  20.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js" crossorigin="anonymous"></script>
  21.     <style>
  22.         .cb-slideshow,
  23.         .cb-slideshow:after {
  24.             position: relative;
  25.             width: 100%;
  26.             height: 100%;
  27.             top: 0px;
  28.             left: 0px;
  29.             z-index: 0;
  30.         }
  32.         .cb-slideshow:after {
  33.             content: '';
  34.             background: transparent url(../images/pattern.png) repeat top left;
  35.         }
  37.         .cb-slideshow li span {
  38.             width: 100%;
  39.             height: 100%;
  40.             position: absolute;
  41.             top: 0px;
  42.             left: 0px;
  43.             color: transparent;
  44.             background-size: cover;
  45.             background-position: 50% 50%;
  46.             background-repeat: none;
  47.             opacity: 0;
  48.             z-index: 0;
  49.             animation: imageAnimation 36s linear infinite 0s;
  50.         }
  52.         .cb-slideshow li div {
  53.             z-index: 1000;
  54.             position: absolute;
  55.             bottom: 30px;
  56.             left: 0px;
  57.             width: 100%;
  58.             text-align: center;
  59.             opacity: 0;
  60.             color: #fff;
  61.             animation: titleAnimation 36s linear infinite 0s;
  62.         }
  64.         .cb-slideshow li div h3 {
  65.             font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  66.             font-size: 240px;
  67.             padding: 0;
  68.             line-height: 200px;
  69.         }
  71.         .cb-slideshow li:nth-child(1) span {
  72.             background-image: url({{ asset('Images/banner-img1.jpg') }});
  73.         }
  75.         .cb-slideshow li:nth-child(2) span {
  76.             background-image: url({{ asset('Images/banner-img2.jpg') }});
  77.             animation-delay: 6s;
  78.         }
  80.         .cb-slideshow li:nth-child(3) span {
  81.             background-image: url({{ asset('Images/banner-img3.jpg') }});
  82.             animation-delay: 12s;
  83.         }
  85.         .cb-slideshow li:nth-child(4) span {
  86.             background-image: url({{ asset('Images/banner-img1.jpg') }});
  87.             animation-delay: 18s;
  88.         }
  90.         .cb-slideshow li:nth-child(5) span {
  91.             background-image: url({{ asset('Images/banner-img2.jpg') }});
  92.             animation-delay: 24s;
  93.         }
  95.         .cb-slideshow li:nth-child(6) span {
  96.             background-image: url({{ asset('Images/banner-img3.jpg') }});
  97.             animation-delay: 30s;
  98.         }
  100.         .cb-slideshow li:nth-child(2) div {
  101.             animation-delay: 6s;
  102.         }
  104.         .cb-slideshow li:nth-child(3) div {
  105.             animation-delay: 12s;
  106.         }
  108.         .cb-slideshow li:nth-child(4) div {
  109.             animation-delay: 18s;
  110.         }
  112.         .cb-slideshow li:nth-child(5) div {
  113.             animation-delay: 24s;
  114.         }
  116.         .cb-slideshow li:nth-child(6) div {
  117.             animation-delay: 30s;
  118.         }
  121.         .no-cssanimations .cb-slideshow li span {
  122.             opacity: 1;
  123.         }
  125.         @keyframes imageAnimation {
  126.             0% {
  127.                 opacity: 0;
  128.                 animation-timing-function: ease-in;
  129.             }
  131.             8% {
  132.                 opacity: 1;
  133.                 animation-timing-function: ease-out;
  134.             }
  136.             17% {
  137.                 opacity: 1
  138.             }
  140.             25% {
  141.                 opacity: 0
  142.             }
  144.             100% {
  145.                 opacity: 0
  146.             }
  147.         }
  149.         .cus-slideshow {
  150.             list-style-type: none;
  151.             padding: 0px;
  152.         }
  154.         .login-wrapper {
  155.             display: flex;
  156.             height: 100vh;
  157.         }
  159.         .login-slider {
  160.             width: 70%;
  161.         }
  163.         .login-form {
  164.             width: 30%;
  165.             background: white;
  166.             display: flex;
  167.             justify-content: center;
  168.             align-items: center;
  169.             flex-direction: column;
  170.             position: relative;
  171.         }
  173.         /*    form styles    */
  175.         input[type=text],
  176.         input[type=password] {
  177.             width: 100%;
  178.             padding: 15px;
  179.             margin: 5px 0 22px 0;
  180.             display: inline-block;
  181.             border: none;
  182.             background: #f1f1f1;
  183.         }
  185.         input[type=text]:focus,
  186.         input[type=password]:focus {
  187.             background-color: #ddd;
  188.             outline: none;
  189.         }
  191.         .registerbtn {
  192.             background-color: #04AA6D;
  193.             color: white;
  194.             padding: 16px 20px;
  195.             margin: 8px 0;
  196.             border: none;
  197.             cursor: pointer;
  198.             width: 100%;
  199.             opacity: 0.9;
  200.         }
  202.         .registerbtn:hover {
  203.             opacity: 1;
  204.         }
  206.         a {
  207.             color: dodgerblue;
  208.         }
  210.         .signin {
  211.             background-color: #f1f1f1;
  212.             text-align: center;
  213.         }
  215.         .login-form-area {
  216.             width: 400px;
  217.         }
  219.         .forgot-password-txt {
  220.             text-align: right;
  221.             margin-bottom: 18px;
  222.         }
  224.         .lts {
  225.             position: absolute;
  226.             bottom: 0;
  227.         }
  229.         .lts p {
  230.             margin: 20px 0px;
  231.         }
  233.         .form-title {
  234.             margin-bottom: 28px;
  235.         }
  237.         .form-title h1 {
  238.             font-weight: 500;
  239.             margin: 0 0 3px 0;
  240.             color: #145994;
  241.             font-size: 30px;
  242.         }
  244.         .form-title p {
  245.             color: #00000061;
  246.         }
  248.         .loginbtn {
  249.             background-color: #0568bd;
  250.         }
  252.         .password-area {
  253.             margin-bottom: 10px !important;
  254.         }
  256.         .form-logos {
  257.             display: flex;
  258.             margin-bottom: 38px;
  259.             width: 100%;
  260.             justify-content: center;
  261.             border: 2px solid #00000014;
  262.         }
  264.         .form-logos img:not(:last-child) {
  265.             margin-right: 8px;
  266.         }
  268.         /*        media quries     */
  269.         /* ----------- iPad 1, 2, Mini and Air ----------- */
  271.         /* Portrait and Landscape */
  272.         @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  273.             .login-form {
  274.                 width: 100% !important;
  275.             }
  277.             .login-slider {
  278.                 display: none;
  279.             }
  280.         }
  282.         /* ----------- Non-Retina Screens ----------- */
  283.         @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  284.             .login-slider {
  285.                 width: 60%;
  286.             }
  288.             .login-form {
  289.                 width: 40%;
  290.             }
  292.             .login-form-area {
  293.                 width: 322px !important;
  294.             }
  295.         }
  297.         /* ----------- Retina Screens ----------- */
  298.         @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  299.             .login-slider {
  300.                 width: 60%;
  301.             }
  303.             .login-form {
  304.                 width: 40%;
  305.             }
  307.             .login-form-area {
  308.                 width: 322px !important;
  309.             }
  310.         }
  314.         /*        device width 1200px custom     */
  315.         @media (max-width: 1200px) {
  318.             .login-slider {
  319.                 width: 60%;
  320.             }
  322.             .login-form {
  323.                 width: 40%;
  324.             }
  326.             .login-form-area {
  327.                 width: 380px !important;
  328.             }
  330.         }
  332.         /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
  333.         /* Portrait and Landscape */
  334.         @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  335.             .login-form {
  336.                 width: 100% !important;
  337.             }
  339.             .login-slider {
  340.                 display: none;
  341.             }
  343.             .login-form-area {
  344.                 width: 322px !important;
  345.             }
  346.         }
  348.         /* ----------- iPhone 6+, 7+ and 8+ ----------- */
  349.         /* Portrait and Landscape */
  350.         @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  351.             .login-form {
  352.                 width: 100% !important;
  353.             }
  355.             .login-slider {
  356.                 display: none;
  357.             }
  359.             .login-form-area {
  360.                 width: 322px !important;
  361.             }
  362.         }
  364.         /* ----------- iPhone X ----------- */
  365.         /* Portrait and Landscape */
  366.         @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  367.             .login-form {
  368.                 width: 100% !important;
  369.             }
  371.             .login-slider {
  372.                 display: none;
  373.             }
  375.             .login-form-area {
  376.                 width: 322px !important;
  377.             }
  378.         }
  380.         .password-field {
  381.             position: relative;
  382.             margin-top: 15px;
  383.         }
  385.         .field-icon {
  386.             position: absolute;
  387.             top: 52px;
  388.             right: 19px;
  389.         }
  391.     </style>
  392. </head>
  394. <body>
  395.     <!--                       -->
  396.     <!--       login page      -->
  397.     <!--                       -->
  398.     <div class="login-wrapper">
  399.         <!--                         -->
  400.         <!--       login slider      -->
  401.         <!--                         -->
  402.         <div class="login-slider">
  403.             <ul class="cb-slideshow cus-slideshow">
  404.                 <li> <span>Image 01</span> </li>
  405.                 <li> <span>Image 02</span> </li>
  406.                 <li> <span>Image 03</span> </li>
  407.                 <li> <span>Image 04</span> </li>
  408.                 <li> <span>Image 05</span> </li>
  409.                 <li> <span>Image 06</span> </li>
  410.             </ul>
  411.         </div>
  412.         <!--                       -->
  413.         <!--       login form      -->
  414.         <!--                       -->
  415.         <div class="login-form">
  416.             <form  method="post" action="{{path('app_login')}}" id="signin-form" class="login-form-area">
  417.                 <div class="cus-container">
  418.                     <div class="form-logos"> <img src="{{ asset('Images/flannery-logo.png') }}" class="login-imgs"> </div>
  419.                     <div class="form-title">
  420.                         <h1>Welcome,</h1>
  421.                         <p>Sign in to your account</p>
  422.                     </div>
  423.                     <label for="email"><b>{{ 'Email'|trans }}</b></label>
  424.                     <input type="text" placeholder="Enter {{ 'Email'|trans }}" name="email" id="inputEmail" required>
  425.                     <div class="password-field">
  426.                         <label for="psw"><b>{{ 'Password'|trans }}</b></label>
  427.                         <input class="password-area" type="password" id="inputPassword" placeholder="Enter {{ 'Password'|trans }}" name="password" required> <span toggle="#inputPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
  428.                     </div>
  430.                     <p class="forgot-password-txt"><a href="/reset-password">Forgot Password?</a></p>
  431.                     <button type="submit" class="registerbtn loginbtn">Login</button>
  432.                 </div>
  433.                     {% if error %}
  434.                             <div class="text-center">
  435.                                 <label id="inputEmail-error" class="error" style="font-weight: 100 !important; margin-bottom: 0px !important; font-size: 14px;">Invalid login or password.</label>
  436.                             </div>
  437.                                 {% endif %}
  438.                 <input type="hidden" name="_csrf_token"
  439.                value="{{ csrf_token('authenticate') }}"
  440.                >
  441.             </form>
  442.             <div class="lts">
  443.                 <p>Powered by <a href="https://www.leantransitionsolutions.com">Lean Transition Solutions</a>.
  444.                 <a href="https://www.leantransitionsolutions.com/"> <img src="/assets/Images/lts_logo-new-footer.png?ver=3.1" height="20"> </a>
  445.                 </p>
  446.             </div>
  447.         </div>
  448.     </div>
  449.     <script type="text/javascript">
  450.     $("#signin-form").validate();
  451.         $( document ).ready(function() {
  452.            $( document ).on('click', '.toggle-password',function() {
  453.                 $(this).toggleClass("fa-eye fa-eye-slash");
  454.                 var input = $($(this).attr("toggle"));
  455.                 if (input.attr("type") == "password") {
  456.                     input.attr("type", "text");
  457.                 } else {
  458.                     input.attr("type", "password");
  459.                 }
  460.             });
  461.             
  463.         });
  465.     </script>
  466. </body>
  468. </html>