<!--


FFFFFFFFFFFFFFFFFFFFFF                                                                                   tttt
F::::::::::::::::::::F                                                                                ttt:::t
F::::::::::::::::::::F                                                                                t:::::t
FF::::::FFFFFFFFF::::F                                                                                t:::::t
  F:::::F       FFFFFFrrrrr   rrrrrrrrr      ooooooooooo       eeeeeeeeeeee        ssssssssss   ttttttt:::::ttttttt
  F:::::F             r::::rrr:::::::::r   oo:::::::::::oo   ee::::::::::::ee    ss::::::::::s  t:::::::::::::::::t
  F::::::FFFFFFFFFF   r:::::::::::::::::r o:::::::::::::::o e::::::eeeee:::::eess:::::::::::::s t:::::::::::::::::t
  F:::::::::::::::F   rr::::::rrrrr::::::ro:::::ooooo:::::oe::::::e     e:::::es::::::ssss:::::stttttt:::::::tttttt
  F:::::::::::::::F    r:::::r     r:::::ro::::o     o::::oe:::::::eeeee::::::e s:::::s  ssssss       t:::::t
  F::::::FFFFFFFFFF    r:::::r     rrrrrrro::::o     o::::oe:::::::::::::::::e    s::::::s            t:::::t
  F:::::F              r:::::r            o::::o     o::::oe::::::eeeeeeeeeee        s::::::s         t:::::t
  F:::::F              r:::::r            o::::o     o::::oe:::::::e           ssssss   s:::::s       t:::::t    tttttt
FF:::::::FF            r:::::r            o:::::ooooo:::::oe::::::::e          s:::::ssss::::::s      t::::::tttt:::::t
F::::::::FF            r:::::r            o:::::::::::::::o e::::::::eeeeeeee  s::::::::::::::s       tt::::::::::::::t
F::::::::FF            r:::::r             oo:::::::::::oo   ee:::::::::::::e   s:::::::::::ss          tt:::::::::::tt
FFFFFFFFFFF            rrrrrrr               ooooooooooo       eeeeeeeeeeeeee    sssssssssss              ttttttttttt

  PPPPPPPPPPPPPPPPP                                         jjjj                                                  tttt
  P::::::::::::::::P                                       j::::j                                              ttt:::t
  P::::::PPPPPP:::::P                                       jjjj                                               t:::::t
  PP:::::P     P:::::P                                                                                         t:::::t
    P::::P     P:::::Prrrrr   rrrrrrrrr      ooooooooooo  jjjjjjj    eeeeeeeeeeee        ccccccccccccccccttttttt:::::ttttttt
    P::::P     P:::::Pr::::rrr:::::::::r   oo:::::::::::ooj:::::j  ee::::::::::::ee    cc:::::::::::::::ct:::::::::::::::::t
    P::::PPPPPP:::::P r:::::::::::::::::r o:::::::::::::::oj::::j e::::::eeeee:::::ee c:::::::::::::::::ct:::::::::::::::::t
    P:::::::::::::PP  rr::::::rrrrr::::::ro:::::ooooo:::::oj::::je::::::e     e:::::ec:::::::cccccc:::::ctttttt:::::::tttttt
    P::::PPPPPPPPP     r:::::r     r:::::ro::::o     o::::oj::::je:::::::eeeee::::::ec::::::c     ccccccc      t:::::t
    P::::P             r:::::r     rrrrrrro::::o     o::::oj::::je:::::::::::::::::e c:::::c                   t:::::t
    P::::P             r:::::r            o::::o     o::::oj::::je::::::eeeeeeeeeee  c:::::c                   t:::::t
    P::::P             r:::::r            o::::o     o::::oj::::je:::::::e           c::::::c     ccccccc      t:::::t    tttttt
  PP::::::PP           r:::::r            o:::::ooooo:::::oj::::je::::::::e          c:::::::cccccc:::::c      t::::::tttt:::::t
  P::::::::P           r:::::r            o:::::::::::::::oj::::j e::::::::eeeeeeee   c:::::::::::::::::c      tt::::::::::::::t
  P::::::::P           r:::::r             oo:::::::::::oo j::::j  ee:::::::::::::e    cc:::::::::::::::c        tt:::::::::::tt
  PPPPPPPPPP           rrrrrrr               ooooooooooo   j::::j    eeeeeeeeeeeeee      cccccccccccccccc          ttttttttttt
                                                           j::::j
                                                 jjjj      j::::j
                                                j::::jj   j:::::j
                                                j::::::jjj::::::j
                                                 jj::::::::::::j
                                                   jjj::::::jjj
                                                      jjjjjj

                                                                                                          forestproject.org
    ==========================================================================================================================
                                                                                           Designed & Developed by Cizoo&Co


 -->
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="target-densitydpi=device-dpi, width=1280, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>木林森 | ForestProject 木林森計畫</title>
<meta name="description" content="「木林森計畫」起源於2005年，由藝術家徐冰為恢復肯亞森林綠帶而設置的一套自循環系統，綜合了藝術、教育、環境護育三位一體。本展是2013年「木林森計畫」來到臺灣，在此由大眾一起參與的成果展。">
<meta content="「木林森計畫」起源於2005年，由藝術家徐冰為恢復肯亞森林綠帶而設置的一套自循環系統，綜合了藝術、教育、環境護育三位一體。本展是2013年「木林森計畫」來到臺灣，在此由大眾一起參與的成果展。" property="og:description">
<meta content="" property="og:image">
<meta content="" property="og:title">

<link rel="icon" type="image/x-icon" href="img/favicon.png" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="css/main.css">
	<link rel="canonical" href="http://forestproject.org/login.php"/>
<style>
#mask {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	background-image:url(img/loading.gif);
	background-position:50% 50%;
	background-repeat:no-repeat;
	z-index:99999;
	display:none;
}
</style>
  </head>
  <body class="login">
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="modal-overlay"></div>
    <div class="modal">
      <section class="modal__main">
        <div class="signup-success-msg">
          <p>註冊成功！<br>請使用您的 Email 及密碼登入。</p>
        </div>

        <div class="modal-actions right">
          <a href="" class="btn ok">OK</a>
        </div>
      </section>
    </div>

    <aside class="top-header">
  <div class="container">
    <ul id="user-links" class="right">
      <li><a href="login.php"><span class="user-link-span">登入 / 註冊</span></a></li>
      <li class="divider"></li>
      <li>
        <a href="favorite.php" class="my-fav">
          <span class="user-link-span">我的追蹤清單<div class="fav-status"><span>0</span></div></span>
        </a>
      </li>
    </ul>
  </div>
</aside>

    <div class="pusher-wrapper">
      <header role="banner"></header>

      <nav id="site-nav">
  <div class="container">
    <h1 class="left">
      <a href="index.php" class="nav-logo logo-02">木林森計畫 Forest Project</a>
    </h1>
    <ul class="nav right">
      <!-- NOTE: add active class in current page -->
      <li id="home_menu" class="site-nav-item">
        <a href="index.php">首頁</a>
        <span></span>
      </li>
      <li id="videos_menu" class="site-nav-item">
        <a href="video.php">影音專區</a>
        <span></span>
      </li>
      <li id="about-mlx_menu" class="site-nav-item">
        <a href="about.php">關於木林森</a>
        <span></span>
      </li>
      <li id="class_menu" class="site-nav-item">
        <a href="class.php">木林森講堂</a>
        <span></span>
      </li>
      <!-- <li id="events_menu" class="site-nav-item">
        <a href="">活動進展</a>
        <span></span>
      </li> -->
      <li id="yours_menu" class="site-nav-item">
        <a href="works.php">你的木林森</a>
        <span></span>
      </li>
      <!-- <li id="support_menu" class="site-nav-item">
        <a href="">支持我們</a>
        <span></span>
      </li> -->
      <li id="contact_menu" class="site-nav-item">
        <a href="contact.php">聯絡我們</a>
        <span></span>
      </li>
    </ul>
  </div>
</nav>

      <main class="body-content" role="main">
        <div class="container">
        <h1 class="title heading-10">登入 / 註冊</h1>

          <div class="works-info clearfix">
            <div class="works-info-title left">
              <h2 class="login-title-01">會員中心<span>MEMBER'S</span></h2>
            </div>
            <div class="works-info-description right">
              <p>欲支持木林森計劃，註冊後即可購買小朋友的畫作；若您已經購買亦可登入查訊購買記錄！</p>
            </div>
          </div>

          <div class="login-left left">
            <form accept-charset="UTF-8" action="" id="login-form" method="post">
              <fieldset>
                <legend class="login-form-info">
                  <h2 class="title login-title-02">會員登入</h2>
                </legend>
                <div class="control-group">
                  <label class="control-label" for="login-email">電子信箱</label>
                  <div class="controls">
                    <input id="login-email" placeholder="電子信箱" name="email" type="text" data-check="1,email">
                    <p class="help-block">請輸入您的電子信箱</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="login-password">密碼</label>
                  <div class="controls">
                    <input id="login-password" placeholder="密碼" name="pass" type="password" data-check="1,">
                    <p class="help-block">請輸入您的密碼</p>
                  </div>
                </div>
                <div class="form-actions">
                  <input id="login-submit" class="btn right" data-disable-with="正在登入" name="commit" type="submit" value="登入">
                </div>
              </fieldset>
            </form>
          </div>

          <div class="login-right right">
            <form accept-charset="UTF-8" action="" id="signup-form" method="post">
              <fieldset>
                <legend class="signup-form-info">
                  <h2 class="title login-title-03">建立新會員</h2>
                </legend>
                <div class="control-group">
                  <label class="control-label" for="signup-last-name">姓氏</label>
                  <div class="controls">
                    <input id="signup-last-name" placeholder="姓氏" name="lastname" type="text" tabindex="1" data-check="1,">
                    <p class="help-block">請輸入您的姓氏</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="signup-first-name">名字</label>
                  <div class="controls">
                    <input id="signup-first-name" placeholder="名字" name="firstname" type="text" tabindex="2" data-check="1,">
                    <p class="help-block">請輸入您的名字</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="signup-address">寄送地址</label>
                  <div class="controls">
                    <input id="signup-address" placeholder="寄送地址" name="address" type="text" tabindex="3" data-check="1,">
                    <p class="help-block">請輸入您的寄送地址</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="signup-phone">聯絡電話</label>
                  <div class="controls">
                    <input id="signup-phone" placeholder="聯絡電話" name="phone" type="text" tabindex="4" data-check="1,">
                    <p class="help-block">請輸入您的聯絡電話</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="signup-email">電子信箱</label>
                  <div class="controls">
                    <input id="signup-email" placeholder="電子信箱" name="email" type="text" tabindex="5" data-check="1,email">
                    <p class="help-block">請輸入您的電子信箱</p>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="signup-password">密碼</label>
                  <div class="controls">
                    <input id="signup-password" placeholder="密碼" name="pass" type="password" tabindex="6" data-check="1,">
                    <p class="help-block">請輸入您的密碼</p>
                  </div>
                </div>
                <div class="form-actions">
                  <input id="signup-submit" class="btn btn-primary right" data-disable-with="正在送出" name="commit" type="submit" value="註冊" tabindex="7">
                </div>
              </fieldset>
            </form>
          </div>
        </div>

        <div class="pusher"></div>
      </main>
    </div>

    <footer role="contentinfo">
  <div class="container">
    &copy; 2014 <strong>Forestproject</strong> All Rights Reserved. Designed by <strong>Cizoo&amp;Co</strong>.
  </div>
</footer>
<div id="mask"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/vendor/jquery.tmpl.js"></script>
<script src="js/vendor/jquery.path.js"></script>
<script src="js/vendor/jstorage.js"></script>
<script src="js/vendor/lodash.min.js"></script>
<script src="js/vendor/xForm.js"></script>

<script src="js/bingo.js"></script>
<script src="js/masthead.js"></script>
<script src="js/squirrel.js"></script>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-45122021-3');ga('send','pageview');
</script>

    <script>
    $(function () {

      $('#login-form').submit(function (event) {
        event.preventDefault();

        if (xFormCheck('login-form')) {
			$('#mask').show();
          $.post('jc/jcLogin.php', $('#login-form').serialize())
            .done(function (res) {
					if(res == "ok")
					{
						window.location.href='index.php';
					}
					else {alert(res);$('#mask').hide();}
            })
            .fail(function () {
              alert('Ajax request 失敗！');
			  $('#mask').hide();
            });
        }
      });

      $('#signup-form').submit(function (event) {
        event.preventDefault();

        if (xFormCheck('signup-form')) {
			$('#signup-submit').val('送出中……');
			$('#mask').show();
          $.post('jc/jcMemAdd.php', $('#signup-form').serialize())
            .done(function (res) {
					if(res == "ok")
					{
						$('#login-email').val($('#signup-email').val());
						$('#login-password').val($('#signup-password').val());
						$('#login-form').submit();
						document.getElementById("signup-form").reset();
//						alert('註冊成功\n請使用您的email及密碼登入');
/*						
						$('.login').addClass('modal-enabled');

						$('.modal').bind('click', function (event) {
						  event.preventDefault();
						  event.stopPropagation();
						});
		
						$('.modal-overlay').bind('click', function () {
						  $('.login').removeClass('modal-enabled');
						});
		
						$('.ok').bind('click', function (event) {
						  event.preventDefault();
						  $('.login').removeClass('modal-enabled');
						});
		
						$('#signup-submit').val('註冊');
*/
					}
					else
					{
						alert(res);
						$('#signup-submit').val('註冊');
						$('#mask').hide();
					}
            })
            .fail(function () {
              alert('Ajax request 失敗！');
			  $('#signup-submit').val('註冊');
			  $('#mask').hide();
            });
        }
      });

    });
    </script>
  </body>
</html>