Un código de daniel_pindou_7

653 daniel_pindou_7

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Carrusel de portafolios con controles deslizantes sincronizados

26 October 2024

Plantilla de sitio web de cartera de desarrolladores HTML CSS

30 May 2025

Formulario de registro/inicio de sesión

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>

Recomendado

Carrusel de portafolios con controles deslizantes sincronizados

Plantilla de sitio web de cartera de desarrolladores HTML CSS

Formulario de registro/inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS