Page de connexion à Voice Lab : formulaire de connexion Google et de courrier électronique

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

26 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voice Lab - Login</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
  <div class="login-container">
    <div class="login-panel">
      <div class="logo-container">
        <h1 class="logo">Voice Lab</h1>
      </div>

<div class="auth-section">
        <h2>Log in to your account</h2>

<a href="#" class="forgot-password">Forgot Password?</a>

<div class="legal-text">
          By signing up, you agree to our 
          <a href="#">Terms and Conditions</a> and 
          <a href="#">Privacy Policy</a>.
        </div>
      </div>
    </div>

CSS

:root {
  --white: #ffffff;
  --pale-blue: #f0f4f8;
  --dark-gray: #1a1a1a;
  --light-gray: #e0e0e0;
  --accent-blue: #4a90e2;
  --text-primary: #333333;
  --text-secondary: #666666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--white) 0%, var(--pale-blue) 100%);
  transition: background 0.3s ease;
}

.login-container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-panel {
  width: 50%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 30px;
}

.auth-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.google-signin-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: var(--text-secondary);
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--light-gray);
}

.divider span {
  padding: 0 10px;
  font-size: 14px;
}

.login-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-size: 14px;
}

.forgot-password {
  display: block;
  text-align: right;
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 12px;
  margin-bottom: 15px;
}

.button-group {
  display: flex;
  gap: 15px;
}

.signin-btn {
  flex: 1;
  padding: 12px;
  background: linear-gradient(to right, var(--dark-gray), black);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.signup-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--light-gray);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.signup-btn:hover {
  background: var(--pale-blue);
  border-color: var(--accent-blue);
}

.legal-text {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.legal-text a {
  color: var(--accent-blue);
  text-decoration: none;
}

.visual-panel {
  width: 50%;
  background: linear-gradient(135deg, var(--white) 0%, var(--pale-blue) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.soundwave-container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soundwave-sphere {
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.soundwave-icon {
  width: 100px;
  height: 150px;
  background: linear-gradient(to bottom, var(--accent-blue), var(--pale-blue));
  clip-path: polygon(50% 0%, 80% 20%, 80% 80%, 50% 100%, 20% 80%, 20% 20%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
    height: auto;
    width: 95%;
  }

.login-panel, .visual-panel {
    width: 100%;
    padding: 30px;
  }

.soundwave-container {
    margin-top: 20px;
  }
}

flex-direction: column;
    height: auto;
    width: 95%;
  }

.auth-panel, .visual-panel {
    width: 100%;
    padding: 30px;
  }

.soundwave-container {
    width: 200px;
    height: 200px;
  }

.soundwave-sphere {
    width: 150px;
    height: 150px;
  }
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const darkModeToggle = document.getElementById('dark-mode-toggle');

darkModeToggle.addEventListener('change', () => {
      document.body.classList.toggle('dark-mode');
      updateTheme();
    });

function updateTheme() {
      const isDarkMode = document.body.classList.contains('dark-mode');

document.documentElement.style.setProperty('--white', isDarkMode ? '#121212' : '#ffffff');
      document.documentElement.style.setProperty('--pale-blue', isDarkMode ? '#1e1e1e' : '#f0f4f8');
      document.documentElement.style.setProperty('--text-primary', isDarkMode ? '#ffffff' : '#333333');
      document.documentElement.style.setProperty('--text-secondary', isDarkMode ? '#b0b0b0' : '#666666');
    }

// Google Sign-In Callback
    window.handleCredentialResponse = (response) => {
      // Verify the token with your backend
      console.log('Credential Response:', response);
      // Implement your authentication logic here
    }
  });
  }
  setInterval(pulsate, 3000);
});

Page de connexion à Voice Lab : formulaire de connexion Google et de courrier électronique

Recommandé

Un code par logicalarray833

Bouton Confetti

Un code de Mete

HTML

CSS

JS

Recommandé

Un code par logicalarray833

Bouton Confetti

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS