Add NSFW warning infobox on first visit

Fixes #1450

Add a warning infobox for NSFW content when first visiting the Atlas.

* Modify `web/index.html` to include a modal warning infobox about NSFW content that appears on the first visit, with a general disclaimer and a tickbox to accept the warning.
* Change `web/_js/main/main.js` to add functions for checking if the user has previously dismissed the NSFW warning, showing the NSFW warning infobox, and preventing loading the data until the popup has been accepted.
* Modify `web/_js/config.js` to add a configuration option for displaying the NSFW warning infobox.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/placeAtlas/atlas-2023/issues/1450?shareId=XXXX-XXXX-XXXX-XXXX).

Author: Codixer

web/_js/config.js

@@ -428,6 +428,11 @@ const externalLinksConfig = [
 	},
 ];
 
+const nsfwWarningConfig = {
+	showWarning: true
+};
+window.nsfwWarningConfig = nsfwWarningConfig;
+
 console.info(`%cThe 2023 r/place Atlas
 %cCopyright (c) 2017 Roland Rytz <[email protected]>
 Copyright (c) 2023 Place Atlas Initiative and contributors

web/_js/main/main.js

@@ -77,8 +77,6 @@ window.atlasAll = atlasAll
 
 if (document.location.host !== prodDomain) document.body.dataset.dev = ""
 
-init()
-
 async function init() {
 
 	const args = window.location.search
@@ -555,3 +553,30 @@ noticeEl.querySelector('[role=button]').addEventListener('click', () => {
 	window.removeEventListener('resize', resizeGlobalTopPadding)
 	document.body.style.setProperty("--global-top-padding", null)
 })
+
+// Function to check if the user has previously dismissed the NSFW warning infobox
+function hasDismissedNsfwWarning() {
+	return localStorage.getItem('nsfwWarningDismissed') === 'true';
+}
+
+// Show the NSFW warning infobox if the user has not previously dismissed it
+function showNsfwWarning() {
+	const nsfwWarningModal = new bootstrap.Modal(document.getElementById('nsfwWarningModal'), {
+		backdrop: 'static',
+		keyboard: false
+	});
+	nsfwWarningModal.show();
+
+	document.getElementById('acceptNsfwWarning').addEventListener('click', () => {
+		localStorage.setItem('nsfwWarningDismissed', 'true');
+		nsfwWarningModal.hide();
+		init();
+	});
+}
+
+// Prevent loading the data (atlas.json) until the popup has been accepted
+if (nsfwWarningConfig.showWarning && !hasDismissedNsfwWarning()) {
+	showNsfwWarning();
+} else {
+	init();
+}

web/index.html

@@ -468,6 +468,30 @@ <h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
 			</div>
 		</template>
 
+			<!-- NSFW Warning Modal -->
+			<div class="modal fade" id="nsfwWarningModal" tabindex="-1" aria-labelledby="nsfwWarningModalLabel" aria-hidden="true">
+				<div class="modal-dialog modal-dialog-centered">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h5 class="modal-title" id="nsfwWarningModalLabel">NSFW Content Warning</h5>
+						</div>
+						<div class="modal-body">
+							<p>This website contains user-submitted content that may be NSFW (Not Safe For Work) and could be intended for users aged 18 and above. Please proceed with caution.</p>
+							<p>General Disclaimer:</p>
+							<ul>
+								<li>This website is not affiliated with Reddit.</li>
+								<li>Entries are user-submitted and may not be accurate.</li>
+								<li>Place Atlas has no affiliation with all entries.</li>
+								<li>Spoiler alert for games and entertainment media.</li>
+							</ul>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" id="acceptNsfwWarning">I Understand</button>
+						</div>
+					</div>
+				</div>
+			</div>
+
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 		<script src="./_js/lib/pointInPolygon.js"></script>
 		<script src="./_js/lib/polylabel.js"></script>