Add news page conventions and update news cards with new releases

Author: BytebustersDev

.cursor/rules/news-page.mdc

@@ -0,0 +1,60 @@
+---
+description: Conventions for editing venezia-marea/news.html – news cards, pills, images and release structure
+globs: venezia-marea/news.html
+alwaysApply: false
+---
+
+# News Page Conventions
+
+## When adding a new release
+
+1. Bump `<meta name="news-id" content="YYYY-MM-DD">` to the release date.
+2. Update both date tags (`data-lang="it"` and `data-lang="en"`).
+3. Insert new cards **at the top** of each language section (IT first, EN second — identical structure).
+4. Push old cards below a `<div class="release-divider">` separator.
+
+## Card anatomy
+
+```html
+<div class="news-card [news-card-featured]">
+  <div class="news-card-header">
+    <div class="pill [pill-fix|pill-improvement]">
+      <span class="pill-dot"></span>
+      <span>Label</span>
+    </div>
+    <h2>Section title</h2>
+  </div>
+
+  <!-- single-line entry -->
+  <p>Description text.</p>
+
+  <!-- OR multi-item entry -->
+  <ul class="news-bullet-list">
+    <li>Item one</li>
+    <li>Item two</li>
+  </ul>
+
+  <!-- optional screenshot — drop inside the card, after the text/list -->
+  <div style="margin-top: 16px; border-radius: 16px; overflow: hidden; max-width: 100%;">
+    <img src="assets/filename.png" alt="Description"
+         style="width: 100%; height: auto; display: block; object-fit: cover;" />
+  </div>
+</div>
+```
+
+## Pill variants
+
+| Class | Colour | Use for |
+|---|---|---|
+| *(default)* | Blue | New features |
+| `pill-fix` | Orange | Bug fixes |
+| `pill-improvement` | Purple | Improvements / refactors |
+
+Use `news-card-featured` on the card that has the most items or includes a screenshot.
+
+## Rules
+
+- **No emoji icons** in card headers — no `<span class="section-icon">` elements.
+- Card images live in `venezia-marea/assets/` and are referenced as `assets/filename`.
+- Always duplicate cards in both IT and EN sections; keep wording consistent.
+- Do not add new CSS classes unless strictly necessary; reuse existing variants.

venezia-marea/assets/new_settings.png

@@ -11,7 +11,7 @@
                If they match, the app skips showing the page; otherwise it shows
                it and persists the new news-id locally.
   -->
-  <meta name="news-id" content="2026-03-14">
+  <meta name="news-id" content="2026-05-06">
 
   <title>Novità – Venezia Marea</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -228,6 +228,97 @@
       text-align: left;
     }
 
+    /* pill variants */
+    .pill-fix {
+      background: rgba(234, 88, 12, 0.09);
+      color: #c2410c;
+    }
+    .pill-fix .pill-dot {
+      background: #f97316;
+      box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22);
+    }
+
+    .pill-improvement {
+      background: rgba(109, 40, 217, 0.09);
+      color: #6d28d9;
+    }
+    .pill-improvement .pill-dot {
+      background: #8b5cf6;
+      box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.22);
+    }
+
+    /* featured card (settings) */
+    .news-card-featured {
+      background: rgba(255, 255, 255, 0.82);
+      border-color: rgba(139, 92, 246, 0.18);
+      box-shadow:
+        0 8px 32px 0 rgba(109, 40, 217, 0.10),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+    }
+
+    .news-card-featured::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 28px;
+      background: linear-gradient(
+        135deg,
+        rgba(139, 92, 246, 0.06) 0%,
+        transparent 60%
+      );
+      pointer-events: none;
+    }
+
+    /* bullet list inside card */
+    .news-bullet-list {
+      margin: 10px 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .news-bullet-list li {
+      display: flex;
+      align-items: flex-start;
+      gap: 9px;
+      font-size: 0.93em;
+      color: var(--muted);
+      line-height: 1.45;
+    }
+
+    .news-bullet-list li::before {
+      content: "";
+      flex-shrink: 0;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #8b5cf6;
+      margin-top: 6px;
+    }
+
+    /* divider between release groups */
+    .release-divider {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin: 24px 0 8px;
+      color: #aaa;
+      font-size: 0.78em;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .release-divider::before,
+    .release-divider::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: rgba(0,0,0,0.08);
+    }
+
     /* language sections */
     [data-lang] { display: none; }
     [data-lang].visible { display: block; }
@@ -243,8 +334,8 @@ <h1>NEWS</h1>
         <p data-lang="en">Latest news from Venezia Marea</p>
       </div>
       <div class="date-lang-row">
-        <span class="news-date-tag" data-lang="it">14 marzo 2026</span>
-        <span class="news-date-tag" data-lang="en">March 14, 2026</span>
+        <span class="news-date-tag" data-lang="it">6 maggio 2026</span>
+        <span class="news-date-tag" data-lang="en">May 6, 2026</span>
         <div class="lang-switcher">
           <button id="btn-it" onclick="setLang('it')">IT</button>
           <button id="btn-en" onclick="setLang('en')">EN</button>
@@ -258,6 +349,58 @@ <h1>NEWS</h1>
     <div data-lang="it">
 
       <div class="news-list">
+
+        <!-- ── Impostazioni ── -->
+        <div class="news-card news-card-featured">
+          <div class="news-card-header">
+            <div class="pill pill-improvement">
+              <span class="pill-dot"></span>
+              <span>Miglioria</span>
+            </div>
+            <h2>Impostazioni</h2>
+          </div>
+          <ul class="news-bullet-list">
+            <li>Aggiunto selettore per l'unità di misura della velocità del vento</li>
+            <li>Aggiunto selettore per impostare la stazione meteo preferita</li>
+          </ul>
+          <div style="margin-top: 16px; border-radius: 16px; overflow: hidden; max-width: 100%;">
+            <img
+              src="assets/new_settings.png"
+              alt="Nuove impostazioni dell'app"
+              style="width: 100%; height: auto; display: block; object-fit: cover;"
+            />
+          </div>
+        </div>
+
+        <!-- ── Notifiche ── -->
+        <div class="news-card">
+          <div class="news-card-header">
+            <div class="pill pill-fix">
+              <span class="pill-dot"></span>
+              <span>Fix</span>
+            </div>
+            <h2>Notifiche</h2>
+          </div>
+          <p>
+            Fix al pannello notifiche: il selettore della frequenza ora si nasconde
+            correttamente senza dover ricaricare la pagina.
+          </p>
+        </div>
+
+        <!-- ── Webcam ── -->
+        <div class="news-card">
+          <div class="news-card-header">
+            <div class="pill pill-fix">
+              <span class="pill-dot"></span>
+              <span>Fix</span>
+            </div>
+            <h2>Webcam</h2>
+          </div>
+          <p>Fix e miglioramenti alla pagina delle webcam.</p>
+        </div>
+
+        <div class="release-divider">Aggiornamenti precedenti</div>
+
         <div class="news-card">
           <div class="news-card-header">
             <div class="pill">
@@ -346,6 +489,61 @@ <h2>Previsioni marea ancora più precise</h2>
     <div data-lang="en">
 
       <div class="news-list">
+
+        <!-- ── Settings ── -->
+        <div class="news-card news-card-featured">
+          <div class="news-card-header">
+            <div class="pill pill-improvement">
+              <span class="pill-dot"></span>
+              <span>Improvement</span>
+            </div>
+            <h2>Settings</h2>
+          </div>
+          <ul class="news-bullet-list">
+            <li>Added a wind speed unit selector</li>
+            <li>Added a selector to set your preferred weather station</li>
+            <li>Improved the floating button design</li>
+            <li>Added a dashboard customisation mockup</li>
+            <li>Refactored the Settings page with dedicated components</li>
+          </ul>
+          <div style="margin-top: 16px; border-radius: 16px; overflow: hidden; max-width: 100%;">
+            <img
+              src="assets/new_settings.png"
+              alt="New app settings"
+              style="width: 100%; height: auto; display: block; object-fit: cover;"
+            />
+          </div>
+        </div>
+
+        <!-- ── Notifications ── -->
+        <div class="news-card">
+          <div class="news-card-header">
+            <div class="pill pill-fix">
+              <span class="pill-dot"></span>
+              <span>Fix</span>
+            </div>
+            <h2>Notifications</h2>
+          </div>
+          <p>
+            Fixed the notification panel: the frequency selector now hides correctly
+            without requiring a page reload.
+          </p>
+        </div>
+
+        <!-- ── Webcams ── -->
+        <div class="news-card">
+          <div class="news-card-header">
+            <div class="pill pill-fix">
+              <span class="pill-dot"></span>
+              <span>Fix</span>
+            </div>
+            <h2>Webcams</h2>
+          </div>
+          <p>Bug fixes and improvements to the webcam page.</p>
+        </div>
+
+        <div class="release-divider">Previous updates</div>
+
         <div class="news-card">
           <div class="news-card-header">
             <div class="pill">