Spaces:

Translsis
/

emXQ

Running

App Files Files Community

emXQ / index.html

Translsis

Update index.html

708d048 verified 5 months ago

raw

history blame contribute delete

10.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>XQ Thối</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	font-family: 'Arial Rounded MT Bold', sans-serif;
	position: relative;
	}

	/* Video nền cho body */
	#body-video-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	}

	/* Màu nền dự phòng khi video đang load */
	body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom right, #000000, #222222);
	z-index: -3;
	}

	/* Khung chữ */
	.container {
	position: absolute;
	border: 5px solid #8B4513;
	padding: 40px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	cursor: grab;
	user-select: none;
	}

	.container:active {
	cursor: grabbing;
	}

	/* Video nền cho container */
	.video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	border-radius: 15px;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	}

	h1 {
	font-size: 6rem;
	color: #000000;
	text-shadow: 0 0 25px #d2b48c, 0 0 40px #8B4513;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	position: relative;
	z-index: 1;
	}

	.letter {
	display: inline-block;
	animation: floaty 3s ease-in-out infinite;
	}

	@keyframes floaty {
	0% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-8px) rotate(1deg); }
	50% { transform: translateY(0) rotate(0deg); }
	75% { transform: translateY(8px) rotate(-1deg); }
	100% { transform: translateY(0) rotate(0deg); }
	}

	.emoji {
	position: absolute;
	font-size: 26px;
	animation: pop 1s ease-out forwards;
	color: #8B4513;
	pointer-events: none;
	}

	@keyframes pop {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(2); opacity: 0; top: -40px; }
	}

	.spider {
	position: absolute;
	font-size: 40px;
	pointer-events: none;
	transition: transform 0.1s linear;
	}

	.baby-spider {
	position: absolute;
	font-size: 20px;
	pointer-events: none;
	transition: transform 0.1s linear;
	}

	/* Khung hoa văn */
	.border-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url('https://www.transparenttextures.com/patterns/circuit-board.png');
	background-size: cover;
	z-index: -1;
	}
	</style>
	</head>
	<body>

	<!-- Video nền toàn màn hình -->
	<video id="body-video-bg" autoplay loop muted playsinline preload="auto" loading="eager">
	<source src="Background.mp4" type="video/mp4">
	</video>

	<!-- Khung hoa văn -->
	<div class="border-frame"></div>

	<!-- Khung chữ với nội dung -->
	<div class="container">
	<video class="video-background" autoplay loop muted playsinline preload="auto" loading="eager">
	<source src="video.mp4" type="video/mp4">
	</video>
	<h1>
	<span class="letter">emem</span>
	<span class="letter">XQ</span>
	<span class="letter">💗</span>
	</h1>
	</div>

	<div id="spider" class="spider">💗</div>
	<audio id="bg-music" src="music.mp3" preload="auto"></audio>

	<script>
	const spider = document.getElementById('spider');
	const music = document.getElementById('bg-music');
	const container = document.querySelector('.container');
	let mouseX = window.innerWidth / 2;
	let mouseY = window.innerHeight / 2;
	let spiderX = mouseX, spiderY = mouseY;

	// Vật lý cho container
	let containerX = window.innerWidth / 2;
	let containerY = window.innerHeight / 2;
	let containerVelX = 0;
	let containerVelY = 0;
	let isDragging = false;
	let dragOffsetX = 0;
	let dragOffsetY = 0;
	const friction = 0.95;
	const elasticity = 0.7;
	const wallMargin = 50;

	// Khởi tạo vị trí ban đầu
	container.style.left = containerX + 'px';
	container.style.top = containerY + 'px';
	container.style.transform = 'translate(-50%, -50%)';

	// Xử lý kéo thả container
	container.addEventListener('mousedown', startDrag);
	container.addEventListener('touchstart', startDrag);

	function startDrag(e) {
	isDragging = true;
	const touch = e.type === 'touchstart' ? e.touches[0] : e;
	dragOffsetX = touch.clientX - containerX;
	dragOffsetY = touch.clientY - containerY;
	containerVelX = 0;
	containerVelY = 0;
	e.preventDefault();
	}

	document.addEventListener('mousemove', drag);
	document.addEventListener('touchmove', drag);

	function drag(e) {
	if (isDragging) {
	const touch = e.type === 'touchmove' ? e.touches[0] : e;
	const newX = touch.clientX - dragOffsetX;
	const newY = touch.clientY - dragOffsetY;

	containerVelX = (newX - containerX) * 0.5;
	containerVelY = (newY - containerY) * 0.5;

	containerX = newX;
	containerY = newY;
	}
	}

	document.addEventListener('mouseup', stopDrag);
	document.addEventListener('touchend', stopDrag);

	function stopDrag() {
	isDragging = false;
	}

	// Cập nhật vật lý container
	function updateContainerPhysics() {
	if (!isDragging) {
	// Áp dụng ma sát
	containerVelX *= friction;
	containerVelY *= friction;

	// Cập nhật vị trí
	containerX += containerVelX;
	containerY += containerVelY;

	// Kiểm tra va chạm với tường
	const rect = container.getBoundingClientRect();
	const halfWidth = rect.width / 2;
	const halfHeight = rect.height / 2;

	// Tường trái
	if (containerX - halfWidth < wallMargin) {
	containerX = wallMargin + halfWidth;
	containerVelX = Math.abs(containerVelX) * elasticity;
	}
	// Tường phải
	if (containerX + halfWidth > window.innerWidth - wallMargin) {
	containerX = window.innerWidth - wallMargin - halfWidth;
	containerVelX = -Math.abs(containerVelX) * elasticity;
	}
	// Tường trên
	if (containerY - halfHeight < wallMargin) {
	containerY = wallMargin + halfHeight;
	containerVelY = Math.abs(containerVelY) * elasticity;
	}
	// Tường dưới
	if (containerY + halfHeight > window.innerHeight - wallMargin) {
	containerY = window.innerHeight - wallMargin - halfHeight;
	containerVelY = -Math.abs(containerVelY) * elasticity;
	}
	}

	// Cập nhật vị trí DOM
	container.style.left = containerX + 'px';
	container.style.top = containerY + 'px';

	requestAnimationFrame(updateContainerPhysics);
	}

	updateContainerPhysics();

	// Nhện con (ở các góc màn hình)
	const babySpiders = [
	{ x: 0, y: 0, speed: 0.02 },
	{ x: window.innerWidth, y: 0, speed: 0.03 },
	{ x: 0, y: window.innerHeight, speed: 0.04 },
	{ x: window.innerWidth, y: window.innerHeight, speed: 0.05 }
	];

	// Tạo nhện con ở các góc
	babySpiders.forEach(spiderData => {
	const babySpider = document.createElement('div');
	babySpider.className = 'baby-spider';
	babySpider.innerText = '💗';
	document.body.appendChild(babySpider);
	moveSpiderToCursor(babySpider, spiderData.x, spiderData.y, spiderData.speed);
	});

	// Di chuyển nhện con về vị trí của chuột
	function moveSpiderToCursor(spiderElement, x, y, speed) {
	let targetX = x;
	let targetY = y;
	function move() {
	const dx = mouseX - targetX;
	const dy = mouseY - targetY;
	targetX += dx * speed;
	targetY += dy * speed;
	spiderElement.style.transform = `translate(${targetX}px, ${targetY}px)`;
	requestAnimationFrame(move);
	}
	move();
	}

	// Hàm random chọn emoji
	function getRandomEmoji() {
	const emojis = ['💗', '💗', '♥'];
	return emojis[Math.floor(Math.random() * emojis.length)];
	}

	// Hàm tạo emoji ngẫu nhiên
	function createEmoji(x, y) {
	const emoji = document.createElement('div');
	emoji.className = 'emoji';
	emoji.innerText = getRandomEmoji();
	emoji.style.left = `${x}px`;
	emoji.style.top = `${y}px`;
	document.body.appendChild(emoji);
	setTimeout(() => emoji.remove(), 1000);
	}

	document.addEventListener('mousemove', (e) => {
	if (!isDragging) {
	mouseX = e.clientX;
	mouseY = e.clientY;
	createEmoji(e.clientX, e.clientY);
	}
	});

	document.addEventListener('click', (e) => {
	createEmoji(e.clientX, e.clientY);
	spiderX = e.clientX;
	spiderY = e.clientY;
	});

	document.addEventListener('touchmove', (e) => {
	const touch = e.touches[0];
	mouseX = touch.clientX;
	mouseY = touch.clientY;
	createEmoji(mouseX, mouseY);
	});

	document.addEventListener('touchstart', (e) => {
	const touch = e.touches[0];
	createEmoji(touch.clientX, touch.clientY);
	spiderX = touch.clientX;
	spiderY = touch.clientY;
	});

	// Bỏ qua block autoplay của trình duyệt
	document.addEventListener('click', () => {
	music.play();
	}, { once: true });

	// Di chuyển nhện lớn
	function moveSpider() {
	const dx = mouseX - spiderX;
	const dy = mouseY - spiderY;
	spiderX += dx * 0.2;
	spiderY += dy * 0.2;
	spider.style.transform = `translate(${spiderX}px, ${spiderY}px)`;

	if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
	spiderX = window.innerWidth / 2;
	spiderY = window.innerHeight / 2;
	}

	requestAnimationFrame(moveSpider);
	}

	moveSpider();
	</script>
	</body>
	</html>