yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

feat(site): loop a faithful copy of the app's recording capsule in the hero

Browse source 
Replace the press-to-play demo and the "see how it works" button with an
example that keeps playing on the right: hold Right Alt, the capsule appears
with live wave bars, elapsed time and the partial transcript, releasing shows
the processing bar, and the cleaned sentence is pasted at the cursor of a
notes window. It cycles through two samples per language.

- Same numbers as apps/desktop recording-tip: 9 bars with cos weights, 100 ms
  updates, 0.5 smoothing, +/-35% jitter, 2-28 px, per-bar colours, 120 px
  progress bar min(95, (1 - 1/(1 + 1.5t)) * 100)%.
- WCAG 2.2.2: a pause button; stops when off screen or the tab is hidden.
  Reduced motion shows one still frame. The animation is aria-hidden with a
  text description for screen readers. Chinese and Japanese transcripts
  appear three characters at a time.
- Add 404.html so unknown paths stop falling back to the landing page, delete
  the duplicate accept-invite.html (/accept-invite/ is canonical) and link it
  straight to /#download, and move the legal pages off the retired orange
  accent (primary button contrast 5.2:1).
This commit is contained in:
Yun Chan 2026-09-26 15:49:08 +09:00
parent dc43884e3e
commit 92978607da
23 changed files with 707 additions and 467 deletions
Download patch file Download diff file Expand all files Collapse all files

25
site/public/404.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex">
<title>페이지를 찾을 수 없습니다 — D3RO Voice</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/legal.css">
</head>
<body>
<div class="shell">
<a class="brand" href="/"><span class="brand-mark"></span>D3RO VOICE</a>
<main>
<h1>페이지를 찾을 수 없습니다</h1>
<p class="lead">주소가 바뀌었거나 없는 페이지입니다.</p>
<p lang="en" class="meta">This page does not exist or has moved.</p>
<div class="actions">
<a class="button" href="/">첫 화면으로</a>
<a class="button secondary" href="/#download">다운로드</a>
</div>
</main>
</div>
</body>
</html>

76
site/public/accept-invite.html
View file

@ -1,76 +0,0 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#08090c" />
<meta name="robots" content="noindex,nofollow" />
<meta name="referrer" content="no-referrer" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; base-uri 'none'; connect-src 'none'; font-src 'self'; form-action 'none'; img-src 'self' data:; object-src 'none'; script-src 'self'; style-src 'self'"
/>
<title>D3RO Voice — 팀 초대 열기</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="/accept-invite.css" />
</head>
<body>
<main class="shell">
<section class="invite-panel" aria-labelledby="invite-title">
<header class="brand-row">
<a class="brand" href="/" aria-label="D3RO Voice 홈">D3RO VOICE</a>
<span class="protocol"><span class="signal" aria-hidden="true"></span>SECURE INVITE</span>
</header>
<div class="route-line" aria-hidden="true">
<span class="route-node route-node--active"></span>
<span class="route-track"></span>
<span class="route-node"></span>
<span class="route-track"></span>
<span class="route-node"></span>
</div>
<div class="copy-block">
<p class="eyebrow">TEAM ACCESS / MOBILE HANDOFF</p>
<h1 id="invite-title">D3RO Voice 앱에서<br />팀 초대를 확인해.</h1>
<p class="description">
초대 수락은 로그인한 계정과 서버 권한을 확인한 뒤에만 완료돼. 이 페이지는 초대 토큰을
저장하거나 수락 결과를 만들지 않아.
</p>
<p class="description description--en" lang="en">
Acceptance is completed only after the app verifies your signed-in account and server permissions.
</p>
</div>
<dl class="token-card" aria-label="초대 링크 상태">
<div>
<dt>LINK STATUS</dt>
<dd id="invite-status" aria-live="polite">검증 중</dd>
</div>
<div>
<dt>TOKEN FINGERPRINT</dt>
<dd id="token-fingerprint">—</dd>
</div>
</dl>
<p id="invite-error" class="error" role="alert" hidden></p>
<div class="actions">
<a id="open-app" class="button button--primary" href="#" aria-disabled="true">
D3RO Voice 앱 열기
</a>
<button id="copy-link" class="button button--secondary" type="button" disabled>
초대 링크 복사
</button>
</div>
<footer class="support-row">
<span>앱이 설치되지 않았어?</span>
<a href="/download.html">안전한 설치 파일 받기</a>
</footer>
</section>
</main>
<script src="/accept-invite.js" defer></script>
</body>
</html>

2
site/public/accept-invite/index.html
View file

@ -67,7 +67,7 @@
<footer class="support-row">
<span>앱이 설치되지 않았어?</span>
<a href="/download.html">안전한 설치 파일 받기</a>
<a href="/#download">안전한 설치 파일 받기</a>
</footer>
</section>
</main>

10
site/public/legal.css
View file

@ -15,8 +15,8 @@ body {
#090b0f;
}
a { color: #ff8a62; }
a:hover { color: #ffad91; }
a { color: #60a5fa; }
a:hover { color: #93c5fd; }
.shell {
width: min(920px, calc(100% - 32px));
@ -54,7 +54,7 @@ main {
.eyebrow {
margin: 0 0 12px;
color: #ff8a62;
color: #60a5fa;
font: 700 11px/1.4 "JetBrains Mono", monospace;
letter-spacing: .14em;
text-transform: uppercase;
@ -85,12 +85,12 @@ ul, ol { padding-left: 22px; }
justify-content: center;
padding: 0 18px;
border-radius: 12px;
background: #3b82f6;
background: #2563eb;
color: #fff;
font-weight: 500;
text-decoration: none;
}
.button:hover { background: #ff6b38; color: #fff; }
.button:hover { background: #1d4ed8; color: #fff; }
.button.secondary { background: #282d37; color: #f3f4f6; }
footer {