Hugging Face's logo

Spaces:
Translsis
/
emXQ
Running

App Files Community
emXQ / index.html
Translsis's picture
Translsis
Update index.html
708d048 verified
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>