213 lines
13 KiB
HTML
213 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>포토 에디터</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/publish/css/reset.css">
|
|
<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
|
|
<link rel="stylesheet" href="/publish/css/common.css">
|
|
<link rel="stylesheet" href="/publish/css/button.css">
|
|
<link rel="stylesheet" href="/publish/css/content.css">
|
|
<link rel="stylesheet" href="/publish/css/popup.css">
|
|
<link rel="stylesheet" href="/publish/css/font.css">
|
|
|
|
<script src="/publish/js/jquery-3.5.0.js"></script>
|
|
<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
|
|
<script src="/publish/js/common.js"></script>
|
|
<script src="/publish/js/content.js"></script>
|
|
<script src="/publish/js/popup.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="ptEditer_wrap">
|
|
<!-- photo editer header -->
|
|
<div class="ptEditer_header">
|
|
<!-- tab button -->
|
|
<ul class="tabType3">
|
|
<li class="tab"><a href="#"><i class="myPhoto"></i><span>내 사진<br>불러오기</span></a></li>
|
|
<li class="tab active"><a href="#" onclick="TabType(this,'1');"><i class="recomTemplate"></i><span>추천 템플릿</span></a></li>
|
|
<li class="tab"><a href="#" onclick="TabType(this,'2');"><i class="sticker"></i><span>스티커</span></a></li>
|
|
<li class="tab"><a href="#" onclick="TabType(this,'3');"><i class="editPhoto"></i><span>편집도구</span></a></li>
|
|
</ul><!--// tab button -->
|
|
<!-- tab content2 추천 템플릿 -->
|
|
<div class="header_cont recomTem_cont current hascont">
|
|
<h3>추천 템플릿</h3>
|
|
<p>템플릿 선택 시, 기존 포토는<br>삭제되고 선택한 이미지로<br>변경됩니다.</p>
|
|
<div class="search_box">
|
|
<label for="" class="label">추천 템플릿 검색 입력</label>
|
|
<input type="text" placeholder="템플릿 검색" onfocus="this.placeholder=''" onblur="this.placeholder='템플릿 검색'">
|
|
<label for="" class="label">추천 템플릿 검색</label>
|
|
<button><img src="/publish/images/popup/search.png" alt="검색"></button>
|
|
<label for="" class="label">추천 템플릿 선택</label>
|
|
<select>
|
|
<option>템플릿 카테고리</option>
|
|
<option>템플릿 카테고리</option>
|
|
<option>템플릿 카테고리</option>
|
|
</select>
|
|
</div>
|
|
<div class="contWrap_scroll">
|
|
<ul class="contWrap">
|
|
<li><a href="#"><img src="/publish/images/popup/tem1.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem2.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem3.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem4.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem5.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem6.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem7.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem8.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem1.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem2.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem3.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem4.jpg"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/tem5.jpg"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div><!--// tab content2 추천 템플릿 -->
|
|
<!-- tab content3 스티커 -->
|
|
<div class="header_cont sticker_cont hascont">
|
|
<h3>스티커</h3>
|
|
<p>이미지에 스티커를 활용하여<br>꾸밀 수 있습니다.</p>
|
|
<div class="contWrap_scroll">
|
|
<ul class="contWrap">
|
|
<li><a href="#"><img src="/publish/images/popup/sticker1.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker2.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker3.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker4.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker1.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker2.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker3.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker4.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker1.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker2.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker3.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker4.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker1.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker2.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker3.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker4.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker1.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker2.png"></a></li>
|
|
<li><a href="#"><img src="/publish/images/popup/sticker3.png"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div><!--// tab content3 스티커 -->
|
|
<!-- tab content4 편집도구 -->
|
|
<div class="header_cont photoEdit_cont hascont">
|
|
<div>
|
|
<h3>텍스트</h3>
|
|
<p>텍스트 입력하기를 클릭하시면<br>텍스트창이 생성됩니다.</p>
|
|
<div class="search_box2">
|
|
<button type="button" class="edit_btn"><i class="put_text"></i>텍스트 입력하기</button>
|
|
<label for="" class="label">폰트 타입 선택</label>
|
|
<select>
|
|
<option>나눔바른고딕</option>
|
|
<option>나눔스퀘어</option>
|
|
<option>노토산스</option>
|
|
</select>
|
|
<label for="input-font-size-range" class="label">폰트 크기 선택</label>
|
|
<input type="text" id="input-font-size-range" list="font_size_list" class="font_size">
|
|
<datalist id="font_size_list">
|
|
<option value="10px"></option>
|
|
<option value="11px"></option>
|
|
<option value="12px"></option>
|
|
<option value="13px"></option>
|
|
<option value="14px"></option>
|
|
<option value="15px"></option>
|
|
<option value="16px"></option>
|
|
<option value="18px"></option>
|
|
<option value="20px"></option>
|
|
<option value="24px"></option>
|
|
<option value="32px"></option>
|
|
<option value="48px"></option>
|
|
<option value="72px"></option>
|
|
<option value="112px"></option>
|
|
<option value="127px"></option>
|
|
<option value="254px"></option>
|
|
<option value="500px"></option>
|
|
</datalist>
|
|
</div>
|
|
<ul class="editContWrap text">
|
|
<li><a href="#"><i></i><span>굵게</span></a></li>
|
|
<li><a href="#"><i></i><span>기울임</span></a></li>
|
|
<li><a href="#"><i></i><span>밑줄</span></a></li>
|
|
</ul>
|
|
<div class="color_palette">
|
|
<p>텍스트 색상</p>
|
|
<ul></ul>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix">
|
|
<h3>자르기</h3>
|
|
<button type="button" class="edit_btn"><i class="cut_img"></i>이미지 자르기</button>
|
|
<div class="set_btn">
|
|
<button type="button" class="set_app"><i></i>적용</button>
|
|
<button type="button" class="set_cancel"><i></i>취소</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>회전 및 밝기</h3>
|
|
<ul class="editContWrap2">
|
|
<li><a href="#"><i></i><span>왼쪽<br>회전</span></a></li>
|
|
<li><a href="#"><i></i><span>오른쪽<br>회전</span></a></li>
|
|
<li><a href="#"><i></i><span>좌우<br>반전</span></a></li>
|
|
<li><a href="#"><i></i><span>상하<br>반전</span></a></li>
|
|
<li><a href="#"><i></i><span>어둡게</span></a></li>
|
|
<li><a href="#"><i></i><span>밝게</span></a></li>
|
|
<li><a href="#"><i></i><span>흑백</span></a></li>
|
|
<li><a href="#"><i></i><span>음영</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div><!--// tab content4 편집도구 -->
|
|
</div><!--// photo editer header -->
|
|
<!-- photo editer body -->
|
|
<div class="ptEditer_body clearfix">
|
|
<div class="image_preview">
|
|
<div class="preview drag_img">
|
|
<div class="preview_img_wrap on">
|
|
<div class="img_number"><span></span></div>
|
|
<img src="/publish/images/popup/preview_img1.png" alt="">
|
|
<button type="button" class="img_close" title="이미지 삭제 버튼"><i></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="preview drag_img">
|
|
<div class="preview_img_wrap">
|
|
<div class="img_number"><span></span></div>
|
|
<img src="/publish/images/popup/preview_img2.png" alt="">
|
|
<button type="button" class="img_close" title="이미지 삭제 버튼"><i></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="preview drag_img">
|
|
<div class="preview_img_wrap no_img">
|
|
<div class="img_number"><span></span></div>
|
|
<button type="button" class="img_add" title="이미지 추가 버튼"><i></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="req_text">+ 버튼클릭 또는,<br>파일 끌어오기로<br>첨부 가능합니다.</p>
|
|
<div class="edit_area">
|
|
<div class="edit_area_wrap">
|
|
<!-- <img src="/publish/images/popup/photo_editer_bg.jpg" alt="이미지 없음"> -->
|
|
<img src="/publish/images/popup/preview_edit.png" alt="사진편집 이미지">
|
|
<span>이미지 사이즈: 640 x 640</span>
|
|
</div>
|
|
</div>
|
|
</div><!--// photo editer body -->
|
|
<!-- photo editer footer -->
|
|
<div class="ptEditer_footer clearfix">
|
|
<div class="footer_left">
|
|
<button type="button"><i class="footer_prev"></i>이전</button>
|
|
<button type="button"><i class="footer_next"></i>다음</button>
|
|
<button type="button"><i class="footer_replay"></i>초기화</button>
|
|
</div>
|
|
<div class="footer_right">
|
|
<button type="button">제작완료</button>
|
|
<button type="button"><i class="footer_close"></i>닫기</button>
|
|
</div>
|
|
</div><!--// photo editer footer -->
|
|
</div>
|
|
</body></html>
|