S'inscrire et se connecter

608 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 February 2025

Un code par securearray494

14 June 2025

Un code de Metehan

27 December 2025

Enveloppe de lettre d'amour animée HTML avec GSAP

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignUp & Login - Modern Tasarım</title>

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding:20px;
}

.container{
  position:relative;
  width:1000px;
  max-width:100%;
  min-height:600px;
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}

.form-container{
  position:absolute;
  top:0;
  height:100%;
  width:50%;
  transition:all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sign-in-container{
  left:0;
  z-index:2;
}

.container.active .sign-in-container{
  transform:translateX(100%);
}

.sign-up-container{
  left:0;
  opacity:0;
  z-index:1;
}

.container.active .sign-up-container{
  transform:translateX(100%);
  opacity:1;
  z-index:5;
  animation:show 0.6s;
}

@keyframes show{
  0%,49.99%{opacity:0; z-index:1;}
  50%,100%{opacity:1; z-index:5;}
}

form{
  background: #fff;
  display:flex;
  flex-direction:column;
  padding:0 50px;
  height:100%;
  justify-content:center;
  align-items:center;
  text-align:center;
}

h1{
  margin-bottom:20px;
  color:#333;
  font-size:32px;
  font-weight:600;
}

.social-container{
  margin:15px 0;
  display:flex;
  gap:10px;
}

.social{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  text-decoration:none;
  transition:all 0.3s ease;
  border:1px solid #e0e0e0;
}

.social:hover{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(102, 126, 234, 0.4);
}

span{
  color:#666;
  font-size:14px;
  margin:10px 0;
}

input{
  background:#f5f5f5;
  border:none;
  padding:15px 20px;
  margin:8px 0;
  width:100%;
  border-radius:50px;
  color:#333;
  font-size:14px;
  transition:all 0.3s ease;
  border:1px solid transparent;
}

input:focus{
  outline:none;
  background:#fff;
  border-color:#667eea;
  box-shadow:0 0 0 3px rgba(102, 126, 234, 0.1);
}

input::placeholder{
  color:#999;
}

.forgot-password{
  color:#667eea;
  text-decoration:none;
  font-size:14px;
  margin:15px 0 10px;
  transition:0.3s;
}

.forgot-password:hover{
  color:#764ba2;
  text-decoration:underline;
}

button{
  border:none;
  padding:14px 55px;
  border-radius:50px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  margin-top:15px;
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:0 4px 15px rgba(102, 126, 234, 0.4);
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(102, 126, 234, 0.5);
}

button:active{
  transform:translateY(0);
}

.overlay-container{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  overflow:hidden;
  transition:transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index:100;
}

.container.active .overlay-container{
  transform:translateX(-100%);
}

.overlay{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  position:relative;
  left:-100%;
  height:100%;
  width:200%;
  transform:translateX(0);
  transition:transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.container.active .overlay{
  transform:translateX(50%);
}

.overlay-panel{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 50px;
  height:100%;
  width:50%;
}

.overlay-left{
  transform:translateX(-20%);
}

.container.active .overlay-left{
  transform:translateX(0);
}

.overlay-right{
  right:0;
  transform:translateX(0);
}

.container.active .overlay-right{
  transform:translateX(20%);
}

.overlay-panel h1{
  color:#fff;
  font-size:36px;
  margin-bottom:15px;
}

.overlay-panel p{
  font-size:16px;
  line-height:1.6;
  margin-bottom:30px;
  opacity:0.9;
}

.overlay-panel button{
  background:transparent;
  border:2px solid #fff;
  box-shadow:none;
  padding:12px 45px;
}

.overlay-panel button:hover{
  background:#fff;
  color:#667eea;
  transform:translateY(-2px);
}

/* Responsive Tasarım */
@media (max-width: 768px) {
  .container{
    min-height:800px;
  }
  
  .form-container{
    width:100%;
    height:50%;
  }
  
  .sign-in-container{
    top:0;
  }
  
  .sign-up-container{
    top:50%;
    left:0;
  }
  
  .container.active .sign-in-container{
    transform:translateY(-100%);
  }
  
  .container.active .sign-up-container{
    transform:translateY(-100%);
  }
  
  .overlay-container{
    left:0;
    top:50%;
    width:100%;
    height:50%;
  }
  
  .container.active .overlay-container{
    transform:translateY(-100%);
  }
  
  .overlay{
    left:0;
    top:-100%;
    width:100%;
    height:200%;
  }
  
  .container.active .overlay{
    transform:translateY(50%);
  }
  
  .overlay-panel{
    width:100%;
    height:50%;
    padding:30px;
  }
  
  .overlay-left{
    top:0;
    left:0;
    transform:translateY(-20%);
  }
  
  .container.active .overlay-left{
    transform:translateY(0);
  }
  
  .overlay-right{
    bottom:0;
    right:0;
    transform:translateY(0);
  }
  
  .container.active .overlay-right{
    transform:translateY(20%);
  }
}

/* Loading Spinner */
.spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

button.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Error Message */
.error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: none;
  text-align: left;
  width: 100%;
}

input.error {
  border: 1px solid #e74c3c;
  background: #fff8f8;
}

/* Success Message */
.success-message {
  color: #2ecc71;
  font-size: 14px;
  margin-top: 10px;
  display: none;
  text-align: center;
  width: 100%;
}
</style>
</head>
<body>

<div class="form-container sign-up-container">
    <form id="signupForm">
      <h1>Hesap Oluştur</h1>
      
      <div class="social-container">
        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social"><i class="fab fa-google"></i></a>
        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social"><i class="fab fa-github"></i></a>
      </div>
      
      <span>veya email ile kayıt ol</span>
      
      <input type="text" id="signupName" placeholder="Ad Soyad" required>
      <div class="error-message" id="nameError"></div>
      
      <input type="email" id="signupEmail" placeholder="Email" required>
      <div class="error-message" id="emailError"></div>
      
      <input type="password" id="signupPassword" placeholder="Şifre" required>
      <div class="error-message" id="passwordError"></div>
      
      <input type="password" id="signupConfirmPassword" placeholder="Şifre Tekrar" required>
      <div class="error-message" id="confirmPasswordError"></div>
      
      <button type="submit" id="signupBtn">
        Kayıt Ol
        <span class="spinner"></span>
      </button>
      
      <div class="success-message" id="signupSuccess"></div>
    </form>
  </div>

<div class="form-container sign-in-container">
    <form id="signinForm">
      <h1>Giriş Yap</h1>
      
      <div class="social-container">
        <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social"><i class="fab fa-google"></i></a>
        <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
      </div>
      
      <span>veya hesabınla giriş yap</span>
      
      <input type="email" id="signinEmail" placeholder="Email" required>
      <div class="error-message" id="signinEmailError"></div>
      
      <input type="password" id="signinPassword" placeholder="Şifre" required>
      <div class="error-message" id="signinPasswordError"></div>
      
      <a href="#" class="forgot-password">Şifremi Unuttum?</a>
      
      <button type="submit" id="signinBtn">
        Giriş Yap
        <span class="spinner"></span>
      </button>
      
      <div class="success-message" id="signinSuccess"></div>
    </form>
  </div>

<div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>Tekrar Hoşgeldiniz!</h1>
        <p>Hesabınıza giriş yaparak devam edin</p>
        <button id="signIn">Giriş Yap</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>Merhaba!</h1>
        <p>Hemen hesap oluşturun ve ayrıcalıklardan yararlanmaya başlayın</p>
        <button id="signUp">Kayıt Ol</button>
      </div>
    </div>
  </div>

</div>

// Form elements
const signupForm = document.getElementById('signupForm');
const signinForm = document.getElementById('signinForm');
const signupBtn = document.getElementById('signupBtn');
const signinBtn = document.getElementById('signinBtn');

// Toggle between sign in and sign up
signUpButton.addEventListener('click', () => {
  container.classList.add("active");
});

signInButton.addEventListener('click', () => {
  container.classList.remove("active");
});

// Validation functions
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

function validatePassword(password) {
  return password.length >= 6;
}

// Show error
function showError(elementId, message) {
  const errorElement = document.getElementById(elementId);
  errorElement.textContent = message;
  errorElement.style.display = 'block';
  
  // Find the input before this error
  const input = errorElement.previousElementSibling;
  if (input && input.tagName === 'INPUT') {
    input.classList.add('error');
  }
}

// Clear errors
function clearErrors(formId) {
  const errors = document.querySelectorAll(`#${formId} .error-message`);
  errors.forEach(error => {
    error.style.display = 'none';
    error.textContent = '';
  });
  
  const inputs = document.querySelectorAll(`#${formId} input`);
  inputs.forEach(input => {
    input.classList.remove('error');
  });
}

// Show success message
function showSuccess(elementId, message) {
  const successElement = document.getElementById(elementId);
  successElement.textContent = message;
  successElement.style.display = 'block';
  
  setTimeout(() => {
    successElement.style.display = 'none';
  }, 3000);
}

// Set loading state
function setLoading(button, isLoading) {
  if (isLoading) {
    button.classList.add('loading');
    button.querySelector('.spinner').style.display = 'inline-block';
    button.disabled = true;
  } else {
    button.classList.remove('loading');
    button.querySelector('.spinner').style.display = 'none';
    button.disabled = false;
  }
}

// Sign Up Form Submit
signupForm.addEventListener('submit', (e) => {
  e.preventDefault();
  clearErrors('signupForm');
  
  const name = document.getElementById('signupName').value.trim();
  const email = document.getElementById('signupEmail').value.trim();
  const password = document.getElementById('signupPassword').value;
  const confirmPassword = document.getElementById('signupConfirmPassword').value;
  
  let isValid = true;
  
  // Validate name
  if (name.length < 2) {
    showError('nameError', 'İsim en az 2 karakter olmalıdır');
    isValid = false;
  }
  
  // Validate email
  if (!validateEmail(email)) {
    showError('emailError', 'Geçerli bir email adresi giriniz');
    isValid = false;
  }
  
  // Validate password
  if (!validatePassword(password)) {
    showError('passwordError', 'Şifre en az 6 karakter olmalıdır');
    isValid = false;
  }
  
  // Validate confirm password
  if (password !== confirmPassword) {
    showError('confirmPasswordError', 'Şifreler eşleşmiyor');
    isValid = false;
  }
  
  if (isValid) {
    setLoading(signupBtn, true);
    
    // Simulate API call
    setTimeout(() => {
      setLoading(signupBtn, false);
      
      // Save user to localStorage (for demo)
      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const existingUser = users.find(u => u.email === email);
      
      if (existingUser) {
        showError('emailError', 'Bu email zaten kayıtlı');
      } else {
        users.push({ name, email, password });
        localStorage.setItem('users', JSON.stringify(users));
        
        showSuccess('signupSuccess', 'Kayıt başarılı! Şimdi giriş yapabilirsiniz');
        signupForm.reset();
        
        // Switch to sign in after 2 seconds
        setTimeout(() => {
          container.classList.remove("active");
        }, 2000);
      }
    }, 1500);
  }
});

// Sign In Form Submit
signinForm.addEventListener('submit', (e) => {
  e.preventDefault();
  clearErrors('signinForm');
  
  const email = document.getElementById('signinEmail').value.trim();
  const password = document.getElementById('signinPassword').value;
  
  let isValid = true;
  
  // Validate email
  if (!validateEmail(email)) {
    showError('signinEmailError', 'Geçerli bir email adresi giriniz');
    isValid = false;
  }
  
  // Validate password
  if (password.length === 0) {
    showError('signinPasswordError', 'Şifre boş olamaz');
    isValid = false;
  }
  
  if (isValid) {
    setLoading(signinBtn, true);
    
    // Simulate API call
    setTimeout(() => {
      setLoading(signinBtn, false);
      
      // Check user from localStorage
      const users = JSON.parse(localStorage.getItem('users') || '[]');
      const user = users.find(u => u.email === email && u.password === password);
      
      if (user) {
        showSuccess('signinSuccess', `Hoşgeldiniz, ${user.name}!`);
        localStorage.setItem('currentUser', JSON.stringify(user));
        signinForm.reset();
        
        // Redirect to dashboard after 1.5 seconds
        setTimeout(() => {
          alert('Giriş başarılı! Ana sayfaya yönlendiriliyorsunuz...');
          // window.location.href = 'dashboard.html';
        }, 1500);
      } else {
        showError('signinEmailError', 'Email veya şifre hatalı');
      }
    }, 1500);
  }
});

// Forgot password
document.querySelector('.forgot-password').addEventListener('click', (e) => {
  e.preventDefault();
  alert('Şifre sıfırlama bağlantısı email adresinize gönderilecektir.');
});

// Auto fill demo user (for testing)
window.addEventListener('load', () => {
  // Add demo user if not exists
  const users = JSON.parse(localStorage.getItem('users') || '[]');
  if (users.length === 0) {
    users.push({
      name: 'Demo User',
      email: 'demo@example.com',
      password: '123456'
    });
    localStorage.setItem('users', JSON.stringify(users));
  }
});

// Real-time validation
document.getElementById('signupEmail').addEventListener('input', function() {
  if (this.value.length > 0) {
    document.getElementById('emailError').style.display = 'none';
    this.classList.remove('error');
  }
});

document.getElementById('signupPassword').addEventListener('input', function() {
  if (this.value.length >= 6) {
    document.getElementById('passwordError').style.display = 'none';
    this.classList.remove('error');
  }
});
</script>

</body>
</html>

CSS