Fix: bootstrap - login
This commit is contained in:
@@ -193,316 +193,164 @@ $('#myTab a').on('click', function (e) {
|
||||
|
||||
<div class="container">
|
||||
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
|
||||
</li>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="input-info" data-toggle="tab" href="#input" role="tab" aria-controls="input" aria-selected="true">마에스트로 계정 신청</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" id="check-info" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="false">신청 정보 확인</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
|
||||
</li>
|
||||
</ul> <!-- 탭 -->
|
||||
|
||||
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
|
||||
<div class="tab-pane fade show active" id="input" role="tabpanel" aria-labelledby="input-info">
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
|
||||
|
||||
<h4 class="mb-4">마에스트로 계정 정보 입력</h4>
|
||||
|
||||
<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-4">
|
||||
<input type="password" class="form-control" id="maestro_name" placeholder="아이디 입력">
|
||||
<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<input type="button" class="form-control btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="password" class="form-control" id="password" placeholder="Password">
|
||||
<small class="form-text text-muted">4~10 글자. 영문, 숫자만 사용 가능합니다.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="email" class="col-sm-2 col-form-label">* 이메일</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="email" class="form-control" id="email" placeholder="name@example.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="account_type" class="col-sm-2 col-form-label">* 학생 수</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="account_type" class="form-control">
|
||||
<option selected>20명 (1만원 / 1년)</option>
|
||||
<option>50명 (2만원 / 1년)</option>
|
||||
<option>100명 (3만원 / 1년)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-check">
|
||||
<input type="checkbox" class="form-check-input" id="check_accept_clauses">
|
||||
<label class="form-check-label" for="check_accept_clauses">아래 주요 약관을 읽었으며, 모든 내용에 동의합니다.</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
||||
<h4>약관 주요 내용 요약</h4>
|
||||
|
||||
<p style="text-align: right;">마지막 갱신 : 2018년 6월 26일</p>
|
||||
|
||||
<ul>
|
||||
<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
|
||||
<li>서버가 불안정할 수 있습니다. 문제 발생시 메일로 알려주시면 최대한 빨리 정상화 하겠습니다.</li>
|
||||
<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
|
||||
<li>비활성화 되기 전에 연장 결제 해주시면, 남은 기간도 함께 연장됩니다.</li>
|
||||
<li>비활성화된 계정은, 6개월후에 삭제됩니다. 마에스트로 계정 및 학생들의 계정 정보 모두가 사라집니다.</li>
|
||||
<li>서비스 업그레이드는 가능합니다. 업그레이드한 날부터 1년간 업그레이드 서비스가 시작됩니다.</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-danger btn-block btn-lg">전체 약관 읽기</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane fade" id="check" role="tabpanel" aria-labelledby="check-info">
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #66ccff">
|
||||
<h4>신청 정보 확인</h4>
|
||||
|
||||
마에스트로 아이디 : <span class="maestro_name"></span><br/>
|
||||
암호 : <span class="password"></span><br/>
|
||||
이메일 : <span class="email"></span><br/>
|
||||
학생 수 : <span class="account_type"></span><br/>
|
||||
|
||||
<div>
|
||||
위의 내용이 모두 맞는지 확인해주세요.
|
||||
아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
|
||||
신청후에 <span class="price_account"></span>원을 송금해주세요.
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<!-- <a href="#" id="send_register" class="btn btn-sea width400" onClick="register_account()">마에스트로 계정 등록</a> -->
|
||||
<button class="btn btn-primary btn-block btn-lg" onClick="register_account()">계정 신청</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- 신청 정보 확인 -->
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane fade" id="registered" role="tabpanel" aria-labelledby="registered-account">
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ccffcc">
|
||||
|
||||
<h4>신청 완료</h4>
|
||||
|
||||
<p>마에스트로 아이디 <span class="maestro_name">????</span> 가 신청되었습니다.</p>
|
||||
|
||||
<h5>입금 계좌</h5>
|
||||
<div>
|
||||
카카오뱅크 : 9999-999999<br/>
|
||||
계좌 이름 : 박지상<br/>
|
||||
금액 : <span class="price_account"></span>원
|
||||
<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name"></span>로 입력해주세요.</div>
|
||||
<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
방금 <span class="email"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
||||
<h4>계정 활성화 안내</h4>
|
||||
|
||||
<ul>
|
||||
<li>계정 신청 내역과 입금 내역을 확인한 후, 바로 마에스트로 아이디를 활성화하겠습니다.</li>
|
||||
<li>최대 24시간 안에 활성화하도록 항상 노력하겠습니다.</li>
|
||||
<li>계정 신청 내역과 입금 내역이 맞지 않을 경우, 이메일로 문의드리게 됩니다.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- 신청 완료 -->
|
||||
|
||||
</div> <!-- 탭 내용 -->
|
||||
|
||||
<!--
|
||||
|
||||
<div>
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#tab1" data-toogle="tab">마에스트로 계정 신청</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab1" data-toogle="tab">신청 정보 확인</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab1" data-toogle="tab">신청 완료</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" id="registered-account" data-toggle="tab" href="#registered" role="tab" aria-controls="registered" aria-selected="false">신청 완료</a>
|
||||
</li>
|
||||
</ul> <!-- 탭 -->
|
||||
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane active" id="tab1">
|
||||
<p>마에스트로 계정 신청</p>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>신청 정보 확인</p>
|
||||
</div>
|
||||
<div class="tab-pane fade show active" id="input" role="tabpanel" aria-labelledby="input-info">
|
||||
|
||||
<div class="tab-pane" id="tab3">
|
||||
<p>신청 완료</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="px-5 py-4 my-3" style="background-color: #99ccff">
|
||||
|
||||
<h4 class="mb-4">마에스트로 계정 정보 입력</h4>
|
||||
|
||||
<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-4">
|
||||
<input type="text" class="form-control" id="maestro_name" placeholder="아이디 입력">
|
||||
<small class="form-text text-muted">4~16 글자. 영문, 숫자만 사용 가능합니다.</small>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<input type="button" class="form-control btn btn-warning" value="중복 체크" onClick="checkMaestroID()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-2 col-form-label">* 암호</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="password" class="form-control" id="password" placeholder="Password">
|
||||
<small class="form-text text-muted">4~10 글자. 영문, 숫자만 사용 가능합니다.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-tabs">
|
||||
<ul>
|
||||
<li class="widthOneThird activated">마에스트로 계정 신청</li>
|
||||
<li class="widthOneThird">신청 정보 확인</li>
|
||||
<li class="widthOneThird">신청 완료</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="email" class="col-sm-2 col-form-label">* 이메일</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="email" class="form-control" id="email" placeholder="name@example.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="account_type" class="col-sm-2 col-form-label">* 학생 수</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="account_type" class="form-control">
|
||||
<option selected>20명 (1만원 / 1년)</option>
|
||||
<option>50명 (2만원 / 1년)</option>
|
||||
<option>100명 (3만원 / 1년)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="error_message">
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group form-check">
|
||||
<input type="checkbox" class="form-check-input" id="check_accept_clauses">
|
||||
<label class="form-check-label" for="check_accept_clauses">아래 주요 약관을 읽었으며, 모든 내용에 동의합니다.</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" onClick="checkData()">등록 신청</button>
|
||||
</form>
|
||||
|
||||
<div id="input_data">
|
||||
</div>
|
||||
|
||||
(필수) 마에스트로 아이디 : <input type="text" id="maestro_name" value="test" >
|
||||
<button id="check_id" onClick="checkMaestroID()">중복 확인</button><br/>
|
||||
(필수) 암호 : <input id="password" value="test" type="password" name="password"><br/>
|
||||
(필수) 이메일 : <input id="email" value="test@test.com" name="email"><br/>
|
||||
(필수) 학생 수 :
|
||||
<select id="account_type">
|
||||
<option name="account_type" value="1">20명 (1만원 / 1년)</option>
|
||||
<option name="account_type" value="2">50명 (2만원 / 1년)</option>
|
||||
<option name="account_type" value="3">100명 (3만원 / 1년)</option>
|
||||
</select>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
||||
<h4>약관 주요 내용 요약</h4>
|
||||
|
||||
<span>
|
||||
<input type="checkbox" id="check_accept_clauses" />
|
||||
<label for="check_accept_clauses">아래 약관을 읽었으며, 모든 내용에 동의합니다.</label>
|
||||
</span>
|
||||
<p style="text-align: right;">마지막 갱신 : 2018년 6월 26일</p>
|
||||
|
||||
<ul>
|
||||
<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
|
||||
<li>서버가 불안정할 수 있습니다. 문제 발생시 메일로 알려주시면 최대한 빨리 정상화 하겠습니다.</li>
|
||||
<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
|
||||
<li>비활성화 되기 전에 연장 결제 해주시면, 남은 기간도 함께 연장됩니다.</li>
|
||||
<li>비활성화된 계정은, 6개월후에 삭제됩니다. 마에스트로 계정 및 학생들의 계정 정보 모두가 사라집니다.</li>
|
||||
<li>서비스 업그레이드는 가능합니다. 업그레이드한 날부터 1년간 업그레이드 서비스가 시작됩니다.</li>
|
||||
</ul>
|
||||
|
||||
<input id="check_accept_clauses" type="checkbox" name="accept_clauses"><br/>
|
||||
<br/>
|
||||
<button class="btn btn-danger btn-block btn-lg">전체 약관 읽기</button>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="col alignCenter">
|
||||
<a id="agreement_clauses" class="btn btn-orange">전체 약관 읽기</a>
|
||||
</div>
|
||||
|
||||
<h1>약관 주요 내용 요약</h1>
|
||||
|
||||
<p style="text-align: right;">마지막 갱신 : 2018년 6월 26일</p>
|
||||
|
||||
<ul>
|
||||
<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
|
||||
<li>서버가 불안정할 수 있습니다. 문제 발생시 메일로 알려주시면 최대한 빨리 정상화 하겠습니다.</li>
|
||||
<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
|
||||
<li>비활성화 되기 전에 연장 결제 해주시면, 남은 기간도 함께 연장됩니다.</li>
|
||||
<li>비활성화된 계정은, 6개월후에 삭제됩니다. 마에스트로 계정 및 학생들의 계정 정보 모두가 사라집니다.</li>
|
||||
<li>서비스 업그레이드는 가능합니다. 업그레이드한 날부터 1년간 업그레이드 서비스가 시작됩니다.</li>
|
||||
</ul>
|
||||
|
||||
<div class="col alignCenter">
|
||||
<a id="maestro_register" class="btn btn-sea width400" onClick="checkData()">등록 신청</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="register_account" style="display: none;">
|
||||
<h2>신청 정보 확인</h2>
|
||||
|
||||
마에스트로 아이디 : <span class="maestro_name"></span><br/>
|
||||
암호 : <span class="password"></span><br/>
|
||||
이메일 : <span class="email"></span><br/>
|
||||
학생 수 : <span class="account_type"></span><br/>
|
||||
|
||||
<div>
|
||||
신청 내용이 모두 맞는지 확인해주세요.
|
||||
아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
|
||||
신청후에 <span class="price_account"></span>원을 송금해주세요.
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="col alignCenter">
|
||||
<a href="#" id="send_register" class="btn btn-sea width400" onClick="register_account()">마에스트로 계정 등록</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="banking_guide" style="display: none;">
|
||||
<h2>신청 완료</h2>
|
||||
|
||||
<div>마에스트로 아이디</div>
|
||||
<div class="maestro_name"></div>
|
||||
<div>가 신청되었습니다.</div>
|
||||
|
||||
<h3>입금 계좌</h3>
|
||||
<div>
|
||||
카카오뱅크 : 9999-999999<br/>
|
||||
계좌 이름 : 박지상<br/>
|
||||
금액 : <span class="price_account"></span>원
|
||||
<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name"></span>로 입력해주세요.</div>
|
||||
<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
방금 <span class="email"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="check" role="tabpanel" aria-labelledby="check-info">
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #66ccff">
|
||||
<h4>신청 정보 확인</h4>
|
||||
|
||||
마에스트로 아이디 : <span class="maestro_name"></span><br/>
|
||||
암호 : <span class="password"></span><br/>
|
||||
이메일 : <span class="email"></span><br/>
|
||||
학생 수 : <span class="account_type"></span><br/>
|
||||
|
||||
<div>
|
||||
위의 내용이 모두 맞는지 확인해주세요.
|
||||
아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
|
||||
신청후에 <span class="price_account"></span>원을 송금해주세요.
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<!-- <a href="#" id="send_register" class="btn btn-sea width400" onClick="register_account()">마에스트로 계정 등록</a> -->
|
||||
<button class="btn btn-primary btn-block btn-lg" onClick="register_account()">계정 신청</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
-->
|
||||
</div> <!-- 신청 정보 확인 -->
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane fade" id="registered" role="tabpanel" aria-labelledby="registered-account">
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ccffcc">
|
||||
|
||||
<h4>신청 완료</h4>
|
||||
|
||||
<p>마에스트로 아이디 <span class="maestro_name">????</span> 가 신청되었습니다.</p>
|
||||
|
||||
<h5>입금 계좌</h5>
|
||||
<div>
|
||||
카카오뱅크 : 9999-999999<br/>
|
||||
계좌 이름 : 박지상<br/>
|
||||
금액 : <span class="price_account"></span>원
|
||||
<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_name"></span>로 입력해주세요.</div>
|
||||
<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
방금 <span class="email"></span> 이메일로 입금 안내 내용을 보내드렸습니다.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="px-5 py-4 my-3" style="background-color: #ffdddd">
|
||||
<h4>계정 활성화 안내</h4>
|
||||
|
||||
<ul>
|
||||
<li>계정 신청 내역과 입금 내역을 확인한 후, 바로 마에스트로 아이디를 활성화하겠습니다.</li>
|
||||
<li>최대 24시간 안에 활성화하도록 항상 노력하겠습니다.</li>
|
||||
<li>계정 신청 내역과 입금 내역이 맞지 않을 경우, 이메일로 문의드리게 됩니다.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- 신청 완료 -->
|
||||
|
||||
</div> <!-- 탭 내용 -->
|
||||
|
||||
</div> <!-- container -->
|
||||
Reference in New Issue
Block a user