From b7baf6a878713cbaac1d5e51664ad7425a16303d Mon Sep 17 00:00:00 2001 From: Malek Wael <166439118+malekwael229@users.noreply.github.com> Date: Wed, 2 Sep 2026 03:02:37 +0300 Subject: [PATCH] Revert GitHub Pages landing page work Restore the repository to the state immediately before the three GitHub Pages landing-page commits while keeping the README store-link change. --- DESIGN.md | 212 ------------ docs/styles.css | 695 --------------------------------------- index.html | 152 --------- scripts/run-test-all.js | 1 - tests/pages-site.test.js | 19 -- 5 files changed, 1079 deletions(-) delete mode 100644 DESIGN.md delete mode 100644 docs/styles.css delete mode 100644 index.html delete mode 100644 tests/pages-site.test.js diff --git a/DESIGN.md b/DESIGN.md deleted file mode 100644 index 4044c51..0000000 --- a/DESIGN.md +++ /dev/null @@ -1,212 +0,0 @@ -# Design - -## Source of truth - -**Status:** Active -**Date:** 2026-09-02 -**Product surfaces:** browser-extension popup/options UI, public GitHub Pages landing page, store-facing product presentation. - -Evidence reviewed: - -- Current extension popup structure and existing product styling. -- README product description, supported platforms, privacy model, and project-impact figures. -- Existing GitHub Pages landing-page files under `docs/`. -- GitHub Pages deployment logs showing the repository root is the active publishing source. -- User screenshot of the live site showing the README rendered as the homepage. - -## Brand - -FocusTube should feel calm, focused, technical, and trustworthy. It is a practical productivity tool, not a lifestyle brand or a flashy startup landing page. - -Trust signals: - -- Free and open source. -- No analytics or tracking. -- No account or project-controlled backend. -- Available on Chrome, Firefox, and Edge. -- Real public source, releases, tests, and store listings. - -Avoid: - -- Generic AI-startup aesthetics. -- Decorative gradients, glow effects, excessive shadows, and card grids used only for visual filler. -- Huge marketing copy that pushes the product below the fold. -- Fake browser chrome, fake live counters, or invented usage statistics. -- Repeating the same claim in multiple sections. - -## Product goals - -Goals: - -- Explain the product in one screen: keep useful parts of social sites, remove distracting feeds. -- Make the Chrome install action obvious while keeping Firefox and Edge easy to find. -- Show enough of the extension UI to make the product feel real. -- Establish privacy and open-source trust quickly. -- Work well on desktop and mobile without JavaScript. - -Non-goals: - -- Reproduce every extension setting on the marketing page. -- Turn the landing page into full documentation. -- Add analytics, accounts, tracking, or a backend. -- Add animation or visual effects that do not improve comprehension. - -Success signals: - -- A visitor can identify what FocusTube does within a few seconds. -- Store links are visible without scrolling on common desktop sizes. -- The live root URL serves the product landing page rather than the repository README. - -## Personas and jobs - -Primary personas: - -- Students who need YouTube or social platforms for useful tasks but get pulled into short-form feeds. -- Knowledge workers who want to keep access to specific social-site functions without blocking entire domains. -- Privacy-conscious users who prefer a local, open-source extension. - -Primary jobs: - -- Understand what FocusTube blocks. -- Decide whether it fits the user's browsing habits. -- Install it in the user's browser. -- Verify that it does not track browsing activity. - -## Information architecture - -Public landing page hierarchy: - -1. Header with FocusTube brand, key navigation, GitHub, and install action. -2. Hero with the core promise, browser install links, current project proof, and a product-control preview. -3. Supported-platform strip. -4. Short explanation of how FocusTube removes distracting surfaces while keeping useful pages available. -5. Privacy section. -6. Final install action. -7. Minimal footer with source link. - -The README remains developer/project documentation and must not be used as the public landing-page entry file. - -## Design principles - -1. **Product before prose.** Show what the extension does before explaining every detail. -2. **One primary action.** Chrome is the main install CTA; Firefox and Edge remain visible secondary actions. -3. **Use real product language.** Prefer terms already used by FocusTube and avoid generic productivity slogans. -4. **Trust through restraint.** Privacy and open-source facts should be specific and verifiable, not exaggerated. -5. **No visual filler.** Every panel, border, label, and metric must carry product information. -6. **Preserve brand continuity.** The existing FocusTube blue is intentional product branding, not a default landing-page choice. - -## Visual language - -Color: - -- Base: near-black neutral background. -- Surfaces: restrained dark gray layers. -- Text: high-contrast white with muted gray secondary copy. -- Accent: existing FocusTube blue `#4facfe` with a lighter hover state. -- Success state: muted green only for explicit enabled/status feedback. - -Typography: - -- System-first sans-serif stack using Inter when available. -- Large but controlled hero type; no oversized display text that overwhelms the product preview. -- Body copy at comfortable reading sizes with short line lengths. - -Spacing: - -- Wide desktop breathing room with tighter mobile spacing. -- Prefer separators and whitespace over stacking many boxed cards. - -Shape and elevation: - -- Moderate corner radii on interactive/product-preview surfaces. -- Borders provide separation; avoid gratuitous drop shadows and glow effects. - -Motion: - -- No required motion. Hover transitions should be subtle and functional. - -Imagery and iconography: - -- Use the real FocusTube extension icon. -- Product preview should reflect actual controls and terminology rather than a fake browser window. - -## Components - -Landing-page components: - -- `site-header`: brand, navigation, install shortcut. -- `store-actions`: Chrome primary action plus Firefox and Edge secondary actions. -- `product-shot`: static representation of the extension control surface. -- `supported-strip`: supported-site names. -- `feature-rows`: three concise product behaviors. -- `privacy-section`: direct privacy statement plus specific trust facts. -- `install-section`: final install prompt. -- `site-footer`: brand/source closure. - -Token ownership: - -- Landing-page tokens live in the landing-page stylesheet and must not modify the extension's root `styles.css`. -- Extension UI tokens remain owned by the extension stylesheet. - -## Accessibility - -Target: WCAG 2.2 AA where practical for the static landing page. - -- Semantic `header`, `nav`, `main`, `section`, and `footer` structure. -- Visible keyboard focus on links and controls. -- Decorative icon images use empty alt text; meaningful text remains in the DOM. -- Maintain readable text/background contrast. -- Do not require hover, animation, or color alone to understand content. -- Respect reduced-motion expectations by keeping motion minimal and nonessential. - -## Responsive behavior - -Desktop: - -- Two-column hero with copy and product preview. -- Full navigation visible. -- Privacy content can use two columns. - -Tablet: - -- Hero and privacy sections collapse to one column. -- Product preview moves below the hero copy. - -Mobile: - -- Hide nonessential header links while preserving the install action. -- Stack platform preview items and install controls when needed. -- Keep tap targets comfortably sized. -- Prevent horizontal overflow except the intentionally scrollable supported-platform strip. - -## Interaction states - -The public page is static and has no application loading state. - -- Links: default, hover, and keyboard-focus states. -- Install buttons: clear default and hover/focus states. -- Product preview controls are illustrative, not interactive, and must not imply that settings can be changed on the website. -- If an external store is unavailable, the page itself remains usable and the other store/GitHub links remain available. - -## Content voice - -- Short, direct, and specific. -- Prefer plain language such as "Hide short-form feeds" over marketing jargon. -- Use "FocusTube" consistently. -- Do not claim certification, auditing, or privacy guarantees beyond what the repository supports. -- Do not invent user counts, ratings, time-saved figures, or blocked-count values. - -## Implementation constraints - -- Static HTML and CSS only for the landing page. -- No JavaScript, analytics, tracking pixels, external runtime dependencies, or backend. -- GitHub Pages currently publishes from `main` at the repository root, so the public entry file must be root `index.html` unless Pages settings are deliberately changed later. -- Do not overwrite the extension's root `styles.css`; the landing page uses its own stylesheet. -- Store URLs and GitHub URL must remain the official existing links. -- Required repository CI, CodeQL, and release-verification checks must stay green. -- Public-page changes should be checked at desktop and mobile widths before being considered finished. - -## Open questions - -- [ ] Replace the illustrative extension preview with a polished real product screenshot if a stable screenshot asset is added later. **Owner:** maintainer. **Impact:** medium. -- [ ] Decide later whether project-impact numbers should remain hard-coded on the landing page or be removed to avoid stale public metrics. **Owner:** maintainer. **Impact:** low. diff --git a/docs/styles.css b/docs/styles.css deleted file mode 100644 index da1a948..0000000 --- a/docs/styles.css +++ /dev/null @@ -1,695 +0,0 @@ -:root { - color-scheme: dark; - --bg: #0d0f12; - --surface: #15181d; - --surface-2: #1b1f25; - --surface-3: #232830; - --text: #f7f8fa; - --muted: #9ca4af; - --soft: #c8cdd4; - --border: #292f38; - --accent: #4facfe; - --accent-hover: #72bdff; - --accent-ink: #06111a; - --success: #59d98e; - --max-width: 1160px; -} - -* { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - background: var(--bg); - color: var(--text); - font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; - line-height: 1.55; - -webkit-font-smoothing: antialiased; -} - -a { - color: inherit; -} - -a:focus-visible, -button:focus-visible { - outline: 3px solid var(--accent); - outline-offset: 4px; -} - -.site-header, -.section-shell, -.footer-inner { - width: min(var(--max-width), calc(100% - 48px)); - margin-inline: auto; -} - -.site-header { - min-height: 78px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - border-bottom: 1px solid var(--border); -} - -.brand { - display: inline-flex; - align-items: center; - gap: 10px; - color: var(--text); - font-size: 1.05rem; - font-weight: 760; - letter-spacing: -0.02em; - text-decoration: none; -} - -.brand img { - border-radius: 8px; -} - -nav { - display: flex; - align-items: center; - gap: 24px; -} - -nav a { - color: var(--muted); - font-size: 0.94rem; - font-weight: 600; - text-decoration: none; -} - -nav a:hover { - color: var(--text); -} - -.nav-install { - min-height: 38px; - display: inline-flex; - align-items: center; - padding: 0 15px; - border: 1px solid var(--border); - border-radius: 9px; - color: var(--text); - background: var(--surface-2); -} - -.hero { - min-height: 660px; - display: grid; - grid-template-columns: 0.98fr 1.02fr; - align-items: center; - gap: 76px; - padding-block: 88px 96px; -} - -.trust-line { - display: flex; - flex-wrap: wrap; - gap: 9px 18px; - margin-bottom: 24px; - color: var(--muted); - font-size: 0.86rem; - font-weight: 650; -} - -.trust-line span { - position: relative; -} - -.trust-line span:not(:last-child)::after { - content: ""; - position: absolute; - top: 50%; - right: -10px; - width: 3px; - height: 3px; - border-radius: 50%; - background: #59616c; -} - -h1, -h2, -h3, -p { - margin-top: 0; -} - -h1 { - max-width: 650px; - margin-bottom: 24px; - font-size: clamp(3rem, 5.4vw, 4.8rem); - line-height: 0.98; - letter-spacing: -0.055em; -} - -h2 { - margin-bottom: 16px; - font-size: clamp(2rem, 3.5vw, 3.25rem); - line-height: 1.05; - letter-spacing: -0.04em; -} - -h3 { - margin-bottom: 7px; - font-size: 1.08rem; -} - -.hero-text { - max-width: 600px; - margin-bottom: 30px; - color: var(--muted); - font-size: 1.12rem; -} - -.store-actions { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 10px; -} - -.primary-button, -.secondary-button { - min-height: 48px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 20px; - border-radius: 10px; - font-size: 0.95rem; - font-weight: 760; - text-decoration: none; - transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; -} - -.primary-button { - border: 1px solid var(--accent); - background: var(--accent); - color: var(--accent-ink); -} - -.primary-button:hover { - border-color: var(--accent-hover); - background: var(--accent-hover); - transform: translateY(-1px); -} - -.secondary-button { - border: 1px solid var(--border); - background: var(--surface); - color: var(--soft); -} - -.secondary-button:hover { - border-color: #3b434e; - background: var(--surface-2); - color: var(--text); -} - -.proof { - display: flex; - flex-wrap: wrap; - gap: 30px; - margin-top: 36px; -} - -.proof div { - display: grid; - gap: 1px; -} - -.proof strong { - font-size: 1rem; - font-weight: 760; -} - -.proof span { - color: var(--muted); - font-size: 0.78rem; -} - -.product-shot { - display: flex; - justify-content: flex-end; -} - -.popup-card { - width: min(100%, 470px); - padding: 22px; - border: 1px solid #313843; - border-radius: 22px; - background: #191c21; -} - -.preview-label { - margin-bottom: 14px; - color: #737c88; - font-size: 0.68rem; - font-weight: 760; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.popup-header, -.popup-title, -.control-block, -.timer-row, -.popup-footer { - display: flex; - align-items: center; -} - -.popup-header, -.control-block, -.timer-row, -.popup-footer { - justify-content: space-between; -} - -.popup-header { - margin-bottom: 18px; -} - -.popup-title { - gap: 11px; -} - -.popup-title img { - border-radius: 9px; -} - -.popup-title div { - display: grid; -} - -.popup-title strong { - line-height: 1.2; -} - -.popup-title span, -.control-block span, -.timer-row span, -.popup-footer, -.platform small { - color: var(--muted); - font-size: 0.76rem; -} - -.status-pill { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 7px 10px; - border: 1px solid #2e473a; - border-radius: 999px; - color: #a7edc3; - background: #17231c; - font-size: 0.75rem; - font-weight: 720; -} - -.status-pill > span { - width: 7px; - height: 7px; - border-radius: 50%; - background: var(--success); -} - -.control-block { - gap: 18px; - padding: 15px 16px; - margin-bottom: 12px; - border: 1px solid var(--border); - border-radius: 13px; - background: #20242a; -} - -.control-block > div:first-child { - display: grid; - gap: 2px; -} - -.control-block strong { - font-size: 0.9rem; -} - -.toggle { - width: 38px; - height: 22px; - padding: 3px; - border-radius: 999px; - background: var(--accent); -} - -.toggle span { - width: 16px; - height: 16px; - display: block; - margin-left: auto; - border-radius: 50%; - background: #071119; -} - -.platform-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} - -.platform { - min-height: 78px; - display: grid; - grid-template-columns: 30px 1fr; - grid-template-rows: auto auto; - align-items: center; - column-gap: 10px; - padding: 13px; - border: 1px solid var(--border); - border-radius: 12px; - background: #14171b; -} - -.platform.wide { - grid-column: 1 / -1; -} - -.platform-mark { - grid-row: 1 / 3; - width: 30px; - height: 30px; - display: grid; - place-items: center; - border-radius: 8px; - background: #252a31; - color: var(--soft); - font-size: 0.68rem; - font-weight: 800; - letter-spacing: -0.02em; -} - -.platform strong { - align-self: end; - font-size: 0.82rem; -} - -.platform small { - align-self: start; -} - -.timer-row { - gap: 18px; - padding: 15px 0; - margin-top: 12px; - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - -.timer-row > div { - display: grid; -} - -.timer-row strong { - margin-top: 2px; - font-size: 1.35rem; - letter-spacing: -0.03em; -} - -.timer-row button { - min-height: 38px; - padding: 0 14px; - border: 1px solid var(--border); - border-radius: 9px; - background: var(--surface-3); - color: var(--soft); - font: inherit; - font-size: 0.8rem; - font-weight: 700; -} - -.popup-footer { - gap: 18px; - padding-top: 14px; -} - -.supported-strip { - border-block: 1px solid var(--border); - background: #111419; -} - -.supported-inner { - min-height: 74px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - color: #767f8b; - font-size: 0.88rem; - font-weight: 720; -} - -.product-section { - padding-block: 112px 118px; -} - -.section-heading { - max-width: 720px; - margin-bottom: 66px; -} - -.section-heading p, -.privacy-copy p, -.install-section p { - color: var(--muted); - font-size: 1.02rem; -} - -.feature-rows { - border-top: 1px solid var(--border); -} - -.feature-rows article { - display: grid; - grid-template-columns: 72px minmax(0, 1fr); - gap: 28px; - padding: 28px 0; - border-bottom: 1px solid var(--border); -} - -.feature-rows article > div { - max-width: 720px; -} - -.feature-number { - color: #66707c; - font-size: 0.78rem; - font-weight: 760; - letter-spacing: 0.08em; -} - -.feature-rows p { - margin-bottom: 0; - color: var(--muted); -} - -.privacy-section { - display: grid; - grid-template-columns: 0.95fr 1.05fr; - gap: 90px; - padding-block: 112px; - border-top: 1px solid var(--border); -} - -.privacy-copy a { - display: inline-block; - margin-top: 8px; - color: var(--accent-hover); - font-weight: 680; - text-underline-offset: 4px; -} - -.privacy-list { - border-top: 1px solid var(--border); -} - -.privacy-list div { - display: grid; - grid-template-columns: 150px 1fr; - gap: 24px; - padding: 22px 0; - border-bottom: 1px solid var(--border); -} - -.privacy-list strong { - font-size: 0.9rem; -} - -.privacy-list span { - color: var(--muted); - font-size: 0.92rem; -} - -.install-section { - display: flex; - align-items: end; - justify-content: space-between; - gap: 48px; - padding-block: 104px 112px; - border-top: 1px solid var(--border); -} - -.install-section > div:first-child { - max-width: 650px; -} - -.install-section p { - margin-bottom: 0; -} - -.site-footer { - border-top: 1px solid var(--border); - background: #0a0c0f; -} - -.footer-inner { - min-height: 90px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - color: var(--muted); - font-size: 0.84rem; -} - -.footer-brand { - color: var(--soft); - font-size: 0.92rem; -} - -.site-footer a { - color: var(--soft); - text-decoration: none; -} - -.site-footer a:hover { - color: var(--text); -} - -@media (max-width: 900px) { - .hero, - .privacy-section { - grid-template-columns: 1fr; - } - - .hero { - gap: 58px; - padding-block: 72px 80px; - } - - .product-shot { - justify-content: flex-start; - } - - .privacy-section { - gap: 48px; - } - - .install-section { - align-items: flex-start; - flex-direction: column; - } -} - -@media (max-width: 680px) { - .site-header, - .section-shell, - .footer-inner { - width: min(100% - 30px, var(--max-width)); - } - - .site-header { - min-height: 68px; - } - - nav a:not(.nav-install) { - display: none; - } - - .hero { - padding-top: 58px; - } - - h1 { - font-size: clamp(2.7rem, 13vw, 4rem); - } - - .proof { - gap: 22px; - } - - .popup-card { - padding: 16px; - border-radius: 16px; - } - - .platform-grid { - grid-template-columns: 1fr; - } - - .platform.wide { - grid-column: auto; - } - - .supported-inner { - min-height: 64px; - justify-content: flex-start; - overflow-x: auto; - white-space: nowrap; - } - - .product-section, - .privacy-section { - padding-block: 82px; - } - - .section-heading { - margin-bottom: 44px; - } - - .feature-rows article { - grid-template-columns: 42px 1fr; - gap: 14px; - } - - .privacy-list div { - grid-template-columns: 1fr; - gap: 5px; - } - - .install-section { - padding-block: 82px 88px; - } - - .store-actions { - width: 100%; - } - - .primary-button, - .secondary-button { - flex: 1 1 auto; - } - - .footer-inner { - min-height: auto; - align-items: flex-start; - flex-direction: column; - padding-block: 26px; - } -} diff --git a/index.html b/index.html deleted file mode 100644 index 9d237ca..0000000 --- a/index.html +++ /dev/null @@ -1,152 +0,0 @@ - - - - - - - - FocusTube | Block Shorts, Reels and distracting feeds - - - - - -
- - - FocusTube - - -
- -
-
-
-
- Free - Open source - No tracking -
-

Use the site.
Skip the scroll trap.

-

FocusTube removes the parts of social sites that pull you into endless scrolling, without blocking the whole website.

-
- Add to Chrome - Firefox - Edge -
-
-
700+users
-
32GitHub stars
-
5.0Chrome rating
-
-
- -
-
-
Extension preview
-
-
- -
FocusTubeDistraction blocker
-
-
Enabled
-
- -
-
Hide UI distractionsAcross supported sites
- -
- -
-
YTYouTubeShorts hidden
-
IGInstagramReels blocked
-
TTTikTokFeed controlled
-
FBFacebookReels hidden
-
inLinkedInFeed hidden
-
- -
-
Focus timer25:00
- -
- -
Local blocked countLocal time-saved estimate
-
-
-
- -
-
- YouTube - Instagram - TikTok - Facebook - LinkedIn -
-
- -
-
-

Keep what you need. Remove what you don’t.

-

FocusTube targets distracting surfaces instead of blocking entire websites.

-
- -
-
- 01 -

Hide short-form feeds

Remove YouTube Shorts, Instagram Reels, Facebook Reels and other distracting feed surfaces.

-
-
- 02 -

Keep useful pages available

Search YouTube, open a LinkedIn profile or use the parts of each site you actually came for.

-
-
- 03 -

Control it per platform

Choose which distractions disappear, then use the built-in focus and break timers when you need more structure.

-
-
-
- -
-
-

Your browsing data stays yours.

-

FocusTube has no analytics, telemetry, account system or FocusTube-controlled backend. Settings and timer data stay in browser-local storage.

- Read the privacy notes -
-
-
No analyticsNo usage tracking or analytics SDK.
-
No accountNo sign-up, login or cloud profile.
-
Open sourceInspect the source, tests and releases on GitHub.
-
-
- -
-
-

Make your browser quieter.

-

Install FocusTube for free, choose what disappears, and use the sites for what you opened them for.

-
-
- Add to Chrome - Firefox - Edge -
-
-
- - - - diff --git a/scripts/run-test-all.js b/scripts/run-test-all.js index c6af49a..8290149 100644 --- a/scripts/run-test-all.js +++ b/scripts/run-test-all.js @@ -47,7 +47,6 @@ function main() { runSyntaxChecks(); run(process.execPath, [path.join("tests", "package-reproducibility.test.js")]); run(process.execPath, [path.join("tests", "regression.test.js")]); - run(process.execPath, [path.join("tests", "pages-site.test.js")]); run(process.execPath, [path.join("tests", "background-timer.test.js")]); run(process.execPath, [path.join("tests", "playwright-smoke.test.js"), "--build-dir", chromiumBuild], { ...process.env, diff --git a/tests/pages-site.test.js b/tests/pages-site.test.js deleted file mode 100644 index 8d9f3df..0000000 --- a/tests/pages-site.test.js +++ /dev/null @@ -1,19 +0,0 @@ -const assert = require("node:assert/strict"); -const fs = require("node:fs"); -const path = require("node:path"); - -const root = path.resolve(__dirname, ".."); -const read = (file) => fs.readFileSync(path.join(root, file), "utf8"); - -const page = read("index.html"); - -assert.match(page, /FocusTube \| Block Shorts, Reels and distracting feeds<\/title>/); -assert.match(page, /href="docs\/styles\.css"/); -assert.match(page, /href="https:\/\/chromewebstore\.google\.com\/detail\/focustube-distraction-blo\/ppdjgkniggbikifojmkindmbhppmoell"/); -assert.match(page, /href="https:\/\/addons\.mozilla\.org\/addon\/focus-tube\/"/); -assert.match(page, /href="https:\/\/microsoftedge\.microsoft\.com\/addons\/detail\/focustube\/emffahlehkfdlknpmpndaabhigchhoog"/); -assert.match(page, /src="icons\/icon128\.png"/); -assert.doesNotMatch(page, /<script\b/i); -assert.equal(fs.existsSync(path.join(root, "docs", "index.html")), false); - -console.log("Pages entry checks passed.");