Design Study · Laozhao AI

老赵的AI世界

结构取自 man.jiaojq.vip 的设计复刻练习:只借展示骨架, 配色与 UI 全部自研(白 + 蓝,明暗双主题),并带一套能跑通的登录 / 权限逻辑。

点开卡片即可预览。页面是自包含单文件,无外部依赖,桌面与手机两档都验证过。

共 1 个页面 · 单文件自包含 · 零外部资源 · 1280px / 390px 双档无横向溢出
11

老赵的AI世界

结构取自 man.jiaojq.vip

只借结构,配色与 UI 自己重做:沿用它的骨架 —— 居中的介绍信息(不再是左右分栏)、一张压在 hero 上的内容卡、 封面图 + 标题 + 一句话的网格、页脚备案位、右侧抽屉登录、明暗双主题。 视觉是一套自定的白 + 蓝:纯白底 + 正蓝 #2563EB、几何无衬线大标题(去掉手写体)、 细边框 + 网格分隔线替代重阴影、下划线式 Tab 与输入框。六个栏目与六张封面是自制 SVG; 右侧抽屉的登录 / 注册 / 忘密是能跑通的真逻辑(密码 PBKDF2-SHA256 派生后存浏览器,不存明文), 登录态会接管顶栏与移动端菜单,并多出一个个人中心(改昵称 + 传头像,头像会先裁方缩到 128px 再存)。 内容访问分级:登录用户能读全文 / 访问专题,未登录时列表照常可见、点开加锁并给出登录入口。 账号实行申请审核制:新账号提交申请后需等待审核,管理员(内置 admin@laozhao.ai, 初始密码 admin123456)登录后在账号管理面板里可 通过 / 拒绝 / 撤销 申请,通过后才能登录。 支持外链直达:每个专题可配置一个外部网站链接(代码里 CONTENT 的 u 字段), 登录后点卡片即在新标签页打开;未配置的专题回退为站内阅读。

结构复刻白 + 蓝明暗双主题申请审核制账号管理个人中心登录后阅读外链直达
打开预览 →