Webleb - HTML UI Elements - Un codice di Mete

HTML

CSS

<!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"

</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"

</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>

Validating your code, please wait...

HTML

CSS

<!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"

</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"

</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"

</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>