Do you need to hide or protect content on a web page. Here is a simple, but not 100% secure way to add a log on.
If the images are under copyright you might have a point in keeping the cards somewhat close. Here you can add a .gitignore file (you can choose to ignore a file or folder before you push). In that case you could share the code – but keep the images to yourself.
First hide everything: https://www.sitepoint.com/hide-elements-in-css/
Then add a log on to the web page. This can be done in JavaScript. Just add an input field, and select a codeword, say “cheesecake”. Now encrypt the word by an online service such as https://www.md5online.org/md5-encrypt.html
Then you’ll get this string: 5ac5355b84894ede056ab81b324c4675
In the CSS add a style that will hide everything. You can do this by hiding the <body> element. You can do this via JavaScript also.
You can use prompt in order to get the password from the user. https://www.w3schools.com/jsref/met_win_prompt.asp
Now you can compare the input from the form with the string – and display what’s on the webpage, e.g. via a window.open()
if (myCode == "5ac5355b84894ede056ab81b324c4675"){
// here: display the page content
body.style.display = "block"
} else {
// error message
document.write("No access")
}
Probably your user don’t want to log in every time. Here you can save a true for logged in in local storage / session storage.
Protecting a Web page in .htacces
Now the solution above is not 100% secure. A better way to protect your pages is by .htaccess. Here you can follow my tutorial on YouTube.
Leave a Reply