index.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Root Partition Unlocking</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <style>
  7. body {
  8. text-align: center;
  9. font-family: sans;
  10. background-color: #f2c8ee;
  11. padding-top: 15px;
  12. }
  13. fieldset {
  14. margin: 10px auto 30px;
  15. padding: 30px;
  16. width: 50%;
  17. background-color: #fff;
  18. border: 0;
  19. border-radius: 15px;
  20. }
  21. legend {
  22. background-color: #fff;
  23. padding: 5px 17px;
  24. font-weight: bold;
  25. border-radius: 5px;
  26. }
  27. input {
  28. border: 1px solid #6f1465;
  29. padding: 5px;
  30. font-size: 1em;
  31. color: #c70fb3;
  32. text-align: center;
  33. background-color: #fcf2fb;
  34. border-radius: 5px;
  35. }
  36. input[type=submit] {
  37. padding: 5px 15px;
  38. font-weight: bold;
  39. background-color: #fff;
  40. border-width: 4px 0;
  41. }
  42. #error {
  43. color: #ca0000;
  44. font-weight: bold;
  45. }
  46. </style>
  47. <script>
  48. var errorColors = [ 'ff619c', 'ffc160', 'f6ff60', '67ff00', '57f6fc', '8f9cff', 'fc57ee' ];
  49. var errorColorsIndex = 0;
  50. function showPassword(chk) {
  51. var pwd = document.getElementById('passphrase');
  52. pwd.type = chk.checked ? 'text' : 'password';
  53. }
  54. function focusText() {
  55. var pwd = document.getElementById('passphrase');
  56. pwd.focus();
  57. }
  58. function beautifulError() {
  59. setInterval(function () {
  60. var error = document.getElementById('error');
  61. error.style.color = '#' + errorColors[errorColorsIndex];
  62. errorColorsIndex = (errorColorsIndex + 1) % errorColors.length;
  63. }, 100);
  64. }
  65. </script>
  66. </head>
  67. <body onload="beautifulError(); focusText()">
  68. <img src="unicorn.gif" alt="Beautiful Unicorn">
  69. <form method="post" action="/cgi-bin/post.sh">
  70. <fieldset>
  71. <legend>Passphrase</legend>
  72. <!-- TPL:ERROR
  73. <p id="error">
  74. Wrong passphrase. Try again, Dude!
  75. </p>
  76. TPL:ERROR -->
  77. <label>
  78. <p>Enter luks passphrase to unlock the root partition:</p>
  79. <input type="password" name="passphrase" id="passphrase" />
  80. </label>
  81. <p>
  82. <label>
  83. <input type="checkbox" onclick="showPassword(this)" />
  84. Show passphrase
  85. </label>
  86. </p>
  87. </fieldset>
  88. <input type="submit" value="Unlock" />
  89. </form>
  90. </div>
  91. </body>
  92. </html>