146 lines
5.6 KiB
HTML
146 lines
5.6 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>
|
|
|
|
<header>
|
|
<h1>Photo Renamer</h1>
|
|
</header>
|
|
|
|
<div class="app-layout">
|
|
|
|
<aside>
|
|
<nav class="sidebar-nav">
|
|
<button class="btn btn-warning" id="btn-open">폴더 열기 (O)</button>
|
|
<button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (S)</button>
|
|
</nav>
|
|
<section class="file-explorer">
|
|
<!-- 추후 구현 -->
|
|
</section>
|
|
</aside>
|
|
|
|
<main>
|
|
<nav class="content-nav">
|
|
<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-info" id="btn-preview-toggle">미리보기</button>
|
|
<div class="separator"></div>
|
|
<button class="btn btn-ghost" id="btn-undo" disabled>↩ 되돌리기</button>
|
|
<button class="btn btn-ghost" id="btn-redo" disabled>↪ 다시하기</button>
|
|
</nav>
|
|
|
|
<form id="format-bar">
|
|
<label for="input-prefix">파일명 포맷</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>
|
|
</form>
|
|
|
|
<section 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>
|
|
</section>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text">준비</span>
|
|
<span class="dir-path" id="dir-path" style="margin-left:auto;">폴더를 선택하세요</span>
|
|
</footer>
|
|
|
|
<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>
|
|
|
|
<div id="move-modal" class="modal-overlay" style="display:none;">
|
|
<div class="modal-box modal-box-with-title">
|
|
<div class="modal-titlebar">이미지 이동</div>
|
|
<p class="modal-msg">대상 폴더에 이미 같은 이름의 파일이 존재합니다.<br>새로운 이름으로 파일들을 이동하시겠습니까?</p>
|
|
<div class="modal-fields">
|
|
<label>파일명 포맷<input type="text" id="move-prefix" value="photo" placeholder="접두사" /></label>
|
|
<label>자리 순번 숫자<input type="number" id="move-digits" value="4" min="1" max="6" /></label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="move-cancel" class="btn btn-ghost modal-close">취소</button>
|
|
<button id="move-confirm" class="btn btn-success modal-action">실행</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rename-confirm-modal" class="modal-overlay" style="display:none;">
|
|
<div class="modal-box modal-box-with-title">
|
|
<div class="modal-titlebar rename-title-selected" hidden>선택된 이미지 저장</div>
|
|
<div class="modal-titlebar rename-title-all">전체 이미지 저장</div>
|
|
<p class="modal-msg" id="rename-confirm-msg"></p>
|
|
<ul id="rename-confirm-list" class="modal-conflict-list modal-preview-list"></ul>
|
|
<p class="modal-warning" id="rename-confirm-selection-warning" style="display:none;">선택된 파일들만 저장합니다</p>
|
|
<div class="modal-actions">
|
|
<button id="rename-confirm-cancel" class="btn btn-ghost modal-close">취소</button>
|
|
<button id="rename-confirm-ok" class="btn btn-success modal-action">실행</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rename-conflict-modal" class="modal-overlay" style="display:none;">
|
|
<div class="modal-box modal-box-with-title">
|
|
<div class="modal-titlebar modal-titlebar-warning">이름 충돌</div>
|
|
<p class="modal-msg">변경할 이름의 파일이 이미 존재합니다.</p>
|
|
<ul id="rename-conflict-list" class="modal-conflict-list"></ul>
|
|
<div class="modal-actions">
|
|
<button id="rename-conflict-close" class="btn btn-ghost modal-close">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="delete-modal" class="modal-overlay" style="display:none;">
|
|
<div class="modal-box modal-box-with-title">
|
|
<div class="modal-titlebar modal-titlebar-danger">이미지 삭제</div>
|
|
<p class="modal-msg">아래 파일을 삭제합니다.</p>
|
|
<ul id="delete-file-list" class="modal-conflict-list"></ul>
|
|
<div class="modal-actions">
|
|
<button id="delete-cancel" class="btn btn-ghost modal-close">취소</button>
|
|
<button id="delete-confirm" class="btn btn-success modal-action">실행</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="move-error-modal" class="modal-overlay" style="display:none;">
|
|
<div class="modal-box modal-box-with-title">
|
|
<div class="modal-titlebar modal-titlebar-warning">이동 오류</div>
|
|
<p class="modal-msg">새로운 이름의 파일도 존재합니다.</p>
|
|
<div class="modal-actions">
|
|
<button id="move-error-close" class="btn btn-ghost modal-close">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="renderer.js"></script>
|
|
</body>
|
|
</html>
|