diff --git a/astro/pnpm-workspace.yaml b/astro/pnpm-workspace.yaml index 6c1840d..c0a976c 100644 --- a/astro/pnpm-workspace.yaml +++ b/astro/pnpm-workspace.yaml @@ -1,6 +1,6 @@ allowBuilds: - esbuild: set this to true or false - sharp: set this to true or false + esbuild: true + sharp: true onlyBuiltDependencies: - esbuild - - sharp + - sharp \ No newline at end of file diff --git a/astro/src/content/extensions/text-tools.md b/astro/src/content/extensions/text-tools.md new file mode 100644 index 0000000..c5d9cff --- /dev/null +++ b/astro/src/content/extensions/text-tools.md @@ -0,0 +1,35 @@ +--- +name: Text Tools +tagline: Convert text instantly — UPPERCASE, lowercase, camelCase, kebab-case, and 9 more. One click. Free. +features: + - "12 transforms: UPPERCASE, lowercase, Title Case, Sentence case" + - "Code cases: camelCase, PascalCase, kebab-case, snake_case, CONSTANT_CASE" + - "Utilities: Reverse, Trim, Remove line breaks" + - "One-click copy to clipboard" + - "100% free, no premium, no ads, no tracking" +screenshot: "" +chromeStoreUrl: "" +downloadUrl: "https://git.greasysprocket.com/monyi/text-tools/releases" +--- + +Text Tools is a popup extension that lives in your toolbar. Click the icon, paste your text, +pick a transform, copy the result. That's it. + +## All transforms + +| Category | Transforms | +|----------|-----------| +| Case | UPPERCASE, lowercase, Title Case, Sentence case | +| Code | camelCase, PascalCase, kebab-case, snake_case, CONSTANT_CASE | +| Utility | Reverse, Trim, Remove line breaks | + +## Privacy + +Text Tools doesn't collect any data. No analytics, no tracking, no telemetry. +Everything runs locally in your browser. Nothing is sent to any server. + +## Free forever + +Text Tools is 100% free. All 12 transforms are available to everyone. There are no +premium tiers, no locked features, no usage limits. If you enjoy it, you can +[buy me a coffee](/coffee) — but there's zero pressure. \ No newline at end of file diff --git a/astro/src/layouts/Base.astro b/astro/src/layouts/Base.astro index ce196a7..a96e491 100644 --- a/astro/src/layouts/Base.astro +++ b/astro/src/layouts/Base.astro @@ -1,4 +1,6 @@ --- +import '../styles/global.css'; + interface Props { title: string; description?: string; @@ -13,33 +15,125 @@ const { title, description = 'Free Chrome extensions — no limits, no catch.' } + + + {title} -
+ + + + +
+ + \ No newline at end of file diff --git a/astro/src/pages/[slug].astro b/astro/src/pages/[slug].astro index 8e642c7..09f4ea1 100644 --- a/astro/src/pages/[slug].astro +++ b/astro/src/pages/[slug].astro @@ -18,10 +18,10 @@ const { Content } = await ext.render();
- 100% Free +
{ext.slug}

{ext.data.name}

-

{ext.data.tagline}

-
+

{ext.data.tagline}

+
{ext.data.chromeStoreUrl && ( Add to Chrome @@ -44,14 +44,16 @@ const { Content } = await ext.render();
+
Features
{ext.data.features?.map((feature: string) => (
-

✅ {feature}

+ ✓ +

{feature}

))}
-
+
diff --git a/astro/src/pages/coffee.astro b/astro/src/pages/coffee.astro index 40286d2..6214991 100644 --- a/astro/src/pages/coffee.astro +++ b/astro/src/pages/coffee.astro @@ -2,26 +2,26 @@ import Base from '../layouts/Base.astro'; --- - +
- No pressure · Everything is free -

Buy me a coffee ☕

+ no pressure · everything is free +

Buy me a coffee

- If you enjoy my extensions and want to support my work, consider buying me a coffee. - Every contribution helps me keep building free tools for everyone. + If you enjoy my extensions and want to support my work, + consider buying me a coffee. Every contribution helps me keep building free tools.

-
-
- - ☕
Ko-fiBuy me a coffee - -
-

+

+ +
☕
+
Ko-fi
+
Buy me a coffee
+ +

All extensions are and will always be 100% free. This is completely voluntary — no features are locked behind donations, and there are no premium tiers.

diff --git a/astro/src/pages/feedback.astro b/astro/src/pages/feedback.astro index 8fd48c0..9121e6f 100644 --- a/astro/src/pages/feedback.astro +++ b/astro/src/pages/feedback.astro @@ -5,47 +5,53 @@ const extSlug = Astro.url.searchParams.get('ext') || ''; --- -
+
-

Tell us why you left

+ feedback +

Share your thoughts

Your feedback helps us improve. No email required, no account needed.

-
+
-
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro index ac0e5ba..c6e6021 100644 --- a/astro/src/pages/index.astro +++ b/astro/src/pages/index.astro @@ -8,31 +8,33 @@ const extensions = await getCollection('extensions');
- 100% Free · No limits · No catch -

Chrome extensions that just work

+ 100% free · no limits · no catch +

Chrome extensions
that just work

- We build small, useful browser extensions. They're free, they'll always be free, - and they'll never nag you for money. If you love them, you can buy us a coffee. + Small, useful browser extensions. Free forever, no premium tiers, + no nag screens. If you love them, buy me a coffee.

-
-

Extensions

+
Extensions
+

What I've built so far

{extensions.map((ext) => ( @@ -42,13 +44,17 @@ const extensions = await getCollection('extensions');
-
-

Why free?

-

- We believe useful tools shouldn't be locked behind paywalls. Every extension is - fully featured, no premium tiers, no trial periods. If you want to support development, - you can buy us a coffee — but there's zero pressure. -

+
+
+
The model
+

Why free?

+

+ Useful tools shouldn't be locked behind paywalls. Every extension is + fully featured — no premium tiers, no trial periods, no locked features. + If you want to support development, you can buy me a coffee. + There's zero pressure. +

+
\ No newline at end of file diff --git a/astro/src/styles/global.css b/astro/src/styles/global.css index 229bde4..774b0d8 100644 --- a/astro/src/styles/global.css +++ b/astro/src/styles/global.css @@ -1,25 +1,47 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); + :root { - --bg: #0c0a09; - --bg-elevated: #1c1917; - --bg-card: #1e1b18; - --border: #2e2a27; - --text: #fafaf9; - --text-muted: #a8a29e; + --bg: #0a0a0b; + --bg-soft: #111113; + --bg-card: #161618; + --bg-elevated: #1c1c1f; + --border: #262629; + --border-bright: #3a3a3e; + --text: #f4f4f5; + --text-secondary: #c4c4c8; + --text-muted: #71717a; --accent: #f97316; + --accent-soft: rgba(249, 115, 22, 0.12); --accent-hover: #fb923c; - --radius: 8px; - --max-width: 960px; + --accent-press: #ea580c; + --positive: #22c55e; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --max-width: 1040px; + --font-sans: 'Inter', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; + --header-h: 56px; } [data-theme="light"] { - --bg: #fafaf9; - --bg-elevated: #ffffff; + --bg: #ffffff; + --bg-soft: #f9f9f9; --bg-card: #ffffff; - --border: #e7e5e4; - --text: #1c1917; - --text-muted: #78716c; + --bg-elevated: #f4f4f5; + --border: #e4e4e7; + --border-bright: #d4d4d8; + --text: #18181b; + --text-secondary: #3f3f46; + --text-muted: #71717a; --accent: #c2410c; + --accent-soft: rgba(194, 65, 12, 0.08); --accent-hover: #9a3412; + --accent-press: #7c2d12; +} + +[data-theme="light"] .site-header { + background: rgba(255, 255, 255, 0.85); } * { margin: 0; padding: 0; box-sizing: border-box; } @@ -27,11 +49,14 @@ html { scroll-behavior: smooth; } body { - font-family: system-ui, -apple-system, sans-serif; + font-family: var(--font-sans); background: var(--bg); color: var(--text); - line-height: 1.6; + line-height: 1.5; min-height: 100vh; + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } @@ -40,201 +65,673 @@ a:hover { color: var(--accent-hover); } .container { max-width: var(--max-width); margin: 0 auto; - padding: 0 24px; + padding: 0 16px; } -/* Header */ +@media (min-width: 768px) { + .container { padding: 0 32px; } +} + +/* ============ HEADER (mobile-first) ============ */ .site-header { border-bottom: 1px solid var(--border); - padding: 16px 0; + padding: 12px 0; position: sticky; top: 0; - background: var(--bg); - z-index: 100; + background: rgba(10, 10, 11, 0.85); + backdrop-filter: blur(12px); + z-index: 200; + transition: background 200ms ease; } .site-header .container { display: flex; align-items: center; justify-content: space-between; + height: 32px; } .logo { - font-weight: 700; - font-size: 18px; + font-weight: 800; + font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 8px; + letter-spacing: -0.01em; } -.logo span { color: var(--accent); } +.logo-icon { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + background: var(--accent); + border-radius: var(--radius-sm); + color: #fff; + font-size: 12px; + flex-shrink: 0; +} -nav { display: flex; gap: 24px; } -nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; } -nav a:hover { color: var(--text); } +/* Desktop nav: hidden on mobile */ +.nav-desktop { + display: none; + align-items: center; + gap: 28px; +} -/* Hero */ +.nav-desktop a { + color: var(--text-secondary); + font-size: 14px; + font-weight: 500; + transition: color 150ms ease; +} + +.nav-desktop a:hover { color: var(--text); } + +.theme-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-muted); + cursor: pointer; + padding: 4px 8px; + border-radius: var(--radius-sm); + font-size: 13px; + transition: all 150ms ease; +} + +.theme-toggle:hover { + border-color: var(--border-bright); + color: var(--text); +} + +/* Burger: visible on mobile, hidden on desktop */ +.burger { + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.burger span { + display: block; + width: 22px; + height: 2.5px; + background: var(--text); + border-radius: 2px; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + opacity 200ms ease; + transform-origin: center; +} + +/* X animation: top line rotates down, bottom line rotates up, middle fades */ +.site-header.menu-open .burger span:nth-child(1) { + transform: translateY(7.5px) rotate(45deg); +} + +.site-header.menu-open .burger span:nth-child(2) { + opacity: 0; + transform: scaleX(0); +} + +.site-header.menu-open .burger span:nth-child(3) { + transform: translateY(-7.5px) rotate(-45deg); +} + +/* Overlay menu: fixed panel sliding over content */ +.nav-overlay { + position: fixed; + top: 0; + right: 0; + width: 280px; + max-width: 85vw; + height: 100vh; + background: var(--bg-soft); + border-left: 1px solid var(--border); + z-index: 300; + transform: translateX(100%); + transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); + padding: 72px 20px 20px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.site-header.menu-open .nav-overlay, +.nav-overlay[aria-hidden="false"] { + transform: translateX(0); +} + +.nav-overlay-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(2px); + z-index: 250; + opacity: 0; + pointer-events: none; + transition: opacity 300ms ease; +} + +.nav-overlay-backdrop[aria-hidden="false"] { + opacity: 1; + pointer-events: auto; +} + +.nav-overlay-menu { + display: flex; + flex-direction: column; + gap: 0; +} + +.nav-overlay-menu a { + display: block; + padding: 14px 0; + color: var(--text-secondary); + font-size: 16px; + font-weight: 500; + border-bottom: 1px solid var(--border); + transition: color 150ms ease, padding-left 150ms ease; + -webkit-tap-highlight-color: transparent; +} + +.nav-overlay-menu a:last-of-type { + border-bottom: none; +} + +.nav-overlay-menu a:hover, .nav-overlay-menu a:active { + color: var(--accent); + padding-left: 8px; +} + +.theme-toggle-mobile { + display: flex; + align-items: center; + gap: 8px; + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 14px 0; + font-size: 16px; + font-weight: 500; + font-family: inherit; + -webkit-tap-highlight-color: transparent; +} + +.theme-toggle-mobile:hover { color: var(--text); } + +/* Desktop: show desktop nav, hide burger + overlay */ +@media (min-width: 768px) { + .nav-desktop { display: flex; } + .burger { display: none; } + .nav-overlay { display: none; } + .nav-overlay-backdrop { display: none; } +} + +/* ============ HERO (mobile-first) ============ */ .hero { - padding: 80px 0 60px; + padding: 48px 0 40px; text-align: center; + position: relative; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 600px; + height: 320px; + background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%); + pointer-events: none; + z-index: -1; +} + +.hero .eyebrow { + display: inline-block; + padding: 5px 12px; + background: var(--accent-soft); + color: var(--accent); + border: 1px solid rgba(249, 115, 22, 0.2); + border-radius: var(--radius-sm); + font-size: 12px; + font-weight: 600; + font-family: var(--font-mono); + margin-bottom: 20px; +} + +[data-theme="light"] .hero .eyebrow { + border-color: rgba(194, 65, 12, 0.2); } .hero h1 { - font-size: 48px; + font-size: 34px; font-weight: 800; - letter-spacing: -0.03em; + letter-spacing: -0.035em; + line-height: 1.1; margin-bottom: 16px; } .hero p { - font-size: 20px; - color: var(--text-muted); - max-width: 600px; - margin: 0 auto 32px; + font-size: 16px; + color: var(--text-secondary); + max-width: 480px; + margin: 0 auto 28px; + line-height: 1.55; } -.hero .badge { - display: inline-block; - padding: 6px 16px; - background: color-mix(in srgb, var(--accent) 15%, transparent); - color: var(--accent); - border-radius: 9999px; - font-size: 13px; - font-weight: 600; - margin-bottom: 24px; -} - -/* Extension grid */ -.ext-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 20px; - padding: 40px 0; -} - -.ext-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 24px; - transition: border-color 200ms ease; -} - -.ext-card:hover { - border-color: var(--accent); -} - -.ext-card h3 { - font-size: 18px; - margin-bottom: 8px; -} - -.ext-card p { - color: var(--text-muted); - font-size: 14px; - margin-bottom: 16px; -} - -.ext-card .links { +.hero-actions { display: flex; - gap: 12px; + gap: 10px; + justify-content: center; + flex-wrap: wrap; } -.ext-card .links a { - font-size: 14px; - font-weight: 500; +@media (min-width: 768px) { + .hero { padding: 96px 0 64px; } + .hero h1 { font-size: 52px; } + .hero p { font-size: 19px; max-width: 540px; } + .hero .eyebrow { font-size: 13px; padding: 6px 14px; margin-bottom: 28px; } } -/* Buttons */ +/* ============ BUTTONS ============ */ .btn { - display: inline-block; - padding: 12px 24px; - border-radius: var(--radius); + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + border-radius: var(--radius-md); font-weight: 600; - font-size: 15px; - transition: all 200ms ease; + font-size: 14px; + transition: all 150ms ease; cursor: pointer; border: none; + font-family: inherit; + text-decoration: none; + -webkit-tap-highlight-color: transparent; } .btn-primary { background: var(--accent); color: #fff; } + .btn-primary:hover { background: var(--accent-hover); color: #fff; + transform: translateY(-1px); +} + +.btn-primary:active { + background: var(--accent-press); + transform: translateY(0); } .btn-outline { - background: transparent; - border: 1px solid var(--border); + background: var(--bg-card); + border: 1px solid var(--border-bright); color: var(--text); } + .btn-outline:hover { border-color: var(--accent); color: var(--text); + background: var(--bg-elevated); } -/* Sections */ +/* ============ SECTIONS ============ */ .section { - padding: 60px 0; + padding: 48px 0; border-top: 1px solid var(--border); } +@media (min-width: 768px) { + .section { padding: 64px 0; } +} + +.section-label { + font-family: var(--font-mono); + font-size: 12px; + color: var(--accent); + font-weight: 500; + margin-bottom: 10px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + .section h2 { - font-size: 32px; + font-size: 26px; font-weight: 700; + letter-spacing: -0.025em; margin-bottom: 24px; + line-height: 1.2; +} + +@media (min-width: 768px) { + .section h2 { font-size: 32px; margin-bottom: 32px; } +} + +/* ============ EXTENSION GRID ============ */ +.ext-grid { + display: grid; + grid-template-columns: 1fr; + gap: 12px; +} + +@media (min-width: 520px) { + .ext-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } +} + +.ext-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 20px; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +@media (min-width: 768px) { + .ext-card { padding: 28px; } +} + +.ext-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: var(--accent); + transform: scaleX(0); + transform-origin: left; + transition: transform 300ms ease; +} + +.ext-card:hover, .ext-card:active { + border-color: var(--border-bright); + background: var(--bg-elevated); +} + +.ext-card:hover::before { + transform: scaleX(1); +} + +.ext-card h3 { + font-size: 18px; + font-weight: 700; + margin-bottom: 6px; + letter-spacing: -0.01em; +} + +@media (min-width: 768px) { + .ext-card h3 { font-size: 20px; } +} + +.ext-card p { + color: var(--text-muted); + font-size: 14px; + margin-bottom: 16px; + line-height: 1.5; +} + +.ext-card .links { + display: flex; + gap: 16px; + align-items: center; + flex-wrap: wrap; +} + +.ext-card .links a { + font-size: 14px; + font-weight: 600; +} + +.ext-tag { + display: inline-block; + padding: 3px 8px; + background: var(--bg-soft); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + font-family: var(--font-mono); + font-size: 11px; + color: var(--text-muted); + margin-bottom: 12px; +} + +/* ============ WHY FREE ============ */ +.why-free { + text-align: center; + max-width: 560px; + margin: 0 auto; +} + +.why-free p { + color: var(--text-secondary); + font-size: 16px; + line-height: 1.6; +} + +@media (min-width: 768px) { + .why-free p { font-size: 17px; } +} + +.why-free p a { font-weight: 600; } + +/* ============ EXTENSION LANDING ============ */ +.ext-hero { + padding: 40px 0 32px; +} + +.ext-hero .container { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + align-items: center; +} + +@media (min-width: 768px) { + .ext-hero { padding: 64px 0 48px; } + .ext-hero .container { + grid-template-columns: 1.1fr 1fr; + gap: 48px; + } +} + +.ext-hero .info h1 { + font-size: 30px; + font-weight: 800; + letter-spacing: -0.03em; + margin-bottom: 12px; + line-height: 1.1; +} + +@media (min-width: 768px) { + .ext-hero .info h1 { font-size: 42px; } +} + +.ext-hero .info .tagline { + color: var(--text-secondary); + font-size: 16px; + margin-bottom: 24px; + line-height: 1.5; +} + +@media (min-width: 768px) { + .ext-hero .info .tagline { font-size: 18px; margin-bottom: 28px; } +} + +.ext-hero .actions { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.ext-hero .screenshot { + border-radius: var(--radius-lg); + border: 1px solid var(--border); + overflow: hidden; + background: var(--bg-card); + aspect-ratio: 16/10; +} + +@media (min-width: 768px) { + .ext-hero .screenshot { aspect-ratio: 4/3; } +} + +.ext-hero .screenshot img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.feature-list { + display: grid; + grid-template-columns: 1fr; + gap: 10px; + padding: 12px 0; +} + +@media (min-width: 520px) { + .feature-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 16px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +.feature-item .check { + color: var(--positive); + font-size: 16px; + flex-shrink: 0; + margin-top: 1px; +} + +.feature-item h4 { + font-size: 14px; + font-weight: 600; + line-height: 1.4; +} + +/* ============ PROSE ============ */ +.prose { + max-width: 65ch; + margin-top: 24px; +} + +.prose h2 { + font-size: 20px; + font-weight: 700; + margin: 28px 0 14px; letter-spacing: -0.02em; } -/* Footer */ -.site-footer { - border-top: 1px solid var(--border); - padding: 40px 0; - text-align: center; - color: var(--text-muted); - font-size: 14px; +@media (min-width: 768px) { + .prose h2 { font-size: 24px; margin: 32px 0 16px; } } -.site-footer a { color: var(--text-muted); } -.site-footer a:hover { color: var(--text); } +.prose p { + color: var(--text-secondary); + margin-bottom: 14px; + font-size: 15px; +} -/* Feedback form */ -.feedback-form { +.prose table { + width: 100%; + border-collapse: collapse; + margin: 14px 0; + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.prose th, .prose td { + padding: 8px 12px; + border: 1px solid var(--border); + font-size: 13px; + text-align: left; + white-space: nowrap; +} + +.prose th { + background: var(--bg-soft); + font-weight: 600; +} + +/* ============ FEEDBACK FORM ============ */ +.feedback-wrap { max-width: 480px; - margin: 40px auto; + margin: 24px auto; +} + +.feedback-form-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 24px; +} + +@media (min-width: 768px) { + .feedback-form-card { padding: 32px; } } .form-group { - margin-bottom: 20px; + margin-bottom: 18px; } .form-group label { display: block; - font-size: 14px; + font-size: 13px; font-weight: 600; - margin-bottom: 6px; - color: var(--text); + margin-bottom: 8px; + color: var(--text-secondary); +} + +.form-group label .optional { + color: var(--text-muted); + font-weight: 400; } .form-group select, .form-group textarea { width: 100%; - padding: 10px 12px; - background: var(--bg-elevated); + padding: 12px 14px; + background: var(--bg-soft); border: 1px solid var(--border); - border-radius: var(--radius); + border-radius: var(--radius-md); color: var(--text); - font-size: 14px; + font-size: 16px; /* 16px prevents iOS zoom on focus */ font-family: inherit; + transition: border-color 150ms ease; + -webkit-appearance: none; + appearance: none; } -.form-group textarea { - min-height: 100px; - resize: vertical; +.form-group select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 14px center; + padding-right: 36px; } .form-group select:focus, @@ -243,118 +740,170 @@ nav a:hover { color: var(--text); } border-color: var(--accent); } +.form-group textarea { + min-height: 100px; + resize: vertical; +} + .form-actions { display: flex; - gap: 12px; + gap: 10px; justify-content: flex-end; + margin-top: 20px; + flex-wrap: wrap; } .form-success { text-align: center; - padding: 40px; - color: var(--text-muted); + padding: 32px 24px; } -.form-success h2 { color: var(--accent); } - -/* Coffee page */ -.coffee-options { +.form-success .success-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(34, 197, 94, 0.12); + color: var(--positive); display: flex; - gap: 16px; + align-items: center; justify-content: center; - flex-wrap: wrap; - margin: 40px 0; + margin: 0 auto 20px; + font-size: 24px; } -.coffee-btn { +.form-success h2 { + font-size: 20px; + font-weight: 700; + margin-bottom: 8px; + color: var(--text); +} + +.form-success p { + color: var(--text-muted); + font-size: 15px; +} + +/* ============ COFFEE PAGE ============ */ +.coffee-page { + text-align: center; +} + +.coffee-card { + display: inline-block; + padding: 32px 40px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + transition: all 200ms ease; + -webkit-tap-highlight-color: transparent; +} + +.coffee-card:hover, .coffee-card:active { + border-color: var(--accent); + transform: translateY(-2px); +} + +.coffee-icon { + font-size: 40px; + margin-bottom: 14px; +} + +@media (min-width: 768px) { + .coffee-card { padding: 40px 48px; } + .coffee-icon { font-size: 48px; } +} + +.coffee-card .amount { + font-size: 24px; + font-weight: 800; + letter-spacing: -0.02em; +} + +@media (min-width: 768px) { + .coffee-card .amount { font-size: 28px; } +} + +.coffee-card .label { + font-size: 13px; + color: var(--text-muted); + font-weight: 500; + margin-top: 4px; +} + +.coffee-note { + max-width: 460px; + margin: 28px auto 0; + color: var(--text-muted); + font-size: 15px; + line-height: 1.5; +} + +/* ============ FOOTER ============ */ +.site-footer { + border-top: 1px solid var(--border); + padding: 32px 0; +} + +.site-footer .container { display: flex; flex-direction: column; + gap: 16px; + align-items: center; + text-align: center; +} + +.site-footer .footer-brand { + display: flex; align-items: center; gap: 8px; - padding: 24px 32px; - background: var(--bg-card); - border: 2px solid var(--border); - border-radius: var(--radius); - color: var(--text); - font-weight: 700; - font-size: 24px; - min-width: 120px; - transition: all 200ms ease; + color: var(--text-secondary); + font-size: 14px; } -.coffee-btn:hover { - border-color: var(--accent); - color: var(--text); +.site-footer .footer-links { + display: flex; + gap: 24px; } -.coffee-btn span { - font-size: 13px; - font-weight: 400; +.site-footer a { color: var(--text-muted); + font-size: 14px; + font-weight: 500; } -/* Landing page (per-extension) */ -.ext-hero { - padding: 60px 0 40px; +.site-footer a:hover { color: var(--text); } + +@media (min-width: 768px) { + .site-footer { padding: 48px 0; } + .site-footer .container { + flex-direction: row; + justify-content: space-between; + text-align: left; + } } -.ext-hero .container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 40px; - align-items: center; +/* ============ ACCESSIBILITY ============ */ +.burger:focus-visible, +.theme-toggle:focus-visible, +.btn:focus-visible, +.form-group select:focus-visible, +.form-group textarea:focus-visible, +.ext-card a:focus-visible, +.nav-mobile a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; } -.ext-hero .info h1 { - font-size: 36px; - font-weight: 800; - margin-bottom: 12px; +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } } -.ext-hero .info p { - color: var(--text-muted); - font-size: 17px; - margin-bottom: 24px; -} - -.ext-hero .screenshot { - border-radius: var(--radius); - border: 1px solid var(--border); - overflow: hidden; -} - -.ext-hero .screenshot img { - width: 100%; - display: block; -} - -.feature-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: 16px; - padding: 20px 0; -} - -.feature-item { - padding: 16px; - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: var(--radius); -} - -.feature-item h4 { - font-size: 15px; - margin-bottom: 4px; -} - -.feature-item p { - font-size: 13px; - color: var(--text-muted); -} - -@media (max-width: 720px) { - .hero h1 { font-size: 32px; } - .hero p { font-size: 16px; } - .ext-hero .container { grid-template-columns: 1fr; } - .ext-hero .screenshot { order: -1; } +/* Prevent text selection on burger tap */ +.burger { + -webkit-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; } \ No newline at end of file diff --git a/feedback-svc/main.go b/feedback-svc/main.go index 8147427..4e731a2 100644 --- a/feedback-svc/main.go +++ b/feedback-svc/main.go @@ -174,7 +174,9 @@ func main() { func sendDiscordNotification(webhookURL string, req FeedbackRequest) { reasonLabels := map[string]string{ - "not-needed": "Didn't need it", + "love-it": "Love it!", + "works-fine": "Works as expected", + "not-needed": "Don't need it", "too-many": "Too many extensions", "bugs": "Bugs or issues", "alternative": "Prefer an alternative", @@ -203,7 +205,7 @@ func sendDiscordNotification(webhookURL string, req FeedbackRequest) { payload := map[string]interface{}{ "embeds": []map[string]interface{}{ { - "title": "📋 Uninstall Feedback", + "title": "📋 Feedback", "description": description, "color": 0xf97316, "timestamp": time.Now().UTC().Format(time.RFC3339),