Add seventh screen: offline privacy with shield visual

Ariver

2026-06-06 8de3bcf645c4d3061e6244dc900e65f0113ccee1

Add seventh screen: offline privacy with shield visual

Text-left layout on white background with headline, feature bullets,
and shield icon extracted from the reference design.

 docs/assets/shield-check.png

 docs/index-en.html

@@ -171,6 +171,41 @@
    </div>
  </section>

  <section class="privacy" aria-label="Offline privacy">
    <div class="layout privacy__split">
      <div class="privacy__copy">
        <h2 class="privacy__headline">100% offline, 100% ad-free</h2>
        <p class="privacy__lead">Data stays on your device—no analytics SDK, no ads. Never needs the network.</p>

        <div class="privacy__feature">
          <h3 class="privacy__feature-title">Privacy matters</h3>
          <p class="privacy__feature-text">TagLauncher never touches your privacy. Every line of code is built for local efficiency.</p>
        </div>

        <div class="privacy__feature">
          <h3 class="privacy__feature-title privacy__feature-title--accent">
            <span class="privacy__feature-icon" aria-hidden="true"></span>
            Pure &amp; native
          </h3>
          <p class="privacy__feature-text">No bloated network components—fast launch, zero background footprint.</p>
        </div>

        <p class="privacy__protocol">TagLauncher Security Protocol</p>
      </div>

      <figure class="privacy__art">
        <img
          src="assets/shield-check.png"
          alt=""
          width="379"
          height="437"
          loading="lazy"
          decoding="async"
          role="presentation">
      </figure>
    </div>
  </section>

  <main class="page-main">
    <div class="layout">
      <section class="card">

 docs/index.html

@@ -171,6 +171,41 @@
    </div>
  </section>

  <section class="privacy" aria-label="离线隐私">
    <div class="layout privacy__split">
      <div class="privacy__copy">
        <h2 class="privacy__headline">100%离线，100%无广告</h2>
        <p class="privacy__lead">数据存于本机，无分析 SDK，无广告。永远无需联网。</p>

        <div class="privacy__feature">
          <h3 class="privacy__feature-title">隐私即正义</h3>
          <p class="privacy__feature-text">TagLauncher 承诺绝不触碰您的隐私，每一行代码都为本地效率而生。</p>
        </div>

        <div class="privacy__feature">
          <h3 class="privacy__feature-title privacy__feature-title--accent">
            <span class="privacy__feature-icon" aria-hidden="true"></span>
            纯净原生
          </h3>
          <p class="privacy__feature-text">没有臃肿的网络组件，极速启动，零后台占用。</p>
        </div>

        <p class="privacy__protocol">TagLauncher Security Protocol</p>
      </div>

      <figure class="privacy__art">
        <img
          src="assets/shield-check.png"
          alt=""
          width="379"
          height="437"
          loading="lazy"
          decoding="async"
          role="presentation">
      </figure>
    </div>
  </section>

  <main class="page-main">
    <div class="layout">
      <section class="card">

 docs/styles.css

@@ -579,6 +579,110 @@
  color: #000;
}

/* Seventh screen — offline & privacy */
.privacy {
  padding: 56px 0 64px;
  background: #ffffff;
}

.privacy__split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px 48px;
  align-items: center;
}

.privacy__headline {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #000;
}

.privacy__lead {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.75;
  color: #1d1d1f;
  max-width: 26em;
}

.privacy__feature {
  margin-top: 28px;
}

.privacy__feature-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy__feature-title--accent {
  color: #1d1d1f;
}

.privacy__feature-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #34c759;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

.privacy__feature-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 5px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}

.privacy__feature-text {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #6e6e73;
  max-width: 28em;
}

.privacy__protocol {
  margin: 36px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #aeaeb2;
}

.privacy__art {
  margin: 0;
  line-height: 0;
  justify-self: end;
  max-width: 340px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy__art img {
  display: block;
  width: min(100%, 320px);
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(60, 80, 140, 0.16));
}

/* Main content */
.page-main {
  padding: 56px 0 72px;
@@ -803,6 +907,15 @@
    justify-self: center;
    max-width: 100%;
  }

  .privacy__split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .privacy__art {
    justify-self: center;
  }
}

@media (max-width: 560px) {