Code HTML de connexion Google et menu adaptatif

1,344 badremouatamid

Ouvrir dans l'éditeur Publiez votre code

Code HTML de connexion Google et menu adaptatif

Recommandé

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

31 January 2026

Jeu Kindergarten 2 HTML5 Unity Loader

21 July 2025

Exemple HTML CSS de carte UNO

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