From 437b8ba3d98705d60d5854322b9adb817d0519e7 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 28 Jan 2026 16:06:19 +0100
Subject: [PATCH] Enhance cards: larger screenshots, lightbox, full-width
 styled vote slider

---
 wwwroot/app.js     | 29 ++++++++++++++-
 wwwroot/index.html |  3 +-
 wwwroot/styles.css | 91 +++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 110 insertions(+), 13 deletions(-)

diff --git a/wwwroot/app.js b/wwwroot/app.js
index 94c34b0..e30ba76 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -128,7 +128,7 @@ function renderVotes() {
     const footer = document.createElement("div");
     footer.className = "vote-controls";
     footer.innerHTML = `
-      <input type="range" min="0" max="10" value="${current}" data-id="${s.id}">
+      <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
       <span class="score" id="score-${s.id}">${current}</span>`;
     li.querySelector(".card-body").appendChild(footer);
     list.appendChild(li);
@@ -263,8 +263,11 @@ function buildCard(s, { showAuthor }) {
   const card = document.createElement("article");
   card.className = "game-card";
   const hasImage = !!s.screenshotUrl;
+  const visual = hasImage
+    ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="Open screenshot" style="background-image:url('${s.screenshotUrl}')"></button>`
+    : `<div class="card-visual"></div>`;
   card.innerHTML = `
-    <div class="card-visual" style="${hasImage ? `background-image:url('${s.screenshotUrl}')` : ''}"></div>
+    ${visual}
     <div class="card-body">
       <div class="card-title-row">
         <h3>${s.name}</h3>
@@ -275,9 +278,31 @@ function buildCard(s, { showAuthor }) {
       ${s.youtubeUrl ? `<a class="link" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
     </div>
   `;
+  if (hasImage) {
+    const btn = card.querySelector(".card-visual");
+    btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
+  }
   return card;
 }
 
+function openLightbox(url, title) {
+  const overlay = document.createElement("div");
+  overlay.className = "lightbox";
+  overlay.innerHTML = `
+    <div class="lightbox-content">
+      <button class="lightbox-close" aria-label="Close">✕</button>
+      <img src="${url}" alt="${title}" />
+      <p>${title || ""}</p>
+    </div>
+  `;
+  overlay.addEventListener("click", (e) => {
+    if (e.target.classList.contains("lightbox") || e.target.classList.contains("lightbox-close")) {
+      overlay.remove();
+    }
+  });
+  document.body.appendChild(overlay);
+}
+
 async function main() {
   setupHandlers();
   try {
diff --git a/wwwroot/index.html b/wwwroot/index.html
index c4af251..82576ce 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -16,7 +16,7 @@
   <main class="grid">
     <section class="card" id="actions-card">
       <div id="suggest-view" class="phase-view hidden">
-        <div class="card subcard name-box">
+        <div class="card subcard">
           <h3>Your Name</h3>
           <label class="stack">
             <span class="label">Display name</span>
@@ -92,3 +92,4 @@
   <script src="app.js"></script>
 </body>
 </html>
+
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index e5070e8..1dcc610 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -62,15 +62,6 @@ body {
   flex-wrap: wrap;
 }
 
-.name-box {
-  min-width: 220px;
-  max-width: 260px;
-  background: #0b1224;
-  border: 1px solid #1f2937;
-  padding: 10px;
-  border-radius: 10px;
-}
-
 .stack {
   display: flex;
   flex-direction: column;
@@ -134,10 +125,15 @@ button.ghost {
 }
 
 .card-visual {
-  height: 140px;
+  height: 200px;
   background: linear-gradient(135deg, #1d4ed8, #22c55e);
   background-size: cover;
   background-position: center;
+  cursor: pointer;
+  border: none;
+  width: 100%;
+  display: block;
+  padding: 0;
 }
 
 .card-body {
@@ -172,6 +168,43 @@ button.ghost {
 
 .results-grid .game-card { border-color: #2563eb44; }
 
+/* Slider */
+input[type="range"].full-slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #1d4ed8, #22c55e);
+  outline: none;
+  box-shadow: inset 0 0 0 1px #1f2937, 0 4px 12px rgba(0,0,0,0.25);
+}
+input[type="range"].full-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #e5e7eb;
+  border: 2px solid #0f172a;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
+}
+input[type="range"].full-slider::-moz-range-thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #e5e7eb;
+  border: 2px solid #0f172a;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
+}
+input[type="range"].full-slider::-moz-range-track {
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #1d4ed8, #22c55e);
+  border: 1px solid #1f2937;
+}
+
+.score { font-weight: 700; min-width: 36px; text-align: center; }
+
 .hidden { display: none !important; }
 
 .toast {
@@ -213,6 +246,44 @@ button.ghost {
   gap: 10px;
 }
 
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.lightbox-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  background: #0f172a;
+  padding: 12px;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
+}
+.lightbox-content img {
+  max-width: 100%;
+  max-height: 80vh;
+  display: block;
+  border-radius: 8px;
+}
+.lightbox-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #111827;
+  color: #e5e7eb;
+  border: 1px solid #1f2937;
+  border-radius: 999px;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
 .panel-header {
   display: flex;
   justify-content: space-between;