Webleb - fragmentos de código

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>

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS