Signup and login

724 kevekıbhack

Remix Open In Editor Fullscreen Discuss Publish Your Code

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

Signup and login

Recommended