<!DOCTYPE html>
<html lang="{{tpl:BlogLanguage}}">

<head>
  <meta charset="UTF-8">
  <meta name="ROBOTS" content="NOARCHIVE,NOINDEX,NOFOLLOW">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{tpl:lang Password needed}} - {{tpl:BlogName encode_html="1"}}</title>
  <style type="text/css">
  :root {
    --color-text: #000;
    --color-background: #eee;
    --color-form-background: #fff;
    --color-form-border: #a2cbe9;
    --color-title: #d30e60;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --color-text: #000;
      --color-background: #eee;
      --color-form-background: #fff;
      --color-title: #d30e60;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-text: #fff;
      --color-background: #595b5d;
      --color-form-background: #272b30;
      --color-title: #f783b3;
    }
  }

  body {
    font-family: system-ui, sans-serif;
    background: var(--color-background);
    display: flex;
    justify-content: center;
  }

  form {
    max-width: 35em;
    margin-top: 1.5em;
    padding: 1em;
    color: var(--color-text);
    background: var(--color-form-background);
    border: .25em solid var(--color-form-border);
    border-radius: .5em;
    display: flex;
  }

  h2 {
    color: var(--color-title);
    margin: 0 0 1em 0;
  }

  svg.icon {
    width: 59px;
    height: 45px;
    margin: 0 1em 1em 0;
  }

  svg.icon path.dc-icon-leap {
    fill: rgb(174, 220, 75);
  }

  svg.icon path.dc-icon-nerve {
    fill: rgb(154, 207, 0);
  }

  label {
    font-weight: bold;
  }

  input,
  button {
    margin: .5em 0 0;
    padding: 0.25em .5em;
    border-radius: .25em;
    border: 1px solid #333;
    min-width: 3em;
    font-size: 1em;
  }

  .pw-show,
  .pw-hide {
    min-width: 2.25em;
    height: 1.75em;
    margin-left: .25em;
    vertical-align: bottom;
  }

  .pw-show,
  .pw-show:hover,
  .pw-show:focus,
  .pw-show:active,
  .pw-hide,
  .pw-hide:hover,
  .pw-hide:focus,
  .pw-hide:active {
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  .pw-show:hover,
  .pw-show:focus,
  .pw-show:active,
  .pw-hide:hover,
  .pw-hide:focus,
  .pw-hide:active {
    background-color: #fff;
  }

  .pw-show,
  .pw-show:hover,
  .pw-show:active,
  .pw-show:focus {
    background-image: url("data:image/svg+xml;base64, ");
  }

  .pw-hide,
  .pw-hide:hover,
  .pw-hide:active,
  .pw-hide:focus {
    background-image: url("data:image/svg+xml;base64, ");
  }

  .sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
  </style>
  <script type="application/json" id="dc_password_msg-data">
  {
    "show_password": "{{tpl:lang Show password}}",
    "hide_password": "{{tpl:lang Hide password}}"
  }
  </script>
  <script src="{{tpl:BlogQmarkURL}}pf=util.js"></script>
  <script src="{{tpl:BlogQmarkURL}}pf=password.js"></script>
</head>

<body>
  <form action="{{tpl:EntryURL}}" method="post">
    <svg class="icon" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 59 45" xmlns="http://www.w3.org/2000/svg">
      <path class="dc-icon-leap" d="m22.334-13.733s-12.14 12.667-12.231 24.844c1.63 12.534 6.918 9.981 12.231 36.197 5.786-2.28 17.495-17.628 15.131-39.175-3.075-15.357-15.131-21.866-15.131-21.866" transform="matrix(.608277 .793725 .793725 -.608277 6.925 11.05)" />
      <path class="dc-icon-nerve" d="m0 43.4s13.37-10.8 27.91-18.24c23-11.76 28.98-25.16 28.98-25.16s-6.65 12.53-29.65 24.3c-14.54 7.44-27.91 18.24-27.91 18.24z" transform="translate(.67 1.5)" /></svg>
    <div>
      <h2>{{tpl:lang Password needed}}</h2>
      <p>{{tpl:lang You must give a password to access this area.}}</p>
      <p>
        <label for="password">{{tpl:lang Password:}}
          <input type="password" id="password" name="password" value="">
        </label>
        <input type="submit" value="ok" title="{{tpl:lang Access to content}}">
      </p>
    </div>
  </form>
</body>

</html>
