Spaces:

ssboost
/

swq2f

Running

App Files Files Community

swq2f / index.html

ssboost

Update index.html

12bf249 verified 11 days ago

raw

history blame contribute delete

6.19 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이미지 겹치기 편집기 (여러 이미지 지원)</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<h1>이미지 겹치기 편집기</h1>
	<p>배경 이미지 위에 여러 개의 배경 제거된 이미지를 배치하고 각각 조절한 후, 조절된 이미지들만 PNG로 추출합니다.</p>

	<div class="upload-container">
	<div class="upload-box">
	<span class="upload-label">1. 원본 이미지 선택</span>
	<input type="file" id="background-input" class="file-input" accept="image/*">
	<label for="background-input" class="upload-button">원본 이미지 업로드</label>
	</div>
	<div class="upload-box">
	<span class="upload-label">2. 배경 제거된 이미지 선택 (추출될 PNG, 여러 개 가능)</span>
	<input type="file" id="overlay-input" class="file-input" accept="image/*">
	<label for="overlay-input" class="upload-button">겹칠 이미지 업로드</label>
	</div>
	</div>

	<div class="control-panel">
	<div class="control-group">
	<h3>위치 및 크기 (선택된 이미지)</h3>
	<div class="slider-container">
	<label for="scale-slider">크기:</label>
	<input type="range" id="scale-slider" min="10" max="500" value="100" disabled>
	<span id="scale-value" class="value-display">100%</span>
	</div>
	<div class="slider-container">
	<label for="rotation-slider">회전:</label>
	<input type="range" id="rotation-slider" min="0" max="360" value="0" disabled>
	<span id="rotation-value" class="value-display">0°</span>
	</div>
	</div>

	<div class="control-group">
	<h3>예시 이미지 선택</h3>
	<div id="example-images-container" style="display: flex; justify-content: space-around; margin-top: 15px;">
	<img src="1.png" alt="Example 1" class="example-img" data-filename="1.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
	<img src="2.png" alt="Example 2" class="example-img" data-filename="2.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
	<img src="3.png" alt="Example 3" class="example-img" data-filename="3.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
	<img src="4.png" alt="Example 4" class="example-img" data-filename="4.png" style="width: 160px; height: 160px; cursor: pointer; border: 1px solid #ccc;">
	</div>
	</div>
	<div class="control-group filter-panel">
	</div>

	<div class="control-group" id="layers-panel">
	<h3>레이어 목록</h3>
	<div class="layer-option">
	<button id="delete-layer-btn" class="danger-btn" disabled>선택 레이어 삭제</button>
	</div>
	<div id="layers-list" class="layers-list">
	</div>
	</div>
	</div>

	<div class="canvas-container">
	<canvas id="canvas" width="800" height="600"></canvas>
	</div>

	<!-- 필터 설정 섹션을 이미지 아래로 이동 -->
	<div class="filter-panel">
	<h3>필터 설정 (선택 레이어에 적용)</h3>

	<div class="filter-sliders">
	<div class="filter-slider-container">
	<label for="temperature-slider">색온도:</label>
	<input type="range" id="temperature-slider" min="-100" max="100" value="0" step="5" class="large-slider">
	<span id="temperature-value" class="value-display">0</span>
	</div>

	<div class="filter-slider-container">
	<label for="brightness-slider">밝기:</label>
	<input type="range" id="brightness-slider" min="0" max="200" value="100" step="5" class="large-slider">
	<span id="brightness-value" class="value-display">100%</span>
	</div>

	<div class="filter-slider-container">
	<label for="contrast-slider">대비:</label>
	<input type="range" id="contrast-slider" min="50" max="150" value="100" step="5" class="large-slider">
	<span id="contrast-value" class="value-display">100%</span>
	</div>

	<div class="filter-slider-container">
	<label for="saturation-slider">채도:</label>
	<input type="range" id="saturation-slider" min="0" max="200" value="100" step="5" class="large-slider">
	<span id="saturation-value" class="value-display">100%</span>
	</div>
	</div>

	<div class="filter-buttons">
	<button id="reset-filter-btn" class="danger-btn">필터 초기화</button>
	</div>
	</div>

	<div class="button-container">
	<button id="generate-btn" class="primary-btn" disabled>이미지 합치기</button>
	<button id="reset-all-btn" class="danger-btn">처음부터</button>
	<button id="download-btn" class="info-btn" disabled>다운로드</button>
	</div>

	<div class="preview-container" id="preview-container">
	<h3>합성된 이미지 미리보기</h3>
	<img id="preview-img" alt="합성 이미지 미리보기">
	</div>
	</div>

	<!-- 스크립트 파일 로드 -->
	<script src="filter.js"></script>
	<script src="script.js"></script>
	</body>
	</html>