A Code by daniel_pindou_7

Open In Editor Publish Your Code

<!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>

A Code by daniel_pindou_7

Recommended

CSS Card Glow Effect

Rotating Chrome Logo

Link Text Animation

HTML

CSS

JS

Recommended

CSS Card Glow Effect

Rotating Chrome Logo

Link Text Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS