登录功能告一段落，风险监测功能待完成，完成首页, 添加了介绍页

sunkaifei · May 29, 2016 · d8b2642 · d8b2642
1 parent 0c42acd
commit d8b2642
Show file tree

Hide file tree

Showing 63 changed files with 1,267 additions and 239 deletions.
diff --git a/WebRoot/css/carousel.css b/WebRoot/css/carousel.css
@@ -0,0 +1,134 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-bottom: 40px;
+  color: #5a5a5a;
+}
+
+
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+}
+
+/* Flip around the padding for proper display in narrow viewports */
+.navbar-wrapper > .container {
+  padding-right: 0;
+  padding-left: 0;
+}
+.navbar-wrapper .navbar {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.navbar-wrapper .navbar .container {
+  width: auto;
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  height: 500px;
+  margin-bottom: 60px;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+  height: 500px;
+  background-color: #777;
+}
+.carousel-inner > .item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  height: 500px;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  margin-bottom: 20px;
+  text-align: center;
+}
+.marketing h2 {
+  font-weight: normal;
+}
+.marketing .col-lg-4 p {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 80px 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+    margin-top: 20px;
+  }
+  .navbar-wrapper .container {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  .navbar-wrapper .navbar {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
+}
diff --git a/WebRoot/fonts/glyphicons-halflings-regular.eot b/WebRoot/fonts/glyphicons-halflings-regular.eot
diff --git a/WebRoot/fonts/glyphicons-halflings-regular.svg b/WebRoot/fonts/glyphicons-halflings-regular.svg
diff --git a/WebRoot/fonts/glyphicons-halflings-regular.ttf b/WebRoot/fonts/glyphicons-halflings-regular.ttf
diff --git a/WebRoot/fonts/glyphicons-halflings-regular.woff b/WebRoot/fonts/glyphicons-halflings-regular.woff
diff --git a/WebRoot/fonts/glyphicons-halflings-regular.woff2 b/WebRoot/fonts/glyphicons-halflings-regular.woff2
diff --git a/WebRoot/images/CESA.jpg b/WebRoot/images/CESA.jpg
diff --git a/WebRoot/images/Magic-Leap-hed.jpg b/WebRoot/images/Magic-Leap-hed.jpg
diff --git a/WebRoot/images/Microsoft-HoloLens-Skype-RGB.png b/WebRoot/images/Microsoft-HoloLens-Skype-RGB.png
diff --git a/WebRoot/images/car.jpg b/WebRoot/images/car.jpg
diff --git a/WebRoot/images/carousel1.jpg b/WebRoot/images/carousel1.jpg
diff --git a/WebRoot/images/magic-leap-everest.jpg b/WebRoot/images/magic-leap-everest.jpg
diff --git a/WebRoot/images/magic_leap_solar.jpg b/WebRoot/images/magic_leap_solar.jpg
diff --git a/WebRoot/images/microsoft_hololens_earth.jpg b/WebRoot/images/microsoft_hololens_earth.jpg
diff --git a/WebRoot/images/microsoft_hololens_me.jpg b/WebRoot/images/microsoft_hololens_me.jpg
diff --git a/WebRoot/images/mr_global.jpg b/WebRoot/images/mr_global.jpg
diff --git a/WebRoot/images/oculus_rift_blur.jpg b/WebRoot/images/oculus_rift_blur.jpg
diff --git a/WebRoot/images/oculus_rift_hero.jpg b/WebRoot/images/oculus_rift_hero.jpg
diff --git a/WebRoot/index.jsp b/WebRoot/index.jsp
@@ -1,71 +1,166 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!DOCTYPE html>
-<html lang="cn">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <title>首页</title>
-  <link rel="icon" href="favicon.ico">
-  <link href="css/bootstrap.min.css" rel="stylesheet">
-  <link href="css/signin.css" rel="stylesheet">
-
-  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Insert title here</title>
+    <link rel="icon" href="favicon.ico">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/carousel.css" rel="stylesheet">
+    
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="js/html5shiv.min.js"></script>
     <script src="js/respond.min.js"></script>
     <![endif]-->
   </head>
-
+  
   <body>
-    <nav class="navbar navbar-default navbar-fixed-top">
-      <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-            <span class="sr-only">折叠导航栏</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Enter</a>
-        </div>
 
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse" id="navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
-            <li><a href="#">新闻</a></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">产品 <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">产品1</a></li>
-                <li><a href="#">产品2</a></li>
-                <li><a href="#">产品3</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">产品4</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">产品5</a></li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="nav navbar-nav navbar-right">
-            <li><a href="login">登录</a></li>
-            <li><a href="#">注册</a></li>
-          </ul>
-          <form class="navbar-form navbar-right" role="search">
-            <div class="form-group">
-              <input type="text" class="form-control" placeholder="Search">
+    <jsp:include page="navbar.jsp" />
+
+    <!-- Carousel
+    ================================================== -->
+    <div id="myCarousel" class="carousel slide" data-ride="carousel">
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+        <li data-target="#myCarousel" data-slide-to="2"></li>
+      </ol>
+      <div class="carousel-inner" role="listbox">
+        <div class="item active">
+          <img class="first-slide" src="images/oculus_rift_blur.jpg" alt="First slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Oculus Rift</h1>
+              <p>虚拟现实，让你身临其境，让你体验梦里的世界。</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">购买 Oculus Rift</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img class="second-slide" src="images/microsoft_hololens_me.jpg" alt="Second slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Hololens</h1>
+              <p>现在起，曾经想象中一切的都在你身边。</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">购买 Hololens</a></p>
             </div>
-            <button type="submit" class="btn btn-default">搜索</button>
-          </form>
-        </div><!-- /.navbar-collapse -->
-      </div><!-- /.container-fluid -->
-    </nav>
+          </div>
+        </div>
+        <div class="item">
+          <img class="third-slide" src="images/magic_leap_solar.jpg" alt="Third slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Magic leap</h1>
+              <p>和我互动的，不再只有隔壁的王尼玛了。</p>
+              <p><a class="btn btn-lg btn-primary" href="#" role="button">购买 Magic leap</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div><!-- /.carousel -->
+
+    <!-- Marketing messaging and featurettes
+    ================================================== -->
+    <!-- Wrap the rest of the page in another container to center all the content. -->
+
+    <div class="container marketing">
+
+      <!-- START THE FEATURETTES -->
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">CES Asia为VR提供宽阔的展示空间 <span class="text-muted">2016</span></h2>
+          <p class="lead">2016年已经被称之为是虚拟现实元年，而虚拟现实这一概念也在各种巨头的普遍看好下异常火爆，索尼HTC三星谷歌群雄角力，各家的VR产品也是纷纷亮相，并且活跃在各大展会中，成为最引人注目的焦点。而本次的CES Asia展会中，索尼的PS VR和HTC Vive为代表的虚拟现实无疑将会是人们关注的焦点。</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive center-block" src="images/CESA.jpg" alt="Generic placeholder image">
+          <p><a class="btn btn-success btn-lg btn-detail" href="#" role="button">查看详情</a></p>
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7 col-md-push-5">
+          <h2 class="featurette-heading">未来汽车技术：从增强现实玻璃到智能公路 </h2>
+          <p class="lead">汽车平视显示器早在1988年的通用汽车上便已实现，可以带给驾驶者更直观的信息显示，防止交通意外发生。而现在，真正的AR（增强现实）挡风玻璃则成为汽车厂商们的下一个目标。目前，增强现实技术已经得到长足发展，汽车挡风玻璃便是一个非常具有前景的应用形式。驾驶者可以通过挡风玻璃直接看到叠加的信息，如仪表盘等内容，甚至还有望集成红外扫描、智能预测等功能，将汽车传感器收集的数据实时反馈在挡风玻璃上。</p>
+        </div>
+        <div class="col-md-5 col-md-pull-7">
+          <img class="featurette-image img-responsive center-block" src="images/car.jpg" alt="Generic placeholder image">
+          <p><a class="btn btn-success btn-lg btn-detail" href="#" role="button">查看详情</a></p>
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">MR（混合现实）智能头戴显示设备全球巡展启动 </h2>
+          <p class="lead">今天上午，北京微视国人恒宇科技在珠海德瀚国际会议中心酒店的海天一色厅举办的一场《中国首家MR(混合现实)智能头戴显示设备全球巡展启动仪式》，给众多的投资界和广大的消费行业以及各个领域的专家带来了一场别开生面的汇报及发布会，这家专门从事VR(虚拟现实)、AR(增强现实)、MR(混合现实)(以下简称3R) 等专业的人机数字交互领域的科技公司，从航天、教育、军事、体育、工业、旅游、娱乐等六大领域向我们展示了这些高科技技术对于未来的无限可能。</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive center-block" src="images/mr_global.jpg" alt="Generic placeholder image">
+          <p><a class="btn btn-success btn-lg btn-detail" href="#" role="button">查看详情</a></p>
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <!-- /END THE FEATURETTES -->
+
+      <!-- Three columns of text below the carousel -->
+      <div class="row">
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
+          <h2>刘袁梦</h2>
+          <p>CEO</p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
+          <h2>黄惠娥</h2>
+          <p>CFO</p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
+          <h2>李思彤</h2>
+          <p>PM</p>
+        </div><!-- /.col-lg-4 -->
+      </div><!-- /.row -->
+
+      <!-- FOOTER -->
+      <footer>
+        <p class="pull-right"><a href="#">返回顶部</a></p>
+        <p>&copy; 2016 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+      </footer>
+
+    </div><!-- /.container -->
+
+    <style type="text/css">
+    .btn-detail {
+      width: 60%;
+      margin-top: 20%;
+      margin-left: 20%
+    }
+    </style>
 
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="js/ie10-viewport-bug-workaround.js"></script>
-
+    
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
   </body>

diff --git a/WebRoot/intro.jsp b/WebRoot/intro.jsp
@@ -0,0 +1,35 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Insert title here</title>
+    <link rel="icon" href="favicon.ico">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="js/html5shiv.min.js"></script>
+    <script src="js/respond.min.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+
+    <jsp:include page="navbar.jsp" />
+
+    <div class="container">
+        <div class="embed-responsive embed-responsive-16by9">
+            <iframe class="embed-responsive-item" src="video/Introducing the Games Coming to Oculus!.mp4"></iframe>
+        </div>
+    </div>
+
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="js/ie10-viewport-bug-workaround.js"></script>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</html>