Webleb - Code-Snippets

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Nova Earbuds Showcase Pro</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Outfit', 'sans-serif'],

colors: {

brand: {

red: '#FF4D4D',

black: '#1F2937',

silver: '#9CA3AF',

}

boxShadow: {

'soft': '0 20px 40px -15px rgba(0, 0, 0, 0.1)',

'glow': '0 0 20px rgba(255, 255, 255, 0.3)',

'card': '0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3)',

backgroundImage: {

'gradient-red': 'linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%)',

'gradient-black': 'linear-gradient(135deg, #2C3E50 0%, #000000 100%)',

'gradient-white': 'linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)', /* Metallic look */

}

</script>

<style>

body {

background: linear-gradient(-45deg, #1a1a1a, #2c3e50, #4ca1af, #2c3e50);

background-size: 400% 400%;

animation: gradientBG 15s ease infinite;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

font-family: 'Outfit', sans-serif;

-webkit-font-smoothing: antialiased;

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.glass-panel {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.vertical-text {

writing-mode: vertical-rl;

text-orientation: mixed;

transform: rotate(180deg);

}

.product-image {

filter: drop-shadow(0 25px 35px rgba(0,0,0,0.4));

transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;

}

.product-card {

transition: background 0.8s ease;

}

.product-card:hover .product-image {

transform: scale(1.08) translateY(-15px) rotate(-3deg);

}

/* Animation classes for JS slider */

.slide-out {

opacity: 0;

transform: translateX(-50px) scale(0.9);

}

.slide-in {

animation: slideInAnim 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

@keyframes slideInAnim {

from { opacity: 0; transform: translateX(50px) scale(0.9); }

to { opacity: 1; transform: translateX(0) scale(1); }

}

.swipe-btn {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(8px);

border: 1px solid rgba(255, 255, 255, 0.2);

transition: all 0.3s ease;

}

.swipe-btn:hover {

background: rgba(255, 255, 255, 0.25);

}

.swipe-btn:active {

transform: scale(0.97);

}

.color-dot {

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.color-dot.active {

transform: scale(1.25);

box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;

}

/* Hide scrollbar */

::-webkit-scrollbar { width: 0px; background: transparent; }

</style>

</head>

Nova.

</div>

<div>

<h2 class="text-sm font-bold tracking-[0.15em] uppercase opacity-80 border-b border-white/30 pb-1 mb-1 inline-block">Nova Series II</h2>

<p id="model-subtitle" class="text-xs opacity-70">Pro Edition - Red</p>

</div>

</div>

<img id="main-image"

src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

alt="Wireless Earbuds"

class="product-image w-[300px] h-[300px] object-cover rounded-full mix-blend-normal mask-image-circle z-20"

style="clip-path: circle(46%);"

</div>

<span class="vertical-text text-xs font-bold tracking-[0.3em] opacity-60 uppercase">High Fidelity Audio</span>

</div>

Sound<br>Unleashed.

</h1>

</div>

<span class="text-sm font-bold uppercase tracking-wider">Sonraki Model</span>

<span class="text-[10px] opacity-70">Kaydırarak Keşfet</span>

</div>

<span class="px-3 py-1 rounded-full bg-gray-100 text-[10px] font-bold uppercase tracking-wide text-gray-500">Stokta Var</span>

</div>

<h2 id="product-name" class="text-3xl font-bold text-gray-900 mb-2">Nova Red Elite</h2>

</div>

Yeni nesil aktif gürültü engelleme, 30 saat pil ömrü ve stüdyo kalitesinde ses deneyimi. Şimdi suya daha dayanıklı.

</p>

</div>

<p class="text-xs font-bold text-gray-400 mb-3 uppercase tracking-wider">Renk Seçimi</p>

</button>

</button>

</button>

</div>

<span class="text-xs text-gray-500 font-medium">Bağlantı</span>

</div>

</div>

<span class="text-xs text-gray-500 font-medium">Gürültü</span>

</div>

<span class="text-xs text-gray-500 font-medium">Dayanıklılık</span>

</div>

<span class="relative z-10">Sepete Ekle - $299</span>

</button>

</div>

// Ürün verileri

const products = [

{

id: 0,

subtitle: "Pro Edition - Red",

bgGradient: "linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%)",

image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

{

id: 1,

subtitle: "Pro Edition - Black",

bgGradient: "linear-gradient(135deg, #2c3e50 0%, #000000 100%)",

image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

{

id: 2,

subtitle: "Pro Edition - Silver",

bgGradient: "linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)",

image: "https://images.unsplash.com/photo-1606220588913-b3aacb4d2f46?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

}

];

let currentIndex = 0;

const visualCard = document.getElementById('visual-card');

const mainImage = document.getElementById('main-image');

const productName = document.getElementById('product-name');

const modelSubtitle = document.getElementById('model-subtitle');

const bgText = document.getElementById('bg-text');

// Modeli değiştiren fonksiyon

function selectModel(index) {

if(index === currentIndex) return; // Zaten seçiliyse işlem yapma

currentIndex = index;

updateUI();

}

// Sonraki modele geçen fonksiyon (Buton için)

function nextModel() {

currentIndex = (currentIndex + 1) % products.length; // Döngüsel geçiş (0, 1, 2, 0...)

updateUI();

}

function updateUI() {

const product = products[currentIndex];

// 1. Arka planı değiştir

visualCard.style.background = product.bgGradient;

// 2. Metinleri güncelle (Fade efektiyle)

productName.style.opacity = 0;

modelSubtitle.style.opacity = 0;

setTimeout(() => {

productName.innerText = product.name;

modelSubtitle.innerText = product.subtitle;

productName.style.opacity = 1;

modelSubtitle.style.opacity = 1;

}, 200);

// 3. Görsel Animasyonu (Slide Out -> Change Src -> Slide In)

mainImage.classList.add('slide-out');

setTimeout(() => {

mainImage.src = product.image;

mainImage.classList.remove('slide-out');

mainImage.classList.add('slide-in');

// Animasyon sınıfını temizle ki sonra tekrar çalışabilsin

setTimeout(() => {

mainImage.classList.remove('slide-in');

}, 600);

}, 300);

// 4. Renk Butonlarını Güncelle (Active class yönetimi)

document.querySelectorAll('.color-dot').forEach((btn, idx) => {

if(idx === currentIndex) {

btn.classList.add('active');

} else {

btn.classList.remove('active');

}

});

// 5. Dekoratif Arka Plan Yazısını değiştir

bgText.innerText = product.name.split(" ")[1] + "."; // "Red.", "Midnight.", "Pearl."

}

// Sepete Ekle Buton Animasyonu

function addToCart(btn) {

const icon = btn.querySelector('i');

const text = btn.querySelector('span');

const originalText = text.innerText;

btn.style.backgroundColor = '#10B981'; // Başarılı Yeşili

icon.className = 'ph-bold ph-check text-xl';

text.innerText = 'Eklendi!';

setTimeout(() => {

btn.style.backgroundColor = ''; // Rengi sıfırla

icon.className = 'ph-bold ph-shopping-cart-simple text-xl';

text.innerText = originalText;

}, 2000);

}

// Mouse hareketi ile 3D tilt efekti (Sadece masaüstü)

visualCard.addEventListener('mousemove', (e) => {

if (window.innerWidth < 768) return;

const rect = visualCard.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const rotateX = ((y - centerY) / centerY) * -5;

const rotateY = ((x - centerX) / centerX) * 5;

visualCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

});

visualCard.addEventListener('mouseleave', () => {

visualCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Nova Earbuds Showcase Pro</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Outfit', 'sans-serif'],

colors: {

brand: {

red: '#FF4D4D',

black: '#1F2937',

silver: '#9CA3AF',

}

boxShadow: {

'soft': '0 20px 40px -15px rgba(0, 0, 0, 0.1)',

'glow': '0 0 20px rgba(255, 255, 255, 0.3)',

'card': '0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3)',

backgroundImage: {

'gradient-red': 'linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%)',

'gradient-black': 'linear-gradient(135deg, #2C3E50 0%, #000000 100%)',

'gradient-white': 'linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)', /* Metallic look */

}

</script>

<style>

body {

background: linear-gradient(-45deg, #1a1a1a, #2c3e50, #4ca1af, #2c3e50);

background-size: 400% 400%;

animation: gradientBG 15s ease infinite;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

font-family: 'Outfit', sans-serif;

-webkit-font-smoothing: antialiased;

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.glass-panel {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.vertical-text {

writing-mode: vertical-rl;

text-orientation: mixed;

transform: rotate(180deg);

}

.product-image {

filter: drop-shadow(0 25px 35px rgba(0,0,0,0.4));

transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;

}

.product-card {

transition: background 0.8s ease;

}

.product-card:hover .product-image {

transform: scale(1.08) translateY(-15px) rotate(-3deg);

}

/* Animation classes for JS slider */

.slide-out {

opacity: 0;

transform: translateX(-50px) scale(0.9);

}

.slide-in {

animation: slideInAnim 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

@keyframes slideInAnim {

from { opacity: 0; transform: translateX(50px) scale(0.9); }

to { opacity: 1; transform: translateX(0) scale(1); }

}

.swipe-btn {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(8px);

border: 1px solid rgba(255, 255, 255, 0.2);

transition: all 0.3s ease;

}

.swipe-btn:hover {

background: rgba(255, 255, 255, 0.25);

}

.swipe-btn:active {

transform: scale(0.97);

}

.color-dot {

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.color-dot.active {

transform: scale(1.25);

box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;

}

/* Hide scrollbar */

::-webkit-scrollbar { width: 0px; background: transparent; }

</style>

</head>

Nova.

</div>

<div>

<h2 class="text-sm font-bold tracking-[0.15em] uppercase opacity-80 border-b border-white/30 pb-1 mb-1 inline-block">Nova Series II</h2>

<p id="model-subtitle" class="text-xs opacity-70">Pro Edition - Red</p>

</div>

</div>

<img id="main-image"

src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"

alt="Wireless Earbuds"

class="product-image w-[300px] h-[300px] object-cover rounded-full mix-blend-normal mask-image-circle z-20"

style="clip-path: circle(46%);"

</div>

<span class="vertical-text text-xs font-bold tracking-[0.3em] opacity-60 uppercase">High Fidelity Audio</span>

</div>

Sound<br>Unleashed.

</h1>

</div>

<span class="text-sm font-bold uppercase tracking-wider">Sonraki Model</span>

<span class="text-[10px] opacity-70">Kaydırarak Keşfet</span>

</div>

<span class="px-3 py-1 rounded-full bg-gray-100 text-[10px] font-bold uppercase tracking-wide text-gray-500">Stokta Var</span>

</div>

<h2 id="product-name" class="text-3xl font-bold text-gray-900 mb-2">Nova Red Elite</h2>

</div>

Yeni nesil aktif gürültü engelleme, 30 saat pil ömrü ve stüdyo kalitesinde ses deneyimi. Şimdi suya daha dayanıklı.

</p>

</div>

<p class="text-xs font-bold text-gray-400 mb-3 uppercase tracking-wider">Renk Seçimi</p>

</button>

</button>

</button>

</div>

<span class="text-xs text-gray-500 font-medium">Bağlantı</span>

</div>

</div>

<span class="text-xs text-gray-500 font-medium">Gürültü</span>

</div>

<span class="text-xs text-gray-500 font-medium">Dayanıklılık</span>

</div>

<span class="relative z-10">Sepete Ekle - $299</span>

</button>

</div>

// Ürün verileri

const products = [

{

id: 0,

subtitle: "Pro Edition - Red",

bgGradient: "linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%)",

image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

{

id: 1,

subtitle: "Pro Edition - Black",

bgGradient: "linear-gradient(135deg, #2c3e50 0%, #000000 100%)",

image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

{

id: 2,

subtitle: "Pro Edition - Silver",

bgGradient: "linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)",

image: "https://images.unsplash.com/photo-1606220588913-b3aacb4d2f46?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",

textColor: "white"

}

];

let currentIndex = 0;

const visualCard = document.getElementById('visual-card');

const mainImage = document.getElementById('main-image');

const productName = document.getElementById('product-name');

const modelSubtitle = document.getElementById('model-subtitle');

const bgText = document.getElementById('bg-text');

// Modeli değiştiren fonksiyon

function selectModel(index) {

if(index === currentIndex) return; // Zaten seçiliyse işlem yapma

currentIndex = index;

updateUI();

}

// Sonraki modele geçen fonksiyon (Buton için)

function nextModel() {

currentIndex = (currentIndex + 1) % products.length; // Döngüsel geçiş (0, 1, 2, 0...)

updateUI();

}

function updateUI() {

const product = products[currentIndex];

// 1. Arka planı değiştir

visualCard.style.background = product.bgGradient;

// 2. Metinleri güncelle (Fade efektiyle)

productName.style.opacity = 0;

modelSubtitle.style.opacity = 0;

setTimeout(() => {

productName.innerText = product.name;

modelSubtitle.innerText = product.subtitle;

productName.style.opacity = 1;

modelSubtitle.style.opacity = 1;

}, 200);

// 3. Görsel Animasyonu (Slide Out -> Change Src -> Slide In)

mainImage.classList.add('slide-out');

setTimeout(() => {

mainImage.src = product.image;

mainImage.classList.remove('slide-out');

mainImage.classList.add('slide-in');

// Animasyon sınıfını temizle ki sonra tekrar çalışabilsin

setTimeout(() => {

mainImage.classList.remove('slide-in');

}, 600);

}, 300);

// 4. Renk Butonlarını Güncelle (Active class yönetimi)

document.querySelectorAll('.color-dot').forEach((btn, idx) => {

if(idx === currentIndex) {

btn.classList.add('active');

} else {

btn.classList.remove('active');

}

});

// 5. Dekoratif Arka Plan Yazısını değiştir

bgText.innerText = product.name.split(" ")[1] + "."; // "Red.", "Midnight.", "Pearl."

}

// Sepete Ekle Buton Animasyonu

function addToCart(btn) {

const icon = btn.querySelector('i');

const text = btn.querySelector('span');

const originalText = text.innerText;

btn.style.backgroundColor = '#10B981'; // Başarılı Yeşili

icon.className = 'ph-bold ph-check text-xl';

text.innerText = 'Eklendi!';

setTimeout(() => {

btn.style.backgroundColor = ''; // Rengi sıfırla

icon.className = 'ph-bold ph-shopping-cart-simple text-xl';

text.innerText = originalText;

}, 2000);

}

// Mouse hareketi ile 3D tilt efekti (Sadece masaüstü)

visualCard.addEventListener('mousemove', (e) => {

if (window.innerWidth < 768) return;

const rect = visualCard.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const rotateX = ((y - centerY) / centerY) * -5;

const rotateY = ((x - centerX) / centerX) * 5;

visualCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

});

visualCard.addEventListener('mouseleave', () => {

visualCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';

});

</script>

</body>

</html>

Preview

Validating your code, please wait...