You want a fake login page inside your Hugo site (Papermod theme) so that you can teach QA automation with Java + Selenium using selectors like ID, name, CSS, XPath, etc.

The login page should work like this:

  • Page name: test.md

  • Contains a form: username, password, Login button

  • Valid credentials:

    • username: fewsteps
    • password: password

  • If correct → redirect to login-success page

  • If wrong → show an error message on the same page

  • Pure frontend (HTML + JavaScript) so students can automate easily.

Below is the complete solution. It works inside Hugo without any backend.

✅ Step 1 — Create /content/login-qa.html

✅ Step 2 — Create the Page Layout: /layouts/login.html

Add:

{{ define "main" }}
<div class="content">
    {{ .Content }}
</div>
{{ end }}

✅ Step 3 — Create the Success Page content/login-success.md

---
title: "Login Success"
---

<h2>Login Successful!</h2>
<p>Welcome! This page is only visible after correct login.</p>

Here’s the full working login-qa.html:

---
title: "QA Automation Login Page"
layout: "login"
url: "/login-qa/"
---

<div id="qa-login-page">
    <div class="login-card">
        <h2>QA Automation Login Page</h2>

        <form id="loginForm">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" placeholder="Enter username">

            <label for="password">Password:</label>
            <input type="password" id="password" name="password" placeholder="Enter password">

            <button type="submit" id="loginBtn">Login</button>

            <p id="errorMessage" style="display:none;"></p>
        </form>
    </div>
</div>

<style>
/* Force page background */
body {
    background-color: #e6f0fa !important; /* very light blue */
}

/* Page wrapper */
#qa-login-page {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Card styling */
#qa-login-page .login-card {
    background-color: #f0f8ff !important; /* very light blue card */
    padding: 30px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    max-width: 380px !important;
    width: 100% !important;
    text-align: center !important;
    color: #000000 !important; /* all text black */
}

/* Heading */
#qa-login-page h2 {
    margin-bottom: 25px !important;
    font-family: "Arial", sans-serif !important;
    color: #000000 !important;
}

/* Labels */
#qa-login-page label {
    font-weight: bold !important;
    display: block !important;
    margin-top: 15px !important;
    text-align: left !important;
    color: #000000 !important; /* black labels */
}

/* Inputs */
#qa-login-page input {
    width: 100% !important;
    padding: 10px !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    outline: none !important;
    color: #000000 !important; /* input text black */
    background-color: #ffffff !important; /* white input background */
    transition: border 0.2s, background 0.2s, color 0.2s !important;
}

#qa-login-page input:focus {
    border-color: #1a73e8 !important;
}

/* Placeholder color */
#qa-login-page input::placeholder {
    color: #555555 !important;
}

/* Button */
#qa-login-page button {
    width: 100% !important;
    padding: 12px !important;
    background-color: #1a73e8 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}

#qa-login-page button:hover {
    background-color: #155bb5 !important;
}

/* Error message */
#qa-login-page #errorMessage {
    color: red !important;
    font-weight: bold !important;
    margin-top: 10px !important;
}
</style>

<script>
const page = document.getElementById("qa-login-page");
if (page) {
    const form = page.querySelector("#loginForm");
    form.addEventListener("submit", function(e) {
        e.preventDefault();

        const user = page.querySelector("#username").value.trim();
        const pass = page.querySelector("#password").value.trim();
        const error = page.querySelector("#errorMessage");

        if (user === "fewsteps" && pass === "password") {
            window.location.href = "/login-success/";
        } else {
            error.style.display = "block";
            error.innerText = "Invalid username or password!";
        }
    });
}
</script>

✅ What we did (so you can summarize next time):

Short summary: “Make QA login page fully independent: very light blue background, all text black, inputs white, fully scoped with #qa-login-page and !important overrides, so dark/light PaperMod theme won’t affect it.”

Key points:

  1. Force body background to light blue.
  2. Force card background to very light blue.
  3. Force all text (headings, labels, inputs, placeholders) to black.
  4. Force inputs white with black text.
  5. Use !important on everything to override PaperMod theme.
  6. Scope everything to #qa-login-page so other pages aren’t affected.