{% load staticfiles %}
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Smart Simulation</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
    <link rel='stylesheet' href="{% static 'base/css/common.css' %}"/>
    <link rel='stylesheet' href="{% static 'simulation/css/mapping.css' %}"/>
    <link rel='stylesheet' href="{% static 'simulation/css/swiper.min.css' %}"/>
</head>

<body>
    <!-- oncontextmenu="return false" onselectstart="return false">-->
    <div id='globalContainer'>
    	<header>
    		<div class="logininformation"><div class="carousel"><img src="{% static 'simulation/images/carousel.png' %}"></div><div class="saveBtn">저장 및 종료</div><p><span>유정유치원</span>의 리틀스마트</p></div>
    		<div class="back_w">
	    		<div class="search">
	    			<!--<div class="textBox" contenteditable="true"><img src="{% static 'simulation/images/searchIcon.png' %}"></div>-->
	    			<input class="textBox" type="text" name="SimulationSearch"><button><img src="{% static 'simulation/images/searchIcon.png' %}"></button>
	    			<div class="jacketOnOff">
	    				<p>자켓 숨기기</p>
	    				<div class="list-toggle"><label class="label-success"></label></div>
	    			</div>
	    		</div>

	    		<div class="typebutton">
	    			<ul>
	    				<li class="season">
	    					<ul>
	    						<li class="type-winter"><img src="{% static 'simulation/images/winter_b.png' %}"><p>동복</p></li>
	    						<li class="type-summer"><img src="{% static 'simulation/images/summer_c.png' %}"><p>하복</p></li>
	    					</ul>
	    				</li>
	    				<li class="gender" style="display: none;">
	    					<ul>
	    						<li class="type-boy"><img src="{% static 'simulation/images/boy_b.png' %}"><p>남아</p></li>
	    						<li class="type-girl"><img src="{% static 'simulation/images/girl_c.png' %}"><p>여아</p></li>
	    						<!--<li><img src="images/both_c.png"><p>혼용</p></li>-->
	    					</ul>
	    				</li>
	    				<li class="style borderN">
	    					<ul>
	    						<li class="type-formal"><img src="{% static 'simulation/images/school_c.png' %}"><p>정복</p></li>
	    						<li class="type-training"><img src="{% static 'simulation/images/gym_b.png' %}"><p>체육복</p></li>
	    					</ul>
	    				</li>

	    			</ul>
	    		</div>
	    		<div class="layout">
	    			<ul>
	    				<li><img src="{% static 'simulation/images/lay_m_off.png' %}"></li>
	    				<li class="borderN"><img src="{% static 'simulation/images/lay_r_on.png' %}"></li>
	    			</ul>
	    		</div>
	    		<div class="coodiStart">코디추가</div>
    		</div>
    	</header>
    	<article>
    		<div class="container_Back"></div>
    		<div id="container" class="leftMenuContainer">
	    		<ul class="lefttabs">
	    			<li class="active" rel="tab1">인기제품</li>
	    			<li rel="tab2">카탈로그</li>
	    			<li rel="tab3">코디제품</li>
	    		</ul>
	    		<div class="left">
		    		<div class="tab_container">
			    		<div id="tab1" class="tab_content best">
			    			<p>BEST ITEM</p>
							<div class="bestWrap">
								<ul></ul>
							</div>	
			    		</div>
			    		<div id="tab2" class="tab_content set">
							<div class="setWrap">
								<ul></ul>
							</div>
			    		</div>
			    		<div id="tab3" class="tab_content coodi">
			    			<div class="coodiWrap">
				    			<ul>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    				<li></li>
				    			</ul>
			    			</div>
			    			
			    		</div>
			    	</div>
			    </div>
	    	</div>
			<div id="container">
	    		<ul class="bottabs">
	    			<li class="active" rel="tab5">저장목록</li>
	    			<li rel="tab6">세트보기</li>
	    		</ul>
	    	 	<div class="bottom">
				    <div class="tab_container">
				    	<div id="tab5" class="tab_content savelist">
				    		<ul>
				    			<li>
				    				<img src="{% static 'simulation/images/sample.jpg' %}" />
				    				<div class="savelistBtn"><ul><li><img src="{% static 'simulation/images/searchIcon_w.png' %}"></li><li><img src="{% static 'simulation/images/closeIcon_w.png' %}"></li></ul></div>
				    			</li>
				    			<li><div class="savelistBtn"><ul><li><img src="{% static 'simulation/images/searchIcon_w.png' %}"></li><li><img src="{% static 'simulation/images/closeIcon_w.png' %}"></li></ul></div></li>
				    			<li><div class="savelistBtn"><ul><li><img src="{% static 'simulation/images/searchIcon_w.png' %}"></li><li><img src="{% static 'simulation/images/closeIcon_w.png' %}"></li></ul></div></li>

				    		</ul>
				    	</div>
				    	<div id="tab6" class="tab_content setlist">
				    		<ul class="setlist_left">
				    			<li class="win_suit">
				    				<img src="{% static 'simulation/images/sample.jpg' %}" />
				    				<div class="savelistBtn"><ul><li><img src="{% static 'simulation/images/searchIcon_w.png' %}"></li><li><img src="{% static 'simulation/images/closeIcon_w.png' %}"></li></ul></div>
				    			</li>
				    			<li class="win_trainning"></li>
				    		</ul>
				    		<ul class="setlist_right">
				    			<li class="sum_suit"></li>
				    			<li class="sum_trainning"></li>
				    		</ul>
				    		<div class="nextstepbtn">다음단계</div>
				    	</div>
				    </div>
			    </div>
			</div>
			<div class="ModelWrap">
				<div class="ModelWrap_Left"></div>
				<div class="ModelWrap_Right"></div>
				<div class="model-container" style="position: relative; margin-top: 63.5px; margin-left: 55px; z-index: 1;display: none;">
					<div style="width: 288px!important; height: 416px!important; margin: 0px auto" class="model-active">
						<img style="width: 100%; position: relative; align-items: center;" src="{% static 'simulation/images/mainmodel_sample.png' %}">
					</div>
				</div>
				<div class="swiper-container">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide">
			            	<div>
			            		<div class="modelbtn">
				            		<!--<div class="model_star"><img src="{% static 'simulation/images/star_c.png' %}"></div>-->
				            		<div class="model_delete onlyone"><img src="{% static 'simulation/images/closeIcon.png' %}"></div>
			            		</div>
			            		<img src="{% static 'simulation/images/BBF-1.png' %}">
			            		<img src="{% static 'simulation/images/GBF-1.png' %}">
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div>
			            		<div class="modelbtn">
			            			<!-- 별만 있을때는 onlyone 클래스를 추가해주셔야 가운데로 갑니다! -->
				            		<div class="model_star onlyone"><img src="{% static 'simulation/images/star_c.png' %}"></div>
			            		</div>
			            		<img src="{% static 'simulation/images/BBF-1.png' %}">
			            		<img src="{% static 'simulation/images/GBF-1.png' %}">
			            	</div>
			            </div>
			            
			            
			        </div>
			        <!-- Add Pagination
			        <div class="swiper-pagination"></div>-->
			    </div>
				<div class="BtnWrap">
					<div>세트등록</div>
					<div class="ModelInformationOpen">상세보기</div>
				</div>
				<div class="rotateBtn"><img src="{% static 'simulation/images/rotate.png' %}"></div>
				<div class="BIlogo"><img src="{% static 'simulation/images/littlesmart.png' %}"></div>
				<div class="arrow_left mapping"><a href="{% url 'order_contract:ebook_catalog_list' order_id %}"><img src="{% static 'base/image/arrow_left.png' %}"/></a></div>
			</div>
    	</article>
    	<footer>COPYRIGHT © 2016 YOUNGWOO C&I ALL RIGHTS RESERVED.</footer>
		<div class="ModelInformation">
	    	<div class="Info_closebtn"><img src="{% static 'simulation/images/closeIcon.png' %}"></div>
	    	<div class="Info_Model">
	    		<img src="{% static 'simulation/images/BBF-1.png' %}">
			    <img src="{% static 'simulation/images/GBF-1.png' %}">
	    	</div>
	    	<div class="Info_content">
	    		<div class="Info_content_boy">
	    			<div class="Info_boy_icon"><img src="{% static 'simulation/images/boy_c.png' %}"><p>남아</p></div>
	    			<table>
		    			<tr>
		    				<td>CS009 LY1<br>폴리에스터/레이온</td>
		    				<td>39,600</td>
		    			</tr>
		    			<tr>
		    				<td>CS009 LY1<br>폴리에스터/레이온</td>
		    				<td>39,600</td>
		    			</tr>
		    			<tr>
		    				<td colspan="2">와펜/엠블럼 3,000<br>타이 7,000<br>스마트 패치 5,000/별도구매가</td>
		    			</tr>
	    			</table>
	    			<ul class="accIconWrap">
	    				<li><img src="{% static 'simulation/images/accIcon_1.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_2.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_3.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_4.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_5.png' %}"></li>
	    			</ul>
	    		</div>
	    		<div class="Info_content_girl">
	    			<div class="Info_girl_icon"><img src="{% static 'simulation/images/girl_c.png' %}"><p>여아</p></div>
	    			<table>
		    			<tr>
		    				<td>CS009 LY1<br>폴리에스터/레이온</td>
		    				<td>39,600</td>
		    			</tr>
		    			<tr>
		    				<td>CS009 LY1<br>폴리에스터/레이온</td>
		    				<td>39,600</td>
		    			</tr>
		    			<tr>
		    				<td colspan="2">와펜/엠블럼 3,000<br>타이 7,000<br>스마트 패치 5,000/별도구매가</td>
		    			</tr>
	    			</table>
	    			<ul class="accIconWrap">
	    				<li><img src="{% static 'simulation/images/accIcon_1.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_2.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_3.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_4.png' %}"></li>
	    				<li><img src="{% static 'simulation/images/accIcon_5.png' %}"></li>
	    			</ul>
	    		</div>
	    	</div>
	    </div>
	    <div class="ModelCoodi">
	    	<div class="coodi_closebtn"><img src="{% static 'simulation/images/closeIcon.png' %}"></div>
	    	<div class="coodi_btnWrap">
	    		<ul class="coodi_savebtn">
	    			<li>목록에 저장</li>
	    			<li class="ListModalBtn2">목록에 저장</li>
	    			<li class="ListModalBtn1">목록에 저장</li>
	    		</ul>
	    	</div>
	    	<div class="leftHeaderWrap">
		    	<div class="typebutton">
		    		<ul class="gender">
	    				<li class="type-boy" style="border-right: 1px solid #e7e4e3;"><img src="{% static 'simulation/images/boy_b.png' %}"><p>남아</p></li>
	    				<li class="type-girl"><img src="{% static 'simulation/images/girl_c.png' %}"><p>여아</p></li>
	    			</ul>
	    		</div>
	    		<div class="jacketOnOff">
	    			<p>자켓 숨기기</p>
	    			<div class="list-toggle"><label class="label-success"></label></div>
	    		</div>
    		</div>
	    	<div class="coodi_left">
	    		<div class="coodi_title">제품</div>
	    		<div class="coodi_content">
	    			<div class="coodi">
				    		<div class="coodiTabContainer">
				    			<div class="scrollBlind">
				    				<ul class="coodiTabs">
				    					<li class="coodiTabActive" rel="coodiTab1"><img src="{% static 'simulation/images/shirts_on.png' %}" width="35" /><p>상의</p></li>
				    					<li rel="coodiTab2"><img src="{% static 'simulation/images/vest_off.png' %}" /><p>조끼</p></li>
				    					<li rel="coodiTab3"><img src="{% static 'simulation/images/pants_off.png' %}" /><p>바지</p></li>
				    					<li rel="coodiTab4"><img src="{% static 'simulation/images/skirt_off.png' %}"/><p>치마</p></li>
				    					<li rel="coodiTab5"><img src="{% static 'simulation/images/dress_off.png' %}" /><p>원피스</p></li>
				    					<li rel="coodiTab6"><img src="{% static 'simulation/images/tie_off.png' %}" /><p>악세사리</p></li>
				    					<li rel="coodiTab4"><img src="{% static 'simulation/images/skirt_off.png' %}"/><p>치마</p></li>
				    					<li rel="coodiTab5"><img src="{% static 'simulation/images/dress_off.png' %}" /><p>원피스</p></li>
				    					<li rel="coodiTab6"><img src="{% static 'simulation/images/tie_off.png' %}" /><p>악세사리</p></li>
				    				</ul>
			    				</div>
			    				<div class="coodiTabContents">
				    				<div id="coodiTab1" class="coodiTabContent">
						    			<div class="coodiWrap">
							    			<ul>
							    				<li><img class="product_del" src="{% static 'simulation/images/closeIcon.png' %}"></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    			</ul>
						    			</div>
				    				</div>
				    				<div id="coodiTab2" class="coodiTabContent">
						    			<div class="coodiWrap">
							    			<ul>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    			</ul>
						    			</div>
				    				</div>
				    				<div id="coodiTab3" class="coodiTabContent">
						    			<div class="coodiWrap">
							    			<ul>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    				<li></li>
							    			</ul>
						    			</div>
				    				</div>
				    				<div id="coodiTab4" class="coodiTabContent">
						    			<div class="coodiWrap">
						    			</div>
						    		</div>
						    		<div id="coodiTab5" class="coodiTabContent">
						    			<div class="coodiWrap">
						    			</div>
						    		</div>
						    		<div id="coodiTab6" class="coodiTabContent">
						    			<div class="coodiWrap">
						    			</div>
						    		</div>
						    	</div>
			    			</div>
				    	</div>
	    		</div>
	    	</div>

	    	<div class="coodi_right">
	    		<div class="coodi_title">원단</div>
	    		<div class="coodi_content">
	    			<div class="fabric">
				    		<div class="fabricTabContainer">
				    			<div class="scrollBlind">
				    				<ul class="fabricTabs">
				    					<li class="fabricTabActive" rel="fabricTab1"><img src="{% static 'simulation/images/shirts_on.png' %}"/><p>상의</p></li>
				    					<li rel="fabricTab2"><img src="{% static 'simulation/images/vest_off.png' %}" /><p>조끼</p></li>
				    					<li rel="fabricTab3"><img src="{% static 'simulation/images/pants_off.png' %}" /><p>바지</p></li>
				    					<li rel="fabricTab4"><img src="{% static 'simulation/images/skirt_off.png' %}"/><p>치마</p></li>
				    					<li rel="fabricTab5"><img src="{% static 'simulation/images/dress_off.png' %}" /><p>원피스</p></li>
				    					<li rel="fabricTab6"><img src="{% static 'simulation/images/tie_off.png' %}" /><p>악세사리</p></li>
				    					<li rel="fabricTab4"><img src="{% static 'simulation/images/skirt_off.png' %}"/><p>치마</p></li>
				    					<li rel="fabricTab5"><img src="{% static 'simulation/images/dress_off.png' %}" /><p>원피스</p></li>
				    					<li rel="fabricTab6"><img src="{% static 'simulation/images/tie_off.png' %}" /><p>악세사리</p></li>
				    				</ul>
			    				</div>
			    				<div id="fabricTab1" class="fabricTabContent">
					    			<div class="fabricWrap">
						    			<ul>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    			</ul>
					    			</div>
			    				</div>
			    				<div id="fabricTab2" class="fabricTabContent">
					    			<div class="fabricWrap">
						    			<ul>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    			</ul>
					    			</div>
			    				</div>
			    				<div id="fabricTab3" class="fabricTabContent">
					    			<div class="fabricWrap">
						    			<ul>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    				<li></li>
						    			</ul>
					    			</div>
			    				</div>
			    				<div id="fabricTab4" class="fabricTabContent">
					    			<div class="fabricWrap">
					    			</div>
					    		</div>
					    		<div id="fabricTab5" class="fabricTabContent">
					    			<div class="fabricWrap">
					    			</div>
					    		</div>
					    		<div id="fabricTab6" class="fabricTabContent">
					    			<div class="fabricWrap">
					    			</div>
					    		</div>
			    			</div>
				    	</div>
	    		</div>
	    	</div>
	    	<div class="coodi_Model">
	    		<div class="coodi_ModelImg">
	    			<div class="coordi-model-content coordi-model-boy">
	    				<img class="model-img-boy" src="{% static 'simulation/images/BBF.png' %}">
	    			</div>
	    			<div class="coordi-model-content coordi-model-girl">
	    				<img class="model-img-girl" src="{% static 'simulation/images/GBF.png' %}">
	    			</div>
	    		</div>
	    		<div class="rotateBtn"><img src="{% static 'simulation/images/rotate.png' %}"></div>
	    	</div>
	    </div>
    </div>
    <div class="ListModalBack"></div>
    <div class="ListModalWrap ver1">
    	<div class="codeInput"><label>Code : </label><input type="text" name="code"></div>
    	<div class="list_closebtn"><img src="{% static 'simulation/images/closeIcon.png' %}"></div>
    	<ul class="SaveList">
    		<li class="onlyone">저장1</li>
    		<!--<li>저장2</li>
    		<li>저장3</li>-->
    	</ul>
    </div>
    <div class="ListModalWrap ver2">
    	<div class="codeInput"><label>Code : </label><input type="text" name="code"></div>
    	<div class="list_closebtn"><img src="{% static 'simulation/images/closeIcon.png' %}"></div>
    	<button class="list_savebtn"> 저장 </button>
    </div>


	<script src="{% static 'base/js/jquery-1.12.3.min.js' %}"></script>
	<script src="{% static 'simulation/js/mapping.js' %}"></script>
	<script src="{% static 'simulation/js/smart.mapping.js' %}"></script>
	<script src="{% static 'simulation/js/swiper.min.js' %}"></script>
	<script src="{% static 'base/js/jquery.slimscroll.min.js' %}"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        grabCursor: true,
        loop: true,
        onSlideChangeEnd: function(swiper) {
        	var slideImgs = $(".swiper-slide").find('.model-img');
        	$.each(slideImgs, function() {
	            $(this).addClass('front').attr('src', $(this).data('front'));
	        });
        }
    });


    </script>
</body>
</html>