Profile
Works for user profiles, character profiles, folders, world profiles, etc.
This code lets you set a password to unlock hidden page content.
Example (password is 6969)
Nice
Notes:
- This code is for decorative/aesthetic uses only. This is not a secure way to protect anything and it can be bypassed in several ways (inspect element, hovering to see which button has the different link, etc.) If you want to securely store something, use ToyHou.se's official privacy and authorization functions.
- If you type the password wrong, refresh the page to reset the keypad.
- You can set a password as short or as long as you want. It's possible to set multiple passwords to unlock different content. You can change the numbers to symbols, or change up the keypad layout completely. This is a very bare bones code you can customize extensively.
HOW TO USE THE CODE
Before you continue:
I plan to eventually share a few templates using this code that will require minimal code editing. If you aren't familiar with code, you may struggle to assemble this and it may be better for you to wait for those (you may request themes/custom colors you're interested in).
Keypad layout:
Paste the full code into a custom box with code editor on, turn code editor off and you will see the keypad from the example. You can edit the text, size, color, font, etc.
Setting up tabs:
Your password length will decide how many tabs you have.
The image on the right is a diagram showing how a four digit password will have six tabs. When a correct digit is entered, it moves to the next tab, but when a wrong digit is entered, it goes to the wrong password tab, and the page needs to be refreshed to reset the keypad (unless you add a button to reset it to the first tab).
Chose a name for your wrong password tab, then change all the Tab inside href="#Tab" to that name so all your buttons will redirect to that tab.
Duplicate your first tab (one with the keypad so all the tabs will have identical keypads), put it between your first and last tab (success tab), and remove the active from "tab-pane show active" on the copy, then duplicate it for as many tabs as you need. The success tab is included at the bottom of the code.
Rename all your tabs (id="Tab"). Change the href="#Tab" on the buttons you want to be the correct digit from the wrong password tab to the next tab (or success tab if it's the final digit).
Recent Images
No images.