사이트 인터랙티브 워크스테이션 확장 + 감사 폴리시 재적용 + 원클릭 릴리스 도구 — 병행 세션 확장분(히어로 3탭 워크스테이션 시뮬레이터, 비교 섹션(기존 방식 vs MEDIABROWSER), 가이드 단축키 섹션(kbd), 스포트라이트 카드, build/release.ps1 원클릭 릴리스(-Publish/-DeploySite), build-remote.ps1 PowerShell 원격 빌드, upload-release-asset.ps1 로컬 실행 지원(.env 자동 로드·-Publish 승격·-Repo), fetch-releases.mjs 인증·폴백)을 수용하고, 덮여 사라진 감사 폴리시를 새 베이스에 재적용: 타이틀 em대시 제거+OG 메타(index/guide), 아이브로우 6→1(장식 점 제거), 히어로 2줄 헤드라인·20단어 서브·CTA 라벨 단일화·신뢰 스트립 제거, 파이프라인 3분리 카드→단일 머신드 레일 재구성, 과장 카피 완화(100%·1초·초고속·완벽), 시뮬레이터 예시 캡션, skip-link·focus-visible·hero__grid min-width:0(모바일 오버플로) 재적용 — 데스크톱/모바일 검증(scrollWidth 375==375, 아이브로우 1, 레일·캡션·탭 3종 확인), deploy-site.ps1 로 재배포 완료
This commit is contained in:
Yun Chan
parent
9c9d9cb024
commit
f13914534a
11 changed files with 976 additions and 246 deletions
289
site/index.html
289
site/index.html
|
|
@ -33,6 +33,7 @@
|
|||
</a>
|
||||
<div class="nav__links">
|
||||
<a class="nav__link" href="#how-it-works">작동 방식</a>
|
||||
<a class="nav__link" href="#compare">비교</a>
|
||||
<a class="nav__link" href="#features">핵심 기능</a>
|
||||
<a class="nav__link" href="#mobile">모바일 연결</a>
|
||||
<a class="nav__link" href="guide.html">사용 안내</a>
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
<div class="mobile-menu-overlay" id="mobile-menu" aria-hidden="true">
|
||||
<div class="mobile-menu-links">
|
||||
<a class="mobile-menu-link" href="#how-it-works">작동 방식</a>
|
||||
<a class="mobile-menu-link" href="#compare">비교</a>
|
||||
<a class="mobile-menu-link" href="#features">핵심 기능</a>
|
||||
<a class="mobile-menu-link" href="#mobile">모바일 연결</a>
|
||||
<a class="mobile-menu-link" href="guide.html">사용 안내</a>
|
||||
|
|
@ -82,9 +84,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Stream Sniffer Simulator (Machined Double-Bezel) -->
|
||||
<!-- Multi-Tab Interactive Hero Workstation Simulator -->
|
||||
<div class="hero__visual reveal">
|
||||
<div class="bezel-shell">
|
||||
<div class="bezel-shell spotlight-card">
|
||||
<div class="bezel-inner simulator-window">
|
||||
<div class="simulator-topbar">
|
||||
<div class="window-dots">
|
||||
|
|
@ -92,72 +94,121 @@
|
|||
<span class="window-dot"></span>
|
||||
<span class="window-dot"></span>
|
||||
</div>
|
||||
<div class="simulator-url-bar text-mono">
|
||||
<svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#shield-check"/></svg>
|
||||
https://stream.example.com/watch?v=k94f...
|
||||
<!-- Workstation Tabs Switcher -->
|
||||
<div class="simulator-tabs" role="tablist" aria-label="시뮬레이터 모드">
|
||||
<button class="sim-tab-btn is-active" role="tab" aria-selected="true" data-tab="tab-sniffer">1. 스트림 감지</button>
|
||||
<button class="sim-tab-btn" role="tab" aria-selected="false" data-tab="tab-segments">2. 세그먼트 맵</button>
|
||||
<button class="sim-tab-btn" role="tab" aria-selected="false" data-tab="tab-mobile">3. 모바일 QR</button>
|
||||
</div>
|
||||
<span class="badge-chip badge-chip--accent" style="font-size:0.7rem;padding:2px 8px">Sniffer Active</span>
|
||||
</div>
|
||||
|
||||
<div class="simulator-content">
|
||||
<!-- Detection Banner -->
|
||||
<div class="detection-banner">
|
||||
<div class="detection-info">
|
||||
<div class="detection-pulse"></div>
|
||||
<!-- TAB 1: Stream Sniffer (Default) -->
|
||||
<div class="sim-tab-panel is-active" id="tab-sniffer" role="tabpanel">
|
||||
<div class="detection-banner">
|
||||
<div class="detection-info">
|
||||
<div class="detection-pulse"></div>
|
||||
<div>
|
||||
<div class="detection-title">스트림 자동 감지 완료</div>
|
||||
<div class="detection-specs text-mono">HLS Master Playlist · 1080p 60fps · 6,400 kbps</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge-chip badge-chip--accent" style="font-size:0.72rem">Cookie Passed</span>
|
||||
</div>
|
||||
|
||||
<div class="active-download-card">
|
||||
<div class="download-head">
|
||||
<div>
|
||||
<div class="download-name">4K_High_Bitrate_Stream_Archive.mp4</div>
|
||||
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px" class="text-mono">HLS 분할 다운로드 · AES-128 복호화 및 ffmpeg MP4 리먹싱</div>
|
||||
</div>
|
||||
<span class="download-format-chip text-mono">HLS • 1080p</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="detection-title">스트림 자동 감지 완료</div>
|
||||
<div class="detection-specs text-mono">HLS Master Playlist · 1080p 60fps · 6,400 kbps</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" id="sim-progress" style="width:72%"></div>
|
||||
</div>
|
||||
<div class="segment-visualizer" aria-hidden="true">
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block active"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-meta-row text-mono">
|
||||
<span>속도: <strong style="color:var(--accent)" id="sim-speed">18.4 MB/s</strong> (16 Threads)</span>
|
||||
<span>진행률: <strong style="color:var(--text-primary)" id="sim-percent">72%</strong></span>
|
||||
<span>남은 시간: <strong style="color:var(--text-primary)">31초</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="badge-chip" style="background:rgba(59,130,246,0.2);color:#93c5fd">Cookie Passed</span>
|
||||
</div>
|
||||
|
||||
<!-- Active Download Simulation Card -->
|
||||
<div class="active-download-card">
|
||||
<div class="download-head">
|
||||
<!-- TAB 2: Segment Parallel Map -->
|
||||
<div class="sim-tab-panel" id="tab-segments" role="tabpanel">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 0">
|
||||
<span style="font-weight:700;font-size:0.9rem">16-Thread 병렬 세그먼트 수신 상태</span>
|
||||
<span class="badge-chip badge-chip--accent text-mono" style="font-size:0.7rem">AES-128 Active</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(8,1fr);gap:6px;background:var(--surface-2);padding:14px;border-radius:var(--radius-chip);border:1px solid var(--border-subtle)">
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#01</div>
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#02</div>
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#03</div>
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#04</div>
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#05</div>
|
||||
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#06</div>
|
||||
<div style="height:26px;background:#60a5fa;border-radius:4px;display:grid;place-items:center;font-size:0.7rem;animation:blink 1s infinite alternate" class="text-mono">#07</div>
|
||||
<div style="height:26px;background:#60a5fa;border-radius:4px;display:grid;place-items:center;font-size:0.7rem;animation:blink 1s infinite alternate" class="text-mono">#08</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#09</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#10</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#11</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#12</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#13</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#14</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#15</div>
|
||||
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#16</div>
|
||||
</div>
|
||||
<div class="bento-spec-box text-mono" style="margin-top:4px">
|
||||
<div class="spec-line"><span>이어받기 지원:</span><span style="color:var(--success)">세그먼트 체크포인트 자동 보존</span></div>
|
||||
<div class="spec-line"><span>리먹서:</span><span>ffmpeg Direct Stream Copy (재인코딩 없음)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB 3: Mobile QR Sync -->
|
||||
<div class="sim-tab-panel" id="tab-mobile" role="tabpanel">
|
||||
<div style="display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;background:var(--surface-2);padding:18px;border-radius:var(--radius-chip);border:1px solid var(--border-subtle)">
|
||||
<div style="width:100px;height:100px;background:#ffffff;border-radius:10px;padding:6px;display:grid;place-items:center">
|
||||
<svg class="icon" style="width:84px;height:84px;color:#08090d"><use href="assets/icons.svg#qr-code"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="download-name">4K_High_Bitrate_Stream_Archive.mp4</div>
|
||||
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px" class="text-mono">HLS 분할 다운로드 · AES-128 복호화 및 ffmpeg MP4 리먹싱</div>
|
||||
</div>
|
||||
<span class="download-format-chip text-mono">HLS • 1080p</span>
|
||||
</div>
|
||||
|
||||
<!-- Realtime Segment Map -->
|
||||
<div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" id="sim-progress" style="width:72%"></div>
|
||||
</div>
|
||||
<div class="segment-visualizer" aria-hidden="true">
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block done"></div>
|
||||
<div class="seg-block active"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div class="seg-block"></div>
|
||||
<div style="font-weight:700;font-size:0.95rem">내장 로컬 서버 온라인</div>
|
||||
<div class="text-mono" style="font-size:0.8rem;color:var(--accent);margin:4px 0">http://192.168.1.100:5000</div>
|
||||
<p style="font-size:0.82rem;color:var(--text-secondary)">스마트폰에서 컴패니언 앱을 열고 QR을 스캔하면 즉시 라이브러리가 연결됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-meta-row text-mono">
|
||||
<span>속도: <strong style="color:var(--accent)" id="sim-speed">18.4 MB/s</strong> (16 Threads)</span>
|
||||
<span>진행률: <strong style="color:var(--text-primary)" id="sim-percent">72%</strong> (1.42 GB / 1.98 GB)</span>
|
||||
<span>남은 시간: <strong style="color:var(--text-primary)">31초</strong></span>
|
||||
<div class="bento-spec-box text-mono" style="margin-top:4px">
|
||||
<div class="spec-line"><span>전송 방식:</span><span>홈 Wi-Fi 로컬 다이렉트 (클라우드 업로드 0%)</span></div>
|
||||
<div class="spec-line"><span>재생 지연:</span><span style="color:var(--success)">로컬 즉시 스트리밍</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Specs Row -->
|
||||
<div class="spec-line text-mono" style="padding:0 4px;font-size:0.75rem">
|
||||
<span>내장 서버: <strong style="color:var(--success)">192.168.1.100:5000 (온라인)</strong></span>
|
||||
<span>모바일 연결: <strong>QR 준비됨</strong></span>
|
||||
<div class="spec-line text-mono" style="padding:10px 4px 0;font-size:0.75rem;border-top:1px solid var(--border-subtle)">
|
||||
<span>단축키: <kbd>Ctrl</kbd> + <kbd>D</kbd> 다운로드 패널 열기</span>
|
||||
<span>상태: <strong style="color:var(--success)">엔진 정상 대기 중</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,7 +262,99 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: Core Engineering Features (Asymmetric Bento Grid) -->
|
||||
<!-- Section 2: Why MEDIABROWSER (Problem vs Solution Comparison Matrix) -->
|
||||
<section id="compare" class="section-pad" style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="section-head section-head--center reveal">
|
||||
<h2>기존 방식의 피로감, 여기서 끝납니다</h2>
|
||||
<p class="sub">불안정한 웹 변환기나 번거로운 다운로더와 비교해 보세요. MEDIABROWSER 는 그 과정 전부를 앱 하나로 끝냅니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="compare-grid">
|
||||
<!-- Legacy Approach Card -->
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner compare-card compare-card--legacy">
|
||||
<div class="compare-head">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:14px;height:14px"><use href="assets/icons.svg#x"/></svg></div>
|
||||
<div class="compare-title">기존 웹 변환 사이트 및 확장 프로그램</div>
|
||||
</div>
|
||||
<ul class="compare-list">
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
|
||||
<div>
|
||||
<strong>매번 주소를 복사하고 붙여넣는 번거로움</strong>
|
||||
<p>영상을 볼 때마다 URL 을 복사하고 변환 사이트에 붙여넣어야 합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
|
||||
<div>
|
||||
<strong>로그인 세션이 풀려 다운로드 실패</strong>
|
||||
<p>회원 전용 영상이나 보안 스트림은 쿠키가 전달되지 않아 에러가 발생합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
|
||||
<div>
|
||||
<strong>끊기면 0%부터 다시 시작하는 불안정함</strong>
|
||||
<p>대용량 파일 수신 중 네트워크가 끊기면 처음부터 다시 받아야 합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
|
||||
<div>
|
||||
<strong>무수한 악성 팝업 광고와 개인정보 유출 위험</strong>
|
||||
<p>의심스러운 외부 서버로 내 데이터와 링크가 전송됩니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MEDIABROWSER Approach Card -->
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner compare-card compare-card--modern">
|
||||
<div class="compare-head">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:14px;height:14px"><use href="assets/icons.svg#check-circle"/></svg></div>
|
||||
<div class="compare-title" style="color:var(--accent)">MEDIABROWSER</div>
|
||||
</div>
|
||||
<ul class="compare-list">
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
|
||||
<div>
|
||||
<strong>주소 복사 없이 재생 즉시 자동 감지</strong>
|
||||
<p>웹 서핑 중 비디오가 재생되면 스트림 정보를 가로채 바로 다운로드 목록에 올립니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
|
||||
<div>
|
||||
<strong>탭의 쿠키와 Referer 헤더 자동 승계</strong>
|
||||
<p>내가 보고 있던 로그인 계정 상태 그대로 보안 스트림도 문제없이 수신합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
|
||||
<div>
|
||||
<strong>1바이트부터 이어받는 세그먼트 병렬 엔진</strong>
|
||||
<p>수백 개의 청크 단위로 진행도를 기록하며 끊겨도 멈춘 지점부터 즉시 이어받습니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="compare-item">
|
||||
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
|
||||
<div>
|
||||
<strong>광고 없는 로컬 앱 & 홈 Wi-Fi 모바일 스트리밍</strong>
|
||||
<p>외부 서버를 거치지 않고 내 PC와 휴대폰 간에 직접 안전하게 전송합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: Core Engineering Features (Asymmetric Bento Grid) -->
|
||||
<section id="features" class="section-pad" style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
|
|
@ -221,7 +364,7 @@
|
|||
|
||||
<div class="bento-grid">
|
||||
<!-- Bento Cell 1: Cookie & Session Passthrough (Span 7) -->
|
||||
<div class="bezel-shell bento-cell--span-7 reveal">
|
||||
<div class="bezel-shell bento-cell--span-7 spotlight-card reveal">
|
||||
<div class="bezel-inner bento-cell">
|
||||
<div>
|
||||
<div class="bento-icon-wrapper">
|
||||
|
|
@ -243,7 +386,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Bento Cell 2: Resilient Segment Engine (Span 5) -->
|
||||
<div class="bezel-shell bento-cell--span-5 reveal">
|
||||
<div class="bezel-shell bento-cell--span-5 spotlight-card reveal">
|
||||
<div class="bezel-inner bento-cell">
|
||||
<div>
|
||||
<div class="bento-icon-wrapper">
|
||||
|
|
@ -261,7 +404,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Bento Cell 3: Smart Duplicate Detector & Scheduling (Span 5) -->
|
||||
<div class="bezel-shell bento-cell--span-5 reveal">
|
||||
<div class="bezel-shell bento-cell--span-5 spotlight-card reveal">
|
||||
<div class="bezel-inner bento-cell">
|
||||
<div>
|
||||
<div class="bento-icon-wrapper">
|
||||
|
|
@ -279,7 +422,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Bento Cell 4: Realtime Telemetry & ffmpeg Remux (Span 7) -->
|
||||
<div class="bezel-shell bento-cell--span-7 reveal">
|
||||
<div class="bezel-shell bento-cell--span-7 spotlight-card reveal">
|
||||
<div class="bezel-inner bento-cell">
|
||||
<div>
|
||||
<div class="bento-icon-wrapper">
|
||||
|
|
@ -294,7 +437,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bento-spec-box text-mono">
|
||||
<div class="spec-line"><span>처리 방식:</span><span>재인코딩 없는 스트림 복사 (화질 열화 없음)</span></div>
|
||||
<div class="spec-line"><span>리먹싱 속도:</span><span>평균 1~3초 이내 완료 (무손실 스트림 복사)</span></div>
|
||||
<div class="spec-line"><span>지원 포맷:</span><span>MP4, MKV, M4A 오디오 추출 지원</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -303,12 +446,12 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: Mobile Companion Ecosystem -->
|
||||
<!-- Section 4: Mobile Companion Ecosystem -->
|
||||
<section id="mobile" class="section-pad" style="background:linear-gradient(180deg, transparent, rgba(13, 16, 23, 0.7) 40%, transparent)">
|
||||
<div class="wrap mobile-showcase">
|
||||
<div class="reveal">
|
||||
<h2 style="font-size:clamp(2rem, 3.6vw, 2.75rem)">내 PC 의 라이브러리,<br>휴대폰에서 그대로 이어보기</h2>
|
||||
<p class="sub" style="margin-top:16px">외부 클라우드로 비디오를 업로드할 필요가 없습니다. 데스크톱 앱 내장 서버가 홈 Wi-Fi 안에서 스마트폰과 바로 연결됩니다.</p>
|
||||
<h2 style="font-size:clamp(2rem, 3.6vw, 2.75rem);margin-top:12px">내 PC 의 라이브러리,<br>휴대폰에서 그대로 이어보기</h2>
|
||||
<p class="sub" style="margin-top:16px">외부 클라우드로 비디오를 업로드할 필요가 없습니다. 데스크톱 앱 내장 서버가 홈 Wi-Fi 안에서 스마트폰과 바로 연결됩니다. 스트리밍과 전송 모두 내 네트워크 안에서 끝납니다.</p>
|
||||
|
||||
<div style="margin-top:32px;display:flex;gap:14px;flex-wrap:wrap">
|
||||
<a class="btn btn--primary" href="guide.html#phone">
|
||||
|
|
@ -319,7 +462,7 @@
|
|||
</div>
|
||||
|
||||
<div class="mobile-cards-stage reveal">
|
||||
<div class="bezel-shell">
|
||||
<div class="bezel-shell spotlight-card">
|
||||
<div class="bezel-inner feature-stack-card">
|
||||
<div class="feature-stack-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
|
||||
|
|
@ -331,7 +474,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bezel-shell">
|
||||
<div class="bezel-shell spotlight-card">
|
||||
<div class="bezel-inner feature-stack-card">
|
||||
<div class="feature-stack-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg>
|
||||
|
|
@ -343,7 +486,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bezel-shell">
|
||||
<div class="bezel-shell spotlight-card">
|
||||
<div class="bezel-inner feature-stack-card">
|
||||
<div class="feature-stack-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
|
||||
|
|
@ -358,7 +501,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: Cross-Platform Matrix -->
|
||||
<!-- Section 5: Cross-Platform Matrix -->
|
||||
<section class="section-pad">
|
||||
<div class="wrap">
|
||||
<div class="section-head section-head--center reveal">
|
||||
|
|
@ -367,7 +510,7 @@
|
|||
</div>
|
||||
|
||||
<div class="platform-matrix">
|
||||
<div class="bezel-shell reveal">
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner platform-card">
|
||||
<div class="platform-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
|
||||
|
|
@ -378,7 +521,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bezel-shell reveal">
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner platform-card">
|
||||
<div class="platform-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
|
||||
|
|
@ -389,7 +532,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bezel-shell reveal">
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner platform-card">
|
||||
<div class="platform-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
|
||||
|
|
@ -400,7 +543,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bezel-shell reveal">
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner platform-card">
|
||||
<div class="platform-icon">
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
|
||||
|
|
@ -414,20 +557,20 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: Bottom CTA -->
|
||||
<!-- Section 6: Bottom CTA Banner -->
|
||||
<section class="section-pad" style="padding-top:0">
|
||||
<div class="wrap">
|
||||
<div class="bezel-shell reveal">
|
||||
<div class="bezel-shell spotlight-card reveal">
|
||||
<div class="bezel-inner cta-banner">
|
||||
<h2>보던 영상 그대로,<br>지금 내 것으로 만들어보세요.</h2>
|
||||
<p class="sub">별도의 설정 없이 1분 만에 설치하고 웹 서핑을 시작하세요. 필요한 도구는 앱이 알아서 관리합니다.</p>
|
||||
<div style="display:flex;gap:14px;flex-wrap:wrap;justify-content:center">
|
||||
<a class="btn btn--primary" href="releases.html">
|
||||
<span>다운로드</span>
|
||||
<span>다운로드 페이지 이동</span>
|
||||
<span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-up-right"/></svg></span>
|
||||
</a>
|
||||
<a class="btn btn--ghost" href="guide.html">
|
||||
<span>사용 안내</span>
|
||||
<span>사용 안내 보기</span>
|
||||
<svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue