diff --git a/scripts/capture-screenshots.sh b/scripts/capture-screenshots.sh index 5c6d2bd..35512a6 100755 --- a/scripts/capture-screenshots.sh +++ b/scripts/capture-screenshots.sh @@ -20,5 +20,7 @@ linuxplayer --capture-options "$root/docs/screenshots/options-v1-coast.png" "$vi linuxplayer --capture-hidden "$root/docs/screenshots/hidden-v1-coast.png" "$video" linuxplayer --capture-mini "$root/docs/screenshots/mini-player-v1-coast.png" "$video" linuxplayer --capture-ui "$root/docs/screenshots/empty-v1-coast.png" -cp "$root"/docs/screenshots/*-v1-coast.png "$root/web/assets/screenshots/" +for view in playback options hidden mini-player; do + cp "$root/docs/screenshots/$view-v1-coast.png" "$root/web/assets/screenshots/" +done echo 'Captured the current desktop interface for the repository and website.' diff --git a/web/README.md b/web/README.md index faef0ea..6a31a5c 100644 --- a/web/README.md +++ b/web/README.md @@ -27,7 +27,7 @@ The main download uses GitHub's stable latest-release URL for `linuxplayer_amd64 ## Refresh the screenshots -Install the current build, open a graphical desktop session, and run `scripts/capture-screenshots.sh` from the repository root. The script turns the site's generated coastal frame into a short local sample video with FFmpeg, then uses LinuxPlayer's built-in capture commands to write the real playback, options, locked, mini-player, and start-screen views to both `docs/screenshots/` and `web/assets/screenshots/`. Review each capture before publishing. The `*-v1-coast.png` filenames replace the earlier gradient captures and prevent stale browser image caches. +Install the current build, open a graphical desktop session, and run `scripts/capture-screenshots.sh` from the repository root. The script turns the site's generated coastal frame into a short local sample video with FFmpeg, then uses LinuxPlayer's built-in capture commands to write playback, options, locked, and mini-player views to both `docs/screenshots/` and `web/assets/screenshots/`. The start-screen capture stays in `docs/screenshots/` for documentation. Review each capture before publishing. The `*-v1-coast.png` filenames replace the earlier gradient captures and prevent stale browser image caches. ## Content and attribution diff --git a/web/assets/external-link.svg b/web/assets/external-link.svg new file mode 100644 index 0000000..e645f45 --- /dev/null +++ b/web/assets/external-link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/assets/screenshots/empty-v1-coast.png b/web/assets/screenshots/empty-v1-coast.png deleted file mode 100644 index 16f76a0..0000000 Binary files a/web/assets/screenshots/empty-v1-coast.png and /dev/null differ diff --git a/web/download.html b/web/download.html index a4c3f4e..a89927c 100644 --- a/web/download.html +++ b/web/download.html @@ -15,6 +15,7 @@ Download LinuxPlayer — Latest Linux packages + @@ -28,14 +29,14 @@
← Home

Download LinuxPlayer.

- +
-

Install with terminal.

Automatically selects amd64 or ARM64 and checks the download.

Read the installer source ↗
Copy and run
curl -fsSLo /tmp/linuxplayer-install.sh \
+    
Install with terminal.
Automatically selects amd64 or ARM64 and checks the download.
Read the installer source
Copy and run
curl -fsSLo /tmp/linuxplayer-install.sh \
   https://github.com/teamkrope/linuxplayer/releases/latest/download/install.sh
-bash /tmp/linuxplayer-install.sh
Review the script before running it.Release notes ↗

-    
Need help?
Support guide↗Report an installation issue↗Contribute to LinuxPlayer↗

+bash /tmp/linuxplayer-install.sh
Review the script before running it.Release notes
+

Need help?

Support guideReport an installation issueContribute to LinuxPlayer
- + diff --git a/web/index.html b/web/index.html index 991a9a6..1a87322 100644 --- a/web/index.html +++ b/web/index.html @@ -21,6 +21,7 @@ + @@ -32,7 +33,7 @@
-

Video playback,
refined for Linux.

Download View source ↗
+

Video playback,
refined for Linux.

Download View source
Actual LinuxPlayer 1.0 window playing a local video with controls visible
@@ -56,15 +57,15 @@
Source video16:9 · unchanged
Illustrative widescreen frame showing a person on a coastal overlook and a lighthouse
Canvas preview16:9 · Fit
Same illustrative frame inside the selected canvas
Canvas ratio
Video in canvas
-

Preview only. Your video stays untouched. Feature guide ↗

+

Preview only. Your video stays untouched. Feature guide

-

See the player.

+

See the player.

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 repository ↗Contribution guide ↗
Report an issue↗Join a discussion↗Read the architecture↗
+

Open source.

GPL-3.0-or-later · Qt Quick · libmpv

GitHub repositoryContribution guide
Report an issueJoin a discussionRead the architecture

Questions.

How do I see only the video?

Playback hides the controls automatically. Click the lock in the header or press H to keep them hidden. Move the pointer to reveal a temporary unlock button, or press H again.

What video formats work?

LinuxPlayer uses the system's libmpv and FFmpeg libraries. Format support depends on the codecs available on your distribution.

Can I make it my default player?

Yes. Choose "Make default video player" on the opening screen or in More options. The app updates supported file associations for your user account after you click.

Does canvas preview export a new video?

No. Ratios show how a video fits or crops inside a canvas during playback. Your original file stays unchanged.

Where can I get help?

Email contact@teamkrope.com, see the support guide or ask in GitHub Discussions.

- + diff --git a/web/motion.js b/web/motion.js new file mode 100644 index 0000000..4a65dd8 --- /dev/null +++ b/web/motion.js @@ -0,0 +1,39 @@ +(() => { + document.querySelectorAll('a[target="_blank"]').forEach(link => { + if (!link.hasAttribute('aria-label')) { + link.setAttribute('aria-label', `${link.textContent.trim()} (opens in new tab)`); + } + }); + + if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; + + const targets = document.querySelectorAll([ + 'main .hero-copy', 'main .hero-shot', 'main .section-head', + 'main .feature-shot', 'main .feature-list article', + 'main .pip-copy', 'main .workspace-figure', 'main .ratio-demo', + 'main .gallery', 'main .download-grid > *', 'main .source-grid > *', + 'main .faq-grid > *', 'main .package-card', 'main .download-help-grid > *' + ].join(', ')); + + targets.forEach(target => { + target.classList.add('reveal'); + // The first viewport should be readable even before the observer's first paint. + if (target.getBoundingClientRect().top < window.innerHeight * 0.94) { + target.classList.add('is-visible'); + } + if (target.matches('.feature-list article')) { + const index = [...target.parentElement.children].indexOf(target); + target.style.setProperty('--reveal-delay', `${Math.min(index, 5) * 55}ms`); + } + }); + + document.documentElement.classList.add('motion-ready'); + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (!entry.isIntersecting) return; + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + }); + }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' }); + targets.forEach(target => observer.observe(target)); +})(); diff --git a/web/script.js b/web/script.js index 2d3fb01..d1856c9 100644 --- a/web/script.js +++ b/web/script.js @@ -20,8 +20,7 @@ playback: { file: 'playback-v1-coast.png', title: 'Playback', alt: 'LinuxPlayer playback interface with lock control' }, options: { file: 'options-v1-coast.png', title: 'Controls', alt: 'LinuxPlayer playback options popup' }, hidden: { file: 'hidden-v1-coast.png', title: 'Video only', alt: 'LinuxPlayer video canvas with controls locked and hidden' }, - mini: { file: 'mini-player-v1-coast.png', title: 'Mini-player', alt: 'LinuxPlayer compact mini-player shown over an illustrative workspace' }, - start: { file: 'empty-v1-coast.png', title: 'Start screen', alt: 'LinuxPlayer start screen with rounded app icon and Open video button' } + mini: { file: 'mini-player-v1-coast.png', title: 'Mini-player', alt: 'LinuxPlayer compact mini-player shown over an illustrative workspace' } }; const tabs = [...document.querySelectorAll('.gallery-tabs [role="tab"]')]; const galleryImage = document.querySelector('#gallery-image'); diff --git a/web/scripts/build.mjs b/web/scripts/build.mjs index 9b15b74..0de8228 100644 --- a/web/scripts/build.mjs +++ b/web/scripts/build.mjs @@ -20,6 +20,7 @@ await mkdir(output, { recursive: true }); await cp(path.join(root, 'assets'), path.join(output, 'assets'), { recursive: true }); await cp(path.join(root, 'styles.css'), path.join(output, 'styles.css')); await cp(path.join(root, 'script.js'), path.join(output, 'script.js')); +await cp(path.join(root, 'motion.js'), path.join(output, 'motion.js')); await cp(path.join(root, 'download.js'), path.join(output, 'download.js')); await cp(path.join(root, 'LICENSE'), path.join(output, 'LICENSE')); diff --git a/web/scripts/check.mjs b/web/scripts/check.mjs index d1c3442..082a677 100644 --- a/web/scripts/check.mjs +++ b/web/scripts/check.mjs @@ -8,13 +8,15 @@ const download = await readFile(path.join(root, 'download.html'), 'utf8'); const script = await readFile(path.join(root, 'script.js'), 'utf8'); if ([html, download].some(page => page.includes('Download for Linux'))) throw new Error('Primary download buttons must say Download'); if (!html.includes('playback-v1-coast.png') || !script.includes('options-v1-coast.png')) throw new Error('Current screenshots are not linked from the site'); +if (html.includes('Start screen') || script.includes('empty-v1-coast.png')) throw new Error('Removed gallery tab is still present'); +if (![html, download].every(page => page.includes('motion.js') && page.includes('footer-line'))) throw new Error('Shared motion or compact footer 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}`); } for (const asset of ['linuxplayer_amd64.deb', 'linuxplayer_arm64.deb']) { if (!download.includes(`/releases/latest/download/${asset}`)) throw new Error(`Missing latest direct download: ${asset}`); } -for (const file of ['styles.css', 'script.js', 'download.js', 'robots.txt', 'LICENSE', 'assets/linuxplayer-bird.png', 'assets/ratio-source.webp', 'assets/screenshots/playback-v1-coast.png', 'assets/screenshots/options-v1-coast.png', 'assets/screenshots/hidden-v1-coast.png', 'assets/screenshots/mini-player-v1-coast.png', 'assets/screenshots/empty-v1-coast.png']) { +for (const file of ['styles.css', 'motion.js', 'script.js', 'download.js', 'robots.txt', 'LICENSE', 'assets/linuxplayer-bird.png', 'assets/external-link.svg', 'assets/ratio-source.webp', 'assets/screenshots/playback-v1-coast.png', 'assets/screenshots/options-v1-coast.png', 'assets/screenshots/hidden-v1-coast.png', 'assets/screenshots/mini-player-v1-coast.png']) { if (!(await stat(path.join(root, file))).isFile()) throw new Error(`Missing asset: ${file}`); } console.log('Site content and required assets verified.'); diff --git a/web/styles.css b/web/styles.css index 49e23f9..1f7e5b9 100644 --- a/web/styles.css +++ b/web/styles.css @@ -50,6 +50,10 @@ h1 em{font-style:normal;color:var(--accent)} .button-primary:hover{background:#a5eee2;color:#10201b} .button-secondary{border-color:#485250;color:var(--text);background:#172b39} .button-secondary:hover{border-color:#758781;color:var(--text);background:#222a29} +.button-ghost{border-color:#405765;color:var(--accent);background:transparent} +.button-ghost:hover{border-color:var(--accent);color:var(--text);background:#203440} +a[target="_blank"]::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-.16em;flex:none;background:currentColor;mask:url("assets/external-link.svg") center/contain no-repeat} +.button[target="_blank"]::after{margin-left:0} .hero-foot{display:inline-block;margin-top:21px;color:var(--accent);font-size:12px;font-weight:650} .hero-shot{min-width:0} .shot-frame{background:#07131d;border:1px solid #454c4b;border-radius:12px;padding:8px;box-shadow:0 28px 75px rgba(0,0,0,.38)} @@ -125,7 +129,7 @@ h1 em{font-style:normal;color:var(--accent)} .preview-section{background:#0d1b26} .gallery{border:1px solid var(--line);border-radius:10px;overflow:hidden} -.gallery-tabs{display:flex;gap:5px;overflow-x:auto;background:#172b39;padding:13px 16px;border-bottom:1px solid var(--line)} +.gallery-tabs{display:flex;justify-content:center;gap:5px;overflow-x:auto;background:#172b39;padding:13px 16px;border-bottom:1px solid var(--line)} .gallery-tabs button{background:transparent;color:#9eaaa7;border:0;border-radius:6px;padding:8px 15px;font-size:12px;font-weight:650;white-space:nowrap} .gallery-tabs button.active{background:#374740;color:#e9f5ee} .gallery-tabs button:hover:not(.active){color:var(--text);background:#2a3231} @@ -164,7 +168,7 @@ h1 em{font-style:normal;color:var(--accent)} .source-section{background:#101e29} .source-grid{display:grid;grid-template-columns:1fr .8fr;gap:110px;align-items:center} .source-grid p{max-width:560px} -.source-actions{margin-top:28px} +.source-actions{margin-top:28px;align-items:stretch} .text-link{font-size:13px;font-weight:650;color:var(--accent)} .repo-links{border-top:1px solid var(--line)} .repo-links a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:23px 3px;font-weight:550;font-size:15px} @@ -180,15 +184,14 @@ h1 em{font-style:normal;color:var(--accent)} .faq-list p{font-size:14px;line-height:1.65;padding:0 30px 23px 0;max-width:620px} .site-footer{background:#09131d;border-top:1px solid var(--line)} -.footer-main{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;padding:74px 0} -.footer-main>div:first-child p{font-size:13px;margin-top:16px;max-width:280px} -.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} -.footer-links>div{display:flex;flex-direction:column;gap:10px} -.footer-links strong{font-size:12px;margin-bottom:6px} -.footer-links a{font-size:12px;color:var(--muted)} -.footer-links a:hover{color:var(--accent)} -.footer-bottom{border-top:1px solid var(--line);padding:19px 0 26px;display:flex;gap:25px;color:var(--quiet);font-size:11px} -.footer-bottom a{margin-left:auto} +.footer-line{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:28px} +.footer-signature{font-size:12px;color:var(--quiet);white-space:nowrap} +.footer-nav{display:flex;align-items:center;justify-content:flex-end;gap:28px;flex-wrap:wrap} +.footer-nav a{font-size:12px;color:var(--muted);white-space:nowrap} +.footer-nav a:hover{color:var(--accent)} + +.motion-ready .reveal{opacity:0;filter:blur(12px);transform:translate3d(0,18px,0) scale(.985);transition:opacity .75s cubic-bezier(.22,1,.36,1),filter .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)} +.motion-ready .reveal.is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)} .download-page-hero{padding:72px 0 84px;background:radial-gradient(circle at 80% 10%,rgba(29,107,132,.18),transparent 43%),var(--bg)} .back-link{font-size:12px;font-weight:650;color:var(--muted)} @@ -262,7 +265,9 @@ h1 em{font-style:normal;color:var(--accent)} .demo-controls{grid-column:1} .source-frame,.ratio-stage{height:310px} .gallery-image-wrap{min-height:240px;height:57vw;padding:12px} -.footer-main{grid-template-columns:1fr;gap:48px;padding:60px 0} +.gallery-tabs{justify-content:flex-start} +.footer-line{padding:24px 0;flex-wrap:wrap;gap:16px} +.footer-nav{justify-content:flex-start;gap:18px} .faq-grid{gap:20px} } @@ -287,13 +292,12 @@ h1 em{font-style:normal;color:var(--accent)} .gallery-caption{display:block;padding:16px} .gallery-caption a{display:inline-block;margin-top:14px} .install-card pre{padding:20px 16px;font-size:11px} -.footer-links{gap:15px} -.footer-bottom{flex-wrap:wrap} -.footer-bottom a{margin-left:0} +.footer-nav{width:100%;justify-content:space-between} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*:before,*:after{transition:none!important;animation:none!important} +.motion-ready .reveal{opacity:1;filter:none;transform:none} }