templates/modules/auth/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 http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <script src="https://www.google.com/recaptcha/api.js?render=6LdO5KEaAAAAAMo8D2jUQU3qHkFYbWBKdGzoDOoA" async defer></script>
  8.   <script src="https://auth.venderes.com/static/_assets/account.js"></script>
  9.   <script>
  10.     const auth = new AccountManager(
  11.       '{{content.data.rp}}',
  12.       [1,2,3],
  13.       '.app-formObject',
  14.       '[data-formInp="{% verbatim %}{{name}}{% endverbatim %}"]',
  15.       'wrong-inp'
  16.     );
  17.     auth.saveRedirectEndpoint('{{content.data.pt}}');
  18.     auth.error_func = () => {PROGRESSBAR(false);};
  20.     function PROGRESSBAR(status) {
  21.       var changeto = 'none';
  22.       if(status){ changeto = ''; }
  23.       document.getElementsByClassName("PROGRESSBAR")[0].style.display = changeto;
  24.     }
  25.   </script>
  26.   <title>Venderes Auth | {{ title }} | venderes.com</title>
  27. </head>
  28. <style>
  29.   @font-face{
  30.     font-family:FoRegular;
  31.     src:url(/auth_assets/fonts/Regular.ttf);
  32.     font-display:swap
  33.   }
  34.   @font-face{
  35.     font-family:FoEBold;
  36.     src:url(/auth_assets/fonts/eBold.ttf);
  37.     font-display:swap
  38.   }
  39.   @font-face{
  40.     font-family:FoBold;
  41.     src:url(/auth_assets/fonts/Bold.ttf);
  42.     font-display:swap
  43.   }
  44.   @font-face{
  45.     font-family:FoMedium;
  46.     src:url(/auth_assets/fonts/Medium.ttf);
  47.     font-display:swap
  48.   }
  49.   @font-face{
  50.     font-family:FoLight;
  51.     src:url(/auth_assets/fonts/Light.ttf);
  52.     font-display:swap
  53.   }
  55.   * { 
  56.     margin: 0;
  57.     padding: 0;
  58.     box-sizing: border-box;
  59.     -webkit-tap-highlight-color: transparent;
  60.     -moz-tap-highlight-color: transparent;
  61.     text-size-adjust: none;
  62.     -webkit-text-size-adjust: none;
  63.     font-family: FoRegular;
  64.   }
  66.   html {
  67.     min-height: 100%;
  68.     height: 100%;
  69.   }
  71.   body {
  72.     background-color: #fcfcfc;
  73.     height: 100%;
  74.   }
  76.   .PROGRESSBAR, .PROGRESSBAR::after {
  77.     height: 5px;
  78.     width: 100%;
  79.     margin: 0;
  80.   }
  82.   .PROGRESSBAR::before {
  83.     content: "";
  84.     width: 100%;
  85.     height: 100%;
  86.     position: fixed;
  87.     background-color: rgba(19, 19, 19, 0.5);
  88.     z-index: -1;
  89.   }
  91.   .PROGRESSBAR {
  92.     background-color: #e8e8e8;
  93.     display: flex;
  94.     position: fixed;
  95.     z-index: 999999999;
  96.     top: 0;
  97.   }
  99.   .PROGRESSBAR::after {
  100.     background-color: #ffbd77;
  101.     content: "";
  102.     animation: progressbar 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  103.   }
  105.   @-webkit-keyframes progressbar {
  106.     0% { margin-left: 0px; margin-right: 100%; }
  107.     50% { margin-left: 25%; margin-right: 0%; }
  108.     100% { margin-left: 100%; margin-right: 0; }
  109.   }
  110.   @keyframes progressbar {
  111.     0% { margin-left: 0px; margin-right: 100%; }
  112.     50% { margin-left: 25%; margin-right: 0%; }
  113.     100% { margin-left: 100%; margin-right: 0; }
  114.   }
  116.   .container {
  117.     width: 100%;
  118.     min-height: 100%;
  119.     display: flex;
  120.   }
  122.   .form-container {
  123.     width: 100%;
  124.     max-width: 600px;
  125.     background-color: transparent;
  126.     flex: none;
  127.     padding:50px;
  128.     display:flex;
  129.     flex-direction: column;
  130.     justify-content: space-between;
  131.   }
  133.   .form-logo, .form-logo-mini {
  134.     height: 30px;
  135.     width: 100%;
  136.     background: var(--logourl) no-repeat center center / contain;
  137.     flex: none;
  138.   }
  140.   .form-logo-mini {
  141.     height: 20px;
  142.   }
  144.   .form-content {
  145.     flex: auto;
  146.     margin:20px 0;
  147.     display: flex;
  148.     flex-direction: column;
  149.     justify-content: center;
  150.   }
  152.   .form-content-title {
  153.     font-family: FoLight;
  154.     font-size: 40px;
  155.     color: #2c2c2c;
  156.     letter-spacing: -1px;
  157.     text-align: center;
  158.     margin:20px 0 40px;
  159.     font-variant: all-petite-caps;
  160.   }
  162.   hr {
  163.     border:none;
  164.     border-top:1px solid #ddd;
  165.   }
  167.   .form-content-inputs-container > * {
  168.     display:block;
  169.   }
  171.   .form-content-inputs-container button {
  172.     margin: 10px 0;
  173.     width: 100%;
  174.     border: none;
  175.     padding: 20px 25px;
  176.     font-size: 18px;
  177.     outline: none;
  178.     border-radius: 22px;
  179.     color: white;
  180.     font-family: FoBold;
  181.     background-repeat: no-repeat;
  182.     background-size: cover;
  183.     background-position: center center;
  184.     background-image: linear-gradient(119deg, #131313, transparent),  url(/auth_assets/authenticate_module/btn-rainbow.png);
  185.     background-color: #101010;
  186.     transition: 0.3s background-color;
  187.     cursor: pointer;
  188.   }
  190.   .form-content-inputs-container button:hover,
  191.   .form-content-inputs-container button:focus {
  192.     background-color: #464646;
  193.   }
  195.   .form-content-inputs-container label {
  196.     display:flex;
  197.     flex-direction: column;
  198.   }
  200.   .form-content-inputs-container label span {
  201.     font-size: 17px;
  202.     font-family: FoMedium;
  203.     color:#2c2c2c;
  204.     padding: 0 11px;
  205.   }
  207.   .form-content-inputs-container label input {
  208.     margin:7px 0 12px;
  209.     background-color: #efefef;
  210.     border:none;
  211.     padding: 15px 30px;
  212.     font-size: 17px;
  213.     outline: none;
  214.     border-radius: 22px;
  215.     transition: 0.3s background-color;
  216.   }
  218.   .inputs-others {
  219.     display: flex;
  220.     gap:10px;
  221.   }
  223.   .inputs-others a {
  224.     width:100%;
  225.   }
  227.   .inputs-others button {
  228.     font-size: 15px;
  229.     background-color: #efefef;
  230.     background-image: none;
  231.     color:black;
  232.   }
  234.   .inputs-others button:hover,
  235.   .inputs-others button:focus {
  236.     background-color: #b9b9b9;
  237.   }
  239.   .outside-container {
  240.     flex: auto;
  241.     background-color: #efefef;
  242.     background-repeat: no-repeat;
  243.     background-size: cover;
  244.     background-position: center center;
  245.     background-image: url(/auth_assets/authenticate_module/login_bg.webp);
  246.   }
  248.   .backto-container {
  249.     position: fixed;
  250.     top:0;
  251.     right: 0;
  252.     margin:20px;
  253.   }
  255.   .backto-container a {
  256.     text-decoration: none;
  257.   }
  259.   .backto-container a div {
  260.     padding: 20px;
  261.     background-color: rgba(255,255,255,0.8);
  262.     transition: 0.3s background-color;
  263.     color: #2c2c2c;
  264.     border-radius: 20px;
  265.     font-family: FoMedium;
  266.     font-variant: all-petite-caps;
  267.   }
  269.   .backto-container a div:hover {
  270.     background-color: white;
  271.   }
  273.   .form-content-inputs-container label input.wrong-inp {
  274.     background-color: #ffece3;
  275.     box-shadow: inset 0 0 0 100px #ffece3;
  276.   }
  278.   .form-content-inputs-container label input.wrong-inp ~ span {
  279.     color: #eb4c00;
  280.     margin-top:-7px;
  281.     margin-bottom: 15px;
  282.     font-family: FoRegular;
  283.   }
  285.   .grecaptcha-badge {
  286.     display: none;
  287.   }
  289.   @media only screen and (max-width: 1050px) {
  290.     .backto-container {
  291.       display: none;
  292.     }
  293.     .outside-container {
  294.       display: none;
  295.     }
  296.     .form-container {
  297.       margin: auto;
  298.     }
  299.   }
  301.   @media only screen and (max-width: 800px) {
  302.     .form-logo {
  303.       display: none;
  304.     }
  305.     .form-container {
  306.       flex-direction: column-reverse;
  307.     }
  308.   }
  310.   @media only screen and (max-width: 550px) {
  311.     .form-container {
  312.       padding: 50px 30px;
  313.     }
  314.   }
  315.   
  316.   @media only screen and (max-height: 660px) {
  317.     .form-logo {
  318.       display: none;
  319.     }
  320.     .form-container {
  321.       flex-direction: column-reverse;
  322.     }
  323.   }
  325.   @media only screen and (max-width: 600px) {
  326.     .inputs-others {
  327.       gap: unset;
  328.       flex-direction: column;
  329.     }
  330.   }
  332.   @media only screen and (max-width: 400px) {
  333.     .form-container {
  334.         padding: 50px 20px;
  335.     }
  336.     .form-content-inputs-container button {
  337.       margin: 5px 0;
  338.       padding: 18px 25px;
  339.       font-size: 16px;
  340.     }
  341.   }
  343. </style>
  344. <body>
  345.   <div class="PROGRESSBAR" style="display:none;"></div>
  346.   <div class="container">
  347.     <div class="form-container">
  348.       <div class="form-logo" style="--logourl: url(/auth_assets/logos/@main.png);"></div>
  349.       <div class="form-content">
  350.         {{ include('/modules/auth/parts/' ~ contentType ~ '.html.twig') }}
  351.       </div>
  352.       <div class="form-logo-mini" style="--logourl: url(https://cdn.pickit.lt/resources/uploads/marketingLogos/grays/{{ content.platformLogo }});"></div>
  353.     </div>
  354.     <div class="outside-container"></div>
  355.     {% if content.backButton.s %}
  356.       <div class="backto-container"><a href="{{ content.backButton.url|raw }}"><div>Grįžti į „{{ content.backButton.name }}“</div></a></div>
  357.     {% endif %}
  358.   </div>
  359. </body>
  360. </html>