Spaces:

Translsis
/

emXQ

Running

File size: 10,219 Bytes

<!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>