Upstage Solar Pro 4 – Sports
via Upstage · Generated
- AIMAC Debt 10.94
- Cost $0.0022
- Total Violations 3
- HTML Size 59 KB
- Em Dashes 39
Screenshot
View Live Page
Accessibility Issues Found
3 Critical
-
select-name critical 3 instances
Select element must have an accessible name
Example HTML
<select id="qb">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Sports — The Pulse of the Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0b0f1a;
--surface: #131a2b;
--surface-2: #1b243a;
--border: rgba(255,255,255,0.06);
--text: #f4f6fb;
--muted: #94a0b8;
--accent: #6ee7ff;
--accent-2: #fbbf24;
--green: #34d399;
--red: #f87171;
--radius: 14px;
--shadow: 0 8px 30px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
background: rgba(110,231,255,0.12);
color: var(--accent);
border: 1px solid rgba(110,231,255,0.25);
}
:is(h1,h2,h3,h4) { font-family: 'Outfit', sans-serif; line-height: 1.15; letter-spacing: -0.02em; }
/* HEADER */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(11,15,26,0.78);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid var(--border);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
gap: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.03em;
}
.brand .logo {
width: 42px; height: 42px;
border-radius: 10px;
background: linear-gradient(135deg, #6ee7ff, #3b82f6);
display: grid; place-items: center;
color: #0b0f1a;
font-weight: 900;
font-size: 22px;
font-family: 'Outfit', sans-serif;
box-shadow: 0 6px 18px rgba(110,231,255,0.18);
}
.brand .tagline {
font-size: 11px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
padding: 8px 14px;
border-radius: 10px;
color: var(--muted);
transition: all 0.18s ease;
position: relative;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: var(--accent);
border-radius: 4px;
}
.nav-cta {
background: var(--accent) !important;
color: #0b0f1a !important;
font-weight: 700 !important;
padding: 9px 20px !important;
box-shadow: 0 0 0 1px rgba(110,231,255,0.3);
}
.nav-cta:hover { background: #9af2ff !important; color: #0b0f1a !important; }
.mobile-toggle {
display: none;
background: none;
border: none;
color: var(--text);
padding: 8px;
cursor: pointer;
}
/* HERO */
.hero {
padding: 60px 0 50px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(800px 300px at 20% -10%, rgba(110,231,255,0.12), transparent 70%),
radial-gradient(700px 400px at 100% 0%, rgba(251,191,36,0.08), transparent 70%);
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
position: relative;
}
.hero-text h1 {
font-size: clamp(40px, 5.5vw, 68px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.04;
}
.hero-text h1 span {
background: linear-gradient(120deg, #6ee7ff, #3b82f6 60%, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text p.lead {
font-size: 17px;
color: var(--muted);
margin: 22px 0 32px;
max-width: 520px;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.btn-primary {
background: var(--accent);
color: #0b0f1a;
box-shadow: 0 6px 20px rgba(110,231,255,0.25);
}
.btn-primary:hover { background: #9af2ff; transform: translateY(-1px); }
.btn-ghost {
background: rgba(255,255,255,0.06);
color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-arrow { transition: transform 0.2s; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.hero-media {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.hero-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero-media .float-card {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
background: rgba(11,15,26,0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
font-size: 13px;
font-weight: 500;
}
.hero-media .float-card .num { font-weight: 800; font-size: 22px; color: var(--accent); font-family: 'Outfit', sans-serif; }
/* BREAKING / TICKER */
.ticker {
margin-top: 30px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ticker-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
animation: pulse-dot 1.6s ease-in-out infinite;
display: flex;
align-items: center;
gap: 8px;
}
.ticker-label::before {
content: '';
width: 8px; height: 8px;
background: var(--red);
border-radius: 50%;
display: inline-block;
}
.ticker-items {
display: flex;
gap: 24px;
overflow: hidden;
flex: 1;
}
.ticker-item {
white-space: nowrap;
font-size: 13px;
font-weight: 500;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.ticker-item .score {
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.ticker-item .team {
color: var(--accent);
font-weight: 600;
}
.ticker-item .result.w { color: var(--green); }
.ticker-item .result.l { color: var(--red); }
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* SECTION SHARED */
section { padding: 56px 0; }
.section-head { margin-bottom: 36px; }
.section-head .label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.section-head h2 {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800;
letter-spacing: -0.02em;
}
.section-head p {
color: var(--muted);
font-size: 15px;
max-width: 600px;
margin-top: 10px;
}
/* LATEST NEWS (with sidebar feel — two col) */
.news-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 28px;
}
.news-list { display: flex; flex-direction: column; gap: 22px; }
.news-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
transition: all 0.2s ease;
cursor: default;
}
.news-card:hover { border-color: rgba(110,231,255,0.25); transform: translateY(-2px); box-shadow: var(--shadow); }
.news-card .thumb {
aspect-ratio: 4/3;
border-radius: 10px;
overflow: hidden;
background: var(--surface-2);
}
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card .body h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.news-card .body p {
font-size: 14px;
color: var(--muted);
margin: 0 0 12px;
line-height: 1.6;
}
.news-card .meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.news-card .meta .tag { font-size: 10px; }
.news-card .meta .date { color: var(--muted); }
.news-card .actions { margin-top: 12px; }
.news-card .actions .btn {
font-size: 13px;
padding: 8px 16px;
}
/* SIDEBAR */
.sidebar {
display: flex;
flex-direction: column;
gap: 22px;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
}
.panel h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 16px;
letter-spacing: -0.01em;
}
.poll { display: flex; flex-direction: column; gap: 12px; }
.poll-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.15s ease;
font-size: 14px;
}
.poll-option:hover { border-color: rgba(110,231,255,0.4); }
.poll-option.voted { border-color: var(--accent); background: rgba(110,231,255,0.08); }
.poll-bar {
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 100px;
flex: 1;
overflow: hidden;
}
.poll-bar > div {
height: 100%;
background: linear-gradient(90deg, var(--accent), #3b82f6);
border-radius: 100px;
transition: width 0.4s ease;
}
.poll-pct { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 38px; }
.poll-total { font-size: 11px; color: var(--muted); margin-top: 4px; }
.upcoming-list { display: flex; flex-direction: column; gap: 12px; }
.upcoming-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-item .day {
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: 34px;
}
.upcoming-item .teams {
flex: 1;
font-weight: 600;
font-size: 14px;
}
.upcoming-item .teams .vs { color: var(--muted); margin: 0 6px; font-weight: 400; }
.upcoming-item .time {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.quote {
font-style: italic;
font-size: 14px;
color: var(--muted);
line-height: 1.6;
padding-left: 14px;
border-left: 3px solid var(--accent);
}
.quote .attr {
display: block;
margin-top: 8px;
font-style: normal;
font-weight: 600;
color: var(--text);
font-size: 13px;
}
/* FEATURE GRIDS */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px 24px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.feature-card:hover { transform: translateY(-3px); border-color: rgba(110,231,255,0.2); box-shadow: var(--shadow); }
.feature-card .icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(110,231,255,0.1);
display: grid; place-items: center;
font-size: 22px;
margin-bottom: 16px;
color: var(--accent);
}
.feature-card h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
}
.feature-card p {
font-size: 14px;
color: var(--muted);
margin: 0 0 18px;
line-height: 1.65;
}
.feature-card .btn { font-size: 13px; padding: 9px 18px; }
/* STATS HERO */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 18px;
}
.stat-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px 18px;
text-align: center;
}
.stat-tile .big {
font-family: 'Outfit', sans-serif;
font-size: 34px;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.02em;
line-height: 1;
}
.stat-tile .label {
font-size: 12px;
color: var(--muted);
margin-top: 6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* TRADE RUMORS / INJURY */
.reports-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.report-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px;
}
.report-block h3 {
font-size: 22px;
font-weight: 800;
margin: 0 0 6px;
}
.report-block .sub {
font-size: 13px;
color: var(--muted);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.report-block .sub .tag { font-size: 10px; }
.report-block p {
color: var(--muted);
font-size: 14px;
line-height: 1.7;
margin: 0 0 14px;
}
.report-block ul { list-style: none; padding: 0; margin: 0 0 18px; }
.report-block li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
}
.report-block li:last-child { border-bottom: none; }
.report-block li .player { font-weight: 600; }
.report-block li .team-tag {
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 100px;
background: rgba(110,231,255,0.1);
color: var(--accent);
}
.report-block li .team-tag.trade { color: var(--accent-2); background: rgba(251,191,36,0.1); }
/* FAQ ACCORDION */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item.open { border-color: rgba(110,231,255,0.3); }
.faq-question {
width: 100%;
background: none;
border: none;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 600;
color: var(--text);
cursor: pointer;
text-align: left;
font-family: inherit;
}
.faq-question .plus {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--surface-2);
display: grid; place-items: center;
font-size: 18px;
color: var(--muted);
transition: all 0.2s;
flex-shrink: 0;
}
.faq-item.open .faq-question .plus { background: var(--accent); color: #0b0f1a; transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 22px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}
.faq-item.open .faq-answer { max-height: 300px; padding: 0 22px 20px; }
/* CTA BANNER */
.cta-banner {
margin: 20px 0 10px;
background: linear-gradient(135deg, #1b243a, #131a2b);
border: 1px solid var(--border);
border-radius: 20px;
padding: 50px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.cta-banner::after {
content: '';
position: absolute;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(110,231,255,0.08), transparent 70%);
top: -80px; right: -80px;
pointer-events: none;
}
.cta-banner h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
margin: 0 0 8px;
letter-spacing: -0.02em;
}
.cta-banner p { color: var(--muted); margin: 0 0 22px; max-width: 480px; font-size: 15px; }
.cta-banner .btn { font-size: 15px; }
/* TESTIMONIALS */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 8px;
}
.testimonial {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.testimonial .stars { color: var(--accent-2); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial blockquote {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
margin: 0 0 14px;
font-style: italic;
}
.testimonial .author {
display: flex;
align-items: center;
gap: 10px;
}
.testimonial .author img {
width: 38px; height: 38px;
border-radius: 50%;
object-fit: cover;
}
.testimonial .author .name { font-weight: 600; font-size: 13px; }
.testimonial .author .role { font-size: 11px; color: var(--muted); }
/* FOOTER */
footer {
margin-top: 40px;
padding: 50px 0 32px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 36px;
}
.footer-about p { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 320px; }
.footer-col h4 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text);
margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
font-size: 14px;
color: var(--muted);
transition: color 0.15s;
}
.footer-col a:hover { color: var(--accent); }
.social-links { display: flex; gap: 10px; margin-top: 6px; }
.social-links a {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
display: grid; place-items: center;
font-size: 16px;
color: var(--muted);
transition: all 0.2s;
}
.social-links a:hover { color: var(--accent); border-color: rgba(110,231,255,0.3); }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--muted);
}
/* FANTASY INTERACTIVE */
.fantasy-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
margin-top: 20px;
}
.fantasy-card h3 {
font-size: 20px;
font-weight: 800;
margin: 0 0 6px;
}
.fantasy-card .desc {
color: var(--muted);
font-size: 14px;
margin-bottom: 20px;
}
.fantasy-form { display: flex; flex-direction: column; gap: 14px; }
.fantasy-form label {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
display: block;
margin-bottom: 6px;
}
.fantasy-form input, .fantasy-form select {
width: 100%;
padding: 11px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-family: inherit;
font-size: 14px;
transition: border-color 0.2s;
}
.fantasy-form input:focus, .fantasy-form select:focus {
outline: none;
border-color: var(--accent);
}
.fantasy-form select option { background: var(--surface-2); }
.fantasy-result {
margin-top: 16px;
padding: 16px;
background: var(--surface-2);
border-radius: 10px;
border: 1px solid var(--border);
display: none;
font-size: 14px;
}
.fantasy-result.show { display: block; }
.fantasy-result strong { color: var(--accent); }
/* RESPONSIVE */
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: rgba(11,15,26,0.96);
backdrop-filter: blur(14px);
padding: 12px 20px 18px;
border-bottom: 1px solid var(--border);
gap: 4px;
}
.mobile-toggle { display: block; }
.hero-grid { grid-template-columns: 1fr; }
.hero-media { order: -1; max-width: 500px; }
.news-grid { grid-template-columns: 1fr; }
.reports-grid { grid-template-columns: 1fr; }
.feature-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.testimonials { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.cta-banner { padding: 32px 24px; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: 1fr 1fr; }
.hero-text h1 { font-size: 36px; }
.ticker-items { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
</style>
</head>
<body>
<header>
<div class="container nav">
<a href="#" class="brand">
<span class="logo">V</span>
<span>
Velocity Sports
<div class="tagline">The Pulse of the Game</div>
</span>
</a>
<button class="mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle navigation">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
<nav class="nav-links">
<a href="#news" class="active">Home</a>
<a href="#fantasy">Fantasy</a>
<a href="#scores">Scores</a>
<a href="#stats">Stats</a>
<a href="#rumors">Rumors</a>
<a href="#injuries">Injuries</a>
<a href="#schedule">Schedule</a>
<a href="#cta" class="nav-cta">Join Free</a>
</nav>
</div>
</header>
<main class="container">
<!-- HERO -->
<section class="hero">
<div class="hero-grid">
<div class="hero-text">
<span class="tag">Live · Season 2026</span>
<h1 style="margin-top:14px;">Where the <span>Game</span><br>Moves Faster.</h1>
<p class="lead">
Velocity Sports delivers championship-level coverage across every league, team, and tournament
that matters. From breaking trade rumors and up-to-the-minute injury reports to deep-dive
player statistics and season records, we are your authoritative source for what's happening
on the field, on the court, and behind the scenes.
</p>
<div class="hero-actions">
<a href="#cta" class="btn btn-primary">Get Full Access <span class="btn-arrow">→</span></a>
<a href="#scores" class="btn btn-ghost">Live Scores</a>
</div>
</div>
<div class="hero-media">
<img src="https://placehold.co/800x600/1b243a/6ee7ff?text=Velocity+Sports+%7C+Arena+Action&font=outfit" alt="Arena action">
<div class="float-card">
<div>
<div style="font-size:11px; color:var(--muted); font-weight:500;">LIVE · Champions League QF</div>
<div style="margin-top:6px;"><span class="team">FC Northbridge</span> <span class="score">3</span> — <span class="score">2</span> <span class="team">Eastfield United</span></div>
</div>
<div style="text-align:right;">
<div style="font-size:11px; color:var(--muted);">89'</div>
<div class="num">+24%</div>
<div style="font-size:10px; color:var(--muted);">xG this half</div>
</div>
</div>
</div>
</div>
<div class="ticker">
<div class="ticker-label">Live Scores</div>
<div class="ticker-items" id="ticker">
<div class="ticker-item"><span class="team">City FC</span> <span class="score">4</span> <span class="result w">W</span> — <span class="team">Rivals United</span> <span class="score">1</span></div>
<div class="ticker-item"><span class="team">Northside Aces</span> <span class="score">112</span> <span class="result w">W</span> — <span class="team">Lakeside Ballers</span> <span class="score">98</span></div>
<div class="ticker-item"><span class="team">Thunderhawks</span> <span class="score">78</span> — <span class="score">81</span> <span class="team">Storm Riders</span> <span class="result l">L</span></div>
<div class="ticker-item"><span class="team">Vanguard SC</span> <span class="score">2</span> — <span class="score">2</span> <span class="team">Harbor FC</span></div>
<div class="ticker-item"><span class="team">Titans RFC</span> <span class="score">24</span> <span class="result w">W</span> — <span class="team">Cobras</span> <span class="score">17</span></div>
</div>
</div>
</section>
<!-- LATEST NEWS + SIDEBAR -->
<section id="news">
<div class="section-head">
<div class="label">Latest Coverage</div>
<h2>The Stories Driving the Season</h2>
<p>Breaking news, expert analysis, and in-depth reporting from reporters on the ground across every major sport.</p>
</div>
<div class="news-grid">
<div class="news-list">
<article class="news-card">
<div class="thumb">
<img src="https://placehold.co/600x450/1b243a/6ee7ff?text=Trade+Deadline&font=outfit" alt="Trade deadline">
</div>
<div class="body">
<span class="tag" style="margin-bottom:8px; display:inline-block;">Trade Rumors</span>
<h3>Deadline Chaos: Three Blockbuster Trades Reshape the Western Conference</h3>
<p>
With the trade deadline just 72 hours away, the league has been engulfed in a wave of activity
that insiders are calling the most aggressive window in a decade. Three verified moves have
already shifted the championship conversation, while six more proposals are circulating
through front offices. We break down the player statistics, salary matches, and deadline
implications for every team in the mix.
</p>
<div class="meta">
<span class="tag">Trade</span>
<span class="date">2 hours ago</span>
<span class="date">By Marcus Hale</span>
</div>
<div class="actions">
<a href="#rumors" class="btn btn-ghost">Read Full Report <span class="btn-arrow">→</span></a>
</div>
</div>
</article>
<article class="news-card">
<div class="thumb">
<img src="https://placehold.co/600x450/131a2b/34d399?text=Injury+Report&font=outfit" alt="Injury report">
</div>
<div class="body">
<span class="tag" style="margin-bottom:8px; display:inline-block;">Injury Report</span>
<h3>Injury Update: Star Guard Listed Day-to-Day After Contact in Third Quarter</h3>
<p>
The official injury report released Thursday evening lists the team's leading scorer as
questionable for Saturday's rematch, a matchup that has major implications for the playoff
seeding race. Management confirmed the player underwent a standard evaluation and will be
reassessed Friday morning. We outline the season record context, replacement options, and
the betting markets' reaction to the news.
</p>
<div class="meta">
<span class="tag">Health</span>
<span class="date">5 hours ago</span>
<span class="date">By Priya Anand</span>
</div>
<div class="actions">
<a href="#injuries" class="btn btn-ghost">View Full Report <span class="btn-arrow">→</span></a>
</div>
</div>
</article>
<article class="news-card">
<div class="thumb">
<img src="https://placehold.co/600x450/0b0f1a/3b82f6?text=Player+Stats&font=outfit" alt="Player stats dashboard">
</div>
<div class="body">
<span class="tag" style="margin-bottom:8px; display:inline-block;">Player Stats</span>
<h3>By the Numbers: The 2026 Season's Most Dominant Performances So Far</h3>
<p>
A deep statistical dive into the player statistics shaping the current championship picture.
We analyze efficiency ratings, advanced metrics like PER and True Shooting, and compare
this season's breakout candidates against their career baselines. The data makes a compelling
case for three players who deserve MVP consideration before the halfway mark.
</p>
<div class="meta">
<span class="tag">Analytics</span>
<span class="date">Yesterday</span>
<span class="date">By Jordan Park</span>
</div>
<div class="actions">
<a href="#stats" class="btn btn-ghost">Explore Stats <span class="btn-arrow">→</span></a>
</div>
</div>
</article>
</div>
<aside class="sidebar">
<div class="panel">
<h3>Fan Poll</h3>
<div class="poll" id="fanPoll">
<div class="poll-option" data-value="0">
<span>Who's your 2026 MVP?</span>
</div>
<div class="poll-option" data-value="1">
<div class="poll-bar"><div></div></div>
<span class="poll-pct">41%</span>
<span>D. Marquez</span>
</div>
<div class="poll-option" data-value="2">
<div class="poll-bar"><div></div></div>
<span class="poll-pct">28%</span>
<span>S. Okonkwo</span>
</div>
<div class="poll-option" data-value="3">
<div class="poll-bar"><div></div></div>
<span class="poll-pct">19%</span>
<span>L. Vestergaard</span>
</div>
<div class="poll-option" data-value="4">
<div class="poll-bar"><div></div></div>
<span class="poll-pct">12%</span>
<span>Others</span>
</div>
<div class="poll-total">2,847 votes · Live</div>
</div>
<div style="margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;">
<button class="btn btn-primary" style="padding:8px 16px; font-size:13px;" onclick="votePoll()">Vote Now</button>
<button class="btn btn-ghost" style="padding:8px 16px; font-size:13px;" onclick="resetPoll()">Reset</button>
</div>
</div>
<div class="panel">
<h3>Upcoming Games</h3>
<div class="upcoming-list" id="schedule">
<div class="upcoming-item">
<span class="day">Sat 18</span>
<span class="teams">Northbridge <span class="vs">vs</span> Eastfield</span>
<span class="time">20:00 ET</span>
</div>
<div class="upcoming-item">
<span class="day">Sun 19</span>
<span class="teams">Thunderhawks <span class="vs">vs</span> Storm Riders</span>
<span class="time">17:30 ET</span>
</div>
<div class="upcoming-item">
<span class="day">Mon 20</span>
<span class="teams">Vanguard SC <span class="vs">vs</span> Harbor FC</span>
<span class="time">21:00 ET</span>
</div>
<div class="upcoming-item">
<span class="day">Wed 22</span>
<span class="teams">Titans RFC <span class="vs">vs</span> Cobras</span>
<span class="time">19:00 ET</span>
</div>
</div>
<div style="margin-top:14px;">
<a href="#cta" class="btn btn-ghost" style="width:100%; justify-content:center; font-size:13px;">Watch Highlights <span class="btn-arrow">→</span></a>
</div>
</div>
<div class="panel" style="background: linear-gradient(135deg, #1b243a, #131a2b);">
<h3>Player Interview</h3>
<div class="quote">
"The championship isn't won in November. It's won in the gym at 5 AM when nobody's watching.
This season record? That's just proof we did the work."
<span class="attr">— Diego Marquez, Forward · Northbridge FC</span>
</div>
</div>
</aside>
</div>
</section>
<!-- STATS ROW -->
<section id="stats" style="padding-top: 30px;">
<div class="section-head">
<div class="label">Season at a Glance</div>
<h2>Player Statistics & Season Records</h2>
<p>Key performance indicators across the league. Updated live after every game.</p>
</div>
<div class="stats-row">
<div class="stat-tile">
<div class="big">1,247</div>
<div class="label">Total Goals · League</div>
</div>
<div class="stat-tile">
<div class="big">83.4%</div>
<div class="label">Avg. Field Goal %</div>
</div>
<div class="stat-tile">
<div class="big">24.6</div>
<div class="label">Pts Per Game · Leader</div>
</div>
<div class="stat-tile">
<div class="big">18</div>
<div class="label">Teams in Playoff Hunt</div>
</div>
</div>
</section>
<!-- FEATURE GRID -->
<section>
<div class="section-head">
<div class="label">What We Cover</div>
<h2>Everything a Fan Needs, One Platform</h2>
<p>From morning headlines to late-night data dumps, Velocity Sports keeps you ahead of the competition.</p>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="icon">📊</div>
<h3>Player Stats & Analytics</h3>
<p>Advanced performance dashboards with efficiency ratings, matchup splits, season-over-season comparisons, and predictive projections built from thousands of data points.</p>
<a href="#stats" class="btn btn-ghost">View Stats <span class="btn-arrow">→</span></a>
</div>
<div class="feature-card">
<div class="icon">📰</div>
<h3>Trade Rumors & Insider Intel</h3>
<p>Verified insider reporting on blockbuster trades, free agency movements, and front-office maneuvering. We track every rumor through to official confirmation or denial.</p>
<a href="#rumors" class="btn btn-ghost">Read Rumors <span class="btn-arrow">→</span></a>
</div>
<div class="feature-card">
<div class="icon">🏥</div>
<h3>Injury Reports & Health</h3>
<p>Daily updated injury reports with prognosis estimates, availability percentages, and replacement tier rankings. Know who's playing before your fantasy lineup locks.</p>
<a href="#injuries" class="btn btn-ghost">Check Injuries <span class="btn-arrow">→</span></a>
</div>
<div class="feature-card">
<div class="icon">🏆</div>
<h3>Championship Coverage</h3>
<p>Full postseason coverage including bracket projections, expert picks, historical precedent analysis, and real-time updates from every game of the championship run.</p>
<a href="#cta" class="btn btn-ghost">Watch Highlights <span class="btn-arrow">→</span></a>
</div>
<div class="feature-card">
<div class="icon">🎯</div>
<h3>Fantasy League Tools</h3>
<p>Built-in lineup optimizers, waiver wire rankings, trade evaluators, and league comparators. Run your roster against the competition and find the edge before draft day.</p>
<a href="#fantasy" class="btn btn-ghost">Build Fantasy Team <span class="btn-arrow">→</span></a>
</div>
<div class="feature-card">
<div class="icon">🎟️</div>
<h3>Tickets & Events</h3>
<p>Official ticket marketplaces, event calendars, and exclusive presale access for Velocity members. Buy tickets directly from verified partners for the games you can't miss.</p>
<a href="#cta" class="btn btn-ghost">Buy Tickets <span class="btn-arrow">→</span></a>
</div>
</div>
</section>
<!-- TRADE RUMORS + INJURY REPORTS -->
<section id="rumors">
<div class="section-head">
<div class="label">Inside the Front Office</div>
<h2>Trade Rumors & Injury Reports</h2>
<p>Two of the most consequential storylines of any season, delivered together with context and accountability.</p>
</div>
<div class="reports-grid">
<div class="report-block">
<h3>Trade Rumors — Live Wire</h3>
<div class="sub"><span class="tag">Insider</span> 14 rumors tracked · 3 confirmed</div>
<p>
The trade deadline is heating up across all major leagues. Front offices are balancing short-term
championship pushes against long-term rebuilds, and the rumor mill is running at full volume.
Below are the most credible proposals circulating as of this morning, ranked by confidence level.
Each entry reflects verified sourcing — we don't amplify noise.
</p>
<ul>
<li><span class="player">Diego Marquez · F</span> <span class="team-tag trade">To Northbridge?</span></li>
<li><span class="player">S. Okonkwo · G</span> <span class="team-tag trade">Package being assembled</span></li>
<li><span class="player">L. Vestergaard · D</span> <span class="team-tag">Likely stay</span></li>
<li><span class="player">J. Park · Mid</span> <span class="team-tag trade">Draft + cash reported</span></li>
<li><span class="player">R. Nakamura · F</span> <span class="team-tag">Trade declined</span></li>
</ul>
<p>
The championship implications are immediate: a confirmed move for Marquez would shift the
Western Conference power balance and push two teams into a must-win posture with only eight
games remaining. Stay with Velocity for real-time confirmations as the window closes.
</p>
<a href="#cta" class="btn btn-primary" style="font-size:13px; padding:9px 18px;">Track All Rumors <span class="btn-arrow">→</span></a>
</div>
<div class="report-block" id="injuries">
<h3>Injury Report — Daily Update</h3>
<div class="sub"><span class="tag">Health</span> Released 6 hours ago</div>
<p>
The daily injury report paints a clearer picture of availability heading into the weekend slate.
Several high-profile players are moving from doubtful to questionable, while a pair of key
defenders remain week-to-week. Availability percentages below reflect the consensus of
multiple medical sources and team reporters on the ground.
</p>
<ul>
<li><span class="player">Diego Marquez · F</span> <span style="color:var(--green);">Questionable · 60%</span></li>
<li><span class="player">T. Adeyemi · G</span> <span style="color:var(--green);">Out · Hamstring</span></li>
<li><span class="player">M. Reyes · D</span> <span style="color:var(--green);">Week-to-week · 25%</span></li>
<li><span class="player">C. Fontaine · F</span> <span style="color:var(--accent);">Probable · 90%</span></li>
<li><span class="player">K. Birch · G</span> <span style="color:var(--green);">Questionable · 55%</span></li>
</ul>
<p>
The season record implications are significant: four of the five players above are starters or
high-impact rotational pieces. Their availability shapes not just win probability but playoff
seeding and, for fantasy managers, the weekly starter decision. We update this report every morning.
</p>
<a href="#cta" class="btn btn-primary" style="font-size:13px; padding:9px 18px;">Get Full Injury Feed <span class="btn-arrow">→</span></a>
</div>
</div>
</section>
<!-- FANTASY INTERACTIVE -->
<section id="fantasy">
<div class="section-head">
<div class="label">Interactive</div>
<h2>Build Your Fantasy Roster</h2>
<p>Use live player statistics to construct a championship-caliber fantasy lineup. Drag, compare, and project — all in one place.</p>
</div>
<div class="fantasy-card">
<h3>Quick-Pick Fantasy Builder</h3>
<p class="desc">
Select a player for each slot below to build a balanced roster. Our engine pulls the latest
season stats, injury status, and matchup difficulty to recommend the highest-ceiling lineup.
Try it now — it takes about thirty seconds.
</p>
<div class="fantasy-form">
<div>
<label>Quarterback / Point Guard</label>
<select id="qb">
<option value="Marquez-D">Diego Marquez — 24.6 PPG, 41% MVP vote</option>
<option value="Okonkwo-S">S. Okonkwo — 21.3 PPG, Clutch +4.2</option>
<option value="Vestergaard-L">L. Vestergaard — 18.1 PPG, Def. leader</option>
<option value="Park-J">J. Park — 16.8 PPG, High efficiency</option>
</select>
</div>
<div>
<label>Forward / Wing</label>
<select id="fw">
<option value="Fontaine-C">C. Fontaine — 22.4 PPG, 87% FG</option>
<option value="Nakamura-R">R. Nakamura — 19.7 PPG, 6'9"</option>
<option value="Adeyemi-T">T. Adeyemi — IR, do not start</option>
<option value="Birch-K">K. Birch — 15.2 PPG, 3PT specialist</option>
</select>
</div>
<div>
<label>Defense / Utility</label>
<select id="def">
<option value="Reyes-M">M. Reyes — Elite D, week-to-week</option>
<option value="Bauer-H">H. Bauer — Solid D, available</option>
<option value="Cole-W">W. Cole — Energy big, high upside</option>
</select>
</div>
<div style="display:flex; gap:10px; align-items:end;">
<button class="btn btn-primary" onclick="buildFantasy()" style="flex:1;">Generate Lineup</button>
<button class="btn btn-ghost" onclick="clearFantasy()" style="padding:11px 16px;">Clear</button>
</div>
</div>
<div class="fantasy-result" id="fantasyResult">
<strong>Your lineup:</strong> <span id="fbOutput">—</span><br>
<span style="display:block; margin-top:6px; color:var(--muted); font-size:13px;" id="fbNote"></span>
<div style="margin-top:12px; padding-top:12px; border-top:1px solid var(--border);">
<span style="font-size:12px; color:var(--muted);">Projected team score: </span>
<strong style="color:var(--accent); font-size:18px;" id="fbScore">—</strong>
</div>
</div>
</div>
</section>
<!-- FAQ ACCORDION -->
<section>
<div class="section-head">
<div class="label">FAQ</div>
<h2>Common Questions, Straight Answers</h2>
<p>Everything you need to know about Velocity Sports membership, coverage, and tools.</p>
</div>
<div class="faq" id="faq">
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
How often are player statistics updated?
<span class="plus">+</span>
</button>
<div class="faq-answer">
Player statistics are updated in real time during live games and refreshed within 30 minutes after any game concludes. Season-long aggregates, efficiency ratings, and advanced metrics are recalculated nightly so your dashboards always reflect the latest available data.
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
How reliable are the trade rumors you publish?
<span class="plus">+</span>
</button>
<div class="faq-answer">
We grade every rumor on a confidence scale from speculative to confirmed. Only rumors with at least one verified source make it to our live wire. Rumors that turn out to be false are updated with a correction badge, and we maintain a public accuracy ledger for full transparency.
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
Can I use the fantasy builder for my league?
<span class="plus">+</span>
</button>
<div class="faq-answer">
Yes. The fantasy builder supports standard roster formats, custom scoring settings, and league-specific constraints. You can export lineups to most major fantasy platforms and share projected starting five with your league mates directly from the tool.
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
Do you cover all major sports and leagues?
<span class="plus">+</span>
</button>
<div class="faq-answer">
Velocity Sports covers football, basketball, baseball, rugby, and major international tournaments including the Champions League and continental championships. Our depth varies by league — flagship coverage is available for the leagues driving the current championship conversation.
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
How do I get early access to tickets and events?
<span class="plus">+</span>
</button>
<div class="faq-answer">
Velocity members receive presale codes for partnered events 48 hours before the general public. Memberships also unlock official ticket marketplaces with verified resale listings and price-drop alerts. Join free to start receiving presale notifications.
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section>
<div class="section-head">
<div class="label">Trusted by Fans</div>
<h2>What the Community Says</h2>
<p>Hear from analysts, fantasy managers, and lifelong fans who rely on Velocity Sports every day.</p>
</div>
<div class="testimonials">
<div class="testimonial">
<div class="stars">★★★★★</div>
<blockquote>"I manage three fantasy leagues and Velocity's injury reports are the first thing I check every Thursday. The availability percentages have saved my lineup more times than I can count."</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/76?u=alex" alt="Alex">
<div>
<div class="name">Alex R.</div>
<div class="role">Fantasy League Manager</div>
</div>
</div>
</div>
<div class="testimonial">
<div class="stars">★★★★★</div>
<blockquote>"The trade rumor section is the most credible in the game. When that Marquez blockbuster went through, Velocity had the salary match right before the league's official announcement. That's real intel."</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/76?u=sam" alt="Sam">
<div>
<div class="name">Sam T.</div>
<div class="role">Season Ticket Holder · 12 yrs</div>
</div>
</div>
</div>
<div class="testimonial">
<div class="stars">★★★★★</div>
<blockquote>"The player statistics dashboards are incredible. I pull efficiency comparisons for my coaching staff every week. The advanced metrics aren't dumbed down — they're genuinely useful at a professional level."</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/76?u=mia" alt="Mia">
<div>
<div class="name">Mia Chen</div>
<div class="role">Assistant Coach · U19 Academy</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA BANNER -->
<section id="cta">
<div class="cta-banner">
<div>
<h2>Don't Watch the Game. Own It.</h2>
<p>
Join Velocity Sports today for live scores, verified trade intelligence, daily injury reports,
deep player statistics, and fantasy tools that give you a real edge. Free to start.
</p>
<a href="#" class="btn btn-primary">Get Full Access Free <span class="btn-arrow">→</span></a>
</div>
<div style="text-align:right; min-width:220px;">
<div style="font-size:13px; color:var(--muted); margin-bottom:10px;">What you get:</div>
<ul style="list-style:none; padding:0; margin:0; font-size:14px; color:var(--text);">
<li style="padding:4px 0; display:flex; gap:8px; align-items:center;">✓ Live scores & fixtures</li>
<li style="padding:4px 0; display:flex; gap:8px; align-items:center;">✓ Daily injury reports</li>
<li style="padding:4px 0; display:flex; gap:8px; align-items:center;">✓ Player statistics dashboards</li>
<li style="padding:4px 0; display:flex; gap:8px; align-items:center;">✓ Fantasy lineup builder</li>
<li style="padding:4px 0; display:flex; gap:8px; align-items:center;">✓ Presale ticket access</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-about">
<div>
<a href="#" class="brand" style="margin-bottom:14px;">
<span class="logo">V</span>
<span>Velocity Sports</span>
</a>
</div>
<p>
The Pulse of the Game. Velocity Sports is an independent sports news and analytics platform
delivering championship-level coverage, verified insider reporting, and tools for fans,
fantasy managers, and analysts worldwide.
</p>
<div class="social-links" style="margin-top:18px;">
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="YouTube">YT</a>
<a href="#" aria-label="Discord">DC</a>
</div>
</div>
<div class="footer-col">
<h4>Coverage</h4>
<ul>
<li><a href="#news">Latest News</a></li>
<li><a href="#scores">Live Scores</a></li>
<li><a href="#stats">Player Stats</a></li>
<li><a href="#rumors">Trade Rumors</a></li>
<li><a href="#injuries">Injury Reports</a></li>
<li><a href="#fantasy">Fantasy Tools</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="#">About Velocity</a></li>
<li><a href="#">Our Reporters</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Connect</h4>
<ul>
<li><a href="mailto:hello@velocitysports.example">hello@velocitysports.example</a></li>
<li><a href="tel:+18005550199">+1 (800) 555-0199</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">Advertise With Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2026 Velocity Sports. All rights reserved.</div>
<div style="display:flex; gap:18px; flex-wrap:wrap;">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Settings</a>
</div>
</div>
</div>
</footer>
<script>
/* ---- Fan Poll (interactive) ---- */
const pollVotes = { 0: 0, 1: 1167, 2: 797, 3: 541, 4: 342 };
const pollTotal = () => Object.values(pollVotes).reduce((a,b)=>a+b, 0);
const pct = (v) => Math.round(v / pollTotal() * 100);
function renderPoll() {
const bars = document.querySelectorAll('#fanPoll .poll-bar > div');
const pcts = document.querySelectorAll('#fanPoll .poll-pct');
const keys = [1,2,3,4];
bars.forEach((bar,i) => { bar.style.width = pct(pollVotes[keys[i]]) + '%'; });
pcts.forEach((p,i) => { p.textContent = pct(pollVotes[keys[i]]) + '%'; });
document.querySelector('#fanPoll .poll-total').textContent =
pollTotal().toLocaleString() + ' votes · Live';
}
renderPoll();
function votePoll() {
const opts = document.querySelectorAll('#fanPoll .poll-option');
const sel = prompt('Cast your MVP vote — enter a number 1-4:\n1) D. Marquez 2) S. Okonkwo 3) L. Vestergaard 4) Others');
const v = parseInt(sel);
if (v >= 1 && v <= 4) {
pollVotes[v] = (pollVotes[v] || 0) + 1;
renderPoll();
// highlight
opts.forEach(o => o.classList.remove('voted'));
opts[v].classList.add('voted');
setTimeout(() => opts[v].classList.remove('voted'), 1200);
}
}
function resetPoll() {
if (confirm('Reset poll to baseline counts?')) {
pollVotes[1] = 1167; pollVotes[2] = 797; pollVotes[3] = 541; pollVotes[4] = 342;
renderPoll();
}
}
/* ---- Fantasy Builder (interactive) ---- */
const stats = {
'Marquez-D': { name:'Diego Marquez', pos:'QB/GP', pts:24.6, score:92 },
'Okonkwo-S': { name:'S. Okonkwo', pos:'QB/GP', pts:21.3, score:84 },
'Vestergaard-L': { name:'L. Vestergaard', pos:'WB', pts:18.1, score:78 },
'Park-J': { name:'J. Park', pos:'MID', pts:16.8, score:74 },
'Fontaine-C': { name:'C. Fontaine', pos:'FWD', pts:22.4, score:88 },
'Nakamura-R': { name:'R. Nakamura', pos:'FWD', pts:19.7, score:81 },
'Adeyemi-T': { name:'T. Adeyemi', pos:'FWD', pts:0, score:10, ir:true },
'Birch-K': { name:'K. Birch', pos:'WB', pts:15.2, score:66 },
'Reyes-M': { name:'M. Reyes', pos:'DEF', pts:12.1, score:62, week:true },
'Bauer-H': { name:'H. Bauer', pos:'DEF', pts:11.8, score:60 },
'Cole-W': { name:'W. Cole', pos:'DEF', pts:9.4, score:54 },
};
function buildFantasy() {
const qb = document.getElementById('qb').value;
const fw = document.getElementById('fw').value;
const df = document.getElementById('def').value;
const a = stats[qb], b = stats[fw], c = stats[df];
const out = document.getElementById('fbOutput');
const note = document.getElementById('fbNote');
const score = document.getElementById('fbScore');
const res = document.getElementById('fantasyResult');
out.textContent = `${a.name} (${a.pos}) · ${b.name} (${b.pos}) · ${c.name} (${c.pos})`;
const warn = [];
if (a.ir) warn.push(a.name + ' is IR — do not start');
if (a.week) warn.push(a.name + ' is week-to-week');
if (b.ir) warn.push(b.name + ' is IR — do not start');
if (b.week) warn.push(b.name + ' is week-to-week');
if (c.ir) warn.push(c.name + ' is IR — do not start');
if (c.week) warn.push(c.name + ' is week-to-week');
const total = Math.round((a.score||0) + (b.score||0) + (c.score||0));
score.textContent = total + ' projected points';
note.textContent = warn.length ? '⚠ ' + warn.join(' · ') : 'All starters available — solid lineup.';
res.classList.add('show');
}
function clearFantasy() {
document.getElementById('qb').selectedIndex = 0;
document.getElementById('fw').selectedIndex = 0;
document.getElementById('def').selectedIndex = 0;
document.getElementById('fantasyResult').classList.remove('show');
}
/* ---- FAQ Accordion ---- */
function toggleFaq(btn) {
const item = btn.parentElement;
const isOpen = item.classList.contains('open');
// close others
document.querySelectorAll('.faq-item.open').forEach(el => {
if (el !== item) el.classList.remove('open');
});
item.classList.toggle('open', !isOpen);
}
/* ---- Live ticker interval (simulated) ---- */
const tickerItems = [
{ t1:'City FC', s1:4, r1:'w', t2:'Rivals United', s2:1 },
{ t1:'Northside Aces', s1:112, r1:'w', t2:'Lakeside Ballers', s2:98 },
{ t1:'Thunderhawks', s1:78, r1:'l', t2:'Storm Riders', s2:81 },
{ t1:'Vanguard SC', s1:2, r1:'d', t2:'Harbor FC', s2:2 },
{ t1:'Titans RFC', s1:24, r1:'w', t2:'Cobras', s2:17 },
{ t1:'FC Northbridge', s1:3, r1:'w', t2:'Eastfield United', s2:2 },
{ t1:'Westgate FC', s1:5, r1:'w', t2:'Southpool', s2:0 },
];
let tickIdx = 0;
setInterval(() => {
tickIdx = (tickIdx + 1) % tickerItems.length;
const d = tickerItems[tickIdx];
const rClass = d.r1 === 'w' ? 'w' : (d.r1 === 'l' ? 'l' : '');
const el = document.querySelector('.ticker-items');
if (!el) return;
el.innerHTML = `
<div class="ticker-item"><span class="team">${d.t1}</span> <span class="score">${d.s1}</span> <span class="result ${rClass}">${r1Label(d.r1)}</span> — <span class="team">${d.t2}</span> <span class="score">${d.s2}</span></div>
<div class="ticker-item"><span class="team">Northside Aces</span> <span class="score">112</span> <span class="result w">W</span> — <span class="team">Lakeside Ballers</span> <span class="score">98</span></div>
<div class="ticker-item"><span class="team">Thunderhawks</span> <span class="score">78</span> — <span class="score">81</span> <span class="team">Storm Riders</span> <span class="result l">L</span></div>
<div class="ticker-item"><span class="team">Vanguard SC</span> <span class="score">2</span> — <span class="score">2</span> <span class="team">Harbor FC</span></div>
<div class="ticker-item"><span class="team">Titans RFC</span> <span class="score">24</span> <span class="result w">W</span> — <span class="team">Cobras</span> <span class="score">17</span></div>
`;
}, 7000);
function r1Label(r){ return r==='w'?'W':r==='l'?'L':'D'; }
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:50:26.686Z",
"url": "https://benchmark.aimac.invalid/b0076d8ca0266a3896fd83036071d10f0a80d49b37a349a1417e68453baeb967.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Twitter\">\ud835\udd4f</a>",
"target": [
"a[aria-label=\"Twitter\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Twitter\">\ud835\udd4f</a>",
"target": [
"a[aria-label=\"Twitter\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Twitter\">\ud835\udd4f</a>",
"target": [
"a[aria-label=\"Twitter\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Twitter\">\ud835\udd4f</a>",
"target": [
"a[aria-label=\"Twitter\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Twitter\">\ud835\udd4f</a>",
"target": [
"a[aria-label=\"Twitter\"]"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<h1 style=\"margin-top:14px;\">Where the <span>Game</span><br>Moves Faster.</h1>",
"target": [
"h1"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-primary\" style=\"padding:8px 16px; font-size:13px;\" onclick=\"votePoll()\">Vote Now</button>",
"target": [
"button[onclick=\"votePoll()\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 style=\"margin-top:14px;\">Where the <span>Game</span><br>Moves Faster.</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>The Stories Driving the Season</h2>",
"target": [
"#news > .section-head > h2"
]
},
{
"html": "<h3>Deadline Chaos: Three Blockbuster Trades Reshape the Western Conference</h3>",
"target": [
"article:nth-child(1) > .body > h3"
]
},
{
"html": "<h3>Injury Update: Star Guard Listed Day-to-Day After Contact in Third Quarter</h3>",
"target": [
"article:nth-child(2) > .body > h3"
]
},
{
"html": "<h3>By the Numbers: The 2026 Season's Most Dominant Performances So Far</h3>",
"target": [
"article:nth-child(3) > .body > h3"
]
},
{
"html": "<h3>Fan Poll</h3>",
"target": [
".panel:nth-child(1) > h3"
]
},
{
"html": "<h3>Upcoming Games</h3>",
"target": [
".panel:nth-child(2) > h3"
]
},
{
"html": "<h3>Player Interview</h3>",
"target": [
".panel:nth-child(3) > h3"
]
},
{
"html": "<h2>Player Statistics & Season Records</h2>",
"target": [
"#stats > .section-head > h2"
]
},
{
"html": "<h2>Everything a Fan Needs, One Platform</h2>",
"target": [
"section:nth-child(4) > .section-head > h2"
]
},
{
"html": "<h3>Player Stats & Analytics</h3>",
"target": [
".feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Trade Rumors & Insider Intel</h3>",
"target": [
".feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Injury Reports & Health</h3>",
"target": [
".feature-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Championship Coverage</h3>",
"target": [
".feature-card:nth-child(4) > h3"
]
},
{
"html": "<h3>Fantasy League Tools</h3>",
"target": [
".feature-card:nth-child(5) > h3"
]
},
{
"html": "<h3>Tickets & Events</h3>",
"target": [
".feature-card:nth-child(6) > h3"
]
},
{
"html": "<h2>Trade Rumors & Injury Reports</h2>",
"target": [
"#rumors > .section-head > h2"
]
},
{
"html": "<h3>Trade Rumors \u2014 Live Wire</h3>",
"target": [
".report-block:nth-child(1) > h3"
]
},
{
"html": "<h3>Injury Report \u2014 Daily Update</h3>",
"target": [
"#injuries > h3"
]
},
{
"html": "<h2>Build Your Fantasy Roster</h2>",
"target": [
"#fantasy > .section-head > h2"
]
},
{
"html": "<h3>Quick-Pick Fantasy Builder</h3>",
"target": [
".fantasy-card > h3"
]
},
{
"html": "<h2>Common Questions, Straight Answers</h2>",
"target": [
"section:nth-child(7) > .section-head > h2"
]
},
{
"html": "<h2>What the Community Says</h2>",
"target": [
"section:nth-child(8) > .section-head > h2"
]
},
{
"html": "<h2>Don't Watch the Game. Own It.</h2>",
"target": [
".cta-banner > div:nth-child(1) > h2"
]
},
{
"html": "<h4>Coverage</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Connect</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main class=\"container\">",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4f6fb",
"bgColor": "#0b0f1a",
"contrastRatio": 17.69,
"fontSize": "16.5pt (22px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 17.69"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>\n Velocity Sports\n <div class=\"tagline\">The Pulse of the Game</div>\n </span>",
"target": [
".nav > .brand[href=\"#\"] > span:nth-child(2)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"qb\">",
"target": [
"#qb"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/800x600/1b243a/6ee7ff?text=Velocity+Sports+%7C+Arena+Action&font=outfit\" alt=\"Arena action\">",
"target": [
"img[alt=\"Arena action\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"feature-card\">",
"target": [
".feature-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#stats\" class=\"btn btn-ghost\">View Stats <span class=\"btn-arrow\">\u2192</span></a>",
"target": [
".feature-card:nth-child(1) > .btn-ghost.btn[href$=\"#stats\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"brand\">\n <span class=\"logo\">V</span>\n <span>\n Velocity Sports\n <div class=\"tagline\">The Pulse of the Game</div>\n </span>\n </a>",
"target": [
".nav > .brand[href=\"#\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
".report-block:nth-child(1) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><span class=\"player\">Diego Marquez \u00b7 F</span> <span class=\"team-tag trade\">To Northbridge?</span></li>",
"target": [
".report-block:nth-child(1) > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/800x600/1b243a/6ee7ff?text=Velocity+Sports+%7C+Arena+Action&font=outfit\" alt=\"Arena action\">",
"target": [
"img[alt=\"Arena action\"]"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 199.2,
"height": 54.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (199.2px by 54.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\">\n <span class=\"logo\">V</span>\n <span>\n Velocity Sports\n <div class=\"tagline\">The Pulse of the Game</div>\n </span>\n </a>",
"target": [
".nav > .brand[href=\"#\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "16.5pt (22px)",
"fontWeight": "bold",
"messageKey": "shortTextContent",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"logo\">V</span>",
"target": [
".nav > .brand[href=\"#\"] > .logo"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"logo\">V</span>",
"target": [
".nav > .brand[href=\"#\"] > .logo"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"violations": [
{
"id": "select-name",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"qb\">",
"target": [
"#qb"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"fw\">",
"target": [
"#fw"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"def\">\n <option value=\"Reyes-M\">M. Reyes \u2014 Elite D, week-to-week</option>\n <option value=\"Bauer-H\">H. Bauer \u2014 Solid D, available</option>\n <option value=\"Cole-W\">W. Cole \u2014 Energy big, high upside</option>\n </select>",
"target": [
"#def"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7643
},
{
"y": 576,
"height": 7643
},
{
"y": 1152,
"height": 7643
},
{
"y": 1728,
"height": 7643
},
{
"y": 2304,
"height": 7643
},
{
"y": 2880,
"height": 7643
},
{
"y": 3456,
"height": 7643
},
{
"y": 4032,
"height": 7643
},
{
"y": 4608,
"height": 7643
},
{
"y": 5184,
"height": 7643
},
{
"y": 5760,
"height": 7643
},
{
"y": 6336,
"height": 7643
},
{
"y": 6912,
"height": 7643
},
{
"y": 6923,
"height": 7643
}
],
"scans": 15,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Sports" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Sports"
- Description: Sports news, team updates, scores, events, and athletic resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Sports" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Fantasy", "Scores", "Stats".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Sports" category. Consider themes similar to: "Trade Rumors", "Injury Reports", "Player Stats".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "championship", "player statistics", "season record".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Buy Tickets", "View Stats", "Watch Highlights".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Sports" sector. Ideas similar but not limited to: "fantasy league".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "fan polls", "player interviews", "upcoming games".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.