jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: maestro upgrade, setup pages

Browse Source
This commit is contained in:
Jisang Park
2018-08-01 18:15:36 +09:00
parent 39e0aa50b8
commit e2e6761c9b
10 changed files with 297 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/maestro/setup.html
+62
View File
@@ -0,0 +1,62 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>마에스트로 정보 변경</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--
<link rel="stylesheet" type="text/css" href="./../css/module.css">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/maestro_main.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/lib/account_validator.js"></script>
<script type="text/javascript" src="./../js/lib/maestro_info.js"></script>
<script type="text/javascript" src="./../js/request_server.js"></script>
<script type="text/javascript" src="./../js/maestro_main.js"></script>
<script type="text/javascript" src="./../js/player_list.js"></script>
<script type="text/javascript" src="./../js/player_list_navigator.js"></script>
<script type="text/javascript" src="./../js/player_list_manager.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#header").load("./../module/maestro_header.html");
$("#section").load("./../module/maestro_setup.html");
$("#footer").load("./../module/footer.html");
});
</script>
</head>
<body bgcolor="white">
<div id="wrapper">
<header id="header">
</header>
<section id="section">
</section>
<footer id="footer">
</footer>
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
</body>
</html>
src/web/maestro/upgrade.html
+62
View File
@@ -0,0 +1,62 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>마에스트로 정보 변경</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--
<link rel="stylesheet" type="text/css" href="./../css/module.css">
<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
<link rel="stylesheet" type="text/css" href="./../css/maestro_main.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/lib/account_validator.js"></script>
<script type="text/javascript" src="./../js/lib/maestro_info.js"></script>
<script type="text/javascript" src="./../js/request_server.js"></script>
<script type="text/javascript" src="./../js/maestro_main.js"></script>
<script type="text/javascript" src="./../js/player_list.js"></script>
<script type="text/javascript" src="./../js/player_list_navigator.js"></script>
<script type="text/javascript" src="./../js/player_list_manager.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#header").load("./../module/maestro_header.html");
$("#section").load("./../module/maestro_upgrade.html");
$("#footer").load("./../module/footer.html");
});
</script>
</head>
<body bgcolor="white">
<div id="wrapper">
<header id="header">
</header>
<section id="section">
</section>
<footer id="footer">
</footer>
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
</body>
</html>
src/web/module/footer.html
+5 -5
View File
@@ -1,16 +1,16 @@
<footer class="page-footer bg-dark text-white p-3"> <footer class="page-footer bg-dark text-white p-2">
<div class="container text-center text-md-left"> <div class="container text-center text-md-left">
<div class="row"> <div class="row">
<div class="col-md-4 pt-1 text-left"> <div class="col-md-4 pt-1 text-left my-auto">
<label>Copyright @JINAJU Since 2018</label> <label>Copyright @JINAJU<br/>Since 2018</label>
</div> </div>
<div class="col-md pt-1 text-center"> <div class="col-md pt-1 text-center my-auto">
<label>문의 : support@jinaju.com</label> <label>문의 : support@jinaju.com</label>
</div> </div>
<div class="col-md-4 text-right"> <div class="col-md-4 text-right my-auto">
<a class="btn btn-sm btn-primary px-4" href="./../main/faq.html">FAQ</a> <a class="btn btn-sm btn-primary px-4" href="./../main/faq.html">FAQ</a>
</div> </div>
src/web/module/home_section.html
+6 -4
View File
@@ -46,7 +46,7 @@ function experienceMaestro() {
<p>방과후 컴퓨터 강사를 하며, 아직 컴퓨터 사용이 익숙하지 않은 학생들을 위해 준비한 서비스입니다.<br/>학생들이 좋아할만한 여러 가지 앱들을 준비했습니다. 재미있게 플레이하면서 자연스럽게 마우스 사용법과 타자를 배우고 익히게 됩니다.</p> <p>방과후 컴퓨터 강사를 하며, 아직 컴퓨터 사용이 익숙하지 않은 학생들을 위해 준비한 서비스입니다.<br/>학생들이 좋아할만한 여러 가지 앱들을 준비했습니다. 재미있게 플레이하면서 자연스럽게 마우스 사용법과 타자를 배우고 익히게 됩니다.</p>
<h5>무료 체험 가능 앱</h5> <!-- <h5>무료 체험 가능 앱</h5> -->
<!-- <!--
<div class="row text-center justify-content-center"> <div class="row text-center justify-content-center">
<div class="col-2 bg-dark"> <div class="col-2 bg-dark">
@@ -60,13 +60,15 @@ function experienceMaestro() {
</div> </div>
</div> </div>
--> -->
<ul class="inline"> <ul class="inline">
<li>마우스 클릭 연습</li> <li>마우스 클릭 연습</li>
<li>마우스 더블 클릭 연습</li> <li>마우스 더블 클릭 연습</li>
<li>한글 타자 연습</li> <li>한글 타자 연습</li>
</ul> </ul>
<p><a class="btn btn-outline-dark btn-lg" href="./../main/free_player_app_menu.html" target="_blank" role="button">학생 무료 체험 »</a></p> <div class="mt-3"><a class="btn btn-outline-dark btn-lg" href="./../main/free_player_app_menu.html" target="_blank" role="button">학생 무료 체험 »</a></div>
</div> </div>
</div> <!-- jumbotron --> </div> <!-- jumbotron -->
@@ -89,14 +91,14 @@ function experienceMaestro() {
<p><a class="btn btn-outline-dark btn-lg" role="button" href="javascript:void(0);" onClick="experienceMaestro()">마에스트로 무료 체험 »</a></p> <p><a class="btn btn-outline-dark btn-lg" role="button" href="javascript:void(0);" onClick="experienceMaestro()">마에스트로 무료 체험 »</a></p>
<h5 class="mt-4">계정 등록 비용 (금액 / 1년)</h5> <h5 class="mt-5">계정 등록 비용 (금액 / 1년)</h5>
<ul> <ul>
<li>1만원 : 학생 20명</li> <li>1만원 : 학생 20명</li>
<li>2만원 : 학생 30명</li> <li>2만원 : 학생 30명</li>
<li>3만원 : 학생 100명</li> <li>3만원 : 학생 100명</li>
</ul> </ul>
<p><a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a></p> <div class="mt-3"><a class="btn btn-primary btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a></div>
</div> </div>
</div> <!-- jumbotron --> </div> <!-- jumbotron -->
src/web/module/maestro_section_add_player.html
+1 -1
View File
@@ -137,7 +137,7 @@ function onErrorPlayerPW(message) {
</div> <!-- 학생 추가 --> </div> <!-- 학생 추가 -->
<div class="col-7" style="background-color: #ffce54"> <div class="col-7 border border-warning rounded" style="background-color: #ffeab6">
<h5 class="my-3">학생 목록</h5> <h5 class="my-3">학생 목록</h5>
<form id="add_player_list"> <form id="add_player_list">
src/web/module/maestro_section_login.html
+2 -2
View File
@@ -52,7 +52,7 @@ function login() {
<div class="container"> <div class="container">
<div class="px-5 py-4 my-3" style="background-color: #99ccff"> <div class="border border-primary rounded px-5 py-4 my-3">
<h4 class="mb-4">로그인</h4> <h4 class="mb-4">로그인</h4>
@@ -80,7 +80,7 @@ function login() {
</div> </div>
<div class="px-5 py-4 my-3" style="background-color: #66ccff"> <div class="rounded px-5 py-4 my-3" style="background-color: #66ccff">
<h4 class="mb-4">마에스트로 계정 가입</h4> <h4 class="mb-4">마에스트로 계정 가입</h4>
src/web/module/maestro_section_main.html
+21 -5
View File
@@ -26,17 +26,33 @@ function onChangePlayerCount() {
maestroInfo.loadMaestroInfo(onLoadSuccessMaestroInfo, onLoadFailMaestroInfo); maestroInfo.loadMaestroInfo(onLoadSuccessMaestroInfo, onLoadFailMaestroInfo);
} }
function onClickMaestroUpgrade() {
console.log("onClickMaestroUpgrade");
location.href='./../maestro/upgrade.html';
location.href = "www.yoursite.com";
}
</script> </script>
<div class="container"> <div class="container">
<div class="row bg-primary py-3 mx-1 my-2"> <div class="row border border-primary rounded py-2 mx-1 my-2">
<div id="maestro_info_id" class="col-3">마에스트로 계정 이름</div> <div id="maestro_info_id" class="col my-auto"></div>
<div id="maestro_info_player_count" class="col-2">학생수 ? / ?</div> <div id="maestro_url" class="col my-auto"></div>
<div id="maestro_info_upgrade" class="col-4">업그레이드 버튼</div>
<div id="maestro_info_setting" class="col-2">계정 정보 수정 버튼</div> <div class="eyebrow ml-auto mt-0 d-md-flex align-items-center">
<div class="input-group my-auto">
<input type="text" class="form-control" value="학생수 :">
<div class="input-group-append">
<button class="btn btn-primary px-3 mr-2" type="button" onClick="location.href='./../maestro/upgrade.html';">업그레이드</a>
</div> </div>
</div>
<a class="btn btn-primary px-3 mr-3" href="./../maestro/setup.html">계정 정보 수정</a>
</div>
</div> <!-- row border -->
<div class="row mx-1"> <div class="row mx-1">
<div class="col"> <div class="col">
src/web/module/maestro_section_search.html
+1 -1
View File
@@ -49,7 +49,7 @@ function searchPlayer() {
</div> <!-- 학생 검색 --> </div> <!-- 학생 검색 -->
<div class="col-7" style="background-color: #ffce54"> <div class="col-7 rounded " style="background-color: #ffce54">
<h5 class="my-3">검색 결과</h5> <h5 class="my-3">검색 결과</h5>
<form id="search_player_list"> <form id="search_player_list">
src/web/module/maestro_setup.html
+51
View File
@@ -0,0 +1,51 @@
<script>
function changeMaestroInfo() {
location.href="main_menu.html";
}
</script>
<div class="container my-3">
<div class="card border-primary">
<div class="card-header bg-light"><span class="h4">마에스트로 계정 정보 수정</span></div>
<div class="card-body">
<form class="mx-4">
<div class="form-group row">
<label for="maestro_name" class="col-sm-2 col-form-label">* 아이디 변경</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="maestro_name" placeholder="아이디 입력">
<small class="form-text text-muted">4~20 글자. 영문, 숫자만 사용 가능합니다.</small>
</div>
<div class="col-sm-4">
<input type="button" id="id_ckeck" class="btn btn-info" value="중복 체크" onClick="checkMaestroID()" disabled>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" placeholder="Password">
<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">* 이메일</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
</div>
<div class="mt-5 mb-1 text-danger">위 내용으로 마에스트로 계정 정보를 변경합니다.</div>
<button type="button" class="btn btn-danger btn-block btn-lg" onClick="changeMaestroInfo()">변경</button>
</form>
</div> <!-- card body -->
</div>
</div> <!-- container -->
src/web/module/maestro_upgrade.html
+85
View File
@@ -0,0 +1,85 @@
<script>
function changeMaestroInfo() {
location.href="main_menu.html";
}
</script>
<div class="container my-3">
<div class="card border-primary">
<div class="card-header bg-light"><span class="h4">요금제 업그레이드</span></div>
<div class="card-body">
<!-- <div class="card-group"> -->
<div class="card-deck">
<div class="card">
<div class="card-header"><span class="h3">1만원</span> <span class="text-muted">/ 1년 요금제</span></div>
<div class="card-body">
<ul>
<li><span class="text-danger font-weight-bold">20명</span>까지 학생 등록이 가능합니다.</li>
<li>모든 요금제의 기능은 동일합니다.</li>
<li>1년동안 유효합니다.</li>
</ul>
<a class="btn btn-secondary disabled" href="#">업그레이드</a>
</div>
<div class="card-footer">
<small class="text-muted">낮은 요금제로 내릴 수는 없습니다.</small>
</div>
</div>
<div class="card border-warning">
<div class="card-header"><span class="h3">2만원</span> <span class="text-muted">/ 1년 요금제</span></div>
<div class="card-body">
<ul>
<li><span class="text-danger font-weight-bold">50명</span>까지 학생 등록이 가능합니다.</li>
<li>모든 요금제의 기능은 동일합니다.</li>
<li>1년동안 유효합니다.</li>
</ul>
<a class="btn btn-secondary disabled" href="#">업그레이드</a>
</div>
<div class="card-footer">
<small class="text-warning">현재 적용된 요금제입니다.</small>
</div>
</div>
<div class="card border-primary">
<div class="card-header"><span class="h3">3만원</span> <span class="text-muted">/ 1년 요금제</span></div>
<div class="card-body">
<ul>
<li><span class="text-danger font-weight-bold">100명</span>까지 학생 등록이 가능합니다.</li>
<li>모든 요금제의 기능은 동일합니다.</li>
<li>1년동안 유효합니다.</li>
</ul>
<a class="btn btn-primary" href="#">업그레이드</a>
</div>
<div class="card-footer">
<small class="text-primary">이 요금제로 업그레이드가 가능합니다.</small>
</div>
</div>
</div>
</div>
</div>
<div class="rounded px-5 py-4 my-3" style="background-color: #66ccff">
<h4 class="mb-4">마에스트로 업그레이드 안내</h4>
<ol>
<li>위에서 업그레이드 하실 상품을 선택하세요.</li>
<li>업그레이드를 신청하신 후, 추가 금액을 계좌이체해 주세요.</li>
<li>입금 내역이 확인되는대로 마에스트로 계정의 요금제를 변경해 드리겠습니다.</li>
<li>업그레이드시, 기존 요금제에서 남아있던 유효기간에 업그레이드한 계정 1년 유효 기간이 추가됩니다.<br/>
<small class="text-muted">예) 1만원 요금제 : 3개월 + 3만원 요금제 : 1년 = 1년 3개월</small></li>
</ol>
</div>
</div> <!-- container -->