habit-tracker/app/templates/home.html

{% extends "base.html" %}
{% block title %}해빗랩 (HabitLab) · 습관이 만들어지는 진짜 시간{% endblock %}
{% block meta_description %}HabitLab (해빗랩) is a habit tracking web app for building good habits and quitting bad ones on a weekly schedule. 해빗랩은 만들고 싶은 습관과 끊고 싶은 습관을 요일 단위로 관리하는 습관 기록 앱입니다. 요일별 습관 등록과 데일리 체크, 월별·주별 기록과 완료율·연속 달성일 통계, 설정한 시각의 습관 알림, 하루를 남기는 일기를 제공합니다.{% endblock %}
{% block content %}
<div class="landing">
  <div class="landing-hero">
    {# 앱 이름은 h1의 순수 텍스트이면서 화면에서 가장 큰 글자여야 한다 — 구글 브랜딩 심사가 OAuth 동의 화면의
       앱 이름과 홈페이지의 앱 이름을 대조하는데, 태그라인이 이름보다 크면 그쪽을 사이트 이름으로 본다.
       로고는 이름 추출을 방해하지 않도록 h1 바깥에 둔다. #}
    <img class="landing-logo" src="/static/icons/icon-192.png" alt="" />
    <h1 class="landing-brand">해빗랩 (HabitLab)</h1>
    <p class="landing-hero-title">습관이 만들어지는 진짜 시간</p>
    <p class="landing-tagline">21일의 법칙 대신, 습관마다 다른 진짜 목표 기간을 알려드려요</p>

    <div class="landing-streak" aria-hidden="true">
      <div class="landing-day done">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-9" /></svg>
      </div>
      <div class="landing-day done">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-9" /></svg>
      </div>
      <div class="landing-day done">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-9" /></svg>
      </div>
      <div class="landing-day done">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-9" /></svg>
      </div>
      <div class="landing-day done">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5 9-9" /></svg>
      </div>
      <div class="landing-day">토</div>
      <div class="landing-day">일</div>
    </div>
  </div>

  <div class="landing-copy">
    <p>
      "습관은 21일이면 만들어진다"는 말, 많이 들어보셨을 거예요. 사실 근거가 약한 통설이에요.
      실증 연구(<strong>Lally et al., 2010, UCL</strong>)에 따르면 습관이 몸에 붙기까지 걸리는 시간은
      사람마다, 습관마다 달라서 짧게는 3주, 길게는 8개월 넘게 걸리기도 해요.
    </p>
    <p>
      <strong>해빗랩</strong>은 여러분이 만들고 싶은 습관도, 멈추고 싶은 습관도 함께 만들어가는 동반자예요.
      검증된 연구를 시스템에 그대로 담아 목표 기간과 진행 상황을 짚어드리고, 그 여정을 끝까지 응원할게요.
    </p>
  </div>

  <div class="landing-section">
    <h2>해빗랩이 하는 일</h2>
    <ul class="landing-list">
      <li><strong>요일별 습관 등록</strong> — 만들고 싶은 습관과 끊고 싶은 습관을 요일 단위로 등록하고, 습관마다 목표 기간과 달성 조건을 정합니다.</li>
      <li><strong>데일리 체크</strong> — 오늘 예정된 습관을 한 화면에서 체크하고, 놓친 습관은 실패로 표시해 솔직하게 기록합니다.</li>
      <li><strong>기록과 통계</strong> — 월별 달력과 주별 매트릭스로 지나온 기록을 돌아보고, 습관별 완료율과 연속 달성일을 확인합니다.</li>
      <li><strong>습관 알림</strong> — 습관마다 설정한 시각에 브라우저 푸시 알림을 보내드립니다. 알림을 켠 경우에만 동작합니다.</li>
      <li><strong>일기</strong> — 하루의 회고나 습관과 무관한 자유 일기를 카테고리·태그·사진과 함께 남길 수 있습니다.</li>
    </ul>
  </div>

  <div class="landing-features">
    <div class="landing-feature">
      <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" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1" /></svg>
      <p><strong>연구 기반 목표 기간</strong>속설이 아니라 실제 연구값(21·66·254일)으로 목표를 잡아요</p>
    </div>
    <div class="landing-feature">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="6" /><line x1="8" y1="9" x2="8" y2="15" /><line x1="5" y1="12" x2="11" y2="12" /><circle cx="17" cy="12" r="6" /><line x1="14" y1="12" x2="20" y2="12" /></svg>
      <p><strong>만들기와 끊기, 동시에</strong>새 습관을 만드는 것과 나쁜 습관을 끊는 것을 똑같은 무게로 다뤄요</p>
    </div>
    <div class="landing-feature">
      <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" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
      <p><strong>광고·구독 없음</strong>습관관리에만 집중해요, 그 외엔 아무것도 없어요</p>
    </div>
  </div>

  <a href="/auth/google/login" class="btn btn-primary btn-block">Google로 시작하기</a>

  <div class="landing-section">
    <h2>계정과 로그인</h2>
    <p class="landing-note">
      해빗랩은 구글 계정으로만 로그인합니다. 로그인 시 구글로부터 <strong>이름, 이메일 주소, 프로필 사진</strong>을 받아
      계정을 식별하고 화면에 표시하는 용도로만 사용하며, 별도의 비밀번호는 수집하지 않습니다.
      Gmail, 드라이브, 캘린더 등 다른 구글 서비스의 데이터에는 접근하지 않습니다.
      직접 입력한 습관·기록·일기는 본인 계정에만 저장되고 다른 이용자에게 공개되지 않으며,
      로그인 후 계정 페이지에서 언제든 계정과 모든 데이터를 직접 삭제할 수 있습니다.
    </p>
    <p class="landing-note">
      자세한 내용은 <a href="/privacy">개인정보처리방침</a>과 <a href="/terms">서비스 약관</a>을 확인해주세요.
      문의: <a href="mailto:shinalok357@gmail.com">shinalok357@gmail.com</a>
    </p>
  </div>

  {# 영문 요약 — 구글 브랜딩 심사의 자동 검사가 한글만으로는 앱 목적을 인식하지 못하는 것으로 보여 병기한다. #}
  <div class="landing-section" lang="en">
    <h2>About HabitLab (해빗랩)</h2>
    <p class="landing-note">
      <strong>HabitLab (해빗랩)</strong> is a personal habit tracking web app. It helps you build the habits
      you want and quit the ones you don't, on a per-weekday schedule.
    </p>
    <p class="landing-note">
      You can register habits for specific days of the week with a target period based on published research
      (Lally et al., 2010, UCL), check them off daily, review your history on monthly and weekly views with
      completion rates and streaks, receive browser push reminders at a time you choose, and keep a journal.
    </p>
    <p class="landing-note">
      HabitLab uses Google Sign-In. It receives only your name, email address, and profile picture from Google
      to identify your account, and does not access Gmail, Drive, Calendar, or any other Google service data.
      See our <a href="/privacy">Privacy Policy</a> and <a href="/terms">Terms of Service</a>.
      Contact: <a href="mailto:shinalok357@gmail.com">shinalok357@gmail.com</a>
    </p>
  </div>
</div>
{% endblock %}