Spaces:

Translsis
/

emXQ

Running

App Files Files Community

Translsis commited on Nov 30, 2025

Commit

9ca53a0

verified ·

1 Parent(s): 398d876

Upload index (1).html

Browse files

Files changed (1) hide show

index (1).html +237 -0

index (1).html ADDED Viewed

	@@ -0,0 +1,237 @@

+<!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;
+      background: linear-gradient(to bottom right, #ffffff, #f7e9d2);
+    }
+    /* Khung chữ */
+    .container {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border: 5px solid #8B4513;  /* Khung bao quanh chữ */
+      padding: 40px;
+      border-radius: 20px;
+      background-color: rgba(255, 255, 255, 0.3); /* Màu nền trong suốt hơn để thấy video */
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng đổ cho khung */
+      overflow: hidden;
+    }
+    /* 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;
+    }
+    h1 {
+      font-size: 6rem;
+      color: #8B4513;
+      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>
+<!-- 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>
+    <source src="video.mp4" type="video/mp4">
+  </video>
+  <h1>
+    <span class="letter">XQ</span>
+    <span class="letter">Thối</span>
+    <span class="letter">💗</span>
+  </h1>
+</div>
+<div id="spider" class="spider">💗</div>
+<audio id="bg-music" src="music.mp3" autoplay loop hidden></audio>
+<script>
+  const spider = document.getElementById('spider');
+  const music = document.getElementById('bg-music');
+  let mouseX = window.innerWidth / 2;
+  let mouseY = window.innerHeight / 2;
+  let spiderX = mouseX, spiderY = mouseY;
+  // 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();  // Chọn ngẫu nhiên emoji
+    emoji.style.left = `${x}px`;
+    emoji.style.top = `${y}px`;
+    document.body.appendChild(emoji);
+    setTimeout(() => emoji.remove(), 1000);  // Xóa emoji sau 1 giây
+  }
+  document.addEventListener('mousemove', (e) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    createEmoji(e.clientX, e.clientY);  // Tạo emoji khi di chuyển chuột
+  });
+  document.addEventListener('click', (e) => {
+    createEmoji(e.clientX, e.clientY);  // Tạo emoji khi click chuột
+    spiderX = e.clientX;
+    spiderY = e.clientY;
+  });
+  document.addEventListener('touchmove', (e) => {
+    const touch = e.touches[0];
+    mouseX = touch.clientX;
+    mouseY = touch.clientY;
+    createEmoji(mouseX, mouseY);  // Tạo emoji khi vuốt trên màn hình
+  });
+  document.addEventListener('touchstart', (e) => {
+    const touch = e.touches[0];
+    createEmoji(touch.clientX, touch.clientY);  // Tạo emoji khi chạm vào màn hình
+    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 (về vị trí cũ nếu không tương tác)
+  function moveSpider() {
+    const dx = mouseX - spiderX;
+    const dy = mouseY - spiderY;
+    spiderX += dx * 0.2;  // Tăng tốc độ di chuyển của nhện
+    spiderY += dy * 0.2;
+    spider.style.transform = `translate(${spiderX}px, ${spiderY}px)`;
+    // Nếu không có sự thay đổi lớn trong khoảng thời gian nhất định, nhện sẽ trở về vị trí ban đầu
+    if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
+      spiderX = window.innerWidth / 2;
+      spiderY = window.innerHeight / 2;
+    }
+    requestAnimationFrame(moveSpider);
+  }
+  moveSpider();
+</script>
+</body>
+</html>