习惯养成打卡
坚持21天，养成好习惯
12
已养成习惯
86%
平均完成率
156
连续打卡天数
<!-- 习惯2 -->
<div style="background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,0.1); width: 300px; transition: all 0.3s ease;"><div style="padding: 20px; border-bottom: 1px solid #eee; display: flex; align-items: center;"><div style="width: 50px; height: 50px; border-radius: 50%; background: #e8f5e9; color: #4caf50; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.5rem;">📚</div><div><h3 style="margin-bottom: 5px; color: #2c3e50;">阅读30分钟</h3><p style="color: #7f8c8d; font-size: 0.9rem;">提升知识储备</p></div></div><div style="padding: 15px 20px; background: #f8f9fa;"><div style="height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; margin-bottom: 10px;"><div style="height: 100%; width: 85%; background: #4caf50; border-radius: 4px; transition: width 0.5s ease;"></div></div><div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: #7f8c8d;"><span>本周进度</span><span>6/7天</span></div></div><div style="padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;"><button class="checkin-btn" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; transition: all 0.3s ease;">立即打卡</button><div style="display: flex; align-items: center; color: #e74c3c; font-weight: bold;">🔥 18天</div></div>
</div><!-- 习惯3 -->
<div style="background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,0.1); width: 300px; transition: all 0.3s ease;"><div style="padding: 20px; border-bottom: 1px solid #eee; display: flex; align-items: center;"><div style="width: 50px; height: 50px; border-radius: 50%; background: #fff3e0; color: #ff9800; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.5rem;">🏃</div><div><h3 style="margin-bottom: 5px; color: #2c3e50;">晨跑30分钟</h3><p style="color: #7f8c8d; font-size: 0.9rem;">保持身体健康</p></div></div><div style="padding: 15px 20px; background: #f8f9fa;"><div style="height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; margin-bottom: 10px;"><div style="height: 100%; width: 57%; background: #ff9800; border-radius: 4px; transition: width 0.5s ease;"></div></div><div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: #7f8c8d;"><span>本周进度</span><span>4/7天</span></div></div><div style="padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;"><button class="checkin-btn" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; transition: all 0.3s ease;">立即打卡</button><div style="display: flex; align-items: center; color: #e74c3c; font-weight: bold;">🔥 7天</div></div>
</div><!-- 习惯4 -->
<div style="background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,0.1); width: 300px; transition: all 0.3s ease;"><div style="padding: 20px; border-bottom: 1px solid #eee; display: flex; align-items: center;"><div style="width: 50px; height: 50px; border-radius: 50%; background: #f3e5f5; color: #9c27b0; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.5rem;">🧘</div><div><h3 style="margin-bottom: 5px; color: #2c3e50;">冥想10分钟</h3><p style="color: #7f8c8d; font-size: 0.9rem;">提升专注力</p></div></div><div style="padding: 15px 20px; background: #f8f9fa;"><div style="height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; margin-bottom: 10px;"><div style="height: 100%; width: 42%; background: #9c27b0; border-radius: 4px; transition: width 0.5s ease;"></div></div><div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: #7f8c8d;"><span>本周进度</span><span>3/7天</span></div></div><div style="padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;"><button class="checkin-btn" style="padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; transition: all 0.3s ease;">立即打卡</button><div style="display: flex; align-items: center; color: #e74c3c; font-weight: bold;">🔥 5天</div></div>
</div>
习惯养成打卡系统 © 2023 | 坚持就是力量