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

257 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

20 October 2023

Astuce de capture de la souris avec JS

10 March 2025

Barre de navigation réactive premium

19 May 2025

animation d'avion

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

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

Recommandé

Astuce de capture de la souris avec JS

Barre de navigation réactive premium

animation d'avion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS