<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fidelius - Password Protected File</title>
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <style id="fidelius__styling">
      :root {
        --font-family: {{ font_family }};
        --title_color: {{ title_color }};
        --font-size: {{font_size}};
        --background-color: {{ background_color }};
        --box-color: {{ box_color }};
        --btn-font-color: {{ btn_font_color }};
        --btn-bg-color: {{ btn_bg_color }};
        --btn-hover-color: {{ btn_hover_color }};
        --modal-overlay: {{ modal_overlay }};
        --modal-box-color: {{ modal_box_color }};
        --modal-title-color: {{ modal_title_color }};
        --modal-font-color: {{ modal_font_color }};
      }
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }
      body,
      html {
        font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 
          'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 
          'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: 300;
        font-size: var(--font-size);
        background: var(--background-color);
        color: var(--title_color);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
      }
      .fidelius__main {
        background: var(--box-color);
        -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        min-width: 480px;
      }
      @media (max-width:480px) {
        .fidelius__main {
          min-width: 375px;
        }
      }
      @media (max-width:375px) {
        .fidelius__main {
          min-width: 315px;
        }
      }
      .fidelius__content {
        padding: 24px 28px;
        text-align: center;
      }
      .fidelius__content__heading {
        display: inline-block;
        vertical-align: middle;
        font-size: var(--font-size);
        font-weight: 400;
        margin: 0 0 12px;
        line-height: 1;
      }
      .fidelius__content__input {
        display: block;
        border: solid 1px #ccc;
        padding: 12px 14px;
        -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
        font-size: var(--font-size);
        font-family: var(--font-family);
        width: 100%;
        border-radius: 5px;
        margin-bottom: 12px;
        text-align: center;
      }
      .fidelius__content__input:focus {
        outline: none;
        border-color: var(--btn-bg-color);
      }
      .fidelius__content__btn {
        background-color: var(--btn-bg-color);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        color: var(--btn-font-color);
        padding: 12px 14px;
        font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 
          'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 
          'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: 300;
        font-size: var(--font-size);
        width: 100%;
        transition: background-color 200ms ease-in-out;
      }
      .fidelius__content__btn:hover {
        background-color: var(--btn-hover-color);
      }
      @keyframes headShake {
        0% {
          transform: translateX(0);
        }

        6.5% {
          transform: translateX(-6px) rotateY(-9deg);
        }

        18.5% {
          transform: translateX(5px) rotateY(7deg);
        }

        31.5% {
          transform: translateX(-3px) rotateY(-5deg);
        }

        43.5% {
          transform: translateX(2px) rotateY(3deg);
        }

        50% {
          transform: translateX(0);
        }
      }
      .fidelius__headShake {
        animation: headShake 750ms ease-in-out 0ms 1 forwards;
        animation-name: headShake;
      }
      .fidelius__password__div {
        position: relative;
      }
      .fidelius__eye {
        position: absolute;
        top: 22.5%;
        left: 2%;
        opacity: 0.5;
        transition: opacity 200ms ease-in-out;
      }
      .fidelius__eye:hover {
        opacity: 1;
      }
      .fidelius__eye_open, .fidelius__eye_closed {
        width: 25px;
        height: 25px;
        cursor: pointer;
        z-index: 2;
      }
      .fidelius__icon__hint {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 12px;
        line-height: 1;
        width: 25px;
        height: 25px;
        transition: all 200ms ease-in-out;
      }
      .fidelius__icon__hint:hover {
        transform: scale(1.25);
      }

      {{{fidelius__micromodal__css}}}
    </style>
  </head>
  <body>
    <div class="fidelius__main">
      <div class="fidelius__content">
        <div class="fidelius__heading__div">
          <h1 class="fidelius__content__heading">{{header_text}}</h1>
        </div>
        <div class="fidelius__password__div">
          <form action="javascript:void(0);" method="post">
            <input
              class="fidelius__content__input"
              data-id="password"
              id="password"
              type="password"
              name="password"
              placeholder="{{placeholder_text}}"
              autocomplete="current-password"
            />
          </form>
          <div class="fidelius__eye"><svg xmlns="http://www.w3.org/2000/svg" class="fidelius__eye_open" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,55.99219C48,55.99219,16,128,16,128s32,71.99219,112,71.99219S240,128,240,128,208,55.99219,128,55.99219Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="128.00061" r="40" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg></div>
        </div>
        <button data-id="button" type="button" class="fidelius__content__btn">
          {{button_text}}
        </button>
      </div>
    </div>
    {{{fidelius__sodium}}}
    {{{fidelius__micromodal__js}}}
    <script id="fidelius__nonce" type="text/plain">{{fidelius__nonce}}</script>
    <script id="fidelius__content" type="text/plain">{{fidelius__content}}</script>
    <script id="fidelius__hint" type="text/plain">{{fidelius__hint}}</script>
    <script id="fidelius__js">
      document.addEventListener('DOMContentLoaded', function () {
        let nonce = sodium.from_hex(
          document.querySelector('#fidelius__nonce').innerText
        )
        let content = sodium.from_hex(
          document.querySelector('#fidelius__content').innerText,
        )
        let hint = document.querySelector('#fidelius__hint').innerText

        if (hint !== "") {
          let heading_div = document.querySelector(".fidelius__heading__div")
          heading_div = heading_div.insertAdjacentHTML('beforeend', fidelius__icons.hint)
          let modal__content__hint = document.querySelector(".modal__content__hint")
          modal__content__hint.innerText = hint
          MicroModal.init()
        }

        let submit_btn = document.querySelector('.fidelius__content__btn')
        let input = document.querySelector('.fidelius__content__input')
        input.focus()
        let content_box = document.querySelector('.fidelius__content')

        input.addEventListener('input', () => {
          input.style.borderColor = getComputedStyle(document.body).getPropertyValue('--btn-bg-color')
        })

        function toggle_password_show () {
          let show_icon = document.querySelector('.fidelius__eye > svg')
          if (input.type === "password") {
            input.type = "text"
            new_icon = document.createRange().createContextualFragment(fidelius__icons.eye_slash)
            show_icon.replaceWith(new_icon)
            input.focus()
          } else {
            input.type = "password"
            new_icon = document.createRange().createContextualFragment(fidelius__icons.eye)
            show_icon.replaceWith(new_icon)
            input.focus()
          }
        }

        let showpass = document.querySelector('.fidelius__eye')
        ;['click', 'touchend'].forEach(function(ev) {
          showpass.addEventListener(ev, (ev) => {
            ev.stopPropagation()
            ev.preventDefault()
            toggle_password_show()
          })
        })

        function decrypter () {
          // Get the password and hash it
          let password = input.value
          let password_hash = sodium.crypto_generichash(32, sodium.from_string(password))

          try {
            // Try the password and catch the error to throw "incorrect pass"
            let html = sodium.crypto_secretbox_open_easy(
              content,
              nonce,
              password_hash,
            )
            let html_text = sodium.to_string(html)
            document.write(html_text)
            document.close()
          } catch (error) {
            // Incorrect password
            input.style.borderColor = "#E7040F"
            content_box.classList.add("fidelius__headShake")
            setTimeout(function() {
              content_box.classList.remove("fidelius__headShake");
            }, 250);
            input.select()
            input.focus()
          }
        }

        ;['click', 'touchend'].forEach(function(ev) {
          submit_btn.addEventListener(ev, decrypter)
        })

        document.addEventListener('keyup', (e) => {
          if (e.keyCode === 13) {
            decrypter()
          }
        })
      })

      var fidelius__icons = {
        locked:
          "data:image/svg+xml,%3Csvg class='fidelius__icon__locked' xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Ccircle cx='127.99414' cy='140' r='20' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/circle%3E%3Cline x1='127.99414' y1='160' x2='127.99414' y2='184' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Crect x='39.99414' y='88' width='176' height='128' rx='8' stroke-width='16' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3C/rect%3E%3Cpath d='M91.99414,88V52a36,36,0,1,1,72,0V88' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E",
        opened:
          "data:image/svg+xml,%3Csvg class='fidelius__icon__opened' xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Ccircle cx='127.99414' cy='140' r='20' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/circle%3E%3Cline x1='127.99414' y1='160' x2='127.99414' y2='184' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Crect x='39.99414' y='88' width='176' height='128' rx='8' stroke-width='16' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3C/rect%3E%3Cpath d='M91.99414,88V52a36,36,0,1,1,72,0' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E",
        hint:
          '<svg data-micromodal-trigger="fidelius-modal" class="fidelius__icon__hint" xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><circle cx="128" cy="180" r="12"></circle><path d="M127.9995,144.0045v-8a28,28,0,1,0-28-28" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>',
        eye:
          '<svg xmlns="http://www.w3.org/2000/svg" class="fidelius__eye_open" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,55.99219C48,55.99219,16,128,16,128s32,71.99219,112,71.99219S240,128,240,128,208,55.99219,128,55.99219Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="128.00061" r="40" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg>',
        eye_slash:
          '<svg xmlns="http://www.w3.org/2000/svg" class="fidelius__eye_closed" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="48" y1="40.00122" x2="208" y2="216.00122" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><path d="M154.9071,157.599a40.00028,40.00028,0,0,1-53.8142-59.19562" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M73.99446,68.59479C33.22519,89.24034,16,128.00122,16,128.00122s32,71.99219,112,71.99219a118.0238,118.0238,0,0,0,53.99756-12.59461" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M208.60953,169.10059C230.41132,149.57342,240,128.00122,240,128.00122S208,55.99341,128,55.99341a125.31923,125.31923,0,0,0-20.68221,1.68414" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M135.52737,88.709a40.02411,40.02411,0,0,1,32.29785,35.52874" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>'
      }

      function create_favicon (state) {
        let link = document.createElement('link')
        link.rel = 'icon'
        link.type = 'image/x-icon'
        link.href = fidelius__icons[state]
        document.getElementsByTagName('head')[0].appendChild(link)
      }
      create_favicon('locked')
    </script>
    {{{fidelius__micromodal__html}}}
  </body>
</html>
