<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>INCEPTION - 42 Perpignan</title>
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
	<style>
		body, html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #141414;
			overflow: hidden;
			font-family: 'Orbitron', sans-serif;
			position: relative;
		}
		.container {
			text-align: center;
			color: #ffffff;
			z-index: 1;
			position: relative;
			width: 100%;
			height: 100%;
		}
		.title {
			font-size: 4em;
			font-weight: bold;
			color: #ffffff; /* Blanc */
			position: absolute;
			top: 20px;
			left: 20px;
		}
		.school {
			font-size: 3em;
			font-weight: bold;
			color: #0000ff; /* Bleu */
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
		}
		.pseudo {
			font-size: 2em;
			font-weight: bold;
			color: #8b0000; /* Rouge tendant vers le violet */
			position: absolute;
			bottom: 20px;
			left: 20px;
		}
		.datetime {
			font-size: 1.5em;
			color: #ff6666; /* Rouge plus clair */
			position: absolute;
			bottom: 20px;
			right: 20px;
		}
		.button {
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 10px 20px;
			font-size: 1.5em;
			background-color: rgba(255, 255, 255, 0.5); /* Transparence */
			color: #000000;
			font-weight: bold;
			border: none;
			cursor: pointer;
		}
		.jump-scare {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 9999;
			width: 0;
			height: 0;
			overflow: hidden;
		}
		.jump-scare img {
			width: 100%;
			height: auto;
		}
		@keyframes rainEffect {
			0% {
				clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
			}
			100% {
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
			}
		}
		.background {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-image: url('Inception_Visual.webp');
			background-repeat: no-repeat;
			background-size: cover;
			animation: zoomIn 20s infinite;
		}
		@keyframes zoomIn {
			0% { transform: scale(1); }
			50% { transform: scale(1.1); }
			100% { transform: scale(1); }
		}
	</style>
</head>
<body>
	<div class="background"></div>
	<div class="container">
		<div class="title">INCEPTION</div>
		<div class="school">42 Perpignan</div>
		<div class="pseudo">fgras-ca</div>
		<div class="datetime" id="datetime"></div>
		<button class="button" id="myButton">Click there!!</button>
		<div class="jump-scare" id="jumpScare">
			<!-- Columns will be generated by JavaScript -->
		</div>
	</div>
	<script>
		function updateDateTime() {
			const now = new Date();
			const datetimeElement = document.getElementById('datetime');
			const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
			datetimeElement.textContent = now.toLocaleDateString('fr-FR', options);
		}
		setInterval(updateDateTime, 1000);
		updateDateTime();

		function showButton() {
			document.getElementById('myButton').style.display = 'block';
		}
		setTimeout(showButton, 5000);

		document.getElementById('myButton').addEventListener('click', function() {
			const jumpScareContainer = document.getElementById('jumpScare');
			const imageSrc = 'jump_scare_image.webp'; // Update with your image path
			const columns = 50; // Number of columns
			const columnWidth = 100 / columns;
			jumpScareContainer.style.width = '80%';
			jumpScareContainer.style.height = '80%';

			for (let i = 0; i < columns; i++) {
				const column = document.createElement('div');
				column.classList.add('column');
				column.style.position = 'absolute';
				column.style.top = '0';
				column.style.left = `${i * columnWidth}%`;
				column.style.width = `${columnWidth}%`;
				column.style.height = '100%';
				column.style.backgroundImage = `url(${imageSrc})`;
				column.style.backgroundSize = `${columns * 100}% 100%`;
				column.style.backgroundPosition = `${-i * 100}% 0`;
				column.style.animation = `rainEffect 10s ease-in-out ${Math.random() * 5}s forwards`;
				jumpScareContainer.appendChild(column);
			}

			jumpScareContainer.style.display = 'block';
		});
	</script>
</body>
</html>
