أكواد CSS & JavaScript المجانية

.salla-advertisement {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  display: block !important;
  width: 100% !important;
}

.main-nav-container.fixed-pinned {
  top: 46px !important;
}

.main-nav-container.fixed-header .inner {
  transform: none !important;
  margin-top: 44px;
}

.product-label--sold-out {
  display: none !important;
}

.product-label-out-of-stock {
  display: none !important;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5e3bee, #8b5cf6);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a2fbe;
}

.product-card {
  transition: transform 0.4s cubic-bezier(
    0.175, 0.885, 0.32, 1.275
  ),
  box-shadow 0.4s ease;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.btn-gradient {
  background: linear-gradient(135deg, #5e3bee 0%, #8b5cf6 100%);
  color: #ffffff;
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(94, 59, 238, 0.35);
}

.btn-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(94, 59, 238, 0.5);
}

function animateCounter(el, target, duration) {
  let start = 0;
  const step = target / (duration / 16);
  function tick() {
    start += step;
    if (start >= target) {
      el.textContent = target.toLocaleString();
      return;
    }
    el.textContent = Math.floor(start).toLocaleString();
    requestAnimationFrame(tick);
  }
  tick();
}

// Usage:
// animateCounter(document.getElementById('stat'), 1500, 2000);

document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('loaded');
        observer.unobserve(img);
      }
    });
  }, { rootMargin: '100px' });

  document.querySelectorAll('img[data-src]')
    .forEach(img => observer.observe(img));
});

<button id="backToTop" style="
  position:fixed;bottom:30px;left:30px;
  width:48px;height:48px;border-radius:50%;
  background:#5e3bee;color:#fff;border:none;
  font-size:20px;cursor:pointer;
  display:none;z-index:9999;
  transition:all 0.3s ease;
">↑</button>

<script>
window.addEventListener('scroll', () => {
  const btn = document.getElementById('backToTop');
  btn.style.display = window.scrollY > 400
    ? 'flex' : 'none';
});
document.getElementById('backToTop')
  .addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>