Spaces:

nenae18
/

leechard

Running

App Files Files Community

leechard / static /index.html

nenae18

Restore latest code (multi-code) after rollback isolation test

5bf61fe verified 2 days ago

Raw

History Blame Contribute Delete

20.6 kB

	<!doctype html>
	<html lang="ko">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
	<title>LeeChard</title>
	<!-- installable PWA: '홈 화면에 추가' -> runs fullscreen like a native tablet app -->
	<link rel="manifest" href="/static/manifest.webmanifest" />
	<meta name="theme-color" content="#0b0907" />
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<link rel="apple-touch-icon" href="/static/icons/icon-192.png" />
	<link rel="icon" type="image/png" href="/static/icons/icon-192.png" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
	<link rel="stylesheet" href="/static/css/styles.css?v=21" />
	</head>
	<body>
	<main class="app">
	<div class="bg-waves" aria-hidden="true">
	<svg viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
	<g fill="none" stroke-width="1.3">
	<g stroke="#e2bf73">
	<path d="M-300 230 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0" transform="translate(0 -9)" stroke-opacity="0.28"/>
	<path d="M-300 230 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0" transform="translate(0 -3)" stroke-opacity="0.5"/>
	<path d="M-300 230 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0" transform="translate(0 3)" stroke-opacity="0.5"/>
	<path d="M-300 230 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0 q75 -40 150 0 q75 40 150 0" transform="translate(0 9)" stroke-opacity="0.28"/>
	<animateTransform attributeName="transform" type="translate" values="-300 0;0 0" dur="9s" repeatCount="indefinite"/>
	</g>
	<g stroke="#d8b15e">
	<path d="M-360 470 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0" transform="translate(0 -10)" stroke-opacity="0.2"/>
	<path d="M-360 470 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0" transform="translate(0 -3)" stroke-opacity="0.4"/>
	<path d="M-360 470 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0" transform="translate(0 4)" stroke-opacity="0.4"/>
	<path d="M-360 470 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0 q90 -54 180 0 q90 54 180 0" transform="translate(0 11)" stroke-opacity="0.2"/>
	<animateTransform attributeName="transform" type="translate" values="-360 0;0 0" dur="14s" repeatCount="indefinite"/>
	</g>
	<g stroke="#e8c87a">
	<path d="M-300 700 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0" transform="translate(0 -8)" stroke-opacity="0.24"/>
	<path d="M-300 700 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0" transform="translate(0 -2)" stroke-opacity="0.44"/>
	<path d="M-300 700 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0" transform="translate(0 4)" stroke-opacity="0.44"/>
	<path d="M-300 700 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0 q75 -34 150 0 q75 34 150 0" transform="translate(0 10)" stroke-opacity="0.24"/>
	<animateTransform attributeName="transform" type="translate" values="-300 0;0 0" dur="12s" repeatCount="indefinite"/>
	</g>
	</g>
	<g>
	<circle cx="180" cy="150" r="2" fill="#f3dd9e"><animate attributeName="opacity" values="0.15;0.85;0.15" dur="3.2s" repeatCount="indefinite"/></circle>
	<circle cx="520" cy="300" r="1.6" fill="#e8c87a"><animate attributeName="opacity" values="0.1;0.7;0.1" dur="2.6s" begin="0.6s" repeatCount="indefinite"/></circle>
	<circle cx="900" cy="210" r="2.4" fill="#ffffff"><animate attributeName="opacity" values="0.1;0.55;0.1" dur="3.8s" begin="1.1s" repeatCount="indefinite"/></circle>
	<circle cx="1040" cy="540" r="1.8" fill="#f3dd9e"><animate attributeName="opacity" values="0.12;0.75;0.12" dur="3s" begin="0.3s" repeatCount="indefinite"/></circle>
	<circle cx="300" cy="650" r="1.6" fill="#e8c87a"><animate attributeName="opacity" values="0.1;0.7;0.1" dur="2.9s" begin="1.4s" repeatCount="indefinite"/></circle>
	<circle cx="760" cy="775" r="2" fill="#ffffff"><animate attributeName="opacity" values="0.1;0.5;0.1" dur="4.2s" begin="0.9s" repeatCount="indefinite"/></circle>
	</g>
	</svg>
	</div>
	<div class="stepbar" id="stepbar" aria-hidden="true"></div>

	<!-- 1/7 LANDING -->
	<section class="screen active" id="screen-landing" data-step="0">
	<div class="hero">
	<div class="hero-overlay"></div>
	<div class="hero-content">
	<p class="brand-logo">LeeChard</p>
	<p class="slogan">당신을, 더 빛나게.</p>
	<span class="hero-rule"></span>
	<p class="brand-sub">미용실 전용 AI 포트레이트</p>
	</div>
	</div>
	<div class="screen-foot">
	<button class="btn btn-primary" data-go="consent">시작하기</button>
	<button class="btn btn-text" id="btn-recent">📁 작업 내역 보기</button>
	<p class="fineprint">AI 생성 이미지 · 원본은 저장/공유되지 않습니다</p>
	</div>
	</section>

	<!-- 2/7 CONSENT -->
	<section class="screen" id="screen-consent" data-step="1">
	<header class="topbar"><button class="icon-btn" data-go="landing" aria-label="뒤로">‹</button><span class="topbar-title">이용 동의</span><span class="icon-btn ghost"></span></header>
	<div class="screen-body">
	<h1 class="title">시작하기 전에</h1>
	<ul class="trust-list">
	<li><span class="ic">🔒</span><span>원본 사진은 공유되지 않아요</span></li>
	<li><span class="ic">🗑️</span><span>작업이 끝나면 원본은 자동 삭제돼요</span></li>
	<li><span class="ic">✨</span><span>결과는 AI로 생성·편집된 가상 이미지예요</span></li>
	<li><span class="ic">⏳</span><span>전달용 QR 링크는 7일 후 만료돼요</span></li>
	</ul>
	<div class="consents">
	<label class="check"><input type="checkbox" id="c-ai" /><span>[필수] AI 보정에 동의합니다</span></label>
	<label class="check"><input type="checkbox" id="c-qr" /><span>[필수] QR 전달에 동의합니다</span></label>
	<label class="check"><input type="checkbox" id="c-mkt" /><span>[선택] 결과 이미지의 마케팅 활용 보관에 동의합니다</span></label>
	<p class="consent-note">마케팅 활용 보관은 최대 1년이며, 매장에 요청하면 언제든 철회·삭제할 수 있어요. 동의하지 않아도 보정 결과는 정상 전달됩니다.</p>
	</div>
	</div>
	<div class="screen-foot">
	<button class="btn btn-primary" id="consent-go" data-go="capture" disabled>동의하고 계속</button>
	<p class="fineprint">개인정보 처리방침</p>
	</div>
	</section>

	<!-- 3/7 CAPTURE -->
	<section class="screen" id="screen-capture" data-step="2">
	<header class="topbar"><button class="icon-btn" data-go="consent" aria-label="뒤로">‹</button><span class="topbar-title">사진 촬영</span><span class="icon-btn ghost"></span></header>
	<div class="screen-body capture-body">
	<div class="capture-frame" id="capture-frame">
	<img id="capture-preview" class="capture-preview" alt="" hidden />
	<div class="face-guide" id="face-guide"><div class="oval"></div></div>
	<p class="capture-hint" id="capture-hint">얼굴이 잘 보이게 정면으로 맞춰 주세요</p>
	</div>
	<div class="chips"><span class="chip">밝은 곳</span><span class="chip">정면</span><span class="chip">정지</span></div>
	</div>
	<div class="screen-foot capture-foot">
	<div id="capture-actions">
	<button class="btn btn-primary" id="btn-shoot">📷 사진 촬영</button>
	<button class="btn btn-text" id="btn-gallery">갤러리에서 선택</button>
	</div>
	<div id="capture-confirm" hidden>
	<div class="gender-pick" id="gender-pick" role="group" aria-label="성별 선택">
	<span class="gender-pick-label">성별</span>
	<div class="gender-seg">
	<button type="button" class="gender-opt active" data-gender="auto">자동</button>
	<button type="button" class="gender-opt" data-gender="woman">여성</button>
	<button type="button" class="gender-opt" data-gender="man">남성</button>
	</div>
	</div>
	<button class="btn btn-primary" id="btn-use">이 사진으로</button>
	<button class="btn btn-text" id="btn-retake">다시 찍기</button>
	</div>
	</div>
	</section>

	<!-- 4/7 LOADING -->
	<section class="screen" id="screen-loading" data-step="3">
	<div class="loading-bg" id="loading-bg"></div>
	<div class="loading-center">
	<div class="ring"></div>
	<h1 class="title light">AI가 얼굴을 보정하고 있어요</h1>
	<p class="loading-pct" id="loading-pct">0%</p>
	<div class="progress"><div class="progress-fill" id="progress-fill"></div></div>
	<p class="loading-time" id="loading-time">보통 15초, 길면 1분 정도 걸려요</p>
	<div class="value-banner">헤어 · 의상 · 배경은 그대로 유지됩니다</div>
	<div class="loading-notice" id="loading-notice" aria-live="polite">
	<span class="notice-tag">공지</span>
	<span class="notice-text" id="notice-text">헤어·의상·배경은 그대로, 얼굴만 더 멋지게 보정돼요.</span>
	</div>
	</div>
	</section>

	<!-- 5/7 RESULT -->
	<section class="screen" id="screen-result" data-step="4">
	<header class="topbar"><button class="icon-btn" data-go="capture" aria-label="뒤로">‹</button><span class="topbar-title">결과</span><span class="icon-btn ghost"></span></header>
	<div class="screen-body">
	<!-- photo/video shown SEPARATELY (tabs appear only after a clip is made) -->
	<div class="share-tabs" id="result-tabs" hidden>
	<button type="button" class="share-tab active" id="result-tab-photo">사진</button>
	<button type="button" class="share-tab" id="result-tab-video">영상</button>
	</div>
	<div id="result-photo-wrap">
	<div class="ba" id="ba">
	<img class="ba-after" id="ba-after" alt="AI 결과" />
	<img class="ba-before" id="ba-before" alt="원본" />
	<span class="ba-tag ba-tag-l">원본</span>
	<span class="ba-tag ba-tag-r">AI</span>
	<span class="wm">AI 가상 모델 · LeeChard</span>
	</div>
	<input type="range" id="ba-range" class="ba-range" min="0" max="100" value="50" aria-label="원본/AI 비교" />
	</div>
	<div class="share-frame" id="result-video-wrap" hidden>
	<video id="result-video" class="share-video" controls playsinline loop muted></video>
	</div>
	<div class="chips center">
	<span class="chip gold">헤어 유지</span><span class="chip gold">배경 유지</span><span class="chip gold">AI 가상 모델 표시</span>
	</div>
	<p class="disclosure">이 이미지는 AI로 생성·편집된 결과로, 실제 보정 전 사진이 아닙니다.</p>
	</div>
	<div class="screen-foot">
	<button class="btn btn-primary" id="result-go">QR로 전달하기</button>
	<div class="action-row">
	<button class="btn btn-outline" id="btn-save">📥 사진 저장</button>
	<button class="btn btn-outline" id="btn-video">✨ 영상 만들기</button>
	</div>
	<p class="video-status" id="video-status" hidden></p>
	<button class="btn btn-text" data-go="capture">다시 찍기</button>
	</div>
	</section>

	<!-- 6/7 QR -->
	<section class="screen" id="screen-qr" data-step="5">
	<header class="topbar"><button class="icon-btn" data-go="result" aria-label="뒤로">‹</button><span class="topbar-title">QR 전송</span><span class="icon-btn ghost"></span></header>
	<div class="screen-body center-col">
	<h1 class="title">휴대폰으로 받기</h1>
	<div class="qr-card"><img id="qr-img" class="qr-img" alt="QR 코드" /></div>
	<p class="qr-instr">손님 휴대폰으로 QR을 스캔하세요</p>
	<div class="link-row"><span class="link-text" id="share-link"></span><button class="btn-copy" id="btn-copy">복사</button></div>
	<div class="note-card">원본 사진은 서버에 저장되지 않으며, 이 링크는 7일 후 만료됩니다.</div>
	</div>
	<div class="screen-foot"><button class="btn btn-primary" data-go="done">완료</button></div>
	</section>

	<!-- 7/7 DONE -->
	<section class="screen" id="screen-done" data-step="6">
	<div class="screen-body center-col">
	<div class="success-check">✓</div>
	<h1 class="title">전달 준비 완료</h1>
	<img id="done-thumb" class="done-thumb" alt="결과 미리보기" />
	<p class="fineprint">손님이 QR로 결과를 받아 저장할 수 있어요.</p>
	</div>
	<div class="screen-foot"><button class="btn btn-primary" id="done-home">처음으로</button></div>
	</section>

	<!-- ERROR -->
	<section class="screen" id="screen-error">
	<div class="screen-body center-col">
	<div class="error-mark">!</div>
	<h1 class="title" id="error-title">다시 시도해 주세요</h1>
	<p class="error-msg" id="error-msg"></p>
	</div>
	<div class="screen-foot">
	<button class="btn btn-primary" id="error-retry">다시 시도</button>
	<button class="btn btn-text" data-go="landing">처음으로</button>
	</div>
	</section>

	<!-- CUSTOMER SHARE (/result/{token}) -->
	<section class="screen" id="screen-share">
	<div class="share-head"><p class="brand-logo small">LeeChard</p></div>
	<div class="screen-body center-col">
	<!-- photo/video are SEPARATE views: tabs appear only when a video exists;
	the photo shows alone by default (clean, no frame decorations) -->
	<div class="share-tabs" id="share-tabs" hidden>
	<button type="button" class="share-tab active" id="tab-photo">사진</button>
	<button type="button" class="share-tab" id="tab-video">영상</button>
	</div>
	<div class="share-frame" id="share-photo-wrap"><img id="share-img" class="share-img" alt="AI 결과" /></div>
	<div class="share-frame" id="share-video-wrap" hidden>
	<video id="share-video" class="share-video" controls playsinline loop muted></video>
	</div>
	<button class="btn btn-primary" id="share-save">📥 사진 저장</button>
	<p class="disclosure">AI로 생성·편집된 가상 결과 이미지입니다.</p>
	<p class="fineprint">저장 버튼을 누르면 갤러리에 저장돼요 · 링크는 7일 후 만료됩니다.</p>
	</div>
	</section>

	<!-- EXPIRED -->
	<section class="screen" id="screen-expired">
	<div class="screen-body center-col">
	<div class="error-mark muted">⏳</div>
	<h1 class="title">링크가 만료되었습니다</h1>
	<p class="error-msg">이 공유 링크는 더 이상 사용할 수 없어요.</p>
	</div>
	</section>

	<!-- ACCESS GATE (shown only when the deployment requires a code) -->
	<section class="screen" id="screen-access">
	<div class="screen-body center-col">
	<p class="brand-logo">LeeChard</p>
	<h1 class="title">접속 코드 입력</h1>
	<p class="fineprint">매장에서 받은 코드를 입력해 주세요</p>
	<input id="access-input" class="code-input" type="password" inputmode="text" autocomplete="off" placeholder="접속 코드" />
	<p class="error-msg" id="access-error" hidden>코드가 올바르지 않아요</p>
	</div>
	<div class="screen-foot"><button class="btn btn-primary" id="access-go">입장</button></div>
	</section>

	<!-- RECENT (operator: server-backed work history — visible on any tablet) -->
	<section class="screen" id="screen-recent">
	<header class="topbar"><button class="icon-btn" data-go="landing" aria-label="뒤로">‹</button><span class="topbar-title">작업 내역</span><button class="icon-btn" id="recent-refresh" aria-label="새로고침" title="새로고침">↻</button></header>
	<div class="screen-body">
	<p class="recent-note">매장에서 만든 최근 작업이에요 · 어느 태블릿에서도 보여요</p>
	<div class="recent-grid" id="recent-grid"></div>
	<p class="recent-empty" id="recent-empty" hidden>아직 작업 내역이 없어요.<br />사진을 만들면 여기에 모여요.</p>
	</div>
	</section>

	<!-- RECENT VIEW (tap a thumbnail — photo/video shown SEPARATELY, save either) -->
	<section class="screen" id="screen-recent-view">
	<header class="topbar"><button class="icon-btn" data-go="recent" aria-label="뒤로">‹</button><span class="topbar-title">결과 보기</span><span class="icon-btn ghost"></span></header>
	<div class="screen-body center-col">
	<div class="share-tabs" id="rv-tabs" hidden>
	<button type="button" class="share-tab active" id="rv-tab-photo">사진</button>
	<button type="button" class="share-tab" id="rv-tab-video">영상</button>
	</div>
	<div class="share-frame" id="rv-photo-wrap"><img id="rv-img" class="share-img" alt="AI 결과" /></div>
	<div class="share-frame" id="rv-video-wrap" hidden><video id="rv-video" class="share-video" controls playsinline loop></video></div>
	<p class="disclosure">AI로 생성·편집된 가상 결과입니다.</p>
	</div>
	<div class="screen-foot">
	<button class="btn btn-primary" id="rv-save">📥 저장</button>
	<div class="link-row"><span class="link-text" id="recent-link"></span><button class="btn-copy" id="recent-copy">복사</button></div>
	</div>
	</section>
	</main>

	<input id="photo-input" type="file" accept="image/*" capture="environment" hidden />
	<div class="toast" id="toast" role="status" aria-live="polite"></div>
	<script src="/static/js/app.js?v=21" defer></script>
	</body>
	</html>