labriqueinternet
/
sunxi-debian
mirror of https://github.com/bleuchtang/sunxi-debian


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!DOCTYPE html>
<html>
<head>
  <title>Hard Drive Unlocking</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style>
    body {
      text-align: center;
      font-family: sans;
      background-color: #d5a6d9;
      padding-top: 15px;
    }

    fieldset {
      margin: 10px auto 30px;
      padding: 30px;
      width: 50%;
      background-color: #fff;
      border: 0;
      border-radius: 15px;
    }

    legend {
      background-color: #fff;
      padding: 5px 17px;
      font-weight: bold;
      border-radius: 5px;
      text-shadow: 1px 1px rgba(0,0,0,.3);
      font-variant: small-caps;
    }

    input {
      border: 1px solid #6f1465;
      padding: 5px;
      font-size: 1em;
      color: #c70fb3;
      text-align: center;
      background-color: #fcf2fb;
      border-radius: 5px;
    }

    input[type=submit] {
      padding: 10px 20px;
      font-weight: bold;
      background-color: #fff;
      border-width: 0;
      font-size: 20px;
    }

    input[type=submit]:hover {
      background-color: #6f1465;
      color: #fff;
      cursor: pointer;
    }

    #error {
      display: none;
      /* TPL:ERROR
      display: block;
      TPL:ERROR */
      color: #ca0000;
      font-weight: bold;
    }

    label span {
      cursor: pointer;
    }

    #loader {
      display: none;
      width: 400px;
      height: 20px;
      background-color: #9f7ca2;
      border-radius: 5px;
      margin: 0 auto;
    }

    #loader div {
      height: 20px;
      background-color: #9f7ca2;
      animation: bgdisco .5s ease infinite;
      border-radius: 5px;
    }

    #main {
      /* TPL:UNLOCKED
      display: none;
      TPL:UNLOCKED */
    }

    #unlocked {
      display: none; /* TPL:UNLOCKED */
      font-size: 6em;
      font-weight: bold;
    }

    #unlocked img {
      display: block;
      margin: .6em auto;
    }

    .no-js {
      display: none;
    }

    .beautiful {
      animation: disco .5s ease infinite;
    }

    @keyframes disco {
      6% {
        color: #f00000;
      }

      22% {
        color: #ff9b00;
      }

      38% {
        color: #f4ff4d;
      }

      54% {
        color: #62ff9b;
      }

      86% {
        color: #2efff2;
      }

      90% {
        color: #1b50e4;
      }
    }

    @keyframes bgdisco {
      6% {
        background-color: #f00000;
      }

      22% {
        background-color: #ff9b00;
      }

      38% {
        background-color: #f4ff4d;
      }

      54% {
        background-color: #62ff9b;
      }

      86% {
        background-color: #2efff2;
      }

      90% {
        background-color: #1b50e4;
      }
    }

    #maintop {
      display: none;
    }
  </style>

  <script>
    function showPassword(chk) {
      var pwd = document.getElementById('passphrase');
      pwd.type = chk.checked ? 'text' : 'password';
    }

    function focusText() {
      var pwd = document.getElementById('passphrase');
      pwd.focus();
    }

    function progressLoader() {
      var pc = parseInt(document.getElementById('progress').style.width.replace('%', '')) + 5;
      document.getElementById('progress').style.width = pc + "%";

      if(pc < 100) {
        setTimeout(progressLoader, 1000);
      }
    }

    function showLoader() {
      document.getElementById('itsgone').play();

      document.getElementById('unlock').style.display = 'none';
      document.getElementById('loader').style.display = 'block';

      setTimeout(progressLoader, 1000);
    }

    function hideLoader() {
      document.getElementById('unlock').style.display = 'inline';
      document.getElementById('loader').style.display = 'none';
    }

    function unlocked() {
      document.getElementById('itworks').play();
      document.getElementById('main').style.display = 'none';
      document.getElementById('unlocked').style.display = 'block';
    }

    function failed() {
      document.getElementById('doesnwork').play();
      document.getElementById('error').style.display = 'block';
      document.getElementById('mainimg').src = document.getElementById('mainimg').src.replace('caticorn', 'caticorn_failed');
    }

    function submitForm() {
      showLoader();

      var xmlHttp = new XMLHttpRequest();
      xmlHttp.open('POST', document.getElementById('form').action, true);

      xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4) {
          if(xmlHttp.responseText.match(/TPL:UNLOCKED/)) {
            hideLoader();
            failed();

          } else {
            unlocked();
          }
        }
      }

      xmlHttp.send('passphrase=' + document.getElementById('passphrase').value);

      return false;
    }

    function onLoadHandler() {
      focusText();

      var nojs = document.getElementsByClassName('no-js');

      for(var i = 0; i < nojs.length; i++) {
        nojs[i].className = nojs[i].className.replace('no-js', '');
      }
    }
  </script>
</head>

<body onload="onLoadHandler()">
  <div id="main">
    <img src="/img/caticorn.png" id="mainimg" alt="Beautiful Unicorn" />

    <form method="post" id="form" action="/cgi-bin/post.sh" onsubmit="return submitForm()">
      <fieldset>
        <legend>Hard Drive Locked</legend>
        <p id="error">
          Wrong passphrase. Try again?
        </p>
  
        <p>
          <label for="passphrase">
            Enter your passphrase to unlock the hard drive:
          </label>
        </p>
  
        <input type="password" name="passphrase" id="passphrase" />
  
        <p class="no-js">
          <label>
            <input type="checkbox" onclick="showPassword(this)" />
            <span>Show passphrase</span>
          </label>
        </p>
      </fieldset>
  
      <input type="submit" id="unlock" value="Unlock" />

      <div id="loader">
        <div id="progress" style="width: 0%"> </div>
      </div>
    </form>
  </div>

  <div id="unlocked" class="beautiful">
    <img src="/img/caticorn_success.png" alt="Unlocked" />
    Unlocked!
  </div>

  <audio id="itsgone" preload><source src="img/itsgone.ogg" type="audio/ogg"></audio>
  <audio id="itworks" preload><source src="img/itworks.ogg" type="audio/ogg"></audio>
  <audio id="doesnwork" preload><source src="img/doesntwork.ogg" type="audio/ogg"></audio>
</body>
</html>