diff --git a/.gitignore b/.gitignore
index f520ba2..5cfc432 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ rev-manifest.json
 /package-lock.json
 /dist.tar.gz
 /roms
+/dist
diff --git a/assets/product.jpg b/assets/product.jpg
new file mode 100644
index 0000000..6e51aac
Binary files /dev/null and b/assets/product.jpg differ
diff --git a/assets/vip.jpg b/assets/vip.jpg
new file mode 100644
index 0000000..da65b3d
Binary files /dev/null and b/assets/vip.jpg differ
diff --git a/fc/dist/gbajs.min.css b/fc/css/gbajs.css
similarity index 94%
rename from fc/dist/gbajs.min.css
rename to fc/css/gbajs.css
index deaf422..63d067f 100644
--- a/fc/dist/gbajs.min.css
+++ b/fc/css/gbajs.css
@@ -1,548 +1,548 @@
-@charset "utf-8";
-	a,mark {
-	color:inherit
-}
-html {
-	color:#000;
-	background:#fff;
-	font-family:Arial,'Microsoft YaHei';
-	font-size:34px;
-	-webkit-user-select:none;
-	user-select:none;
-	-webkit-overflow-scrolling:touch
-}
-body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,strong,td,textarea,th,ul {
-	padding:0;
-	margin:0
-}
-table {
-	border-collapse:collapse;
-	border-spacing:0
-}
-img {
-	display:block;
-	border:0;
-	max-width:100%
-}
-a {
-	text-decoration:none;
-	outline:0
-}
-em,i,strong {
-	font-style:inherit;
-	font-weight:inherit
-}
-li {
-	list-style:none
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size:100%;
-	font-weight:400
-}
-button,input,optgroup,option,select,textarea {
-	font-family:inherit;
-	font-size:inherit;
-	font-style:inherit;
-	font-weight:inherit
-}
-mark {
-	background-color:rgba(0,0,0,0)
-}
-.clearfix:after {
-	content:"\200B";
-	display:block;
-	height:0;
-	clear:both
-}
-.none,[v-cloak] {
-	display:none
-}
-.dire-wrap,.key-wrap {
-	display:inline-block;
-	overflow:hidden;
-	will-change:auto;
-	contain:style;
-	backface-visibility:hidden
-}
-.mask {
-	position:fixed;
-	width:100%;
-	height:100%;
-	left:0;
-	top:0;
-	z-index:95;
-	background:rgba(0,0,0,.7)
-}
-.tx_ov {
-	overflow:hidden;
-	white-space:nowrap;
-	text-overflow:ellipsis
-}
-.tx_wrap {
-	word-break:break-all;
-	word-wrap:break-word
-}
-body {
-	background:#000
-}
-.dc-centre,.dc-dire,.dire-ctrl,.key-btn {
-	background-size:100% 100%
-}
-#screen {
-	position:absolute;
-	width:256px;
-	height:240px;
-	top:calc((100vh + 50px - 256px)/ 2);
-	right: 240px;
-	transform:scale(3.3333,3.3333) rotate(90deg);
-	border:none;
-	overflow:hidden
-}
-.ctrl-wrap {
-	position:fixed;
-	height:100vh;
-	width:100%;
-	top:0;
-	left:0
-}
-.dc-centre,.dc-dire,.dire-ctrl,.dire-wrap,.key-btn,.key-wrap {
-	position:absolute
-}
-.dire-wrap {
-	width:390px;
-	height:390px;
-	top:-40px;
-	left:-12px
-}
-.dire-ctrl {
-	width:290px;
-	height:290px;
-	margin:50px;
-	background-image:url(../resources/7.png);
-	overflow:hidden
-}
-.dc-centre {
-	width:124px;
-	height:124px;
-	background-image:url(../resources/8.png);
-	will-change:auto;
-	contain:style
-}
-.dc-dire {
-	width:384px;
-	height:384px;
-	margin:3px;
-	background-image:url(../resources/9.png);
-	will-change:auto;
-	contain:style
-}
-.key-wrap {
-	width:100vw;
-	height:390px;
-	bottom:0;
-	left:10px
-}
-.key-btn {
-	width:150px;
-	height:150px;
-	line-height:150px;
-	text-align:center;
-	font-size:56px;
-	transform:rotate(90deg);
-	font-weight:700;
-	color:rgba(255,255,255,.5);
-	opacity:.5;
-	background-image:url(../resources/8.png)
-}
-.key-btn.kay-B {
-	top:88px;
-	left:80px;
-	opacity:.7
-}
-.key-btn.kay-A {
-	top:220px;
-	left:10px;
-	opacity:.7
-}
-.key-btn.kay-Y {
-	top:88px;
-	left:232px
-}
-.key-btn.kay-X {
-	top:256px;
-	left:162px
-}
-.key-btn.kay-AB {
-	top:220px;
-	left:232px
-}
-.key-btn.flat-btn {
-	width:120px;
-	height:80px;
-	font-size:30px;
-	line-height:80px
-}
-.key-btn.kay-SE {
-	top:120px;
-	right:0
-}
-.key-btn.kay-ST {
-	top:260px;
-	right:0
-}
-.btn-on {
-	transform:scale(.9,.9) rotate(90deg)
-}
-.layui-m-layer {
-	position:relative;
-	z-index:19891014
-}
-.layui-m-layer * {
-	-webkit-box-sizing:content-box;
-	-moz-box-sizing:content-box;
-	box-sizing:content-box
-}
-.layui-m-layermain,.layui-m-layershade {
-	position:fixed;
-	left:0;
-	top:0;
-	width:100%;
-	height:100%
-}
-.layui-m-layershade {
-	background-color:rgba(0,0,0,.7);
-	pointer-events:auto
-}
-.layui-m-layermain {
-	display:table;
-	pointer-events:none
-}
-.layui-m-layermain .layui-m-layersection {
-	display:table-cell;
-	vertical-align:middle;
-	text-align:center
-}
-.layui-m-layerchild {
-	position:relative;
-	display:inline-block;
-	text-align:left;
-	background-color:#fff;
-	font-size:2.6vh;
-	border-radius:20px;
-	box-shadow:0 0 8px rgba(0,0,0,.1);
-	pointer-events:auto;
-	-webkit-overflow-scrolling:touch;
-	-webkit-animation-fill-mode:both;
-	animation-fill-mode:both;
-	-webkit-animation-duration:.2s;
-	animation-duration:.2s
-}
-@-webkit-keyframes layui-m-anim-scale {
-	0% {
-	opacity:0;
-	-webkit-transform:scale(.5);
-	transform:scale(.5)
-}
-100% {
-	opacity:1;
-	-webkit-transform:scale(1);
-	transform:scale(1)
-}
-}@keyframes layui-m-anim-scale {
-	0% {
-	opacity:0;
-	-webkit-transform:scale(.5);
-	transform:scale(.5)
-}
-100% {
-	opacity:1;
-	-webkit-transform:scale(1);
-	transform:scale(1)
-}
-}.layui-m-anim-scale {
-	animation-name:layui-m-anim-scale;
-	-webkit-animation-name:layui-m-anim-scale
-}
-@-webkit-keyframes layui-m-anim-up {
-	0% {
-	opacity:0;
-	-webkit-transform:translateY(1600px);
-	transform:translateY(1600px)
-}
-100% {
-	opacity:1;
-	-webkit-transform:translateY(0);
-	transform:translateY(0)
-}
-}@keyframes layui-m-anim-up {
-	0% {
-	opacity:0;
-	-webkit-transform:translateY(1600px);
-	transform:translateY(1600px)
-}
-100% {
-	opacity:1;
-	-webkit-transform:translateY(0);
-	transform:translateY(0)
-}
-}.layui-m-anim-up {
-	-webkit-animation-name:layui-m-anim-up;
-	animation-name:layui-m-anim-up
-}
-.layui-m-layer0 .layui-m-layerchild {
-	width:70%
-}
-.layui-m-layer1 .layui-m-layerchild {
-	border:none;
-	border-radius:0
-}
-.layui-m-layer2 .layui-m-layerchild {
-	width:15vh;
-	border:none;
-	padding:35px 0;
-	box-shadow:none;
-	color:#fff;
-	background-color:rgba(0,0,0,.7)
-}
-.layui-m-layerchild h3 {
-	padding:0 5%;
-	height:7.5vh;
-	line-height:7.5vh;
-	font-size:2.8vh;
-	font-weight:400;
-	border-radius:20px 20px 0 0;
-	text-align:center;
-	border-bottom:1px solid #E0E0E0
-}
-.layui-m-layerbtn span,.layui-m-layerchild h3 {
-	text-overflow:ellipsis;
-	overflow:hidden;
-	white-space:nowrap
-}
-.layui-m-layercont {
-	padding:8% 10%;
-	line-height:4vh;
-	text-align:center
-}
-.layui-m-layer1 .layui-m-layercont {
-	padding:0;
-	text-align:left
-}
-.layui-m-layer2 .layui-m-layercont {
-	text-align:center;
-	padding:0;
-	line-height:0
-}
-.layui-m-layer2 .layui-m-layercont i {
-	width:3vh;
-	height:3vh;
-	margin-left:1vh;
-	display:inline-block;
-	background-color:#fff;
-	border-radius:100%;
-	-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;
-	animation:layui-m-anim-loading 1.4s infinite ease-in-out;
-	-webkit-animation-fill-mode:both;
-	animation-fill-mode:both
-}
-.layui-m-layerbtn,.layui-m-layerbtn span {
-	position:relative;
-	text-align:center;
-	border-radius:0 0 20px 20px
-}
-.layui-m-layer2 .layui-m-layercont p {
-	margin-top:2vh;
-	font-size:2.5vh
-}
-@-webkit-keyframes layui-m-anim-loading {
-	0%,100%,80% {
-	transform:scale(0);
-	-webkit-transform:scale(0)
-}
-40% {
-	transform:scale(1);
-	-webkit-transform:scale(1)
-}
-}@keyframes layui-m-anim-loading {
-	0%,100%,80% {
-	transform:scale(0);
-	-webkit-transform:scale(0)
-}
-40% {
-	transform:scale(1);
-	-webkit-transform:scale(1)
-}
-}.layui-m-layer2 .layui-m-layercont i:first-child {
-	margin-left:0;
-	-webkit-animation-delay:-.32s;
-	animation-delay:-.32s
-}
-.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
-	-webkit-animation-delay:-.16s;
-	animation-delay:-.16s
-}
-.layui-m-layer2 .layui-m-layercont>div {
-	line-height:3.3vh;
-	padding-top:14px;
-	margin-bottom:40px;
-	font-size:3vh
-}
-.layui-m-layerbtn {
-	display:block;
-	display:-moz-box;
-	display:-webkit-box;
-	width:100%;
-	height:7.5vh;
-	line-height:7.5vh;
-	font-size:0;
-	border-top:1px solid #ddd;
-	background-color:#FFF
-}
-.layui-m-layerbtn span {
-	display:block;
-	-moz-box-flex:1;
-	box-flex:1;
-	-webkit-box-flex:1;
-	font-size:2.8vh;
-	cursor:pointer;
-	color:#0084ff
-}
-.layui-m-layerbtn span[yes] {
-	border-radius:0 0 20px
-}
-.layui-m-layerbtn span[no] {
-	border-right:1px solid #ddd;
-	border-radius:0 0 0 20px
-}
-.layui-m-layerbtn span:active {
-	background-color:#F6F6F6
-}
-.layui-m-layerend {
-	position:absolute;
-	right:14px;
-	top:20px;
-	width:60px;
-	height:60px;
-	border:0;
-	font-weight:400;
-	background:0 0;
-	cursor:pointer;
-	-webkit-appearance:none;
-	font-size:6vh
-}
-.layui-m-layerend::after,.layui-m-layerend::before {
-	position:absolute;
-	left:10px;
-	top:30px;
-	content:'';
-	width:18px;
-	height:1px;
-	background-color:#999;
-	transform:rotate(45deg);
-	-webkit-transform:rotate(45deg);
-	border-radius:12px
-}
-.layui-m-layerend::after {
-	transform:rotate(-45deg);
-	-webkit-transform:rotate(-45deg)
-}
-body .layui-m-layer .layui-m-layer-footer {
-	position:fixed;
-	width:95%;
-	max-width:100%;
-	margin:0 auto;
-	left:0;
-	right:0;
-	bottom:20px;
-	background:0 0
-}
-.layui-m-layer-footer .layui-m-layercont {
-	padding:20px;
-	border-radius:20px 20px 0 0;
-	background-color:rgba(255,255,255,.8)
-}
-.layui-m-layer-footer .layui-m-layerbtn {
-	display:block;
-	height:auto;
-	background:0 0;
-	border-top:none
-}
-.layui-m-layer-footer .layui-m-layerbtn span {
-	background-color:rgba(255,255,255,.8)
-}
-.layui-m-layer-footer .layui-m-layerbtn span[no] {
-	color:#FD482C;
-	border-top:1px solid #c2c2c2;
-	border-radius:0 0 20px 20px
-}
-.layui-m-layer-footer .layui-m-layerbtn span[yes] {
-	margin-top:20px;
-	border-radius:20px
-}
-body .layui-m-layer .layui-m-layer-msg {
-	width:auto;
-	max-width:90%;
-	margin:0 auto;
-	background-color:rgba(0,0,0,.7);
-	color:#fff
-}
-.layui-m-layer-msg .layui-m-layercont {
-	padding:20px 40px;
-	font-size:2.8vh
-}
-/*html, body {
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    cursor: none;
-}
-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}*/
-/*span {
-    color: red;
-    bottom: 0px;
-    position: absolute;
-    right: 0px;
-    display: none;
-    font-size: 40pt;
-    font-weight: bold;
-    text-align: right;
-    vertical-align: bottom;
-    font-family: monospace;
-    display:none;
-}*/
-.background-div{
-  position: fixed;
-  background-color: #000;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-.info-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 110vw;
-  height: 250vw;
-  background-color: #000;
-  overflow-x: hidden;
-	overflow-y: auto;
-  background-image:url(../resources/invite-mask.jpg);
-  background-repeat:no-repeat;
-  background-size: 100%
-}
-#mask-img {
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-}
-.container::-webkit-scrollbar {
-    display: none; //Safari and Chrome
-}
+@charset "utf-8";
+	a,mark {
+	color:inherit
+}
+html {
+	color:#000;
+	background:#fff;
+	font-family:Arial,'Microsoft YaHei';
+	font-size:34px;
+	-webkit-user-select:none;
+	user-select:none;
+	-webkit-overflow-scrolling:touch
+}
+body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,strong,td,textarea,th,ul {
+	padding:0;
+	margin:0
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0
+}
+img {
+	display:block;
+	border:0;
+	max-width:100%
+}
+a {
+	text-decoration:none;
+	outline:0
+}
+em,i,strong {
+	font-style:inherit;
+	font-weight:inherit
+}
+li {
+	list-style:none
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:400
+}
+button,input,optgroup,option,select,textarea {
+	font-family:inherit;
+	font-size:inherit;
+	font-style:inherit;
+	font-weight:inherit
+}
+mark {
+	background-color:rgba(0,0,0,0)
+}
+.clearfix:after {
+	content:"\200B";
+	display:block;
+	height:0;
+	clear:both
+}
+.none,[v-cloak] {
+	display:none
+}
+.dire-wrap,.key-wrap {
+	display:inline-block;
+	overflow:hidden;
+	will-change:auto;
+	contain:style;
+	backface-visibility:hidden
+}
+.mask {
+	position:fixed;
+	width:100%;
+	height:100%;
+	left:0;
+	top:0;
+	z-index:95;
+	background:rgba(0,0,0,.7)
+}
+.tx_ov {
+	overflow:hidden;
+	white-space:nowrap;
+	text-overflow:ellipsis
+}
+.tx_wrap {
+	word-break:break-all;
+	word-wrap:break-word
+}
+body {
+	background:#000
+}
+.dc-centre,.dc-dire,.dire-ctrl,.key-btn {
+	background-size:100% 100%
+}
+#screen {
+	position:absolute;
+	width:256px;
+	height:240px;
+	top:calc((100vh + 50px - 256px)/ 2);
+	right: 240px;
+	transform:scale(3.3333,3.3333) rotate(90deg);
+	border:none;
+	overflow:hidden
+}
+.ctrl-wrap {
+	position:fixed;
+	height:100vh;
+	width:100%;
+	top:0;
+	left:0
+}
+.dc-centre,.dc-dire,.dire-ctrl,.dire-wrap,.key-btn,.key-wrap {
+	position:absolute
+}
+.dire-wrap {
+	width:390px;
+	height:390px;
+	top:-40px;
+	left:-12px
+}
+.dire-ctrl {
+	width:290px;
+	height:290px;
+	margin:50px;
+	background-image:url(../resources/7.png);
+	overflow:hidden
+}
+.dc-centre {
+	width:124px;
+	height:124px;
+	background-image:url(../resources/8.png);
+	will-change:auto;
+	contain:style
+}
+.dc-dire {
+	width:384px;
+	height:384px;
+	margin:3px;
+	background-image:url(../resources/9.png);
+	will-change:auto;
+	contain:style
+}
+.key-wrap {
+	width:100vw;
+	height:390px;
+	bottom:0;
+	left:10px
+}
+.key-btn {
+	width:150px;
+	height:150px;
+	line-height:150px;
+	text-align:center;
+	font-size:56px;
+	transform:rotate(90deg);
+	font-weight:700;
+	color:rgba(255,255,255,.5);
+	opacity:.5;
+	background-image:url(../resources/8.png)
+}
+.key-btn.kay-B {
+	top:88px;
+	left:80px;
+	opacity:.7
+}
+.key-btn.kay-A {
+	top:220px;
+	left:10px;
+	opacity:.7
+}
+.key-btn.kay-Y {
+	top:88px;
+	left:232px
+}
+.key-btn.kay-X {
+	top:256px;
+	left:162px
+}
+.key-btn.kay-AB {
+	top:220px;
+	left:232px
+}
+.key-btn.flat-btn {
+	width:120px;
+	height:80px;
+	font-size:30px;
+	line-height:80px
+}
+.key-btn.kay-SE {
+	top:120px;
+	right:0
+}
+.key-btn.kay-ST {
+	top:260px;
+	right:0
+}
+.btn-on {
+	transform:scale(.9,.9) rotate(90deg)
+}
+.layui-m-layer {
+	position:relative;
+	z-index:19891014
+}
+.layui-m-layer * {
+	-webkit-box-sizing:content-box;
+	-moz-box-sizing:content-box;
+	box-sizing:content-box
+}
+.layui-m-layermain,.layui-m-layershade {
+	position:fixed;
+	left:0;
+	top:0;
+	width:100%;
+	height:100%
+}
+.layui-m-layershade {
+	background-color:rgba(0,0,0,.7);
+	pointer-events:auto
+}
+.layui-m-layermain {
+	display:table;
+	pointer-events:none
+}
+.layui-m-layermain .layui-m-layersection {
+	display:table-cell;
+	vertical-align:middle;
+	text-align:center
+}
+.layui-m-layerchild {
+	position:relative;
+	display:inline-block;
+	text-align:left;
+	background-color:#fff;
+	font-size:2.6vh;
+	border-radius:20px;
+	box-shadow:0 0 8px rgba(0,0,0,.1);
+	pointer-events:auto;
+	-webkit-overflow-scrolling:touch;
+	-webkit-animation-fill-mode:both;
+	animation-fill-mode:both;
+	-webkit-animation-duration:.2s;
+	animation-duration:.2s
+}
+@-webkit-keyframes layui-m-anim-scale {
+	0% {
+	opacity:0;
+	-webkit-transform:scale(.5);
+	transform:scale(.5)
+}
+100% {
+	opacity:1;
+	-webkit-transform:scale(1);
+	transform:scale(1)
+}
+}@keyframes layui-m-anim-scale {
+	0% {
+	opacity:0;
+	-webkit-transform:scale(.5);
+	transform:scale(.5)
+}
+100% {
+	opacity:1;
+	-webkit-transform:scale(1);
+	transform:scale(1)
+}
+}.layui-m-anim-scale {
+	animation-name:layui-m-anim-scale;
+	-webkit-animation-name:layui-m-anim-scale
+}
+@-webkit-keyframes layui-m-anim-up {
+	0% {
+	opacity:0;
+	-webkit-transform:translateY(1600px);
+	transform:translateY(1600px)
+}
+100% {
+	opacity:1;
+	-webkit-transform:translateY(0);
+	transform:translateY(0)
+}
+}@keyframes layui-m-anim-up {
+	0% {
+	opacity:0;
+	-webkit-transform:translateY(1600px);
+	transform:translateY(1600px)
+}
+100% {
+	opacity:1;
+	-webkit-transform:translateY(0);
+	transform:translateY(0)
+}
+}.layui-m-anim-up {
+	-webkit-animation-name:layui-m-anim-up;
+	animation-name:layui-m-anim-up
+}
+.layui-m-layer0 .layui-m-layerchild {
+	width:70%
+}
+.layui-m-layer1 .layui-m-layerchild {
+	border:none;
+	border-radius:0
+}
+.layui-m-layer2 .layui-m-layerchild {
+	width:15vh;
+	border:none;
+	padding:35px 0;
+	box-shadow:none;
+	color:#fff;
+	background-color:rgba(0,0,0,.7)
+}
+.layui-m-layerchild h3 {
+	padding:0 5%;
+	height:7.5vh;
+	line-height:7.5vh;
+	font-size:2.8vh;
+	font-weight:400;
+	border-radius:20px 20px 0 0;
+	text-align:center;
+	border-bottom:1px solid #E0E0E0
+}
+.layui-m-layerbtn span,.layui-m-layerchild h3 {
+	text-overflow:ellipsis;
+	overflow:hidden;
+	white-space:nowrap
+}
+.layui-m-layercont {
+	padding:8% 10%;
+	line-height:4vh;
+	text-align:center
+}
+.layui-m-layer1 .layui-m-layercont {
+	padding:0;
+	text-align:left
+}
+.layui-m-layer2 .layui-m-layercont {
+	text-align:center;
+	padding:0;
+	line-height:0
+}
+.layui-m-layer2 .layui-m-layercont i {
+	width:3vh;
+	height:3vh;
+	margin-left:1vh;
+	display:inline-block;
+	background-color:#fff;
+	border-radius:100%;
+	-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;
+	animation:layui-m-anim-loading 1.4s infinite ease-in-out;
+	-webkit-animation-fill-mode:both;
+	animation-fill-mode:both
+}
+.layui-m-layerbtn,.layui-m-layerbtn span {
+	position:relative;
+	text-align:center;
+	border-radius:0 0 20px 20px
+}
+.layui-m-layer2 .layui-m-layercont p {
+	margin-top:2vh;
+	font-size:2.5vh
+}
+@-webkit-keyframes layui-m-anim-loading {
+	0%,100%,80% {
+	transform:scale(0);
+	-webkit-transform:scale(0)
+}
+40% {
+	transform:scale(1);
+	-webkit-transform:scale(1)
+}
+}@keyframes layui-m-anim-loading {
+	0%,100%,80% {
+	transform:scale(0);
+	-webkit-transform:scale(0)
+}
+40% {
+	transform:scale(1);
+	-webkit-transform:scale(1)
+}
+}.layui-m-layer2 .layui-m-layercont i:first-child {
+	margin-left:0;
+	-webkit-animation-delay:-.32s;
+	animation-delay:-.32s
+}
+.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
+	-webkit-animation-delay:-.16s;
+	animation-delay:-.16s
+}
+.layui-m-layer2 .layui-m-layercont>div {
+	line-height:3.3vh;
+	padding-top:14px;
+	margin-bottom:40px;
+	font-size:3vh
+}
+.layui-m-layerbtn {
+	display:block;
+	display:-moz-box;
+	display:-webkit-box;
+	width:100%;
+	height:7.5vh;
+	line-height:7.5vh;
+	font-size:0;
+	border-top:1px solid #ddd;
+	background-color:#FFF
+}
+.layui-m-layerbtn span {
+	display:block;
+	-moz-box-flex:1;
+	box-flex:1;
+	-webkit-box-flex:1;
+	font-size:2.8vh;
+	cursor:pointer;
+	color:#0084ff
+}
+.layui-m-layerbtn span[yes] {
+	border-radius:0 0 20px
+}
+.layui-m-layerbtn span[no] {
+	border-right:1px solid #ddd;
+	border-radius:0 0 0 20px
+}
+.layui-m-layerbtn span:active {
+	background-color:#F6F6F6
+}
+.layui-m-layerend {
+	position:absolute;
+	right:14px;
+	top:20px;
+	width:60px;
+	height:60px;
+	border:0;
+	font-weight:400;
+	background:0 0;
+	cursor:pointer;
+	-webkit-appearance:none;
+	font-size:6vh
+}
+.layui-m-layerend::after,.layui-m-layerend::before {
+	position:absolute;
+	left:10px;
+	top:30px;
+	content:'';
+	width:18px;
+	height:1px;
+	background-color:#999;
+	transform:rotate(45deg);
+	-webkit-transform:rotate(45deg);
+	border-radius:12px
+}
+.layui-m-layerend::after {
+	transform:rotate(-45deg);
+	-webkit-transform:rotate(-45deg)
+}
+body .layui-m-layer .layui-m-layer-footer {
+	position:fixed;
+	width:95%;
+	max-width:100%;
+	margin:0 auto;
+	left:0;
+	right:0;
+	bottom:20px;
+	background:0 0
+}
+.layui-m-layer-footer .layui-m-layercont {
+	padding:20px;
+	border-radius:20px 20px 0 0;
+	background-color:rgba(255,255,255,.8)
+}
+.layui-m-layer-footer .layui-m-layerbtn {
+	display:block;
+	height:auto;
+	background:0 0;
+	border-top:none
+}
+.layui-m-layer-footer .layui-m-layerbtn span {
+	background-color:rgba(255,255,255,.8)
+}
+.layui-m-layer-footer .layui-m-layerbtn span[no] {
+	color:#FD482C;
+	border-top:1px solid #c2c2c2;
+	border-radius:0 0 20px 20px
+}
+.layui-m-layer-footer .layui-m-layerbtn span[yes] {
+	margin-top:20px;
+	border-radius:20px
+}
+body .layui-m-layer .layui-m-layer-msg {
+	width:auto;
+	max-width:90%;
+	margin:0 auto;
+	background-color:rgba(0,0,0,.7);
+	color:#fff
+}
+.layui-m-layer-msg .layui-m-layercont {
+	padding:20px 40px;
+	font-size:2.8vh
+}
+/*html, body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    cursor: none;
+}
+canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}*/
+/*span {
+    color: red;
+    bottom: 0px;
+    position: absolute;
+    right: 0px;
+    display: none;
+    font-size: 40pt;
+    font-weight: bold;
+    text-align: right;
+    vertical-align: bottom;
+    font-family: monospace;
+    display:none;
+}*/
+.background-div{
+  position: fixed;
+  background-color: #000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.info-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 110vw;
+  height: 250vw;
+  background-color: #000;
+  overflow-x: hidden;
+	overflow-y: auto;
+  background-image:url(../resources/invite-mask.jpg);
+  background-repeat:no-repeat;
+  background-size: 100%
+}
+#mask-img {
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+.container::-webkit-scrollbar {
+    display: none; //Safari and Chrome
+}
diff --git a/fc/index.html b/fc/index.html
index 854da49..f44abee 100644
--- a/fc/index.html
+++ b/fc/index.html
@@ -5,16 +5,16 @@
         <meta name="format-detection" content="telephone=no">
         <meta name="viewport" content="width=750,minimum-scale=0.4,maximum-scale=1,user-scalable=no">
         <title></title>
-        <link href="dist/gbajs.min.css?v=1" rel="stylesheet" type="text/css"/>
+        <link href="css/gbajs.css" rel="stylesheet" type="text/css"/>
         <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
         <script type="text/javascript" src="js/long.js"></script>
         <script type="text/javascript" src="js/bytebuffer.js"></script>
-        <script type="text/javascript" src="js/protobuf.js?v=6"></script>
-        <script type="text/javascript" src="js/jcmatchvs.js?v=6"></script>
-        <script type="text/javascript" src="js/netWorkHandle.js?v=6"></script>
-        <script type="text/javascript" src="js/network.js?v=6"></script>
+        <script type="text/javascript" src="js/protobuf.js"></script>
+        <script type="text/javascript" src="js/jcmatchvs.js"></script>
+        <script type="text/javascript" src="js/netWorkHandle.js"></script>
+        <script type="text/javascript" src="js/network.js?"></script>
         <script type="text/javascript" src="js/jquery.js"></script>
-        <script type="text/javascript" src="js/nes-embed.js?v=6"></script>
+        <script type="text/javascript" src="js/nes-embed.js"></script>
         <script type="text/javascript">
           var showInviteMask = function() {
             document.getElementById('info-mask').style.display = '';
diff --git a/fc/js/nes-embed.js b/fc/js/nes-embed.js
index 971e27e..bb25b53 100644
--- a/fc/js/nes-embed.js
+++ b/fc/js/nes-embed.js
@@ -158,8 +158,8 @@ window.vm = {
 
 window.onload = function(){
      var gameId = getParameter("id")
-    // var path  = "http://h5games-al.kingsome.cn/emulator-static/roms/" + gameId + ".nes"
-    var path  = "http://192.168.100.229:7008/roms/" + gameId + ".nes"
+     // var path  = "http://h5games-al.kingsome.cn/emulator-static/roms/" + gameId + ".nes"
+    var path  = "http://192.168.100.232:7008/roms/" + gameId + ".nes"
 	 nes_load_url("screen", path)
 	 vm.initCtrl()
 
diff --git a/gulpfile.js b/gulpfile.js
index 81c618c..cff8ad2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,8 +4,8 @@ var gulp = require('gulp'),
     uglify = require('gulp-uglify-es').default,
     rename = require('gulp-rename'),
     jshint = require('gulp-jshint'),
-    notify = require('gulp-notify'),//提示信息
     stripDebug = require("gulp-strip-debug"),//移除console语句
+    cleanCSS = require('gulp-clean-css'),
     gutil = require('gulp-util');
 
     gulp.task('jslint', function () {
@@ -14,24 +14,34 @@ var gulp = require('gulp'),
             .pipe(jshint.reporter('default'))
             .pipe(notify({message: 'finished jslint'}));
     });
-
-    gulp.task('minifyjsfc', function() {
-        return gulp.src('fc/js/*.js')
+    gulp.task('disthtml', function(){
+        return gulp.src(['**/*.html', '!node_modules/**/*', '!dist/**/*'])
+        .pipe(gulp.dest('dist'));
+    })
+    gulp.task('distfccss', function() {
+        return gulp.src(['fc/css/**/*.css'])
+        .pipe(cleanCSS())
+        .pipe(gulp.dest('dist/fc/css'));
+    })
+    gulp.task('distfcstatic', function() {
+        return gulp.src(['fc/resources/**/*'])
+        .pipe(gulp.dest('dist/fc/resources'));
+    })
+    gulp.task('distfcjs', function() {
+        return gulp.src(['fc/js/*.js'])
             // .pipe(concat('main.js'))
             // .pipe(rename({suffix: '.min'}))
             //https://github.com/mishoo/UglifyJS2
             .pipe(uglify({
-                    mangle:false,
-                    compress:false,
+                    mangle:true,
+                    compress:true,
                     output: {
                         comments: false //保留注释, all: 保留所有，some：只保留license等信息，false: 不保留，正则或者function
                     }
             }))
             .pipe(stripDebug())
-            .pipe(gulp.dest('fc/dist/js'))
-            .pipe(notify({message: 'finished minifyjsfc'}));
+            .pipe(gulp.dest('dist/fc/js'));
     });
+    gulp.task('distfc', ['disthtml', 'distfcjs', 'distfccss', 'distfcstatic'])
 
-    gulp.task('default', ['jslint'], function() {
-        gulp.start('minifyjsfc');
-　　});
+    gulp.task('default', ['distfc']);