模式 · 来自 各插件
登录
没登录时侧边栏只有这一屏:标志、名字、一句话、新账号福利、Google 继续、或用邮箱(两步:邮箱 → 密码)、条款。
演示
<div class="xxd-auth" data-xxd-auth style="border:1px solid var(--line);background:var(--paper)">
<span class="xxd-logo" data-size="lg"><span class="xxd-logo__mark"></span></span>
<h2 class="xxd-auth__name">小小东 · 长文发布</h2>
<p class="xxd-auth__line">把 Markdown 写进 X 文章,排版、图片一起带过去。</p>
<span class="xxd-auth__gift">新账号送 7 天完整体验</span>
<form>
<button class="xxd-btn" data-block type="button"><i data-xxd-icon="Globe" data-size="16"></i>使用 Google 继续</button>
<div class="xxd-auth__or">或使用邮箱</div>
<div data-step="email" data-active>
<input class="xxd-input" type="email" placeholder="you@example.com" aria-label="邮箱" required>
<button class="xxd-btn" data-variant="primary" data-block data-auth-next="password" hidden>继续</button>
</div>
<div data-step="password">
<p class="xxd-help">登录 <b data-auth-email></b></p>
<input class="xxd-input" type="password" placeholder="密码" aria-label="密码">
<div class="xxd-cluster"><button class="xxd-btn ui-dialog-cancel" data-auth-back="email">返回</button><button class="xxd-btn" data-variant="primary" style="flex:1">继续</button></div>
<button class="xxd-link" type="button" style="justify-self:start">忘记密码?</button>
</div>
</form>
<p class="xxd-auth__terms">继续即表示同意 <a class="xxd-link" href="#">服务条款</a> 和 <a class="xxd-link" href="#">隐私政策</a></p>
</div>规则
- <html data-account> 在首帧前就设好(不闪登录页)
- 邮箱里有字了「继续」才出现
- 会话过期回到这里时,要说一句为什么