Skip to content

Add FocusTube landing page #26

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
malekwael229 merged 3 commits into from
Sep 1, 2026
Merged

Add FocusTube landing page #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22e3326
Add landing page
malekwael229 Sep 1, 2026
f5f4468
Add landing page styles
malekwael229 Sep 1, 2026
929c009
Add landing page markup
malekwael229 Sep 1, 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
Empty file added docs/.nojekyll
View file
Open in desktop
Empty file.
85 changes: 85 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="FocusTube blocks YouTube Shorts, Instagram Reels, TikTok, Facebook Reels and distracting LinkedIn feeds while keeping the useful parts of each site available.">
<meta name="theme-color" content="#111214">
<title>FocusTube | Block Shorts, Reels and distracting feeds</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a class="brand" href="#top" aria-label="FocusTube home">FocusTube</a>
<nav aria-label="Primary navigation">
<a href="#privacy">Privacy</a>
<a href="https://github.com/malekwael229/FocusTube">GitHub</a>
</nav>
</header>

<main id="top">
<section class="hero section-shell">
<div class="hero-copy">
<p class="kicker">Free and open source</p>
<h1>Keep the useful parts. Block the scroll traps.</h1>
<p class="hero-text">FocusTube blocks YouTube Shorts, Instagram Reels, TikTok, Facebook Reels and the LinkedIn feed without blocking the whole site.</p>
<div class="store-actions" aria-label="Install FocusTube">
<a class="primary-button" href="https://chromewebstore.google.com/detail/focustube-distraction-blo/ppdjgkniggbikifojmkindmbhppmoell">Install for Chrome</a>
<a class="text-link" href="https://addons.mozilla.org/addon/focus-tube/">Firefox</a>
<a class="text-link" href="https://microsoftedge.microsoft.com/addons/detail/focustube/emffahlehkfdlknpmpndaabhigchhoog">Edge</a>
</div>
<p class="compatibility">Also works in Chromium browsers that support Chrome extensions.</p>
</div>

<div class="hero-visual" aria-label="FocusTube supported platforms">
<div class="browser-frame">
<div class="browser-bar" aria-hidden="true"><span></span><span></span><span></span></div>
<div class="browser-content">
<p class="browser-label">Distraction blocked</p>
<strong>YouTube Shorts</strong>
<p>Open the parts of YouTube you need without falling into Shorts.</p>
<div class="platform-list" aria-label="Supported platforms">
<span>YouTube</span><span>Instagram</span><span>TikTok</span><span>Facebook</span><span>LinkedIn</span>
</div>
</div>
</div>
</div>
</section>

<section class="section-shell split-section" aria-labelledby="control-heading">
<div><h2 id="control-heading">Block distractions without blocking the entire site.</h2></div>
<div class="feature-list">
<article><h3>YouTube</h3><p>Block Shorts and hide distracting Shorts navigation and shelves.</p></article>
<article><h3>Instagram and TikTok</h3><p>Cut off Reels, Explore and common feed surfaces while keeping useful areas available.</p></article>
<article><h3>Facebook and LinkedIn</h3><p>Hide Reels, Stories, feed suggestions and LinkedIn feed distractions.</p></article>
<article><h3>Focus tools</h3><p>Use focus and break timers, browser notifications and local blocked-count estimates.</p></article>
</div>
</section>

<section class="section-shell privacy-section" id="privacy" aria-labelledby="privacy-heading">
<div class="privacy-copy">
<h2 id="privacy-heading">Your settings stay in your browser.</h2>
<p>FocusTube has no analytics, no telemetry, no account system and no project-controlled backend. Preferences and timer data use browser-local storage.</p>
<a class="text-link" href="https://github.com/malekwael229/FocusTube#privacy">Read the privacy notes on GitHub</a>
</div>
<dl class="privacy-facts">
<div><dt>No tracking</dt><dd>No analytics SDKs or telemetry calls.</dd></div>
<div><dt>No remote backend</dt><dd>FocusTube does not send your settings or browsing data to a FocusTube server.</dd></div>
<div><dt>Open source</dt><dd>The source, releases and testing documentation are public on GitHub.</dd></div>
</dl>
</section>

<section class="section-shell final-cta" aria-labelledby="cta-heading">
<h2 id="cta-heading">Make the sites you need less distracting.</h2>
<p>Install FocusTube for free and keep control of what shows up in your browser.</p>
<div class="store-actions" aria-label="Install FocusTube">
<a class="primary-button" href="https://chromewebstore.google.com/detail/focustube-distraction-blo/ppdjgkniggbikifojmkindmbhppmoell">Install for Chrome</a>
<a class="text-link" href="https://addons.mozilla.org/addon/focus-tube/">Firefox</a>
<a class="text-link" href="https://microsoftedge.microsoft.com/addons/detail/focustube/emffahlehkfdlknpmpndaabhigchhoog">Edge</a>
</div>
</section>
</main>

<footer class="site-footer"><span>FocusTube</span><a href="https://github.com/malekwael229/FocusTube">Source on GitHub</a></footer>
</body>
</html>
Loading