From 28e9e4d54678fc8c573cf908396c4e6fa9efedaa Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Sat, 06 Jun 2026 21:50:00 +0800
Subject: [PATCH] Add third screen: tag management copy left, screenshot right
---
docs/index-en.html | 23 +++++++
docs/styles.css | 84 ++++++++++++++++++++++++++++
docs/index.html | 23 +++++++
docs/assets/tags-management.jpg | 0
4 files changed, 130 insertions(+), 0 deletions(-)
diff --git a/docs/assets/tags-management.jpg b/docs/assets/tags-management.jpg
new file mode 100644
index 0000000..51b1b79
--- /dev/null
+++ b/docs/assets/tags-management.jpg
Binary files differ
diff --git a/docs/index-en.html b/docs/index-en.html
index 3ff366b..340dc95 100644
--- a/docs/index-en.html
+++ b/docs/index-en.html
@@ -86,6 +86,29 @@
</div>
</section>
+ <section class="tags" aria-label="Tag-based organization">
+ <div class="layout tags__split">
+ <div class="tags__copy">
+ <h2 class="tags__headline">Tag-based organization</h2>
+ <ul class="tags__points">
+ <li>No more choosing just one folder—an app can belong to multiple tags at once.</li>
+ <li><strong>Multi-color tag system</strong> with custom colors</li>
+ <li>Drag to categorize: drop on a tag name or container; drop on empty space to remove</li>
+ </ul>
+ </div>
+
+ <figure class="tags__art">
+ <img
+ src="assets/tags-management.jpg"
+ alt="TagLauncher tag management with multi-tag apps and custom colors"
+ width="880"
+ height="572"
+ loading="lazy"
+ decoding="async">
+ </figure>
+ </div>
+ </section>
+
<main class="page-main">
<div class="layout">
<section class="card">
diff --git a/docs/index.html b/docs/index.html
index 403e6f7..e329bbd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -86,6 +86,29 @@
</div>
</section>
+ <section class="tags" aria-label="基于标签的管理">
+ <div class="layout tags__split">
+ <div class="tags__copy">
+ <h2 class="tags__headline">基于标签的管理</h2>
+ <ul class="tags__points">
+ <li>再也不用纠结究竟该属于哪个文件夹——一个应用可以同时归类至多个标签。</li>
+ <li><strong>支持多色：标签体系</strong>自定义颜色</li>
+ <li>拖拽式操作：拖到标签名或容器即可归类，拖到空隙就是移除分类</li>
+ </ul>
+ </div>
+
+ <figure class="tags__art">
+ <img
+ src="assets/tags-management.jpg"
+ alt="TagLauncher 标签管理：多标签归类与自定义颜色"
+ width="880"
+ height="572"
+ loading="lazy"
+ decoding="async">
+ </figure>
+ </div>
+ </section>
+
<main class="page-main">
<div class="layout">
<section class="card">
diff --git a/docs/styles.css b/docs/styles.css
index f9501a8..8dbdbe6 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -322,6 +322,80 @@
letter-spacing: 0.01em;
}
+/* Third screen — tag management */
+.tags {
+ padding: 56px 0 64px;
+ background: #ffffff;
+}
+
+.tags__split {
+ display: grid;
+ grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+ gap: 28px 48px;
+ align-items: center;
+}
+
+.tags__headline {
+ margin: 0;
+ font-size: clamp(1.85rem, 3.8vw, 2.7rem);
+ font-weight: 800;
+ letter-spacing: -0.04em;
+ line-height: 1.12;
+ color: #000;
+}
+
+.tags__points {
+ list-style: none;
+ margin: 28px 0 0;
+ padding: 0;
+ display: grid;
+ gap: 18px;
+ max-width: 28em;
+}
+
+.tags__points li {
+ position: relative;
+ padding-left: 22px;
+ font-size: clamp(0.98rem, 1.55vw, 1.1rem);
+ line-height: 1.75;
+ color: #1d1d1f;
+}
+
+.tags__points li::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0.72em;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--accent);
+}
+
+.tags__points strong {
+ font-weight: 700;
+ color: #000;
+}
+
+.tags__art {
+ margin: 0;
+ line-height: 0;
+ justify-self: end;
+ max-width: 540px;
+ width: 100%;
+ border-radius: 12px;
+ overflow: hidden;
+ background: #f5f5f7;
+ box-shadow: 0 10px 28px rgba(30, 45, 90, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.tags__art img {
+ display: block;
+ width: 100%;
+ height: auto;
+}
+
/* Main content */
.page-main {
padding: 56px 0 72px;
@@ -506,6 +580,16 @@
.views__copy {
max-width: 36em;
}
+
+ .tags__split {
+ grid-template-columns: 1fr;
+ gap: 36px;
+ }
+
+ .tags__art {
+ justify-self: center;
+ max-width: 100%;
+ }
}
@media (max-width: 560px) {
--
Gitblit v1.9.3