hehihoho3@gmail.com
5ad597c97a
- '저장 폴더' 버튼(File System Access API)으로 폴더를 한 번 고르면 ⬇ 저장·전체 저장이 그 폴더로 바로 저장(이 사이트 세션에만 적용) - '전체 저장' 버튼: 현재 표시된 카드를 순서대로 일괄 저장(진행 표시) - 미지원 브라우저(파이어폭스/사파리)는 폴더 버튼 숨김·기존 다운로드 폴백 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
151 lines
11 KiB
HTML
151 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout/base}">
|
|
<head>
|
|
<title>h-lab - 댓글 카드</title>
|
|
<style>
|
|
.cc-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1rem; }
|
|
.cc-toolbar input[type=text], .cc-toolbar select, .cc-toolbar input[type=number] {
|
|
background:var(--surface-2); color:var(--text); border:1px solid var(--border);
|
|
border-radius:8px; padding:.5rem .7rem; font-size:16px; /* 16px: iOS 포커스 자동확대 방지 */
|
|
}
|
|
.cc-url { flex:1; min-width:240px; }
|
|
.cc-btn { background:var(--primary-gradient); color:#fff; border:none; border-radius:8px;
|
|
padding:.55rem 1rem; font-weight:600; cursor:pointer; font-size:14px; min-height:40px; }
|
|
.cc-btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
|
|
.cc-btn [data-lucide] { width:15px; height:15px; vertical-align:-3px; }
|
|
/* 토글 ON 상태: accent로 구분 */
|
|
.cc-btn.secondary.active { background:var(--accent-soft); border-color:var(--primary); color:var(--primary); }
|
|
/* 키보드 포커스 링(모든 상호작용 요소) */
|
|
.cc-btn:focus-visible, .cc-iconbtn:focus-visible, .cc-mini-select:focus-visible,
|
|
.cc-toolbar input:focus-visible, .comment-card:focus-visible, .cc-tl-link:focus-visible {
|
|
outline:2px solid var(--primary); outline-offset:2px; }
|
|
/* 수집 중 스피너 */
|
|
.cc-spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border);
|
|
border-top-color:var(--primary); border-radius:50%; animation:cc-spin .7s linear infinite;
|
|
vertical-align:-2px; margin-right:.45rem; }
|
|
@keyframes cc-spin { to { transform:rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.cc-spinner { animation:none; } .cc-toast { transition:none; }
|
|
}
|
|
/* 메이슨리(다단): 카드가 내용 높이에 딱 맞게 쌓여 짧은 글 아래 흰 여백이 안 생김 */
|
|
.cc-grid { column-width:320px; column-gap:1rem; }
|
|
/* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */
|
|
/* 기본은 각진 모서리, '모서리 둥글게' 토글 시 .rounded 로 살짝 라운드 */
|
|
.comment-card { background:var(--surface); border:1px solid var(--border); border-radius:4px;
|
|
padding:1rem; position:relative; break-inside:avoid; -webkit-column-break-inside:avoid;
|
|
margin-bottom:1rem; }
|
|
.comment-card.rounded { border-radius:16px; }
|
|
.cc-head { display:flex; gap:.6rem; align-items:flex-start; }
|
|
.cc-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--surface-2); }
|
|
.cc-meta { flex:1; min-width:0; }
|
|
.cc-author { font-weight:600; font-size:13.5px; color:var(--text); }
|
|
.cc-time { font-size:11.5px; color:var(--text-2); margin-left:.4rem; }
|
|
.cc-text { font-size:14px; color:var(--text); margin-top:.35rem; white-space:pre-wrap; word-break:break-word; line-height:1.5; }
|
|
.cc-stats { font-size:12px; color:var(--text-2); margin-top:.5rem; display:flex; gap:1rem; font-variant-numeric:tabular-nums; }
|
|
.comment-card { cursor:pointer; }
|
|
/* 저장 버튼 — cc-noexport라 캡처 이미지에서 제외됨 */
|
|
.cc-actions { position:absolute; top:.5rem; right:.5rem; display:flex; gap:.3rem; }
|
|
.cc-iconbtn { background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
|
|
border-radius:6px; font-size:12px; font-weight:600; padding:.4rem .6rem; cursor:pointer;
|
|
line-height:1; min-height:32px; display:inline-flex; align-items:center; gap:.25rem; }
|
|
.cc-iconbtn:hover { color:var(--text); border-color:var(--primary, #6366f1); }
|
|
/* 복사 완료 토스트 — 카드 밖(body)에 떠서 캡처 이미지에 안 찍힘 */
|
|
.cc-toast { position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(1rem);
|
|
background:var(--text); color:var(--surface); padding:.6rem 1.1rem; border-radius:999px;
|
|
font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:9999; }
|
|
.cc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
|
/* 모자이크 */
|
|
.comment-card.mosaic .cc-avatar { filter: blur(6px); }
|
|
.comment-card.mosaic .cc-author { filter: blur(5px); }
|
|
/* 단어 가리기: '단어 가리기 켜짐'일 때 단어에 포인터, 클릭하면 .masked로 블러 */
|
|
.cc-word { cursor: default; }
|
|
.cc-grid.wordmask .cc-word { cursor: pointer; }
|
|
.cc-grid.wordmask .comment-card { cursor: default; }
|
|
.cc-word.masked { filter: blur(4px); }
|
|
.cc-empty { color:var(--text-3); padding:2rem 0; }
|
|
|
|
/* ---- 분석 패널 ---- */
|
|
.cc-analytics { background:var(--surface); border:1px solid var(--border); border-radius:12px;
|
|
padding:1rem 1.1rem; margin-bottom:1.2rem; }
|
|
.cc-an-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; font-size:15px; }
|
|
.cc-an-sub { color:var(--text-2); font-size:12.5px; font-weight:400; }
|
|
.cc-an-head .cc-iconbtn { margin-left:auto; }
|
|
.cc-an-head [data-lucide], .cc-an-sec h4 [data-lucide] { width:16px; height:16px; vertical-align:-3px; }
|
|
.cc-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin-bottom:1rem; }
|
|
.cc-tile { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; }
|
|
.cc-tile-v { font-size:1.25rem; font-weight:700; color:var(--text); line-height:1.2; font-variant-numeric:tabular-nums; }
|
|
.cc-tile-l { font-size:12px; color:var(--text-2); margin-top:.15rem; }
|
|
.cc-an-sec { margin-top:1rem; }
|
|
.cc-an-sec h4 { font-size:13.5px; font-weight:600; color:var(--text-2); margin:0 0 .5rem; }
|
|
.cc-an-sechead { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
|
|
.cc-wlabel { font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:.3rem; cursor:pointer; }
|
|
.cc-mini-select { background:var(--surface-2); color:var(--text); border:1px solid var(--border);
|
|
border-radius:8px; padding:.35rem .6rem; font-size:13px; cursor:pointer; min-height:32px; }
|
|
.cc-an-empty { color:var(--text-3); font-size:13px; margin:.2rem 0; }
|
|
.cc-bars { display:flex; flex-direction:column; gap:.35rem; }
|
|
.cc-bar-row { display:grid; grid-template-columns:76px 1fr 52px; align-items:center; gap:.5rem; font-size:12.5px; }
|
|
.cc-bar-label { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.cc-bar-track { background:var(--surface-2); border-radius:999px; height:9px; overflow:hidden; }
|
|
.cc-bar-fill { display:block; height:100%; background:var(--primary-gradient); border-radius:999px; }
|
|
.cc-bar-val { color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; }
|
|
a.cc-tl-link { text-decoration:none; }
|
|
a.cc-tl-link:hover .cc-bar-label { text-decoration:underline; color:var(--primary,#6366f1); }
|
|
.cc-top-comment { background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
|
|
padding:.6rem .8rem; font-size:12.5px; color:var(--text-2); }
|
|
.cc-top-text { color:var(--text); margin-top:.3rem; white-space:pre-wrap; word-break:break-word; }
|
|
.cc-months { display:flex; align-items:flex-end; gap:.35rem; height:108px; overflow-x:auto; padding-top:.3rem; }
|
|
.cc-mo { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.2rem; min-width:28px; }
|
|
.cc-mo-val { font-size:10px; color:var(--text-2); font-variant-numeric:tabular-nums; } /* 값 상시 노출(hover 의존 X) */
|
|
.cc-mo-bar { display:block; width:16px; background:var(--primary-gradient); border-radius:4px 4px 0 0; }
|
|
.cc-mo-lb { font-size:11px; color:var(--text-2); white-space:nowrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<h1 style="font-size:1.5rem;font-weight:700;margin-bottom:.3rem;">댓글 카드</h1>
|
|
<p style="color:var(--text-3);margin-bottom:1.2rem;font-size:14px;">
|
|
유튜브 링크의 <b>전체 댓글</b>을 가져와 분석(많이 언급된 타임라인·자주 나온 단어·요약 통계)하고 카드로 만듭니다.
|
|
모자이크는 기본 켜짐, <b>모서리 둥글게</b>로 각진/라운드 전환. 기본은 <b>단어 클릭=가리기</b>(블러), <b>단어 가리기</b> 토글을 끄면 <b>카드 클릭=이미지 복사</b>. <b>저장 버튼=PNG 파일 다운로드</b>(캡컷은 붙여넣기가 안 되니 저장한 파일을 "불러오기" 하세요). <b>저장 폴더</b>를 고르면 저장·<b>전체 저장</b>이 그 폴더로 바로 갑니다(크롬/엣지).
|
|
</p>
|
|
|
|
<div class="cc-toolbar">
|
|
<input type="text" id="ccUrl" class="cc-url" placeholder="유튜브 링크 또는 영상 ID 붙여넣기"
|
|
aria-label="유튜브 링크 또는 영상 ID" />
|
|
<button class="cc-btn" id="ccFetch">가져오기</button>
|
|
</div>
|
|
|
|
<div class="cc-toolbar" id="ccFilters" style="display:none;">
|
|
<input type="text" id="ccSearch" placeholder="댓글 내용 검색" aria-label="댓글 내용 검색" style="min-width:180px;" />
|
|
<input type="text" id="ccExclude" placeholder="제외 단어 (쉼표로 구분)" aria-label="제외 단어 (쉼표로 구분)" style="min-width:180px;" />
|
|
<select id="ccSort" aria-label="정렬 기준">
|
|
<option value="likes">좋아요순</option>
|
|
<option value="replies">답글순</option>
|
|
<option value="latest">최신순</option>
|
|
</select>
|
|
<label style="font-size:13px;color:var(--text-2);">좋아요
|
|
<input type="number" id="ccMinLikes" value="0" min="0" style="width:90px;" aria-label="최소 좋아요 수" /> 이상</label>
|
|
<label style="font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:.3rem;">
|
|
<input type="checkbox" id="ccRepliesOnly" /> 답글 있는 것만</label>
|
|
<button class="cc-btn secondary active" id="ccMosaic" aria-pressed="true">모자이크 해제</button>
|
|
<button class="cc-btn secondary" id="ccRounded" aria-pressed="false">모서리 둥글게</button>
|
|
<button class="cc-btn secondary active" id="ccWordMask" aria-pressed="true">단어 가리기: 켜짐</button>
|
|
<button class="cc-btn secondary" id="ccPickDir" aria-pressed="false"><i data-lucide="folder"></i> <span id="ccPickDirName">저장 폴더</span></button>
|
|
<button class="cc-btn secondary" id="ccSaveAll"><i data-lucide="download"></i> 전체 저장</button>
|
|
<span id="ccCount" style="font-size:12px;color:var(--text-2);"></span>
|
|
</div>
|
|
|
|
<div class="cc-analytics" id="ccAnalytics" style="display:none;"></div>
|
|
|
|
<div class="cc-grid" id="cardGrid"></div>
|
|
<div class="cc-empty" id="ccEmpty"></div>
|
|
</div>
|
|
|
|
<th:block layout:fragment="script">
|
|
<!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
|
|
<script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
|
|
<script th:src="@{/js/comment-cards.js(v=20260710b)}"></script>
|
|
</th:block>
|
|
</body>
|
|
</html>
|