WordPress Frontend Snippets Collection

<div class="chakra-system">
  <div class="chakra-container">
    <div class="chakra-column">
      <!-- Crown Chakra -->
      <div class="chakra" data-chakra="crown" data-name="Crown Chakra" data-color="#9b59b6" data-details="The Crown Chakra represents spiritual connection...">
        <img src="crown-chakra.png" alt="Crown Chakra">
        <div class="glow"></div>
      </div>
      
      <!-- Third Eye Chakra -->
      <div class="chakra" data-chakra="third-eye" data-name="Third Eye Chakra" data-color="#3498db" data-details="The Third Eye Chakra governs intuition...">
        <img src="third-eye.png" alt="Third Eye">
        <div class="glow"></div>
      </div>
      
      <!-- ... (remaining 5 chakras) -->
    </div>
  </div>
  
  <!-- Detail Modal -->
  <div class="chakra-modal">
    <div class="modal-content">
      <h2 id="chakra-name"></h2>
      <div id="chakra-color" class="color-indicator"></div>
      <p id="chakra-details"></p>
      <button class="close-modal">Close</button>
    </div>
  </div>
</div>

.chakra {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.chakra:hover {
  transform: scale(1.1);
}

.chakra .glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

document.querySelectorAll('.chakra').forEach(chakra => {
  chakra.addEventListener('click', () => {
    document.getElementById('chakra-name').textContent = chakra.dataset.name;
    document.getElementById('chakra-details').textContent = chakra.dataset.details;
    document.getElementById('chakra-color').style.backgroundColor = chakra.dataset.color;
    document.querySelector('.chakra-modal').style.display = 'flex';
  });
});

<div class="shimmer-container">
  <div class="shimmer-box">
    <div class="shimmer-line shimmer-title"></div>
    <div class="shimmer-line"></div>
    <div class="shimmer-line"></div>
    <div class="shimmer-line short"></div>
  </div>
</div>

.shimmer-box {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.shimmer-line {
  height: 16px;
  background: #e0e0e0;
  margin-bottom: 12px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.shimmer-title {
  height: 24px;
  width: 60%;
}

.shimmer-line.short {
  width: 40%;
}

.shimmer-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

<div class="testimonial-carousel">
  <div class="carousel-track">
    <div class="testimonial-slide">
      <div class="testimonial-content">
        <p>"This product changed my life. Highly recommended!"</p>
      </div>
      <div class="testimonial-author">
        <img src="author.jpg" alt="John Doe">
        <div class="author-info">
          <h4>John Doe</h4>
          <span>CEO, Company</span>
        </div>
      </div>
    </div>
    
    <!-- More slides -->
  </div>
  
  <div class="carousel-nav">
    <button class="prev">←</button>
    <div class="dots"></div>
    <button class="next">→</button>
  </div>
</div>

class TestimonialCarousel {
  constructor(container) {
    this.container = container;
    this.track = container.querySelector('.carousel-track');
    this.slides = container.querySelectorAll('.testimonial-slide');
    this.current = 0;
    
    this.init();
  }
  
  init() {
    this.showSlide(0);
    this.createDots();
    this.addEventListeners();
  }
  
  showSlide(index) {
    this.slides.forEach((slide, i) => {
      slide.style.display = i === index ? 'block' : 'none';
    });
  }
  
  next() {
    this.current = (this.current + 1) % this.slides.length;
    this.showSlide(this.current);
  }
  
  prev() {
    this.current = (this.current - 1 + this.slides.length) % this.slides.length;
    this.showSlide(this.current);
  }
}

function add_frontend_snippets() {
    // Output snippets in appropriate hooks
}
add_action('wp_footer', 'add_frontend_snippets');