templates/view/lost-password.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,h2 {
  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.             }
  227.             label {
  228.             text-align: center !important;
  229.             line-height:1.8 !important;
  231.         }
  232.         }
  234.         @media only screen and (min-width: 601px) and (max-width: 1200px) and (orientation: portrait) {
  235.             h2{
  236.                     margin: 0 auto !important;
  237.                     line-height: 0 !important;
  238.             }
  239.             .p-inputtext {
  240.                 font-size: 1.5rem !important;
  241.             }
  243.             .formWrapper > div {
  244.                 width: 100% !important;
  245.                 line-height: 4 !important;
  246.             }
  248.             button {
  249.                 transform: scale(1.6);
  250.             }
  251.         }
  253.         :root {
  254.             --surface-a: #ffffff;
  255.             --surface-b: #f8f9fa;
  256.             --surface-c: #e9ecef;
  257.             --surface-d: #dee2e6;
  258.             --surface-e: #ffffff;
  259.             --surface-f: #ffffff;
  260.             --text-color: #495057;
  261.             --text-color-secondary: #6c757d;
  262.             --primary-color: #2196f3;
  263.             --primary-color-text: #ffffff;
  264.             --font-family: 'Montserrat', sans-serif !important;
  265.         }
  267.         * {
  268.             box-sizing: border-box;
  269.         }
  271.         .p-inputtext {
  272.             font-family: 'Montserrat', sans-serif !important;
  273.             font-size: 1rem;
  274.             color: #495057;
  275.             background: #ffffff;
  276.             padding: 0.5rem 0.5rem;
  277.             border: 1px solid #ced4da;
  278.             appearance: none;
  279.             border-radius: 3px;
  280.         }
  282.         .p-inputtext:enabled:focus {
  283.             outline: 0 none;
  284.             outline-offset: 0;
  285.             box-shadow: 0 0 0 0.2rem #a6d5fa;
  286.             border-color: #2196f3;
  287.         }
  289.         .p-button {
  290.             color: #ffffff;
  291.             background: #2196f3;
  292.             border: 1px solid #2196f3;
  293.             padding: 0.5rem 1rem;
  294.             font-size: 1rem;
  295.             border-radius: 3px;
  296.         }
  298.         form {
  299.             display: flex;
  300.             flex-direction: column;
  301.             align-items: center;
  302.         }
  303.         .p-text-center {
  304.             text-align: center !important;
  305.         }
  306.         form > div > label {
  307.             text-align: center !important;
  308.             line-height:1.5;
  310.         }
  311.         .back-to-login{
  312.             text-decoration:none;
  313.         }
  314.     </style>
  315. {% endblock %}
  317. {% block title %}Lost password - {{ parent() }}{% endblock %}
  319. {% block body %}
  320.     <section class="container">
  321.         <div class="loginWrapper display-flex p-col-12 p-md-12 p-xl-6">
  322.             <div class="formWrapper p-col-12 p-lg-8 p-shadow-4 p-py-5">
  323.                         <img src="assets/logo.svg" width="70%" alt="morava service logo">
  324.                 <div class="p-fluid p-mt-3">
  325.                    <h2>
  326.                     {% trans %}Did you{% endtrans %} <span>{% trans %}forget your password?{% endtrans %}</span>
  327.                 </h2>
  329.                 {% if error_message is defined %}
  330.                     <p>{{ error_message }}</p>
  331.                 {% endif %}
  333.                 {{ form_start(form) }}
  334.                     {{ form_row(form.email, {'label': 'Enter your email address below to receive instructions on how to reset your password'|trans, 'attr': {'placeholder': 'Enter your email address'|trans,'class': 'p-col-12 p-lg-9 p-inputtext p-mt-3','autofocus': 'autofocus'}}) }}
  336.                     <button type="submit" class="p-button p-mt-5">
  337.                         {% trans %}Send email{% endtrans %}
  338.                     </button>
  339.                 {{ form_end(form) }}
  340.                 
  341.                 <a href="/login" class="back-to-login">
  342.                   &#8678;  {% trans %}Sign In{% endtrans %}
  343.                 </a>
  344.                 </div>
  345.             </div>
  346.         </div>
  347.         <div class="imageDiv display-flex p-col-12 p-lg-6">
  348.             <img
  349.                     src="assets/forgot_password-illustration.svg"
  350.                     alt="Login cover picture"
  351.                     width="70%"
  352.             />
  353.         </div>
  354.     </section>
  355. {% endblock %}