Secret pages and hidden shop

I made a mini-quest for the viewer to indulge in. It involves using squarespace’s built-in password protection pages, which sadly doesn’t extend to whole sections of pages, but to individual pages only. The code uses session storage to know whether the user has gained honorary status, modifies pages depending on that status, adds a new menu icon upon activating the honorary status, and is to further be extended in the near future as I add more Easter eggs to the site.

HTML:

<div id="sacredBadge" class="sacredBadge" style="display: none;"></div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const subString = 'memberarea';
const subStringTwo = 'hiddenfeatures';
const subStringThree = 'sanctum';
const subStringFour = 'sanctumshop';
const sacredButton = document.getElementById('block-yui_3_17_2_1_1722529618480_18845');
const userAccountLink = document.querySelector('.user-accounts-link');
const userAccountLinkMobile = document.querySelector('.customerAccountLoginMobile');
const getURL = window.location.href;
let honoraryStatus = false;
let pageVisited = false;
const sacredBadge = document.getElementById('sacredBadge');
const newImageUrl = 'https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/8bba2c9d-9a39-4004-bb68-b1a01581a4b8/lanternBrokenGraphic.png';
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
// Check status and progress
if (sessionStorage.getItem('visitedMemberArea')) {
pageVisited = true;
if (sessionStorage.getItem('sacredButtonClicked') === 'true') {
honoraryStatus = true;
} else {
honoraryStatus = false;
	}
} else {
pageVisited = false;
}
// Store user progress on achieving honorary status
if (getURL.includes(subString)) {
  if (honoraryStatus == false) {
sacredButton.addEventListener('click', () => {
sessionStorage.setItem('sacredButtonClicked', 'true');
console.log('Honorary Status Activated, my inspecting Adventurer!');
});
sessionStorage.setItem('visitedMemberArea', 'true');
  } else {
  window.location.href = '/hiddenfeatures';
  }
}
// Adjust hidden features page based on status
if (getURL.includes(subStringTwo)) {
const featuresTextBlock = document.getElementById('block-yui_3_17_2_1_1722529618480_28214');
const featuresTitleBlock = document.getElementById('block-yui_3_17_2_1_1722529618480_25669');
const featuresImageBlock = document.getElementById('block-yui_3_17_2_1_1722529618480_45351');
const featuresText = featuresTextBlock.querySelector('p');
const featuresTitle = featuresTitleBlock.querySelector('h3');
const featuresList = featuresTextBlock.querySelectorAll('ul');
const featuresImages = featuresImageBlock.querySelectorAll('img');
if (honoraryStatus) {
// Add logic here for features page if honoraryStatus is true
} else {
featuresText.textContent = 'You are not supposed to be here Outlander! Be on your way.';
featuresText.style.textAlign = 'center';
featuresList.forEach(ul => ul.remove());
featuresTitle.textContent = 'Features Locked';
featuresImages.forEach(img => {
img.src = newImageUrl;
img.setAttribute('data-src', newImageUrl);
img.setAttribute('data-image', newImageUrl);
img.setAttribute('srcset', newImageUrl);
		});
	}
}
// Display honorary badge link
function displayHonoraryBadge() {
if (honoraryStatus) {
sacredBadge.style.display = 'block';
sacredBadge.addEventListener('click', function() {
window.location.href = '/sanctum';
});
if (isTouch === false) {
userAccountLink.insertAdjacentElement('afterend', sacredBadge);
sacredBadge.classList.remove('mobile');
} else {
userAccountLinkMobile.insertAdjacentElement('afterend', sacredBadge);
sacredBadge.classList.add('mobile');
}
} else {
sacredBadge.style.display = 'none';
}
}
displayHonoraryBadge();
  
// Adjust sanctum page based on status
if (getURL.includes(subStringThree) && !getURL.includes(subStringFour)) {
const sanctumTextBlock = document.getElementById('block-yui_3_17_2_1_1722555573944_3982');
const sanctumTitleBlock = document.getElementById('block-yui_3_17_2_1_1722553640132_5223');
const sanctumImageBlock = document.getElementById('block-yui_3_17_2_1_1722555573944_6158');
const sanctumButtonShop = document.getElementById('block-yui_3_17_2_1_1722632329093_9275');
const sanctumText = sanctumTextBlock.querySelector('p');
const sanctumTitle = sanctumTitleBlock.querySelector('h3');
const sanctumImages = sanctumImageBlock.querySelectorAll('img');
if (honoraryStatus) {
// Add logic if honoraryStatus is true
} else {
sanctumTitle.textContent = 'Solitude';
sanctumText.textContent = 'A place of wonders - a place not to be.';
sanctumText.style.textAlign = 'center';
sanctumImages.forEach(img => {
img.src = newImageUrl;
img.setAttribute('data-src', newImageUrl);
img.setAttribute('data-image', newImageUrl);
img.setAttribute('srcset', newImageUrl);
});
sanctumButtonShop.remove();

// Further modify sanctum when no status here
		}
	}
});

CSS:

//power user menu icon
#sacredBadge {
  width: 55px;
  height: 55px;
  margin-left: -15px;
  margin-right: 7px;
  pointer-events: auto;
  background: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/c600706e-c07d-4455-8cb5-98f1fd2cc01a/lightningicon.png') no-repeat center center;
  background-size: contain;
  z-index: 999;
  cursor: pointer;
  transition: 1s;
  scale: 1;
  margin-bottom: -3px;
}
#sacredBadge:hover {
  scale: 1.25;
  transition: 0.5s;
}
#sacredBadge.mobile { 
  width: 100%;
  height: 90px;
  margin: 0;
}

A lot of the code is based around individual elements which are specific to certain pages. I don’t think it is viable for you to copy and paste this, as the subsequent modification will probably completely restructure the code. I suggest to instead look into session storage and local storage to achieve a similar effect.