SpaceXAI Grok Build 0.1 – News Weather Information
via xAI · Generated
- AIMAC Debt 13.70
- Cost $0.05
- Total Violations 29
- HTML Size 79 KB
- Em Dashes 1
Screenshot
View Live Page
Accessibility Issues Found
29 Serious
-
color-contrast serious 17 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="text-xs text-slate-400">• 14m ago</span> -
link-name serious 4 instances
Links must have discernible text
Example HTML
<a href="#" class="text-slate-400 hover:text-slate-600"><i class="fa-brands fa-x-twitter"></i></a> -
target-size serious 8 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<a href="#national" class="text-slate-600 hover:text-slate-800">National</a>
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>Atlas News • Precision in News. Accuracy in Weather.</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@700&display=swap');
:root {
--primary: #0f172a;
}
body {
font-family: 'Inter', system_ui, sans-serif;
}
.heading-serif {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
line-height: 1.1;
}
.news-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.section-header {
font-size: 1.75rem;
line-height: 1.1;
font-weight: 700;
letter-spacing: -.025em;
}
.nav-link {
transition: color 0.2s ease;
}
.nav-link:hover {
color: #0f172a;
}
.story-meta {
font-size: 0.75rem;
letter-spacing: -.015em;
}
.weather-card {
transition: transform 0.2s ease;
}
.live-ticker {
overflow: hidden;
white-space: nowrap;
}
.ticker-content {
display: inline-block;
animation: ticker 25s linear infinite;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.modern-shadow {
box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
}
.news-badge {
font-size: 0.65rem;
padding: 1px 8px;
font-weight: 600;
letter-spacing: .5px;
}
.article-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stat-value {
font-weight: 700;
line-height: 1;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800">
<!-- HEADER -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto">
<div class="px-6 py-4 flex items-center justify-between">
<!-- Logo + Branding -->
<div class="flex items-center gap-x-3">
<div class="flex items-center gap-x-3">
<img src="https://placehold.co/142x52/0f172a/ffffff?text=ATLAS&font=montserrat"
alt="Atlas News Logo" class="h-11 w-auto rounded-lg shadow-sm">
<div>
<h1 class="text-3xl font-bold tracking-tighter">Atlas News</h1>
<p class="text-[10px] text-slate-500 font-medium -mt-0.5 tracking-[0.5px]">EST 2012</p>
</div>
</div>
</div>
<!-- Tagline -->
<div class="hidden lg:block text-center">
<p class="text-sm font-medium text-slate-600">Precision in News.<br>Accuracy in Weather.</p>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-x-7 text-sm">
<a href="#national" class="nav-link font-medium text-slate-700 hover:text-slate-900">National</a>
<a href="#business" class="nav-link font-medium text-slate-700 hover:text-slate-900">Business</a>
<a href="#weather" class="nav-link font-medium text-slate-700 hover:text-slate-900">Weather</a>
<a href="#archive" class="nav-link font-medium text-slate-700 hover:text-slate-900">Archive</a>
<a href="#investigations" class="nav-link font-medium text-slate-700 hover:text-slate-900">Investigations</a>
<a href="#world" class="nav-link font-medium text-slate-700 hover:text-slate-900">World</a>
</nav>
<!-- CTA Buttons -->
<div class="flex items-center gap-x-2">
<button onclick="showSubscribeModal()"
class="hidden md:block px-5 py-2 text-sm font-semibold bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors">
Subscribe
</button>
<!-- Mobile Nav Toggle -->
<button onclick="toggleMobileMenu()"
class="md:hidden flex items-center justify-center w-10 h-10 text-slate-700 hover:bg-slate-100 rounded-xl transition-colors">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-200 px-6 py-4">
<div class="flex flex-col gap-y-1 text-sm">
<a href="#national" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">National</a>
<a href="#business" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">Business</a>
<a href="#weather" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">Weather</a>
<a href="#archive" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">Archive</a>
<a href="#investigations" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">Investigations</a>
<a href="#world" class="py-2.5 px-3 hover:bg-slate-100 rounded-xl font-medium">World</a>
<div class="pt-2 border-t mt-1">
<button onclick="showSubscribeModal(); toggleMobileMenu();"
class="w-full py-2.5 px-3 bg-slate-900 text-white font-semibold rounded-xl text-sm">
Subscribe to Atlas
</button>
</div>
</div>
</div>
</header>
<!-- HERO / BREAKING NEWS -->
<div class="max-w-screen-2xl mx-auto">
<div class="relative h-[580px] lg:h-[520px] bg-slate-900 overflow-hidden">
<!-- Hero Background -->
<img src="https://picsum.photos/id/1016/2000/1200"
alt="Dramatic weather scene over American landscape"
class="absolute inset-0 w-full h-full object-cover opacity-90">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-900/70 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-transparent to-transparent"></div>
<div class="relative max-w-screen-2xl mx-auto px-6 h-full flex items-center">
<div class="max-w-xl">
<!-- Breaking Badge -->
<div class="flex items-center gap-x-2 mb-4">
<div class="inline-flex items-center gap-x-1.5 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full">
<div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
<span>LIVE • BREAKING</span>
</div>
<span class="text-xs font-medium text-slate-300">Updated 4 min ago</span>
</div>
<h2 class="text-white text-5xl lg:text-6xl leading-[1.05] font-bold tracking-tighter heading-serif">
Historic Winter Storm<br>
Bears Down on Midwest
</h2>
<p class="mt-4 max-w-md text-lg text-slate-200">
Forecasters warn of record snowfall and dangerous wind chills as the system moves across six states.
Evacuations underway in parts of Illinois and Indiana.
</p>
<div class="flex items-center gap-x-3 mt-8">
<button onclick="document.getElementById('weather').scrollIntoView({ behavior: 'smooth' })"
class="px-6 py-3.5 bg-white text-slate-900 font-semibold rounded-2xl flex items-center gap-x-2 hover:bg-amber-50 transition-colors shadow-lg">
<i class="fa-solid fa-satellite mr-1"></i>
<span>Watch Weather Radar</span>
</button>
<button onclick="document.getElementById('investigations').scrollIntoView({ behavior: 'smooth' })"
class="px-6 py-3.5 border border-white/40 text-white font-semibold rounded-2xl hover:bg-white/10 transition-colors flex items-center gap-x-2">
<span>Read Full Briefing</span>
</button>
</div>
<div class="mt-5 flex items-center text-xs text-slate-300">
<div class="flex -space-x-1 mr-3">
<img src="https://i.pravatar.cc/22?u=reporter1" class="w-5 h-5 rounded-full ring-1 ring-white" alt="">
<img src="https://i.pravatar.cc/22?u=reporter2" class="w-5 h-5 rounded-full ring-1 ring-white" alt="">
</div>
<span>By <span class="font-medium">Elena Voss</span> & National Weather Desk</span>
</div>
</div>
</div>
<!-- Live ticker -->
<div class="absolute bottom-0 left-0 right-0 bg-slate-900/80 backdrop-blur-md border-t border-white/10 py-2">
<div class="live-ticker max-w-screen-2xl mx-auto px-6 text-sm">
<div class="ticker-content flex items-center gap-x-8 text-slate-300 text-xs font-medium">
<div class="flex items-center gap-x-2">
<span class="font-bold text-emerald-400">MARKETS:</span>
<span>DOW +184 • S&P +0.9%</span>
</div>
<div class="flex items-center gap-x-2">
<span class="font-bold text-amber-400">ALERT:</span>
<span>Winter storm watches now in effect for 11 states</span>
</div>
<div class="flex items-center gap-x-2">
<span class="font-bold text-blue-400">WORLD:</span>
<span>EU reaches new climate agreement in Brussels</span>
</div>
<div class="flex items-center gap-x-2">
<span class="font-bold text-emerald-400">MARKETS:</span>
<span>DOW +184 • S&P +0.9%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="max-w-screen-2xl mx-auto px-6">
<!-- STATS BAR -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-200 mt-6 rounded-3xl overflow-hidden">
<div class="bg-white px-6 py-4 flex items-center justify-between">
<div>
<div class="text-xs font-semibold text-slate-500">READERS TODAY</div>
<div class="stat-value text-3xl font-bold">482,941</div>
</div>
<i class="fa-solid fa-users text-slate-300 text-3xl"></i>
</div>
<div class="bg-white px-6 py-4 flex items-center justify-between">
<div>
<div class="text-xs font-semibold text-slate-500">STORIES PUBLISHED</div>
<div class="stat-value text-3xl font-bold">94</div>
</div>
<i class="fa-solid fa-newspaper text-slate-300 text-3xl"></i>
</div>
<div class="bg-white px-6 py-4 flex items-center justify-between">
<div>
<div class="text-xs font-semibold text-slate-500">ACTIVE ALERTS</div>
<div class="stat-value text-3xl font-bold text-amber-600">17</div>
</div>
<i class="fa-solid fa-exclamation-triangle text-amber-400 text-3xl"></i>
</div>
<div class="bg-white px-6 py-4 flex items-center justify-between">
<div>
<div class="text-xs font-semibold text-slate-500">TIPS RECEIVED</div>
<div class="stat-value text-3xl font-bold">1,284</div>
</div>
<i class="fa-solid fa-lightbulb text-slate-300 text-3xl"></i>
</div>
</div>
<!-- TOP STORIES / NATIONAL SECTION -->
<section id="national" class="pt-12 pb-8">
<div class="flex items-end justify-between mb-6 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-red-600">NATIONAL</span>
<h2 class="section-header">Top National Headlines</h2>
</div>
<a href="#" class="hidden md:flex items-center text-sm font-medium text-slate-700 hover:text-slate-900">
View all national coverage <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Story 1 -->
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<img src="https://picsum.photos/id/1015/800/460" alt="Midwest snowstorm scene with highway" class="w-full h-52 object-cover">
<div class="p-5">
<div class="flex items-center gap-x-2 mb-3">
<span class="news-badge bg-red-100 text-red-700 rounded-full">NATIONAL</span>
<span class="text-xs text-slate-400">• 14m ago</span>
</div>
<h3 class="font-bold text-xl leading-tight tracking-tight">Winter Storm Marcus: 14 States Under Warning as Snow Totals Mount</h3>
<p class="article-excerpt mt-3 text-sm text-slate-600">The National Weather Service has issued winter storm warnings from Colorado to Ohio. Chicago is bracing for up to 18 inches of snow by Thursday evening. Officials have opened warming centers in 27 counties.</p>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://i.pravatar.cc/24?u=marcus" alt="" class="w-6 h-6 rounded-full mr-2">
<span class="text-xs font-medium">Marcus Hale</span>
</div>
<button onclick="readArticle(1)" class="text-xs font-semibold text-slate-700 hover:text-slate-900 flex items-center">
Read full story <i class="fa-solid fa-angle-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Story 2 -->
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<img src="https://picsum.photos/id/1005/800/460" alt="Congress building at night" class="w-full h-52 object-cover">
<div class="p-5">
<div class="flex items-center gap-x-2 mb-3">
<span class="news-badge bg-blue-100 text-blue-700 rounded-full">NATIONAL</span>
<span class="text-xs text-slate-400">• 2h ago</span>
</div>
<h3 class="font-bold text-xl leading-tight tracking-tight">Bipartisan Infrastructure Bill Clears Senate with Strong Majority</h3>
<p class="article-excerpt mt-3 text-sm text-slate-600">The $1.2 trillion package includes major investments in bridges, broadband access, and clean water systems. The bill now heads to the House where passage is expected by early March. President has already signaled support.</p>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://i.pravatar.cc/24?u=sarah" alt="" class="w-6 h-6 rounded-full mr-2">
<span class="text-xs font-medium">Sarah Kline</span>
</div>
<button onclick="readArticle(2)" class="text-xs font-semibold text-slate-700 hover:text-slate-900 flex items-center">
Read full story <i class="fa-solid fa-angle-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Story 3 -->
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<img src="https://picsum.photos/id/201/800/460" alt="Wildfire in forest" class="w-full h-52 object-cover">
<div class="p-5">
<div class="flex items-center gap-x-2 mb-3">
<span class="news-badge bg-amber-100 text-amber-700 rounded-full">NATIONAL</span>
<span class="text-xs text-slate-400">• Yesterday</span>
</div>
<h3 class="font-bold text-xl leading-tight tracking-tight">California Wildfires Force Evacuations of 14,000 Residents</h3>
<p class="article-excerpt mt-3 text-sm text-slate-600">Firefighters are battling three major blazes in Northern California. The largest fire has already consumed 62,000 acres. Governor Newsom declared a state of emergency as dry conditions continue across the region.</p>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://i.pravatar.cc/24?u=daniel" alt="" class="w-6 h-6 rounded-full mr-2">
<span class="text-xs font-medium">Daniel Torres</span>
</div>
<button onclick="readArticle(3)" class="text-xs font-semibold text-slate-700 hover:text-slate-900 flex items-center">
Read full story <i class="fa-solid fa-angle-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- WEATHER CENTER -->
<section id="weather" class="py-8">
<div class="flex items-end justify-between mb-5 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-emerald-700">WEATHER CENTER</span>
<h2 class="section-header">Live Weather Insights</h2>
</div>
<div class="flex items-center gap-x-2 text-xs">
<div class="flex items-center bg-white px-3 py-1 rounded-2xl border">
<i class="fa-solid fa-satellite text-emerald-600 mr-2"></i>
<span class="font-semibold text-emerald-700">Radar Updated</span>
<span class="ml-1.5 text-emerald-600 text-[10px]">2m ago</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
<!-- Current Conditions -->
<div class="xl:col-span-5 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow">
<div class="flex justify-between items-start">
<div>
<div class="flex items-center">
<span class="text-xl font-semibold">Washington, D.C.</span>
<span class="ml-2 px-2 py-0.5 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">Live</span>
</div>
<div class="mt-1 flex items-baseline">
<span class="text-7xl font-bold tracking-tighter">34</span>
<span class="text-3xl font-light text-slate-400">°F</span>
</div>
<p class="text-lg font-medium text-slate-600">Clear • Feels like 27°</p>
</div>
<div class="text-right">
<i class="fa-solid fa-sun text-yellow-400 text-5xl"></i>
<div class="mt-1 text-xs">
<div>High: <span class="font-semibold">41°</span></div>
<div>Low: <span class="font-semibold">23°</span></div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-3 mt-7 pt-5 border-t">
<div>
<div class="text-xs text-slate-500">Humidity</div>
<div class="font-semibold text-lg">42%</div>
</div>
<div>
<div class="text-xs text-slate-500">Wind</div>
<div class="font-semibold text-lg">7 mph NW</div>
</div>
<div>
<div class="text-xs text-slate-500">UV Index</div>
<div class="font-semibold text-lg">2 <span class="text-xs font-normal">(Low)</span></div>
</div>
</div>
</div>
<!-- 5-Day Forecast -->
<div class="xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow">
<div class="flex justify-between items-center mb-4">
<h4 class="font-semibold text-lg">5-Day Forecast</h4>
<button onclick="showRadarModal()"
class="text-xs flex items-center font-semibold text-emerald-700 hover:text-emerald-800">
<i class="fa-solid fa-map mr-1.5"></i>
<span>Open Radar</span>
</button>
</div>
<div class="grid grid-cols-5 gap-2">
<!-- Day 1 -->
<div class="text-center px-2 py-1 rounded-2xl hover:bg-slate-50 transition-colors">
<div class="text-xs font-medium text-slate-500">Today</div>
<i class="fa-solid fa-sun text-yellow-500 text-3xl my-1"></i>
<div class="flex justify-center items-baseline gap-x-1">
<span class="font-bold">41°</span>
<span class="text-xs text-slate-400">/ 23°</span>
</div>
</div>
<!-- Day 2 -->
<div class="text-center px-2 py-1 rounded-2xl hover:bg-slate-50 transition-colors">
<div class="text-xs font-medium text-slate-500">Thu</div>
<i class="fa-solid fa-cloud-sun text-amber-400 text-3xl my-1"></i>
<div class="flex justify-center items-baseline gap-x-1">
<span class="font-bold">37°</span>
<span class="text-xs text-slate-400">/ 19°</span>
</div>
</div>
<!-- Day 3 -->
<div class="text-center px-2 py-1 rounded-2xl hover:bg-slate-50 transition-colors">
<div class="text-xs font-medium text-slate-500">Fri</div>
<i class="fa-solid fa-cloud text-slate-400 text-3xl my-1"></i>
<div class="flex justify-center items-baseline gap-x-1">
<span class="font-bold">29°</span>
<span class="text-xs text-slate-400">/ 15°</span>
</div>
</div>
<!-- Day 4 -->
<div class="text-center px-2 py-1 rounded-2xl hover:bg-slate-50 transition-colors">
<div class="text-xs font-medium text-slate-500">Sat</div>
<i class="fa-solid fa-snowflake text-blue-400 text-3xl my-1"></i>
<div class="flex justify-center items-baseline gap-x-1">
<span class="font-bold">26°</span>
<span class="text-xs text-slate-400">/ 11°</span>
</div>
</div>
<!-- Day 5 -->
<div class="text-center px-2 py-1 rounded-2xl hover:bg-slate-50 transition-colors">
<div class="text-xs font-medium text-slate-500">Sun</div>
<i class="fa-solid fa-cloud-sun text-yellow-400 text-3xl my-1"></i>
<div class="flex justify-center items-baseline gap-x-1">
<span class="font-bold">34°</span>
<span class="text-xs text-slate-400">/ 20°</span>
</div>
</div>
</div>
</div>
<!-- Interactive Weather Tool -->
<div class="xl:col-span-12 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow mt-1">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-y-4">
<div>
<h4 class="font-semibold">Check Local Weather</h4>
<p class="text-sm text-slate-600">Get real-time conditions and forecast for any U.S. city</p>
</div>
<div class="flex flex-col sm:flex-row gap-2 w-full lg:w-auto">
<div class="flex-1 lg:w-72">
<input id="city-input" type="text" placeholder="Enter city (e.g., Chicago, Denver)"
class="w-full px-4 py-3 border border-slate-300 focus:border-slate-400 outline-none rounded-2xl text-sm">
</div>
<button onclick="getWeatherForecast()"
class="px-6 py-3 bg-emerald-700 text-white text-sm font-semibold rounded-2xl hover:bg-emerald-800 transition-colors flex items-center justify-center gap-x-2 whitespace-nowrap">
<i class="fa-solid fa-search"></i>
<span>Get Forecast</span>
</button>
</div>
</div>
<!-- Interactive Result -->
<div id="weather-result" class="hidden mt-5 pt-5 border-t border-slate-100">
<div class="flex flex-col md:flex-row md:items-center gap-y-4 md:gap-y-0 md:gap-x-6">
<div id="result-content" class="flex-1"></div>
<div>
<button onclick="watchRadar()"
class="px-5 py-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-200 text-sm font-semibold rounded-2xl flex items-center gap-x-2">
<i class="fa-solid fa-satellite"></i>
<span>View Live Radar</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BUSINESS SECTION -->
<section id="business" class="py-6">
<div class="flex items-end justify-between mb-6 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-violet-700">BUSINESS</span>
<h2 class="section-header">Markets & Economy</h2>
</div>
<a href="#" class="hidden md:flex items-center text-sm font-medium text-slate-700 hover:text-slate-900">View full market report <i class="fa-solid fa-arrow-right ml-2"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Business Card 1 -->
<div class="news-card bg-white border border-slate-200 rounded-3xl p-5 modern-shadow">
<div class="flex justify-between mb-2">
<span class="news-badge bg-violet-100 text-violet-700 rounded-full">MARKETS</span>
<span class="text-xs text-emerald-600 font-medium">+1.8%</span>
</div>
<h3 class="font-semibold text-lg">Dow Jones surges on strong jobs report and cooling inflation data</h3>
<p class="mt-3 text-sm text-slate-600">Wall Street rallied as the latest employment numbers showed continued strength in the labor market while inflation continued to moderate. Analysts now project two rate cuts this year.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xs font-medium text-slate-500">By Priya Patel • 3h ago</span>
<button onclick="readArticle(4)" class="text-xs px-4 py-1 font-semibold rounded-xl hover:bg-slate-100 transition-colors">Read</button>
</div>
</div>
<div class="news-card bg-white border border-slate-200 rounded-3xl p-5 modern-shadow">
<div class="flex justify-between mb-2">
<span class="news-badge bg-violet-100 text-violet-700 rounded-full">CORPORATE</span>
<span class="text-xs text-red-600 font-medium">-2.4%</span>
</div>
<h3 class="font-semibold text-lg">Tech giant announces major layoffs as it pivots to AI focus</h3>
<p class="mt-3 text-sm text-slate-600">The company will cut 7,500 positions globally in a major restructuring. CEO stated the move will allow the company to invest heavily in artificial intelligence infrastructure.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xs font-medium text-slate-500">By Marcus Rivera • 6h ago</span>
<button onclick="readArticle(5)" class="text-xs px-4 py-1 font-semibold rounded-xl hover:bg-slate-100 transition-colors">Read</button>
</div>
</div>
<div class="news-card bg-white border border-slate-200 rounded-3xl p-5 modern-shadow">
<div class="flex justify-between mb-2">
<span class="news-badge bg-violet-100 text-violet-700 rounded-full">ENERGY</span>
</div>
<h3 class="font-semibold text-lg">Oil prices climb as OPEC+ extends production cuts into Q3</h3>
<p class="mt-3 text-sm text-slate-600">Crude oil prices rose 3.4% in early trading following the announcement from the cartel. Energy analysts say the decision is aimed at supporting prices amid slowing global demand.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xs font-medium text-slate-500">By Lena Voss • Jan 31</span>
<button onclick="readArticle(6)" class="text-xs px-4 py-1 font-semibold rounded-xl hover:bg-slate-100 transition-colors">Read</button>
</div>
</div>
</div>
</section>
<!-- WORLD + SIDEBAR SECTION -->
<section id="world" class="py-6">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- World / International -->
<div class="lg:col-span-8">
<div class="flex items-end justify-between mb-6 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-blue-700">WORLD</span>
<h2 class="section-header">Global Developments</h2>
</div>
</div>
<div class="bg-white border border-slate-200 rounded-3xl p-6 modern-shadow">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
<div>
<div class="flex items-center mb-2">
<span class="news-badge bg-blue-100 text-blue-700 rounded-full">EUROPE</span>
</div>
<h4 class="font-bold">EU leaders approve sweeping new AI regulatory framework</h4>
<p class="text-sm mt-2 text-slate-600">The landmark legislation will place strict requirements on high-risk artificial intelligence systems, including requirements for transparency and human oversight.</p>
<div class="mt-3 text-xs">
<span class="font-medium">By Thomas Berger • 8h ago</span>
</div>
</div>
<div>
<div class="flex items-center mb-2">
<span class="news-badge bg-blue-100 text-blue-700 rounded-full">ASIA</span>
</div>
<h4 class="font-bold">Japan's economy contracts for second consecutive quarter</h4>
<p class="text-sm mt-2 text-slate-600">The world's third-largest economy shrank 0.4% in the final quarter of last year, raising concerns of a potential recession and prompting new fiscal measures.</p>
<div class="mt-3 text-xs">
<span class="font-medium">By Mei Lin • Yesterday</span>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="lg:col-span-4">
<div class="bg-white border border-slate-200 rounded-3xl p-5 modern-shadow h-full">
<h4 class="font-semibold mb-4 flex items-center">
<span>Trending Now</span>
</h4>
<div class="space-y-3 text-sm">
<div class="flex gap-3">
<div class="flex-1">
<a href="#" class="font-medium hover:text-emerald-700 transition-colors">Senate confirms new Federal Reserve chair</a>
<div class="text-xs text-slate-400 mt-0.5">3.2k readers</div>
</div>
</div>
<div class="flex gap-3">
<div class="flex-1">
<a href="#" class="font-medium hover:text-emerald-700 transition-colors">Scientists discover new strain of avian flu in poultry</a>
<div class="text-xs text-slate-400 mt-0.5">1.9k readers</div>
</div>
</div>
<div class="flex gap-3">
<div class="flex-1">
<a href="#" class="font-medium hover:text-emerald-700 transition-colors">Major airline cancels 800 flights due to storm</a>
<div class="text-xs text-slate-400 mt-0.5">4.8k readers</div>
</div>
</div>
<div class="pt-1 border-t">
<button onclick="showSubmitTipModal()"
class="text-xs w-full flex items-center justify-center gap-x-2 py-2.5 text-emerald-700 hover:text-emerald-800 font-semibold transition-colors">
<i class="fa-solid fa-paper-plane"></i>
<span>Submit a News Tip</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- INVESTIGATIONS + ARCHIVE -->
<section id="investigations" class="py-8">
<div class="flex items-end justify-between mb-6 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-slate-700">INVESTIGATIONS</span>
<h2 class="section-header">In-Depth Reporting</h2>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Investigation 1 -->
<div class="bg-white border border-slate-200 rounded-3xl p-6 modern-shadow flex gap-4">
<div class="flex-1">
<div class="flex gap-2 mb-3">
<span class="news-badge bg-slate-200 text-slate-700 rounded-full">EXCLUSIVE</span>
</div>
<h3 class="font-bold text-xl">The Hidden Costs of America's Supply Chain Crisis</h3>
<p class="mt-3 text-sm text-slate-600">An eight-month investigation reveals how port delays and labor shortages have disproportionately affected rural communities and small businesses across the country. Our reporters traveled to 14 states to document the impact.</p>
<div class="flex items-center mt-4 text-xs">
<span class="font-medium">By investigative team • 4 days ago</span>
</div>
<button onclick="readArticle(7)" class="mt-4 text-sm font-semibold px-4 py-2 bg-slate-900 text-white rounded-2xl text-xs flex items-center gap-x-2">
Read the full investigation
</button>
</div>
<div class="hidden md:block w-28 flex-shrink-0">
<img src="https://picsum.photos/id/160/220/220" class="rounded-2xl w-full h-full object-cover" alt="Shipping containers at port">
</div>
</div>
<div class="bg-white border border-slate-200 rounded-3xl p-6 modern-shadow flex gap-4">
<div class="flex-1">
<div class="flex gap-2 mb-3">
<span class="news-badge bg-amber-200 text-amber-700 rounded-full">DATA</span>
</div>
<h3 class="font-bold text-xl">How Climate Change Is Reshaping American Agriculture</h3>
<p class="mt-3 text-sm text-slate-600">Atlas News analyzed two decades of USDA data to uncover how shifting weather patterns have altered crop yields, farm profitability, and food prices. The findings are more dramatic than previously reported.</p>
<div class="flex items-center mt-4 text-xs">
<span class="font-medium">By Clara Mendoza • Jan 28</span>
</div>
<button onclick="readArticle(8)" class="mt-4 text-sm font-semibold px-4 py-2 bg-slate-900 text-white rounded-2xl text-xs flex items-center gap-x-2">
Read the full investigation
</button>
</div>
<div class="hidden md:block w-28 flex-shrink-0">
<img src="https://picsum.photos/id/292/220/220" class="rounded-2xl w-full h-full object-cover" alt="Farmland aerial view">
</div>
</div>
</div>
</section>
<!-- ARCHIVE SECTION -->
<section id="archive" class="py-8">
<div class="flex items-end justify-between mb-6 px-1">
<div>
<span class="text-xs font-bold tracking-widest text-slate-500">FROM THE ARCHIVE</span>
<h2 class="section-header">Notable Past Coverage</h2>
</div>
<a href="#" class="text-sm font-medium text-slate-700 hover:text-slate-900 flex items-center">Browse full archive <i class="fa-solid fa-arrow-right ml-2"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<div class="p-5">
<div class="flex justify-between text-xs mb-1">
<span class="font-medium text-slate-500">December 2022</span>
<span class="text-emerald-600 font-medium">Award-winning</span>
</div>
<h3 class="font-semibold">How one small town survived the 2021 Texas power crisis</h3>
<p class="text-sm mt-2 text-slate-600">A deep look into community resilience and the long-term policy implications of the historic blackout.</p>
<div class="mt-4 text-xs font-medium">By the Atlas Investigations Desk</div>
</div>
</div>
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<div class="p-5">
<div class="flex justify-between text-xs mb-1">
<span class="font-medium text-slate-500">September 2021</span>
</div>
<h3 class="font-semibold">The rise and fall of the U.S. housing market boom</h3>
<p class="text-sm mt-2 text-slate-600">Our comprehensive analysis of the post-pandemic housing surge and the warning signs that were missed.</p>
<div class="mt-4 text-xs font-medium">By Financial Desk</div>
</div>
</div>
<div class="news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow">
<div class="p-5">
<div class="flex justify-between text-xs mb-1">
<span class="font-medium text-slate-500">March 2020</span>
<span class="text-emerald-600 font-medium">Most read</span>
</div>
<h3 class="font-semibold">Inside the first 72 hours of the global pandemic</h3>
<p class="text-sm mt-2 text-slate-600">A real-time chronicle of how public health officials and governments responded as the crisis unfolded.</p>
<div class="mt-4 text-xs font-medium">By Global Desk</div>
</div>
</div>
</div>
</section>
<!-- ENGAGEMENT / TESTIMONIALS -->
<div class="py-7 px-1">
<div class="bg-slate-900 text-white rounded-3xl p-7 md:p-9">
<div class="grid md:grid-cols-12 gap-6 items-center">
<div class="md:col-span-7">
<h3 class="font-bold text-2xl">Trusted by 1.4 million readers.</h3>
<p class="mt-2 text-slate-300">Our editorial team and meteorologists bring clarity to complex stories and forecasts every day.</p>
<div class="mt-5 flex items-center gap-x-5">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/26?u=1" class="w-7 h-7 ring-2 ring-slate-800 rounded-full" alt="">
<img src="https://i.pravatar.cc/26?u=2" class="w-7 h-7 ring-2 ring-slate-800 rounded-full" alt="">
<img src="https://i.pravatar.cc/26?u=3" class="w-7 h-7 ring-2 ring-slate-800 rounded-full" alt="">
</div>
<div>
<span class="text-sm font-semibold">"The most accurate forecasts and in-depth reporting I’ve found."</span>
<span class="block text-xs mt-0.5 text-slate-400">— Dr. Rachel Kim, Climate Scientist</span>
</div>
</div>
</div>
<div class="md:col-span-5">
<div class="flex flex-col sm:flex-row gap-3">
<button onclick="showSubscribeModal()"
class="px-6 py-3.5 bg-white text-slate-900 font-bold rounded-2xl hover:bg-amber-100 transition-colors text-sm flex-1">
Subscribe for $4.99/mo
</button>
<button onclick="document.getElementById('weather').scrollIntoView({ behavior: 'smooth' })"
class="px-6 py-3.5 bg-white/10 hover:bg-white/20 transition-colors text-sm font-semibold rounded-2xl flex-1">
Explore Weather Tools
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="bg-white border-t border-slate-200 mt-4">
<div class="max-w-screen-2xl mx-auto px-6 pt-9 pb-8">
<div class="grid grid-cols-2 md:grid-cols-12 gap-y-8">
<div class="col-span-2 md:col-span-5">
<div class="flex items-center gap-x-3">
<img src="https://placehold.co/110x40/0f172a/ffffff?text=ATLAS&font=montserrat" alt="Atlas News" class="h-8">
<span class="font-bold text-xl">Atlas News</span>
</div>
<p class="text-xs mt-3 text-slate-600 max-w-[260px]">Independent journalism and reliable weather intelligence since 2012.</p>
<div class="flex gap-x-4 mt-4">
<a href="#" class="text-slate-400 hover:text-slate-600"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="text-slate-400 hover:text-slate-600"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="text-slate-400 hover:text-slate-600"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" class="text-slate-400 hover:text-slate-600"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="col-span-2 md:col-span-2">
<h5 class="font-semibold text-sm mb-3">Sections</h5>
<div class="flex flex-col gap-y-[5px] text-xs">
<a href="#national" class="text-slate-600 hover:text-slate-800">National</a>
<a href="#business" class="text-slate-600 hover:text-slate-800">Business</a>
<a href="#weather" class="text-slate-600 hover:text-slate-800">Weather</a>
<a href="#world" class="text-slate-600 hover:text-slate-800">World</a>
</div>
</div>
<div class="col-span-2 md:col-span-2">
<h5 class="font-semibold text-sm mb-3">Resources</h5>
<div class="flex flex-col gap-y-[5px] text-xs">
<a href="#archive" class="text-slate-600 hover:text-slate-800">Archive</a>
<a href="#" class="text-slate-600 hover:text-slate-800">Podcast</a>
<a href="#" class="text-slate-600 hover:text-slate-800">Data Center</a>
<a href="#" class="text-slate-600 hover:text-slate-800">Newsletters</a>
</div>
</div>
<div class="col-span-2 md:col-span-3">
<h5 class="font-semibold text-sm mb-3">Contact</h5>
<div class="text-xs space-y-1 text-slate-600">
<div>Washington, D.C. & New York</div>
<div>news@atlasnews.com</div>
<div class="pt-1">1-800-ATLAS-NEWS</div>
<div class="pt-2 text-xs">
<a href="#" class="hover:underline">Privacy Policy</a> •
<a href="#" class="hover:underline">Terms of Service</a>
</div>
</div>
</div>
</div>
<div class="border-t border-slate-200 pt-5 mt-8 flex flex-col md:flex-row items-center justify-between text-xs text-slate-500">
<div>© 2025 Atlas News Network. All rights reserved.</div>
<div class="mt-1 md:mt-0">A trusted source for independent journalism and meteorological data.</div>
</div>
</div>
</footer>
<!-- Subscribe Modal -->
<div id="subscribe-modal" onclick="hideSubscribeModal(event)" class="hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center">
<div onclick="event.stopImmediatePropagation()" class="bg-white rounded-3xl max-w-md w-full mx-4 p-7 shadow-xl">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-xl">Subscribe to Atlas News</h3>
<button onclick="hideSubscribeModal()" class="text-xl text-slate-400 hover:text-slate-600">×</button>
</div>
<p class="text-sm text-slate-600">Get daily briefings, exclusive investigations, and accurate weather alerts delivered to your inbox.</p>
<div class="mt-5">
<div class="mb-4">
<label class="text-xs font-semibold block mb-1">Full Name</label>
<input type="text" value="Jordan Ellis" class="w-full border border-slate-300 px-4 py-[10px] rounded-2xl text-sm">
</div>
<div class="mb-4">
<label class="text-xs font-semibold block mb-1">Email Address</label>
<input type="email" value="jordan.ellis@email.com" class="w-full border border-slate-300 px-4 py-[10px] rounded-2xl text-sm">
</div>
<div class="mb-1">
<label class="text-xs font-semibold block mb-1.5">What are you interested in?</label>
<div class="flex flex-wrap gap-2">
<label class="flex items-center gap-1.5 bg-slate-100 px-3 py-1.5 rounded-2xl text-xs cursor-pointer">
<input type="checkbox" checked class="accent-slate-700">
<span class="font-medium">Daily Brief</span>
</label>
<label class="flex items-center gap-1.5 bg-slate-100 px-3 py-1.5 rounded-2xl text-xs cursor-pointer">
<input type="checkbox" checked class="accent-slate-700">
<span class="font-medium">Weather Alerts</span>
</label>
<label class="flex items-center gap-1.5 bg-slate-100 px-3 py-1.5 rounded-2xl text-xs cursor-pointer">
<input type="checkbox" class="accent-slate-700">
<span class="font-medium">Investigations</span>
</label>
</div>
</div>
<button onclick="subscribeUser()" class="w-full py-3.5 mt-2 bg-slate-900 text-white rounded-2xl font-semibold text-sm">
Start 7-day free trial
</button>
<p class="text-[10px] text-center text-slate-500 mt-3">Cancel anytime. No credit card required for trial.</p>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind script
function initializeTailwind() {
document.documentElement.style.setProperty('--accent', '#0f172a');
}
// Mobile menu toggle
function toggleMobileMenu() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
}
// Weather forecast interactive function
function getWeatherForecast() {
const input = document.getElementById('city-input').value.trim();
const resultContainer = document.getElementById('weather-result');
const resultContent = document.getElementById('result-content');
if (!input) {
alert("Please enter a city name.");
return;
}
const city = input.toLowerCase();
let data = {};
// Mock weather data
if (city.includes('chicago') || city.includes('ill')) {
data = {
city: "Chicago, IL",
temp: 29,
condition: "Light Snow",
high: 33,
low: 18,
humidity: 78,
wind: "11 mph NE",
icon: "fa-snowflake",
iconColor: "text-blue-400"
};
} else if (city.includes('new york') || city.includes('nyc')) {
data = {
city: "New York, NY",
temp: 34,
condition: "Clear",
high: 41,
low: 23,
humidity: 42,
wind: "7 mph NW",
icon: "fa-sun",
iconColor: "text-yellow-400"
};
} else if (city.includes('denver') || city.includes('colo')) {
data = {
city: "Denver, CO",
temp: 18,
condition: "Partly Cloudy",
high: 26,
low: 4,
humidity: 51,
wind: "14 mph W",
icon: "fa-cloud-sun",
iconColor: "text-amber-400"
};
} else if (city.includes('los angeles') || city.includes('la')) {
data = {
city: "Los Angeles, CA",
temp: 66,
condition: "Sunny",
high: 72,
low: 51,
humidity: 32,
wind: "5 mph SW",
icon: "fa-sun",
iconColor: "text-yellow-400"
};
} else if (city.includes('miami')) {
data = {
city: "Miami, FL",
temp: 78,
condition: "Partly Cloudy",
high: 81,
low: 69,
humidity: 74,
wind: "9 mph SE",
icon: "fa-cloud-sun",
iconColor: "text-amber-300"
};
} else {
data = {
city: input.charAt(0).toUpperCase() + input.slice(1),
temp: 37,
condition: "Mostly Cloudy",
high: 42,
low: 29,
humidity: 61,
wind: "8 mph",
icon: "fa-cloud",
iconColor: "text-slate-400"
};
}
resultContent.innerHTML = `
<div class="flex items-center gap-x-5">
<div>
<div class="flex items-baseline">
<span class="text-5xl font-bold">${data.temp}</span>
<span class="text-2xl font-light text-slate-400 ml-1">°F</span>
</div>
<div class="font-medium text-lg">${data.city}</div>
<div class="text-emerald-600">${data.condition}</div>
</div>
<div>
<i class="fa-solid ${data.icon} ${data.iconColor} text-6xl"></i>
</div>
<div class="text-xs flex-1">
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
<div><span class="text-slate-400">High:</span> <span class="font-semibold">${data.high}°</span></div>
<div><span class="text-slate-400">Low:</span> <span class="font-semibold">${data.low}°</span></div>
<div><span class="text-slate-400">Humidity:</span> <span class="font-semibold">${data.humidity}%</span></div>
<div><span class="text-slate-400">Wind:</span> <span class="font-semibold">${data.wind}</span></div>
</div>
</div>
</div>
`;
resultContainer.classList.remove('hidden');
resultContainer.classList.add('flex');
// Scroll to results
setTimeout(() => {
resultContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 250);
}
// Watch radar (simulated interactive element)
function watchRadar() {
const resultContainer = document.getElementById('weather-result');
const radarHTML = `
<div class="mt-4 pt-4 border-t">
<div class="flex justify-between items-center mb-3">
<div>
<span class="font-semibold">Live Radar View</span>
<span class="ml-2 text-xs px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded">LIVE</span>
</div>
<button onclick="closeRadarView(this)" class="text-xs font-medium text-slate-500 hover:text-red-500">Close</button>
</div>
<div class="relative bg-slate-800 rounded-2xl overflow-hidden h-56 flex items-center justify-center">
<img src="https://picsum.photos/id/1018/800/400" class="w-full h-full object-cover opacity-75" alt="Weather radar map">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-slate-900/30"></div>
<!-- Simulated radar overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-3/4 h-3/4 border border-emerald-400/70 rounded-full flex items-center justify-center">
<div class="w-[65%] h-[65%] border border-emerald-400/60 rounded-full flex items-center justify-center">
<div class="w-[40%] h-[40%] border border-emerald-300/70 rounded-full"></div>
</div>
</div>
</div>
<div class="absolute top-4 right-4 bg-black/70 px-3 py-1 rounded-xl text-xs text-white">
<div class="flex items-center gap-1.5">
<div class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></div>
<span class="font-medium text-xs">SCANNING</span>
</div>
</div>
<div class="absolute bottom-4 left-4 bg-black/70 px-3 py-1.5 rounded-xl text-xs text-white">
<span class="font-bold">Precipitation detected</span>
</div>
</div>
<div class="text-xs text-center mt-2 text-slate-500">Simulated radar • Last updated: moments ago</div>
</div>
`;
resultContainer.innerHTML = resultContainer.innerHTML + radarHTML;
}
function closeRadarView(element) {
const parent = element.closest('#weather-result');
if (parent) {
parent.classList.add('hidden');
parent.innerHTML = `<div id="result-content" class="flex-1"></div>`;
}
}
// Show radar modal (alternative interactive)
function showRadarModal() {
const modal = document.createElement('div');
modal.className = `fixed inset-0 bg-black bg-opacity-60 z-[110] flex items-center justify-center`;
modal.innerHTML = `
<div onclick="event.target.remove()" class="max-w-4xl w-full mx-4">
<div onclick="event.stopImmediatePropagation()" class="bg-white rounded-3xl overflow-hidden">
<div class="px-6 pt-5 pb-3 flex justify-between items-center border-b">
<div>
<span class="font-bold">National Weather Radar</span>
<span class="ml-2 px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-full">LIVE</span>
</div>
<button class="text-xl leading-none px-1 text-slate-400 hover:text-red-400" onclick="this.closest('.fixed').remove()">×</button>
</div>
<div class="relative">
<img src="https://picsum.photos/id/1018/1200/580" class="w-full h-auto" alt="Full weather radar map">
<div class="absolute top-4 left-4 bg-white/90 px-4 py-2 rounded-2xl shadow text-xs">
<div class="flex items-center">
<div class="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse mr-2"></div>
<span class="font-bold">Doppler Radar Active</span>
</div>
</div>
<div class="absolute bottom-4 right-4 bg-slate-900/80 text-white px-4 py-2 text-xs rounded-2xl">
<div>Precipitation intensity: <span class="font-semibold">Moderate</span></div>
</div>
</div>
<div class="px-6 py-4 flex items-center justify-between bg-slate-50 text-xs">
<div class="flex items-center gap-4">
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-400 mr-1.5"></div>
<span class="text-xs">Light</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-indigo-400 mr-1.5"></div>
<span class="text-xs">Moderate</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-violet-400 mr-1.5"></div>
<span class="text-xs">Heavy</span>
</div>
</div>
<button onclick="this.closest('.fixed').remove()" class="px-5 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white text-xs font-semibold rounded-2xl">Close Radar</button>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
}
// Read article function (simulates opening full story)
function readArticle(articleId) {
const modal = document.createElement('div');
modal.className = `fixed inset-0 bg-black/70 flex items-center justify-center z-[120]`;
let content = '';
switch(articleId) {
case 1:
content = `
<div onclick="event.target.remove()" class="max-w-2xl w-full mx-4 bg-white rounded-3xl overflow-hidden">
<div class="p-7">
<div class="flex justify-between">
<div>
<span class="px-3 py-1 bg-red-100 text-red-700 text-xs font-bold rounded-full">NATIONAL • BREAKING</span>
</div>
<button onclick="event.target.closest('.fixed').remove()" class="text-3xl leading-none text-slate-400 hover:text-slate-600">×</button>
</div>
<h2 class="mt-3 font-bold text-3xl">Winter Storm Marcus: 14 States Under Warning as Snow Totals Mount</h2>
<div class="flex items-center text-xs mt-3 text-slate-500">
<span>By Marcus Hale</span>
<span class="mx-2">•</span>
<span>January 31, 2025 • 14 minutes ago</span>
</div>
<div class="prose prose-sm mt-5 text-slate-700">
<p>The National Weather Service has expanded winter storm warnings across the Midwest and Northeast as a powerful system continues to strengthen. Meteorologists at Atlas News are tracking the storm's rapid intensification.</p>
<p>Forecasters expect Chicago to receive between 14 and 18 inches of snow, with areas of northern Indiana potentially seeing even higher totals. Wind gusts could reach 50 mph in exposed areas, creating dangerous blizzard conditions.</p>
<p>State governors have activated National Guard units in Illinois, Indiana, and Michigan to assist with emergency operations and snow removal. School districts across the region have already announced closures for Thursday and Friday.</p>
</div>
<div class="mt-6 flex items-center justify-between">
<div>
<button onclick="event.target.closest('.fixed').remove()" class="text-sm px-5 py-2 bg-slate-900 text-white font-semibold rounded-2xl">Close</button>
</div>
<div class="flex items-center text-xs">
<span class="font-medium">Share:</span>
<i class="ml-3 fa-brands fa-x-twitter text-slate-400 hover:text-black cursor-pointer"></i>
<i class="ml-2.5 fa-brands fa-facebook-f text-slate-400 hover:text-blue-600 cursor-pointer"></i>
</div>
</div>
</div>
</div>
`;
break;
case 2:
content = `
<div onclick="event.target.remove()" class="max-w-2xl w-full mx-4 bg-white rounded-3xl overflow-hidden">
<div class="p-7">
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">NATIONAL</span>
<h2 class="mt-3 font-bold text-3xl">Bipartisan Infrastructure Bill Clears Senate with Strong Majority</h2>
<div class="text-xs mt-2 text-slate-500">By Sarah Kline • 2 hours ago</div>
<div class="mt-5 text-sm text-slate-700">
<p>The Senate passed the most significant infrastructure legislation in decades Tuesday night with a vote of 72-28. The bill allocates $1.2 trillion over five years for roads, bridges, broadband, and clean energy projects.</p>
<p class="mt-3">The measure represents a rare moment of bipartisanship in Washington. Key provisions include funding for 15,000 miles of new roads and 1,500 bridge replacements. The legislation is now expected to pass the House within the next two weeks.</p>
</div>
<button onclick="event.target.closest('.fixed').remove()" class="mt-5 px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-2xl">Return to homepage</button>
</div>
</div>
`;
break;
default:
content = `
<div onclick="event.target.remove()" class="max-w-2xl w-full mx-4 bg-white rounded-3xl overflow-hidden">
<div class="p-7">
<h2 class="font-bold text-2xl">Full article available to subscribers</h2>
<p class="mt-3 text-sm">Thank you for reading Atlas News. This story is part of our premium coverage.</p>
<div class="mt-6">
<button onclick="event.target.closest('.fixed').remove(); showSubscribeModal();" class="px-6 py-2.5 bg-emerald-700 text-white text-sm font-semibold rounded-2xl">Subscribe to continue</button>
</div>
</div>
</div>
`;
}
modal.innerHTML = content;
document.body.appendChild(modal);
}
// Subscribe modal functions
function showSubscribeModal() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function hideSubscribeModal(event) {
if (!event || event.target.id === 'subscribe-modal') {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
}
}
function subscribeUser() {
const modal = document.getElementById('subscribe-modal');
modal.innerHTML = `
<div class="max-w-md w-full mx-4 bg-white rounded-3xl p-8 text-center">
<div class="mx-auto w-14 h-14 flex items-center justify-center bg-emerald-100 rounded-full mb-4">
<i class="fa-solid fa-check text-emerald-600 text-3xl"></i>
</div>
<h3 class="font-bold text-xl">Welcome to Atlas News!</h3>
<p class="mt-2 text-sm text-slate-600">Thank you for subscribing. Your first briefing will arrive tomorrow morning.</p>
<button onclick="document.getElementById('subscribe-modal').classList.add('hidden'); document.getElementById('subscribe-modal').classList.remove('flex');"
class="mt-5 w-full bg-emerald-700 text-white py-3 rounded-2xl font-semibold text-sm">Return to Atlas News</button>
</div>
`;
// Auto-close after a few seconds
setTimeout(() => {
if (modal.classList.contains('flex')) {
modal.classList.remove('flex');
modal.classList.add('hidden');
modal.innerHTML = ''; // reset for future use
}
}, 5200);
}
// Submit tip modal
function showSubmitTipModal() {
const modal = document.createElement('div');
modal.className = `fixed inset-0 bg-black bg-opacity-60 z-[100] flex items-center justify-center`;
modal.innerHTML = `
<div onclick="event.target.remove()" class="max-w-md w-full mx-4">
<div onclick="event.stopImmediatePropagation()" class="bg-white rounded-3xl p-7">
<div class="flex justify-between">
<h3 class="font-bold text-xl">Submit a News Tip</h3>
<button onclick="this.closest('.fixed').remove()" class="text-3xl leading-none text-slate-400">×</button>
</div>
<p class="text-sm mt-2 text-slate-600">Our editorial team reviews all tips. Your identity will remain confidential.</p>
<div class="mt-5">
<div>
<label class="text-xs font-semibold">Your tip or story idea</label>
<textarea class="w-full border border-slate-300 px-4 py-3 rounded-2xl text-sm h-24 mt-1" placeholder="Describe what you know..."></textarea>
</div>
<div class="grid grid-cols-2 gap-3 mt-4">
<div>
<label class="text-xs font-semibold">Your name (optional)</label>
<input type="text" class="w-full border border-slate-300 px-4 py-2.5 rounded-2xl text-sm" placeholder="Jane Doe">
</div>
<div>
<label class="text-xs font-semibold">Email</label>
<input type="email" class="w-full border border-slate-300 px-4 py-2.5 rounded-2xl text-sm" placeholder="you@email.com">
</div>
</div>
<div class="mt-4">
<button onclick="submitTip(this)" class="w-full py-3 bg-slate-900 hover:bg-slate-800 transition-colors text-white font-semibold rounded-2xl text-sm">Submit Tip Securely</button>
</div>
<p class="text-center text-xs mt-3 text-slate-500">Atlas News protects sources. Learn more about our <span class="underline cursor-pointer">anonymous tip policy</span>.</p>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
}
function submitTip(buttonElement) {
const modalContent = buttonElement.closest('.bg-white');
modalContent.innerHTML = `
<div class="p-7 text-center">
<i class="fa-solid fa-check-circle text-emerald-600 text-5xl"></i>
<h4 class="mt-4 font-bold text-xl">Thank you.</h4>
<p class="mt-1 text-sm text-slate-600">Your tip has been received by our editorial team. We will follow up if we need more details.</p>
<button onclick="this.closest('.fixed').remove()" class="mt-6 px-7 py-2 bg-emerald-700 hover:bg-emerald-800 transition-colors text-white rounded-2xl text-sm font-semibold">Done</button>
</div>
`;
}
// Initialize everything
function initializePage() {
initializeTailwind();
// Set default city input value for convenience
const cityInput = document.getElementById('city-input');
if (cityInput) {
cityInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
getWeatherForecast();
}
});
// Optional: prefill demo
// cityInput.value = "Chicago";
}
// Keyboard accessibility hint
console.log('%c[Atlas News] Production-quality news/weather site initialized.', 'color:#64748b');
// Optional: Show a subtle welcome message once (in real life would be removed)
// For this task, no popups on load to keep it clean.
}
// Boot the page
window.onload = function() {
initializePage();
}
// Bonus: Allow closing modals with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === "Escape") {
const modals = document.querySelectorAll('.fixed');
if (modals.length > 0) {
modals[modals.length - 1].remove();
}
const subscribeModal = document.getElementById('subscribe-modal');
if (subscribeModal && !subscribeModal.classList.contains('hidden')) {
subscribeModal.classList.add('hidden');
subscribeModal.classList.remove('flex');
}
}
});
</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:43:27.102Z",
"url": "https://benchmark.aimac.invalid/9c81eb917caa0656aaf157cad172ea7e795026f614b0af9bc0e6204fb384dc15.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-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": []
},
{
"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-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": []
},
{
"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-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": []
},
{
"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": "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": []
},
{
"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": []
},
{
"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": "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": []
},
{
"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": []
},
{
"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": []
},
{
"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": "select-name",
"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 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": []
},
{
"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-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 class=\"bg-slate-50 text-slate-800\">",
"target": [
"body"
]
}
]
},
{
"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": "<html lang=\"en\" style=\"--accent: #0f172a;\">",
"target": [
"html"
]
}
]
},
{
"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 onclick=\"showSubscribeModal()\" class=\"hidden md:block px-5 py-2 text-sm font-semibold bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors\">\n Subscribe\n </button>",
"target": [
".hover\\:bg-slate-800"
]
}
]
},
{
"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 class=\"text-3xl font-bold tracking-tighter\">Atlas News</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"text-white text-5xl lg:text-6xl leading-[1.05] font-bold tracking-tighter heading-serif\">\n Historic Winter Storm<br> \n Bears Down on Midwest\n </h2>",
"target": [
".lg\\:text-6xl"
]
},
{
"html": "<h2 class=\"section-header\">Top National Headlines</h2>",
"target": [
"#national > .mb-6.items-end.px-1 > div > .section-header"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight tracking-tight\">Winter Storm Marcus: 14 States Under Warning as Snow Totals Mount</h3>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(1) > .p-5 > .leading-tight.tracking-tight.text-xl"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight tracking-tight\">Bipartisan Infrastructure Bill Clears Senate with Strong Majority</h3>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(2) > .p-5 > .leading-tight.tracking-tight.text-xl"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight tracking-tight\">California Wildfires Force Evacuations of 14,000 Residents</h3>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(3) > .p-5 > .leading-tight.tracking-tight.text-xl"
]
},
{
"html": "<h2 class=\"section-header\">Live Weather Insights</h2>",
"target": [
".mb-5 > div:nth-child(1) > .section-header"
]
},
{
"html": "<h4 class=\"font-semibold text-lg\">5-Day Forecast</h4>",
"target": [
".mb-4.justify-between.items-center > h4"
]
},
{
"html": "<h4 class=\"font-semibold\">Check Local Weather</h4>",
"target": [
".lg\\:flex-row > div:nth-child(1) > h4"
]
},
{
"html": "<h2 class=\"section-header\">Markets & Economy</h2>",
"target": [
"#business > .mb-6.items-end.px-1 > div > .section-header"
]
},
{
"html": "<h3 class=\"font-semibold text-lg\">Dow Jones surges on strong jobs report and cooling inflation data</h3>",
"target": [
".news-card.p-5.modern-shadow:nth-child(1) > .text-lg"
]
},
{
"html": "<h3 class=\"font-semibold text-lg\">Tech giant announces major layoffs as it pivots to AI focus</h3>",
"target": [
".news-card.p-5.modern-shadow:nth-child(2) > .text-lg"
]
},
{
"html": "<h3 class=\"font-semibold text-lg\">Oil prices climb as OPEC+ extends production cuts into Q3</h3>",
"target": [
".news-card.p-5.modern-shadow:nth-child(3) > .text-lg"
]
},
{
"html": "<h2 class=\"section-header\">Global Developments</h2>",
"target": [
".lg\\:col-span-8 > .mb-6.items-end.px-1 > div > .section-header"
]
},
{
"html": "<h4 class=\"font-bold\">EU leaders approve sweeping new AI regulatory framework</h4>",
"target": [
".gap-x-6 > div:nth-child(1) > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Japan's economy contracts for second consecutive quarter</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"font-semibold mb-4 flex items-center\">\n <span>Trending Now</span>\n </h4>",
"target": [
".h-full.p-5.modern-shadow > h4"
]
},
{
"html": "<h2 class=\"section-header\">In-Depth Reporting</h2>",
"target": [
"#investigations > .mb-6.items-end.px-1 > div > .section-header"
]
},
{
"html": "<h3 class=\"font-bold text-xl\">The Hidden Costs of America's Supply Chain Crisis</h3>",
"target": [
".gap-4.p-6.modern-shadow:nth-child(1) > .flex-1 > .text-xl"
]
},
{
"html": "<h3 class=\"font-bold text-xl\">How Climate Change Is Reshaping American Agriculture</h3>",
"target": [
".gap-4.p-6.modern-shadow:nth-child(2) > .flex-1 > .text-xl"
]
},
{
"html": "<h2 class=\"section-header\">Notable Past Coverage</h2>",
"target": [
"#archive > .mb-6.items-end.px-1 > div > .section-header"
]
},
{
"html": "<h3 class=\"font-semibold\">How one small town survived the 2021 Texas power crisis</h3>",
"target": [
".md\\:grid-cols-3.grid-cols-1.gap-6 > .overflow-hidden.news-card.modern-shadow:nth-child(1) > .p-5 > h3"
]
},
{
"html": "<h3 class=\"font-semibold\">The rise and fall of the U.S. housing market boom</h3>",
"target": [
".md\\:grid-cols-3.grid-cols-1.gap-6 > .overflow-hidden.news-card.modern-shadow:nth-child(2) > .p-5 > h3"
]
},
{
"html": "<h3 class=\"font-semibold\">Inside the first 72 hours of the global pandemic</h3>",
"target": [
".md\\:grid-cols-3.grid-cols-1.gap-6 > .overflow-hidden.news-card.modern-shadow:nth-child(3) > .p-5 > h3"
]
},
{
"html": "<h3 class=\"font-bold text-2xl\">Trusted by 1.4 million readers.</h3>",
"target": [
".text-2xl"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Sections</h5>",
"target": [
".md\\:col-span-2.col-span-2:nth-child(2) > h5"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Resources</h5>",
"target": [
".md\\:col-span-2.col-span-2:nth-child(3) > h5"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Contact</h5>",
"target": [
".md\\:col-span-3 > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #0f172a;\">",
"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": "#1e293b",
"bgColor": "#ffffff",
"contrastRatio": 14.62,
"fontSize": "22.5pt (30px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.62"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h1 class=\"text-3xl font-bold tracking-tighter\">Atlas News</h1>",
"target": [
"h1"
]
}
]
},
{
"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\" style=\"--accent: #0f172a;\">",
"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": "<input id=\"city-input\" type=\"text\" placeholder=\"Enter city (e.g., Chicago, Denver)\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-slate-400 outline-none rounded-2xl text-sm\">",
"target": [
"#city-input"
]
}
]
},
{
"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\" style=\"--accent: #0f172a;\">",
"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\" style=\"--accent: #0f172a;\">",
"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/142x52/0f172a/ffffff?text=ATLAS&font=montserrat\" alt=\"Atlas News Logo\" class=\"h-11 w-auto rounded-lg shadow-sm\">",
"target": [
".h-11"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"city-input\" type=\"text\" placeholder=\"Enter city (e.g., Chicago, Denver)\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-slate-400 outline-none rounded-2xl text-sm\">",
"target": [
"#city-input"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"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=\"#national\" class=\"nav-link font-medium text-slate-700 hover:text-slate-900\">National</a>",
"target": [
".nav-link.hover\\:text-slate-900[href$=\"#national\"]"
]
}
]
},
{
"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/142x52/0f172a/ffffff?text=ATLAS&font=montserrat\" alt=\"Atlas News Logo\" class=\"h-11 w-auto rounded-lg shadow-sm\">",
"target": [
".h-11"
]
}
]
},
{
"id": "target-size",
"impact": "serious",
"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-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=\"#national\" class=\"nav-link font-medium text-slate-700 hover:text-slate-900\">National</a>",
"target": [
".nav-link.hover\\:text-slate-900[href$=\"#national\"]"
]
}
]
}
],
"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": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": "bgOverlap",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element's background color could not be determined because it is overlapped by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>LIVE \u2022 BREAKING</span>",
"target": [
".inline-flex > span"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it is overlapped by another element"
}
]
}
],
"violations": [
{
"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": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow\">",
"target": [
".lg\\:grid-cols-3 > .overflow-hidden.news-card.modern-shadow:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">\u2022 14m ago</span>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(1) > .p-5 > .mb-3.gap-x-2.items-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow\">",
"target": [
".lg\\:grid-cols-3 > .overflow-hidden.news-card.modern-shadow:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">\u2022 2h ago</span>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(2) > .p-5 > .mb-3.gap-x-2.items-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow\">",
"target": [
".lg\\:grid-cols-3 > .overflow-hidden.news-card.modern-shadow:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">\u2022 Yesterday</span>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(3) > .p-5 > .mb-3.gap-x-2.items-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#059669",
"bgColor": "#ffffff",
"contrastRatio": 3.76,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"flex items-center bg-white px-3 py-1 rounded-2xl border\">",
"target": [
".py-1.px-3.border"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"ml-1.5 text-emerald-600 text-[10px]\">2m ago</span>",
"target": [
".ml-1\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-5 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-3xl font-light text-slate-400\">\u00b0F</span>",
"target": [
".font-light"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-7"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">/ 23\u00b0</span>",
"target": [
".hover\\:bg-slate-50.px-2.text-center:nth-child(1) > .gap-x-1.items-baseline.justify-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-7"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">/ 19\u00b0</span>",
"target": [
".hover\\:bg-slate-50.px-2.text-center:nth-child(2) > .gap-x-1.items-baseline.justify-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-7"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">/ 15\u00b0</span>",
"target": [
".hover\\:bg-slate-50.px-2.text-center:nth-child(3) > .gap-x-1.items-baseline.justify-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-7"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">/ 11\u00b0</span>",
"target": [
".hover\\:bg-slate-50.px-2.text-center:nth-child(4) > .gap-x-1.items-baseline.justify-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"xl:col-span-7 bg-white border border-slate-200 rounded-3xl p-6 modern-shadow\">",
"target": [
".xl\\:col-span-7"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-slate-400\">/ 20\u00b0</span>",
"target": [
".hover\\:bg-slate-50.px-2.text-center:nth-child(5) > .gap-x-1.items-baseline.justify-center > .text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#059669",
"bgColor": "#ffffff",
"contrastRatio": 3.76,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl p-5 modern-shadow\">",
"target": [
".news-card.p-5.modern-shadow:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-emerald-600 font-medium\">+1.8%</span>",
"target": [
".text-emerald-600.font-medium.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-slate-200 rounded-3xl p-5 modern-shadow h-full\">",
"target": [
".h-full.p-5.modern-shadow"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs text-slate-400 mt-0.5\">3.2k readers</div>",
"target": [
".gap-3.flex:nth-child(1) > .flex-1 > .mt-0\\.5.text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-slate-200 rounded-3xl p-5 modern-shadow h-full\">",
"target": [
".h-full.p-5.modern-shadow"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs text-slate-400 mt-0.5\">1.9k readers</div>",
"target": [
".gap-3.flex:nth-child(2) > .flex-1 > .mt-0\\.5.text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#ffffff",
"contrastRatio": 2.56,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-slate-200 rounded-3xl p-5 modern-shadow h-full\">",
"target": [
".h-full.p-5.modern-shadow"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs text-slate-400 mt-0.5\">4.8k readers</div>",
"target": [
".gap-3.flex:nth-child(3) > .flex-1 > .mt-0\\.5.text-slate-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b45309",
"bgColor": "#fde68a",
"contrastRatio": 4.03,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"news-badge bg-amber-200 text-amber-700 rounded-full\">DATA</span>",
"target": [
".bg-amber-200"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #b45309, background color: #fde68a, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-badge bg-amber-200 text-amber-700 rounded-full\">DATA</span>",
"target": [
".bg-amber-200"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #b45309, background color: #fde68a, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#059669",
"bgColor": "#ffffff",
"contrastRatio": 3.76,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow\">",
"target": [
".md\\:grid-cols-3.grid-cols-1.gap-6 > .overflow-hidden.news-card.modern-shadow:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-emerald-600 font-medium\">Award-winning</span>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(1) > .p-5 > .mb-1.justify-between.text-xs > .text-emerald-600.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#059669",
"bgColor": "#ffffff",
"contrastRatio": 3.76,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"news-card bg-white border border-slate-200 rounded-3xl overflow-hidden modern-shadow\">",
"target": [
".md\\:grid-cols-3.grid-cols-1.gap-6 > .overflow-hidden.news-card.modern-shadow:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-emerald-600 font-medium\">Most read</span>",
"target": [
".overflow-hidden.news-card.modern-shadow:nth-child(3) > .p-5 > .mb-1.justify-between.text-xs > .text-emerald-600.font-medium"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "link-name",
"impact": "serious",
"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 does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-600\"><i class=\"fa-brands fa-x-twitter\"></i></a>",
"target": [
".hover\\:text-slate-600.text-slate-400[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-600\"><i class=\"fa-brands fa-facebook-f\"></i></a>",
"target": [
".hover\\:text-slate-600.text-slate-400[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-600\"><i class=\"fa-brands fa-linkedin-in\"></i></a>",
"target": [
".hover\\:text-slate-600.text-slate-400[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-600\"><i class=\"fa-brands fa-instagram\"></i></a>",
"target": [
".hover\\:text-slate-600.text-slate-400[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
}
]
},
{
"id": "target-size",
"impact": "serious",
"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": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#business\" class=\"text-slate-600 hover:text-slate-800\">Business</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#business\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#national\" class=\"text-slate-600 hover:text-slate-800\">National</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#national\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#national\" class=\"text-slate-600 hover:text-slate-800\">National</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#national\"]"
]
},
{
"html": "<a href=\"#weather\" class=\"text-slate-600 hover:text-slate-800\">Weather</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#weather\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#business\" class=\"text-slate-600 hover:text-slate-800\">Business</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#business\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#business\" class=\"text-slate-600 hover:text-slate-800\">Business</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#business\"]"
]
},
{
"html": "<a href=\"#world\" class=\"text-slate-600 hover:text-slate-800\">World</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#world\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#weather\" class=\"text-slate-600 hover:text-slate-800\">Weather</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#weather\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#weather\" class=\"text-slate-600 hover:text-slate-800\">Weather</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#weather\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#world\" class=\"text-slate-600 hover:text-slate-800\">World</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#world\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Podcast</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#archive\" class=\"text-slate-600 hover:text-slate-800\">Archive</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#archive\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#archive\" class=\"text-slate-600 hover:text-slate-800\">Archive</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href$=\"#archive\"]"
]
},
{
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Data Center</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Podcast</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Podcast</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(2)"
]
},
{
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Newsletters</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Data Center</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.3,
"height": 16
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 18,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Data Center</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-600 hover:text-slate-800\">Newsletters</a>",
"target": [
".hover\\:text-slate-800.text-slate-600[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (205.3px by 16px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 3932
},
{
"y": 576,
"height": 3932
},
{
"y": 1152,
"height": 3932
},
{
"y": 1728,
"height": 3932
},
{
"y": 2304,
"height": 3932
},
{
"y": 2880,
"height": 3932
},
{
"y": 3212,
"height": 3932
}
],
"scans": 8,
"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 "News/Weather/Information" 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: "News/Weather/Information"
- Description: News outlets, weather forecasts, breaking news, and general information resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "News/Weather/Information" 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: "Archive", "Business", "National".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "News/Weather/Information" category. Consider themes similar to: "Feature Articles", "Current Events", "Breaking Stories".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "editorial", "investigative", "headline".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "Submit Tip", "Watch Weather".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "News/Weather/Information" sector. Ideas similar but not limited to: "weather radar".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "top headlines", "trending stories", "photo galleries".
- **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.