| docs/assets/hero-shot-grid.jpg | patch | view | raw | blame | history | |
| docs/assets/hero-shot-memo.jpg | patch | view | raw | blame | history | |
| docs/index-en.html | ●●●●● patch | view | raw | blame | history | |
| docs/index.html | ●●●●● patch | view | raw | blame | history | |
| docs/styles.css | ●●●●● patch | view | raw | blame | history |
docs/assets/hero-shot-grid.jpg
@@ -5,12 +5,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TagLauncher — Tag-based Mac app launcher</title> <meta name="description" content="TagLauncher organizes Mac apps with tags: scrollable grid, multi-tag apps, searchable notes, JSON layout backup—beyond Launchpad folders and pages."> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/screenshot-app-grid.jpg"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-shot-grid.jpg"> <link rel="stylesheet" href="styles.css"> <link rel="alternate" hreflang="en" href="index-en.html"> <link rel="alternate" hreflang="zh-Hans" href="index.html"> </head> <body> <body class="page-home"> <header class="site-header"> <div class="layout site-header__bar"> <a class="brand" href="index-en.html"> @@ -30,44 +30,39 @@ </div> </header> <section class="hero" aria-label="Product showcase"> <div class="hero__mosaic"> <figure class="glass-panel glass-panel--main"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-app-grid.jpg" alt="TagLauncher App Grid" width="1024" height="640" fetchpriority="high"> <section class="hero" aria-label="TagLauncher hero"> <div class="layout hero__split"> <div class="hero__copy"> <h1 class="hero__headline">Possibly the best Mac app launcher—anywhere</h1> <p class="hero__lead">Don't mourn Launchpad on macOS 26 Tahoe. It was never great—and it still isn't.</p> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-app-grid.jpg" alt="" width="1024" height="640"> <div class="hero__visual" aria-hidden="true"> <div class="hero__stack"> <figure class="hero-shot hero-shot--back"> <div class="hero-shot__chrome"> <span></span><span></span><span></span> </div> <span class="glass-panel__shine" aria-hidden="true"></span> <div class="hero-shot__screen"> <img src="assets/hero-shot-memo.jpg" alt="" width="1600" height="1040" loading="lazy" decoding="async"> </div> <div class="hero-shot__reflection"> <img src="assets/hero-shot-memo.jpg" alt="" width="1600" height="1040"> </div> </figure> <figure class="glass-panel glass-panel--tags"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-tags.jpg" alt="Colorful tags" width="1400" height="875" loading="lazy"> <figure class="hero-shot hero-shot--front"> <div class="hero-shot__chrome"> <span></span><span></span><span></span> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-tags.jpg" alt="" width="1400" height="875"> <div class="hero-shot__screen"> <img src="assets/hero-shot-grid.jpg" alt="TagLauncher App Grid" width="1600" height="1040" fetchpriority="high" decoding="async"> </div> <span class="glass-panel__shine" aria-hidden="true"></span> </div> </figure> <figure class="glass-panel glass-panel--memo"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-notes.jpg" alt="Per-app notes" width="1024" height="640" loading="lazy"> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-notes.jpg" alt="" width="1024" height="640"> </div> <span class="glass-panel__shine" aria-hidden="true"></span> <div class="hero-shot__reflection"> <img src="assets/hero-shot-grid.jpg" alt="" width="1600" height="1040"> </div> </figure> </div> <div class="layout"> <p class="hero__tagline">Organize Mac apps with tags—not folders</p> </div> </div> </section>
@@ -5,12 +5,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TagLauncher — 标签化 Mac 应用启动器</title> <meta name="description" content="TagLauncher：用标签管理 Mac 应用，可滚动网格、多标签归类、应用备忘、布局备份。比 Launchpad 更适合应用很多的用户。"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/screenshot-app-grid.jpg"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-shot-grid.jpg"> <link rel="stylesheet" href="styles.css"> <link rel="alternate" hreflang="en" href="index-en.html"> <link rel="alternate" hreflang="zh-Hans" href="index.html"> </head> <body> <body class="page-home"> <header class="site-header"> <div class="layout site-header__bar"> <a class="brand" href="index.html"> @@ -30,44 +30,39 @@ </div> </header> <section class="hero" aria-label="产品展示"> <div class="hero__mosaic"> <figure class="glass-panel glass-panel--main"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-app-grid.jpg" alt="TagLauncher 应用网格" width="1024" height="640" fetchpriority="high"> <section class="hero" aria-label="TagLauncher 宣传主图"> <div class="layout hero__split"> <div class="hero__copy"> <h1 class="hero__headline">在全球，这可能是Mac最好用的应用启动台</h1> <p class="hero__lead">不用怀念 macOS 26 Tahoe 上消失的 Launchpad（启动台），因为它一直都不好用，从来就没好用过</p> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-app-grid.jpg" alt="" width="1024" height="640"> <div class="hero__visual" aria-hidden="true"> <div class="hero__stack"> <figure class="hero-shot hero-shot--back"> <div class="hero-shot__chrome"> <span></span><span></span><span></span> </div> <span class="glass-panel__shine" aria-hidden="true"></span> <div class="hero-shot__screen"> <img src="assets/hero-shot-memo.jpg" alt="" width="1600" height="1040" loading="lazy" decoding="async"> </div> <div class="hero-shot__reflection"> <img src="assets/hero-shot-memo.jpg" alt="" width="1600" height="1040"> </div> </figure> <figure class="glass-panel glass-panel--tags"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-tags.jpg" alt="彩色标签与分类" width="1400" height="875" loading="lazy"> <figure class="hero-shot hero-shot--front"> <div class="hero-shot__chrome"> <span></span><span></span><span></span> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-tags.jpg" alt="" width="1400" height="875"> <div class="hero-shot__screen"> <img src="assets/hero-shot-grid.jpg" alt="TagLauncher 应用网格界面" width="1600" height="1040" fetchpriority="high" decoding="async"> </div> <span class="glass-panel__shine" aria-hidden="true"></span> </div> </figure> <figure class="glass-panel glass-panel--memo"> <div class="glass-panel__frame"> <div class="glass-panel__body"> <img src="assets/screenshot-notes.jpg" alt="应用用途备忘" width="1024" height="640" loading="lazy"> </div> <div class="glass-panel__reflection" aria-hidden="true"> <img src="assets/screenshot-notes.jpg" alt="" width="1024" height="640"> </div> <span class="glass-panel__shine" aria-hidden="true"></span> <div class="hero-shot__reflection"> <img src="assets/hero-shot-grid.jpg" alt="" width="1600" height="1040"> </div> </figure> </div> <div class="layout"> <p class="hero__tagline">用标签，而不是文件夹，整理你的 Mac 应用</p> </div> </div> </section>
@@ -12,7 +12,7 @@ --radius: 16px; --shadow: 0 20px 50px rgba(30, 45, 90, 0.12); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif; --hero-bg: linear-gradient(155deg, #eef2fa 0%, #e2e9f6 42%, #d6dff0 100%); --hero-bg: #ffffff; } * { @@ -147,130 +147,144 @@ display: none !important; } /* Hero — light studio, glass screenshots + reflection */ .page-home .site-header { background: rgba(255, 255, 255, 0.88); } /* Hero — reference layout: copy left, stacked screenshots right */ .hero { position: relative; width: 100%; min-height: calc(100svh - var(--header-h)); min-height: calc(100vh - var(--header-h)); padding: 40px 0 56px; overflow: hidden; padding: 48px 0 64px; background: var(--hero-bg); overflow: hidden; } .hero__mosaic { .hero__split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 28px 40px; align-items: center; min-height: calc(100svh - var(--header-h) - 112px); min-height: calc(100vh - var(--header-h) - 112px); } .hero__copy { padding: 12px 0; } .hero__headline { margin: 0; font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: #111114; } .hero__lead { margin: 22px 0 0; font-size: clamp(0.98rem, 1.6vw, 1.12rem); line-height: 1.65; color: var(--muted); max-width: 26em; } .hero__visual { position: relative; width: min(1040px, 92vw); height: min(560px, 58vh); margin: 0 auto; perspective: 1600px; perspective-origin: 50% 40%; min-height: 380px; } .glass-panel { .hero__stack { position: relative; width: 100%; height: 100%; min-height: 380px; perspective: 1800px; perspective-origin: 42% 38%; } .hero-shot { position: absolute; margin: 0; width: 88%; transform-style: preserve-3d; } .glass-panel__frame { border-radius: 22px; padding: 11px; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 28px 70px rgba(40, 55, 100, 0.18), 0 10px 28px rgba(40, 55, 100, 0.1); .hero-shot__chrome { display: flex; gap: 7px; padding: 10px 12px 8px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #f7f8fb 0%, #eceff5 100%); border: 1px solid rgba(0, 0, 0, 0.08); border-bottom: none; } .glass-panel__body { border-radius: 14px; .hero-shot__chrome span { width: 11px; height: 11px; border-radius: 50%; background: #d5d9e2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .hero-shot__chrome span:nth-child(1) { background: #ff6b6b; } .hero-shot__chrome span:nth-child(2) { background: #ffd166; } .hero-shot__chrome span:nth-child(3) { background: #6ee7a8; } .hero-shot__screen { border-radius: 0 0 14px 14px; overflow: hidden; line-height: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px rgba(30, 45, 90, 0.14), 0 8px 20px rgba(30, 45, 90, 0.08); } .glass-panel__body img { .hero-shot__screen img { display: block; width: 100%; height: auto; } .glass-panel__shine { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: linear-gradient( 125deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%, transparent 70%, rgba(255, 255, 255, 0.15) 100% ); } .glass-panel__reflection { margin-top: 10px; padding: 0 11px 0; .hero-shot__reflection { margin-top: 8px; transform: scaleY(-1); opacity: 0.26; filter: blur(0.3px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 72%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 72%); opacity: 0.22; filter: blur(0.4px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 68%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 68%); border-radius: 14px; overflow: hidden; } .glass-panel__reflection img { .hero-shot__reflection img { display: block; width: 100%; height: auto; border-radius: 14px; } .glass-panel--main { left: 50%; top: 6%; width: 62%; transform: translateX(-50%) rotateY(-7deg) rotateX(7deg) translateZ(30px); z-index: 2; } .glass-panel--memo { .hero-shot--back { right: -2%; bottom: 2%; width: 44%; transform: rotateY(11deg) rotateX(-3deg) translateZ(80px); z-index: 4; top: 2%; width: 72%; transform: rotateY(-10deg) rotateX(4deg) translateZ(0); opacity: 0.92; z-index: 1; } .glass-panel--tags { left: -4%; top: 18%; width: 42%; transform: rotateY(-12deg) rotateX(4deg) translateZ(50px); z-index: 3; } .hero__tagline { margin: 36px auto 0; text-align: center; font-size: clamp(1.45rem, 3.8vw, 2.35rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; color: #1a1a22; max-width: 16em; } .hero__tagline-sub { margin: 12px auto 0; text-align: center; font-size: 1.02rem; color: var(--muted); max-width: 28em; .hero-shot--front { left: 0; bottom: 0; width: 92%; transform: rotateY(-8deg) rotateX(5deg) translateZ(48px); z-index: 2; } /* Main content */ @@ -434,25 +448,27 @@ justify-self: end; } .hero__mosaic { height: min(480px, 52vh); .hero__split { grid-template-columns: 1fr; min-height: auto; gap: 32px; } .glass-panel--main { .hero__visual { min-height: 320px; } .hero__stack { min-height: 320px; } .hero-shot--back { width: 78%; top: 4%; right: -4%; } .glass-panel--memo { width: 52%; right: -6%; bottom: 0; } .glass-panel--tags { width: 50%; left: -8%; top: 28%; .hero-shot--front { width: 94%; } } @@ -462,15 +478,14 @@ } .hero { padding-bottom: 40px; padding: 32px 0 48px; } .hero__mosaic { height: 400px; .hero__stack { min-height: 260px; } .glass-panel--memo, .glass-panel--tags { opacity: 0.92; .hero-shot--back { opacity: 0.88; } }
