Webleb - HTML UI Elements - Ein Code von Mete

HTML

<!DOCTYPE html>

<head>

<title>Login & Register Form</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

}

.container {

width: 100%;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(135deg, #E5C9D7 0%, #6BA3BE 100%);

padding: 1rem;

}

.auth-card {

width: 100%;

max-width: 450px;

position: relative;

background-color: #E3B6B1;

border-radius: 0.5rem;

box-shadow: 0 4px 20px rgba(163, 64, 84, 0.15);

overflow: hidden;

}

.overlay {

position: absolute;

inset: 0;

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

backdrop-filter: blur(4px);

}

.content {

position: relative;

padding: 2rem;

}

.header {

text-align: center;

margin-bottom: 2rem;

}

.header h2 {

color: #A34054;

font-size: 1.5rem;

margin-bottom: 1rem;

}

.avatar {

width: 5rem;

height: 5rem;

margin: 0 auto;

border-radius: 50%;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.avatar img {

width: 100%;

height: 100%;

object-fit: cover;

}

.tab-buttons {

display: flex;

margin-bottom: 2rem;

background-color: rgba(163, 64, 84, 0.1);

border-radius: 0.375rem;

padding: 0.25rem;

}

.tab-button {

flex: 1;

padding: 0.5rem 1rem;

background: none;

border: none;

color: #A34054;

font-weight: 500;

cursor: pointer;

border-radius: 0.25rem;

transition: all 0.2s;

}

.tab-button.active {

background-color: #A34054;

color: white;

}

.form-container {

position: relative;

}

.form {

display: none;

}

.form.active {

display: block;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

font-size: 0.875rem;

font-weight: 500;

color: #A34054;

margin-bottom: 0.25rem;

}

.form-group input {

width: 100%;

padding: 0.5rem 1rem;

background-color: #E5C9D7;

border: 1px solid #A34054;

border-radius: 0.375rem;

color: #A34054;

transition: all 0.2s;

}

.form-group input:focus {

outline: none;

border-color: #A34054;

box-shadow: 0 0 0 2px rgba(163, 64, 84, 0.2);

}

.password-container {

position: relative;

}

.toggle-password {

position: absolute;

right: 0.75rem;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

cursor: pointer;

color: #A34054;

padding: 0.25rem;

}

.toggle-password svg {

width: 1.25rem;

height: 1.25rem;

}

.hidden {

display: none;

}

.form-options {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 1.5rem;

}

.remember-me {

display: flex;

align-items: center;

gap: 0.5rem;

color: #A34054;

font-size: 0.875rem;

}

.remember-me input[type="checkbox"] {

width: 1rem;

height: 1rem;

border-color: #A34054;

}

.forgot-password {

color: #A34054;

text-decoration: none;

font-size: 0.875rem;

font-weight: 500;

transition: opacity 0.2s;

}

.forgot-password:hover {

opacity: 0.8;

}

.submit-button {

width: 100%;

padding: 0.75rem 1rem;

background-color: #A34054;

color: white;

border: none;

border-radius: 0.375rem;

font-weight: 500;

cursor: pointer;

transition: opacity 0.2s;

box-shadow: 0 2px 10px rgba(163, 64, 84, 0.2);

margin-bottom: 1.5rem;

}

.submit-button:hover {

opacity: 0.9;

}

.divider {

position: relative;

text-align: center;

margin: 1.5rem 0;

color: #A34054;

font-size: 0.875rem;

}

.divider::before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 0;

height: 1px;

background-color: rgba(163, 64, 84, 0.3);

}

.divider span {

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

padding: 0 1rem;

}

.social-buttons {

display: flex;

gap: 1rem;

margin-bottom: 1rem;

}

.social-button {

flex: 1;

display: flex;

align-items: center;

justify-content: center;

gap: 0.5rem;

padding: 0.75rem;

border: 1px solid rgba(163, 64, 84, 0.3);

border-radius: 0.375rem;

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

color: #A34054;

text-decoration: none;

font-weight: 500;

transition: all 0.2s;

}

.social-button:hover {

background-color: rgba(163, 64, 84, 0.1);

border-color: #A34054;

}

.social-button svg {

width: 1.25rem;

height: 1.25rem;

}

.name-row {

display: flex;

gap: 1rem;

}

.name-row .form-group {

flex: 1;

}

.terms {

font-size: 0.75rem;

color: #A34054;

text-align: center;

margin-bottom: 1rem;

}

.terms a {

color: #A34054;

text-decoration: underline;

}

</style>

</head>

<body>

<h2>Hesabım</h2>

</div>

<button class="tab-button active" data-tab="login">Giriş Yap</button>

<button class="tab-button" data-tab="register">Kayıt Ol</button>

</div>

<label for="loginEmail">E-posta</label>

</div>

<label for="loginPassword">Şifre</label>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2 12s3-9 10-9 10 9 10 9-3 9-10 9-10-9-10-9z" />

</svg>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />

</svg>

</button>

</div>

<span>Beni hatırla</span>

</label>

<a href="#" class="forgot-password">Şifremi unuttum?</a>

</div>

<button type="submit" class="submit-button">Giriş Yap</button>

</form>

</div>

<label for="lastName">Soyad</label>

</div>

<label for="registerEmail">E-posta</label>

</div>

<label for="registerPassword">Şifre</label>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2 12s3-9 10-9 10 9 10 9-3 9-10 9-10-9-10-9z" />

</svg>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />

</svg>

</button>

</div>

<label for="confirmPassword">Şifre Tekrar</label>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2 12s3-9 10-9 10 9 10 9-3 9-10 9-10-9-10-9z" />

</svg>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />

</svg>

</button>

</div>

Kayıt olarak <a href="#">Kullanım Koşulları</a> ve <a href="#">Gizlilik Politikası</a>'nı kabul etmiş olursunuz.

</div>

<button type="submit" class="submit-button">Kayıt Ol</button>

</form>

</div>

</div>

</svg>

Google

</a>

</svg>

Facebook

</a>

</div>

</svg>

Instagram

</a>

</svg>

X (Twitter)

</a>

</div>

document.addEventListener('DOMContentLoaded', function() {

// Tab switching

const tabButtons = document.querySelectorAll('.tab-button');

const forms = document.querySelectorAll('.form');

tabButtons.forEach(button => {

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

const targetTab = this.dataset.tab;

// Update active tab button

tabButtons.forEach(btn => btn.classList.remove('active'));

this.classList.add('active');

// Update active form

forms.forEach(form => form.classList.remove('active'));

document.getElementById(targetTab + 'Form').classList.add('active');

});

// Password visibility toggle

const toggleButtons = document.querySelectorAll('.toggle-password');

toggleButtons.forEach(button => {

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

const targetId = this.dataset.target;

const passwordInput = document.getElementById(targetId);

const eyeIcon = this.querySelector('.eye-icon');

const eyeOffIcon = this.querySelector('.eye-off-icon');

if (passwordInput.type === 'password') {

passwordInput.type = 'text';

eyeIcon.classList.add('hidden');

eyeOffIcon.classList.remove('hidden');

} else {

passwordInput.type = 'password';

eyeIcon.classList.remove('hidden');

eyeOffIcon.classList.add('hidden');

}

});

// Login form handler

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const email = document.getElementById('loginEmail').value;

const password = document.getElementById('loginPassword').value;

const remember = document.getElementById('loginRemember').checked;

console.log('Login:', { email, password, remember });

// Instagram hesabına yönlendir

window.location.href = 'https://www.instagram.com/yidirim_beyazit_01/profilecard/?igsh=MWV5MXUzdXJqejN4YQ==';

});

// Register form handler

document.getElementById('registerForm').addEventListener('submit', function(e) {

e.preventDefault();

const firstName = document.getElementById('firstName').value;

const lastName = document.getElementById('lastName').value;

const email = document.getElementById('registerEmail').value;

const password = document.getElementById('registerPassword').value;

const confirmPassword = document.getElementById('confirmPassword').value;

// Şifre kontrolü

if (password !== confirmPassword) {

alert('Şifreler eşleşmiyor!');

return;

}

console.log('Register:', { firstName, lastName, email, password });

alert('Kayıt başarılı! Giriş yapabilirsiniz.');

// Login tabına geç

document.querySelector('[data-tab="login"]').click();

});

// Social media button handlers

document.getElementById('googleButton').addEventListener('click', function(e) {

e.preventDefault();

console.log('Google ile giriş yapıldı');

alert('Google ile giriş özelliği aktif değil');

});

document.getElementById('facebookButton').addEventListener('click', function(e) {

e.preventDefault();

console.log('Facebook ile giriş yapıldı');

alert('Facebook ile giriş özelliği aktif değil');

});

document.getElementById('twitterButton').addEventListener('click', function(e) {

e.preventDefault();

console.log('Twitter ile giriş yapıldı');

alert('X (Twitter) ile giriş özelliği aktif değil');

});

</script>

</body>

</html>

Ein Code von Mete

Empfohlen

Eine mit Verzeichnissen erstellte Homepage

Animierte Lampe

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Eine mit Verzeichnissen erstellte Homepage

Animierte Lampe

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS