Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Neşeli Yılbaşı Girişi 🎄</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Nunito:wght@400;700&display=swap');

body {

background-color: #0f2c1f; /* Koyu Çam Yeşili */

background-image: radial-gradient(circle at 50% 50%, #1a4731 0%, #0f2c1f 100%);

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

overflow-x: hidden; /* Yan kaydırmayı engelle */

}

.festive-text {

font-family: 'Mountains of Christmas', cursive;

font-weight: 700;

}

.glow-red {

text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);

}

.glow-green {

text-shadow: 0 0 10px rgba(16, 185, 129, 0.6);

}

.candy-cane-bg {

background: repeating-linear-gradient(

45deg,

#ef4444,

#ef4444 10px,

#f87171 10px,

#f87171 20px

);

}

.snow-bg {

background-color: #f0f9ff;

}

/* Zıplama animasyonu */

.jingle-bounce {

animation: bounce 2s infinite ease-in-out;

}

@keyframes bounce {

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

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

}

/* Input stilleri */

.form-input {

transition: all 0.3s ease;

background-color: rgba(255, 255, 255, 0.9);

border: 2px solid #e5e7eb;

color: #1f2937;

}

.form-input:focus {

outline: none;

box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);

border-color: #ef4444;

}

.form-input-green:focus {

box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);

border-color: #10b981;

}

/* Kar tanesi animasyonu */

@keyframes snowfall {

0% {

transform: translateY(-10px) rotate(0deg);

opacity: 1;

}

100% {

transform: translateY(100vh) rotate(360deg);

opacity: 0.3;

}

.snowflake {

position: absolute;

top: -20px;

color: white;

animation: snowfall linear forwards;

pointer-events: none;

z-index: 0;

}

/* Kartın kendisi */

.glass-card {

backdrop-filter: blur(10px);

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

}

</style>

</head>

</svg>

</div>

</div>

</div>

<i data-feather="home" class="inline mr-2 w-5 h-5"></i> Giriş Yap

</button>

<i data-feather="gift" class="inline mr-2 w-5 h-5"></i> Kayıt Ol

</button>

</div>

<p class="text-gray-500 font-semibold">Noel Baba seni bekliyor...</p>

</div>

<label for="login-username" class="block text-sm font-bold text-gray-700 mb-1">Kuzey Kutbu Adın</label>

</div>

</div>

<label for="login-password" class="block text-sm font-bold text-gray-700 mb-1">Hediye Şifren</label>

</div>

</div>

<span class="ml-2 text-sm text-gray-600">Beni hatırla</span>

</label>

<a href="#" class="text-sm text-red-500 hover:text-red-700 font-semibold">Şifremi Unuttum?</a>

</div>

<i data-feather="sleigh" class="inline mr-2"></i> Kızağa Atla

</button>

</form>

</div>

<h1 class="text-4xl mb-2 festive-text text-green-600 glow-green">LİSTEME GİR</h1>

<p class="text-gray-500 font-semibold">Uslu durdun mu?</p>

</div>

<label for="signup-email" class="block text-sm font-bold text-gray-700 mb-1">E-Posta Adresin</label>

</div>

</div>

</div>

</div>

<label for="signup-password" class="block text-sm font-bold text-gray-700 mb-1">Gizli Şifren</label>

</div>

</div>

<span class="ml-2 text-sm text-gray-600"><a href="#" class="text-green-600 underline">Noel Sözleşmesi</a>'ni kabul ediyorum</span>

</label>

</div>

<i data-feather="check-circle" class="inline mr-2"></i> Elflere Katıl

</button>

</form>

</div>

</div>

</div>

</div>

// İkonları yükle

feather.replace();

// Tab (Sekme) Değiştirme Mantığı

const loginTab = document.getElementById('login-tab');

const signupTab = document.getElementById('signup-tab');

const loginForm = document.getElementById('login-form');

const signupForm = document.getElementById('signup-form');

const cardContainer = document.querySelector('.glass-card');

loginTab.addEventListener('click', function() {

// Tab stilleri

loginTab.classList.add('border-b-4', 'border-red-600', 'text-red-600', 'bg-white');

loginTab.classList.remove('text-gray-400', 'bg-gray-50');

signupTab.classList.remove('border-b-4', 'border-green-600', 'text-green-600', 'bg-white');

signupTab.classList.add('text-gray-400', 'bg-gray-50');

// Formu göster/gizle

loginForm.classList.remove('hidden');

signupForm.classList.add('hidden');

// Kart kenarlığını değiştir

cardContainer.classList.remove('border-green-600');

cardContainer.classList.add('border-red-600');

});

signupTab.addEventListener('click', function() {

// Tab stilleri

signupTab.classList.add('border-b-4', 'border-green-600', 'text-green-600', 'bg-white');

signupTab.classList.remove('text-gray-400', 'bg-gray-50');

loginTab.classList.remove('border-b-4', 'border-red-600', 'text-red-600', 'bg-white');

loginTab.classList.add('text-gray-400', 'bg-gray-50');

// Formu göster/gizle

signupForm.classList.remove('hidden');

loginForm.classList.add('hidden');

// Kart kenarlığını değiştir

cardContainer.classList.remove('border-red-600');

cardContainer.classList.add('border-green-600');

});

// Jingle Bells Sesi (Basit bir zil sesi efekti)

const inputs = document.querySelectorAll('input');

// Ses dosyasını güvenli bir kaynaktan çalmak için basit bir fonksiyon

// Tarayıcı politikaları nedeniyle ses bazen ilk tıklamada çalışmayabilir

const playJingle = () => {

// Kısa, neşeli bir ses efekti (base64 ile gömülebilir ama link daha temiz)

const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-software-interface-start-2574.mp3');

audio.volume = 0.1;

audio.play().catch(e => console.log("Ses çalınamadı (Otomatik oynatma kısıtlaması olabilir)"));

};

inputs.forEach(input => {

input.addEventListener('focus', playJingle);

});

// Kar Yağışı Efekti

function createSnowflake() {

const snowContainer = document.getElementById('snow-container');

const snowflake = document.createElement('div');

// Farklı kar tanesi şekilleri

const shapes = ['❄', '❅', '❆', '•'];

snowflake.innerHTML = shapes[Math.floor(Math.random() * shapes.length)];

snowflake.className = 'snowflake';

// Rastgele pozisyon ve boyut

const startX = Math.random() * window.innerWidth;

const duration = Math.random() * 5 + 5; // 5 ile 10 saniye arası

const size = Math.random() * 15 + 10; // 10px ile 25px arası

snowflake.style.left = `${startX}px`;

snowflake.style.fontSize = `${size}px`;

snowflake.style.animationDuration = `${duration}s`;

snowflake.style.opacity = Math.random();

snowContainer.appendChild(snowflake);

// Animasyon bitince temizle

setTimeout(() => {

snowflake.remove();

}, duration * 1000);

}

// Sürekli kar yağdır

setInterval(createSnowflake, 300);

// Başlangıçta biraz kar oluştur

for(let i=0; i<10; i++) {

setTimeout(createSnowflake, i * 200);

}

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS