123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Root Partition 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;
- }
- 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: 5px 15px;
- font-weight: bold;
- background-color: #fff;
- border-width: 4px 0;
- }
- #error {
- color: #ca0000;
- font-weight: bold;
- }
- </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);
- }
- </script>
- </head>
- <body onload="beautifulError(); focusText()">
- <img src="unicorn.gif" alt="Beautiful Unicorn">
- <form method="post" action="/cgi-bin/post.sh">
- <fieldset>
- <legend>Passphrase</legend>
- <!-- TPL:ERROR
- <p id="error">
- Wrong passphrase. Try again, Dude!
- </p>
- TPL:ERROR -->
- <label>
- <p>Enter luks passphrase to unlock the root partition:</p>
- <input type="password" name="passphrase" id="passphrase" />
- </label>
- <p>
- <label>
- <input type="checkbox" onclick="showPassword(this)" />
- Show passphrase
- </label>
- </p>
- </fieldset>
- <input type="submit" value="Unlock" />
- </form>
- </div>
- </body>
- </html>
|