Skip to content

Show playback mosaic and larger LinuxPlayer mark #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huzaifaasim017 merged 2 commits into from
Oct 22, 2026
Merged

Show playback mosaic and larger LinuxPlayer mark #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf7950b
Showcase playback modes and strengthen app branding
huzaifaasim017 Oct 22, 2026
8879c1b
Place app icon between feature screenshots
huzaifaasim017 Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 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

Expand Down
6 changes: 5 additions & 1 deletion web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@
</div></section>
<section class="section features-section" id="features" aria-labelledby="features-title"><div class="container focus-layout">
<div class="focus-intro" data-reveal="copy"><span class="section-kicker">The viewing experience</span><h2 id="features-title">Only the video,<br><em>when you want it.</em></h2></div>
<figure class="focus-visual" data-reveal="visual" data-scroll-scene><img src="assets/screenshots/hidden-v1-coast.png" alt="Actual LinuxPlayer screenshot with playback controls hidden" width="1100" height="680" loading="lazy"></figure>
<div class="focus-gallery" data-scroll-scene>
<figure class="focus-shot focus-shot-video" data-reveal="visual"><img src="assets/screenshots/hidden-v1-coast.png" alt="Actual LinuxPlayer playback with the controls hidden" width="1100" height="680" loading="lazy"><figcaption>Video only</figcaption></figure>
<figure class="focus-shot focus-shot-controls" data-reveal="visual"><img src="assets/screenshots/options-v1-coast.png" alt="Actual LinuxPlayer playback options panel" width="1100" height="680" loading="lazy"><figcaption>Controls, close by</figcaption></figure>
<img class="focus-brand" src="assets/linuxplayer-bird.png" alt="LinuxPlayer app icon" width="1024" height="1024" loading="lazy">
</div>
<div class="focus-points" aria-label="Playback highlights"><article data-reveal="copy"><span>01</span><h3>Controls on demand.</h3><p>They disappear as playback begins.</p></article><article data-reveal="copy"><span>02</span><h3>Stay in the picture.</h3><p>Lock the interface to show only video.</p></article><article data-reveal="copy"><span>03</span><h3>Every action feels clear.</h3><p>Subtle feedback for play, pause, and seeking.</p></article></div>
</div></section>
<section class="section pip-section" aria-labelledby="pip-title"><div class="container pip-grid">
Expand Down
2 changes: 2 additions & 0 deletions web/scripts/check.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +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="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}`);
}
Expand Down
21 changes: 17 additions & 4 deletions web/showcase.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,15 @@
.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; 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; }
.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; }
Expand Down Expand Up @@ -103,7 +110,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; }
Expand All @@ -123,6 +131,11 @@
.hero-actions .button { width: 100%; }
.section { padding-block: 88px; }
.focus-intro h2, .canvas-head h2, .preview-section .section-head h2 { font-size: 49px; }
.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; }
.focus-points { grid-template-columns: 1fr; gap: 25px; }
.focus-points article { padding-top: 18px; }
.focus-points span { margin-bottom: 8px; }
Expand All @@ -147,5 +160,5 @@
}
@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; }
}