Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

enc.xyz/index.html

Go to file
 
 
Cannot retrieve contributors at this time
182 lines (154 sloc) 6.67 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ENC</title>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Dosis'>
<link rel="stylesheet" href="css/stylesheet.min.css">
<!-- <script src="js/fittext.js"></script> -->
</head>
<body>
<section>
<!-- Switch class to locked if case = 2 -->
<div class="keyhole-wrapper" id="keyholeWrapper">
<svg class="unlocked" id="keyhole" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 444">
<defs>
<style>
.circle { fill: #000; stroke: none;
}
.line {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 20px;
}
</style>
</defs>
<title>keyhole</title>
<g>
<circle class="circle" cx="222" cy="222" r="222" />
<line class="line" x1="222" y1="360" x2="222" y2="81" />
</g>
</svg>
</div>
<!-- Show the form on case 2 -->
<form class="hidden" id="decrypt" action="#">
<input type="text" name="decAttempt" id="decAttempt">
<div class="underline"></div>
<input type="button" name="submitAttempt" id="submitAttempt" value=" ">
</form>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/textresize.js"></script>
<script>
// Make the input text responsive
// window.fitText(document.getElementById("decAttempt"));
// Initialize variables:
var key = null; // Encrypted key from storage
var treasure = null; // Indicator of successful user guess
var state = null; // Tracks user's progress
var xhr = null; // Holds a reference to XmlHttpRequest object
// When the DOM is loaded...
window.addEventListener("DOMContentLoaded", function() {
// Set DOM object variables
var keyhole = document.getElementById("keyhole");
var form = document.getElementById("decrypt");
var btnGuess = document.getElementById("submitAttempt");
var input = document.getElementById("decAttempt");
updateStatus();
btnGuess.addEventListener("click", function() {
// If we don't have our XHR object, create it
if (!xhr) {
xhr = new XMLHttpRequest();
}
// Configure the XHR to perform a asynchronous "POST" request to the php file
xhr.open("POST", "scripts/decryptKey.php", true);
xhr.addEventListener("load", keyCheckComplete);
// Let the destination know what format the data is in:
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("guess=" + input.value); // Initiate the request and send the value of the text box
});
// Call this function anytime you want to get the current state and respond to it:
function updateStatus() {
key = sessionStorage.getItem("key"); // Encrypted key from storage
treasure = sessionStorage.getItem("treasure"); // Indicator of successful user guess
console.log(key, treasure);
if (!key) {
// No key means first visit
state = 0;
keyhole.addEventListener('click', giveKey);
} else if (key && !treasure) {
// Key but no treasure means not first visit, but haven't unlocked site
state = 1;
// Use classList.add() and classList.remove() instead of className so you can work with multiple classes if you want
keyhole.classList.add("locked");
keyhole.removeEventListener('click', giveKey); // Remove the previously registered event handler
keyhole.addEventListener('click', showForm); // Register different event handler
} else if (treasure) {
// Treasure means site was unlocked
state = 2;
keyhole.classList.remove("locked");
keyhole.classList.add("unlocked");
}
console.log("state changed to " + state);
}
function giveKey() {
// If we don't have our XHR object, create it
if (!xhr) {
xhr = new XMLHttpRequest();
}
// Configure the XHR to perform a asynchronous "GET" request to the php file
xhr.open("POST", "scripts/createKey.php", true);
// Set up various event handlers for the XHR component that trigger at different times:
xhr.addEventListener("progress", updateProgress);
xhr.addEventListener("load", transferComplete);
xhr.addEventListener("error", transferFailed);
xhr.addEventListener("abort", transferCanceled);
xhr.send(null); // Initiate the request without sending any data (no posting of data)
}
function showForm() {
// Remove the hidden class, which will show the form
form.classList.remove("hidden");
document.getElementById("keyholeWrapper").classList.add("small")
// var elements = document.getElementById("decrypt").elements;
// for (var i = 0, len = elements.length; i < len; ++i) {
// elements[i].disabled = false;
// }
}
function transferComplete(evt) {
// Upon a successful request, store the key in storage
sessionStorage.setItem("key", xhr.responseText);
updateStatus();
}
function keyCheckComplete(evt) {
// Upon a successful request, store the key in storage
if (xhr.responseText === "1") {
sessionStorage.setItem("treasure", "MATCH!");
} else {
document.getElementById("keyholeWrapper").classList.add("shake");
setTimeout(function() {
document.getElementById("keyholeWrapper").classList.remove("shake");
}, 500);
}
updateStatus();
}
// Progress on transfers from the server to the client (downloads)
function updateProgress(oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
console.log(percentComplete + "% complete.");
} else {
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transferFailed(evt) {
console.log("An error occurred while reading the file. Status: " + xhr.status);
}
function transferCanceled(evt) {
console.log("The transfer has been canceled by the user.");
}
});
</script>
</body>
</html>