本源码是一款典型的移动应用下载推广页模板，采用深色背景配合橙粉紫渐变，视觉上极具科技感与冲击力。首屏左侧为产品口号、核心卖点与 App Store / APK 双下载按钮，右侧是一部高保真手机模型，模型内展示今日打卡、习惯列表、进度环等真实 App 界面元素，让用户一眼就能理解产品价值。
页面结构完整覆盖推广场景：顶部粘性导航栏；数据统计条（用户量、打卡次数、评分、留存率）；六宫格功能特性区；三条真实感用户评价；底部再次强化下载入口并附带扫码安装二维码。手机模型与浮动数据卡片均使用纯 CSS 实现，无需图片资源，加载极快。
适合 App 开发者、运营团队在产品上线、渠道投放或社媒推广时使用。替换应用名称、截图内容、下载链接与评价后即可作为落地页投放，也可作为应用商店外页引导下载。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>晨间 Habit · 习惯养成 App 下载</title>
<style>
:root{
--bg:#06070d;
--panel:#10131f;
--panel-2:#161a29;
--line:#242a3d;
--text:#eef1f8;
--muted:#8e99b3;
--grad-a:#ff7a45;
--grad-b:#ff3d78;
--grad-c:#8b5cf6;
--mint:#34d399;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
background:var(--bg);color:var(--text);line-height:1.72;overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit}
/* ---------- 导航 ---------- */
nav{
position:sticky;top:0;z-index:50;
backdrop-filter:blur(14px);background:rgba(6,7,13,.78);
border-bottom:1px solid var(--line);
}
nav .inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.logo .mark{
width:32px;height:32px;border-radius:9px;
background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
display:flex;align-items:center;justify-content:center;color:#fff;
box-shadow:0 6px 16px rgba(255,61,120,.35);
}
.nav-links{display:flex;gap:26px;font-size:13.8px;color:var(--muted)}
.nav-links a{text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-btn{
padding:8px 18px;border-radius:9px;font-size:13.5px;text-decoration:none;
background:linear-gradient(120deg,var(--grad-a),var(--grad-b));color:#fff;font-weight:500;
transition:.22s;
}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,90,110,.34)}
/* ---------- Hero ---------- */
.hero{position:relative;padding:74px 0 88px;overflow:hidden}
.hero::before{
content:"";position:absolute;width:620px;height:620px;border-radius:50%;
left:-180px;top:-220px;
background:radial-gradient(circle,rgba(255,122,69,.22),transparent 68%);
}
.hero::after{
content:"";position:absolute;width:560px;height:560px;border-radius:50%;
right:-160px;top:60px;
background:radial-gradient(circle,rgba(139,92,246,.2),transparent 68%);
}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.pill{
display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:22px;
background:rgba(255,122,69,.12);border:1px solid rgba(255,122,69,.28);
font-size:12.5px;color:#ffb894;margin-bottom:22px;
}
.pill b{color:#fff;font-weight:600}
h1{
font-size:clamp(32px,5.4vw,50px);font-weight:800;line-height:1.22;letter-spacing:-.02em;
}
h1 .g{
background:linear-gradient(100deg,var(--grad-a),var(--grad-b) 55%,var(--grad-c));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin-top:18px;font-size:16px;color:var(--muted);max-width:470px}
.dl-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.store{
display:flex;align-items:center;gap:11px;padding:11px 20px;border-radius:13px;
text-decoration:none;transition:.24s;border:1px solid var(--line);background:var(--panel-2);
}
.store:hover{transform:translateY(-3px);border-color:#3a4360;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.store.primary{
background:linear-gradient(120deg,var(--grad-a),var(--grad-b));border-color:transparent;
box-shadow:0 10px 26px rgba(255,80,110,.3);
}
.store .txt{line-height:1.25}
.store .txt small{display:block;font-size:10.5px;opacity:.72}
.store .txt b{font-size:15px;font-weight:600}
.trust{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.stars{display:flex;gap:2px;color:#fbbf24}
.trust .t1{font-size:13px;color:var(--muted)}
.trust .t1 b{color:var(--text)}
.avatars{display:flex}
.avatars i{
width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);margin-left:-9px;
display:block;
}
.avatars i:nth-child(1){background:linear-gradient(140deg,#ff7a45,#ff3d78);margin-left:0}
.avatars i:nth-child(2){background:linear-gradient(140deg,#8b5cf6,#6366f1)}
.avatars i:nth-child(3){background:linear-gradient(140deg,#34d399,#06b6d4)}
.avatars i:nth-child(4){background:linear-gradient(140deg,#fbbf24,#f97316)}
/* ---------- 手机模型 ---------- */
.phone-stage{display:flex;justify-content:center;position:relative}
.phone{
width:266px;height:544px;border-radius:40px;padding:10px;
background:linear-gradient(160deg,#2a3048,#12151f);
box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
position:relative;animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.screen{
width:100%;height:100%;border-radius:31px;overflow:hidden;
background:linear-gradient(175deg,#181c2c,#0c0e17);
display:flex;flex-direction:column;
}
.notch{
position:absolute;top:10px;left:50%;transform:translateX(-50%);
width:96px;height:22px;background:#0b0d15;border-radius:0 0 14px 14px;z-index:5;
}
.sbar{
display:flex;justify-content:space-between;padding:13px 18px 6px;
font-size:10.5px;color:#c6cede;
}
.app-head{padding:12px 18px 8px}
.app-head small{font-size:10.5px;color:#7e88a3;letter-spacing:.08em}
.app-head h4{font-size:17px;font-weight:700;margin-top:2px}
.ring-wrap{display:flex;justify-content:center;padding:6px 0 12px}
.ring{position:relative;width:120px;height:120px}
.ring svg{transform:rotate(-90deg)}
.ring .pct{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.ring .pct b{font-size:25px;font-weight:700}
.ring .pct span{font-size:10px;color:#7e88a3}
.hb-list{padding:0 14px;display:flex;flex-direction:column;gap:8px}
.hb{
display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05);
}
.hb .em{
width:29px;height:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;
font-size:14px;flex:none;
}
.hb:nth-child(1) .em{background:rgba(255,122,69,.18)}
.hb:nth-child(2) .em{background:rgba(52,211,153,.16)}
.hb:nth-child(3) .em{background:rgba(139,92,246,.18)}
.hb:nth-child(4) .em{background:rgba(56,189,248,.16)}
.hb .n{flex:1;min-width:0}
.hb .n b{display:block;font-size:12px;font-weight:500}
.hb .n span{font-size:10px;color:#7e88a3}
.chk{
width:20px;height:20px;border-radius:50%;border:1.6px solid #39415c;flex:none;
display:flex;align-items:center;justify-content:center;
}
.chk.done{background:var(--mint);border-color:var(--mint);color:#06251a}
.tabbar{
margin-top:auto;display:flex;justify-content:space-around;padding:11px 0 15px;
border-top:1px solid rgba(255,255,255,.06);color:#5d6784;
}
.tabbar .on{color:var(--grad-a)}
.float-card{
position:absolute;padding:11px 15px;border-radius:14px;
background:rgba(22,26,41,.94);border:1px solid var(--line);
box-shadow:0 16px 34px rgba(0,0,0,.5);font-size:12px;backdrop-filter:blur(6px);
}
.fc1{top:56px;left:-8px;animation:float 5s ease-in-out infinite .6s}
.fc2{bottom:78px;right:-14px;animation:float 5.6s ease-in-out infinite .3s}
.float-card b{display:block;font-size:16px;font-weight:700}
.float-card span{color:var(--muted);font-size:11px}
.float-card .up{color:var(--mint);font-size:11px}
/* ---------- 数据条 ---------- */
.metrics{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--panel);
}
.metrics .container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:30px;padding-bottom:30px}
.metric{text-align:center}
.metric b{
display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;
background:linear-gradient(100deg,var(--grad-a),var(--grad-b));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.metric span{font-size:12.5px;color:var(--muted)}
/* ---------- 功能 ---------- */
.features{padding:76px 0}
.sec-head{text-align:center;max-width:600px;margin:0 auto 46px}
.sec-head small{font-size:12px;letter-spacing:.3em;color:var(--grad-a);text-transform:uppercase}
.sec-head h2{font-size:31px;font-weight:800;margin-top:10px;letter-spacing:-.02em}
.sec-head p{color:var(--muted);font-size:15px;margin-top:10px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{
background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
transition:.26s;position:relative;overflow:hidden;
}
.fcard::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--grad-a),var(--grad-b));opacity:0;transition:opacity .26s;
}
.fcard:hover{transform:translateY(-6px);border-color:#333b56;box-shadow:0 22px 44px rgba(0,0,0,.45)}
.fcard:hover::before{opacity:1}
.fico{
width:46px;height:46px;border-radius:13px;margin-bottom:16px;
display:flex;align-items:center;justify-content:center;color:#fff;
background:linear-gradient(140deg,var(--grad-a),var(--grad-b));
}
.fcard:nth-child(2) .fico{background:linear-gradient(140deg,#8b5cf6,#6366f1)}
.fcard:nth-child(3) .fico{background:linear-gradient(140deg,#34d399,#0ea5e9)}
.fcard:nth-child(4) .fico{background:linear-gradient(140deg,#fbbf24,#f97316)}
.fcard:nth-child(5) .fico{background:linear-gradient(140deg,#38bdf8,#6366f1)}
.fcard:nth-child(6) .fico{background:linear-gradient(140deg,#f472b6,#c026d3)}
.fcard h3{font-size:16.5px;font-weight:650;margin-bottom:8px}
.fcard p{font-size:13.8px;color:var(--muted);line-height:1.75}
/* ---------- 评价 ---------- */
.reviews{padding:66px 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{
background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:24px 22px;
}
.rstars{color:#fbbf24;font-size:13px;letter-spacing:2px;margin-bottom:12px}
.rcard p{font-size:14px;color:#c3cbdd;line-height:1.8}
.ruser{display:flex;align-items:center;gap:11px;margin-top:18px}
.ruser i{width:36px;height:36px;border-radius:50%;display:block;flex:none}
.rcard:nth-child(1) .ruser i{background:linear-gradient(140deg,#ff7a45,#ff3d78)}
.rcard:nth-child(2) .ruser i{background:linear-gradient(140deg,#8b5cf6,#6366f1)}
.rcard:nth-child(3) .ruser i{background:linear-gradient(140deg,#34d399,#06b6d4)}
.ruser b{display:block;font-size:13.5px}
.ruser span{font-size:11.5px;color:var(--muted)}
/* ---------- 底部 CTA ---------- */
.final{
padding:80px 0;text-align:center;position:relative;overflow:hidden;
}
.final::before{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 0%, rgba(255,61,120,.18), transparent 60%);
}
.final .container{position:relative;z-index:2}
.final h2{font-size:34px;font-weight:800;letter-spacing:-.02em}
.final p{color:var(--muted);margin-top:12px;font-size:15.5px}
.final .dl-row{justify-content:center;margin-top:30px}
.qr-mini{
display:inline-flex;align-items:center;gap:14px;margin-top:30px;
padding:14px 20px;border-radius:15px;background:var(--panel);border:1px solid var(--line);
}
.qr-mini .box{width:64px;height:64px;background:#fff;border-radius:8px;padding:5px}
.qr-mini .box svg{width:100%;height:100%;display:block}
.qr-mini .t{text-align:left}
.qr-mini .t b{display:block;font-size:13.5px}
.qr-mini .t span{font-size:11.5px;color:var(--muted)}
footer{
border-top:1px solid var(--line);padding:26px 0;
color:#5c6683;font-size:12.5px;
}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{text-decoration:none;margin-left:18px;transition:color .2s}
footer a:hover{color:var(--text)}
@media(max-width:900px){
.hero .container{grid-template-columns:1fr;text-align:center}
.sub{margin-left:auto;margin-right:auto}
.dl-row,.trust{justify-content:center}
.fgrid,.rgrid{grid-template-columns:1fr 1fr}
.nav-links{display:none}
}
@media(max-width:620px){
.fgrid,.rgrid{grid-template-columns:1fr}
.metrics .container{grid-template-columns:1fr 1fr;gap:22px}
.float-card{display:none}
}
</style>
</head>
<body>
<nav>
<div class="container inner">
<div class="logo">
<span class="mark">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>
</svg>
</span>
晨间 Habit
</div>
<div class="nav-links">
<a href="#f">核心功能</a>
<a href="#r">用户评价</a>
<a href="#d">立即下载</a>
<a href="#">帮助中心</a>
</div>
<a class="nav-btn" href="#d">免费下载</a>
</div>
</nav>
<header class="hero">
<div class="container">
<div>
<div class="pill">🎉 <b>V4.2</b> 全新上线 · 新增 AI 习惯教练</div>
<h1>把每一个小坚持<br><span class="g">变成看得见的改变</span></h1>
<p class="sub">晨间 Habit 用极简的打卡体验与温和的提醒机制，帮你把「想做的事」真正做成习惯。已陪伴 240 万人完成 8600 万次打卡。</p>
<div class="dl-row" id="d">
<a class="store primary" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.8c0-2.2 1.8-3.3 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.3.8-.7 0-1.7-.8-2.8-.8-1.4 0-2.8.8-3.5 2.1-1.5 2.6-.4 6.5 1.1 8.6.7 1 1.6 2.2 2.7 2.1 1.1 0 1.5-.7 2.8-.7s1.7.7 2.8.7c1.2 0 1.9-1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.4-.1 0-2.3-.9-2.3-3.3zM14.2 5.5c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.7-.9 2.6 1 .1 2-.5 2.6-1.2z"/></svg>
<span class="txt"><small>Download on the</small><b>App Store</b></span>
</a>
<a class="store" href="#">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.3c-.3.3-.5.8-.5 1.4v16.6c0 .6.2 1.1.5 1.4l.1.1 9.3-9.3v-.2L3.6 2.3zM16.3 15.6l-3.1-3.1v-.2l3.1-3.1.1.1 3.7 2.1c1 .6 1 1.6 0 2.2l-3.8 2zM15.9 16l-3.2-3.2-9.1 9.1c.3.4.9.4 1.6 0l10.7-5.9zM15.9 8L5.2 2.1c-.7-.4-1.3-.4-1.6 0l9.1 9.1L15.9 8z"/></svg>
<span class="txt"><small>安卓 / 鸿蒙</small><b>APK 下载</b></span>
</a>
</div>
<div class="trust">
<div class="avatars"><i></i><i></i><i></i><i></i></div>
<div class="t1"><b>240 万+</b> 用户正在使用</div>
<div class="stars">★★★★★</div>
<div class="t1"><b>4.9</b> / 5.0 应用商店评分</div>
</div>
</div>
<div class="phone-stage">
<div class="float-card fc1">
<span>连续打卡</span><b>128 天</b><span class="up">↑ 个人最佳</span>
</div>
<div class="float-card fc2">
<span>本周完成率</span><b>92%</b><span class="up">↑ 比上周 +14%</span>
</div>
<div class="phone">
<div class="notch"></div>
<div class="screen">
<div class="sbar"><span>9:41</span><span>●●● ⚡ 100%</span></div>
<div class="app-head">
<small>2026 年 8 月 2 日 · 星期日</small>
<h4>早安，今天也要加油 ☀️</h4>
</div>
<div class="ring-wrap">
<div class="ring">
<svg width="120" height="120">
<circle cx="60" cy="60" r="50" stroke="#232a40" stroke-width="10" fill="none"/>
<circle cx="60" cy="60" r="50" stroke="url(#g1)" stroke-width="10" fill="none"
stroke-linecap="round" stroke-dasharray="314" stroke-dashoffset="72"/>
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff7a45"/>
<stop offset="100%" stop-color="#ff3d78"/>
</linearGradient>
</defs>
</svg>
<div class="pct"><b>77%</b><span>今日完成</span></div>
</div>
</div>
<div class="hb-list">
<div class="hb"><span class="em">🏃</span><span class="n"><b>晨跑 3 公里</b><span>06:30 · 已连续 21 天</span></span>
<span class="chk done"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><path d="M4 12l6 6L20 6"/></svg></span></div>
<div class="hb"><span class="em">📖</span><span class="n"><b>阅读 30 分钟</b><span>08:00 · 已连续 45 天</span></span>
<span class="chk done"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><path d="M4 12l6 6L20 6"/></svg></span></div>
<div class="hb"><span class="em">💧</span><span class="n"><b>喝水 8 杯</b><span>全天 · 已完成 6 / 8</span></span>
<span class="chk"></span></div>
<div class="hb"><span class="em">🧘</span><span class="n"><b>冥想 10 分钟</b><span>22:00 · 待完成</span></span>
<span class="chk"></span></div>
</div>
<div class="tabbar">
<span class="on"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span>
<span><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span>
<span><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V9M10 19V4M16 19v-7M22 19H2"/></svg></span>
<span><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="metrics">
<div class="container">
<div class="metric"><b>240 万</b><span>累计用户</span></div>
<div class="metric"><b>8600 万</b><span>打卡次数</span></div>
<div class="metric"><b>4.9 分</b><span>商店评分</span></div>
<div class="metric"><b>68%</b><span>21 天留存率</span></div>
</div>
</div>
<section class="features" id="f">
<div class="container">
<div class="sec-head">
<small>Features</small>
<h2>好习惯，需要一点好设计</h2>
<p>我们把「坚持」拆成可执行的小步骤，让你每天都有一点点成就感</p>
</div>
<div class="fgrid">
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></svg></div>
<h3>智能提醒</h3>
<p>根据你过往的完成时间自动学习最佳提醒点，避开会议与睡眠时段，不打扰也不遗漏。</p>
</div>
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M4 19V9M10 19V4M16 19v-7M22 19H2"/></svg></div>
<h3>数据看板</h3>
<p>连续天数、完成率、时段分布、月度热力图一目了然，用数据看清自己真实的节奏。</p>
</div>
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/><circle cx="12" cy="12" r="4"/></svg></div>
<h3>AI 习惯教练</h3>
<p>当连续中断时主动介入，帮你分析原因、拆小目标，并给出可执行的补救方案。</p>
</div>
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M17 20h5v-2a4 4 0 0 0-3-3.9M9 20H2v-2a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v2H9z"/><circle cx="8" cy="7" r="3.4"/></svg></div>
<h3>好友监督</h3>
<p>邀请朋友组队打卡，互相点赞与提醒。数据显示组队用户的坚持率高出 2.3 倍。</p>
</div>
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 3l8 4v5c0 5-3.4 8.6-8 9.9C7.4 20.6 4 17 4 12V7l8-4z"/></svg></div>
<h3>本地优先</h3>
<p>数据默认存储在设备本地，云同步端到端加密，你的生活记录只属于你自己。</p>
</div>
<div class="fcard">
<div class="fico"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 21h8M12 18v3"/></svg></div>
<h3>全平台同步</h3>
<p>iOS、Android、鸿蒙、桌面端与网页版数据实时同步，手表也能一键打卡。</p>
</div>
</div>
</div>
</section>
<section class="reviews" id="r">
<div class="container">
<div class="sec-head">
<small>Reviews</small>
<h2>240 万人的真实反馈</h2>
</div>
<div class="rgrid">
<div class="rcard">
<div class="rstars">★★★★★</div>
<p>「试过七八个打卡 App，只有这个我用超过了三个月。提醒不烦人，界面看着舒服，连续打卡的那条曲线真的会让人上瘾。」</p>
<div class="ruser"><i></i><div><b>沉默的西瓜</b><span>App Store · 使用 8 个月</span></div></div>
</div>
<div class="rcard">
<div class="rstars">★★★★★</div>
<p>「AI 教练功能出乎意料地实用。我断了五天没跑步，它没有催我，而是把目标改成了每天走 2000 步，第二周我就跑回来了。」</p>
<div class="ruser"><i></i><div><b>周三不加班</b><span>Google Play · 使用 5 个月</span></div></div>
</div>
<div class="rcard">
<div class="rstars">★★★★★</div>
<p>「和室友组队背单词，每天互相点赞，居然坚持了整整一个学期。数据看板做得比很多付费软件都清楚。」</p>
<div class="ruser"><i></i><div><b>Luna_0417</b><span>应用宝 · 使用 11 个月</span></div></div>
</div>
</div>
</div>
</section>
<section class="final">
<div class="container">
<h2>今天，就是最好的第一天</h2>
<p>免费下载，无需注册即可开始你的第一个习惯</p>
<div class="dl-row">
<a class="store primary" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.8c0-2.2 1.8-3.3 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.3.8-.7 0-1.7-.8-2.8-.8-1.4 0-2.8.8-3.5 2.1-1.5 2.6-.4 6.5 1.1 8.6.7 1 1.6 2.2 2.7 2.1 1.1 0 1.5-.7 2.8-.7s1.7.7 2.8.7c1.2 0 1.9-1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.4-.1 0-2.3-.9-2.3-3.3zM14.2 5.5c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.7-.9 2.6 1 .1 2-.5 2.6-1.2z"/></svg>
<span class="txt"><small>Download on the</small><b>App Store</b></span>
</a>
<a class="store" href="#">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.3c-.3.3-.5.8-.5 1.4v16.6c0 .6.2 1.1.5 1.4l.1.1 9.3-9.3v-.2L3.6 2.3zM16.3 15.6l-3.1-3.1v-.2l3.1-3.1.1.1 3.7 2.1c1 .6 1 1.6 0 2.2l-3.8 2zM15.9 16l-3.2-3.2-9.1 9.1c.3.4.9.4 1.6 0l10.7-5.9zM15.9 8L5.2 2.1c-.7-.4-1.3-.4-1.6 0l9.1 9.1L15.9 8z"/></svg>
<span class="txt"><small>安卓 / 鸿蒙</small><b>APK 下载</b></span>
</a>
</div>
<div class="qr-mini">
<div class="box">
<svg viewBox="0 0 25 25" shape-rendering="crispEdges">
<rect width="25" height="25" fill="#fff"/>
<g fill="#06070d">
<rect x="1" y="1" width="7" height="7"/><rect x="2" y="2" width="5" height="5" fill="#fff"/><rect x="3" y="3" width="3" height="3"/>
<rect x="17" y="1" width="7" height="7"/><rect x="18" y="2" width="5" height="5" fill="#fff"/><rect x="19" y="3" width="3" height="3"/>
<rect x="1" y="17" width="7" height="7"/><rect x="2" y="18" width="5" height="5" fill="#fff"/><rect x="3" y="19" width="3" height="3"/>
<rect x="10" y="1" width="1" height="2"/><rect x="12" y="2" width="2" height="1"/><rect x="10" y="4" width="2" height="1"/>
<rect x="13" y="4" width="1" height="2"/><rect x="11" y="6" width="1" height="1"/><rect x="10" y="8" width="3" height="1"/>
<rect x="1" y="10" width="2" height="1"/><rect x="4" y="10" width="1" height="2"/><rect x="6" y="11" width="2" height="1"/>
<rect x="2" y="13" width="1" height="1"/><rect x="5" y="13" width="2" height="1"/><rect x="1" y="15" width="3" height="1"/>
<rect x="10" y="10" width="2" height="2"/><rect x="14" y="10" width="1" height="1"/><rect x="16" y="11" width="2" height="1"/>
<rect x="12" y="13" width="1" height="2"/><rect x="15" y="13" width="2" height="1"/><rect x="10" y="15" width="1" height="1"/>
<rect x="13" y="16" width="2" height="1"/><rect x="17" y="15" width="1" height="2"/><rect x="20" y="10" width="1" height="2"/>
<rect x="22" y="11" width="2" height="1"/><rect x="19" y="13" width="2" height="1"/><rect x="23" y="14" width="1" height="2"/>
<rect x="20" y="16" width="2" height="1"/><rect x="10" y="18" width="2" height="1"/><rect x="13" y="19" width="1" height="2"/>
<rect x="16" y="18" width="1" height="2"/><rect x="19" y="19" width="2" height="1"/><rect x="22" y="18" width="1" height="1"/>
<rect x="11" y="21" width="1" height="2"/><rect x="14" y="22" width="2" height="1"/><rect x="18" y="21" width="2" height="1"/>
<rect x="21" y="22" width="1" height="1"/><rect x="23" y="20" width="1" height="2"/>
</g>
</svg>
</div>
<div class="t"><b>扫码直接安装</b><span>支持 iOS 16+ / Android 10+ / HarmonyOS 4+</span></div>
</div>
</div>
</section>
<footer>
<div class="container">
<span>© 2026 晨间 Habit · 本页面为演示模板</span>
<span><a href="#">隐私政策</a><a href="#">用户协议</a><a href="#">联系我们</a></span>
</div>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1806.html
微信扫一扫 
支付宝扫一扫 
