Portal Escolar: Verificação de Resultados e Pagamento de Mensalidades

Abrir no Editor Publique Seu Código

Recomendado

15 October 2024

Página de destino do desenvolvedor HTML CSS

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: Verificação de Resultados e Pagamento de Mensalidades

Recomendado

Barra de navegação azul

Mãe

Página de destino do desenvolvedor HTML CSS

HTML

CSS

JS

Recomendado

Barra de navegação azul

Mãe

Página de destino do desenvolvedor HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS