95 lines
4.2 KiB
PHP
95 lines
4.2 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
require_once __DIR__ . '/app.php';
|
||
|
||
$user = current_user();
|
||
$redirectTarget = safe_redirect_target((string) ($_GET['redirect'] ?? 'index.php'));
|
||
$steps = [
|
||
['step' => '01', 'title' => '先看启动页', 'desc' => '了解首页、任务、VIP、钱包、我的 5 个主入口怎么运作。'],
|
||
['step' => '02', 'title' => '邮箱注册', 'desc' => '填写邮箱和密码，系统准备发送 6 位数字验证码。'],
|
||
['step' => '03', 'title' => '输入验证码', 'desc' => '邮件验证通过后，系统才会正式创建账户、钱包和 VIP0。'],
|
||
['step' => '04', 'title' => '登录系统', 'desc' => '使用已验证邮箱登录，再进入任务、VIP、钱包和我的。'],
|
||
];
|
||
$highlights = [
|
||
['label' => '账户创建', 'value' => '真实数据库写入'],
|
||
['label' => '验证方式', 'value' => '邮箱 6 位验证码'],
|
||
['label' => '开户结果', 'value' => '6 位 ID + 钱包 + VIP0'],
|
||
];
|
||
|
||
render_layout_start('启动页', '启动页，展示真实邮箱开户注册流程入口与 4 步说明。', 'auth');
|
||
?>
|
||
<section class="app-page-section auth-page-shell">
|
||
<article class="app-card gradient-card hero-card">
|
||
<div class="tiny-eyebrow">Step 1 / 4</div>
|
||
<h1 class="app-hero-title">邮箱开户从这里开始</h1>
|
||
<p class="app-hero-copy mb-0">这一步相当于“欢迎页”。你先看清流程，再进入注册、验证码和登录页面，整个入口会比直接把表单塞进首页更清楚。</p>
|
||
|
||
<div class="detail-meta-grid mt-3">
|
||
<?php foreach ($highlights as $item): ?>
|
||
<div>
|
||
<div class="mini-label"><?= h((string) $item['label']) ?></div>
|
||
<div class="detail-mini-value"><?= h((string) $item['value']) ?></div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<div class="auth-link-grid mt-4">
|
||
<?php if ($user): ?>
|
||
<a class="btn btn-gradient" href="<?= h($redirectTarget) ?>">继续进入系统</a>
|
||
<a class="btn btn-outline-light" href="index.php">回到首页</a>
|
||
<?php else: ?>
|
||
<a class="btn btn-gradient" href="<?= h(register_page_url($redirectTarget)) ?>">开始注册</a>
|
||
<a class="btn btn-outline-light" href="<?= h(login_page_url($redirectTarget)) ?>">已有账号登录</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="app-page-section auth-page-shell">
|
||
<article class="app-card auth-card-panel">
|
||
<div class="section-heading-app mb-3">
|
||
<div class="tiny-eyebrow">开户流程</div>
|
||
<h2 class="app-section-title">4 个页面都是真实页面</h2>
|
||
</div>
|
||
<div class="onboarding-flow-grid">
|
||
<?php foreach ($steps as $step): ?>
|
||
<div class="onboarding-step-card">
|
||
<div class="step-kicker">STEP <?= h((string) $step['step']) ?></div>
|
||
<div class="list-title-strong mt-2"><?= h((string) $step['title']) ?></div>
|
||
<div class="list-meta-line mt-1"><?= h((string) $step['desc']) ?></div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="app-page-section auth-page-shell">
|
||
<article class="app-card">
|
||
<div class="section-heading-app mb-3">
|
||
<div class="tiny-eyebrow">说明</div>
|
||
<h2 class="app-section-title">对你来说，这一步做了什么</h2>
|
||
</div>
|
||
<div class="app-list-stack">
|
||
<div class="app-list-item static-row">
|
||
<span>
|
||
<span class="list-title-strong">不再从首页直接建号</span>
|
||
<span class="list-meta-line">避免用户跳过验证码，减少“看起来是真的，但其实没验证邮箱”的问题。</span>
|
||
</span>
|
||
</div>
|
||
<div class="app-list-item static-row">
|
||
<span>
|
||
<span class="list-title-strong">注册和登录拆成独立页面</span>
|
||
<span class="list-meta-line">这样更接近你给的参考图结构，也更像真实 App 的开户流程。</span>
|
||
</span>
|
||
</div>
|
||
<div class="app-list-item static-row">
|
||
<span>
|
||
<span class="list-title-strong">验证码真的会发邮件</span>
|
||
<span class="list-meta-line">如果当前 SMTP 未配置，页面会真实提示失败，你就知道不是 UI 假动作。</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
<?php render_layout_end(); ?>
|