Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Galaktik Erişim Portalı</title>

<style>

/* Fütüristik Fontlar */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');

body {

background-color: #050505;

/* Derin uzay gradyanı */

background-image:

radial-gradient(circle at 20% 30%, #1a1a2e 0%, transparent 40%),

radial-gradient(circle at 80% 70%, #16213e 0%, transparent 40%),

linear-gradient(to bottom, #000000, #0f172a);

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

overflow-x: hidden;

color: #e2e8f0;

}

.sci-fi-text {

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

letter-spacing: 2px;

}

/* Neon Glow Efektleri */

.glow-cyan {

text-shadow: 0 0 10px rgba(6, 182, 212, 0.7), 0 0 20px rgba(6, 182, 212, 0.5);

}

.glow-purple {

text-shadow: 0 0 10px rgba(147, 51, 234, 0.7), 0 0 20px rgba(147, 51, 234, 0.5);

}

/* Kart Stili - Daha karanlık ve teknolojik */

.glass-card {

backdrop-filter: blur(16px);

background: rgba(15, 23, 42, 0.6);

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

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

}

/* Yavaş süzülme (Zero-G) animasyonu */

.zero-gravity {

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

}

@keyframes float {

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

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

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

}

/* Input stilleri - HUD görünümü */

.form-input {

transition: all 0.3s ease;

background-color: rgba(0, 0, 0, 0.3);

border: 1px solid #334155;

color: #f8fafc;

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

letter-spacing: 1px;

}

.form-input:focus {

outline: none;

background-color: rgba(6, 182, 212, 0.05);

box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);

border-color: #06b6d4; /* Cyan */

}

.form-input-purple:focus {

background-color: rgba(147, 51, 234, 0.05);

box-shadow: 0 0 15px rgba(147, 51, 234, 0.2);

border-color: #9333ea; /* Purple */

}

/* Placeholder rengi */

::placeholder {

color: #64748b;

}

/* Yıldız Animasyonları */

@keyframes twinkle {

0%, 100% { opacity: 0.2; transform: scale(0.8); }

50% { opacity: 1; transform: scale(1.2); }

}

@keyframes space-drift {

from { transform: translateY(0); }

to { transform: translateY(-100vh); }

}

.star {

position: absolute;

background: white;

border-radius: 50%;

pointer-events: none;

}

/* Gezegen dönüşü */

@keyframes planet-rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.rotating-ring {

animation: planet-rotate 20s linear infinite;

transform-origin: center;

}

/* Buton Hover Efekti */

.btn-glow-cyan:hover {

box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);

}

.btn-glow-purple:hover {

box-shadow: 0 0 20px rgba(147, 51, 234, 0.6);

}

</style>

</head>

<defs>

</linearGradient>

</defs>

</svg>

</div>

<i data-feather="key" class="inline mr-2 w-4 h-4 mb-1"></i> GİRİŞ

</button>

<i data-feather="user-plus" class="inline mr-2 w-4 h-4 mb-1"></i> KAYIT

</button>

</div>

<h1 class="text-3xl mb-1 sci-fi-text text-white glow-cyan">ORION PORTALI</h1>

<p class="text-cyan-200/60 text-sm tracking-widest uppercase">Kimlik Doğrulaması Gerekli</p>

</div>

<label for="login-username" class="block text-xs font-bold text-cyan-500 tracking-wider uppercase mb-2">Komutan ID</label>

</div>

</div>

<label for="login-password" class="block text-xs font-bold text-cyan-500 tracking-wider uppercase mb-2">Erişim Kodu</label>

</div>

</div>

<span class="ml-2 text-xs text-gray-400">Sinyali Koru</span>

</label>

<a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-colors">Kod Kaybı?</a>

</div>

BAĞLANTI KUR

</button>

</form>

</div>

<h1 class="text-3xl mb-1 sci-fi-text text-white glow-purple">YENİ MÜRETTEBAT</h1>

<p class="text-purple-200/60 text-sm tracking-widest uppercase">Galaktik Federasyon Kaydı</p>

</div>

<label for="signup-email" class="block text-xs font-bold text-purple-500 tracking-wider uppercase mb-2">İletişim Frekansı</label>

</div>

</div>

<label for="signup-username" class="block text-xs font-bold text-purple-500 tracking-wider uppercase mb-2">Çağrı Adı</label>

</div>

</div>

<label for="signup-password" class="block text-xs font-bold text-purple-500 tracking-wider uppercase mb-2">Güvenlik Anahtarı</label>

</div>

</div>

<span class="ml-2 text-xs text-gray-400"><a href="#" class="text-purple-400 underline">Protokolleri</a> kabul ediyorum</span>

</label>

</div>

MÜRETTEBATA KATIL

</button>

</form>

</div>

<p class="text-cyan-100 text-[10px] uppercase tracking-[0.2em]">Sistem Sürümü v.4.0.2 // Güvenli Bağlantı</p>

</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');

// Tab stilleri için yardımcı fonksiyonlar

function activateLogin() {

loginTab.className = "flex-1 py-4 px-6 text-center sci-fi-text font-bold text-cyan-400 border-b-2 border-cyan-400 bg-gray-800/50 transition-all";

signupTab.className = "flex-1 py-4 px-6 text-center sci-fi-text font-bold text-gray-500 hover:text-purple-400 transition-all hover:bg-gray-800/30";

loginForm.classList.remove('hidden');

signupForm.classList.add('hidden');

}

function activateSignup() {

signupTab.className = "flex-1 py-4 px-6 text-center sci-fi-text font-bold text-purple-400 border-b-2 border-purple-500 bg-gray-800/50 transition-all";

loginTab.className = "flex-1 py-4 px-6 text-center sci-fi-text font-bold text-gray-500 hover:text-cyan-400 transition-all hover:bg-gray-800/30";

signupForm.classList.remove('hidden');

loginForm.classList.add('hidden');

}

loginTab.addEventListener('click', activateLogin);

signupTab.addEventListener('click', activateSignup);

// Uzay Ses Efekti (Basit bir "Bleep" sesi)

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

const playSciFiSound = () => {

// Kısa, fütüristik bir ses efekti

const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-click-900.mp3');

audio.volume = 0.2;

audio.play().catch(e => {}); // Otomatik oynatma hatasını yut

};

inputs.forEach(input => {

input.addEventListener('focus', playSciFiSound);

});

// Yıldız Alanı Oluşturucu (Eski kar efekti yerine)

function initStarField() {

const container = document.getElementById('star-container');

const starCount = 150; // Yıldız sayısı

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

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

star.classList.add('star');

// Rastgele özellikler

const x = Math.random() * 100;

const y = Math.random() * 100;

const size = Math.random() * 2; // 0px - 2px arası

const duration = Math.random() * 3 + 2; // Yanıp sönme hızı

const opacity = Math.random();

star.style.left = `${x}%`;

star.style.top = `${y}%`;

star.style.width = `${size}px`;

star.style.height = `${size}px`;

star.style.opacity = opacity;

// Bazı yıldızlara yanıp sönme efekti ekle

if(Math.random() > 0.5) {

star.style.animation = `twinkle ${duration}s infinite ease-in-out`;

}

container.appendChild(star);

}

// Kayan "uzay tozu" efekti (Derinlik hissi için)

setInterval(() => {

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

dust.classList.add('star');

dust.style.background = 'rgba(255, 255, 255, 0.4)';

dust.style.width = '1px';

dust.style.height = Math.random() * 50 + 10 + 'px'; // Uzun çizgi

dust.style.left = Math.random() * 100 + '%';

dust.style.top = '100%';

dust.style.animation = 'space-drift 4s linear forwards'; // Yukarı doğru kay

container.appendChild(dust);

setTimeout(() => {

dust.remove();

}, 4000);

}, 200);

}

// Sayfa yüklendiğinde yıldızları başlat

window.addEventListener('DOMContentLoaded', initStarField);

</script>

</body>

</html>

CSS

JS

Metehan

Recommended