shinalok
800f42eab1
- Habits and the account now accumulate XP and levels from check streaks, with streak/level-up celebration banners and push notifications. - The "yesterday missed" banner on /today now lets a habit be explicitly marked failed (not just checked done), backed by a new HabitLog.status column so completion-rate/streak calculations never count a failed day as done. - The habit management tabs scroll horizontally on narrow screens instead of wrapping to two lines, with a pure-CSS edge shadow indicating more content.
33 lines
1.6 KiB
HTML
33 lines
1.6 KiB
HTML
<div class="habit-item{{ ' today-checked' if item.checked }}">
|
|
<div class="habit-item-main">
|
|
<button
|
|
type="button"
|
|
class="check-indicator{{ ' checked' if item.checked }}"
|
|
hx-post="/today/{{ item.habit_id }}/toggle"
|
|
hx-target="#today-content"
|
|
hx-swap="innerHTML"
|
|
aria-label="{{ item.name }} 체크"
|
|
>{% if item.checked %}✓{% endif %}</button>
|
|
<div>
|
|
<div class="habit-item-name">{{ item.name }}</div>
|
|
{% if item.condition_text %}<div class="habit-item-condition">{{ item.condition_text }}</div>{% endif %}
|
|
{% if item.reminder_time %}<div class="habit-item-meta">알람 {{ item.reminder_time }}</div>{% endif %}
|
|
{% if item.scheduled_days > 0 %}
|
|
<div class="habit-item-stats">
|
|
<span class="badge">완료율 {{ item.completion_rate }}%</span>
|
|
{% if item.current_streak > 0 %}
|
|
<span class="badge{{ ' badge-milestone' if is_milestone_streak(item.current_streak) }}">
|
|
{{ '🏆' if is_milestone_streak(item.current_streak) else '🔥' }} 연속 {{ item.current_streak }}일
|
|
</span>
|
|
{% endif %}
|
|
<span class="badge level-badge">{{ level_tier_emoji(item.level_info.level) }} Lv.{{ item.level_info.level }}</span>
|
|
</div>
|
|
<div class="xp-bar-wrap">
|
|
<div class="xp-bar"><div class="xp-bar-fill" style="width: {{ item.level_info.progress_pct }}%;"></div></div>
|
|
<span class="xp-bar-label">{{ item.level_info.xp_into_level }}/{{ item.level_info.xp_for_next_level }} xp</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|