70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Photo Renamer</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="titlebar">
|
|
<h1>📷 Photo Renamer</h1>
|
|
</div>
|
|
|
|
<div id="toolbar">
|
|
<button class="btn btn-primary" id="btn-open">📁 폴더 열기</button>
|
|
<div class="separator"></div>
|
|
<div class="sort-group">
|
|
<button class="sort-btn" id="btn-sort-name">이름순</button>
|
|
<button class="sort-btn" id="btn-sort-date">날짜순</button>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<button class="btn btn-success" id="btn-rename" disabled>✅ 이름 변경 실행</button>
|
|
<div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
|
|
<span class="dir-path" id="dir-path">폴더를 선택하세요</span>
|
|
<button class="btn btn-ghost" id="btn-reveal" disabled>Finder에서 열기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="format-bar">
|
|
<label>파일명 포맷</label>
|
|
<input type="text" id="input-prefix" value="photo" placeholder="접두사" />
|
|
<span class="format-sep">_</span>
|
|
<input type="number" id="input-digits" value="4" min="1" max="6" />
|
|
<span class="format-sep">자리 순번</span>
|
|
<span style="color:var(--muted);font-size:12px;">→</span>
|
|
<span id="preview-name">photo_001.jpg</span>
|
|
<span id="sel-count"></span>
|
|
<span id="file-count">0개 파일</span>
|
|
</div>
|
|
|
|
<div id="grid-container">
|
|
<div id="empty-state">
|
|
<div class="icon">🗂️</div>
|
|
<p>폴더를 열어 이미지를 불러오세요<br>
|
|
<span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
|
|
</div>
|
|
<div id="grid" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div id="statusbar">
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text">준비</span>
|
|
</div>
|
|
|
|
<div id="rubber-band"></div>
|
|
<div id="drag-ghost"></div>
|
|
<div id="thumb-size-hint"></div>
|
|
|
|
<div id="loading">
|
|
<div class="spinner"></div>
|
|
<p id="loading-text">이미지 로딩 중...</p>
|
|
</div>
|
|
|
|
<div id="toast"></div>
|
|
|
|
<script type="module" src="renderer.js"></script>
|
|
</body>
|
|
</html>
|