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

1,119 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

31 January 2025

bouton Iranien

20 September 2025

Animation du spinner de chargement CSS

25 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

HTML

<!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;
  }
}

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);
});