एक वैकल्पिक होम पेज निर्देशिका

1093 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 June 2024

एकाधिक सोशल मीडिया बटन

17 April 2025

मेटेहन द्वारा एक कोड

25 August 2024

GSAP होवर प्रभाव

HTML

<!DOCTYPE html>

<head>

<title>Giriş Portalı</title>

</head>

<body>

<h2>Giriş Yap</h2>

<label>E-posta</label>

</div>

<label>Şifre</label>

</div>

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

</form>

<a href="#">Şifremi Unuttum?</a>

</div>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

overflow: hidden; /* Scroll bar'ı gizle */

}

.background {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url('https://images.pexels.com/photos/1545743/pexels-photo-1545743.jpeg') no-repeat center center fixed;

background-size: cover; /* Resmi tam kapla */

}

.container {

position: relative;

z-index: 2; /* İçeriklerin ön planda olmasını sağla */

width: 400px;

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

padding: 40px;

border-radius: 20px;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);

text-align: center;

}

h2 {

margin-bottom: 30px;

color: #00FF00; /* Yeşil renk */

}

.input-group {

position: relative;

margin-bottom: 20px;

}

.input-group input {

width: 100%;

padding: 15px;

border: 2px solid #ddd;

border-radius: 5px;

font-size: 16px;

transition: border-color 0.3s;

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

color: #00FF00; /* Yeşil renk */

}

.input-group input:focus {

border-color: #00FF00;

outline: none;

}

.input-group label {

position: absolute;

top: 15px;

left: 15px;

color: #aaa;

transition: 0.3s;

}

.input-group input:focus + label,

.input-group input:not(:placeholder-shown) + label {

top: -10px;

left: 10px;

font-size: 12px;

color: #00FF00;

}

.btn {

width: 100%;

padding: 15px;

background-color: #00FF00;

border: none;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: background-color 0.3s;

}

.btn:hover {

background-color: #00CC00; /* Daha koyu yeşil */

}

#message {

margin-top: 20px;

padding: 10px;

border-radius: 5px;

display: none; /* Başlangıçta gizli */

color: #00FF00;

}

.forgot {

margin-top: 15px;

}

.forgot a {

color: #00FF00;

text-decoration: none;

}

.forgot a:hover {

text-decoration: underline;

}

JS

document.addEventListener('DOMContentLoaded', () => {

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

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

// Giriş formu gönderildiğinde

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

e.preventDefault();

const email = document.querySelector('input[type="email"]').value.trim();

const password = document.querySelector('input[type="password"]').value.trim();

// E-posta ve şifre doğrulama

if (!validateEmail(email)) {

showMessage("Geçersiz e-posta adresi!", "#FF4444");

return;

}

if (password.length < 6) {

showMessage("Şifre en az 6 karakter olmalıdır!", "#FF4444");

return;

}

// Örnek kullanıcı kontrolü

if (email === "admin@example.com" && password === "12345") {

showMessage("Giriş başarılı! Yönlendiriliyorsunuz...", "#4CAF50");

setTimeout(() => {

message.textContent = "Hoş geldiniz!";

}, 2000);

} else {

showMessage("E-posta veya şifre hatalı!", "#FF4444");

}

});

// E-posta doğrulama fonksiyonu

function validateEmail(email) {

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return regex.test(email);

}

// Mesaj gösterme fonksiyonu

function showMessage(text, color) {

message.style.color = color;

message.style.background = `${color}20`; // Hafif arka plan rengi

message.textContent = text;

message.style.display = 'block'; // Mesajı göster

// Hata animasyonu için konteyneri sars

const container = document.querySelector('.container');

container.style.animation = 'none';

container.offsetHeight; // Reflow tetikleme

container.style.animation = 'shake 0.5s ease';

}

// Şifremi unuttum bağlantısı

document.querySelector('.forgot a').addEventListener('click', function(e) {

e.preventDefault();

showMessage("Şifre sıfırlama bağlantısı e-posta adresinize gönderildi.", "#FFA500");

});

अनुशंसित

एकाधिक सोशल मीडिया बटन

मेटेहन द्वारा एक कोड

GSAP होवर प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS