头像改为文件上传

html/app.js

@@ -0,0 +1,8 @@
+var express = require('express');
+
+var app = module.exports.app = exports.app = express();
+app.use(require('connect-livereload')());
+//var app = express(); // better instead
+//app.use(express.static(__dirname));
+
+//app.listen(3000);

html/coffee/main.coffee

@@ -0,0 +1,43 @@
+BOOTSTRAP_SM_MAX_WIDTH = 767
+PAGE_SIZE = 4
+
+START_PAGE = 1
+page = 1
+
+@change_teachers_show = (target_page, width)->
+  width = jQuery(window).width() unless width
+  if width <= BOOTSTRAP_SM_MAX_WIDTH
+    jQuery(".home-teachers-content .paginate-content").removeClass "hidden"
+  else
+    jQuery(".home-teachers-content .paginate-content").addClass "hidden"
+    count = jQuery(".home-teachers-content .paginate-content").length
+    max_page = parseInt(count / PAGE_SIZE)
+    max_page += 1 if count % PAGE_SIZE
+
+    target_page = max_page if target_page > max_page
+    target_page = 1 if target_page < 1
+
+    page = target_page
+
+    max = PAGE_SIZE * target_page - 1
+    min = PAGE_SIZE * (target_page - 1)
+
+    jQuery(".home-teachers-content .paginate-content")[min..max].removeClass "hidden"
+
+jQuery(document).on 'ready page:load', ->
+  if jQuery(".page-home").length
+    # 初始化
+    change_teachers_show START_PAGE, jQuery(window).width()
+
+    # 绑定翻页
+    $home_teachers = jQuery(".home-teachers")
+    $home_teachers.on "click", ".prev", ->
+      console.log 'click prev'
+      change_teachers_show page - 1
+    $home_teachers.on "click", ".next", ->
+      console.log 'click next'
+      change_teachers_show page + 1
+
+    # 绑定窗口变化
+    jQuery(window).resize ->
+      change_teachers_show page, jQuery(window).width()

html/coffee/sign_in_and_sign_up.coffee

@@ -0,0 +1,7 @@
+@open_login = ->
+  jQuery("#signTab a:first").tab("show")
+  jQuery("#modalLogin").modal("show")
+
+@open_reg = ->
+  jQuery("#signTab a:last").tab("show")
+  jQuery("#modalLogin").modal("show")

html/css/jquery.jcrop.min.css

@@ -0,0 +1,60 @@
+/* jquery.Jcrop.min.css v0.9.12 (build:20130126) */
+.jcrop-holder{direction:ltr;text-align:left;}
+.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif);font-size:0;position:absolute;}
+.jcrop-vline{height:100%;width:1px!important;}
+.jcrop-vline.right{right:0;}
+.jcrop-hline{height:1px!important;width:100%;}
+.jcrop-hline.bottom{bottom:0;}
+.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
+.jcrop-handle{background-color:#333;border:1px #EEE solid;font-size:1px;height:7px;width:7px;}
+.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
+.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
+.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
+.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
+.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
+.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
+.jcrop-dragbar.ord-n{margin-top:-4px;}
+.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
+.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
+.jcrop-dragbar.ord-w{margin-left:-4px;}
+.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:alpha(opacity=70)!important;opacity:.70!important;}
+.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
+.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important;}
+.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
+.solid-line .jcrop-vline,.solid-line .jcrop-hline{background:#FFF;}
+.jcrop-holder img,img.jcrop-preview{max-width:none;}
+.jcrop-keymgr{display: none;z-index: -1;position: absolute;}
+ #preview-pane {
+  display: block;
+  position: absolute;
+  z-index: 2000;
+  top: 10px;
+  right: 10px;
+  padding: 4px;
+  border: 1px rgba(0,0,0,.4) solid;
+  background-color: white;
+
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 1px;
+
+  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* The Javascript code will set the aspect ratio of the crop
+   area based on the size of the thumbnail preview,
+   specified here */
+#preview-pane .preview-container {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  padding: 0;
+}
+#preview-pane .jcrop-preview{max-width:none;}
+

html/gulpfile.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var coffee = require("gulp-coffee");
+var server = require('gulp-express');
+
+gulp.task('sass', function () {
+  return gulp.src('./scss/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./css'));
+});
+
+gulp.task('coffee', function() {
+  return gulp.src('./coffee/*.coffee')
+    .pipe(coffee({bare: true}))
+    .pipe(gulp.dest('./js/'));
+});
+
+gulp.task('js', function() {
+  return gulp.src('./coffee/*.js')
+    .pipe(gulp.dest('./js/'));
+});
+
+gulp.task('css', function() {
+  return gulp.src('./scss/*.css')
+    .pipe(gulp.dest('./css'));
+});
+
+gulp.task('watch', function () {
+  gulp.watch('./scss/**/*.scss', ['sass']);
+  gulp.watch('./scss/**/*.css', ['css']);
+  gulp.watch('./coffee/*.coffee', ['coffee']);
+  gulp.watch('./coffee/*.js', ['js']);
+});
+
+gulp.task('server', function () {
+    // Start the server at the beginning of the task 
+    server.run(['app.js']);
+
+    // Restart the server when file changes 
+    gulp.watch(['./**/*.html'], server.notify);
+
+    //gulp.watch(['js/**/*.js'], ['jshint']);
+    gulp.watch(['img/**/*'], server.notify);
+    //gulp.watch(['app.js', 'routes/**/*.js'], [server.run]);
+});
+
+gulp.task('default', ['watch', 'coffee', 'js', 'sass', 'css']);//, 'server']);

html/index.html

@@ -39,10 +39,10 @@
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">
             <li>
-              <a href="#">登录</a>
+              <a href="#" onclick="open_login()">登录</a>
             </li>
             <li>
-              <a href="#">注册</a>
+              <a href="#" onclick="open_reg()">注册</a>
             </li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
@@ -195,11 +195,142 @@ <h3>集智AI学园</h3>
         </div>
       </div>
     </footer>
+
+    <!--登录-->
+    <div class="modal fade custom-modal" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+          <div class="bs-example bs-example-tabs">
+            <ul id="signTab" class="nav nav-tabs links">
+              <li class="active"><a href="#signin" data-toggle="tab">登录学院</a></li>
+              <li class=""><a href="#signup" data-toggle="tab">加入学院</a></li>
+            </ul>
+          </div>
+          <div class="modal-body">
+            <div id="signTabContent" class="tab-content">
+              <div class="tab-pane fade active in" id="signin">
+                <form class="form-horizontal">
+                  <fieldset>
+                    <!-- Sign In Form -->
+
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                        </div>
+                        <input type="text" class="form-control" placeholder="用户名/手机号/邮箱" name="login">
+                      </div>
+                    </div>
+
+                    <!-- Password input-->
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
+                        </div>
+                        <input type="password" class="form-control" placeholder="请输入密码" name="password">
+                      </div>
+                    </div>
+
+
+                    <!-- Button -->
+                    <div class="control-group part">
+                      <div class="controls">
+                        <button id="btn-signin" class="btn btn-block" type="button">登录</button>
+                      </div>
+                    </div>
+                  </fieldset>
+                </form>
+                <a href="#" class="forget">忘记密码?</a>
+                <div class="clearfix">
+                </div>
+              </div>
+
+              <div class="tab-pane fade" id="signup">
+                <form class="form-horizontal">
+                  <fieldset>
+                    <!-- Sign Up Form -->
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                        </div>
+                        <input type="text" class="form-control" placeholder="输入用户名" name="name">
+                      </div>
+                    </div>
+
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
+                        </div>
+                        <input type="text" class="form-control" placeholder="输入手机号码" name="phone">
+                      </div>
+                    </div>
+
+                    <div class="control-group part">
+                      <div class="form-inline">
+                        <div class="form-group" id="group-verify">
+                          <input type="text" class="form-control" placeholder="输入验证码" name="phone">
+                          <button class="btn btn-default" type="button">发送验证码</button>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
+                        </div>
+                        <input type="text" class="form-control" placeholder="输入微信号码" name="wechat">
+                      </div>
+                    </div>
+
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
+                        </div>
+                        <input type="password" class="form-control" placeholder="请输入密码" name="password">
+                      </div>
+                    </div>
+
+                    <div class="control-group part">
+                      <div class="input-group">
+                        <div class="input-group-addon">
+                          <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
+                        </div>
+                        <input type="password" class="form-control" placeholder="在次输入密码" name="password-confirm">
+                      </div>
+                    </div>
+
+                    <!-- Button -->
+                    <div class="control-group part">
+                      <label class="control-label" for="confirmsignup"></label>
+                      <div class="controls">
+                        <button id="confirmsignup" name="confirmsignup" class="btn btn-block" type="button">注册</button>
+                      </div>
+                    </div>
+                  </fieldset>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="div-close">
+            <a href="javascript:;" data-dismiss="modal">
+              <img src="/img/close.png" alt="close" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
 
       <script src="js/vendor/bootstrap.min.js"></script>
 
       <script src="js/main.js"></script>
+      <script src="js/sign_in_and_sign_up.js"></script>
     </body>
   </html>