juc500/dist-offline/juc500-offline-update-20260721-134751/juc500_xfer/static/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>JUC500</title>
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <div class="app">
    <header class="top">
      <div class="brand">
        <div class="brand-row">
          <span class="brand-mark" id="brandModel">JUC</span>
          <span class="brand-version" id="appVersion" title="앱 버전">—</span>
        </div>
        <span class="brand-sub" id="thisHost">Smart Data Link 파일 전송</span>
      </div>
      <div class="conn">
        <span id="autoBadge" class="auto-badge wait">미연결</span>
        <span id="wormholeBadge" class="auto-badge wait" title="공식 Wormhole 프로세스">Wormhole —</span>
        <button id="killWormholeBtn" type="button" class="ghost" title="케이블 자동실행 Wormhole 종료">Wormhole 종료</button>
        <span id="inputBadge" class="auto-badge wait" title="마우스·키보드 공유">입력공유 꺼짐</span>
        <span id="pasteBadge" class="auto-badge wait" title="클립보드 파일 → 상대 폴더 (Ctrl+Shift+V)">붙여넣기 —</span>
        <button id="inputShareBtn" type="button" class="ghost" disabled>입력공유 켜기</button>
        <div class="control-switch" title="입력공유를 먼저 켜세요">
          <button id="controlLocalBtn" type="button" class="ghost control-btn" disabled>이 PC</button>
          <button id="controlRemoteBtn" type="button" class="ghost control-btn" disabled>상대 PC</button>
        </div>
        <button id="connectBtn" type="button" class="primary">연결</button>
        <button id="disconnectBtn" type="button" class="ghost" disabled>끊기</button>
        <button id="settingsBtn" type="button" class="ghost settings-btn" title="설정" aria-label="설정">
          <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
            <path fill="currentColor" d="M10 6.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm7.1 2.4-.9-.2a5.9 5.9 0 0 0-.5-1.2l.5-.8a.8.8 0 0 0-.1-.9l-1.4-1.4a.8.8 0 0 0-.9-.1l-.8.5c-.4-.2-.8-.4-1.2-.5l-.2-.9a.8.8 0 0 0-.8-.6H8.2a.8.8 0 0 0-.8.6l-.2.9c-.4.1-.8.3-1.2.5l-.8-.5a.8.8 0 0 0-.9.1L2.9 5.8a.8.8 0 0 0-.1.9l.5.8c-.2.4-.4.8-.5 1.2l-.9.2a.8.8 0 0 0-.6.8v2a.8.8 0 0 0 .6.8l.9.2c.1.4.3.8.5 1.2l-.5.8a.8.8 0 0 0 .1.9l1.4 1.4a.8.8 0 0 0 .9.1l.8-.5c.4.2.8.4 1.2.5l.2.9a.8.8 0 0 0 .8.6h2a.8.8 0 0 0 .8-.6l.2-.9c.4-.1.8-.3 1.2-.5l.8.5a.8.8 0 0 0 .9-.1l1.4-1.4a.8.8 0 0 0 .1-.9l-.5-.8c.2-.4.4-.8.5-1.2l.9-.2a.8.8 0 0 0 .6-.8v-2a.8.8 0 0 0-.6-.8z"/>
          </svg>
        </button>
      </div>
    </header>

    <div id="settingsModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
      <div class="modal-backdrop" data-close-settings></div>
      <div class="modal-panel">
        <div class="modal-head">
          <h2 id="settingsTitle">설정</h2>
          <button type="button" class="ghost modal-close" data-close-settings aria-label="닫기">닫기</button>
        </div>
        <p class="modal-lead">JUC500 GUI 포트입니다. 변경 후 다음 실행 시 적용됩니다.</p>
        <div id="portsForm" class="ports-form"></div>
        <p id="portsConfigPath" class="ports-path muted"></p>
        <p id="settingsMsg" class="settings-msg" hidden></p>
        <div class="modal-actions">
          <button type="button" id="portsResetBtn" class="ghost">기본값</button>
          <button type="button" id="portsApplyBtn" class="primary">적용</button>
        </div>
      </div>
    </div>

    <section id="peerBar" class="peer-bar">
      <span id="peerInfo">한쪽에서 「연결」을 누르면 양쪽이 자동 연결됩니다</span>
      <span id="ifaceInfo"></span>
    </section>

    <main class="main ftp-layout">
      <aside class="finder local-browser" aria-label="이 PC 파일">
        <div class="finder-titlebar">
          <span class="finder-title">이 PC</span>
          <span class="finder-subtitle" id="localRootHint">로컬 파일</span>
        </div>
        <div class="finder-toolbar">
          <div class="nav-group">
            <button id="localUpBtn" type="button" class="tool-btn" title="상위 폴더" disabled>
              <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5 3 8.5h3.2V13h3.6V8.5H13L8 3.5z"/></svg>
            </button>
            <button id="localRefreshBtn" type="button" class="tool-btn" title="새로고침">
              <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.4-3.6l.9.9V3.2h-2.1l1.1 1.1A4.2 4.2 0 1 0 12.2 8h1.3z"/></svg>
            </button>
          </div>
          <div id="localPathBar" class="address-bar" title="경로"></div>
        </div>
        <div class="finder-cols" aria-hidden="true">
          <button type="button" class="col-btn" data-sort-local="name">이름</button>
          <button type="button" class="col-btn" data-sort-local="mtime">수정한 날짜</button>
          <button type="button" class="col-btn" data-sort-local="size">크기</button>
          <button type="button" class="col-btn" data-sort-local="kind">종류</button>
        </div>
        <div class="finder-scroll">
          <table class="finder-table" aria-label="이 PC 목록">
            <tbody id="localDirList"></tbody>
          </table>
          <div id="localEmpty" class="finder-empty hidden">폴더가 비어 있습니다</div>
        </div>
        <div class="finder-status">
          <span id="localCount">0개 항목</span>
          <span id="localPathHint" class="path-hint">/</span>
        </div>
      </aside>

      <aside class="transfer-rail" aria-label="전송">
        <div class="rail-paths">
          <div class="rail-path">
            <span class="rail-label">이 PC</span>
            <strong id="railLocalPath">/</strong>
          </div>
          <div class="rail-path">
            <span class="rail-label">상대</span>
            <strong id="railRemotePath">/</strong>
          </div>
        </div>
        <button id="uploadBtn" type="button" class="xfer-btn" disabled title="선택한 항목을 상대 현재 폴더로 전송">
          <span class="xfer-arrow">→</span>
          <span class="xfer-text">전송</span>
        </button>
        <button id="downloadBtn" type="button" class="xfer-btn" disabled title="선택한 항목을 이 PC 현재 폴더로 가져오기">
          <span class="xfer-arrow">←</span>
          <span class="xfer-text">가져오기</span>
        </button>
        <p class="rail-hint">선택 후 버튼<br/>또는 패널로 드래그<br/>Ctrl+Shift+V 붙여넣기</p>
        <div class="rail-progress">
          <div class="progress-wrap">
            <div id="progressBar" class="progress-bar"></div>
          </div>
          <div id="statusText" class="status">연결 버튼을 누르세요</div>
        </div>
      </aside>

      <aside class="finder remote-browser" aria-label="상대 PC 폴더">
        <div class="finder-titlebar">
          <span class="finder-title">상대 PC</span>
          <span class="finder-subtitle" id="remoteRootHint">연결 필요</span>
        </div>
        <div class="finder-toolbar">
          <div class="nav-group">
            <button id="upBtn" type="button" class="tool-btn" title="상위 폴더" disabled>
              <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5 3 8.5h3.2V13h3.6V8.5H13L8 3.5z"/></svg>
            </button>
            <button id="refreshBtn" type="button" class="tool-btn" title="새로고침">
              <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.4-3.6l.9.9V3.2h-2.1l1.1 1.1A4.2 4.2 0 1 0 12.2 8h1.3z"/></svg>
            </button>
            <button id="mkdirBtn" type="button" class="tool-btn wide" title="새 폴더">새 폴더</button>
          </div>
          <div id="pathBar" class="address-bar" title="경로"></div>
        </div>
        <div class="finder-cols" aria-hidden="true">
          <button type="button" class="col-btn" data-sort-remote="name">이름</button>
          <button type="button" class="col-btn" data-sort-remote="mtime">수정한 날짜</button>
          <button type="button" class="col-btn" data-sort-remote="size">크기</button>
          <button type="button" class="col-btn" data-sort-remote="kind">종류</button>
        </div>
        <div class="finder-scroll">
          <table class="finder-table" aria-label="상대 PC 목록">
            <tbody id="dirList"></tbody>
          </table>
          <div id="remoteEmpty" class="finder-empty">연결 후 여기에 상대 폴더가 표시됩니다</div>
        </div>
        <div class="finder-status">
          <span id="remoteCount">연결되지 않음</span>
          <span id="remotePathHint" class="path-hint">/</span>
        </div>
      </aside>
    </main>
  </div>
  <script src="/app.js"></script>
</body>
</html>