From cf7950bd5bdeebe64a7b5e93893ebabd332c23ab Mon Sep 17 00:00:00 2001 From: huzaifaasim017 Date: Fri, 23 Oct 2026 01:33:49 +0500 Subject: [PATCH 1/2] Showcase playback modes and strengthen app branding --- web/README.md | 2 +- web/index.html | 9 ++++++--- web/scripts/check.mjs | 1 + web/showcase.css | 24 ++++++++++++++++++++---- 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/web/README.md b/web/README.md index f6d54ad..ee9e74d 100644 --- a/web/README.md +++ b/web/README.md @@ -2,7 +2,7 @@ A two-page website for [LinuxPlayer](https://github.com/teamkrope/linuxplayer). It uses real application screenshots, the final bird mark shared with the desktop app, and an illustrative frame for the canvas demo. The site is self-contained and has no runtime or build dependencies beyond Node.js. -`index.html` presents the player as a product showcase. Shared components and the download page use `styles.css`; homepage presentation lives in `showcase.css`. `motion.js` handles blur reveals and subtle scene movement, with a reduced-motion fallback. Keep the real screenshots and interactive gallery/ratio demo intact when changing the layout. +`index.html` presents the player as a product showcase. Shared components and the download page use `styles.css`; homepage presentation lives in `showcase.css`. The first feature scene uses cropped views of two real app captures; the hero and download call to action repeat the app mark at larger sizes. `motion.js` handles blur reveals and subtle scene movement, with a reduced-motion fallback. Keep the real screenshots and interactive gallery/ratio demo intact when changing the layout. ## Preview locally diff --git a/web/index.html b/web/index.html index a86947d..bbe1672 100644 --- a/web/index.html +++ b/web/index.html @@ -34,13 +34,16 @@
-
LinuxPlayer

Get lost in the video.
Not the player.

Beautiful playback, built for Linux.

+
LinuxPlayer app icon

Get lost in the video.
Not the player.

Beautiful playback, built for Linux.

Actual LinuxPlayer 1.0 window playing a local video with controls visible
Download Explore the player
The viewing experience

Only the video,
when you want it.

-
Actual LinuxPlayer screenshot with playback controls hidden
+
+
Actual LinuxPlayer playback with the controls hidden
Video only
+
Actual LinuxPlayer playback options panel
Controls, close by
+
01

Controls on demand.

They disappear as playback begins.

02

Stay in the picture.

Lock the interface to show only video.

03

Every action feels clear.

Subtle feedback for play, pause, and seeking.

@@ -56,7 +59,7 @@

Your video stays untouched. Feature guide

A closer look

See it in action.

-

Install LinuxPlayer.

64-bit x86 .deb package

Download ↓Other install options →
Terminal install
curl -fsSLo /tmp/linuxplayer-install.sh \
+    
Install LinuxPlayer.
64-bit x86 .deb package
Download ↓Other install options →
Terminal install
curl -fsSLo /tmp/linuxplayer-install.sh \
   https://github.com/teamkrope/linuxplayer/releases/latest/download/install.sh
 bash /tmp/linuxplayer-install.sh

     
Open source.
GPL-3.0-or-later · Qt Quick · libmpv
GitHub repositoryContribution guide
Report an issueJoin a discussionRead the architecture

diff --git a/web/scripts/check.mjs b/web/scripts/check.mjs
index d2cfed3..c033fa8 100644
--- a/web/scripts/check.mjs
+++ b/web/scripts/check.mjs
@@ -12,6 +12,7 @@ if (html.includes('Start screen') || script.includes('empty-v1-coast.png')) thro
 if (![html, download].every(page => page.includes('motion.js') && page.includes('footer-line'))) throw new Error('Shared motion or compact footer missing');
 if (!html.includes('showcase.css') || !html.includes('class="hero-shot"') || !html.includes('data-scroll-scene')) throw new Error('Product showcase is missing');
 if (!(html.indexOf('class="hero-copy"') < html.indexOf('class="hero-shot"') && html.indexOf('class="hero-shot"') < html.indexOf('class="hero-actions"'))) throw new Error('Hero must show title, product image, then actions');
+if (!html.includes('class="focus-gallery"') || !html.includes('class="focus-shot focus-shot-controls"') || !html.includes('class="hero-mark"') || !html.includes('class="download-mark"')) throw new Error('Showcase image mosaic or prominent brand marks missing');
 for (const text of ['LinuxPlayer', 'id="download"', 'id="features"', 'id="preview"', 'id="open-source"', 'application/ld+json', 'releases/latest/download/install.sh']) {
   if (!html.includes(text)) throw new Error(`Missing required site content: ${text}`);
 }
diff --git a/web/showcase.css b/web/showcase.css
index 285bd56..df8caa9 100644
--- a/web/showcase.css
+++ b/web/showcase.css
@@ -10,6 +10,8 @@
 .hero { position: relative; overflow: hidden; padding: 116px 0 126px; background: radial-gradient(ellipse 55% 35% at 50% 50%, rgba(62, 171, 160, .15), transparent 90%), #07131d; }
 .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
 .hero-copy { padding: 0; text-align: center; max-width: 1050px; position: relative; z-index: 1; }
+.hero-mark, .download-mark { display: block; object-fit: cover; background: white; border: 1px solid #d8f3f0; box-shadow: 0 20px 55px #0007, 0 0 55px #64d5c63d; }
+.hero-mark { width: 104px; height: 104px; margin: 0 auto 10px; padding: 4px; border-radius: 26px; }
 .hero-copy h1 { font-size: clamp(62px, 8.1vw, 120px); line-height: .99; letter-spacing: -.078em; max-width: none; margin: 24px 0 24px; font-weight: 650; }
 .hero-copy p { max-width: none; color: #adc1c3; font-size: clamp(17px, 2vw, 21px); }
 .hero-shot { width: min(100%, 1160px); margin: 76px auto 0; position: relative; isolation: isolate; }
@@ -25,8 +27,14 @@
 .focus-layout { display: grid; justify-items: center; }
 .focus-intro { max-width: 920px; text-align: center; margin-bottom: 65px; }
 .focus-intro h2 { font-size: clamp(53px, 7.1vw, 104px); line-height: 1.03; letter-spacing: -.07em; margin: 23px 0 0; }
-.focus-visual { width: 100%; max-width: 1130px; overflow: hidden; position: relative; border: 1px solid #56716c; border-radius: 23px; box-shadow: 0 40px 95px #0008; background: #080f16; }
-.focus-visual img { width: 100%; transform: translateY(var(--scene-shift, 0px)) scale(1.035); will-change: transform; }
+.focus-gallery { width: 100%; max-width: 1130px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 20px; }
+.focus-shot { position: relative; overflow: hidden; margin: 0; border: 1px solid #56716c; border-radius: 23px; background: #080f16; box-shadow: 0 35px 80px #0008; }
+.focus-shot-video { aspect-ratio: 1.24; }
+.focus-shot-controls { aspect-ratio: .79; }
+.focus-shot img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--scene-shift, 0px)) scale(1.045); will-change: transform; }
+.focus-shot-video img { object-position: 38% center; }
+.focus-shot-controls img { object-position: right center; }
+.focus-shot figcaption { position: absolute; inset: auto 0 0; padding: 54px 26px 23px; background: linear-gradient(transparent, #07121bd9); color: white; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
 .focus-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; width: 100%; max-width: 1130px; margin-top: 66px; }
 .focus-points article { padding-top: 24px; border-top: 1px solid #4f6668; }
 .focus-points span { display: block; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; margin-bottom: 19px; }
@@ -63,6 +71,7 @@
 .download-section { background: radial-gradient(circle at 50% 10%, #2a5d61, #15343f 48%, #0f2631 100%); border-block-color: #4d7775; }
 .download-grid { display: flex; flex-direction: column; align-items: center; gap: 58px; }
 .download-grid > div:first-child { text-align: center; }
+.download-mark { width: 100px; height: 100px; margin: 0 auto 32px; padding: 4px; border-radius: 25px; }
 .download-grid h2 { font-size: clamp(62px, 7.6vw, 108px); letter-spacing: -.07em; line-height: 1.02; margin-bottom: 22px; }
 .download-grid p { max-width: none; font-size: 16px; }
 .download-actions { justify-content: center; margin-top: 32px; }
@@ -103,7 +112,8 @@
   .section { padding-block: 105px; }
   .focus-intro { margin-bottom: 42px; }
   .focus-intro h2, .canvas-head h2, .preview-section .section-head h2 { font-size: clamp(51px, 9vw, 72px); }
-  .focus-visual { border-radius: 15px; }
+  .focus-gallery { gap: 13px; }
+  .focus-shot { border-radius: 16px; }
   .focus-points { gap: 20px; margin-top: 48px; }
   .focus-points h3 { font-size: 20px; }
   .pip-grid { grid-template-columns: 1fr; }
@@ -123,6 +133,11 @@
   .hero-actions .button { width: 100%; }
   .section { padding-block: 88px; }
   .focus-intro h2, .canvas-head h2, .preview-section .section-head h2 { font-size: 49px; }
+  .hero-mark { width: 80px; height: 80px; border-radius: 21px; margin-bottom: 4px; }
+  .focus-gallery { grid-template-columns: 1.1fr .9fr; gap: 9px; }
+  .focus-shot-video { aspect-ratio: .88; }
+  .focus-shot-controls { aspect-ratio: .72; }
+  .focus-shot figcaption { padding: 37px 12px 12px; font-size: 11px; }
   .focus-points { grid-template-columns: 1fr; gap: 25px; }
   .focus-points article { padding-top: 18px; }
   .focus-points span { margin-bottom: 8px; }
@@ -141,11 +156,12 @@
   .gallery-image-wrap { min-height: 240px; }
   .download-grid { gap: 36px; }
   .download-grid h2 { font-size: 54px; }
+  .download-mark { width: 82px; height: 82px; border-radius: 20px; margin-bottom: 25px; }
   .download-actions { display: grid; gap: 14px; justify-items: center; }
   .download-actions .button { min-width: 180px; }
   .download-grid .install-card pre { padding: 19px 15px; }
 }
 @media (prefers-reduced-motion: reduce) {
   .motion-ready [data-reveal], .motion-ready [data-reveal="visual"], .motion-ready [data-reveal].is-visible { opacity: 1; filter: none; transform: none; animation: none; }
-  .hero .shot-frame img, .focus-visual img, .pip-capture { transform: none; }
+  .hero .shot-frame img, .focus-shot img, .pip-capture { transform: none; }
 }

From 8879c1bf5507e0497ed2e7be7878ceb2030dbbb0 Mon Sep 17 00:00:00 2001
From: huzaifaasim017 
Date: Fri, 23 Oct 2026 01:38:13 +0500
Subject: [PATCH 2/2] Place app icon between feature screenshots

---
 web/README.md         | 2 +-
 web/index.html        | 5 +++--
 web/scripts/check.mjs | 3 ++-
 web/showcase.css      | 9 +++------
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/README.md b/web/README.md
index ee9e74d..1f75ac1 100644
--- a/web/README.md
+++ b/web/README.md
@@ -2,7 +2,7 @@
 
 A two-page website for [LinuxPlayer](https://github.com/teamkrope/linuxplayer). It uses real application screenshots, the final bird mark shared with the desktop app, and an illustrative frame for the canvas demo. The site is self-contained and has no runtime or build dependencies beyond Node.js.
 
-`index.html` presents the player as a product showcase. Shared components and the download page use `styles.css`; homepage presentation lives in `showcase.css`. The first feature scene uses cropped views of two real app captures; the hero and download call to action repeat the app mark at larger sizes. `motion.js` handles blur reveals and subtle scene movement, with a reduced-motion fallback. Keep the real screenshots and interactive gallery/ratio demo intact when changing the layout.
+`index.html` presents the player as a product showcase. Shared components and the download page use `styles.css`; homepage presentation lives in `showcase.css`. The first feature scene uses cropped views of two real app captures with the app mark at their meeting point. `motion.js` handles blur reveals and subtle scene movement, with a reduced-motion fallback. Keep the real screenshots and interactive gallery/ratio demo intact when changing the layout.
 
 ## Preview locally
 
diff --git a/web/index.html b/web/index.html
index bbe1672..fb1171b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -34,7 +34,7 @@
-
LinuxPlayer app icon

Get lost in the video.
Not the player.

Beautiful playback, built for Linux.

+
LinuxPlayer

Get lost in the video.
Not the player.

Beautiful playback, built for Linux.

Actual LinuxPlayer 1.0 window playing a local video with controls visible
Download Explore the player
@@ -43,6 +43,7 @@
Actual LinuxPlayer playback with the controls hidden
Video only
Actual LinuxPlayer playback options panel
Controls, close by
+ LinuxPlayer app icon
01

Controls on demand.

They disappear as playback begins.

02

Stay in the picture.

Lock the interface to show only video.

03

Every action feels clear.

Subtle feedback for play, pause, and seeking.

@@ -59,7 +60,7 @@

Your video stays untouched. Feature guide

A closer look

See it in action.

-

Install LinuxPlayer.

64-bit x86 .deb package

Download ↓Other install options →
Terminal install
curl -fsSLo /tmp/linuxplayer-install.sh \
+    
Install LinuxPlayer.
64-bit x86 .deb package
Download ↓Other install options →
Terminal install
curl -fsSLo /tmp/linuxplayer-install.sh \
   https://github.com/teamkrope/linuxplayer/releases/latest/download/install.sh
 bash /tmp/linuxplayer-install.sh

     
Open source.
GPL-3.0-or-later · Qt Quick · libmpv
GitHub repositoryContribution guide
Report an issueJoin a discussionRead the architecture

diff --git a/web/scripts/check.mjs b/web/scripts/check.mjs
index c033fa8..2855623 100644
--- a/web/scripts/check.mjs
+++ b/web/scripts/check.mjs
@@ -12,7 +12,8 @@ if (html.includes('Start screen') || script.includes('empty-v1-coast.png')) thro
 if (![html, download].every(page => page.includes('motion.js') && page.includes('footer-line'))) throw new Error('Shared motion or compact footer missing');
 if (!html.includes('showcase.css') || !html.includes('class="hero-shot"') || !html.includes('data-scroll-scene')) throw new Error('Product showcase is missing');
 if (!(html.indexOf('class="hero-copy"') < html.indexOf('class="hero-shot"') && html.indexOf('class="hero-shot"') < html.indexOf('class="hero-actions"'))) throw new Error('Hero must show title, product image, then actions');
-if (!html.includes('class="focus-gallery"') || !html.includes('class="focus-shot focus-shot-controls"') || !html.includes('class="hero-mark"') || !html.includes('class="download-mark"')) throw new Error('Showcase image mosaic or prominent brand marks missing');
+if (!html.includes('class="focus-gallery"') || !html.includes('class="focus-shot focus-shot-controls"') || !html.includes('class="focus-brand"')) throw new Error('Showcase image mosaic or app mark missing');
+if (html.includes('class="hero-mark"') || html.includes('class="download-mark"')) throw new Error('App mark belongs with the feature mosaic');
 for (const text of ['LinuxPlayer', 'id="download"', 'id="features"', 'id="preview"', 'id="open-source"', 'application/ld+json', 'releases/latest/download/install.sh']) {
   if (!html.includes(text)) throw new Error(`Missing required site content: ${text}`);
 }
diff --git a/web/showcase.css b/web/showcase.css
index df8caa9..27973e5 100644
--- a/web/showcase.css
+++ b/web/showcase.css
@@ -10,8 +10,6 @@
 .hero { position: relative; overflow: hidden; padding: 116px 0 126px; background: radial-gradient(ellipse 55% 35% at 50% 50%, rgba(62, 171, 160, .15), transparent 90%), #07131d; }
 .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
 .hero-copy { padding: 0; text-align: center; max-width: 1050px; position: relative; z-index: 1; }
-.hero-mark, .download-mark { display: block; object-fit: cover; background: white; border: 1px solid #d8f3f0; box-shadow: 0 20px 55px #0007, 0 0 55px #64d5c63d; }
-.hero-mark { width: 104px; height: 104px; margin: 0 auto 10px; padding: 4px; border-radius: 26px; }
 .hero-copy h1 { font-size: clamp(62px, 8.1vw, 120px); line-height: .99; letter-spacing: -.078em; max-width: none; margin: 24px 0 24px; font-weight: 650; }
 .hero-copy p { max-width: none; color: #adc1c3; font-size: clamp(17px, 2vw, 21px); }
 .hero-shot { width: min(100%, 1160px); margin: 76px auto 0; position: relative; isolation: isolate; }
@@ -27,7 +25,8 @@
 .focus-layout { display: grid; justify-items: center; }
 .focus-intro { max-width: 920px; text-align: center; margin-bottom: 65px; }
 .focus-intro h2 { font-size: clamp(53px, 7.1vw, 104px); line-height: 1.03; letter-spacing: -.07em; margin: 23px 0 0; }
-.focus-gallery { width: 100%; max-width: 1130px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 20px; }
+.focus-gallery { width: 100%; max-width: 1130px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 20px; position: relative; }
+.focus-brand { position: absolute; z-index: 3; top: -47px; left: 62%; width: 118px; height: 118px; padding: 5px; transform: translateX(-50%); object-fit: cover; background: white; border: 1px solid #d8f3f0; border-radius: 28px; box-shadow: 0 22px 55px #000a, 0 0 40px #64d5c640; }
 .focus-shot { position: relative; overflow: hidden; margin: 0; border: 1px solid #56716c; border-radius: 23px; background: #080f16; box-shadow: 0 35px 80px #0008; }
 .focus-shot-video { aspect-ratio: 1.24; }
 .focus-shot-controls { aspect-ratio: .79; }
@@ -71,7 +70,6 @@
 .download-section { background: radial-gradient(circle at 50% 10%, #2a5d61, #15343f 48%, #0f2631 100%); border-block-color: #4d7775; }
 .download-grid { display: flex; flex-direction: column; align-items: center; gap: 58px; }
 .download-grid > div:first-child { text-align: center; }
-.download-mark { width: 100px; height: 100px; margin: 0 auto 32px; padding: 4px; border-radius: 25px; }
 .download-grid h2 { font-size: clamp(62px, 7.6vw, 108px); letter-spacing: -.07em; line-height: 1.02; margin-bottom: 22px; }
 .download-grid p { max-width: none; font-size: 16px; }
 .download-actions { justify-content: center; margin-top: 32px; }
@@ -133,8 +131,8 @@
   .hero-actions .button { width: 100%; }
   .section { padding-block: 88px; }
   .focus-intro h2, .canvas-head h2, .preview-section .section-head h2 { font-size: 49px; }
-  .hero-mark { width: 80px; height: 80px; border-radius: 21px; margin-bottom: 4px; }
   .focus-gallery { grid-template-columns: 1.1fr .9fr; gap: 9px; }
+  .focus-brand { width: 68px; height: 68px; top: -25px; left: 55%; padding: 3px; border-radius: 18px; }
   .focus-shot-video { aspect-ratio: .88; }
   .focus-shot-controls { aspect-ratio: .72; }
   .focus-shot figcaption { padding: 37px 12px 12px; font-size: 11px; }
@@ -156,7 +154,6 @@
   .gallery-image-wrap { min-height: 240px; }
   .download-grid { gap: 36px; }
   .download-grid h2 { font-size: 54px; }
-  .download-mark { width: 82px; height: 82px; border-radius: 20px; margin-bottom: 25px; }
   .download-actions { display: grid; gap: 14px; justify-items: center; }
   .download-actions .button { min-width: 180px; }
   .download-grid .install-card pre { padding: 19px 15px; }