Add: Apply bootstrap - index.html

src/web/module/home_section.html

@@ -1,18 +1,4 @@
-<style>
-.player_free {
-	/*background-color: #ff0000;*/
-	padding: 20px;
-}
-
-.maestro_free {
-	/*background-color: #0000ff;*/
-	padding: 20px;
-}
-</style>
-
-
-
-<script>
+<script>
 
 function loadMaestroExperienceAccount() {
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
@@ -53,61 +39,59 @@ function experienceMaestro() {
 
 
 
+<p>&nbsp;</p>
+
 <div class="container">
-	<div class="player_free">
-		<div class="col alignCenter">
-			<a href="./../main/free_player_app_menu.html" target="_blank" id="player_free_play" class="btn btn-rouge width400" >미등록 학생 앱<br/>무료 체험</a>
-		</div>
 
-		<ul id="free_app_list">
-			<li>
-				마우스 클릭 연습
-			</li>
-			<li>
-				마우스 더블 클릭 연습
-			</li>
-			<li>
-				한글 키보드 연습
-			</li>
+	<div class="jumbotron bg-warning">
+		<div class="container">
+
+		<h1 class="display-3 font-weight-bold">마우스 타자 연습</h1>
+
+		<p>방과후 컴퓨터 강사를 하며, 아직 컴퓨터 사용이 익숙하지 않은 학생들을 위해 준비한 서비스입니다.<br/>학생들이 좋아할만한 여러 가지 앱들을 준비했습니다. 재미있게 플레이하면서 자연스럽게 마우스 사용법과 타자를 배우고 익히게 됩니다.</p>
+
+		<ul>
+			<li>(무료 체험 가능 앱) 마우스 클릭 연습</li>
+			<li>(무료 체험 가능 앱) 마우스 더블 클릭 연습</li>
+			<li>(무료 체험 가능 앱) 한글 타자 연습</li>
 		</ul>
 
-	</div>
+		<p><a class="btn btn-outline-dark btn-lg" href="./../main/free_player_app_menu.html" target="_blank" role="button">학생 무료 체험 »</a></p>
 
-	<div class="maestro_free">
-		<div class="col alignCenter">
-			<a id="maestro_free_menu" class="btn btn-sea width400" onClick="experienceMaestro()" >마에스트로<br/>관리자 메뉴 체험</a>
 		</div>
+	</div> <!-- jumbotron -->
 
-		<ul id="maestro_preview">
-			<li>
-				플레이어 관리
-			</li>
-			<li>
-				과목 관리
-			</li>
-			<li>
-				랭킹
-			</li>
-			<li>
-				기록
-			</li>
+	<div class="jumbotron bg-primary">
+		<div class="container">
+
+		<h1 class="display-3 font-weight-bold">마에스트로, 관리자</h1>
+
+		<p>마에스트로 계정을 등록하시면 학생 목록을 등록하고 관리하실 수 있습니다. 학생들이 플레이 할 수 있는 앱의 목록도 편집이 가능합니다.<br/>등록된 학생들은 추가적인 마우스, 타자 연습 앱을 모두 사용할 수 있게 됩니다. 추가적으로 연습 앱을 플레이한 점수와 타수 등의 기록이 서버에 저장되고 내역을 확인할 수 있게 됩니다.</p>
+
+		<ul>
+			<li>학생 등록 및 삭제</li>
+			<li>학생 정보 수정</li>
+			<li>앱 활성화 / 비활성화</li>
+<!--
+			<li>랭킹</li>
+			<li>기록</li>
+ -->
+ 		</ul>
+
+		<p><a class="btn btn-outline-light btn-lg" role="button" href="javascript:void(0);" onClick="experienceMaestro()">마에스트로 무료 체험 »</a></p>
+
+ 		<p>&nbsp;</p>
+		<h2 class="display-5">가격 (1년 기준)</h2>
+
+		<ul class="mt-3 mb-4">
+			<li>1만원 : 학생 20명</li>
+			<li>2만원 : 학생 30명</li>
+			<li>3만원 : 학생 100명</li>
 		</ul>
 
-		<div class="col alignCenter">
-			<a href="./../main/register.html" id="maestro_register" class="btn btn-sea width400">마에스트로<br/>가입</a>
+		<p><a class="btn btn-light text-dark btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a></p>
+
 		</div>
+	</div> <!-- jumbotron -->
 
-		<ul id="register_tip">
-			<li>
-				학생 20명 (1만원 / 1년)
-			</li>
-			<li>
-				학생 50명 (2만원 / 1년)
-			</li>
-			<li>
-				학생 100명 (3만원 / 1년)
-			</li>
-		</ul>
-
-	</div>
-</div>
+</div>