clearlove2.1
1{{define "pg_install"}}
2<div class="install-wrap">
3 <div class="install-head">
4 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-8-5.2-8-10.4C4 7 6.2 5 8.8 5c1.6 0 2.7.8 3.2 1.7C12.5 5.8 13.6 5 15.2 5 17.8 5 20 7 20 10.6 20 15.8 12 21 12 21z"/></svg>
5 <h1>ClearLove 表白墙 2.0</h1>
6 <p class="muted">安装向导 · 共 3 步 · 版本 {{.version}}</p>
7 </div>
8
9 <div class="steps">
10 <div class="step-dot active" data-step="1">1</div>
11 <div class="step-line"></div>
12 <div class="step-dot" data-step="2">2</div>
13 <div class="step-line"></div>
14 <div class="step-dot" data-step="3">3</div>
15 </div>
16
17 <form class="install-card card" id="install-form">
18 <input type="hidden" name="_csrf" value="{{.csrf}}">
19
20 <section class="install-step" data-step="1">
21 <h2>第一步：选择数据库</h2>
22 <label class="radio-row">
23 <input type="radio" name="db_type" value="sqlite" checked>
24 <span><b>SQLite（默认）</b><small>零配置，数据保存在 data/clearlove.db</small></span>
25 </label>
26 <label class="radio-row">
27 <input type="radio" name="db_type" value="mysql">
28 <span><b>MySQL</b><small>需要填写连接信息，请先创建好数据库</small></span>
29 </label>
30 <div class="mysql-fields" id="mysql-fields" hidden>
31 <div class="grid2">
32 <label>主机<input type="text" name="mysql_host" value="127.0.0.1"></label>
33 <label>端口<input type="text" name="mysql_port" value="3306"></label>
34 </div>
35 <label>数据库名<input type="text" name="mysql_name" placeholder="clearlove"></label>
36 <div class="grid2">
37 <label>用户名<input type="text" name="mysql_user" placeholder="root"></label>
38 <label>密码<input type="password" name="mysql_pass"></label>
39 </div>
40 </div>
41 </section>
42
43 <section class="install-step" data-step="2">
44 <h2>第二步：网站信息</h2>
45 <label>网站名称<input type="text" name="site_name" maxlength="30" required placeholder="例如：ClearLove 表白墙"></label>
46 <p class="muted">该名称将显示在前台导航栏与页面标题中，安装后可在后台修改。</p>
47 </section>
48
49 <section class="install-step" data-step="3">
50 <h2>第三步：管理员账号</h2>
51 <label>管理员用户名<input type="text" name="admin_user" required minlength="3" maxlength="20" placeholder="至少 3 位"></label>
52 <label>管理员密码<input type="password" name="admin_pass" required minlength="6" placeholder="至少 6 位"></label>
53 <p class="muted">安装完成后，可通过 /admin 进入后台管理。</p>
54 </section>
55
56 <p class="form-err" id="install-err" hidden></p>
57
58 <div class="btn-row">
59 <button class="btn btn-ghost" type="button" id="install-prev" hidden>上一步</button>
60 <button class="btn btn-primary" type="button" id="install-next" hidden>下一步</button>
61 <button class="btn btn-primary" type="submit" id="install-submit">完成安装</button>
62 </div>
63 <p class="muted">提示：未启用 JavaScript 时可直接填写上方全部内容并点击「完成安装」。</p>
64 </form>
65</div>
66{{end}}