110 lines
5.1 KiB
HTML
110 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="개인 레시피 아카이브">
|
||
<title>Our Recipe Atlas</title>
|
||
<link rel="stylesheet" href="/css/app.css">
|
||
</head>
|
||
<body>
|
||
<header id="site-header" class="site-header"></header>
|
||
|
||
<main class="page-shell">
|
||
<section class="hero">
|
||
<p class="eyebrow">COLLECT · REFINE · COOK</p>
|
||
<h1>
|
||
<span>오늘 발견한</span>
|
||
<span>레시피를</span>
|
||
<span>나만의</span>
|
||
<span>아틀라스에.</span>
|
||
</h1>
|
||
<p>Instagram Reel 또는 YouTube 영상 링크를 붙여 넣으면 재료와 조리법을 정리합니다.</p>
|
||
</section>
|
||
|
||
<section class="import-panel" aria-labelledby="import-title">
|
||
<div>
|
||
<p class="section-number">01</p>
|
||
<h2 id="import-title">새 레시피 가져오기</h2>
|
||
</div>
|
||
<form id="import-form" class="import-form">
|
||
<label class="sr-only" for="source-urls">Instagram 또는 YouTube URL 목록</label>
|
||
<textarea id="source-urls" name="urls" rows="5"
|
||
placeholder="URL을 한 줄에 하나씩 입력하세요. https://www.instagram.com/reel/... https://www.youtube.com/watch?v=..." required></textarea>
|
||
<button class="button button-primary" type="submit">대기열에 추가</button>
|
||
</form>
|
||
<div id="import-status" class="status" role="status" aria-live="polite" hidden></div>
|
||
<div id="import-queue" class="import-queue" hidden>
|
||
<div class="import-queue-heading">
|
||
<div>
|
||
<h3>가져오기 대기열</h3>
|
||
<span id="import-job-count" class="count-label"></span>
|
||
</div>
|
||
<button id="process-import-jobs" class="button button-primary" type="button">처리 요청</button>
|
||
</div>
|
||
<div id="import-job-list" class="import-job-list" aria-live="polite"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="library" aria-labelledby="library-title">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="section-number">02</p>
|
||
<h2 id="library-title">Recipe Library</h2>
|
||
</div>
|
||
<span id="recipe-count" class="count-label"></span>
|
||
</div>
|
||
<div class="recipe-search">
|
||
<label class="sr-only" for="recipe-search-input">재료나 레시피 검색</label>
|
||
<input id="recipe-search-input" type="search" autocomplete="off"
|
||
placeholder="재료나 레시피 검색 (예: 감자)">
|
||
<button id="clear-recipe-search" class="text-button" type="button" hidden>지우기</button>
|
||
</div>
|
||
<div id="tag-filter" class="tag-filter" hidden>
|
||
<div class="tag-filter-heading">
|
||
<span>태그 필터 <small>선택한 태그를 모두 포함</small></span>
|
||
<div class="tag-filter-actions">
|
||
<button id="toggle-tag-filter" class="text-button" type="button"
|
||
aria-expanded="false" hidden></button>
|
||
<button id="clear-tag-filter" class="text-button" type="button" hidden>전체 보기</button>
|
||
</div>
|
||
</div>
|
||
<div id="tag-filter-options" class="tag-filter-options" aria-label="태그 필터"></div>
|
||
</div>
|
||
<div class="recipe-results">
|
||
<div id="recipe-grid" class="recipe-grid" aria-live="polite"></div>
|
||
<p id="empty-library" class="empty-state" hidden>아직 저장한 레시피가 없습니다.<br>첫 링크를 가져와 보세요.</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<button id="access-overlay-backdrop" class="access-overlay-backdrop" type="button"
|
||
aria-label="로그인 허용 계정 관리 닫기" hidden></button>
|
||
<section id="access-overlay" class="access-overlay" role="dialog" aria-modal="true"
|
||
aria-labelledby="access-title" aria-hidden="true" hidden>
|
||
<div class="drawer-heading">
|
||
<div>
|
||
<p class="section-number">ADMIN</p>
|
||
<h2 id="access-title">로그인 허용 계정</h2>
|
||
</div>
|
||
<button id="close-access-overlay" class="drawer-close" type="button"
|
||
aria-label="로그인 허용 계정 관리 닫기">×</button>
|
||
</div>
|
||
<p class="access-copy">Google 로그인을 허용할 이메일을 입력하세요.</p>
|
||
<form id="access-form" class="access-form">
|
||
<label class="sr-only" for="access-email">Google 계정 이메일</label>
|
||
<input id="access-email" name="email" type="email" autocomplete="email"
|
||
placeholder="name@gmail.com" required>
|
||
<button class="button button-primary" type="submit">계정 추가</button>
|
||
</form>
|
||
<div id="allowed-email-list" class="allowed-email-list"></div>
|
||
</section>
|
||
|
||
<button id="scroll-to-top" class="scroll-to-top" type="button"
|
||
aria-label="맨 위로 이동" title="맨 위로" hidden>↑</button>
|
||
<div id="toast" class="toast" role="alert" hidden></div>
|
||
<script type="module" src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|