Webleb - fragmentos de código - Portal Escolar: Consulta de Resultados y Pago de Matrícula

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portail Scolaire - Vérification & Paiement</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; }
        .container { max-width: 850px; margin: 30px auto; background: #ffffff; padding: 35px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #0056b3; margin-bottom: 10px; font-size: 2.2em; }
        h2 { color: #007bff; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; margin-top: 30px; margin-bottom: 25px; font-size: 1.6em; }
        p.subtitle { text-align: center; color: #666; margin-top: -5px; margin-bottom: 30px; font-size: 1.1em; }
        nav ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-bottom: 40px; background-color: #e9ecef; border-radius: 8px; padding: 10px 0; }
        nav ul li { margin: 0 20px; }
        nav ul li a { text-decoration: none; color: #007bff; font-weight: bold; padding: 10px 20px; border-radius: 6px; transition: background-color 0.3s ease, color 0.3s ease; display: block; }
        nav ul li a:hover, nav ul li a.active { background-color: #007bff; color: white; }
        section { margin-bottom: 40px; padding: 25px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fdfdfd; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
        label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; }
        input[type="text"], input[type="number"], input[type="email"], select {
            width: calc(100% - 24px);
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 1em;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, select:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        button:hover { background-color: #218838; transform: translateY(-1px); }
        .result-display, .payment-confirmation {
            margin-top: 25px;
            padding: 20px;
            border: 1px dashed #007bff;
            background-color: #e7f3ff;
            border-radius: 5px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0056b3;
            font-style: italic;
            text-align: center;
        }
        footer { text-align: center; margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; color: #777; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Portail Scolaire</h1>
            <p class="subtitle">Vérification de Résultats & Paiement de Frais de Scolarité</p>
        </header>

<nav>
            <ul>
                <li><a href="#resultats">Vérifier les Résultats</a></li>
                <li><a href="#paiement">Payer les Frais</a></li>
            </ul>
        </nav>

<main>
            <section id="resultats">
                <h2>Vérification des Résultats Scolaires</h2>
                <form action="#" method="post">
                    <label for="studentIdResult">Numéro d'Identifiant de l'Élève :</label>
                    <input type="text" id="studentIdResult" name="studentIdResult" placeholder="Ex: ANNEE-MATRICULE (ex: 2023-001)" required>

<button type="submit">Vérifier les Résultats</button>
                </form>
                <div class="result-display">
                    Les résultats de l'élève s'afficheront ici après vérification.
                </div>
            </section>

<section id="paiement">
                <h2>Paiement des Frais de Scolarité</h2>
                <form action="#" method="post">
                    <label for="studentIdPayment">Numéro d'Identifiant de l'Élève :</label>
                    <input type="text" id="studentIdPayment" name="studentIdPayment" placeholder="Ex: ANNEE-MATRICULE (ex: 2023-001)" required>

<label for="amount">Montant à Payer (XAF) :</label>
                    <input type="number" id="amount" name="amount" min="1000" step="1" placeholder="Ex: 50000" required>

<label for="paymentMethod">Méthode de Paiement :</label>
                    <select id="paymentMethod" name="paymentMethod" required>
                        <option value="">-- Sélectionnez une méthode --</option>
                        <option value="mobileMoney">Mobile Money (Orange Money, MoMo, etc.)</option>
                        <option value="bankCard">Carte Bancaire (Visa, MasterCard)</option>
                    </select>

<div id="mobileMoneyDetails" style="display: none;">
                        <h3>Détails Mobile Money</h3>
                        <label for="mobileNumber">Numéro de Téléphone Mobile :</label>
                        <input type="text" id="mobileNumber" name="mobileNumber" placeholder="Ex: 6XXXXXXXX" pattern="[0-9]{9,15}">
                    </div>

<div id="bankCardDetails" style="display: none;">
                        <h3>Détails Carte Bancaire</h3>
                        <label for="cardNumber">Numéro de Carte :</label>
                        <input type="text" id="cardNumber" name="cardNumber" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{13,19}">

<label for="expiryDate">Date d'Expiration (MM/AA) :</label>
                        <input type="text" id="expiryDate" name="expiryDate" placeholder="MM/AA" pattern="(0[1-9]|1[0-2])\/[0-9]{2}">

<button type="submit">Payer Maintenant</button>
                </form>
                <div class="payment-confirmation">
                    Le statut de votre paiement s'affichera ici.
                </div>
            </section>
        </main>

<footer>
            <p>© 2023 Portail Scolaire. Tous droits réservés.</p>
        </footer>
    </div>

// Function to reset input values and required attributes
            function resetPaymentFields() {
                const allPaymentInputs = mobileMoneyDetails.querySelectorAll('input');
                allPaymentInputs.forEach(input => {
                    input.value = '';
                    input.removeAttribute('required');
                });
                const allCardInputs = bankCardDetails.querySelectorAll('input');
                allCardInputs.forEach(input => {
                    input.value = '';
                    input.removeAttribute('required');
                });
            }

paymentMethodSelect.addEventListener('change', function() {
                mobileMoneyDetails.style.display = 'none';
                bankCardDetails.style.display = 'none';
                resetPaymentFields(); // Reset fields when changing method

if (this.value === 'mobileMoney') {
                    mobileMoneyDetails.style.display = 'block';
                    mobileMoneyDetails.querySelector('#mobileNumber').setAttribute('required', 'required');
                } else if (this.value === 'bankCard') {
                    bankCardDetails.style.display = 'block';
                    bankCardDetails.querySelector('#cardNumber').setAttribute('required', 'required');
                    bankCardDetails.querySelector('#expiryDate').setAttribute('required', 'required');
                    bankCardDetails.querySelector('#cvv').setAttribute('required', 'required');
                }
            });

// Optional: Smooth scroll for navigation links
            document.querySelectorAll('nav a').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                    // Add active class to clicked link
                    document.querySelectorAll('nav a').forEach(link => link.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>

Validating your code, please wait...

HTML

CSS

<nav>
            <ul>
                <li><a href="#resultats">Vérifier les Résultats</a></li>
                <li><a href="#paiement">Payer les Frais</a></li>
            </ul>
        </nav>

<label for="amount">Montant à Payer (XAF) :</label>
                    <input type="number" id="amount" name="amount" min="1000" step="1" placeholder="Ex: 50000" required>

<label for="expiryDate">Date d'Expiration (MM/AA) :</label>
                        <input type="text" id="expiryDate" name="expiryDate" placeholder="MM/AA" pattern="(0[1-9]|1[0-2])\/[0-9]{2}">