Code HTML de connexion Google et menu adaptatif

540 badremouatamid

Ouvrir dans l'éditeur Video Publiez votre code

Code HTML de connexion Google et menu adaptatif

Recommandé

18 December 2025

Code HTML du jeu Aquapark IO débloqué

3 January 2026

Un code par staticdata256

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>

Code HTML de connexion Google et menu adaptatif

Recommandé

Code HTML du jeu Aquapark IO débloqué

Metehan

Un code par staticdata256

HTML

CSS

JS

Recommandé

Code HTML du jeu Aquapark IO débloqué

Metehan

Un code par staticdata256

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS