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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!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: #f2c8ee;
      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 {
      color: #ca0000;
      font-weight: bold;
    }

    label span {
      cursor: pointer;
    }

    .loader {
      content: "";
      display: none;
      width: 0;
      height: 0;
      border: solid 25px;
      border-radius: 5em;
      border-color: #ff619c #8f9cff #f6ff60 #67ff00 ;
      animation: spin .3s linear infinite;
    }

    #unlocked {
      display: none;
      font-size: 4em;
      font-weight: bold;
    }

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

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <script>
    var beautifulColors = [ 'ff619c', 'ffc160', 'f6ff60', '67ff00', '57f6fc', '8f9cff', 'fc57ee' ];
    var beautifulColorsIndex = 0;

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

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

    function beautifulCycle() {
      if(document.getElementsByClassName('beautiful')) {
        setInterval(function () {
          var beautifuls = document.getElementsByClassName('beautiful');

          for(var i = 0; i < beautifuls.length; i++) {
            beautifuls[i].style.color = '#' + beautifulColors[beautifulColorsIndex];
          }

          beautifulColorsIndex = (beautifulColorsIndex + 1) % beautifulColors.length;
        }, 100);
      }
    }

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

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

    function submitForm() {
      showLoader();

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

      xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4) {
          if(xmlHttp.status == 200) {
            unlocked();

          } else {

            alert('An error occured.');
          }
        }
      }

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

      return false;
    }

  </script>
</head>

<body onload="beautifulCycle(); focusText()">
  <div id="main">
    <img src="unicorn.gif" alt="Beautiful Unicorn">
    <form method="post" id="form" action="/cgi-bin/post.sh" onsubmit="return submitForm()">
      <fieldset>
        <legend>Hard Drive Locked</legend>
        <!-- TPL:ERROR
        <p id="error" class="beautiful">
          Wrong passphrase. Try again, Dude!
        </p>
        TPL:ERROR -->
  
        <p>
          <label for="passphrase">
            Enter your passphrase to unlock the hard drive:
          </label>
        </p>
  
        <input type="password" name="passphrase" id="passphrase" />
  
        <p>
          <label>
            <input type="checkbox" onclick="showPassword(this)" />
            <span>Show passphrase</span>
          </label>
        </p>
      </fieldset>
  
      <input type="submit" id="unlock" value="Unlock" onclick="showLoader()" />
      <div class="loader" id="loader"></div>
    </div>

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

      Unlocked!
    </div>
  </form>
</body>
</html>