This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Age Group Lookup (2026–27 Season)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background-color: #ffffff; /* White page background */
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
margin: 2rem auto;
max-width: 700px;
padding: 0 1rem;
line-height: 1.6;
color: #000; /* Black text */
}
h1 {
font-size: 1.6rem;
margin-bottom: 0.5rem;
color: #800000; /* Maroon heading */
}
.card {
background-color: #800000; /* Maroon form background */
color: #fff; /* White text inside form */
border: 2px solid #000; /* Black border */
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
label {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
input[type="date"] {
padding: 0.4rem 0.6rem;
font-size: 1rem;
border: 1px solid #000;
border-radius: 4px;
width: 100%;
margin-bottom: 0.5rem;
}
button {
margin-top: 0.75rem;
padding: 0.6rem 1rem;
font-size: 1rem;
cursor: pointer;
background-color: #000; /* Black button */
color: #fff; /* White text */
border: none;
border-radius: 4px;
}
button:hover {
background-color: #333; /* Slight hover effect */
}
.result {
margin-top: 1rem;
font-weight: 900;
font-size: 2rem; /* Large font */
text-transform: uppercase; /* Optional: make it all caps */
}
.invalid {
color: #ffcccc; /* Light red for invalid */
}
.valid {
color: #90ee90; /* Light green for valid */
}
details {
margin-top: 1rem;
color: #fff;
}
pre {
color: #fff;
}
</style>
</head>
<body>
<h1>Age Group Lookup (2026–27 Season)</h1>
<p>Enter a birthdate and click <strong>Check Age Group</strong> to see the result.</p>
<div class="card">
<label for="dob">Birthdate</label>
<input id="dob" type="date" aria-describedby="dob-help" />
<div id="dob-help" style="font-size:0.9rem;">
Valid ranges are Aug 1, 2007 through Jul 31, 2020 (inclusive).
</div>
<button id="checkBtn">Check Age Group</button>
<div id="result" class="result" aria-live="polite"></div>
<details>
<summary>View the 2026–27 lookup table</summary>
<pre>
U19: Aug 1, 2007 – Jul 31, 2009
U17: Aug 1, 2009 – Jul 31, 2010
U16: Aug 1, 2010 – Jul 31, 2011
U15: Aug 1, 2011 – Jul 31, 2012
U14: Aug 1, 2012 – Jul 31, 2013
U13: Aug 1, 2013 – Jul 31, 2014
U12: Aug 1, 2014 – Jul 31, 2015
U11: Aug 1, 2015 – Jul 31, 2016
U10: Aug 1, 2016 – Jul 31, 2017
U9 : Aug 1, 2017 – Jul 31, 2018
U8 : Aug 1, 2018 – Jul 31, 2019
U7 : Aug 1, 2019 – Jul 31, 2020
</pre>
</details>
</div>
<script>
const ranges = [
{ group: "U19", start: "2007-08-01", end: "2009-07-31" },
{ group: "U17", start: "2009-08-01", end: "2010-07-31" },
{ group: "U16", start: "2010-08-01", end: "2011-07-31" },
{ group: "U15", start: "2011-08-01", end: "2012-07-31" },
{ group: "U14", start: "2012-08-01", end: "2013-07-31" },
{ group: "U13", start: "2013-08-01", end: "2014-07-31" },
{ group: "U12", start: "2014-08-01", end: "2015-07-31" },
{ group: "U11", start: "2015-08-01", end: "2016-07-31" },
{ group: "U10", start: "2016-08-01", end: "2017-07-31" },
{ group: "U9", start: "2017-08-01", end: "2018-07-31" },
{ group: "U8", start: "2018-08-01", end: "2019-07-31" },
{ group: "U7", start: "2019-08-01", end: "2020-07-31" },
];
function parseISODate(isoStr) {
const d = new Date(isoStr + "T00:00:00");
d.setHours(0, 0, 0, 0);
return d;
}
function inRange(date, startISO, endISO) {
const start = parseISODate(startISO);
const end = parseISODate(endISO);
return date >= start && date <= end;
}
function getAgeGroup(dobStr) {
if (!dobStr) return null;
const dob = parseISODate(dobStr);
if (isNaN(dob.getTime())) return null;
for (const r of ranges) {
if (inRange(dob, r.start, r.end)) return r.group;
}
return null;
}
function showResult(text, isValid) {
const el = document.getElementById("result");
el.textContent = text;
el.className = "result " + (isValid ? "valid" : "invalid");
}
document.getElementById("checkBtn").addEventListener("click", () => {
const dobStr = document.getElementById("dob").value;
const group = getAgeGroup(dobStr);
if (group) {
showResult(`Age Group: ${group}`, true);
} else {
showResult("Invalid birthdate for the 2026–27 season.", false);
}
});
</script>
</body>
</html>