hehihoho3@gmail.com
7de8f954ad
복사 버튼이 캡처 이미지에 함께 찍히던 문제 해결. 버튼을 없애고 카드 자체 클릭으로 복사하도록 변경, 완료 피드백은 카드 밖 토스트로 표시(캡처에 미포함). JS 캐시버스터 갱신. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
78 lines
4.6 KiB
HTML
78 lines
4.6 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:14px;
|
|
}
|
|
.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; }
|
|
.cc-btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
|
|
/* 메이슨리(다단): 카드가 내용 높이에 딱 맞게 쌓여 짧은 글 아래 흰 여백이 안 생김 */
|
|
.cc-grid { column-width:320px; column-gap:1rem; }
|
|
/* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */
|
|
.comment-card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
|
|
padding:1rem; position:relative; break-inside:avoid; -webkit-column-break-inside:avoid;
|
|
margin-bottom:1rem; }
|
|
.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-3); 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.45; }
|
|
.cc-stats { font-size:12px; color:var(--text-3); margin-top:.5rem; display:flex; gap:1rem; }
|
|
.comment-card { cursor:pointer; }
|
|
/* 복사 완료 토스트 — 카드 밖(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); }
|
|
.cc-empty { color:var(--text-3); padding:2rem 0; }
|
|
</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>됩니다(캡컷 등에 Ctrl+V).
|
|
</p>
|
|
|
|
<div class="cc-toolbar">
|
|
<input type="text" id="ccUrl" class="cc-url" placeholder="유튜브 링크 또는 영상 ID 붙여넣기" />
|
|
<button class="cc-btn" id="ccFetch">가져오기</button>
|
|
</div>
|
|
|
|
<div class="cc-toolbar" id="ccFilters" style="display:none;">
|
|
<select id="ccSort">
|
|
<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;" /> 이상</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" id="ccMosaic">전체 모자이크</button>
|
|
<span id="ccCount" style="font-size:12px;color:var(--text-3);"></span>
|
|
</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=20260629c)}"></script>
|
|
</th:block>
|
|
</body>
|
|
</html>
|