templates/view/login.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/base.html.twig' %}
  3. {% block meta %}
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <meta content="#0095ab" name="theme-color" />
  6.     <meta name="description" content="Morava servis login" />
  7. {% endblock %}
  9. {% block stylesheets %}
  10.     <link href="assets/logo.svg" rel="icon" type="image/svg" />
  11.     <link rel="apple-touch-icon" href="assets/logo.svg" />
  13.     <link
  14.             rel="preload"
  15.             href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  16.             as="style"
  17.             onload="this.onload=null;this.rel='stylesheet'"
  18.     />
  19.     <noscript>
  20.         <link
  21.                 rel="stylesheet"
  22.                 href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  23.         />
  24.     </noscript>
  25.     <link
  26.             rel="stylesheet"
  27.             href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  28.     />
  29.     <link rel="preconnect" href="https://fonts.gstatic.com" />
  30.     <link
  31.             href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
  32.             rel="preload"
  33.             as="font"
  34.             type="text/css"
  35.             crossorigin="anonymous"
  36.     />
  38.     <style>
  39.         body {
  40.             font-family: 'Montserrat', sans-serif !important;
  41.         }
  42.         a {
  43.             color: #000c40 !important;
  44.         }
  45.         .p-col-12 {
  46.             -webkit-box-flex: 0;
  47.             -ms-flex: 0 0 auto;
  48.             flex: 0 0 auto;
  49.             padding: 0.5rem;
  50.         }
  52.         .p-col-12 {
  53.             width: 100%;
  54.         }
  56.         .p-md-12,
  57.         .p-lg-6,
  58.         .p-lg-8,
  59.         .p-lg-9,
  60.         .p-xl-6 {
  61.             padding: 0.5rem;
  62.         }
  64.         @media screen and (min-width: 768px) {
  65.             .p-md-12 {
  66.                 -webkit-box-flex: 0;
  67.                 -ms-flex: 0 0 auto;
  68.                 flex: 0 0 auto;
  69.             }
  71.             .p-md-12 {
  72.                 width: 100%;
  73.             }
  74.         }
  76.         @media screen and (min-width: 992px) {
  77.             .p-lg-6,
  78.             .p-lg-8,
  79.             .p-lg-9 {
  80.                 -webkit-box-flex: 0;
  81.                 -ms-flex: 0 0 auto;
  82.                 flex: 0 0 auto;
  83.             }
  85.             .p-lg-6 {
  86.                 width: 50%;
  87.             }
  89.             .p-lg-8 {
  90.                 width: 66.6667%;
  91.             }
  93.             .p-lg-9 {
  94.                 width: 75%;
  95.             }
  96.         }
  98.         @media screen and (min-width: 1200px) {
  99.             .p-xl-6 {
  100.                 -webkit-box-flex: 0;
  101.                 -ms-flex: 0 0 auto;
  102.                 flex: 0 0 auto;
  103.             }
  105.             .p-xl-6 {
  106.                 width: 50%;
  107.             }
  108.         }
  110.         .p-mt-3 {
  111.             margin-top: 1rem !important;
  112.         }
  114.         .p-mt-5 {
  115.             margin-top: 2rem !important;
  116.         }
  118.         .p-py-5 {
  119.             padding-top: 2rem !important;
  120.             padding-bottom: 2rem !important;
  121.         }
  123.         .p-shadow-4 {
  124.             box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
  125.             0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  126.         }
  128.         button {
  129.             border-radius: 0;
  130.         }
  132.         .p-button {
  133.             margin: 0;
  134.             display: inline-flex;
  135.             align-items: center;
  136.             vertical-align: bottom;
  137.             text-align: center;
  138.             overflow: hidden;
  139.             position: relative;
  140.         }
  142.         .p-inputtext {
  143.             margin: 0;
  144.         }
  146.         .p-fluid .p-inputtext {
  147.             width: 100%;
  148.         }
  150.         button {
  151.             background: #000c40 !important;
  152.            
  153.         }
  155.         button:hover {
  156.             opacity: 0.7;
  157.             cursor: pointer;
  158.         }
  160.         .container {
  161.             width: 100%;
  162.             height: 100vh;
  163.             display: flex;
  164.             flex-wrap: wrap;
  165.         }
  167.         .formWrapper {
  168.             display: flex;
  169.             flex-direction: column;
  170.             align-items: center;
  171.             justify-content: space-evenly;
  172.             background-color: #fff;
  173.             border-radius: 5px;
  174.         }
  176.         .formWrapper > div {
  177.             width: 70% !important;
  178.         }
  180.         .formWrapper button > img {
  181.             width: 20% !important;
  182.         }
  184.         .formWrapper > button {
  185.             display: flex;
  186.             justify-content: space-between;
  187.         }
  189.         .container > div:first-child {
  190.             background: #0095ab;
  191.         }
  193.         .display-flex {
  194.             display: flex;
  195.             justify-content: center;
  196.             align-items: center;
  197.         }
  199.         input:not(:focus) {
  200.             background-color: #e9e5e5 !important;
  201.         }
  203.         @media only screen and (max-width: 1200px) {
  204.             .imageDiv {
  205.                 display: none !important;
  206.             }
  208.             .container > div:first-child {
  209.                 background: #fff;
  210.             }
  212.             .p-shadow-4 {
  213.                 box-shadow: none !important;
  214.             }
  216.             .loginWrapper {
  217.                 max-height: 100vh;
  218.             }
  220.             .formWrapper {
  221.                 height: 100vh;
  222.             }
  224.             .formWrapper > div {
  225.                 width: 100% !important;
  226.                 line-height: 4;
  227.             }
  228.         }
  230.         @media only screen and (min-width: 601px) and (max-width: 1200px) and (orientation: portrait) {
  231.             .p-inputtext {
  232.                 font-size: 1.5rem !important;
  233.             }
  235.             .formWrapper > div {
  236.                 width: 100% !important;
  237.                 line-height: 7 !important;
  238.             }
  240.             button {
  241.                 transform: scale(1.6);
  242.             }
  243.         }
  245.         :root {
  246.             --surface-a: #ffffff;
  247.             --surface-b: #f8f9fa;
  248.             --surface-c: #e9ecef;
  249.             --surface-d: #dee2e6;
  250.             --surface-e: #ffffff;
  251.             --surface-f: #ffffff;
  252.             --text-color: #495057;
  253.             --text-color-secondary: #6c757d;
  254.             --primary-color: #2196f3;
  255.             --primary-color-text: #ffffff;
  256.             --font-family: 'Montserrat', sans-serif !important;
  257.         }
  259.         * {
  260.             box-sizing: border-box;
  261.         }
  263.         .p-inputtext {
  264.             font-family: 'Montserrat', sans-serif !important;
  265.             font-size: 1rem;
  266.             color: #495057;
  267.             background: #ffffff;
  268.             padding: 0.5rem 0.5rem;
  269.             border: 1px solid #ced4da;
  270.             appearance: none;
  271.             border-radius: 3px;
  272.         }
  274.         .p-inputtext:enabled:focus {
  275.             outline: 0 none;
  276.             outline-offset: 0;
  277.             box-shadow: 0 0 0 0.2rem #a6d5fa;
  278.             border-color: #2196f3;
  279.         }
  281.         .p-button {
  282.             color: #ffffff;
  283.             background: #2196f3;
  284.             border: 1px solid #2196f3;
  285.             padding: 0.5rem 1rem;
  286.             font-size: 1rem;
  287.             border-radius: 3px;
  288.         }
  290.         form {
  291.             display: flex;
  292.             flex-direction: column;
  293.             align-items: center;
  294.         }
  295.         .p-text-center {
  296.             text-align: center !important;
  297.         }
  298.         .p-forget-password {
  299.             align-self: flex-start !important;
  300.             text-decoration: none !important;
  301.             font-size: .8rem;
  302.         }
  303.     </style>
  304. {% endblock %}
  306. {% block title %}Login - {{ parent() }}{% endblock %}
  308. {% block body %}
  309.     <section class="container">
  310.         <div class="loginWrapper display-flex p-col-12 p-md-12 p-xl-6">
  311.             <div class="formWrapper p-col-12 p-lg-8 p-shadow-4 p-py-5">
  312.                 <img src="assets/logo.svg" width="70%" alt="Morava Servis Logo" />
  313.                 <div class="p-fluid p-mt-3 p-text-center">
  314.                     {{ form_start(form) }}
  315.                         {{ form_widget(form.username, {'attr': {'placeholder': 'Enter your email address'|trans, 'autocomplete': 'email', 'class': 'p-col-12 p-lg-9 p-inputtext','autofocus': 'autofocus'} }) }}
  316.                         {{ form_widget(form.password, {'attr': {'placeholder': 'Enter your password'| trans, 'autocomplete': 'password', 'class': 'p-col-12 p-lg-9 p-mt-3 p-inputtext'} }) }}
  317.                         <a href="/lost-password" class="p-forget-password p-mt-3">{% trans %} Forgot your password? {% endtrans %}</a>
  318.                         
  319.                         <button type="submit" class="p-button p-mt-5">
  320.                             {% trans %} Sign in {% endtrans %}
  321.                             <img src="assets/login-icon.svg" alt="Login icon" width="50%" />
  322.                         </button>
  323.                        
  324.                     {{ form_end(form) }}
  325.                      <p>{% trans %} Don't have an account? Register {% endtrans %} <a href="/registration">{% trans %} here! {% endtrans %}</a></p>
  326.                 </div>
  327.             </div>
  328.         </div>
  329.         <div class="imageDiv display-flex p-col-12 p-lg-6">
  330.             <img
  331.                     src="assets/authentication_isometric.svg"
  332.                     alt="Login cover picture"
  333.                     width="100%"
  334.             />
  335.         </div>
  336.     </section>
  337. {% endblock %}