Files
habit-tracker/app/templates/base.html
T
shinalok 4a7ef5cc29 improve PWA feel on iOS: offline fallback, overscroll, tap feedback, dark status bar, apple touch icon
Add offline.html served by the service worker when a never-visited route
is requested without network. Disable rubber-band overscroll bounce and
gray tap highlights so standalone mode feels less like a webview. Split
theme-color by prefers-color-scheme so the iOS status bar matches dark
mode, and add a proper 180x180 apple-touch-icon instead of downscaling
the 192px icon.
2026-07-20 15:34:19 +09:00

69 lines
3.6 KiB
HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>{% block title %}습관 트래커{% endblock %}</title>
<link rel="manifest" href="/static/manifest.json" />
<meta name="theme-color" content="#d97757" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#e08962" media="(prefers-color-scheme: dark)" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="습관 트래커" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-apple-180.png" />
<link rel="apple-touch-icon" href="/static/icons/icon-192.png" />
<link rel="icon" href="/static/icons/icon-192.png" />
<link rel="stylesheet" href="/static/css/style.css" />
<script src="/static/js/vendor/htmx.min.js" defer></script>
<script src="/static/js/push-register.js" defer></script>
<script src="/static/js/vendor/sortable.min.js" defer></script>
<script src="/static/js/habit-reorder.js" defer></script>
<script src="/static/js/vendor/alpine.min.js" defer></script>
<script src="/static/js/app.js" defer></script>
</head>
<body>
<div class="app-shell{% block shell_class %}{% endblock %}">
{% if logged_in %}
<div id="ios-install-banner" class="ios-install-banner">
<span>홈 화면에 추가하면 알림도 받을 수 있어요. 공유 버튼 → &lsquo;홈 화면에 추가&rsquo;를 눌러보세요.</span>
<button type="button" onclick="dismissIosInstallBanner()" aria-label="닫기">&times;</button>
</div>
<nav class="top-nav">
<span class="brand">습관 트래커</span>
<div class="nav-links">
<a href="/today" class="{% block nav_today %}{% endblock %}">오늘</a>
<a href="/habits" class="{% block nav_habits %}{% endblock %}">습관 관리</a>
<a href="/history" class="{% block nav_history %}{% endblock %}">기록</a>
</div>
{% if current_user %}
<div class="nav-user">
{% if account_level %}<span class="nav-level-pill">Lv.{{ account_level.level }}</span>{% endif %}
<span>{{ current_user.name or current_user.email }}</span>
<form method="post" action="/auth/logout">
<button type="submit" class="btn-link">로그아웃</button>
</form>
</div>
{% endif %}
</nav>
<nav class="bottom-tab-bar">
<a href="/today" class="tab-item {{ self.nav_today() }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8 12l3 3 5-6" /></svg>
<span>오늘</span>
</a>
<a href="/habits" class="tab-item {{ self.nav_habits() }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></svg>
<span>습관 관리</span>
</a>
<a href="/history" class="tab-item {{ self.nav_history() }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2" /><line x1="3" y1="10" x2="21" y2="10" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="16" y1="3" x2="16" y2="7" /></svg>
<span>기록</span>
</a>
</nav>
{% endif %}
{% block content %}{% endblock %}
</div>
</body>
</html>