Spaces:

Translsis
/

emXQ

Running

App Files Files Community

Translsis commited on Nov 30, 2025

Commit

cd29294

verified ·

1 Parent(s): 708d048

Upload index (7).html

Browse files

Files changed (1) hide show

index (7).html +513 -0

index (7).html ADDED Viewed

	@@ -0,0 +1,513 @@

+<!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;
+    }
+    /* Ô mini */
+    .mini-box {
+      position: absolute;
+      border: 3px solid #8B4513;
+      padding: 15px;
+      border-radius: 12px;
+      background-color: rgba(255, 255, 255, 0.25);
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+      cursor: grab;
+      user-select: none;
+      width: 120px;
+      height: 120px;
+    }
+    .mini-box: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;
+  // Mảng chứa tất cả các box (bao gồm cả box chính và mini boxes)
+  const boxes = [];
+  // Khởi tạo box chính
+  const mainBox = {
+    element: container,
+    x: window.innerWidth / 2,
+    y: window.innerHeight / 2,
+    velX: 0,
+    velY: 0,
+    isDragging: false,
+    dragOffsetX: 0,
+    dragOffsetY: 0
+  };
+  boxes.push(mainBox);
+  // Tạo 8 ô mini với video ngẫu nhiên
+  const miniBoxCount = 8;
+  const miniBoxSize = 120;
+  const spawnMargin = 100; // Khoảng cách tối thiểu giữa các ô
+  // Hàm kiểm tra va chạm giữa 2 ô
+  function isOverlapping(x1, y1, x2, y2, size1, size2) {
+    const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    const minDistance = (size1 + size2) / 2 + spawnMargin;
+    return distance < minDistance;
+  }
+  // Hàm tìm vị trí không bị chồng lên
+  function findNonOverlappingPosition(existingBoxes, maxAttempts = 100) {
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      const x = Math.random() * (window.innerWidth - 200) + 100;
+      const y = Math.random() * (window.innerHeight - 200) + 100;
+      let hasOverlap = false;
+      // Kiểm tra với box chính
+      const mainRect = mainBox.element.getBoundingClientRect();
+      if (isOverlapping(x, y, mainBox.x, mainBox.y, miniBoxSize, Math.max(mainRect.width, mainRect.height))) {
+        hasOverlap = true;
+      }
+      // Kiểm tra với các mini box đã tạo
+      for (let box of existingBoxes) {
+        if (isOverlapping(x, y, box.x, box.y, miniBoxSize, miniBoxSize)) {
+          hasOverlap = true;
+          break;
+        }
+      }
+      if (!hasOverlap) {
+        return { x, y };
+      }
+    }
+    // Nếu không tìm được vị trí sau nhiều lần thử, trả về vị trí ngẫu nhiên
+    return {
+      x: Math.random() * (window.innerWidth - 200) + 100,
+      y: Math.random() * (window.innerHeight - 200) + 100
+    };
+  }
+  const miniBoxes = [];
+  for (let i = 0; i < miniBoxCount; i++) {
+    const miniBox = document.createElement('div');
+    miniBox.className = 'mini-box';
+    // Random chọn video
+    const videoSrc = Math.random() > 0.5 ? 'video.mp4' : 'Background.mp4';
+    miniBox.innerHTML = `
+      <video class="video-background" autoplay loop muted playsinline preload="auto" loading="eager">
+        <source src="${videoSrc}" type="video/mp4">
+      </video>
+    `;
+    document.body.appendChild(miniBox);
+    // Tìm vị trí không bị chồng lên
+    const position = findNonOverlappingPosition(miniBoxes);
+    const boxData = {
+      element: miniBox,
+      x: position.x,
+      y: position.y,
+      velX: (Math.random() - 0.5) * 5,
+      velY: (Math.random() - 0.5) * 5,
+      isDragging: false,
+      dragOffsetX: 0,
+      dragOffsetY: 0
+    };
+    miniBoxes.push(boxData);
+    boxes.push(boxData);
+    // Thêm event listener cho mini box
+    miniBox.addEventListener('mousedown', (e) => startDrag(e, boxData));
+    miniBox.addEventListener('touchstart', (e) => startDrag(e, boxData));
+  }
+  const friction = 0.95;
+  const elasticity = 0.7;
+  const wallMargin = 50;
+  // Khởi tạo vị trí ban đầu cho box chính
+  mainBox.element.style.left = mainBox.x + 'px';
+  mainBox.element.style.top = mainBox.y + 'px';
+  mainBox.element.style.transform = 'translate(-50%, -50%)';
+  // Xử lý kéo thả
+  container.addEventListener('mousedown', (e) => startDrag(e, mainBox));
+  container.addEventListener('touchstart', (e) => startDrag(e, mainBox));
+  function startDrag(e, box) {
+    box.isDragging = true;
+    const touch = e.type === 'touchstart' ? e.touches[0] : e;
+    box.dragOffsetX = touch.clientX - box.x;
+    box.dragOffsetY = touch.clientY - box.y;
+    box.velX = 0;
+    box.velY = 0;
+    e.preventDefault();
+  }
+  document.addEventListener('mousemove', drag);
+  document.addEventListener('touchmove', drag);
+  function drag(e) {
+    boxes.forEach(box => {
+      if (box.isDragging) {
+        const touch = e.type === 'touchmove' ? e.touches[0] : e;
+        const newX = touch.clientX - box.dragOffsetX;
+        const newY = touch.clientY - box.dragOffsetY;
+        box.velX = (newX - box.x) * 0.5;
+        box.velY = (newY - box.y) * 0.5;
+        box.x = newX;
+        box.y = newY;
+      }
+    });
+  }
+  document.addEventListener('mouseup', stopDrag);
+  document.addEventListener('touchend', stopDrag);
+  function stopDrag() {
+    boxes.forEach(box => {
+      box.isDragging = false;
+    });
+  }
+  // Cập nhật vật lý cho tất cả boxes
+  function updateBoxPhysics() {
+    boxes.forEach(box => {
+      if (!box.isDragging) {
+        // Áp dụng ma sát
+        box.velX *= friction;
+        box.velY *= friction;
+        // Cập nhật vị trí
+        box.x += box.velX;
+        box.y += box.velY;
+        // Kiểm tra va chạm với tường
+        const rect = box.element.getBoundingClientRect();
+        const halfWidth = rect.width / 2;
+        const halfHeight = rect.height / 2;
+        // Tường trái
+        if (box.x - halfWidth < wallMargin) {
+          box.x = wallMargin + halfWidth;
+          box.velX = Math.abs(box.velX) * elasticity;
+        }
+        // Tường phải
+        if (box.x + halfWidth > window.innerWidth - wallMargin) {
+          box.x = window.innerWidth - wallMargin - halfWidth;
+          box.velX = -Math.abs(box.velX) * elasticity;
+        }
+        // Tường trên
+        if (box.y - halfHeight < wallMargin) {
+          box.y = wallMargin + halfHeight;
+          box.velY = Math.abs(box.velY) * elasticity;
+        }
+        // Tường dưới
+        if (box.y + halfHeight > window.innerHeight - wallMargin) {
+          box.y = window.innerHeight - wallMargin - halfHeight;
+          box.velY = -Math.abs(box.velY) * elasticity;
+        }
+      }
+      // Cập nhật vị trí DOM
+      if (box.element === container) {
+        box.element.style.left = box.x + 'px';
+        box.element.style.top = box.y + 'px';
+      } else {
+        box.element.style.left = (box.x - 60) + 'px';
+        box.element.style.top = (box.y - 60) + 'px';
+      }
+    });
+    requestAnimationFrame(updateBoxPhysics);
+  }
+  updateBoxPhysics();
+  // 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) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    // Chỉ tạo emoji khi không kéo box nào
+    const anyDragging = boxes.some(box => box.isDragging);
+    if (!anyDragging) {
+      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 - tối ưu âm thanh
+  let musicStarted = false;
+  function startMusic() {
+    if (!musicStarted) {
+      music.loop = true;
+      music.play().catch(e => console.log('Music autoplay blocked:', e));
+      musicStarted = true;
+    }
+  }
+  document.addEventListener('click', startMusic, { once: true });
+  document.addEventListener('touchstart', startMusic, { once: true });
+  document.addEventListener('keydown', startMusic, { 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>