testing-1-2-3 / news.html
evalstate
Update newspaper homepage with new cat diorama headlines
a1dc1f6
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Daily Purrspective</title>
<style>
:root {
--paper: #f7f2e8;
--ink: #1b1b1b;
--muted: #5c5c5c;
--rule: #2e2e2e;
--accent: #7a2f1b;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
background: #d9d2c3;
color: var(--ink);
line-height: 1.45;
}
.paper {
max-width: 1100px;
margin: 20px auto;
background: var(--paper);
border: 1px solid #b8b1a2;
box-shadow: 0 10px 30px rgba(0,0,0,.2);
padding: 18px 22px 30px;
}
.masthead {
text-align: center;
border-top: 4px double var(--rule);
border-bottom: 4px double var(--rule);
padding: 10px 0 12px;
margin-bottom: 14px;
}
.masthead h1 {
font-size: clamp(2rem, 6vw, 4rem);
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.tagline {
margin-top: 4px;
font-size: 0.95rem;
color: var(--muted);
font-style: italic;
}
.meta {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.9rem;
border-bottom: 1px solid #b8b1a2;
padding-bottom: 8px;
margin-bottom: 12px;
}
.lead {
column-count: 2;
column-gap: 24px;
column-rule: 1px solid #c4bcac;
margin-bottom: 16px;
}
.lead h2 {
column-span: all;
margin: 0 0 8px;
font-size: 1.6rem;
line-height: 1.2;
border-bottom: 2px solid var(--rule);
padding-bottom: 6px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
article {
border: 1px solid #b8b1a2;
background: #fbf8f1;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
article h3 {
margin: 0;
font-size: 1.2rem;
line-height: 1.25;
}
.kicker {
color: var(--accent);
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .5px;
}
.dek {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
img {
width: 100%;
border: 1px solid #b7af9f;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.caption {
font-size: 0.85rem;
color: var(--muted);
font-style: italic;
margin: 0;
}
.source {
margin-top: auto;
font-size: 0.85rem;
border-top: 1px dashed #b8b1a2;
padding-top: 6px;
}
a { color: #102a61; }
footer {
margin-top: 16px;
border-top: 2px solid var(--rule);
padding-top: 10px;
font-size: 0.84rem;
color: var(--muted);
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
.lead { column-count: 1; }
}
</style>
</head>
<body>
<main class="paper">
<header class="masthead">
<h1>The Daily Purrspective</h1>
<div class="tagline">All the news that's fit to mew • Cat Diorama Special Edition</div>
</header>
<section class="meta">
<div><strong>Edition:</strong> Thursday, February 26, 2026</div>
<div><strong>Desk:</strong> Science, Space & Earth</div>
<div><strong>Mood:</strong> Pawsitive</div>
</section>
<section class="lead">
<h2>Top 3 Recent Non-Sensitive Headlines — with handcrafted cat diorama art</h2>
<p>
Welcome to our mini newsroom where the stories are real and the whiskers are editorial. Below are three recent,
non-sensitive headlines from reputable outlets, illustrated with custom cat-themed diorama images. Think of it as
journalism with a side of paws and perspective.
</p>
<p>
Today's cover concepts include skywatching kitties, launch-ready space cats, and globe-trotting feline scientists.
We call it <em>purr-iodical reporting</em>.
</p>
</section>
<section class="grid">
<article>
<div class="kicker">Sky Watch</div>
<h3>Planetary Parade Paws Into View</h3>
<p class="dek">AP reports six planets visible in late February skies — a cosmic catwalk, if you will.</p>
<img src="https://evalstate-flux1-schnell.hf.space/--replicas/pnlns/gradio_api/file=/tmp/gradio/f760903506924786d592277a638230286e9bef329bf99470dedefd6e2eee535e/image.webp" alt="Cats watching a miniature planetary parade diorama" />
<p class="caption">Illustration: "Purrlanetary alignment" in a shoebox observatory.</p>
<p class="source">
<strong>Headline source:</strong>
<a href="https://apnews.com/article/6-planets-parade-sky-venus-saturn-jupiter-mars-mercury-neptune-5ca2f31d65f5b4fda1540f4ec3f9f5f2" target="_blank" rel="noopener">Associated Press (Feb 23, 2026)</a>
</p>
</article>
<article>
<div class="kicker">Launch Desk</div>
<h3>NASA’s SpaceX Crew-12 Launches to ISS</h3>
<p class="dek">Crew-12 heads station-side as mission momentum continues. Liftoff? More like lift-<em>paw</em>.</p>
<img src="https://evalstate-flux1-schnell.hf.space/--replicas/pnlns/gradio_api/file=/tmp/gradio/9d978f55b45e11551aa14338835d4df4d65f9839bb2a791aa878fc9a0ff635a4/image.webp" alt="Cat astronauts beside a miniature rocket launch" />
<p class="caption">Illustration: Tiny suits, big mission energy.</p>
<p class="source">
<strong>Headline source:</strong>
<a href="https://www.nasa.gov/news-release/nasas-spacex-crew-12-launches-to-international-space-station/" target="_blank" rel="noopener">NASA (Feb 20, 2026)</a>
</p>
</article>
<article>
<div class="kicker">Earth Beat</div>
<h3>NASA Selects Two Earth System Explorer Missions</h3>
<p class="dek">Two missions chosen to deepen Earth-system science — a globe-spanning story with claws for curiosity.</p>
<img src="https://evalstate-flux1-schnell.hf.space/--replicas/pnlns/gradio_api/file=/tmp/gradio/aa542f592347ef9fd902816b002db624b9eef5a0e854b61994b12ee49ac191de/image.webp" alt="Cats studying globe and satellite diorama" />
<p class="caption">Illustration: Feline researchers monitor a tiny Earth from mission control.</p>
<p class="source">
<strong>Headline source:</strong>
<a href="https://www.nasa.gov/news-release/nasa-selects-two-earth-system-explorer-missions/" target="_blank" rel="noopener">NASA (Feb 12, 2026)</a>
</p>
</article>
</section>
<footer>
Built as a static newspaper-style homepage with generated cat-diorama visuals. Content intentionally avoids sensitive or offensive topics.
</footer>
</main>
</body>
</html>