Spaces:

Translsis
/

emXQ

Running

App Files Files Community

Translsis commited on Nov 30, 2025

Commit

bcdea8b

verified ·

1 Parent(s): 9c3b541

Upload 3 files

Browse files

Files changed (4) hide show

.gitattributes +1 -0
index-1.html +219 -0
music.mp3 +3 -0
style-1.css +61 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+music.mp3 filter=lfs diff=lfs merge=lfs -text

index-1.html ADDED Viewed

	@@ -0,0 +1,219 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Duyên 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.7); /* Màu nền nhẹ */
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng đổ cho khung */
+    }
+    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;
+    }
+    .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">
+  <h1>
+    <span class="letter">Duyên</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>

music.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:e3b21b12c7adfa56ccd6aacaeadee469c70b9d78f95128695cc194cd0f58a2ae
+size 3775988

style-1.css ADDED Viewed

	@@ -0,0 +1,61 @@

+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: 'Segoe UI', sans-serif;
+}
+@keyframes gradient {
+  0% {background-position: 0% 50%;}
+  50% {background-position: 100% 50%;}
+  100% {background-position: 0% 50%;}
+}
+.glow {
+  font-size: 4rem;
+  color: white;
+  text-shadow: 0 0 5px #ff4da6, 0 0 20px #ff4da6, 0 0 40px #ff4da6;
+  animation: pulse 2s infinite alternate;
+}
+@keyframes pulse {
+  0% { transform: scale(1); }
+  100% { transform: scale(1.1); }
+}
+.hearts {
+  position: relative;
+  margin-top: 30px;
+}
+.heart {
+  width: 20px;
+  height: 20px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  animation: float 5s infinite ease-in-out;
+  clip-path: polygon(50% 0%, 61% 19%, 81% 25%, 70% 45%, 50% 60%, 30% 45%, 19% 25%, 39% 19%);
+}
+.heart:nth-child(2) {
+  animation-delay: 1s;
+  left: 45%;
+}
+.heart:nth-child(3) {
+  animation-delay: 2s;
+  left: 55%;
+}
+@keyframes float {
+  0% {transform: translateY(0) scale(1);}
+  100% {transform: translateY(-300px) scale(1.5); opacity: 0;}
+}