Webleb - Snippet di Codice

HTML

<!DOCTYPE html>

<head>

<title>Windows 11 Stil Kayıt</title>

<style>

/* Windows 11 Font Ailesi */

@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;600;700&display=swap');

:root {

--win-blue: #0067C0;

--win-blue-hover: #005aab;

--glass-bg: rgba(255, 255, 255, 0.65);

--glass-border: rgba(255, 255, 255, 0.5);

--text-primary: #1a1a1a;

--text-secondary: #444444;

--surface: #ffffff;

--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);

--shadow-lg: 0 24px 48px rgba(0,0,0,0.2);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;

-webkit-font-smoothing: antialiased;

}

body {

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

/* Windows 11 Tarzı Arka Plan Fotoğrafı */

background-image: url('https://images.unsplash.com/photo-1634507307799-ace9b49840b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');

background-size: cover;

background-position: center;

background-attachment: fixed;

background-repeat: no-repeat;

overflow: hidden;

position: relative;

}

/* Fotoğraf çok parlaksa formun okunabilirliğini artırmak için hafif bir koyulaştırma katmanı */

body::before {

content: '';

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0, 0, 0, 0.1);

z-index: 0;

}

/* Ana Pencere (Mica Effect / Acrylic) */

.window-container {

width: 440px;

background: var(--glass-bg);

/* Gerçekçi buzlu cam efekti */

backdrop-filter: blur(30px) saturate(200%);

-webkit-backdrop-filter: blur(30px) saturate(200%);

border-radius: 12px;

border: 1px solid var(--glass-border);

border-top: 1px solid rgba(255, 255, 255, 0.8);

border-left: 1px solid rgba(255, 255, 255, 0.8);

box-shadow: var(--shadow-lg);

overflow: hidden;

display: flex;

flex-direction: column;

position: relative;

z-index: 1;

animation: popup 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes popup {

0% { opacity: 0; transform: scale(0.95) translateY(20px); }

100% { opacity: 1; transform: scale(1) translateY(0); }

}

/* Pencere Başlığı (Window Chrome) */

.window-header {

height: 40px;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 16px;

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

border-bottom: 1px solid rgba(0,0,0,0.05);

user-select: none;

}

.window-title {

font-size: 12px;

font-weight: 600;

color: var(--text-secondary);

}

.window-controls {

display: flex;

gap: 8px;

}

.control-dot {

width: 12px;

height: 12px;

border-radius: 50%;

transition: 0.2s;

cursor: pointer;

}

.control-dot:nth-child(1) { background: #ffbd2e; border: 1px solid #e1a629;} /* Min */

.control-dot:nth-child(2) { background: #28c93f; border: 1px solid #24b238;} /* Max */

.control-dot:nth-child(3) { background: #ff5f56; border: 1px solid #e0443e;} /* Close */

.control-dot:hover {

filter: brightness(1.1);

}

/* İçerik Alanı */

.content-area {

padding: 32px;

}

/* Adım Göstergesi (Progress) */

.step-indicator {

display: flex;

justify-content: center;

gap: 8px;

margin-bottom: 32px;

}

.step-dot {

width: 80px;

height: 4px;

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

border-radius: 2px;

position: relative;

overflow: hidden;

}

.step-dot::after {

content: '';

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 0%;

background: var(--win-blue);

transition: width 0.4s ease;

}

.step-dot.active::after { width: 100%; }

.step-dot.completed::after { width: 100%; }

/* Form Başlıkları */

h2 {

font-size: 24px;

font-weight: 600;

color: var(--text-primary);

margin-bottom: 8px;

letter-spacing: -0.5px;

}

p.subtitle {

font-size: 14px;

color: var(--text-secondary);

margin-bottom: 24px;

}

/* Form Adımları */

.form-step {

display: none;

animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.form-step.active {

display: block;

}

@keyframes slideIn {

from { opacity: 0; transform: translateX(10px); }

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

}

/* Input Grubu */

.input-group {

margin-bottom: 16px;

position: relative;

}

.input-group label {

display: block;

font-size: 13px;

font-weight: 600;

color: var(--text-primary);

margin-bottom: 6px;

}

.input-group input {

width: 100%;

padding: 10px 12px;

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

border: 1px solid rgba(0, 0, 0, 0.08);

border-bottom: 2px solid rgba(0, 0, 0, 0.2);

border-radius: 4px;

font-size: 14px;

color: var(--text-primary);

transition: all 0.2s;

backdrop-filter: blur(5px);

}

.input-group input:hover {

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

}

.input-group input:focus {

outline: none;

background: #fff;

border-bottom-color: var(--win-blue);

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}

.input-group input::placeholder {

color: rgba(0,0,0,0.4);

}

/* Buton Grubu */

.btn-group {

display: flex;

justify-content: flex-end;

gap: 12px;

margin-top: 32px;

}

.btn {

padding: 8px 24px;

border-radius: 4px;

font-size: 14px;

font-weight: 600;

cursor: pointer;

transition: all 0.2s;

border: 1px solid transparent;

}

/* Primary Button (Windows Blue) */

.btn-next {

background: var(--win-blue);

color: white;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.btn-next:hover {

background: var(--win-blue-hover);

transform: translateY(-1px);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}

.btn-next:active {

transform: translateY(0);

opacity: 0.9;

}

/* Secondary Button */

.btn-prev {

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

color: var(--text-primary);

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

}

.btn-prev:hover {

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

}

/* Başarı Mesajı */

.success-message {

text-align: center;

display: none;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100%;

padding: 20px 0;

animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.success-icon {

width: 64px;

height: 64px;

background: #dff6dd;

color: #107c10;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 32px;

margin-bottom: 16px;

box-shadow: 0 4px 12px rgba(16, 124, 16, 0.2);

}

</style>

</head>

<body>

<div class="window-title">Hesap Kurulumu</div>

</div>

</div>

<h2>Hoş Geldiniz</h2>

<p class="subtitle">Başlamak için hesap bilgilerinizi girin.</p>

<label>E-posta Adresi</label>

</div>

<label>Parola</label>

</div>

<label>Parola Tekrar</label>

</div>

<button type="button" class="btn btn-next" onclick="nextStep()">İleri</button>

</div>

<h2>Sizi Tanıyalım</h2>

<p class="subtitle">Profiliniz için kişisel detaylar.</p>

</div>

<label>Soyad</label>

</div>

<label>Telefon Numarası</label>

</div>

<button type="button" class="btn btn-next" onclick="nextStep()">İleri</button>

</div>

<h2>Bağlantılar</h2>

<p class="subtitle">Sosyal medya hesaplarınızı ekleyin (İsteğe bağlı).</p>

<label>Instagram</label>

</div>

<label>LinkedIn</label>

</div>

<label>Twitter / X</label>

</div>

<button type="submit" class="btn btn-next">Kaydı Tamamla</button>

</div>

</form>

<h2>Her şey hazır!</h2>

<p class="subtitle">Kaydınız başarıyla oluşturuldu.</p>

<button type="button" class="btn btn-next" onclick="location.reload()" style="margin-top: 16px;">Kapat</button>

</div>

let currentStep = 0;

const formSteps = document.querySelectorAll('.form-step');

const stepDots = document.querySelectorAll('.step-dot');

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

const successScreen = document.getElementById('successScreen');

function updateUI() {

// Form adımlarını yönet

formSteps.forEach((step, index) => {

if (index === currentStep) {

step.classList.add('active');

} else {

step.classList.remove('active');

}

});

// İlerleme çubuklarını yönet

stepDots.forEach((dot, index) => {

if (index <= currentStep) {

dot.classList.add('active');

} else {

dot.classList.remove('active');

}

});

}

function nextStep() {

// Basit doğrulama (Sadece demo amaçlı boş kontrolü)

const currentInputs = formSteps[currentStep].querySelectorAll('input[required]');

let isValid = true;

currentInputs.forEach(input => {

if (!input.value) {

isValid = false;

input.style.borderColor = '#ff5f56'; // Hata rengi

// Inputa odaklandığında rengi düzelt

input.addEventListener('input', function() {

this.style.borderColor = 'rgba(0,0,0,0.2)';

}, {once: true});

}

});

if (isValid && currentStep < formSteps.length - 1) {

currentStep++;

updateUI();

}

function prevStep() {

if (currentStep > 0) {

currentStep--;

updateUI();

}

// Form Gönderimi

form.addEventListener('submit', (e) => {

e.preventDefault();

// Formu gizle

form.style.display = 'none';

document.querySelector('.step-indicator').style.display = 'none';

// Başarı ekranını göster

successScreen.style.display = 'flex';

});

// Enter tuşu desteği

document.addEventListener('keypress', function(e) {

if(e.key === 'Enter') {

e.preventDefault(); // Formun otomatik submit olmasını engelle

if(currentStep < formSteps.length - 1) {

nextStep();

} else {

// Son adımda ise submit tetikle

form.dispatchEvent(new Event('submit'));

}

});

</script>

</body>

</html>

Metehan

Un codice di Metehan

HTML

CSS

JS

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS