<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form">
<h2>加入會員 </h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="user_name" id="user_name" class="form-control input-lg" placeholder="暱稱" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="user_id" id="user_id" class="form-control input-lg" placeholder="帳號" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="phone_number" id="phone_number" class="form-control input-lg" placeholder="聯繫電話" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="電子郵件" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="密碼" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="確認密碼" tabindex="6">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3">
<span class="button-checkbox">
<button type="button" class="btn" data-color="info" tabindex="7">我同意</button>
<input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1">
</span>
</div>
<div class="col-xs-8 col-sm-9 col-md-9">
接受<a href="#" data-toggle="modal" data-target="#t_and_c_m">會員服務條款</a> .
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="註冊" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">登入</a></div>
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">閱讀會員條款</h4>
</div>
<div class="modal-body">
<p class="text-danger">為保障您的權益,請於註冊使用服務前，詳細閱覽以下規定。一旦你註冊為會員或使用所提供之任何服務，即表示您同意並遵守以下所有規定。</p>
<h4 class="text-primary">遵守相關規定</h4>
<p>您了解網站，專為網友提供網路視訊聊天業務。您於註冊成為會員後，即可使用網站之服務。當您使用網站服務時，即表示您同意並遵守該等網站之會員規範及當地之法律規定。</p></li>
<h4 class="text-primary">服務簡介</h4>
<p>係透過網際網路提供您各項網路資訊服務。您必須自行配備上網所需的各項電腦設備，以及負擔接上網際網路的費用及電話費用。<br>
基於所提供的各項服務，您同意於註冊時提供詳實的個人資料，並隨時更新過時或已變更之個人資料。<br>
如果您提供的個人資料不實，得隨時終止您會員的資格及使用各項服務之資格。</p></li>
<h4 class="text-primary">會員規範的修改</h4>
<p>本站有權隨時修改本規範，將於修改時，於首頁公告修改的事實。如果你不同意修改的內容，請勿繼續使用服務。如果你繼續使用服務，則表示您同意並接受本規範之任何修改。</p></li>
<h4 class="text-primary">服務的停止與更改</h4>
<p>有權隨時停止或更改各項服務的內容，並無需事先通知您。無論任何情形，就停止或更改服務所可能致生之困擾、不便、損害，不負任何責任。</p></li>
<h4 class="text-primary">隱私保護</h4>
<p>尊重您個人隱私是的基本政策。因此，除法律或因相關主管機關要求外，在未獲您授權時，不會公開您的姓名、地址、電子郵件信箱，以及其他依法受保護的個人資訊。<br>
您基於提供之各項服務，您同意於法律許可的範圍內，允許之關係企業或合作夥伴，於必要範圍內，得使用您的個人資訊，以提供您其他服務。<br>
您同意得就您的個人資料作成會員統計資料。如該統計資料，不涉及揭露任何會員的個人身份，您同意並允許為任何合法的使用。<br>
您同意，於下列情形發生時，得依法公開您的個人資訊：</p>
<ol>
<li>因應法律及相關主管機關要求。</li>
<li>為保障之財產及權益。</li>
<li>或在緊急情況下為保障會員或公眾人身安全時。</li>
</ol>
<h4 class="text-primary">您的名稱及密碼</h4>
<p>您註冊後，將得到一個會員名稱及密碼，您就您名稱及密碼之保存安全負全責。 您同意您不會將會員名稱轉讓或出借他人使用。若您發現您的名稱遭人非法使用或有任何異常破壞使用安全的情形時，您應立即通知。</p></li>
<h4 class="text-primary">擔保責任免除</h4>
<p>就各項服務，不負任何明示或默示的擔保責任。不保證各項服務的穩定、安全、無誤、及不中斷。您明示承擔使用本服務的風險及可能致生的任何損害。<br>
對於透過本網站銷售的商品交易過程及商品本身，不負任何擔保責任。您了解您透過所購得的商品或服務，全由商品或服務提供人負全責，若有任何瑕疵或擔保責任，均與無關。</p></li>
<h4 class="text-primary">賠償責任限制</h4>
<p>對於您使用各項服務、或無法使用各項服務所致生的任何直接、間接、衍生、或特別損害，不負任何賠償責任。若您使用之服務，係有對價者，僅就您所付的對價範圍內，負賠償責任。<br><br>
上述賠償責任限制，若依法為不得限制者，則該等限制規定將不適用於您。</p>
<h4 class="text-primary">您的義務與責任</h4>
<p>您對您公布於或透過傳輸的一切內容負全責。<br>
您承諾遵守中華民國相關法規及一切國際網際網路規定與慣例。若您使用台灣地區以外之網站，您同意遵守各該網站當地之法令及網路慣例。<br>
您同意並保證不公布或傳送任何毀謗、不實、威脅、不雅、猥褻、不法、或侵害他人智慧財產權的資訊於上。<br>
您同意您不會於上從事廣告或販賣商品行為。<br>
就您的行為是否符合本規範，有最終決定權。若決定您的行為違反本規範或任何法令，您同意得隨時停止您使用服務。</p>
<h4 class="text-primary">補償</h4>
<p>您同意補償、其母公司、子公司、關係企業、受僱人、及一切相關人員，因您違反相關法令或本規範所致生之一切損害及責任。</p>
<h4 class="text-primary">結束服務</h4>
<p>您或均有權終止您的會員資格。您若欲終止您的會員資格，須以書面通知。<br>
有權隨時結束各項服務，您充分了解並未承諾保持任何一項服務不停止或不中斷。</p>
<h4 class="text-primary">節目內容</h4>
<ol>
<li>您了解所提供的節目內容皆為有版權之著作，您同意不得進行重製、拷貝、出售、轉售或作任何商業目的之使用。</li>
<li>年滿 18 之成人願意接受所提供之限制級節目， 為了維護節目提供者的權益，倘若節目內容違反本人所在地政府的法令，本人願放棄因此引起損失的一切求償權或抗辯權。未滿 18 歲之會員並同意不收看任何標示為限制級之節目。</li>
</ol>
<h4 class="text-primary">廣告信息或促銷計劃</h4>
<p>您了解上刊登有商業廣告及各種商品的促銷資訊。該等內容均係由廣告商或商品服務提供人所為，僅係提供刊登內容的媒介。您透過上所提供之商品、服務資訊，所購買的任何商品、服務，其間交易關係均存在於您與商品、服務提供人間，與無關。</p></li>
<h4 class="text-primary">一般規定</h4>
<ol>
<li>本規範以中華民國法律（不含涉外民事法律適用法或其他類似法規）為準據法。</li>
<li>就本規範涉及的一切爭訟，您同意以台灣嘉義地方法院為第一審管轄法院。</li>
<li>本規範若任何一部無效，不影響其他部份之效力。</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">我同意</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
/* Credit to bootsnipp.com for the css for the color graph */
.colorgraph {
height: 5px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>');
}
}
init();
});
});
