|
|
@@ -55,6 +55,10 @@
|
|
|
}
|
|
|
|
|
|
#error {
|
|
|
+ display: none;
|
|
|
+ /* TPL:ERROR
|
|
|
+ display: block;
|
|
|
+ TPL:ERROR */
|
|
|
color: #ca0000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
@@ -71,31 +75,48 @@
|
|
|
border: solid 25px;
|
|
|
border-radius: 5em;
|
|
|
border-color: #ff619c #8f9cff #f6ff60 #67ff00 ;
|
|
|
- animation: spin 1s linear infinite;
|
|
|
+ animation: spin .3s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ #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;
|
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
|
0% {
|
|
|
transform: rotate(0deg);
|
|
|
}
|
|
|
+
|
|
|
100% {
|
|
|
transform: rotate(360deg);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- @keyframes fade {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ #maintop {
|
|
|
+ display: none;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
- var errorColors = [ 'ff619c', 'ffc160', 'f6ff60', '67ff00', '57f6fc', '8f9cff', 'fc57ee' ];
|
|
|
- var errorColorsIndex = 0;
|
|
|
+ var beautifulColors = [ 'ff619c', 'ffc160', 'f6ff60', '67ff00', '57f6fc', '8f9cff', 'fc57ee' ];
|
|
|
+ var beautifulColorsIndex = 0;
|
|
|
|
|
|
function showPassword(chk) {
|
|
|
var pwd = document.getElementById('passphrase');
|
|
|
@@ -107,51 +128,104 @@
|
|
|
pwd.focus();
|
|
|
}
|
|
|
|
|
|
- function beautifulError() {
|
|
|
- setInterval(function () {
|
|
|
- var error = document.getElementById('error');
|
|
|
- error.style.color = '#' + errorColors[errorColorsIndex];
|
|
|
- errorColorsIndex = (errorColorsIndex + 1) % errorColors.length;
|
|
|
- }, 100);
|
|
|
+ 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 = 'block';
|
|
|
+ }
|
|
|
+
|
|
|
+ function failed() {
|
|
|
+ document.getElementById('error').style.display = 'block';
|
|
|
+ }
|
|
|
+
|
|
|
+ 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/)) {
|
|
|
+ failed();
|
|
|
+
|
|
|
+ } else {
|
|
|
+ unlocked();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ xmlHttp.send('passphrase=' + document.getElementById('passphrase').value);
|
|
|
+
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onLoadHandler() {
|
|
|
+ beautifulCycle();
|
|
|
+ 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="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>
|
|
|
-
|
|
|
- <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 onload="onLoadHandler()">
|
|
|
+ <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>
|
|
|
+ <p id="error" class="beautiful">
|
|
|
+ Wrong passphrase. Try again, Dude!
|
|
|
+ </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" onclick="showLoader()" />
|
|
|
+ <div class="loader" id="loader"></div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="unlocked" class="beautiful">
|
|
|
+ <img src="/unlocked.gif" alt="Unlocked" />
|
|
|
+ Unlocked!
|
|
|
+ </div>
|
|
|
</body>
|
|
|
</html>
|
Émile Morel
