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:

1
2
3
4
5

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

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

1
2
3
4
5
6

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

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