"This website contains flashing lights, proceed?"

Created: July 17, 2022
Updated: July 17, 2022

This is a simple snippet that prompts users for a screen when they click on your website. The screen informs them that the website in question may have flashing lights, and presents the user with two options. Clicking the "accept" button will remove the warning on all future visits, and clicking the "no" button will send the user back a page.

The consent for flashing lights is stored on the client in localStorage.

Example

Code

This snippet has HTML, CSS, and Javascript components. However, I recommend custom-tailoring the CSS to the style of your website.

HTML 
<!-- In your <head> -->

	<link rel="stylesheet" href="flashy.css">

<!-- In your <body> -->
	
	<div class="content-warning">
		<div class="warning-inner">
			<p>
				This page contains bright colors and flashing images that may be dangerous for people with a history of epilepsy/photosensitivity.
			</p>
			<p>
				Would you like to proceed?
			</p>
			<p>
				<button class="accept" name="accept">Yes, let me in</button>
				<button class="decline" name="decline">No, take me back</button>
			</p>
			<script src="flashy.js"></script>
		</div>
	</div>
	<!-- 
		Flashing lights consent by PORTFIEND
		Feel free to remove this credit
		
		https://portfiend.quest/
	-->
Javascript 
const warningElement = document.querySelector(".content-warning")
const hasAccepted = localStorage.getItem("accepted")
if(hasAccepted) {
	warningElement.classList.add("hidden")	
}
else {
	const acceptButton = warningElement.querySelector("button.accept")
	const declineButton = warningElement.querySelector("button.decline")
	acceptButton.addEventListener('click', () => {
		localStorage.setItem("accepted", true)
		warningElement.classList.add("hidden")	
	})
	declineButton.addEventListener('click', () => {
		history.back();
	})
}
console.log("Initiated flashing lights consent")
CSS 
body {
	padding: 0;
	margin: 0;
}
.hidden { 
	display: none !important;
}
.content-warning {
	z-index: 99;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* 
	if your `body` element has padding, adjust this!	
	make sure there's none of the page behind visible
	*/
	margin-top: 0px;
	margin-left: 0px;
	
/* 
Begin style properties 
*/
	background-color: #222;
}

.warning-inner {
	color: #ddd;
	font-size: 20px;
	min-width: 50vw;
	max-width: calc(100vw - 100px);
}
.warning-inner button {
	background-color: #444;
	border: none;
	font-size: 20px;
	padding: 5px;
	color: #eee;
	box-shadow: #111 10px 10px;
	margin: 10px;
}
.warning-inner button:hover {
	background-color: #343434;
	color: #fff;
	cursor: pointer;
}
/* 
End style properties 
*/

body {
	font-size: large;
	font-family: Arial, Helvetica, sans-serif;
}
.content {
	padding: 20px;
}

Keep in mind the HTML portion of this has URL references to both the Javascript and CSS components, so you might need to change those depending on the file structure of your website.

Comment Box is loading comments...
back to top