init react version

cf449db1 · nano · 36a2f0f7 · 36a2f0f7 · cf449db1 · 36a2f0f7
Commit cf449db1 authored Mar 03, 2017 by nano
56 changed files
--- a/.editorconfig
+++ b/.editorconfig
-# http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
-
-# Indentation override
-#[lib/**.js]
-#[{package.json,.travis.yml}]
-#[**/**.js]
--- a/.gitignore
+++ b/.gitignore
-.idea
-node_modules
-jspm_packages
-npm-debug.*
-link-checker-results.txt
-app/**/*.js
-*.js.map
-e2e/**/*.js
-e2e/**/*.js.map
-_test-output
-_temp
-
-/aot/
-!/aot/index.html
-!/aot/bs-config.json
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
--- a/.travis.yml
+++ b/.travis.yml
-dist: trusty
-sudo: required
-language: node_js
-node_js:
-  - "5"
-os:
-  - linux
-env:
-  global:
-    - DBUS_SESSION_BUS_ADDRESS=/dev/null
-    - DISPLAY=:99.0
-    - CHROME_BIN=chromium-browser
-before_script:
-  - sh -e /etc/init.d/xvfb start
-install:
-  - npm install
-script:
-  - npm run lint
-  - npm run test-once
-  - npm run e2e
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,7 @@ COPY package.json /usr/src/app/
 RUN npm install
 COPY . /usr/src/app

-RUN npm run build:aot
+RUN npm run build
 VOLUME /usr/src/app/aot

 CMD [ "echo", "mycard-store" ]
--- a/LICENSE
+++ b/LICENSE
-The MIT License
-
-Copyright (c) 2014-2016 Google, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--- a/README.md
+++ b/README.md
--- a/MyCardProduct.png
+++ b/MyCardProduct.png
--- a/aot/asset-manifest.json
+++ b/aot/asset-manifest.json
+{
+  "main.css": "static/css/main.0215908c.css",
+  "main.css.map": "static/css/main.0215908c.css.map",
+  "main.js": "static/js/main.8272b6d8.js",
+  "main.js.map": "static/js/main.8272b6d8.js.map",
+  "static/media/MyCardProduct.png": "static/media/MyCardProduct.69dc9f6f.png"
+}
\ No newline at end of file
--- a/aot/bs-config.json
+++ b/aot/bs-config.json
-{
-  "port": 8000,
-  "files": ["./aot/**/*.{html,htm,css,js}"],
-  "server": { "baseDir": "./aot" }
-}
--- a/aot/index.html
+++ b/aot/index.html
-<!DOCTYPE html>
-<html>
-<head>
-  <base href="/">
-  <title>MyCard - 萌卡</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link href="bootstrap.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css">
-  <script src="shim.min.js"></script>
-  <script src="zone.min.js"></script>
-  <script>window.module = 'aot';</script>
-</head>
-<body>
-<store>Loading...</store>
-</body>
-<script src="dist/build.js"></script>
-</html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.0215908c.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.8272b6d8.js"></script></body></html>
\ No newline at end of file
--- a/aot/logo.png
+++ b/aot/logo.png
--- a/aot/static/css/main.0215908c.css
+++ b/aot/static/css/main.0215908c.css
+.App-Logo{width:120px;height:31px;border-radius:6px;margin:16px 24px 16px 0;float:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.App-Logo span{font-size:1rem;color:hsla(0,0%,100%,.75)}.App-Poster{width:100%;height:auto;max-width:100%}.App-Poster-Content .ant-btn{margin:1.2rem 0}.App-Content1,.App-Content2{padding:50px;background:#333}.App-Content2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.App-CardList{padding:4vh 4vw}.App-CardList .ant-row{margin:-8px}.App-CardList .ant-row>div{padding:1vh 1vw}.App-Card-content{margin-bottom:2vh;white-space:pre}.ant-layout .ant-layout-header{background:#404040}body{margin:0;padding:0;font-family:sans-serif}
+/*# sourceMappingURL=main.0215908c.css.map*/
\ No newline at end of file
--- a/aot/static/css/main.0215908c.css.map
+++ b/aot/static/css/main.0215908c.css.map
+{"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.0215908c.css","sourceRoot":""}
\ No newline at end of file
--- a/aot/static/js/main.8272b6d8.js
+++ b/aot/static/js/main.8272b6d8.js
--- a/aot/static/js/main.8272b6d8.js.map
+++ b/aot/static/js/main.8272b6d8.js.map
--- a/aot/static/media/MyCardProduct.69dc9f6f.png
+++ b/aot/static/media/MyCardProduct.69dc9f6f.png
--- a/app/main-aot.ts
+++ b/app/main-aot.ts
-import {platformBrowser} from '@angular/platform-browser';
-import {StoreModuleNgFactory} from '../aot/app/store.module.ngfactory';
-import {enableProdMode} from '@angular/core';
-
-enableProdMode();
-platformBrowser().bootstrapModuleFactory(StoreModuleNgFactory);
--- a/app/main.ts
+++ b/app/main.ts
-window['jQuery'] = require('jquery');
-window['Tether'] = require('tether');
-import 'bootstrap';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {StoreModule} from './store.module';
-
-platformBrowserDynamic().bootstrapModule(StoreModule);
--- a/app/store.component.css
+++ b/app/store.component.css
-.navbar-brand {
-  height: 50px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.navbar {
-  border-bottom: 1px solid #dddddd;
-  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
-  font-size: 1.25rem;
-}
-
-#pic {
-  width: 100%;
-}
-
-#online {
-  color: rgb(241, 138, 6);
-}
-
-.stats {
-  font-size: 1.25rem;
-}
-
-.features {
-  padding-top: .5rem;
-}
-
-#title {
-  padding-top: 4rem;
-  padding-left: 4rem;
-}
-
-.col-md-6 {
-  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  margin: 0.5%;
-  padding-top: 1rem;
-  flex: 0 0 48%;
-}
-
-h2 {
-  /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
-  padding: .5rem;
-  font-size: 1.5rem;
-  /*border-radius: 8px;*/
-  /*border: 1px solid #eee;*/
-}
-
-sup {
-  top: -3.6em;
-  font-size: 20%;
-}
-
-.btn-primary {
-  background-color: #00a4d9;
-  border-color: #008dbb;
-}
-
-.btn-secondary {
-  color: #00a4d9;
-}
-
-#signups-wrapper {
-  margin-bottom: 0;
-}
-
-#requirements {
-  font-size: 14px;
-}
-
-#setup {
-  font-size: 1.5rem;
-}
-
-#main-wrapper {
-  z-index: 1;
-  position: relative;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
-  background: linear-gradient( to bottom, #f7f7f7, #eee );
-}
-
-#requirements-wrapper {
-  z-index: 2;
-  position: relative;
-  background: linear-gradient( to bottom, #f7f7f7, #eee );
-  padding: 4rem 0;
-  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
-}
-
-#main > div:nth-child(1) {
-  border-top: 4px solid #9acfe6;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-#main > div:nth-child(2) {
-  border-top: 4px solid #9ACFE6;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-#main > div:nth-child(3) {
-  border-top: 4px solid #9ACFE6;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-#main > div:nth-child(4) {
-  border-top: 4px solid #9ACFE6;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-#footer-wrapper {
-  z-index: 3;
-  position: relative;
-  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  background: linear-gradient( to bottom, #f7f7f7, #eee );
-}
-
-#footer {
-  text-align: right;
-  border: 1px solid #eeeeee;
-  border-radius: 10px;
-  padding-top: 1rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
-}
--- a/app/store.component.html
+++ b/app/store.component.html
-<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
-  <div class="container">
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand" href="#">
-      <img src="https://mycard.moe/logo_60.png" width="40" height="40" class="d-inline-block align-center" alt=""> MyCard
-    </a>
-
-    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://ygobbs.com/" target="_blank">社区</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-
-<!-- Main jumbotron for a primary marketing message or call to action -->
-<div class="jumbotron">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-5" id="title">
-        <h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
-        <p>MyCard 同人游戏平台</p>
-        <p *ngIf="latest">
-          <a class="btn btn-primary btn-lg" [href]="latest[platform].url" role="button">立即安装</a>
-        </p>
-        <p *ngIf="latest">
-          萌卡平台支持 <a [href]="latest.win32.url">Windows</a> 与 <a [href]="latest.darwin.url">Mac</a> 操作系统。 </p>
-        <p *ngIf="!latest">Loading...</p>
-      </div>
-      <div class="col">
-        <img id="pic" src="MyCardProduct.png">
-      </div>
-    </div>
-  </div>
-</div>
-<div id="main-wrapper">
-  <div class="container">
-    <!-- Example row of columns -->
-    <div class="row" id="main">
-
-      <div class="col-md-6">
-        <h2>新世界的入口</h2>
-        <p>或许您曾听说过一些来自同人世界的传说...<br> ~曾有过有无所不能的神奇网上社区，<br> ~存在过无数创造者共同创造的神奇游戏，<br> ~曾有所有人融洽相处的幻想乡...<br>
-        </p>
-        <p>
-          Dalao们所说的那个新世界，<br> 萌新却怎么也不知道在哪里！<br>
-        </p>不过这一次，你也许找对地方了！
-        <p>
-          安装萌卡平台就是您需要做的第一步！<br>
-        </p>
-        <p>萌卡平台希望能为萌新打开同人创作新世界的大门！</p>
-        <p><a class="btn btn-secondary" href="#" role="button">安装萌卡ACG平台 &raquo;</a></p>
-      </div>
-
-      <div class="col-md-6">
-        <h2>为了爱而存在的萌卡</h2>
-        <p>
-          如果有过同人创作的经历，<br> 你应该会深深地了解到,<br> 爱的一面是孤独的，忧伤的，边缘化的。<br>
-        </p>
-        <p>
-          但只要你还相信爱，<br> 它就必将创造出爱与忧伤的结晶，给生命赋予意义。<br>
-        </p>
-        <p>
-          萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。<br> 因为有大家在，萌卡才会存在。<br> 也正是萌卡存在的意义。<br>
-        </p>
-        <p>萌卡平台希望能为有爱的人提供可能！</p>
-        <p><a class="btn btn-secondary" href="#" role="button">欢迎勾搭合作 &raquo;</a></p>
-      </div>
-
-      <div class="col-md-6" id="community">
-        <h2>孤独者的家园</h2>
-        <p>
-          世界与我是那么格格不入，<br> 我们总在搜索与我们相似的人，<br> ——同道之人，同好之人，同命之人。<br>
-        </p>
-        <p>
-          在这个一切都被沦为工具的时代，<br> 呼吸似乎都变得困难。<br>
-        </p>
-        <p>
-          孤独的我们，<br> 在无尽的大海中相互取暖，<br> 多么的希望有这么一个共同的家园啊！<br>
-        </p>
-        <p *ngIf="stats" id="signups-wrapper"><span id="signups" class="stats">{{stats.signups}}</span> 只萌新已加入萌卡</p>
-        <p *ngIf="stats"><span id="online" class="stats">{{stats.online}}</span> 位爱的战士正在线游戏</p>
-        <p><a class="btn btn-secondary" href="#" role="button">加入萌卡社区 &raquo;</a></p>
-      </div>
-
-      <div class="col-md-6">
-        <h2>黑科技创造新希望</h2>
-        <p>
-          萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，<br> 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！<br> 这些点点滴滴的积累，或许就能够带动同人产业革新哦！<br>
-        </p>
-        <p class="features">已实装黑科技功能</p>
-        <ul>
-          <li>能在Mac上玩东方系列及其他 Windows 游戏。</li>
-          <li>在 PC 平台上玩部分非 PC 平台的游戏。</li>
-          <li>为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。</li>
-          <li>自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。</li>
-          <li>为游戏发布者定制自定义功能（参考 YGOPro）。</li>
-          <li>为游戏提供在线存档保存功能（云存档）。</li>
-          <li>一键安装游戏，自动解决各种依赖问题。</li>
-        </ul>
-        <p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p>
-      </div>
-    </div>
-  </div>
-</div>
-<div id="requirements-wrapper">
-  <div class="container">
-    <div class="row">
-      <div id="setup" class="col" *ngIf="latest">
-        <p>欢迎加入萌卡这个大家庭</p>
-        <a class="btn btn-primary btn-lg" [href]="latest[platform].url" role="button">立即安装</a>
-      </div>
-      <div id="requirements" class="col">
-        <p>
-          系统需求<br> Windows 7、8 或 10<br> 512M 内存<br> 1 Ghz 或更快的处理器 </p>
-        <p>
-          Mac OS X 版本 10.12 (Sierra) 或更新的版本。<br> 强烈推荐使用双键鼠标 </p>
-
-        <p>
-          1GB 硬盘空间<br> 互联网连接 </p>
-      </div>
-    </div>
-  </div>
-</div>
-<div id="footer-wrapper">
-  <div class="container">
-    <footer>
-      <div id="footer">
-        <p>&copy; MyCard 2017 all right reserved.</p>
-      </div>
-    </footer>
-  </div>
-</div>
--- a/app/store.component.ts
+++ b/app/store.component.ts
-import {Component, OnInit} from '@angular/core';
-import {Http, URLSearchParams} from '@angular/http';
-import 'rxjs/Rx';
-import * as yaml from 'js-yaml';
-
-@Component({
-  moduleId: module.id,
-  selector: 'store',
-  templateUrl: 'store.component.html',
-  styleUrls: ['store.component.css'],
-})
-export class StoreComponent implements OnInit {
-  stats: {signups: number; online: number;};
-  latest: {win32: {version: string, url: string}, darwin: {version: string, url: string}};
-  platform = navigator.platform.match(/Mac/i) ? 'darwin' : 'win32';
-
-  constructor (private http: Http) {
-  }
-
-  async ngOnInit () {
-
-    this.latest = {
-      win32: await this.get_latest_win32(),
-      darwin: await this.get_latest_darwin()
-    };
-
-    this.stats = {
-      signups: await this.get_stats_signups(),
-      online: await this.get_stats_online()
-    };
-  }
-
-  async get_latest_win32 () {
-    let data = await this.http.get('https://wudizhanche.mycard.moe/downloads/latest.yml').map(response => yaml.safeLoad(response.text())).toPromise();
-    data.url = 'https://r.my-card.in/downloads/' + data.path;
-    return data;
-  }
-
-  async get_latest_darwin () {
-    let data = await this.http.get('https://wudizhanche.mycard.moe/downloads/latest-mac.json').map(response => response.json()).toPromise();
-    data.url = data.url.replace('-mac.zip', '.dmg').replace('https://wudizhanche.mycard.moe/downloads/', 'https://r.my-card.in/downloads/');
-    return data;
-  }
-
-  async get_stats_signups () {
-    let params = new URLSearchParams();
-    params.set('api_key', 'dc7298a754828b3d26b709f035a0eeceb43e73cbd8c4fa8dec18951f8a95d2bc');
-    params.set('api_username', 'zh99998');
-    let data = await this.http.get('https://ygobbs.com/admin/dashboard.json', {search: params})
-      .map(response => response.json()).toPromise();
-    return data.global_reports.find((item: any) => item.type === 'signups').total;
-  }
-
-  async get_stats_online () {
-    let document = await this.http.get('https://chat.mycard.moe/stats/online')
-      .map(response => new DOMParser().parseFromString(response.text(), 'text/xml')).toPromise();
-    return parseInt(document.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)').textContent);
-  }
-}
--- a/app/store.module.ts
+++ b/app/store.module.ts
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { StoreComponent }  from './store.component';
-import {HttpModule} from '@angular/http';
-
-@NgModule({
-  imports:      [ BrowserModule, HttpModule ],
-  declarations: [ StoreComponent ],
-  bootstrap:    [ StoreComponent ]
-})
-export class StoreModule { }
--- a/config/env.js
+++ b/config/env.js
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+
+var REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  var raw = Object
+    .keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce((env, key) => {
+      env[key] = process.env[key];
+      return env;
+    }, {
+      // Useful for determining whether we’re running in production mode.
+      // Most importantly, it switches React into the correct mode.
+      'NODE_ENV': process.env.NODE_ENV || 'development',
+      // Useful for resolving the correct path to static assets in `public`.
+      // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+      // This should only be used as an escape hatch. Normally you would put
+      // images into the `src` and `import` them in code to get their paths.
+      'PUBLIC_URL': publicUrl
+    });
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  var stringified = {
+    'process.env': Object
+      .keys(raw)
+      .reduce((env, key) => {
+        env[key] = JSON.stringify(raw[key]);
+        return env;
+      }, {})
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;
--- a/config/jest/cssTransform.js
+++ b/config/jest/cssTransform.js
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey(fileData, filename) {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};
--- a/config/jest/fileTransform.js
+++ b/config/jest/fileTransform.js
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  },
+};
--- a/config/paths.js
+++ b/config/paths.js
+var path = require('path');
+var fs = require('fs');
+var url = require('url');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+var appDirectory = fs.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+  return path.resolve(appDirectory, relativePath);
+}
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+
+// We will export `nodePaths` as an array of absolute paths.
+// It will then be used by Webpack configs.
+// Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
+
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+
+var nodePaths = (process.env.NODE_PATH || '')
+  .split(process.platform === 'win32' ? ';' : ':')
+  .filter(Boolean)
+  .filter(folder => !path.isAbsolute(folder))
+  .map(resolveApp);
+
+var envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(path, needsSlash) {
+  var hasSlash = path.endsWith('/');
+  if (hasSlash && !needsSlash) {
+    return path.substr(path, path.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return path + '/';
+  } else {
+    return path;
+  }
+}
+
+function getPublicUrl(appPackageJson) {
+  return envPublicUrl || require(appPackageJson).homepage;
+}
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  var publicUrl = getPublicUrl(appPackageJson);
+  var servedUrl = envPublicUrl || (
+    publicUrl ? url.parse(publicUrl).pathname : '/'
+  );
+  return ensureSlash(servedUrl, true);
+}
+
+// config after eject: we're in ./config/
+module.exports = {
+  appBuild: resolveApp('aot'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveApp('src/index.js'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveApp('src/setupTests.js'),
+  appNodeModules: resolveApp('node_modules'),
+  ownNodeModules: resolveApp('node_modules'),
+  nodePaths: nodePaths,
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json'))
+};
--- a/config/polyfills.js
+++ b/config/polyfills.js
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a common issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// fetch() polyfill for making API calls.
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require('object-assign');
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
+var autoprefixer = require('autoprefixer');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var getClientEnvironment = require('./env');
+var paths = require('./paths');
+
+
+
+// Webpack uses `publicPath` to determine where the app is being served from.
+// In development, we always serve from the root. This makes config easier.
+var publicPath = '/';
+// `publicUrl` is just like `publicPath`, but we will provide it to our app
+// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
+var publicUrl = '';
+// Get environment variables to inject into our app.
+var env = getClientEnvironment(publicUrl);
+
+// This is the development configuration.
+// It is focused on developer experience and fast rebuilds.
+// The production configuration is different and lives in a separate file.
+module.exports = {
+  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
+  devtool: 'cheap-module-source-map',
+  // These are the "entry points" to our application.
+  // This means they will be the "root" imports that are included in JS bundle.
+  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
+  entry: [
+    // Include an alternative client for WebpackDevServer. A client's job is to
+    // connect to WebpackDevServer by a socket and get notified about changes.
+    // When you save a file, the client will either apply hot updates (in case
+    // of CSS changes), or refresh the page (in case of JS changes). When you
+    // make a syntax error, this client will display a syntax error overlay.
+    // Note: instead of the default WebpackDevServer client, we use a custom one
+    // to bring better experience for Create React App users. You can replace
+    // the line below with these two lines if you prefer the stock client:
+    // require.resolve('webpack-dev-server/client') + '?/',
+    // require.resolve('webpack/hot/dev-server'),
+    require.resolve('react-dev-utils/webpackHotDevClient'),
+    // We ship a few polyfills by default:
+    require.resolve('./polyfills'),
+    // Finally, this is your app's code:
+    paths.appIndexJs
+    // We include the app code last so that if there is a runtime error during
+    // initialization, it doesn't blow up the WebpackDevServer client, and
+    // changing JS code would still trigger a refresh.
+  ],
+  output: {
+    // Next line is not used in dev but WebpackDevServer crashes without it:
+    path: paths.appBuild,
+    // Add /* filename */ comments to generated require()s in the output.
+    pathinfo: true,
+    // This does not produce a real file. It's just the virtual path that is
+    // served by WebpackDevServer in development. This is the JS bundle
+    // containing code from all our entry points, and the Webpack runtime.
+    filename: 'static/js/bundle.js',
+    // This is the URL that app is served from. We use "/" in development.
+    publicPath: publicPath
+  },
+  resolve: {
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
+    // We use `fallback` instead of `root` because we want `node_modules` to "win"
+    // if there any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    fallback: paths.nodePaths,
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    extensions: ['.js', '.json', '.jsx', ''],
+    alias: {
+      // Support React Native Web
+      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+      'react-native': 'react-native-web'
+    }
+  },
+  
+  module: {
+    // First, run the linter.
+    // It's important to do this before Babel processes the JS.
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'eslint',
+        include: paths.appSrc,
+      }
+    ],
+    loaders: [
+      // ** ADDING/UPDATING LOADERS **
+      // The "url" loader handles all assets unless explicitly excluded.
+      // The `exclude` list *must* be updated with every change to loader extensions.
+      // When adding a new loader, you must add its `test`
+      // as a new entry in the `exclude` list for "url" loader.
+
+      // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
+      // Otherwise, it acts like the "file" loader.
+      {
+        exclude: [
+          /\.html$/,
+          /\.(js|jsx)$/,
+          /\.css$/,
+          /\.json$/,
+          /\.svg$/
+        ],
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: 'static/media/[name].[hash:8].[ext]'
+        }
+      },
+      // Process JS with Babel.
+      {
+        test: /\.(js|jsx)$/,
+        include: paths.appSrc,
+        loader: 'babel',
+        query: {
+          plugins: [
+           ['import', [{ libraryName: "antd", style: 'css' }]]
+          ],
+          
+          // This is a feature of `babel-loader` for webpack (not Babel itself).
+          // It enables caching results in ./node_modules/.cache/babel-loader/
+          // directory for faster rebuilds.
+          cacheDirectory: true
+        }
+      },
+      // "postcss" loader applies autoprefixer to our CSS.
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader turns CSS into JS modules that inject <style> tags.
+      // In production, we use a plugin to extract that CSS to a file, but
+      // in development "style" loader enables hot editing of CSS.
+      {
+        test: /\.css$/,
+        loader: 'style!css?importLoaders=1!postcss'
+      },
+      // JSON is not enabled by default in Webpack but both Node and Browserify
+      // allow it implicitly so we also enable it.
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      // "file" loader for svg
+      {
+        test: /\.svg$/,
+        loader: 'file',
+        query: {
+          name: 'static/media/[name].[hash:8].[ext]'
+        }
+      }
+      // ** STOP ** Are you adding a new loader?
+      // Remember to add the new extension(s) to the "url" loader exclusion list.
+    ]
+  },
+  
+  // We use PostCSS for autoprefixing only.
+  postcss: function() {
+    return [
+      autoprefixer({
+        browsers: [
+          '>1%',
+          'last 4 versions',
+          'Firefox ESR',
+          'not ie < 9', // React doesn't support IE8 anyway
+        ]
+      }),
+    ];
+  },
+  plugins: [
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In development, this will be an empty string.
+    new InterpolateHtmlPlugin(env.raw),
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: paths.appHtml,
+    }),
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
+    new webpack.DefinePlugin(env.stringified),
+    // This is necessary to emit hot updates (currently CSS only):
+    new webpack.HotModuleReplacementPlugin(),
+    // Watcher doesn't work well if you mistype casing in a path so we use
+    // a plugin that prints an error when you attempt to do this.
+    // See https://github.com/facebookincubator/create-react-app/issues/240
+    new CaseSensitivePathsPlugin(),
+    // If you require a missing module and then `npm install` it, you still have
+    // to restart the development server for Webpack to discover it. This plugin
+    // makes the discovery automatic so you don't have to restart.
+    // See https://github.com/facebookincubator/create-react-app/issues/186
+    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
+  ],
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
+};
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
+var autoprefixer = require('autoprefixer');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var ManifestPlugin = require('webpack-manifest-plugin');
+var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+var url = require('url');
+var paths = require('./paths');
+var getClientEnvironment = require('./env');
+
+
+
+// Webpack uses `publicPath` to determine where the app is being served from.
+// It requires a trailing slash, or the file assets will get an incorrect path.
+var publicPath = paths.servedPath;
+// Some apps do not use client-side routing with pushState.
+// For these, "homepage" can be set to "." to enable relative asset paths.
+var shouldUseRelativeAssetPaths = publicPath === './';
+// `publicUrl` is just like `publicPath`, but we will provide it to our app
+// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+var publicUrl = publicPath.slice(0, -1);
+// Get environment variables to inject into our app.
+var env = getClientEnvironment(publicUrl);
+
+// Assert this just to be safe.
+// Development builds of React are slow and not intended for production.
+if (env.stringified['process.env'].NODE_ENV !== '"production"') {
+  throw new Error('Production builds must have NODE_ENV=production.');
+}
+
+// Note: defined here because it will be used more than once.
+const cssFilename = 'static/css/[name].[contenthash:8].css';
+
+// ExtractTextPlugin expects the build output to be flat.
+// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
+// However, our output is structured with css, js and media folders.
+// To have this structure working with relative paths, we have to use custom options.
+const extractTextPluginOptions = shouldUseRelativeAssetPaths
+  // Making sure that the publicPath goes back to to build folder.
+  ? { publicPath: Array(cssFilename.split('/').length).join('../') }
+  : undefined;
+
+// This is the production configuration.
+// It compiles slowly and is focused on producing a fast and minimal bundle.
+// The development configuration is different and lives in a separate file.
+module.exports = {
+  // Don't attempt to continue if there are any errors.
+  bail: true,
+  // We generate sourcemaps in production. This is slow but gives good results.
+  // You can exclude the *.map files from the build during deployment.
+  devtool: 'source-map',
+  // In production, we only want to load the polyfills and the app code.
+  entry: [
+    require.resolve('./polyfills'),
+    paths.appIndexJs
+  ],
+  output: {
+    // The build folder.
+    path: paths.appBuild,
+    // Generated JS file names (with nested folders).
+    // There will be one main bundle, and one file per asynchronous chunk.
+    // We don't currently advertise code splitting but Webpack supports it.
+    filename: 'static/js/[name].[chunkhash:8].js',
+    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+    // We inferred the "public path" (such as / or /my-project) from homepage.
+    publicPath: publicPath
+  },
+  resolve: {
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
+    // We use `fallback` instead of `root` because we want `node_modules` to "win"
+    // if there any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    fallback: paths.nodePaths,
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    extensions: ['.js', '.json', '.jsx', ''],
+    alias: {
+      // Support React Native Web
+      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+      'react-native': 'react-native-web'
+    }
+  },
+  
+  module: {
+    // First, run the linter.
+    // It's important to do this before Babel processes the JS.
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'eslint',
+        include: paths.appSrc
+      }
+    ],
+    loaders: [
+      // ** ADDING/UPDATING LOADERS **
+      // The "url" loader handles all assets unless explicitly excluded.
+      // The `exclude` list *must* be updated with every change to loader extensions.
+      // When adding a new loader, you must add its `test`
+      // as a new entry in the `exclude` list in the "url" loader.
+
+      // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
+      // Otherwise, it acts like the "file" loader.
+      {
+        exclude: [
+          /\.html$/,
+          /\.(js|jsx)$/,
+          /\.css$/,
+          /\.json$/,
+          /\.svg$/
+        ],
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: 'static/media/[name].[hash:8].[ext]'
+        }
+      },
+      // Process JS with Babel.
+      {
+        test: /\.(js|jsx)$/,
+        include: paths.appSrc,
+        loader: 'babel',
+        
+      },
+      // The notation here is somewhat confusing.
+      // "postcss" loader applies autoprefixer to our CSS.
+      // "css" loader resolves paths in CSS and adds assets as dependencies.
+      // "style" loader normally turns CSS into JS modules injecting <style>,
+      // but unlike in development configuration, we do something different.
+      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
+      // (second argument), then grabs the result CSS and puts it into a
+      // separate file in our build process. This way we actually ship
+      // a single CSS file in production instead of JS code injecting <style>
+      // tags. If you use code splitting, however, any async bundles will still
+      // use the "style" loader inside the async code so CSS from them won't be
+      // in the main CSS file.
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract(
+          'style',
+          'css?importLoaders=1!postcss',
+          extractTextPluginOptions
+        )
+        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+      },
+      // JSON is not enabled by default in Webpack but both Node and Browserify
+      // allow it implicitly so we also enable it.
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      // "file" loader for svg
+      {
+        test: /\.svg$/,
+        loader: 'file',
+        query: {
+          name: 'static/media/[name].[hash:8].[ext]'
+        }
+      }
+      // ** STOP ** Are you adding a new loader?
+      // Remember to add the new extension(s) to the "url" loader exclusion list.
+    ]
+  },
+  
+  // We use PostCSS for autoprefixing only.
+  postcss: function() {
+    return [
+      autoprefixer({
+        browsers: [
+          '>1%',
+          'last 4 versions',
+          'Firefox ESR',
+          'not ie < 9', // React doesn't support IE8 anyway
+        ]
+      }),
+    ];
+  },
+  plugins: [
+    // Makes some environment variables available in index.html.
+    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In production, it will be an empty string unless you specify "homepage"
+    // in `package.json`, in which case it will be the pathname of that URL.
+    new InterpolateHtmlPlugin(env.raw),
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: paths.appHtml,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true
+      }
+    }),
+    // Makes some environment variables available to the JS code, for example:
+    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+    // It is absolutely essential that NODE_ENV was set to production here.
+    // Otherwise React will be compiled in the very slow development mode.
+    new webpack.DefinePlugin(env.stringified),
+    // This helps ensure the builds are consistent if source hasn't changed:
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    // Try to dedupe duplicated modules, if any:
+    new webpack.optimize.DedupePlugin(),
+    // Minify the code.
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        screw_ie8: true, // React doesn't support IE8
+        warnings: false
+      },
+      mangle: {
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+        screw_ie8: true
+      }
+    }),
+    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
+    new ExtractTextPlugin(cssFilename),
+    // Generate a manifest file which contains a mapping of all asset filenames
+    // to their corresponding output file so that tools can pick it up without
+    // having to parse `index.html`.
+    new ManifestPlugin({
+      fileName: 'asset-manifest.json'
+    })
+  ],
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
+};
--- a/copy-dist-files.js
+++ b/copy-dist-files.js
-var fs = require('fs');
-var resources = [
-  'node_modules/core-js/client/shim.min.js',
-  'node_modules/zone.js/dist/zone.min.js',
-  'styles.css',
-  'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  'MyCardProduct.png'
-];
-resources.map(function(f) {
-  var path = f.split('/');
-  var t = 'aot/' + path[path.length-1];
-  fs.createReadStream(f).pipe(fs.createWriteStream(t));
-});
--- a/favicon.ico
+++ b/favicon.ico
--- a/i18data.json
+++ b/i18data.json
+{
+  "zh-CH":{
+    "CardTimeLine1":[],    
+    "CardTimeLine2":[],
+    "CardTimeLine3":[],
+    "CardTimeLine4":[
+      "能在Mac上玩东方系列及其他 Windows 游戏。",
+      "在 PC 平台上玩部分非 PC 平台的游戏。",
+      "为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。",
+      "自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。",
+      "为游戏发布者定制自定义功能（参考 YGOPro）。",
+      "为游戏提供在线存档保存功能（云存档）。",
+      "一键安装游戏，自动解决各种依赖问题。"
+    ]
+  },
+  "en-US":{
+    "CardTimeLine1":[],    
+    "CardTimeLine2":[],
+    "CardTimeLine3":[],
+    "CardTimeLine4":[
+      "能在Mac上玩东方系列及其他 Windows 游戏。",
+      "在 PC 平台上玩部分非 PC 平台的游戏。",
+      "为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。",
+      "自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。",
+      "为游戏发布者定制自定义功能（参考 YGOPro）。",
+      "为游戏提供在线存档保存功能（云存档）。",
+      "一键安装游戏，自动解决各种依赖问题。"
+    ]
+  }
+}
\ No newline at end of file
--- a/i18n.json
+++ b/i18n.json
+{
+  "en" : {
+    "Home":"Home",
+    "BBS": "BBS",
+    "Download":"Download",
+    "CardTitle1": "新世界的入口",
+    "CardTitle2": "为了爱而存在的萌卡",
+    "CardTitle3": "孤独者的家园",
+    "CardTitle4": "黑科技创造新希望",
+    "CardContent1": "或许您曾听说过一些来自同人世界的传说\n 曾有过有无所不能的神奇网上社区，\n 存在过无数创造者共同创造的神奇游戏，\n 曾有所有人融洽相处的幻想乡...Dalao们所说的那个新世界，\n 萌新却怎么也不知道在哪里！\n 不过这一次，你也许找对地方了！\n 安装萌卡平台就是您需要做的第一步！\n萌卡平台希望能为萌新打开同人创作新世界的大门!",
+    "CardContent2":"如果有过同人创作的经历，\n 你应该会深深地了解到, \n 爱的一面是孤独的，忧伤的，边缘化的。\n 但只要你还相信爱，\n 它就必将创造出爱与忧伤的结晶，给生命赋予意义。\n 萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。\n 因为有大家在，萌卡才会存在。\n 也正是萌卡存在的意义。\n 萌卡平台希望能为有爱的人提供可能！\n",    
+    "CardContent3":"世界与我是那么格格不入，\n 我们总在搜索与我们相似的人，\n ——同道之人，同好之人，同命之人。\n 在这个一切都被沦为工具的时代，\n 呼吸似乎都变得困难。\n 孤独的我们，\n 在无尽的大海中相互取暖，\n 多么的希望有这么一个共同的家园啊！\n",
+    "CardContent4":"萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，\n 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！\n 这些点点滴滴的积累，或许就能够带动同人产业革新哦！\n 已实装黑科技功能: \n",
+    "CardAction1":"安装萌卡ACG平台",
+    "CardAction2":"欢迎勾搭合作",
+    "CardAction3":"加入萌卡社区",           
+    "CardAction4":"其他功能目标",
+    "Welcome":"欢迎加入萌卡这个大家庭"
+  },
+  "zh" : {
+    "Home": "首页",
+    "BBS": "论坛",
+    "Download": "立即安装",
+    "CardTitle1": "新世界的入口",
+    "CardTitle2": "为了爱而存在的萌卡",
+    "CardTitle3": "孤独者的家园",
+    "CardTitle4": "黑科技创造新希望",
+    "CardContent1": "或许您曾听说过一些来自同人世界的传说\n 曾有过有无所不能的神奇网上社区，\n 存在过无数创造者共同创造的神奇游戏，\n 曾有所有人融洽相处的幻想乡...Dalao们所说的那个新世界，\n 萌新却怎么也不知道在哪里！\n 不过这一次，你也许找对地方了！\n 安装萌卡平台就是您需要做的第一步！\n萌卡平台希望能为萌新打开同人创作新世界的大门!",
+    "CardContent2":"如果有过同人创作的经历，\n 你应该会深深地了解到, \n 爱的一面是孤独的，忧伤的，边缘化的。\n 但只要你还相信爱，\n 它就必将创造出爱与忧伤的结晶，给生命赋予意义。\n 萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。\n 因为有大家在，萌卡才会存在。\n 也正是萌卡存在的意义。\n 萌卡平台希望能为有爱的人提供可能！\n",    
+    "CardContent3":"世界与我是那么格格不入，\n 我们总在搜索与我们相似的人，\n ——同道之人，同好之人，同命之人。\n 在这个一切都被沦为工具的时代，\n 呼吸似乎都变得困难。\n 孤独的我们，\n 在无尽的大海中相互取暖，\n 多么的希望有这么一个共同的家园啊！\n",
+    "CardContent4":"萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，\n 于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！\n 这些点点滴滴的积累，或许就能够带动同人产业革新哦！\n 已实装黑科技功能: \n",
+    "CardAction1":"安装萌卡ACG平台",
+    "CardAction2":"欢迎勾搭合作",
+    "CardAction3":"加入萌卡社区",           
+    "CardAction4":"其他功能目标",
+    "Welcome":"欢迎加入萌卡这个大家庭"
+  }
+}
\ No newline at end of file
--- a/index.html
+++ b/index.html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>MyCard - 萌卡</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <store>Loading...</store>
-  </body>
-</html>
--- a/package.json
+++ b/package.json
 {
  "name": "mycard-store",
-  "version": "1.0.0",
-  "description": "QuickStart package.json from the documentation, supplemented with testing support",
-  "scripts": {
-    "start": "tsc && lite-server",
-    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
-    "lint": "tslint ./app/**/*.ts -t verbose",
-    "lite": "lite-server",
-    "pree2e": "webdriver-manager update",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "test-once": "tsc && karma start karma.conf.js --single-run",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "start:aot": "build:aot && lite:aot",
-    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js && node copy-dist-files",
-    "lite:aot": "lite-server -c aot/bs-config.json"
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "autoprefixer": "6.7.2",
+    "babel-core": "6.22.1",
+    "babel-eslint": "7.1.1",
+    "babel-jest": "18.0.0",
+    "babel-loader": "6.2.10",
+    "babel-preset-react-app": "^2.1.1",
+    "babel-runtime": "^6.20.0",
+    "case-sensitive-paths-webpack-plugin": "1.1.4",
+    "chalk": "1.1.3",
+    "connect-history-api-fallback": "1.3.0",
+    "cross-spawn": "4.0.2",
+    "css-loader": "0.26.1",
+    "detect-port": "1.0.1",
+    "dotenv": "2.0.0",
+    "eslint": "3.8.1",
+    "eslint-config-react-app": "^0.5.2",
+    "eslint-loader": "1.6.0",
+    "eslint-plugin-flowtype": "2.21.0",
+    "eslint-plugin-import": "2.0.1",
+    "eslint-plugin-jsx-a11y": "2.2.3",
+    "eslint-plugin-react": "6.4.1",
+    "extract-text-webpack-plugin": "1.0.1",
+    "file-loader": "0.10.0",
+    "filesize": "3.3.0",
+    "fs-extra": "0.30.0",
+    "gzip-size": "3.0.0",
+    "html-webpack-plugin": "2.24.0",
+    "http-proxy-middleware": "0.17.3",
+    "jest": "18.1.0",
+    "json-loader": "0.5.4",
+    "object-assign": "4.1.1",
+    "postcss-loader": "1.2.2",
+    "promise": "7.1.1",
+    "react-dev-utils": "^0.5.1",
+    "recursive-readdir": "2.1.1",
+    "strip-ansi": "3.0.1",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "1.14.0",
+    "webpack-dev-server": "1.16.2",
+    "webpack-manifest-plugin": "1.1.0",
+    "whatwg-fetch": "2.0.2"
  },
-  "keywords": [],
-  "author": "",
-  "license": "UNLICENSED",
  "dependencies": {
-    "@angular/common": "latest",
-    "@angular/compiler": "latest",
-    "@angular/core": "latest",
-    "@angular/forms": "latest",
-    "@angular/http": "latest",
-    "@angular/platform-browser": "latest",
-    "@angular/platform-browser-dynamic": "latest",
-    "@angular/router": "latest",
-    "angular-in-memory-web-api": "latest",
-    "bootstrap": "next",
-    "core-js": "latest",
-    "jquery": "latest",
-    "js-yaml": "latest",
-    "rxjs": "latest",
-    "systemjs": "latest",
-    "tether": "latest",
-    "zone.js": "latest"
+    "antd": "^2.7.4",
+    "axios": "^0.15.3",
+    "babel-plugin-import": "^1.1.1",
+    "enquire": "^0.0.2",
+    "install": "^0.8.7",
+    "js-yaml": "^3.8.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-intl": "^2.2.3"
  },
-  "devDependencies": {
-    "@angular/compiler-cli": "latest",
-    "@angular/platform-server": "latest",
-    "@types/bootstrap": "latest",
-    "@types/jquery": "latest",
-    "@types/js-yaml": "latest",
-    "@types/node": "latest",
-    "@types/tether": "latest",
-    "lite-server": "latest",
-    "rollup": "latest",
-    "rollup-plugin-commonjs": "latest",
-    "rollup-plugin-node-resolve": "latest",
-    "rollup-plugin-uglify": "latest",
-    "tslint": "latest",
-    "typescript": "latest"
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js --env=jsdom"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/polyfills.js"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
+    ],
+    "testEnvironment": "node",
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web"
+    }
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
  },
-  "repository": {}
+  "eslintConfig": {
+    "extends": "react-app"
+  }
 }
--- a/public/MyCardProduct.png
+++ b/public/MyCardProduct.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
--- a/public/logo.png
+++ b/public/logo.png
--- a/rollup-config.js
+++ b/rollup-config.js
-import nodeResolve from "rollup-plugin-node-resolve";
-import commonjs from "rollup-plugin-commonjs";
-import uglify from "rollup-plugin-uglify";
-
-//paths are relative to the execution path
-export default {
-  entry: 'app/main-aot.js',
-  dest: 'aot/dist/build.js', // output a single application bundle
-  sourceMap: true,
-  sourceMapFile: 'aot/dist/build.js.map',
-  format: 'iife',
-  plugins: [
-    nodeResolve({jsnext: true, module: true}),
-    commonjs({
-      include: ['node_modules/rxjs/**', 'node_modules/js-yaml/**'],
-      namedExports: {'js-yaml': ['safeLoad']}
-    }),
-    uglify()
-  ]
-}
--- a/scripts/build.js
+++ b/scripts/build.js
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.NODE_ENV = 'production';
+
+// Load environment variables from .env file. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+require('dotenv').config({silent: true});
+
+var chalk = require('chalk');
+var fs = require('fs-extra');
+var path = require('path');
+var url = require('url');
+var filesize = require('filesize');
+var gzipSize = require('gzip-size').sync;
+var webpack = require('webpack');
+var config = require('../config/webpack.config.prod');
+var paths = require('../config/paths');
+var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+var recursive = require('recursive-readdir');
+var stripAnsi = require('strip-ansi');
+
+var useYarn = fs.existsSync(paths.yarnLockFile);
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Input: /User/dan/app/build/static/js/main.82be8.js
+// Output: /static/js/main.js
+function removeFileNameHash(fileName) {
+  return fileName
+    .replace(paths.appBuild, '')
+    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
+}
+
+// Input: 1024, 2048
+// Output: "(+1 KB)"
+function getDifferenceLabel(currentSize, previousSize) {
+  var FIFTY_KILOBYTES = 1024 * 50;
+  var difference = currentSize - previousSize;
+  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
+  if (difference >= FIFTY_KILOBYTES) {
+    return chalk.red('+' + fileSize);
+  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
+    return chalk.yellow('+' + fileSize);
+  } else if (difference < 0) {
+    return chalk.green(fileSize);
+  } else {
+    return '';
+  }
+}
+
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+recursive(paths.appBuild, (err, fileNames) => {
+  var previousSizeMap = (fileNames || [])
+    .filter(fileName => /\.(js|css)$/.test(fileName))
+    .reduce((memo, fileName) => {
+      var contents = fs.readFileSync(fileName);
+      var key = removeFileNameHash(fileName);
+      memo[key] = gzipSize(contents);
+      return memo;
+    }, {});
+
+  // Remove all content but keep the directory so that
+  // if you're in it, you don't end up in Trash
+  fs.emptyDirSync(paths.appBuild);
+
+  // Start the webpack build
+  build(previousSizeMap);
+
+  // Merge with the public folder
+  copyPublicFolder();
+});
+
+// Print a detailed summary of build files.
+function printFileSizes(stats, previousSizeMap) {
+  var assets = stats.toJson().assets
+    .filter(asset => /\.(js|css)$/.test(asset.name))
+    .map(asset => {
+      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
+      var size = gzipSize(fileContents);
+      var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
+      var difference = getDifferenceLabel(size, previousSize);
+      return {
+        folder: path.join('build', path.dirname(asset.name)),
+        name: path.basename(asset.name),
+        size: size,
+        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
+      };
+    });
+  assets.sort((a, b) => b.size - a.size);
+  var longestSizeLabelLength = Math.max.apply(null,
+    assets.map(a => stripAnsi(a.sizeLabel).length)
+  );
+  assets.forEach(asset => {
+    var sizeLabel = asset.sizeLabel;
+    var sizeLength = stripAnsi(sizeLabel).length;
+    if (sizeLength < longestSizeLabelLength) {
+      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
+      sizeLabel += rightPadding;
+    }
+    console.log(
+      '  ' + sizeLabel +
+      '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
+    );
+  });
+}
+
+// Print out errors
+function printErrors(summary, errors) {
+  console.log(chalk.red(summary));
+  console.log();
+  errors.forEach(err => {
+    console.log(err.message || err);
+    console.log();
+  });
+}
+
+// Create the production build and print the deployment instructions.
+function build(previousSizeMap) {
+  console.log('Creating an optimized production build...');
+  webpack(config).run((err, stats) => {
+    if (err) {
+      printErrors('Failed to compile.', [err]);
+      process.exit(1);
+    }
+
+    if (stats.compilation.errors.length) {
+      printErrors('Failed to compile.', stats.compilation.errors);
+      process.exit(1);
+    }
+
+    if (process.env.CI && stats.compilation.warnings.length) {
+     printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
+     process.exit(1);
+   }
+
+    console.log(chalk.green('Compiled successfully.'));
+    console.log();
+
+    console.log('File sizes after gzip:');
+    console.log();
+    printFileSizes(stats, previousSizeMap);
+    console.log();
+
+    var openCommand = process.platform === 'win32' ? 'start' : 'open';
+    var appPackage  = require(paths.appPackageJson);
+    var publicUrl = paths.publicUrl;
+    var publicPath = config.output.publicPath;
+    var publicPathname = url.parse(publicPath).pathname;
+    if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
+      // "homepage": "http://user.github.io/project"
+      console.log('The project was built assuming it is hosted at ' + chalk.green(publicPathname) + '.');
+      console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
+      console.log();
+      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
+      console.log('To publish it at ' + chalk.green(publicUrl) + ', run:');
+      // If script deploy has been added to package.json, skip the instructions
+      if (typeof appPackage.scripts.deploy === 'undefined') {
+        console.log();
+        if (useYarn) {
+          console.log('  ' + chalk.cyan('yarn') +  ' add --dev gh-pages');
+        } else {
+          console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
+        }
+        console.log();
+        console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
+        console.log();
+        console.log('    ' + chalk.dim('// ...'));
+        console.log('    ' + chalk.yellow('"scripts"') + ': {');
+        console.log('      ' + chalk.dim('// ...'));
+        console.log('      ' + chalk.yellow('"predeploy"') + ': ' + chalk.yellow('"npm run build",'));
+        console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
+        console.log('    }');
+        console.log();
+        console.log('Then run:');
+      }
+      console.log();
+      console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
+      console.log();
+    } else if (publicPath !== '/') {
+      // "homepage": "http://mywebsite.com/project"
+      console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
+      console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
+      console.log();
+      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
+      console.log();
+    } else {
+      if (publicUrl) {
+        // "homepage": "http://mywebsite.com"
+        console.log('The project was built assuming it is hosted at ' + chalk.green(publicUrl) +  '.');
+        console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
+        console.log();
+      } else {
+        // no homepage
+        console.log('The project was built assuming it is hosted at the server root.');
+        console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
+        console.log('For example, add this to build it for GitHub Pages:')
+        console.log();
+        console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
+        console.log();
+      }
+      var build = path.relative(process.cwd(), paths.appBuild);
+      console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
+      console.log('You may also serve it locally with a static server:')
+      console.log();
+      if (useYarn) {
+        console.log('  ' + chalk.cyan('yarn') +  ' global add pushstate-server');
+      } else {
+        console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
+      }
+      console.log('  ' + chalk.cyan('pushstate-server') + ' ' + build);
+      console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:' + (process.env.PORT || 9000));
+      console.log();
+    }
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml
+  });
+}
--- a/scripts/start.js
+++ b/scripts/start.js
--- a/scripts/test.js
+++ b/scripts/test.js
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Load environment variables from .env file. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+require('dotenv').config({silent: true});
+
+const jest = require('jest');
+const argv = process.argv.slice(2);
+
+// Watch unless on CI or in coverage mode
+if (!process.env.CI && argv.indexOf('--coverage') < 0) {
+  argv.push('--watch');
+}
+
+
+jest.run(argv);
--- a/src/App.css
+++ b/src/App.css
+.App-Logo {
+  width: 120px;
+  height: 31px;
+  border-radius: 6px;
+  margin: 16px 24px 16px 0;
+  float: left;
+  display: flex;
+  align-items: center;
+}
+
+.App-Logo span {
+  font-size: 1rem;
+  color: rgba(255,255,255, 0.75)
+}
+
+.App-Poster {
+  width: 100%; 
+  height: auto;
+  max-width: 100%; 
+}
+
+.App-Poster-Content .ant-btn {
+  margin: 1.2rem 0
+}
+
+.App-Content1 {
+  padding: 50px;
+  background: #333;
+}
+
+.App-Content2 {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px;
+  background: #333;
+}
+
+.App-CardList {
+  padding: 4vh 4vw;
+}
+
+.App-CardList .ant-row {
+  margin: -8px;
+}
+.App-CardList .ant-row > div {
+  padding: 1vh 1vw;
+}
+
+.App-Card-content {
+  margin-bottom: 2vh;
+  white-space: pre;
+}
+
+.ant-layout .ant-layout-header {
+  background: #404040
+}
\ No newline at end of file
--- a/src/App.js
+++ b/src/App.js
+import React, { Component } from 'react'
+import enquire from 'enquire.js'
+import * as yaml from 'js-yaml'
+
+import './App.css'
+import config from './config'
+import i18Data from '../i18data.json'
+
+import { FormattedMessage } from 'react-intl'
+import { Layout, Row, Col, Button, Card, Timeline} from 'antd'
+
+const { Content, Footer, Header} = Layout
+
+
+import Nav from './Nav'
+
+export default class App extends Component {
+  constructor(props){
+    super(props)
+
+    this.state = {
+      isMobile: false,
+      stats: {signups: null, online: null },
+      latest: {win32: {},drawin: {}},
+      platform: navigator.platform.match(/Mac/i) ? 'drawin' : 'win32'
+    }
+  }
+
+  async componentDidMount(){
+    enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
+      match: () => {
+        this.setState({isMobile: true})
+      },
+      unmatch: () => {
+        this.setState({isMobile: false})
+      }
+    })
+
+    const initState = {
+      stats: {
+        signups: await this.get_stats_signups(),
+        online: await this.get_stats_online()
+      }
+    }
+    const initLatest = {
+      latest: {
+        win32: await this.get_latest_win32(),
+        drawin: await this.get_latest_drawin()
+      }
+    }
+
+    this.setState(initState)
+    this.setState(initLatest)
+  }
+
+  async get_latest_win32() {
+    let rawData = await fetch(config.win32_url).then(res => res.text())
+    let data = yaml.safeLoad(rawData)
+
+    data.url = 'https://r.my-card.in/downloads/' + data.path
+    return data
+  }
+
+  async get_stats_signups() {
+    let params = new URLSearchParams();
+    params.set('api_key', config.ygobbs.api_key);
+    params.set('api_username', config.ygobbs.api_username);
+    let data = await fetch(`${config.ygobbs.dashboard}?${params.toString()}`).then(res => res.json())
+
+    return data.global_reports.find((item: any) => item.type === 'signups').total
+  }
+
+  async get_stats_online() {
+    let rawText = await fetch('https://chat.mycard.moe/stats/online').then(res => res.text())
+    let document = new DOMParser().parseFromString(rawText, 'text/xml')
+    let node = document.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)') || {}
+    return parseInt(node.textContent)
+  }
+
+  async get_latest_drawin() {
+    let data = await fetch(config.drawin_url).then(res => res.json())
+    data.url = data.url.replace('-mac.zip', '.dmg').replace('https://wudizhanche.mycard.moe/downloads/', 'https://r.my-card.in/downloads/')
+
+    return data
+  }
+
+  render() {
+    const {latest, isMobile, stats} = this.state
+    const {language} = this.props
+    const realData = i18Data[language] ? i18Data[language] : i18Data['zh-CN']
+
+    return (
+      <Layout>
+        <Header>
+          <Nav isMobile={isMobile}/>
+        </Header>
+
+        <Content className="App-Content1">
+          {!isMobile ? 
+            (<Row type="flex" justify="space-around" align="middle">
+              <Col span={12} push={1}>
+              <div className="App-Poster-Content">
+                <div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}>
+                  萌卡
+                  <span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}>
+                    Beta
+                  </span>
+                </div>
+                <div style={{color: "#ccc"}}>
+                  MyCard 同人游戏平台
+                </div>
+                <div style={{color: "#ccc"}}>
+                  萌卡平台支持 
+                  <DownLoadLink text='Windows' data={latest.win32} />  与 
+                  <DownLoadLink text='Mac' data={latest.drawin} /> 
+                  操作系统
+                </div>
+
+                <a href={latest[this.state.platform].url}>
+                  <Button type="primary" icon="download" size='large'>
+                    <FormattedMessage id={"Download"}/>            
+                  </Button>
+                </a>
+                
+              </div>
+              </Col>
+              <Col span={12} pull={1}>
+                <img src={require('../public/MyCardProduct.png')} className="App-Poster"/>
+              </Col>
+            </Row>
+            ) : (
+            <div>
+              <Row>
+                <Col span={12}>
+                  <div className="App-Poster-Content">
+                  <div style={{ fontSize: '2rem', padding: '.8rem 0 ', color: "#eee"}}>
+                    萌卡
+                    <span style={{ fontSize: '1rem', color: "#eee", padding: '0 1vw',}}>
+                      Beta
+                    </span>
+                  </div>
+                  <div style={{color: "#ccc"}}>
+                    MyCard 同人游戏平台
+                  </div>
+                  <div style={{color: "#ccc"}}>
+                    萌卡平台支持 
+                    <DownLoadLink text='Windows' data={latest.win32} />  与 
+                    <DownLoadLink text='Mac' data={latest.drawin} /> 
+                    操作系统
+                  </div>
+
+                  <a href={latest[this.state.platform].url}>
+                    <Button type="primary" icon="download" size='large'>
+                      <FormattedMessage id={"Download"}/>            
+                    </Button>
+                  </a>
+                  
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={24}>
+                  <img src={require('../public/MyCardProduct.png')} className="App-Poster"/>
+                </Col>
+              </Row>
+            </div>
+          )}
+        </Content>
+
+        <Content>
+          <div className="App-CardList">
+            <Row>
+              <Col span="12">
+                <Card title={<FormattedMessage id={"CardTitle1"}/>} >
+                <p className="App-Card-content">
+                  <FormattedMessage id={"CardContent1"} />                                  
+                </p>
+                <Timeline pending={<a href="#"><FormattedMessage id={"CardAction1"}/></a>}>
+
+                  {realData.CardTimeLine1.map((item, i) => {
+                    return <Timeline.Item key={i}>{item}</Timeline.Item>
+                  })}
+                </Timeline>
+              </Card>
+              </Col>
+
+            <Col span="12">
+              <Card title={<FormattedMessage id={"CardTitle2"}/>} >
+                <p className="App-Card-content">
+                  <FormattedMessage id={"CardContent2"} />                                                  
+                </p>
+
+                <Timeline pending={<a href="#"><FormattedMessage id={"CardAction2"}/></a>}>
+
+                  {realData.CardTimeLine2.map((item, i) => {
+                    return <Timeline.Item key={i}>{item}</Timeline.Item>
+                  })}
+                </Timeline>
+              </Card>
+            </Col>
+            </Row>
+
+            <Row>
+              <Col span="12">
+                <Card title={<FormattedMessage id={"CardTitle3"}/>} >
+                  <p className="App-Card-content">
+                    <FormattedMessage id={"CardContent3"} />                                                  
+                  </p>
+
+                <Timeline pending={<a href="#"><FormattedMessage id={"CardAction3"}/></a>}>
+                  <Timeline.Item>{stats.signups || 'loading..'} 只萌新已加入萌卡</Timeline.Item>  
+                  <Timeline.Item>{stats.online || 'loading..'} 位爱的战士正在线游戏</Timeline.Item>  
+
+                  {realData.CardTimeLine3.map((item, i) => {
+                    return <Timeline.Item key={i}>{item}</Timeline.Item>
+                  })}
+                </Timeline>
+
+                </Card>
+              </Col>
+
+              <Col span="12">
+                <Card title={<FormattedMessage id={"CardTitle4"}/>} >
+                  <p className="App-Card-content">
+                    <FormattedMessage id={"CardContent4"} />                                                  
+                  </p>
+
+                  <Timeline pending={<a href="#"><FormattedMessage id={"CardAction4"} /></a>}>
+                    {realData.CardTimeLine4.map((item, i) => {
+                      return <Timeline.Item key={i}>{item}</Timeline.Item>
+                    })}
+                  </Timeline>
+                </Card>
+              </Col>
+            </Row>
+
+          </div>
+        </Content>
+
+        <Content className="App-Content2">
+          <p style={{color: '#eee', fontSize: '1.2rem'}} ><FormattedMessage id={"Welcome"} /></p>
+
+           <Button type="primary" icon="download" size='large' onClick={() => window.open(latest[this.state.platform].url)}>
+            <FormattedMessage id={"Download"}/>                                
+          </Button>
+        </Content>
+
+
+        <Footer style={{ textAlign: 'right' }}>
+          © MyCard 2017 all right reserved.
+        </Footer>
+      </Layout>
+    )
+  }
+}
+
+const DownLoadLink = ({text, data = {}}) => {
+
+  return (
+    <a href={data.url} style={{padding: '0 .5vw'}}>{text}</a>
+  )
+}
+
--- a/src/Nav.js
+++ b/src/Nav.js
+import React from 'react'
+import { Menu } from 'antd'
+import { FormattedMessage } from 'react-intl'
+
+export default class MyComponent extends React.Component {
+  render() {
+    
+    return (
+      <div>
+        <div className="App-Logo">
+          <img src={require("../public/logo.png")} style={{width: '40px', margin: '10px'}}/>
+          <span>MyCard</span>           
+        </div>
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['1']}
+          style={{ lineHeight: '64px' }}>
+
+          <Menu.Item key="1">
+            <FormattedMessage id={"Home"}/>            
+          </Menu.Item>
+          <Menu.Item key="2">
+            <a href="https://ygobbs.com/">
+              <FormattedMessage id={"BBS"}/>
+            </a>
+          </Menu.Item>
+        </Menu>
+      </div>
+    )
+  }
+}
--- a/src/Translate.js
+++ b/src/Translate.js
+import React from 'react'
+import { IntlProvider, addLocaleData } from 'react-intl'
+import en from 'react-intl/locale-data/en'
+import zh from 'react-intl/locale-data/zh'
+import localeData from '../i18n.json'
+
+
+addLocaleData([...en, ...zh])
+const language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
+
+const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+
+const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
+
+export default class Translate extends React.Component {
+
+    render() {
+    	return (
+	    	<IntlProvider locale={ language } messages={ messages }>
+					{React.cloneElement(this.props.Template, {language})}
+	    	</IntlProvider>
+	    )
+    }
+}
\ No newline at end of file
--- a/src/config.js
+++ b/src/config.js
+export default {
+  win32_url: 'https://wudizhanche.mycard.moe/downloads/latest.yml',
+  drawin_url: 'https://wudizhanche.mycard.moe/downloads/latest-mac.json',
+
+  ygobbs: {
+    api_key: 'dc7298a754828b3d26b709f035a0eeceb43e73cbd8c4fa8dec18951f8a95d2bc',
+    api_username: 'zh99998',
+    dashboard: 'https://ygobbs.com/admin/dashboard.json'
+  }
+}
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
--- a/src/index.js
+++ b/src/index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import Translate from './Translate'
+import './index.css'
+
+
+
+
+ReactDOM.render(
+  <Translate Template={<App/>} />,
+  document.getElementById('root')
+)
--- a/styles.css
+++ b/styles.css
-/* Move down content because we have a fixed navbar that is 50px tall */
-body {
-  font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
-  font-size: 15px;
-}
-
-.bg-faded {
-  background: linear-gradient( to bottom, #f7f7f7, #eee );
-}
-
-.jumbotron {
-  background: linear-gradient( to bottom, #f7f7f7, #eee );
-  border-radius:unset;
-  margin-bottom:unset;
-}
--- a/systemjs.config.js
+++ b/systemjs.config.js
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    paths: {
-      // paths serve as alias
-      'npm:': 'node_modules/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      app: 'app',
-
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-
-      'jquery': 'npm:jquery/dist/jquery.min.js',
-      'tether': 'npm:tether/dist/js/tether.min.js',
-      'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
-      'js-yaml': 'npm:js-yaml/dist/js-yaml.min.js'
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.js',
-        defaultExtension: 'js'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-})(this);
--- a/tsconfig-aot.json
+++ b/tsconfig-aot.json
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "node_modules/@types/"
-    ]
-  },
-  "files": [
-    "app/store.module.ts",
-    "app/main-aot.ts"
-  ],
-  "angularCompilerOptions": {
-    "genDir": "aot",
-    "skipMetadataEmit" : true
-  }
-}
--- a/tsconfig.json
+++ b/tsconfig.json
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  },
-  "compileOnSave": true,
-  "exclude": [
-    "node_modules/*",
-    "**/*-aot.ts"
-  ]
-}
--- a/tslint.json
+++ b/tslint.json
-{
-  "rules": {
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": [
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ]
-  }
-}
--- a/yarn.lock
+++ b/yarn.lock