From 3dde4030662c0221fe5460240e0a9984a0d835d8 Mon Sep 17 00:00:00 2001
From: "jisangs (iMac)" <jisangs@gmail.com>
Date: Mon, 25 Apr 2022 21:50:34 +0900
Subject: [PATCH] Add: beta_service notice html

Fix: home contents
---
 src/web/js/main.js                            |   1 +
 src/web/main/beta_service.html                |  51 ++++++++
 src/web/main/index.html                       |   3 +-
 src/web/module/home_section.html              |  93 +++++++--------
 src/web/module/home_section_beta_service.html | 109 ++++++++++++++++++
 src/web/module/home_section_faq.html          |   2 +
 6 files changed, 206 insertions(+), 53 deletions(-)
 create mode 100644 src/web/main/beta_service.html
 create mode 100644 src/web/module/home_section_beta_service.html
diff --git a/src/web/js/main.js b/src/web/js/main.js
index e82cb78..7ff663c 100644
--- a/src/web/js/main.js
+++ b/src/web/js/main.js
@@ -86,6 +86,7 @@ function showErrorMessage(message, type) {
 		default:
 		alertType = "alert-danger";
 	}
+	
 	messageBox.html(
 		'<div class="alert ' + alertType + '" role="alert">'
 			+ '<button type="button" class="close" data-dismiss="alert">&times;</button>'
diff --git a/src/web/main/beta_service.html b/src/web/main/beta_service.html
new file mode 100644
index 0000000..d3212d2
--- /dev/null
+++ b/src/web/main/beta_service.html
@@ -0,0 +1,51 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+	<meta charset="UTF-8">
+
+	<title>베타 서비스 알림 | 초코마에</title>
+	<meta name="description" CONTENT="베타 서비스 알림 | 초코마에 ‧ 서비스 | ChocoMae">
+
+	<link rel="icon" href="/mouse_typing/resources/image/icon/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="/mouse_typing/resources/image/icon/favicon.ico" type="image/x-icon" />
+
+	<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
+	<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
+	<script type="text/javascript" src="./../js/main.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function() {
+			if(maestroID === -1)
+				$("#header").load("./../module/header.html");
+			else
+				$("#header").load("./../module/maestro_header.html");
+			$("#section").load("./../module/home_section_beta_service.html");
+			$("#footer").load("./../module/footer.html");
+		});
+	</script>
+</head>
+
+
+
+<body style="background-color: white">
+
+	<div id="wrapper">
+
+		<header id="header">
+		</header>
+
+		<section id="section">
+		</section>
+
+		<footer id="footer">
+		</footer>
+
+	</div>
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/src/web/main/index.html b/src/web/main/index.html
index e5dfbe0..28b29fe 100644
--- a/src/web/main/index.html
+++ b/src/web/main/index.html
@@ -13,7 +13,8 @@
 
 	<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
 	<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+	
 	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="./../js/main.js"></script>
 	<script type="text/javascript" src="./../js/request_server.js"></script>
diff --git a/src/web/module/home_section.html b/src/web/module/home_section.html
index 25f6a8a..0753eb4 100644
--- a/src/web/module/home_section.html
+++ b/src/web/module/home_section.html
@@ -1,13 +1,17 @@
 ﻿<script>
 
 $(document).ready(function() {
-	showServiceCloseMessage();
-	/*
+	// showServiceCloseMessage();
 	showErrorMessage(
-		"(12월 4일) 알림<br/>\
-		* [시간을 맞춰라] 마우스 연습 앱을 추가했습니다.", "info"
+			'(04월 30일) 알림<br/>\
+				* 초코마에 베타 서비스 시작<br/>\
+				* 2022년 08월 이후 유료화 예정<br/>\
+				<br/>\
+				<a class="btn btn-outline-success" roll="button" href="../main/beta_service.html">\
+					<span class="oi oi-bullhorn" title="icon bullhorn" aria-hidden="true"></span>\
+					&nbsp;베타 서비스 + 8월 유료화 안내</a>'
+		, 'info'
 	);
-	*/
 });
 
 
@@ -69,15 +73,15 @@ function experienceMaestro() {
 				<div class="row">
 					<div>
 						<ul>
-							<li>마우스 클릭 연습</li>
-							<li>드래그 연습</li>
-							<li>더블 클릭 연습</li>
+							<li><i class="bi-mouse2"></i>&nbsp;외계인 침공</li>
+							<li><i class="bi-mouse2"></i>&nbsp;카드 짝 맞추기</li>
+							<li><i class="bi-mouse2"></i>&nbsp;고기 굽기</li>
 						</ul>
 					</div>
 					<div>
 						<ul>
-							<li>한글 타자 연습</li>
-							<li>두더지 타자</li>
+							<li><i class="bi-keyboard"></i>&nbsp;한글 타자 연습</li>
+							<li><i class="bi-keyboard"></i>&nbsp;두더지 타자</li>
 							<!-- <li></li> -->
 						</ul>
 					</div>
@@ -89,19 +93,20 @@ function experienceMaestro() {
 				<div class="row">
 					<div>
 						<ul>
-							<li>마우스 움직임 연습</li>
+							<li><i class="bi-mouse2"></i>&nbsp;미사일 피하기</li>
+							<li><i class="bi-mouse2"></i>&nbsp;1부터 50</li>
+							<li><i class="bi-mouse2"></i>&nbsp;시간을 맞춰라</li>
 						</ul>
 					</div>
 					<div>
 						<ul>
-							<li>영어 타자 연습</li>
-							<li>단어 비행접시</li>
-							<!-- <li></li> -->
+							<li><i class="bi-keyboard"></i>&nbsp;영어 타자 연습</li>
+							<li><i class="bi-keyboard"></i>&nbsp;단어 비행접시</li>
 						</ul>
 					</div>
 					<div>
 						<ul>
-							<li>자격증 타이머 (기록 저장)</li>
+							<li><i class="bi-stopwatch"></i>&nbsp;자격증 타이머 (기록 저장)</li>
 						</ul>
 					</div>
 				</div>
@@ -138,29 +143,34 @@ function experienceMaestro() {
 			<div class="col-4">
 				<h5>마에스트로 관리 기능</h5>
 				<ul>
-					<li>모든 앱 사용 가능, 앱 활성화 설정</li>
-					<li>학생 목록 관리</li>
-					<li>학생 점수 타수 서버 저장, 순위 표시</li>
-					<li class="d-none">랭킹</li>
-					<li class="d-none">기록</li>
+					<li>모든 앱 체험 + 앱 활성화 설정</li>
+					<li>학생 명단 관리</li>
+					<li>학생 타수 & 점수 랭킹, 기록</li>
 		 		</ul>
 		 	</div>
 
 			<div class="col-8">
 				<h5>계정 등록 비용 (유효기간 : 1년)</h5>
-				<div class="col-8">
+				<div class="col-12">
 					<div class="row">
-						<div class="col-6">
+						<div class="col-4">
 							<ul>
 								<li>1만원 : 학생 20명</li>
 								<li>2만원 : 학생 50명</li>
-								<li>3만원 : 학생 100명</li>
 							</ul>
 						</div>
-						<div class="col-6">
+						<div class="col-4">
 							<ul>
-								<li>4만원 : 학생 500명</li>
-								<li>5만원 : 학생 1,000명</li>
+								<li class="text-secondary"><del>3만원 : 학생 100명</del></li>
+								<li class="text-secondary"><del>4만원 : 학생 500명</del></li>
+								<li class="text-secondary"><del>5만원 : 학생 1,000명</del></li>
+							</ul>
+						</div>
+						<div class="col-4">
+							<ul class="list-unstyled">
+								<li class="text-info">(베타 기간 이후)</li>
+								<li class="text-info">학생 100명 이상 계정</li>
+								<li class="text-info">등록 가능</li>
 							</ul>
 						</div>
 					</div>
@@ -176,33 +186,10 @@ function experienceMaestro() {
 				</a>
 			</div>
 			<div class="col-8">
-				<a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a>
+				<a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입 <span class="font-weight-light">(베타 기간동안 무료)</span></a>
 			</div>
 		</div>
 
-<!-- 
-		<h5>마에스트로 관리 기능</h5>
-		<ul>
-			<li>학생 등록 및 삭제</li>
-			<li>학생 정보 수정</li>
-			<li>앱 활성화 / 비활성화</li>
-			<li class="d-none">랭킹</li>
-			<li class="d-none">기록</li>
- 		</ul>
-
-		<p><a class="btn btn-outline-dark btn-lg" role="button" href="javascript:void(0);" onClick="experienceMaestro()">마에스트로 무료 체험 »</a></p>
-
-		<hr class="mt-4 mb-3" />
-		<h5>계정 등록 비용 (금액 / 1년)</h5>
-		<ul>
-			<li>1만원 : 학생 20명</li>
-			<li>2만원 : 학생 30명</li>
-			<li>3만원 : 학생 100명</li>
-		</ul>
-
-		<div class="mt-3"><a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a></div>
- -->
-
 	</div> <!-- jumbotron -->
 
 
@@ -221,7 +208,8 @@ function experienceMaestro() {
 		<div class="row justify-content-center">
 		<!-- <div class="row mt-3"> -->
 			<div class="col-4">
-				<a class="btn btn-outline-dark btn-block btn-lg" role="button" href="./../client/license_timer.html" target="_blank">
+				<br/>
+				<a class="btn btn-outline-dark btn-block btn-lg mt-3" role="button" href="./../client/license_timer.html" target="_blank">
 					<span class="oi oi-clock" title="icon clock" aria-hidden="true"></span>
 							&nbsp;자격증 타이머
 				</a>
@@ -241,6 +229,7 @@ function experienceMaestro() {
 							</ul>
 						</div>
 					</div>
+					<span><i class="text-danger bi-exclamation-diamond-fill"></i>&nbsp;현재 HTTPS(SSL)이 취소되어, <span class="text-danger">타임오버 알림 팝업창</span>이 <span class="text-danger">작동하지 않는 점</span> 참고하세요.</span>
 				</div>
 			</div>
 		</div>
@@ -258,7 +247,7 @@ function experienceMaestro() {
 		<div class="row justify-content-center">
 		<!-- <div class="row mt-3"> -->
 			<div class="col-4">
-				<a class="btn btn-outline-dark btn-block btn-lg" role="button" href="./../client/itq_simulator.html" target="_blank">
+				<a class="btn btn-outline-dark btn-block btn-lg mt-3" role="button" href="./../client/itq_simulator.html" target="_blank">
 					<span class="oi oi-browser" title="icon browser" aria-hidden="true"></span>
 							&nbsp;ITQ 시험장 체험
 				</a>
diff --git a/src/web/module/home_section_beta_service.html b/src/web/module/home_section_beta_service.html
new file mode 100644
index 0000000..876737b
--- /dev/null
+++ b/src/web/module/home_section_beta_service.html
@@ -0,0 +1,109 @@
+﻿<div class="container my-3">
+
+	<div class="px-5 py-4 mb-3" style="background-color: #ffce54">
+		<h1 class="display-3 font-weight-bold" style="color: #630;">초코마에<span class="display-4">, 베타 서비스 안내</span></h1>
+	</div>	<!-- jumbotron -->
+
+	<div class="card border-danger">
+		<h5 class="card-header text-primary font-weight-bold">7월까지 무료, <span class="text-danger">8월 이후 유료화 (예정)</span></h5>
+		<div class="card-body">
+			<h5 class="card-title text-primary">2022년 07월까지 무료로 시범 운영</h5>
+			<p class="card-text">
+				<ul>
+					<li>서버 비용 부담을 덜기 위해 개인 서버에 초코마에 서비스를 올렸습니다.</li>
+					<li>개인 서버의 속도와 안정성을 확인하기 위해, 여름방학이 시작되는 7월까지 시험적으로 무료 운영합니다.</li>
+					<li>베타 서비스 기간동안 문제가 없다고 판단되면, 8월 이후에 정식 유료 서비스로 전환할 예정입니다.</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+	<div class="card border-danger">
+		<h5 class="card-header text-primary font-weight-bold">베타 서비스 기간동안의 운영</h5>
+		<div class="card-body">
+			<h5 class="card-title text-primary">도메인 변경<span class="text-secondary font-weight-light"> + https(SSL) 미적용</span></h5>
+			<p class="card-text">
+				<ul>
+					<li>chocomae.com 도메인이 취소되었습니다. 기존 URL은 더 이상 유효하지 않습니다.</li>
+					<li>개인 사업자 도메인인 jinaju.com 에 초코마에 서비스를 연결했습니다. <span class="text-secondary font-weight-light">(새 주소: chocomae.jinaju.com)</span></li>
+					<li>
+						기존 서비스와 달라진 점은 아래와 같습니다.
+						<div class="alert alert-warning" role="alert">
+							<ul>
+								<li>웹브라우저 주소창 옆에 보안 낮은 사이트로 표시됨</li>
+								<li>기존에 만들었던 바로가기, 즐겨찾기 - 새로운 URL로 수정하거나, 새로 등록이 필요</li>
+								<li>자격증 타이머 - 시간이 다 되었을 때 알람 팝업창 실행 안됨</li>
+							</ul>
+						</div>
+					</li>
+				</ul>
+			</p>
+			<h5 class="card-title text-primary">마에스트로 계정 신청</h5>
+			<p class="card-text">
+				<ul>
+					<li>서버 성능 확인을 위해 베타 서비스 기간동안은 <span class="text-danger">학생 20인</span>(연간 1만원), <span class="text-danger">50인</span>(2만원) 등록 신청만 받습니다.</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+	<div class="card">
+		<h5 class="card-header text-danger font-weight-bold">베타 서비스 이후의 운영</h5>
+		<div class="card-body">
+			<h5 class="card-title text-primary">정식 유료 서비스 시작</h5>
+			<p class="card-text">
+				<ul>
+					<li>서버 속도와 안정성이 보장되면, 개인 서버에서 정식 서비스로 운영합니다.</li>
+					<li>
+						만약에 속도와 안정성이 떨어진다면
+						<div class="alert alert-warning" role="alert">
+							<ol>
+								<li>계속 무료 서비스로 운영</li>
+								<li>사비로 유료 서버를 구매하고 새로 준비</li>
+								<li>다시 서비스 종료</li>
+							</ol>
+						</div>
+						와 같은 방안을 고려해서 결정할 예정입니다.
+					</li>
+				</ul>
+			</p>
+			<h5 class="card-title text-primary">베타 서비스기간 생성한 마에스트로 계정</h5>
+			<p class="card-text">
+				<ul>
+					<li>베타 기간동안 생성한 마에스트로 계정의 유효기간은 7월 31일까지 입니다.</li>
+					<li>정식 유료 서비스를 시작할 경우, 베타 기간동안 생성한 마에스트로 계정을 유료 결제하면 계속 사용하실 수 있습니다.</li>
+					<li>서버 속도와 안정성이 떨어질 경우, 무료 베타 기간을 연장할 수도 있습니다.</li>
+				</ul>
+			</p>
+			<h5 class="card-title text-primary">마에스트로 계정 신청</h5>
+			<p class="card-text">
+				<ul>
+					<li>서버가 안정적으로 운영되어 정식 서비스로 넘어가면, 100인 이상 신규 등록과 계정 업그레이드를 활성화 시킬 예정입니다.</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+	<div class="card">
+		<h5 class="card-header text-primary font-weight-bold">인사말</h5>
+		<div class="card-body">
+			<h5 class="card-title text-primary">방과후/초등학교 선생님, 그리고 학생분들께.</h5>
+			<p class="card-text">
+				<ul>
+					<li>서비스를 종료한 이후에도 응원해주신 여러 선생님들께 감사드립니다.</li>
+					<br/>
+					<li>저는 2년 전에 방과후 선생님을 그만두었고, 지금은 회사에서 웹 개발 일을 하고 있습니다.</li>
+					<li>많이 아쉬웠던 초코마에 서비스를 되살려 보기 위해 개인 서버도 준비하고, 이것 저것 공부하고 있습니다.</li>
+					<li>큰 욕심 부리지 않고 하나하나 준비해 나가려고 합니다.</li>
+					<br/>
+					<li>부족한 점이 많겠지만 앞으로도 잘 부탁드립니다.</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+</div>
diff --git a/src/web/module/home_section_faq.html b/src/web/module/home_section_faq.html
index 131d404..b9859a5 100644
--- a/src/web/module/home_section_faq.html
+++ b/src/web/module/home_section_faq.html
@@ -20,6 +20,7 @@
 	</div>
 	<br/>
 
+	<!--
 	<div class="card">
 		<h5 class="card-header text-danger font-weight-bold">Q. 왜 신용카드 결제는 안되나요?</h5>
 		<div class="card-body">
@@ -33,6 +34,7 @@
 		</div>
 	</div>
 	<br/>
+	-->
 
 	<div class="card">
 		<h5 class="card-header text-danger font-weight-bold">Q. 학생들의 기록을 좀 더 체계적으로 확인하고 싶어요.</h5>
