labriqueinternet
/
sunxi-debian
miroir de https://github.com/bleuchtang/sunxi-debian


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!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 1s linear infinite;
    }

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

    @keyframes fade {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>

  <script>
    var errorColors = [ 'ff619c', 'ffc160', 'f6ff60', '67ff00', '57f6fc', '8f9cff', 'fc57ee' ];
    var errorColorsIndex = 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 beautifulError() {
      setInterval(function () {
        var error = document.getElementById('error');
        error.style.color = '#' + errorColors[errorColorsIndex];
        errorColorsIndex = (errorColorsIndex + 1) % errorColors.length;
      }, 100);
    }

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

    }
  </script>
</head>

<body onload="beautifulError(); focusText()">
  <img src="unicorn.gif" alt="Beautiful Unicorn">
  <form method="post" onsubmit="showLoader()" action="/cgi-bin/post.sh">
    <fieldset>
      <legend>Hard Drive Locked</legend>
      <!-- TPL:ERROR
      <p id="error">
        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>
  </form>
</body>
</html>