Spaces:

evalstate
/

testing-1-2-3

Running

App Files Files Community

evalstate commited on 14 days ago

Commit

a1dc1f6

1 Parent(s): 014c62d

Update newspaper homepage with new cat diorama headlines

Browse files

Files changed (1) hide show

news.html +127 -105

news.html CHANGED Viewed

@@ -3,181 +3,203 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>The Daily Purr — Cat Diorama Edition</title>
   <style>
     :root {
-      --paper: #f5f0e6;
-      --ink: #1f1b16;
-      --muted: #5f564a;
-      --rule: #b9aa95;
-      --accent: #8a2b1d;
     }
     * { box-sizing: border-box; }
     body {
       margin: 0;
-      background: #d8c8ad;
-      color: var(--ink);
       font-family: Georgia, "Times New Roman", serif;
       line-height: 1.45;
     }
     .paper {
       max-width: 1100px;
       margin: 20px auto;
-      padding: 20px 24px 30px;
       background: var(--paper);
-      border: 1px solid #9c8c74;
-      box-shadow: 0 6px 20px rgba(0,0,0,.18);
     }
     .masthead {
       text-align: center;
-      border-top: 4px double var(--ink);
-      border-bottom: 4px double var(--ink);
-      padding: 10px 0;
       margin-bottom: 14px;
     }
     .masthead h1 {
       margin: 0;
-      font-size: clamp(2rem, 7vw, 4rem);
-      letter-spacing: .05em;
       text-transform: uppercase;
     }
     .meta {
       display: flex;
       justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 8px;
-      border-bottom: 1px solid var(--rule);
-      color: var(--muted);
-      font-size: .95rem;
-      padding-bottom: 10px;
       margin-bottom: 12px;
     }
     .lead {
-      font-size: 1.1rem;
-      padding: 10px 12px;
-      border-left: 4px solid var(--accent);
-      background: #efe7d8;
-      margin-bottom: 18px;
     }
     .grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 16px;
     }
     article {
-      border: 1px solid var(--rule);
-      background: #f9f5ec;
       display: flex;
       flex-direction: column;
     }
-    article img {
-      width: 100%;
-      height: 220px;
-      object-fit: cover;
-      border-bottom: 1px solid var(--rule);
-    }
-    .story {
-      padding: 12px;
     }
     .kicker {
       color: var(--accent);
-      text-transform: uppercase;
-      letter-spacing: .07em;
-      font-size: .75rem;
-      margin-bottom: 6px;
       font-weight: bold;
     }
-    h2 {
-      margin: 0 0 8px;
-      font-size: 1.45rem;
-      line-height: 1.2;
     }
-    .real-headline {
-      font-size: .95rem;
       color: var(--muted);
-      border-top: 1px dashed var(--rule);
-      padding-top: 8px;
-      margin-top: 8px;
     }
     .source {
-      margin-top: 8px;
-      font-size: .92rem;
-    }
-    a { color: #113f67; }
-    .footer {
-      margin-top: 18px;
-      border-top: 1px solid var(--rule);
       padding-top: 10px;
       color: var(--muted);
-      font-size: .9rem;
-      text-align: center;
     }
   </style>
 </head>
 <body>
   <main class="paper">
     <header class="masthead">
-      <h1>The Daily Purr</h1>
     </header>
-    <div class="meta">
-      <span>Thursday, February 26, 2026</span>
-      <span>Special Diorama Desk</span>
-      <span>Price: 3 Treats</span>
-    </div>
     <section class="lead">
-      <strong>Front Page Brief:</strong> Three recent, non-sensitive headlines reimagined as handcrafted cat dioramas.
-      Yes, it’s serious journalism. No, the editors won’t apologize for the puns.
     </section>
     <section class="grid">
       <article>
-        <img src="assets/cat-headline-1.webp" alt="Cat astronaut diorama celebrating a Crew-12 launch" />
-        <div class="story">
-          <div class="kicker">Space Beat</div>
-          <h2>Paws in Orbit: Crew-12 Has Liftoff</h2>
-          <p>
-            Tiny helmets, big dreams: our feline flight crew marks a successful mission moment with paws raised high.
-            One small meow for cat, one giant leap for cattitude.
-          </p>
-          <p class="real-headline"><strong>Real headline:</strong> “NASA’s SpaceX Crew-12 Launches to International Space Station” (February 13, 2026).</p>
-          <p class="source">Source: <a href="https://www.nasa.gov/news-release/nasas-spacex-crew-12-launches-to-international-space-station/" target="_blank" rel="noopener noreferrer">NASA</a></p>
-        </div>
       </article>
       <article>
-        <img src="assets/cat-headline-2.webp" alt="Cat rocket diorama inspired by Ariane 6 launch" />
-        <div class="story">
-          <div class="kicker">Europe Desk</div>
-          <h2>Fur-Boosted Launch: Purr-iane 6 Roars</h2>
-          <p>
-            Four boosters, full drama, and a runway of whiskered engineers.
-            The mission style is clear: if it flies, it purrs.
-          </p>
-          <p class="real-headline"><strong>Real headline:</strong> “More boosters, more power: Ariane 6 lifts off with four boosters for the first time” (February 12, 2026).</p>
-          <p class="source">Source: <a href="https://www.esa.int/Newsroom/Press_Releases/More_boosters_more_power_Ariane_6_lifts_off_with_four_boosters_for_the_first_time" target="_blank" rel="noopener noreferrer">European Space Agency (ESA)</a></p>
-        </div>
       </article>
       <article>
-        <img src="assets/cat-headline-3.webp" alt="Cat red carpet diorama inspired by BAFTA winners" />
-        <div class="story">
-          <div class="kicker">Culture & Arts</div>
-          <h2>Cat-FTA Night: Tuxedo Tails Take the Carpet</h2>
-          <p>
-            Flashbulbs pop, bow ties gleam, and the velvet ropes are strictly paws-only.
-            Awards season has never looked this whisker-sharp.
-          </p>
-          <p class="real-headline"><strong>Real headline:</strong> AP coverage of the 2026 BAFTA winners, including major wins for <em>Conclave</em> and <em>The Brutalist</em> (published February 22, 2026).</p>
-          <p class="source">Source: <a href="https://apnews.com/" target="_blank" rel="noopener noreferrer">AP News</a></p>
-        </div>
       </article>
     </section>
-    <div class="footer">
-      Generated with cat-safe puns and a strict no-drama newsroom policy.
-    </div>
   </main>
 </body>
 </html>

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