23 lines
3.1 KiB
HTML
23 lines
3.1 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Hyeonworks — direction comparison</title>
|
||
<style>
|
||
:root{--bg:#11191f;--panel:#1d2931;--ink:#f5f1e8;--muted:#aab6bc;--line:#44545e;--accent:#e7bd45}
|
||
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:2rem 2.5rem;border-bottom:1px solid var(--line)}h1{font-size:2.2rem;letter-spacing:-.04em;margin:0}.meta{font:700 .7rem ui-monospace,monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}.note{max-width:58ch;color:var(--muted);font-size:.85rem;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem}.direction{margin:0;background:var(--panel);border:1px solid var(--line)}figcaption{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;font:700 .72rem ui-monospace,monospace;text-transform:uppercase}.tag{color:var(--accent)}.desktop{width:100%;height:auto;display:block;border-top:1px solid var(--line)}.mobile-wrap{padding:1rem;display:flex;justify-content:center;background:#0c1318}.mobile{height:420px;width:auto;display:block;border:1px solid #65747c}footer{padding:1rem 2.5rem 2rem;color:var(--muted);font:700 .68rem ui-monospace,monospace;text-transform:uppercase}
|
||
@media(max-width:1000px){.grid{grid-template-columns:1fr}header{display:block}.note{margin-top:1rem}.mobile{height:560px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header><div><div class="meta">Direction cycle 01 · representative screen</div><h1>같은 문제, 서로 다른 세 가지 학습 문법</h1></div><p class="note">모든 방향은 1280×1100과 390×844에서 렌더했습니다. 비교판은 축소 열로 앱을 다시 렌더하지 않고, 동일 viewport의 full-size 결과를 그대로 보여줍니다.</p></header>
|
||
<main class="grid">
|
||
<figure class="direction"><figcaption><span>01 · Ledger Studio</span><span class="tag">Editorial evidence</span></figcaption><img class="desktop" src="ledger-desktop.png" alt="Ledger Studio 데스크톱 전체 화면"/><div class="mobile-wrap"><img class="mobile" src="ledger-mobile.png" alt="Ledger Studio 모바일 전체 화면"/></div></figure>
|
||
<figure class="direction"><figcaption><span>02 · Signal Trace</span><span class="tag">Instrument rails</span></figcaption><img class="desktop" src="signal-desktop.png" alt="Signal Trace 데스크톱 전체 화면"/><div class="mobile-wrap"><img class="mobile" src="signal-mobile.png" alt="Signal Trace 모바일 전체 화면"/></div></figure>
|
||
<figure class="direction"><figcaption><span>03 · Field Manual</span><span class="tag">Numbered protocol</span></figcaption><img class="desktop" src="manual-desktop.png" alt="Field Manual 데스크톱 전체 화면"/><div class="mobile-wrap"><img class="mobile" src="manual-mobile.png" alt="Field Manual 모바일 전체 화면"/></div></figure>
|
||
</main>
|
||
<footer>dual-entry-shared-lab · tx-lost-update-01 · visual comparison only</footer>
|
||
</body>
|
||
</html>
|