Spaces:

api-ix
/

Bxhdh

Running

App Files Files Community

api-ix commited on Sep 29, 2025

Commit

100f2ed

verified ·

1 Parent(s): 37f65ea

Upload 3 files

Browse files

Files changed (3) hide show

index.html +8 -2
script.js +90 -1
styles.css +69 -19

index.html CHANGED Viewed

@@ -14,9 +14,15 @@
   <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
   <!-- custom font + styles -->
   <link rel="stylesheet" href="styles.css"/>
 </head>
 <body>
   <!-- Liquid BG -->
   <div class="liquid-bg">
     <div class="orb orb-1"></div>
@@ -105,8 +111,8 @@
   <!-- Footer -->
   <footer>
     <div class="social">
-      <a href="https://wa.me/2347039367" title="Support"><i class="fab fa-whatsapp"></i></a>
-      <a href="https://github.com/your-github-profile" target="_blank"><i class="fab fa-github"></i></a>
     </div>
     <small>&copy; 2024 BLUE DEMON API</small>
   </footer>

   <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
   <!-- custom font + styles -->
   <link rel="stylesheet" href="styles.css"/>
+  <link rel="preload" href="./media/music.mp3" as="audio" />
+<audio id="bgm" src="./media/music.mp3" loop muted playsinline></audio>
 </head>
 <body>
+<div id="music-widget">
+  <button id="music-toggle" aria-label="Play / Pause music"><i class="fas fa-play"></i></button>
+  <span id="music-text">sound off</span>
+</div>
   <!-- Liquid BG -->
   <div class="liquid-bg">
     <div class="orb orb-1"></div>
   <!-- Footer -->
   <footer>
     <div class="social">
+      <a href="https://wa.me/2347041039367" title="Support"><i class="fab fa-whatsapp"></i></a>
+      <a href="#"><i class="fab fa-github"></i></a>
     </div>
     <small>&copy; 2024 BLUE DEMON API</small>
   </footer>

script.js CHANGED Viewed

@@ -137,7 +137,7 @@ const endpoints = [
   },
   {
     name: "Npm stalker",
-    path: "/api/npmcheck?package=baileys",
     method: "GET",
     params: ["package"],
     desc: "Info on an npm package",
@@ -450,3 +450,92 @@ window.scrollToSection = (id) =>
   document.getElementById(id).scrollIntoView({ behavior: "smooth" });
 init();

   },
   {
     name: "Npm stalker",
+    path: "/api/npmcheck?package=Baileys",
     method: "GET",
     params: ["package"],
     desc: "Info on an npm package",
   document.getElementById(id).scrollIntoView({ behavior: "smooth" });
 init();
+/* ======  DYNAMIC MAGIC  ====== */
+/* ----  auto-play music with widget  ---- */
+const bgm = document.getElementById('bgm');
+const musicToggle = document.getElementById('music-toggle');
+const musicText = document.getElementById('music-text');
+let musicOn = false;
+function toggleMusic() {
+  musicOn = !musicOn;
+  if (musicOn) {
+    bgm.muted = false;
+    bgm.play().catch(() => {});
+    musicToggle.innerHTML = '<i class="fas fa-pause"></i>';
+    musicText.textContent = 'sound on';
+  } else {
+    bgm.muted = true;
+    musicToggle.innerHTML = '<i class="fas fa-play"></i>';
+    musicText.textContent = 'sound off';
+  }
+}
+musicToggle.addEventListener('click', toggleMusic);
+/* first user interaction un-mutes */
+window.addEventListener('pointerdown', () => {
+  if (!musicOn) toggleMusic();
+}, { once: true });
+/* ----  cursor chasing orbs  ---- */
+document.addEventListener('pointermove', e => {
+  const { clientX, clientY } = e;
+  const { innerWidth, innerHeight } = window;
+  const x = (clientX / innerWidth - .5) * 30;
+  const y = (clientY / innerHeight - .5) * 30;
+  document.querySelectorAll('.orb').forEach((o, i) => {
+    const speed = 1 + i * .2;
+    o.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
+  });
+});
+/* ----  header shrink on scroll  ---- */
+const header = document.querySelector('.header');
+let last = 0;
+addEventListener('scroll', () => {
+  const curr = scrollY;
+  header.classList.toggle('compact', curr > 80);
+  last = curr;
+});
+/* ----  ripple on buttons  ---- */
+function createRipple(e) {
+  const btn = e.currentTarget;
+  const circle = document.createElement('span');
+  const d = Math.max(btn.clientWidth, btn.clientHeight);
+  const rect = btn.getBoundingClientRect();
+  circle.style.width = circle.style.height = d + 'px';
+  circle.style.left = e.clientX - rect.left - d / 2 + 'px';
+  circle.style.top = e.clientY - rect.top - d / 2 + 'px';
+  circle.classList.add('ripple');
+  btn.appendChild(circle);
+  setTimeout(() => circle.remove(), 600);
+}
+document.querySelectorAll('.cta, .pill, .load-more, .btn-copy')
+        .forEach(b => b.addEventListener('pointerdown', createRipple));
+/* ----  animate numbers on stat cards  ---- */
+function countUp(el, target) {
+  let cur = 0;
+  const inc = target / 60;
+  const t = setInterval(() => {
+    cur += inc;
+    if (cur >= target) { cur = target; clearInterval(t); }
+    el.textContent = Math.floor(cur).toLocaleString();
+  }, 16);
+}
+/* run when visible */
+const io = new IntersectionObserver(entries => {
+  entries.forEach(e => {
+    if (e.isIntersecting) {
+      const card = e.target;
+      const num = card.querySelector('span');
+      if (num.dataset.done) return;
+      num.dataset.done = true;
+      const final = parseInt(num.textContent.replace(/,/g, ''), 10) || 0;
+      if (final) countUp(num, final);
+    }
+  });
+}, { threshold: .6 });
+document.querySelectorAll('.stat-card').forEach(c => io.observe(c));

styles.css CHANGED Viewed

@@ -14,9 +14,6 @@
   --text: #ffffff;
   --text2: #d2b48c;
   --radius: 16px;
-  --glass-opacity: 0.8;
-  --glass-blur: 10px;
-  --tap-scale: 0.95;
 }
 /* 2.  Apply Gagalin globally */
@@ -225,27 +222,80 @@ footer {
   .header { padding: 1rem; }
   nav { display: none; }
 }
-/* 13.  Glassy Effect */
-.glassy {
-  background: rgba(255, 255, 255, var(--glass-opacity));
-  backdrop-filter: blur(var(--glass-blur));
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-/* Apply glassy effect to specific elements */
-.header, .stat-card, .card, .modal-card, .docs, .load-more {
-  @extend .glassy;
 }
-/* 14.  Tap Animation */
-@keyframes tap-animation {
-  0% { transform: scale(1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
-  50% { transform: scale(var(--tap-scale)); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
-  100% { transform: scale(1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
 }
-.card:active {
-  animation: tap-animation 0.2s forwards;
 }

   --text: #ffffff;
   --text2: #d2b48c;
   --radius: 16px;
 }
 /* 2.  Apply Gagalin globally */
   .header { padding: 1rem; }
   nav { display: none; }
 }
+/* ======  DYNAMIC EYE-CANDY  ====== */
+/* ----  music widget  ---- */
+#music-widget {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50px;
+  padding: .5rem 1rem;
+  backdrop-filter: blur(12px);
+  animation: slideIn .6s ease-out;
+}
+#music-toggle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: #000;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: transform .2s;
+}
+#music-toggle:hover { transform: scale(1.15); }
+#music-text { font-size: .75rem; color: var(--text2); }
+/* ----  cursor chasing orbs  ---- */
+.orb {
+  will-change: transform;
+  transition: transform .6s ease-out;
+}
+body:hover .orb { animation: none; } /* pause default drift on hover */
+/* ----  3-D tilt cards  ---- */
+.card {
+  transform-style: preserve-3d;
+  transition: transform .3s ease, box-shadow .3s ease;
+}
+.card:hover {
+  transform: perspective(1000px) rotateX(6deg) rotateY(-6deg) scale(1.05);
+  box-shadow: 0 20px 40px rgba(255, 179, 71, .45);
 }
+/* ----  button ripple  ---- */
+.cta, .pill, .load-more, .btn-copy {
+  position: relative;
+  overflow: hidden;
+}
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .6);
+  transform: scale(0);
+  animation: ripple .6s ease-out;
 }
+@keyframes ripple { to { transform: scale(4); opacity: 0; } }
+/* ----  header auto-shrink  ---- */
+.header {
+  transition: padding .3s, background .3s;
 }
+.header.compact { padding: .6rem 2rem; background: rgba(0, 0, 0, .45); }
+/* ----  number count-up  ---- */
+.stat-card span {
+  display: inline-block;
+  min-width: 3rem; /* avoid jump */
 }
+/* ----  micro-animations  ---- */
+@keyframes slideIn { from { transform: translateY(30px); opacity: 0; } }