Kod Mağazası

<style>
.particle-container {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #000;
  overflow: hidden;
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
</style>

<div class="particle-container" id="particleContainer"></div>

<script>
const container = document.getElementById("particleContainer");
const particles = [];
const particleCount = 100;
const maxDistance = 100;

// Parçacıkları oluştur
for (let i = 0; i < particleCount; i++) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  
  // Rastgele pozisyon
  const x = Math.random() * container.offsetWidth;
  const y = Math.random() * container.offsetHeight;
  
  particle.style.left = `${x}px`;
  particle.style.top = `${y}px`;
  particle.style.width = "4px";
  particle.style.height = "4px";
  
  container.appendChild(particle);
  
  particles.push({
    element: particle,
    x: x,
    y: y,
    size: 4
  });
}

container.addEventListener("mousemove", (e) => {
  const rect = container.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  
  particles.forEach(particle => {
    // Fare ile parçacık arasındaki mesafeyi hesapla
    const dx = mouseX - particle.x;
    const dy = mouseY - particle.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance < maxDistance) {
      // Mesafeye göre boyut ve opaklık ayarla
      const scale = 1 - (distance / maxDistance);
      const size = 4 + (scale * 20);
      const opacity = 0.3 + (scale * 0.7);
      
      particle.element.style.width = `${size}px`;
      particle.element.style.height = `${size}px`;
      particle.element.style.opacity = opacity;
    } else {
      // Varsayılan boyut ve opaklık
      particle.element.style.width = "4px";
      particle.element.style.height = "4px";
      particle.element.style.opacity = "0.3";
    }
  });
});
</script>

<style>
.audio-visualizer {
  width: 100%;
  height: 300px;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bars-container {
  display: flex;
  align-items: flex-end;
  height: 200px;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
}

.bar {
  flex: 1;
  margin: 0 2px;
  background: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
  transition: height 0.1s;
}

.controls {
  text-align: center;
  margin-top: 20px;
}

.play-btn {
  background-color: #4facfe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
</style>

<div class="audio-visualizer">
  <div class="bars-container" id="bars-container"></div>
</div>

<div class="controls">
  <button class="play-btn" id="play-btn">Müziği Başlat</button>
</div>

<script>
// Çubukları oluştur
const barsContainer = document.getElementById("bars-container");
const barsCount = 32;
const bars = [];

for (let i = 0; i < barsCount; i++) {
  const bar = document.createElement("div");
  bar.classList.add("bar");
  bar.style.height = "5px";
  barsContainer.appendChild(bar);
  bars.push(bar);
}

// Ses analizi için gerekli değişkenler
let audioContext;
let analyser;
let dataArray;
let source;
let animationId;

// Demo ses dosyası
const audioElement = new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");

audioElement.loop = true;

document.getElementById("play-btn").addEventListener("click", function() {
  if (audioContext) {
    if (audioElement.paused) {
      audioElement.play();
      this.textContent = "Duraklat";
      visualize();
    } else {
      audioElement.pause();
      this.textContent = "Müziği Başlat";
      cancelAnimationFrame(animationId);
    }
    return;
  }
  
  // AudioContext oluştur
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  analyser = audioContext.createAnalyser();
  
  // FFT boyutunu ayarla
  analyser.fftSize = 64;
  const bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  
  // Ses kaynağını bağla
  source = audioContext.createMediaElementSource(audioElement);
  source.connect(analyser);
  analyser.connect(audioContext.destination);
  
  // Müziği başlat
  audioElement.play();
  this.textContent = "Duraklat";
  
  // Görselleştirmeyi başlat
  visualize();
});

function visualize() {
  analyser.getByteFrequencyData(dataArray);
  
  // Her çubuğun yüksekliğini güncelle
  for (let i = 0; i < bars.length; i++) {
    const value = dataArray[i] || 0;
    const height = (value / 255) * 200;
    bars[i].style.height = height + "px";
  }
  
  animationId = requestAnimationFrame(visualize);
}
</script>

<style>
.notification {
  position: fixed;
  bottom: 20px;
  right: -300px;
  width: 280px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 15px;
  transition: right 0.5s ease;
  z-index: 1000;
}

.notification.show {
  right: 20px;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.notification-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.notification-body {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.notification-progress {
  height: 3px;
  background-color: #f1f1f1;
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.notification-progress-bar {
  height: 100%;
  width: 100%;
  background-color: #4CAF50;
  border-radius: 3px;
  transition: width 0.1s linear;
}
</style>

<button id="show-notification" style="padding: 10px 20px;">Bildirimi Göster</button>

<div class="notification" id="notification">
  <div class="notification-header">
    <div class="notification-title">Bildirim Başlığı</div>
    <button class="notification-close">&times;</button>
  </div>
  <div class="notification-body">
    Bu bir bildirim mesajıdır. İstediğiniz içeriği buraya ekleyebilirsiniz.
  </div>
  <div class="notification-progress">
    <div class="notification-progress-bar" id="progress-bar"></div>
  </div>
</div>

<script>
const notification = document.getElementById("notification");
const progressBar = document.getElementById("progress-bar");
const closeBtn = document.querySelector(".notification-close");
const showBtn = document.getElementById("show-notification");

let timer;
let progress = 100;

function showNotification() {
  notification.classList.add("show");
  progress = 100;
  progressBar.style.width = "100%";
  
  timer = setInterval(() => {
    progress -= 1;
    progressBar.style.width = progress + "%";
    
    if (progress <= 0) {
      clearInterval(timer);
      hideNotification();
    }
  }, 30);
}

function hideNotification() {
  notification.classList.remove("show");
  clearInterval(timer);
}

closeBtn.addEventListener("click", hideNotification);
showBtn.addEventListener("click", showNotification);
</script>

<style>
.counter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30px 0;
}

.counter-box {
  text-align: center;
  padding: 20px;
  width: 160px;
}

.counter {
  font-size: 40px;
  font-weight: bold;
  color: #5264AE;
  margin-bottom: 10px;
}

.counter-text {
  font-size: 16px;
  color: #666;
}
</style>

<div class="counter-container">
  <div class="counter-box">
    <div class="counter" data-target="1500">0</div>
    <div class="counter-text">Mutlu Müşteri</div>
  </div>
  <div class="counter-box">
    <div class="counter" data-target="500">0</div>
    <div class="counter-text">Tamamlanan Proje</div>
  </div>
  <div class="counter-box">
    <div class="counter" data-target="50">0</div>
    <div class="counter-text">Ödül</div>
  </div>
</div>

<script>
const counters = document.querySelectorAll(".counter");

counters.forEach(counter => {
  const target = +counter.getAttribute("data-target");
  const increment = target / 100;
  
  const updateCounter = () => {
    const count = +counter.innerText;
    if (count < target) {
      counter.innerText = Math.ceil(count + increment);
      setTimeout(updateCounter, 10);
    } else {
      counter.innerText = target;
    }
  };
  
  updateCounter();
});
</script>