Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>AI Gözlük Deneyimi</title>

<style>

body {

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

background-color: #f0f2f5;

}

/* Mobil Cihaz Çerçevesi */

.mobile-frame {

width: 375px;

height: 812px;

border-radius: 40px;

overflow: hidden;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

position: relative;

background: white;

border: 8px solid #fff;

}

/* Glassmorphism Efekti */

.glass-card {

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

backdrop-filter: blur(12px);

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

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

}

/* Tarama Çizgisi Animasyonu */

.scan-line {

position: absolute;

width: 100%;

height: 2px;

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

box-shadow: 0 0 10px rgba(124, 58, 237, 0.8);

top: 0;

animation: scan 3s infinite ease-in-out;

z-index: 10;

}

@keyframes scan {

0% { top: 20%; opacity: 0; }

10% { opacity: 1; }

90% { opacity: 1; }

100% { top: 60%; opacity: 0; }

}

/* Etiket Baloncukları Animasyonu */

.floating-tag {

animation: float 4s ease-in-out infinite;

}

.floating-tag-2 {

animation: float 5s ease-in-out infinite reverse;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-5px); }

100% { transform: translateY(0px); }

}

/* Cetvel Çizgileri */

.ruler-mark {

height: 1px;

background-color: #e5e7eb;

width: 100%;

margin: 10px 0;

position: relative;

}

.ruler-mark::after {

content: '';

position: absolute;

left: 0;

top: 0;

height: 1px;

width: 10px;

background-color: #9ca3af;

}

</style>

</head>

<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1000&auto=format&fit=crop"

alt="Model"

class="w-full h-full object-cover">

</div>

</div>

<span class="text-xs font-semibold text-gray-800">AI Yüz Tarama</span>

</div>

<span class="text-xs font-semibold text-gray-800">Ultra-Hafif Çerçeveler</span>

</div>

</div>

Seni Anlayan<br>Çerçeveler

</h2>

Günlük özgüvenin için yapay zeka destekli uyum analizi ve stil önerileri.

</p>

<span>Yüzümü Tara</span>

</button>

</div>

</div>

</div>

<h3 class="font-bold text-gray-800 text-lg">İdeal Çerçeve Boyutun</h3>

</div>

</div>

<img src="https://images.unsplash.com/photo-1577803645773-f96470509666?q=80&w=1000&auto=format&fit=crop"

alt="Gözlük"

class="w-full h-auto object-contain drop-shadow-2xl relative z-10 transform -rotate-6 transition-transform hover:rotate-0 duration-500 cursor-pointer">

</div>

</div>

<p class="text-gray-400 text-xs mb-6">Yüz yapınıza en uygun boyut.</p>

<span class="text-gray-500 text-sm">Çerçeve Genişliği</span>

</div>

<span class="text-gray-500 text-sm">Burun Köprüsü</span>

</div>

<span class="text-gray-500 text-sm">Sap Uzunluğu</span>

</div>

<span class="text-[10px] font-bold text-gray-800 uppercase tracking-widest">WebstarInfotech</span>

</div>

</div>

// Beden Seçim Fonksiyonu

function selectSize(btn) {

// Tüm butonları sıfırla

document.querySelectorAll('.size-btn').forEach(b => {

b.className = 'size-btn w-10 h-10 rounded-xl text-gray-400 text-xs font-medium hover:bg-gray-50 transition';

});

// Seçilen butonu aktif yap

btn.className = 'size-btn w-10 h-10 rounded-xl bg-purple-600 text-white text-xs font-bold shadow-md shadow-purple-200 transition scale-110';

// Başlığı güncelle (Sadece görsel amaçlı)

const sizeText = btn.innerText;

const titleElement = document.querySelector('h4');

let fullText = "Orta (M)";

if(sizeText === 'XS') fullText = "Ekstra Küçük (XS)";

if(sizeText === 'S') fullText = "Küçük (S)";

if(sizeText === 'M') fullText = "Orta (M)";

if(sizeText === 'L') fullText = "Geniş (L)";

if(sizeText === 'XL') fullText = "Ekstra Geniş (XL)";

titleElement.innerText = fullText;

}

// Tarama Butonu Efekti

function scanEffect() {

const btn = document.querySelector('button[onclick="scanEffect()"]');

const originalText = btn.innerHTML;

btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Taranıyor...';

btn.classList.add('opacity-80', 'cursor-wait');

setTimeout(() => {

btn.innerHTML = '<i class="fa-solid fa-check"></i> Tamamlandı';

btn.classList.replace('from-purple-600', 'from-green-500');

btn.classList.replace('to-blue-500', 'to-green-400');

setTimeout(() => {

btn.innerHTML = originalText;

btn.classList.replace('from-green-500', 'from-purple-600');

btn.classList.replace('to-green-400', 'to-blue-500');

btn.classList.remove('opacity-80', 'cursor-wait');

}, 2000);

}, 1500);

}

</script>

</body>

</html>

Metehan

Recommandé

Un code de Metehan

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS