Código HTML para el inicio de sesión de Google y el menú adaptable

1,037 badremouatamid

Abrir en el editor Publica tu código

Código HTML para el inicio de sesión de Google y el menú adaptable

Recomendado

23 June 2025

Ejemplo de formulario de inicio de sesión HTML

28 May 2025

Formulario de inicio de sesión futurista

18 May 2024

Formulario de inicio de sesión de piratas informáticos

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Google Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }
        #login-status {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            display: none; /* Hide until login attempt */
        }
    </style>
</head>
<body>

<div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="handleCredentialResponse"
         data-auto_prompt="false">
    </div>

<div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
    </div>

// IMPORTANT: In a real application, you send this JWT token 
            // to your backend server for verification and session creation.
            
            statusDiv.innerHTML = `
                <h2>Login Successful!</h2>
                <p>Token received. Check the console for the full credential.</p>
                <p><strong>Note:</strong> Replace 'YOUR_GOOGLE_CLIENT_ID' with your actual key.</p>
            `;

console.log("JWT ID Token:", response.credential);

// Optional: Decode the token (for debugging/display purposes only, 
            // server-side verification is mandatory for security)
            try {
                const payload = JSON.parse(atob(response.credential.split('.')[1]));
                console.log("User Payload:", payload);
                // statusDiv.innerHTML += `<p>Welcome, ${payload.name}!</p>`;
            } catch (e) {
                console.error("Could not decode token:", e);
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Responsive</title>
    <style>
        /* Base Styling */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
        }

/* Navigation Bar */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            color: white;
            padding: 10px 20px;
        }

.brand-title {
            font-size: 1.5rem;
            text-decoration: none;
            color: white;
        }

/* Navigation Links (UL) */
        .nav-links {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

.nav-links li a {
            display: block;
            text-decoration: none;
            color: white;
            padding: 10px 15px;
        }

.nav-links li a:hover {
            background-color: #575757;
        }

/* Hamburger Button (Mobile Toggle) */
        .menu-toggle {
            position: absolute;
            top: 15px;
            right: 20px;
            display: none; /* Hidden by default on desktop */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            cursor: pointer;
        }

.menu-toggle .bar {
            height: 3px;
            width: 100%;
            background-color: white;
            border-radius: 10px;
        }

/* ====================================
           MEDIA QUERY: Mobile Layout (Max 768px)
           ==================================== */
        @media screen and (max-width: 768px) {
            
            .navbar {
                flex-direction: column;
                align-items: flex-start;
            }

.menu-toggle {
                display: flex; /* Show hamburger button */
            }

.nav-links {
                width: 100%;
                display: none; /* Hide links by default */
                flex-direction: column;
                text-align: center;
                padding: 10px 0;
            }
            
            .nav-links li {
                width: 100%;
            }

.nav-links li a {
                padding: 10px;
            }

/* Class added by JavaScript when the menu is open */
            .nav-links.active {
                display: flex;
            }
        }
    </style>
</head>
<body>

<ul class="nav-links" id="nav-links-list">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Produits</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Connexion</a></li>
        </ul>
    </nav>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleButton = document.getElementById('mobile-menu');
            const navLinks = document.getElementById('nav-links-list');

toggleButton.addEventListener('click', (e) => {
                e.preventDefault();
                navLinks.classList.toggle('active');
            });
        });
    </script>

</body>
</html>

CSS