Add: maestro main menu tab

src/web/module/maestro_section_main.html

@@ -1,8 +1,78 @@
-<div class="container">
-	<div class="maestro_manager_user">
+<style>
 
-		<h1>학생 관리</h1>
+.login {
+	background-color: #ff0000;
+	padding: 20px;
+}
 
+.register {
+	background-color: #0000ff;
+	padding: 20px;
+}
+
+
+.hide {
+	display: none;
+}
+
+</style>
+
+
+
+<script>
+
+function tabClicked(tabNo) {
+	for(let i = 0; i < 4; i++) {
+		$("#page-tabs li").filter(":eq(" + i + ")").removeClass("activated");
+	}
+
+	let tabIndex = tabNo - 1;
+	$("#page-tabs li").filter(":eq(" + tabIndex + ")").addClass("activated");
+
+	switch(tabNo) {
+		case 1:
+		$(".player_list").removeClass("hide");
+		$(".search").addClass("hide");
+		$(".mouse_app_list").addClass("hide");
+		$(".typing_app_list").addClass("hide");
+		break;
+		case 2:
+		$(".player_list").addClass("hide");
+		$(".search").removeClass("hide");
+		$(".mouse_app_list").addClass("hide");
+		$(".typing_app_list").addClass("hide");
+		break;
+		case 3:
+		$(".player_list").addClass("hide");
+		$(".search").addClass("hide");
+		$(".mouse_app_list").removeClass("hide");
+		$(".typing_app_list").addClass("hide");
+		break;
+		case 4:
+		$(".player_list").addClass("hide");
+		$(".search").addClass("hide");
+		$(".mouse_app_list").addClass("hide");
+		$(".typing_app_list").removeClass("hide");
+		break;
+	}
+}
+
+</script>
+
+
+
+<div class="container">
+	<div id="page-tabs">
+		<ul>
+			<li class="widthQuarter activated" onClick="tabClicked(1)">학생 목록</li>
+			<li class="widthQuarter" onClick="tabClicked(2)">학생 검색</li>
+			<li class="widthQuarter" onClick="tabClicked(3)">마우스 앱 활성화</li>
+			<li class="widthQuarter" onClick="tabClicked(4)">키보드 앱 활성화</li>
+		</ul>
+	</div>
+
+
+	<div class="player_list">
 		<h2>추가</h2>
 
 		<h3>1명 추가</h3>
@@ -39,15 +109,14 @@
 
 		<h2>목록</h2>
 
-		<p>
+		<div>
 			목록
 			<button>보기</button>
-		</p>
+		</div>
+	</div>
 
-
-		<h2>검색</h2>
-
-		<p>
+	<div class="search hide">
+		<div>
 			검색
 			아이디
 			<input type="text" id="search_name"><button>찾기</button><br/>
@@ -59,27 +128,19 @@
 			<input type="text" id="result_name"><button>삭제</button><br/>
 			입장 코드
 			<input type="text" id="result_entercode"><button>수정</button>
-		</p>
+		</div>
 
 	</div>
 
-	<hr>
-
-	<div class="maestro_manager_app">
-
-		<h1>과목 관리</h1>
-
-		<h2>마우스</h2>
-
+	<div class="mouse_app_list hide">
 		<form action="/action_page.php" method="get" id="app_mouse">
 			<input type="checkbox" name="mouse">클릭 연습<br/>
 			<input type="checkbox" name="mouse">더블 클릭 연습<br/>
 			<button type="submit" form="app_mouse">적용</button>
 		</form>
+	</div>
 
-
-		<h2>타자</h2>
-
+	<div class="typing_app_list hide">
 		<form action="/action_page.php" method="get" id="app_typing">
 			<input type="checkbox" name="typing">기본 자리<br/>
 			<input type="checkbox" name="typing">왼손 윗글쇠<br/>