prepare app for public app store distribution
- rebrand from 습관 트래커 to 해빗랩 across templates, manifest, service worker - add HTTPS redirect middleware for reverse-proxied deployments - add public landing page (/) and privacy policy page with real data handling disclosures - add in-app account deletion (Apple review requirement) - add Android TWA Digital Asset Links support (/.well-known/assetlinks.json) - add SFTP deployment script for the Synology-hosted server Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -111,6 +111,16 @@ p {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
text-align: center;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* iOS 홈 화면 추가 안내 배너 */
|
||||
.ios-install-banner {
|
||||
display: none;
|
||||
@@ -799,3 +809,154 @@ label {
|
||||
.wm-dash {
|
||||
color: var(--color-border);
|
||||
}
|
||||
|
||||
/* 랜딩 페이지 (/) */
|
||||
.landing {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-4) var(--space-2) var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.landing-brand img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.landing-hero h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
text-wrap: balance;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.landing-tagline {
|
||||
font-size: 16px;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 요일 스트릭 시연: 실제 습관 체크 인터랙션을 그대로 축소해 보여준다 */
|
||||
.landing-streak {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.landing-day {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.landing-day.done {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
animation: landing-day-in 0.35s ease-out forwards;
|
||||
}
|
||||
|
||||
.landing-day.done svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.landing-day:nth-of-type(1).done { animation-delay: 0.1s; }
|
||||
.landing-day:nth-of-type(2).done { animation-delay: 0.25s; }
|
||||
.landing-day:nth-of-type(3).done { animation-delay: 0.4s; }
|
||||
.landing-day:nth-of-type(4).done { animation-delay: 0.55s; }
|
||||
.landing-day:nth-of-type(5).done { animation-delay: 0.7s; }
|
||||
|
||||
@keyframes landing-day-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.landing-day.done {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-copy {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.75;
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.landing-copy strong {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.landing-features {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.landing-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.landing-feature svg {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.landing-feature p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.landing-feature p strong {
|
||||
display: block;
|
||||
font-size: 14.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user