releases/site/index.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MEDIABROWSER - 보던 영상, 그 자리에서 내 것으로</title>
<meta name="description" content="MEDIABROWSER 는 재생 중인 미디어를 감지해 내려받는 데스크톱 브라우저입니다. 받은 영상은 라이브러리로 관리하고 휴대폰으로 이어봅니다.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='24' fill='%232050f0'/><path d='M50 22v36M36 44l14 14 14-14M28 74h44' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<nav class="nav glass" aria-label="주 메뉴">
  <a class="nav__brand" href="index.html" aria-current="page">
    <span class="nav__mark"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg></span>
    MEDIABROWSER
  </a>
  <div class="nav__links">
    <a href="#features">기능</a>
    <a href="#mobile">모바일</a>
    <a href="guide.html">사용 안내</a>
  </div>
  <a class="btn btn--primary btn--sm" href="releases.html">다운로드</a>
</nav>

<header class="hero">
  <div class="orbs" aria-hidden="true">
    <div class="orb orb--a"></div>
    <div class="orb orb--b"></div>
    <div class="orb orb--c"></div>
  </div>
  <div class="wrap hero__grid">
    <div>
      <h1>보던 영상,<br>그 자리에서 내 것으로.</h1>
      <p class="sub">MEDIABROWSER 는 재생 중인 미디어를 감지해 내려받는 브라우저입니다.
        받은 영상은 라이브러리로 관리하고, 휴대폰으로 이어봅니다.</p>
      <div class="hero__cta">
        <a class="btn btn--primary" href="releases.html">다운로드</a>
        <a class="btn btn--ghost" href="guide.html">사용 안내</a>
      </div>
    </div>
    <div class="hero__visual reveal">
      <figure class="hero__panel glass">
        <img src="assets/panel-downloads.png" alt="MEDIABROWSER 다운로드 패널. 전체·진행·완료·실패 탭과 모두 일시정지, 모두 재개, CSV 버튼이 있고, 영상을 재생하면 여기에 나타납니다 라는 안내가 보인다." width="426" height="330">
        <figcaption class="hero__caption">앱의 다운로드 패널. 재생을 감지하면 이 목록에 자동으로 쌓입니다.</figcaption>
      </figure>
    </div>
  </div>
</header>

<section id="features" class="section-pad">
  <div class="wrap">
    <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">주소를 붙여넣는 게 아니라,<br>그냥 봅니다.</h2>
    <div class="bento">
      <div class="bento__cell bento__cell--wide reveal">
        <div class="bento__wave"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg></div>
        <div>
          <div class="bento__chipline" aria-label="지원 형식">
            <span class="chip">HLS</span><span class="chip">DASH</span><span class="chip">MP4</span>
          </div>
          <h3>재생하면 감지됩니다</h3>
          <p>내장 브라우저에서 영상이 재생되는 순간 스트림을 인식해 다운로드 목록에 올립니다.
            별도 확장이나 주소 복사가 필요 없습니다.</p>
        </div>
      </div>
      <div class="bento__cell glass reveal">
        <h3>로그인 그대로</h3>
        <p>탭의 쿠키와 Referer 를 그대로 물려받아 내려받습니다. 브라우저에서 보이던 영상은 그대로 받아집니다.</p>
      </div>
      <div class="bento__cell glass reveal">
        <h3>끊겨도 이어서</h3>
        <p>병렬 분할 다운로드와 이어받기, 그리고 ffmpeg 리먹스까지 자동으로 처리합니다. AES-128 스트림도 지원합니다.</p>
      </div>
    </div>
  </div>
</section>

<section class="section-pad" style="background:linear-gradient(180deg,transparent,var(--bg-deep) 30%,var(--bg-deep) 70%,transparent)">
  <div class="wrap">
    <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">다운로드는 관리가 절반입니다.</h2>
    <div class="featlist">
      <div class="featlist__item reveal">
        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg></div>
        <div><h3>속도와 세그먼트가 보입니다</h3><p>항목마다 속도, 남은 시간, 세그먼트 맵을 실시간으로 표시합니다.</p></div>
      </div>
      <div class="featlist__item reveal">
        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg></div>
        <div><h3>전체 일시정지와 재개</h3><p>한 번에 멈추고 한 번에 다시 시작합니다. 예약 시간을 걸어둘 수도 있습니다.</p></div>
      </div>
      <div class="featlist__item reveal">
        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg></div>
        <div><h3>중복은 미리 알려줍니다</h3><p>이미 받은 영상을 다시 받으려 하면 내려받기 전에 확인해 줍니다.</p></div>
      </div>
      <div class="featlist__item reveal">
        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg></div>
        <div><h3>라이브러리와 아카이브</h3><p>받은 영상을 모아 보고, 정리하고, 재생목록과 즐겨찾기로 관리합니다.</p></div>
      </div>
    </div>
  </div>
</section>

<section id="mobile" class="section-pad">
  <div class="wrap mobile__grid">
    <div class="mobile__stage reveal" aria-hidden="true">
      <div class="mobile__card mobile__card--a glass">
        <svg class="icon"><use href="assets/icons.svg#qr-code"/></svg>
        <div><strong>QR 페어링</strong><span>화면의 코드를 한 번 스캔</span></div>
      </div>
      <div class="mobile__card mobile__card--b glass">
        <svg class="icon"><use href="assets/icons.svg#device-mobile"/></svg>
        <div><strong>스트리밍</strong><span>같은 네트워크에서 바로 재생</span></div>
      </div>
      <div class="mobile__card mobile__card--c glass">
        <svg class="icon"><use href="assets/icons.svg#download-simple"/></svg>
        <div><strong>전송</strong><span>파일을 휴대폰에 저장</span></div>
      </div>
    </div>
    <div>
      <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">받은 영상,<br>휴대폰에서 이어보기.</h2>
      <p class="sub reveal" style="margin-top:20px">데스크톱 앱에 내장된 서버가 라이브러리를 휴대폰으로 스트리밍하거나 전송합니다.
        QR 코드 한 번으로 페어링하고, Android 컴패니언 앱으로 어디서든 이어봅니다. iOS 는 준비 중입니다.</p>
    </div>
  </div>
</section>

<section class="section-pad" style="padding-top:0">
  <div class="wrap">
    <div class="band glass reveal">
      <h2>Windows 에서 시작하세요.</h2>
      <p class="sub">Windows 는 설치자로 바로 시작할 수 있습니다.
        macOS 와 Linux 는 새 셸의 프리뷰 빌드, Android 는 컴패니언 앱을 제공합니다.</p>
      <div class="band__oses">
        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>Windows</div>
        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>macOS 프리뷰</div>
        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>Linux 프리뷰</div>
        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>Android</div>
      </div>
      <a class="btn btn--primary" href="releases.html">다운로드</a>
    </div>
  </div>
</section>

<footer>
  <div class="wrap footer__row">
    <span class="footer__brand">MEDIABROWSER</span>
    <a href="releases.html">다운로드</a>
    <a href="guide.html">사용 안내</a>
    <a href="https://git.chanpaca.net/Video-Downloader/releases" rel="noopener">릴리스 저장소</a>
    <span class="footer__copy">© 2026 MEDIABROWSER</span>
  </div>
</footer>

<script src="site.js" defer></script>
</body>
</html>