Code HTML de connexion Google et menu adaptatif

137 badremouatamid

Ouvrir dans l'éditeur Publiez votre code

Code HTML de connexion Google et menu adaptatif

Recommandé

21 September 2024

Saisie du mot de passe Lumière

21 July 2025

Portefeuille de développeurs : Web, applications, conception - Dawid Wróbel

24 May 2025

Un code par néomorphisme

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>

Recommandé

Saisie du mot de passe Lumière

Portefeuille de développeurs : Web, applications, conception - Dawid Wróbel

Un code par néomorphisme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS