Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

Abrir en el editor Video Publica tu código

Recomendado

15 September 2024

Ejemplo de botones de contacto HTML

5 April 2025

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

Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

Recomendado

Vídeo de fondo

Ejemplo de botones de contacto HTML

un sitio web de plataforma

HTML

CSS

JS

Recomendado

Vídeo de fondo

Ejemplo de botones de contacto HTML

un sitio web de plataforma

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS