Portal Escolar: Consulta de Resultados y Pago de Matrícula

1038 securearray494

Abrir en el editor Publica tu código

Portal Escolar: Consulta de Resultados y Pago de Matrícula

Recomendado

19 December 2025

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

11 March 2025

Un código de stevenolaeem

30 November 2024

Sitio web de viajes con radio de borde invertido

HTML

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

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

Portal Escolar: Consulta de Resultados y Pago de Matrícula

Recomendado

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

Un código de stevenolaeem

Sitio web de viajes con radio de borde invertido

HTML

CSS

JS

Recomendado

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

Un código de stevenolaeem

Sitio web de viajes con radio de borde invertido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS