Hint image on lock pages

This adds a hint in the form of an image to password protected pages, or in my case, to one individual password protected page. There is some fading involved to not immediately display the hint, as it is part of an obscure mini-quest. Please note that the styling for lock pages in squarespace should happen in the designated code area, not in the CSS menu. If you want to see this in action, please click on the faded text on my homepage.

HTML:

<div id="passwordHintContainer" class="passwordHintContainer">
  <div id="passwordHint" class="passwordHint">
    <div id="passwordKeyboard" class="passwordKeyboard"></div>
  </div>
</div>

JAVASCRIPT:

<style>
#passwordHintContainer {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 200px auto;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  max-width: 2200px;
  padding-left: 3vw;
  padding-right: 3vw;
  pointer-events: none;
}
#passwordHint {
  display: block;
  width: 600px;
  height: 198px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  cursor: default;
  background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/1c4e399b-ad6c-43d7-a970-9e29f38a9ea3/PasswordHintKeyboardGraphic.png') no-repeat center center;
  background-size: contain;
  z-index: 7777;
  overflow: hidden;
  transition: all 3s ease;
  opacity: 0;
}
#passwordHint:hover {
  opacity: 1;
  transition: all 5s !important;
}
#passwordKeyboard {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  cursor: default;
  background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/277975f7-200f-41b9-8a4b-ed469435681b/PasswordHintAloneGraphic.png') no-repeat center center;
  background-size: contain;
  z-index: 8888;
  overflow: hidden;
  opacity: 0;
  transition: all 3s ease;
}
#passwordKeyboard:hover {
  opacity: 1;
  transition: all 23s !important;
}
.arrow-icon {
  margin-right: 10px;
}
.password-input {
  border-bottom: 2px solid #000 !important;
  border-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
  outline: none !important;
  padding-left: 10px !important;
  padding-bottom: 5px !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hintContainer = document.querySelector('.passwordHintContainer');
const passwordBlock = document.querySelector('.sqs-slice-group');
const lockScreen = document.querySelector('.lock-screen');
const subString = 'memberarea';
const getURL = window.location.href;
if (getURL.includes(subString)) {
passwordBlock.insertAdjacentElement('afterend', hintContainer);
} else {
hintContainer.remove();
	}
});
</script>

CSS:

I remind you, do not place the CSS for password protected pages of squarespace into the CSS document as it won’t work. Instead use <style> tags to embed it directly into the designated lock page code section.