diff --git a/public/vendor/plugins/jquery.particleground/jquery.particleground.min.js b/public/vendor/plugins/jquery.particleground/jquery.particleground.min.js
new file mode 100644
index 000000000..dca1f0b44
--- /dev/null
+++ b/public/vendor/plugins/jquery.particleground/jquery.particleground.min.js
@@ -0,0 +1,16 @@
+/*!
+ * Particleground
+ *
+ * @author Jonathan Nicol - @mrjnicol
+ * @version 1.1.0
+ * @description Creates a canvas based particle system background
+ *
+ * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
+ */
+!function(a,b){"use strict";function c(a){a=a||{};for(var b=1;b<arguments.length;b++){var c=arguments[b];if(c)for(var d in c)c.hasOwnProperty(d)&&("object"==typeof c[d]?deepExtend(a[d],c[d]):a[d]=c[d])}return a}function d(d,g){function h(){if(y){r=b.createElement("canvas"),r.className="pg-canvas",r.style.display="block",d.insertBefore(r,d.firstChild),s=r.getContext("2d"),i();for(var c=Math.round(r.width*r.height/g.density),e=0;c>e;e++){var f=new n;f.setStackPos(e),z.push(f)}a.addEventListener("resize",function(){k()},!1),b.addEventListener("mousemove",function(a){A=a.pageX,B=a.pageY},!1),D&&!C&&a.addEventListener("deviceorientation",function(){F=Math.min(Math.max(-event.beta,-30),30),E=Math.min(Math.max(-event.gamma,-30),30)},!0),j(),q("onInit")}}function i(){r.width=d.offsetWidth,r.height=d.offsetHeight,s.fillStyle=g.dotColor,s.strokeStyle=g.lineColor,s.lineWidth=g.lineWidth}function j(){if(y){u=a.innerWidth,v=a.innerHeight,s.clearRect(0,0,r.width,r.height);for(var b=0;b<z.length;b++)z[b].updatePosition();for(var b=0;b<z.length;b++)z[b].draw();G||(t=requestAnimationFrame(j))}}function k(){i();for(var a=d.offsetWidth,b=d.offsetHeight,c=z.length-1;c>=0;c--)(z[c].position.x>a||z[c].position.y>b)&&z.splice(c,1);var e=Math.round(r.width*r.height/g.density);if(e>z.length)for(;e>z.length;){var f=new n;z.push(f)}else e<z.length&&z.splice(e);for(c=z.length-1;c>=0;c--)z[c].setStackPos(c)}function l(){G=!0}function m(){G=!1,j()}function n(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*r.width),y:Math.ceil(Math.random()*r.height)},this.speed={},g.directionX){case"left":this.speed.x=+(-g.maxSpeedX+Math.random()*g.maxSpeedX-g.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*g.maxSpeedX+g.minSpeedX).toFixed(2);break;default:this.speed.x=+(-g.maxSpeedX/2+Math.random()*g.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?g.minSpeedX:-g.minSpeedX}switch(g.directionY){case"up":this.speed.y=+(-g.maxSpeedY+Math.random()*g.maxSpeedY-g.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*g.maxSpeedY+g.minSpeedY).toFixed(2);break;default:this.speed.y=+(-g.maxSpeedY/2+Math.random()*g.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?g.minSpeedY:-g.minSpeedY}}function o(a,b){return b?void(g[a]=b):g[a]}function p(){console.log("destroy"),r.parentNode.removeChild(r),q("onDestroy"),f&&f(d).removeData("plugin_"+e)}function q(a){void 0!==g[a]&&g[a].call(d)}var r,s,t,u,v,w,x,y=!!b.createElement("canvas").getContext,z=[],A=0,B=0,C=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),D=!!a.DeviceOrientationEvent,E=0,F=0,G=!1;return g=c({},a[e].defaults,g),n.prototype.draw=function(){s.beginPath(),s.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,g.particleRadius/2,0,2*Math.PI,!0),s.closePath(),s.fill(),s.beginPath();for(var a=z.length-1;a>this.stackPos;a--){var b=z[a],c=this.position.x-b.position.x,d=this.position.y-b.position.y,e=Math.sqrt(c*c+d*d).toFixed(2);e<g.proximity&&(s.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY),g.curvedLines?s.quadraticCurveTo(Math.max(b.position.x,b.position.x),Math.min(b.position.y,b.position.y),b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY):s.lineTo(b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY))}s.stroke(),s.closePath()},n.prototype.updatePosition=function(){if(g.parallax){if(D&&!C){var a=(u-0)/60;w=(E- -30)*a+0;var b=(v-0)/60;x=(F- -30)*b+0}else w=A,x=B;this.parallaxTargX=(w-u/2)/(g.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10,this.parallaxTargY=(x-v/2)/(g.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}var c=d.offsetWidth,e=d.offsetHeight;switch(g.directionX){case"left":this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=c-this.parallaxOffsetX);break;case"right":this.position.x+this.speed.x+this.parallaxOffsetX>c&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>c||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(g.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=e-this.parallaxOffsetY);break;case"down":this.position.y+this.speed.y+this.parallaxOffsetY>e&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>e||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},n.prototype.setStackPos=function(a){this.stackPos=a},h(),{option:o,destroy:p,start:m,pause:l}}var e="particleground",f=a.jQuery;a[e]=function(a,b){return new d(a,b)},a[e].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){},onDestroy:function(){}},f&&(f.fn[e]=function(a){if("string"==typeof arguments[0]){var b,c=arguments[0],g=Array.prototype.slice.call(arguments,1);return this.each(function(){f.data(this,"plugin_"+e)&&"function"==typeof f.data(this,"plugin_"+e)[c]&&(b=f.data(this,"plugin_"+e)[c].apply(this,g))}),void 0!==b?b:this}return"object"!=typeof a&&a?void 0:this.each(function(){f.data(this,"plugin_"+e)||f.data(this,"plugin_"+e,new d(this,a))})})}(window,document),/**
+ * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+ * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+ * @license: MIT license
+ */
+function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})}();
\ No newline at end of file
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 07cbba706..b14800401 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -37,7 +37,9 @@
 {{if .RequireTribute}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.min.js"></script>
 {{end}}
-
+{{if .PageIsHome}}
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.particleground/jquery.particleground.min.js">
+{{end}}
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{template "custom/footer" .}}
diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl
index 8e11abcf4..e69de29bb 100644
--- a/templates/custom/header.tmpl
+++ b/templates/custom/header.tmpl
@@ -1,3 +0,0 @@
-<!--新增OpenI样式文件-->
-	<link rel="stylesheet" href="/css/openi.css?v={{MD5 AppVer}}">
-	<script type="text/javascript" src="/js/jquery.particleground.min.js"></script>
\ No newline at end of file
diff --git a/web_src/js/index.js b/web_src/js/index.js
index f96123c5b..05851707a 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2405,7 +2405,7 @@ $(document).ready(async () => {
       dictInvalidFileType: $dataset.data('invalid-input-type'),
       dictFileTooBig: $dataset.data('file-too-big'),
       dictRemoveFile: $dataset.data('remove-file'),
-      timeout: 3600000,
+      timeout: 18000000,
       previewTemplate,
       init() {
         this.on('sending', (_file, _xhr, formData) => {
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 10af0bff1..c53ae61d4 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -18,3 +18,4 @@
 @import "_explore";
 @import "_review";
 @import "_dataset";
+@import "openi";
diff --git a/web_src/less/openi.less b/web_src/less/openi.less
new file mode 100644
index 000000000..3f880a7e3
--- /dev/null
+++ b/web_src/less/openi.less
@@ -0,0 +1,218 @@
+.ui .text.yellow a {
+	color: #fbbd08!important
+}
+.ui .text.yellow a:hover {
+	color: #f2711c!important
+}
+
+.following.bar #navbar .brand{
+	padding-left: 0;
+}
+.following.bar .brand .ui.mini.image {
+    width: auto;
+    height: 30px;
+}
+
+.following.bar.dark {
+	background-color: #001F4A;
+}
+.ui.secondary.menu.dark .item{
+	color: #E5FAFF;
+}
+.ui.secondary.menu.dark .item:hover{
+	color: #40A9FF;
+}
+.ui.secondary.menu .active.item{
+	color: #40A9FF;
+	border-bottom: 1px solid #40A9FF;
+	border-radius: 0;
+}
+
+.repository:not(.new), .organization:not(.new), .explore, .dashboard {
+    padding-top: 0px;
+}
+.dashboard .dashboard-navbar, .organization .organization-header, .explore .repos--seach{
+	padding-top:15px;
+	padding-bottom: 15px;
+	padding-left: 0;
+	margin-bottom: 20px;
+	background-color:#f5f5f6 !important;
+	border-bottom: 1px solid rgba(34,36,38,.15);
+}
+.following.bar .text .svg.octicon-triangle-down {
+    color: #3291F8;
+}
+.ui .avatar.image {
+    border-radius: 30px;
+}
+footer {
+    background-color: #f5f5f6;
+	padding-bottom: 1.0rem;
+}
+
+.repository .header-wrapper {
+    background-color: #f5f5f6;
+    margin-top: 0px;
+}
+
+/*moble*/
+.ui.menu:not(.vertical) .item>.button {
+    color: #FFF;
+	box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset;
+}
+/*PC*/
+@media only screen and (min-width: 1200px){
+.following.bar #navbar{
+    min-height: 80px;
+}
+.following.bar #navbar, footer .container {
+	padding: 0 32px;
+}
+}
+
+/*start page*/
+.ui.header.section--header{
+    font-size: 50px;
+    font-weight: 300;
+    text-align: center;
+    margin-bottom: 1.0em;
+}
+.ui.header.section--header .sub.header {
+    font-size: 20px;
+    line-height: 30px;
+    color: #9b9b9b;
+    text-align: center;
+	color: rgba(255,255,255,.6);
+}
+.ui.inverted.segment>.ui.header.section--header .sub.header{
+	color: rgba(255,255,255,.6);
+}
+
+#index-project {
+    background: #002060;
+    color: #FFF;
+    position: relative;
+    padding-top: 3.0em;
+	padding-bottom:2.0em
+}
+#index-project .ui.inverted.segment, #index-project .ui.primary.inverted.segment{
+	background:none;
+}
+.prorow{
+	background: rgba(0,27,81,0.8);
+}
+
+.flip{
+	position:absolute;
+	left:6px;
+	right:6px;
+	top:6px;
+	bottom:6px;
+	border:2px solid #ffc000;
+	border-radius: 12px;
+	transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+	transform: perspective(800px) rotateY(0deg);
+	transform-style: preserve-3d;
+	z-index:5;
+}
+.flip-more{ border-color:#4472c4}
+.flip-blue{ border-color:#00b0f0}
+.flip-green{ border-color:#00b050}
+#index-project .ipros:hover .flip{transform: perspective(800px) rotateY(180deg);}
+
+#index-project .ui.card{
+	margin:0 auto;
+	background:none;
+	border:none;
+	box-shadow:none;
+}
+#index-project .ui.card>.image>img{
+	width:auto;
+	margin:10px auto;
+}
+#index-project .ui.card>.content, #index-project.ui.cards>.card>.content{
+	padding: 0.5em 0.2em;
+}
+.ui.inverted.segment .ui.card>.content>.header, .ui.inverted.segment .ui.cards>.card>.content>.header{
+	color: rgba(255,255,255,.9);
+}
+.ui.inverted.segment .ui.card .meta, .ui.inverted.segment .ui.cards>.card .meta{
+    color: #5b9bd5;
+}
+.ui.inverted.segment .ui.card>.extra, .ui.inverted.segment .ui.cards>.card>.extra {
+	color: rgba(255,255,255,.4);
+}
+
+#particles{ width: 100%; height:100%; position: absolute; top:0; left:0; right:0; bottom:0;}
+
+footer .ui.vertical.text.menu:first-child{ margin-top: 1em}
+footer .ui.vertical.menu .header.item{ background:none}
+footer .column{margin-bottom:0!important; padding-bottom:0!important;}
+/*explore*/
+.explore .ui.secondary.vertical.pointing.menu,
+.explore .ui.secondary.vertical.pointing.menu .item,
+.organization .ui.secondary.vertical.pointing.menu,
+.organization .ui.secondary.vertical.pointing.menu .item{
+	border-right-width: 0;
+}
+.explore .computer.only .ui.secondary.pointing.menu .item{
+	padding-left:0;
+}
+.ui.repository.list .item .ui.header .metas{
+	text-align: right;
+}
+@media only screen and (max-width:768px){
+.explore .repos--seach{
+	margin-bottom:15px;
+}
+.explore .navbar{
+	padding-top: 0px!important;
+    margin-top: -1.5rem!important;
+}
+}
+/*organization*/
+.organization-info{
+	padding-top:15px;
+	margin-bottom:2.5rem;
+}
+.organization-info > .container{
+	overflow: auto;
+    background: url(/img/org_bg.png) no-repeat center center #f5f5f6;
+    padding-top: 30px;
+	padding-bottom:20px;
+    background-size: cover;
+	border-radius: 5px;
+    border: 1px solid #efefef;
+}
+.organization.profile #org-info .ui.header{
+	font-size: 1.71428571rem;
+    margin-bottom: 10px;
+	font-weight: 400;
+}
+.organization.profile #org-avatar {
+    width: 80px;
+    height: 80px;
+	margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15px;
+    border: solid 5px #FFF;
+}
+.organization.profile #org-info .desc {
+    font-size: 14px;
+    width: 80%;
+    margin: 0 auto 10px;
+    color: #FFF;
+}
+.organization.teams .ui.attached.segment+.ui.attached.header{ margin-top:0}
+@media only screen and (max-width:768px){
+.organization-info{
+	padding-top:0;
+}
+.organization-info > .container{
+	margin-left:0!important;
+	margin-right:0!important;
+}
+}
+.ui.vertical.menu .dropdown.item .menu {
+	left: 50%;
+}