Added screenshot where thhey belongs to at the project hp

website/src/_data/screenshots.js

@@ -1,23 +1,32 @@
 module.exports = [
     {
-        id: "main-window",
-        title: "Main Window",
-        image: "/assets/screenshots/main-window.png",
-        alt: "KST4Contest ON4KST contest chat client main window",
-        caption: "Contest-oriented ON4KST chat workflow with candidate awareness."
+        id: "main-window-light",
+        title: "Main window · Light theme",
+        image: "/assets/completeViewLight.png",
+        alt: "KST4Contest main window in the light theme with ON4KST chat, station filters, priority candidates and sked controls",
+        caption: "The complete contest view brings chat messages, active bands, filters and priority candidates together."
     },
     {
-        id: "priority-candidates",
-        title: "Priority Candidates",
-        image: "/assets/screenshots/priority-candidates.png",
-        alt: "Priority candidate list in KST4Contest",
-        caption: "Score-based candidate ranking for faster operator decisions."
+        id: "main-window-dark",
+        title: "Main window · Dark theme",
+        image: "/assets/completeViewDark.png",
+        alt: "KST4Contest main window in the dark theme with ON4KST chat, station filters, priority candidates and sked controls",
+        caption: "The same operating view in the dark theme, including worked status, candidate priorities and message preparation."
     },
     {
         id: "timeline",
-        title: "Timeline View",
-        image: "/assets/screenshots/timeline.png",
-        alt: "KST4Contest AP timeline view",
-        caption: "Timeline support for AP windows and candidate timing."
+        title: "AP and sked timeline",
+        image: "/assets/timeline.png",
+        alt: "KST4Contest timeline showing scheduled contacts and Aircraft Scatter crossing windows",
+        caption: "Skeds and Aircraft Scatter opportunities share one time axis, making upcoming operating windows easier to coordinate.",
+        wide: true
+    },
+    {
+        id: "airscout",
+        title: "KST4Contest with AirScout",
+        image: "/assets/complete_incl_AS.png",
+        alt: "KST4Contest main window alongside AirScout path and aircraft information",
+        caption: "AirScout adds path and aircraft information while KST4Contest keeps the related chat and station context visible.",
+        wide: true
     }
 ];

website/src/_layouts/base.njk

@@ -61,6 +61,7 @@
         <p><a href="/features/">Features</a></p>
         <p><a href="/download/">Download</a></p>
         <p><a href="/manual/">Manual</a></p>
+        <p><a href="/background/">Background</a></p>
         <p><a href="/roadmap/">Roadmap</a></p>
       </div>
       <div>

website/src/assets/css/main.css

@@ -641,18 +641,31 @@ a:hover {
     margin-top: 30px;
 }
 
-.screenshot-placeholder {
-    display: grid;
-    place-items: center;
-    min-height: 180px;
+.screenshot-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.screenshot-card--wide {
+    grid-column: 1 / -1;
+}
+
+.screenshot-link {
+    display: block;
     margin-bottom: 16px;
     border-radius: 18px;
-    background:
-            linear-gradient(135deg, rgba(56, 189, 248, 0.20), rgba(168, 85, 247, 0.20)),
-            rgba(2, 6, 23, 0.7);
+    overflow: hidden;
     border: 1px solid var(--border);
-    color: white;
-    font-weight: 800;
+    background: rgba(2, 6, 23, 0.7);
+}
+
+.screenshot-image {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.screenshot-card h3 {
+    margin-bottom: 8px;
 }
 
 .cta-panel {
@@ -718,6 +731,14 @@ code {
         align-items: flex-start;
         flex-direction: column;
     }
+
+    .screenshot-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .screenshot-card--wide {
+        grid-column: auto;
+    }
 }
 
 @media (prefers-reduced-motion: no-preference) {

website/src/download/index.njk

@@ -212,6 +212,45 @@ description: Download the latest stable KST4Contest packages for Windows, Linux
   </div>
 </section>
 
+<section class="section">
+  <div class="section-heading">
+    <p class="eyebrow">Conference papers</p>
+    <h2>Background from GHz-Tagung Dorsten</h2>
+    <p>
+      These historical conference papers document KST4Contest at the time of the 2025 and 2026 talks.
+      They provide project background, not a complete description of the current feature set.
+    </p>
+  </div>
+
+  <div class="grid">
+    <article class="card content-card">
+      <h3>GHz-Tagung 2025</h3>
+      <p>
+        How KST4Contest grew from practical contest operation and addressed limitations of conventional
+        chat clients.
+      </p>
+      <div class="actions">
+        <a class="button secondary" href="/assets/papers/kst4contest-ghz-tagung-2025-de.pdf">Download German PDF</a>
+        <a class="button secondary" href="/assets/papers/kst4contest-ghz-tagung-2025-en.pdf">Download English PDF</a>
+      </div>
+      <p><a href="/background/#paper-2025">Background and source details →</a></p>
+    </article>
+
+    <article class="card content-card">
+      <h3>GHz-Tagung 2026</h3>
+      <p>
+        How archived ON4KST chat data was evaluated and how the findings influenced later KST4Contest
+        functions.
+      </p>
+      <div class="actions">
+        <a class="button secondary" href="/assets/papers/kst4contest-ghz-tagung-2026-de.pdf">Download German PDF</a>
+        <a class="button secondary" href="/assets/papers/kst4contest-ghz-tagung-2026-en.pdf">Download English PDF</a>
+      </div>
+      <p><a href="/background/#paper-2026">Background and source details →</a></p>
+    </article>
+  </div>
+</section>
+
 <section class="section">
   <div class="cta-panel">
     <p class="eyebrow">Choosing a package</p>

website/src/screenshots/index.njk

@@ -14,14 +14,25 @@ description: Screenshots of KST4Contest, the contest-optimized ON4KST chat clien
 </section>
 
 <section class="section">
-  <div class="grid">
-    {% for shot in screenshots %}
-      <article class="card screenshot-card">
-        <div class="screenshot-placeholder">
-          <span>{{ shot.title }}</span>
+  <div class="section-heading">
+    <p class="eyebrow">Four working views</p>
+    <h2>From chat overview to Aircraft Scatter timing</h2>
+    <p>
+      These screenshots were captured in a test environment. Version-like text inside chat messages is
+      test data, not an announcement of a published KST4Contest version.
+    </p>
   </div>
+
+  <div class="grid screenshot-grid">
+    {% for shot in screenshots %}
+      <article class="card screenshot-card{% if shot.wide %} screenshot-card--wide{% endif %}">
+        <a class="screenshot-link" href="{{ shot.image }}" target="_blank" rel="noopener"
+           aria-label="Open {{ shot.title }} in full size">
+          <img class="screenshot-image" src="{{ shot.image }}" alt="{{ shot.alt }}" loading="lazy" decoding="async">
+        </a>
         <h3>{{ shot.title }}</h3>
         <p>{{ shot.caption }}</p>
+        <p><a href="{{ shot.image }}" target="_blank" rel="noopener">Open full-size image →</a></p>
       </article>
     {% endfor %}
   </div>

website/test/homepage.test.js

@@ -60,3 +60,61 @@ test("homepage contains one selected function grid and a complete-overview link"
     assert.match(source, /href="\/features\/"[^>]*>Open the complete function overview/);
     assert.doesNotMatch(source, /Observe|Evaluate|>Act<|One workflow, shared context/);
 });
+
+test("screenshot page uses the four approved originals as full-size links", () => {
+    const page = fs.readFileSync(
+        path.join(__dirname, "../src/screenshots/index.njk"),
+        "utf8"
+    );
+    const css = fs.readFileSync(
+        path.join(__dirname, "../src/assets/css/main.css"),
+        "utf8"
+    );
+    const screenshots = require("../src/_data/screenshots.js");
+
+    assert.equal(screenshots.length, 4);
+    assert.deepEqual(
+        screenshots.map(({ image }) => image),
+        [
+            "/assets/completeViewLight.png",
+            "/assets/completeViewDark.png",
+            "/assets/timeline.png",
+            "/assets/complete_incl_AS.png"
+        ]
+    );
+    assert.ok(screenshots.every(({ alt, caption }) => alt && caption));
+    assert.equal(screenshots.find(({ id }) => id === "timeline").wide, true);
+    assert.doesNotMatch(JSON.stringify(screenshots), /Priority Candidates/);
+    assert.match(page, /href="{{ shot\.image }}"[\s\S]*<img[^>]*src="{{ shot\.image }}"/);
+    assert.match(page, /Version-like text inside chat messages is[\s\S]*not an announcement/);
+    assert.match(css, /\.screenshot-image\s*\{[\s\S]*?width:\s*100%;[\s\S]*?height:\s*auto;/);
+    assert.match(css, /\.screenshot-card--wide\s*\{\s*grid-column:\s*1\s*\/\s*-1;/);
+});
+
+test("footer and download page expose background and conference papers", () => {
+    const layout = fs.readFileSync(
+        path.join(__dirname, "../src/_layouts/base.njk"),
+        "utf8"
+    );
+    const download = fs.readFileSync(
+        path.join(__dirname, "../src/download/index.njk"),
+        "utf8"
+    );
+
+    assert.match(layout, /<p><a href="\/background\/">Background<\/a><\/p>/);
+    for (const name of [
+        "kst4contest-ghz-tagung-2025-de.pdf",
+        "kst4contest-ghz-tagung-2025-en.pdf",
+        "kst4contest-ghz-tagung-2026-de.pdf",
+        "kst4contest-ghz-tagung-2026-en.pdf"
+    ]) {
+        assert.match(download, new RegExp(`/assets/papers/${name.replaceAll(".", "\\.")}`));
+    }
+    assert.match(download, /href="\/background\/#paper-2025"/);
+    assert.match(download, /href="\/background\/#paper-2026"/);
+    assert.match(download, /historical conference papers[\s\S]*not a complete description of the current feature set/);
+    assert.ok(
+        download.indexOf("Background from GHz-Tagung Dorsten") >
+        download.indexOf('<div class="channel-panel" data-channel="nightly">')
+    );
+});