2019 new versions

46450efc · paniuncle · f6af4a0f · 46450efc · 46450efc · 46450efc
Commit 46450efc authored May 11, 2019 by paniuncle
58 changed files
--- a/angular.json
+++ b/angular.json
@@ -10,25 +10,25 @@
      "prefix": "app",
      "schematics": {
        "@schematics/angular:class": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:component": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:directive": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:guard": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:module": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:pipe": {
-          "spec": false
+          "skipTests": true
        },
        "@schematics/angular:service": {
-          "spec": false
+          "skipTests": true
        }
      },
      "architect": {
@@ -42,14 +42,19 @@
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
            ],
            "styles": [
-              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
            "scripts": [],
-            "i18nLocale": "zh-CN"
+            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
@@ -67,7 +72,14 @@
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
            }
          }
        },
@@ -96,7 +108,7 @@
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
-              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
            "scripts": [],
@@ -119,34 +131,7 @@
          }
        }
      }
-    },
-    "mycard-store-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "mycard-store:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "mycard-store:serve:production"
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
    }
  },
  "defaultProject": "mycard-store"
 }
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "mycard-store",
-  "version": "1.0.1",
+  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
-    "start": "ng serve --aot --open",
+    "start": "ng serve",
-    "build": "npm run build:zh-CN && npm run build:en-US",
+    "build": "ng build",
-    "build:zh-CN": "ng build --prod --base-href https://cdn01.moecube.com/store/zh-CN/ --deploy-url https://cdn01.moecube.com/store/zh-CN/ --outputPath dist/zh-CN --i18n-locale zh-CN",
+    "test": "ng test",
-    "build:en-US": "ng build --prod --base-href https://cdn01.moecube.com/store/en-US/ --deploy-url https://cdn01.moecube.com/store/en-US/ --outputPath dist/en-US --i18n-locale en-US --i18n-file src/locale/messages.en-US.xlf",
+    "lint": "ng lint",
-    "i18n": "ng xi18n --output-path locale --i18n-locale zh-CN"
+    "e2e": "ng e2e"
  },
+  "private": true,
  "dependencies": {
-    "@angular/animations": "^6.1.1",
+    "@angular/animations": "~7.2.0",
-    "@angular/common": "^6.1.1",
+    "@angular/common": "~7.2.0",
-    "@angular/compiler": "^6.1.1",
+    "@angular/compiler": "~7.2.0",
-    "@angular/core": "^6.1.1",
+    "@angular/core": "~7.2.0",
-    "@angular/forms": "^6.1.1",
+    "@angular/forms": "~7.2.0",
-    "@angular/http": "^6.1.1",
+    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser": "^6.1.1",
+    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/platform-browser-dynamic": "^6.1.1",
+    "@angular/router": "~7.2.0",
-    "@angular/router": "^6.1.1",
+    "@types/yaml": "^1.0.2",
+    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
-    "ng-zorro-antd": "^1.2.0",
+    "jquery": "^3.4.1",
-    "rxjs": "^6.0.0",
+    "ng-bootstrap": "^1.6.3",
-    "yaml": "^1.0.0-rc.7",
+    "ng-zorro-antd": "^7.3.3",
+    "rxjs": "~6.3.3",
+    "tslib": "^1.9.0",
+    "yaml": "^1.5.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.7.2",
+    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/cli": "^6.1.2",
+    "@angular/cli": "~7.3.9",
-    "@angular/compiler-cli": "^6.1.1",
+    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "^6.1.1",
+    "@angular/language-service": "~7.2.0",
-    "codelyzer": "^4.4.2",
+    "@types/node": "~8.9.4",
-    "prettier": "^1.14.0",
+    "ts-node": "~7.0.0",
-    "tslint": "^5.11.0",
+    "tslint": "~5.11.0",
-    "typescript": "^2.9.2"
+    "typescript": "~3.2.2"
  }
 }
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
-/*@import '~antd/dist/antd.css';*/
-.App-Logo {
-  width: 120px;
-  height: 31px;
-  border-radius: 6px;
-  margin: 16px 40px 16px 0;
-  float: left;
-  display: flex;
-  align-items: center;
-}
-.ant-menu {
-  padding-top: 2px;
-  font-size: 10pt;
-}
-.ant-menu-dark {
-  background-color: #404040;
-}
-.ant-menu-dark, .ant-menu-dark.ant-menu-horizontal {
-  border-bottom-color: #404040;
-}
-.ant-menu.ant-menu-dark .ant-menu-item-selected {
-  background-color: transparent;
-  color: #fff;
-}
-.App-Poster {
-  margin-top: 10px;
-  width: 295px;
-  height: auto;
-  max-width: 100%;
-}
-.App-Content1 {
-  height: 450px;
-  background: url(../assets/front-page-background.jpg);
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-  width: 100%;
-  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
-  padding-top: 18px;
-}
-.App-Content2 {
-  display: flex;
-  justify-content: space-between;
-  padding: 50px 0px 50px 60px;
-  background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #3d75a2 0%, #091a4b 95%);
-  color: #eee;
-  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
-}
-.App-CardList {
-  padding: 4vh 4vw;
-}
-.App-CardList .ant-row {
-  margin: -8px;
-}
-.App-CardList .ant-row > div {
-  padding: 1vh 1vw;
-}
-.App-CardList .ant-btn {
-  position: absolute;
-  bottom: 20px;
-}
-.App-Card-content {
-  margin-bottom: 2vh;
-  white-space: pre-line;
-  font-size: 12px;
-}
-nz-card {
-  padding-bottom: 26px;
-}
-.ant-card-bordered {
-  height: 100%;
-}
-.ant-col-12 {
-  padding: 10px;
-}
-.ant-card-body {
-  padding-bottom: 50px;
-}
-.ant-layout .ant-layout-header {
-  background: #404040
-}
-.font-C-Gray {
-  color: #ccc;
-}
-.App-Poster-Content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.App-Poster-Content .title {
-  margin-top: -20px;
-  margin-bottom: -5px;
-  font-size: 1.3rem;
-  color: #eee
-}
-.App-Poster-Content a:not(.ant-btn) {
-  padding: 0 .5vw;
-  margin-top: 8px
-}
-.App-Poster-Content .title .sub {
-  font-size: 0.7rem;
-  color: #eee;
-  padding: 0 0.4vw
-}
-.ant-layout-content > p {
-  color: #eee;
-  font-size: 1.2rem
-}
-.ant-layout-footer {
-  display: flex;
-  justify-content: space-between;
-}
-.ant-card-head-title {
-  font-size: 1.5rem;
-}
-.ant-timeline-item-content {
-  padding: 0 0 0px 24px;
-}
-nz-timeline-item::ng-deep .ant-timeline-item {
-  font-size: 12px;
-  padding-bottom: 12px;
-}
-nz-timeline-item::ng-deep .ant-timeline-item-last .ant-timeline-item-content {
-  min-height: initial;
-}
-.ant-timeline-item-last .ant-timeline-item-content {
-  min-height: 0px;
-}
-.ant-timeline > .ant-timeline-item-pending, .ant-timeline > .ant-timeline-item-pending > div {
-  padding-bottom: 0px;
-}
-#Card3Button {
-  margin-top: 20px;
-}
-.loading {
-  margin-top: 20px;
-  font-size: 20px;
-  color: white;
-}
-#Card4Button {
-  margin-top: 20px;
-}
-.square {
-  padding-right: 20px;
-  float: right;
-  cursor: pointer;
-  font-size: 22px;
-  color: #aaa;
-}
-.square:hover {
-  color: #fff;
-}
-.chidden {
-  animation: downotup 0.5s;
-  -webkit-animation: downotup 0.5s;
-  transform: translate(0, -1000px)
-}
-.cshow {
-  animation: uptodown 0.5s;
-  -webkit-animation: uptodown 0.5s;
-  transform: translate(0, 0px)
-}
-@keyframes uptodown {
-  from {
-    transform: translate(0, -1000px)
-  }
-  to {
-    transform: translate(0, 0px)
-  }
-}
-@keyframes downotup {
-  from {
-    transform: translate(0, 0px)
-  }
-  to {
-    transform: translate(0, -1000px)
-  }
-}
-.MoeCubeProduct {
-  max-width: 370px;
-}
-#Welcome {
-  margin-top: 10px;
-  font-size: 1.3rem;
-}
-.preline {
-  white-space: pre-line;
-}
-#downloadbot {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  height: 40px;
-  width: 180px
-}
-.changelanguage {
-  display: flex;
-  line-height: 30px;
-}
-.changelanguage > i {
-  line-height: 30px;
-}
-.changelanguage > img {
-  margin-right: 10px;
-}
-li > .changelanguage {
-  display: flex;
-  line-height: 30px;
-}
-#apps {
-  padding: 1vh 4vw 4vh 4vw;
-}
-#apps img {
-  padding: 10px;
-  width: 100%;
-  object-fit: cover;
-  height: 16vw;
-}
-h2 {
-  padding-left: calc(4vw + 10px);
-  font-size: 1.5rem;
-  margin: 0;
-}
-nz-card::ng-deep .ant-card-head-title {
-  font-size: 1.5rem;
-  font-weight: initial;
-  color: rgba(0, 0, 0, .65);
-  line-height: 48px;
-  padding: 0;
-}
-p {
-  margin: 0;
-}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
-<app-title title="萌卡" i18n-title="@@MyCard"></app-title>
-<nz-layout class="layout">
-  <nz-header>
-    <div class="App-Logo">
-      <img alt="img" src="assets/logo.png" style=" width: 140px; margin: 10px">
-    </div>
-    <ul nz-menu nzTheme="dark" nzMode="horizontal" style="line-height: 64px;">
-      <li nz-menu-item [nzSelected]="true" i18n="@@Home"><a href="#">首页</a></li>
-      <li nz-menu-item i18n="@@BBS"><a href="https://ygobbs.com">社区</a></li>
-      <li nz-menu-item i18n="@@DataBase"><a href="https://mycard.moe/ygopro/arena/">数据库</a></li>
-      <li nz-menu-item i18n="@@Account"><a href="https://accounts.moecube.com/">用户中心</a></li>
-      <!--<li nz-menu-item i18n="@@navRegister" style="float: right">注册 | 登录</li>-->
-    </ul>
-  </nz-header>
-  <nz-content class="App-Content1">
-    <div nz-row nz-type="flex" nz-justify="space-around" nz-align="middle">
-      <div nz-col nzSpan="24" style="display: flex; flex-direction: column; align-items: center">
-        <img alt="img" src="assets/cubbit-full-512.png" class="App-Poster">
-        <div class="App-Poster-Content">
-          <div class="title">
-            <span i18n="@@MyCardeDoujinGamePlatform">萌卡同人游戏平台</span>
-            <span class="sub">Beta</span>
-          </div>
-          <div style="text-align:center">
-            <div class="font-C-Gray">
-              <span i18n="@@SupportBoth">MyCard同时支持</span>
-              <a [href]="(latest_win32 | async) || '#'">windows</a>
-              <span i18n="@@And">和</span>
-              <a [href]="(latest_drawin | async) || '#'">macOS</a>
-              <span i18n="@@OperationSystem">操作系统</span>
-            </div>
-            <a nz-button nzType="primary" [nzLoading]="!(latest_current | async)" [href]="latest_current | async">
-              <i class="anticon anticon-download"></i>
-              <span i18n="@@Download">立即安装</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nz-content>
-  <nz-content>
-    <div class="App-CardList">
-      <div nz-row nzType="flex" nzAlign="normal">
-        <div nz-col nzSpan="12">
-          <nz-card nzTitle="新世界的入口" i18n-nzTitle="@@CardTitle1">
-            <p class="App-Card-content" i18n="@@CardContent1">或许您曾听说过一些来自同人世界的传说
-              曾有过有无所不能的神奇网上社区，
-              存在过无数创造者共同创造的神奇游戏，
-              曾有所有人融洽相处的幻想乡...Dalao们所说的那个新世界，
-              萌新却怎么也不知道在哪里！
-              不过这一次，你也许找对地方了！
-              安装“萌卡”就是您需要做的第一步！
-              萌卡希望能为萌新打开同人创作新世界的大门!</p>
-            <a nz-button nzType="primary" [nzLoading]="!(latest_current | async)" [href]="latest_current | async">
-              <i class="anticon anticon-download"></i>
-              <span i18n="@@CardAction1">安装MyCard平台</span>
-            </a>
-          </nz-card>
-        </div>
-        <div nz-col nzSpan="12">
-          <nz-card nzTitle="为了爱而存在的萌卡" i18n-nzTitle="@@CardTitle2">
-            <p class="App-Card-content" i18n="@@CardContent2">如果有过同人创作的经历，
-              你应该会深深地了解到,
-              爱的一面是孤独的，忧伤的，边缘化的。
-              但只要你还相信爱，
-              它就必将创造出爱与忧伤的结晶，给生命赋予意义。
-              萌卡的创造者们，就是抛弃了顾虑，为了爱而努力的人。
-              因为有大家在，萌卡才会存在。
-              也正是萌卡存在的意义。
-              萌卡平台希望能为有爱的人提供可能！</p>
-            <a nz-button nzType="primary" href="mailto:zh99998@gmail.com"><i class="anticon anticon-plus-square-o"></i><span i18n="@@CardAction2">欢迎勾搭合作</span></a>
-          </nz-card>
-        </div>
-        <div nz-col nzSpan="12">
-          <nz-card nzTitle="黑科技创造新希望" i18n-nzTitle="@@CardTitle3">
-            <p class="App-Card-content" i18n="@@CardContent3">萌卡从诞生起就考虑到了为同人服务的复杂性与个性化需求，
-              于是萌卡为满足各种奇奇怪怪需求而开发了许多的黑科技！
-              这些点点滴滴的积累，或许就能够带动同人产业革新哦！
-              已实装黑科技功能:</p>
-            <nz-timeline>
-              <nz-timeline-item i18n="@@CardTimeLine4-1">能在Mac上玩东方系列及其他 Windows 游戏。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-2">在 PC 平台上玩部分非 PC 平台的游戏。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-3">为“FXTZ”等联机方式的游戏，解决联机的问题，实现流畅联机。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-4">自动保持游戏更新。同时支持第三方补丁（如汉化补丁）的更新。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-5">为游戏发布者定制自定义功能（参考 YGOPro）。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-6">为游戏提供在线存档保存功能（云存档）。</nz-timeline-item>
-              <nz-timeline-item i18n="@@CardTimeLine4-7">一键安装游戏，自动解决各种依赖问题。</nz-timeline-item>
-              <nz-timeline-item><a href="#" i18n="@@WillHaveFunctions">其他功能目标</a></nz-timeline-item>
-            </nz-timeline>
-            <a nz-button nzType="primary" href="mailto:zh99998@gmail.com"><i class="anticon anticon-heart"></i><span i18n="@@CardAction3">向萌立方建议新功能</span></a>
-          </nz-card>
-        </div>
-        <div nz-col nzSpan="12">
-          <nz-card nzTitle="孤独者的家园" i18n-nzTitle="@@CardTitle4">
-            <p class="App-Card-content" i18n="@@CardContent4">世界与我是那么格格不入，
-              我们总在搜索与我们相似的人，
-              ——同道之人，同好之人，同命之人。
-              在这个一切都被沦为工具的时代，
-              呼吸似乎都变得困难。
-              孤独的我们，
-              在无尽的大海中相互取暖，
-              多么的希望有一个共同的家园啊！</p>
-            <nz-timeline>
-              <nz-timeline-item i18n="@@IsRegisted" *ngIf="stats_signups | async">{{stats_signups | async}} 位萌新已加入萌卡</nz-timeline-item>
-              <nz-timeline-item i18n="@@IsPlaying" *ngIf="stats_online | async">{{stats_online | async}} 位爱的战士正在线进行游戏</nz-timeline-item>
-            </nz-timeline>
-            <div class="MoeCubeProduct">
-              <img alt="MoeCubeProduct" src="assets/moecube-product.png" style="width: 100%"/>
-            </div>
-            <a nz-button nzType="primary" href="https://ygobbs.com"><i class="anticon anticon-star"></i><span i18n="@@CardAction4">加入萌立方社区</span></a>
-          </nz-card>
-        </div>
-      </div>
-    </div>
-  </nz-content>
-  <h2 i18n="@@apps">代表作品</h2>
-  <div nz-row id="apps">
-    <div nz-col nzSpan="6">
-      <img alt="ygopro" src="assets/ygopro_1.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="OZ大乱斗NS" src="assets/ozns_1.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="Eddy紫" src="assets/eddyviolet_1.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="东方龙隐谈" src="assets/df02_1.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="ygopro" src="assets/ygopro_2.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="OZ大乱斗NS" src="assets/ozns_2.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="Eddy紫" src="assets/eddyviolet_2.jpg">
-    </div>
-    <div nz-col nzSpan="6">
-      <img alt="东方龙隐谈" src="assets/df02_2.jpg">
-    </div>
-  </div>
-  <nz-content class="App-Content2">
-    <div nz-col nzSpan="14">
-      <p id="Welcome" class="preline" i18n="@@Welcome">还等什么呢？
-        马上开始萌卡的二次元冒险！</p>
-        <a nz-button id="downloadbot" nzType="primary" nzSize='large' [nzLoading]="!(latest_current | async)" [href]="latest_current | async">
-          <i class="anticon anticon-download"></i>
-          <span i18n="@@Download">立即安装</span>
-        </a>
-      <p class="preline">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当
-        适度游戏益脑 过度游戏伤身 合理安排时间 享受健康生活</p>
-      </div>
-      <div nz-col nzSpan="10">
-      <p class="preline" i18n="@@SystemRequirements">系统需求
-        Windows Vista、7 或更新的版本
-        512 MB 内存
-        1 Ghz 或更快的处理器
-        Intel Mac、OS X 版本 10.11 (El Capitan) 或更新的版本。
-        1GB 硬盘空间（推荐）
-        互联网连接（推荐使用宽带）</p>
-      </div>
-  </nz-content>
-  <nz-footer>
-    <nz-dropdown>
-      <a nz-dropdown [ngSwitch]="locale" class="ant-dropdown-link changelanguage">
-        <ng-container *ngSwitchCase="'zh-CN'">
-          <img alt="img" src="assets/flag-cn.png"> 中文
-        </ng-container>
-        <ng-container *ngSwitchCase="'en-US'">
-          <img alt="img" src="assets/flag-us.png"> English
-        </ng-container>
-        <i class="anticon anticon-down"></i>
-      </a>
-      <ul nz-menu nzSelectable>
-        <li nz-menu-item class="changelanguage" (click)="setLocale('en-US')">
-          <img alt="img" src="assets/flag-us.png" /> English
-        </li>
-        <li nz-menu-item class="changelanguage" (click)="setLocale('zh-CN')">
-          <img alt="img" src="assets/flag-cn.png" /> 中文
-        </li>
-      </ul>
-    </nz-dropdown>
-    © MyCard 2018 all rights reserved.
-  </nz-footer>
-</nz-layout>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
-import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID } from '@angular/core';
+import { Component } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { map } from 'rxjs/operators';
-import yaml from 'yaml';
 @Component({
  selector: 'app-root',
-  templateUrl: './app.component.html',
+  template: `<app-layout></app-layout>`,
-  styleUrls: ['./app.component.css'],
+  styles: []
-  preserveWhitespaces: true,
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
-  latest_win32 = this.http
+  title = 'mycard-store';
-    .get('https://cdn01.moecube.com/downloads/latest.yml', { responseType: 'text' })
-    .pipe(map(rawData => 'https://cdn01.moecube.com/downloads/' + yaml.parse(rawData).path));
-  latest_drawin = this.http
-    .get('https://cdn01.moecube.com/downloads/latest-mac.yml', { responseType: 'text' })
-    .pipe(map((rawData) => 'https://cdn01.moecube.com/downloads/' + yaml.parse(rawData).path.replace('-mac.zip', '.dmg')));
-  latest_current = navigator.platform.match(/Mac/i) ? this.latest_drawin : this.latest_win32;
-  stats_signups = this.http
-    .get('https://ygobbs.com/admin/dashboard.json', {
-      params: { api_key: 'dc7298a754828b3d26b709f035a0eeceb43e73cbd8c4fa8dec18951f8a95d2bc', api_username: 'zh99998' }
-    })
-    .pipe(map((data: any) => data.global_reports.find(item => item.type === 'signups').total));
-  stats_online = this.http.get('https://api.moecube.com/stats/online', { responseType: 'text' }).pipe(
-    map(rawText => {
-      const doc = new DOMParser().parseFromString(rawText, 'text/xml');
-      const node = doc.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)');
-      return parseInt(node.textContent);
-    })
-  );
-  constructor(private http: HttpClient, @Inject(LOCALE_ID) public locale: string) {}
-  setLocale(locale) {
-    document.cookie = `locale=${locale}`;
-    location.reload();
-  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,20 +2,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HomeComponent } from './home/home.component';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-// import { registerLocaleData } from '@angular/common';
+import { registerLocaleData } from '@angular/common';
-// import zh from '@angular/common/locales/zh';
+import zh from '@angular/common/locales/zh';
-import { TitleComponent } from './title/title.component';
+import { BannerComponent } from './banner/banner.component';
+import {LayoutComponent} from "./layout/layout.component";
-// registerLocaleData(zh);
+registerLocaleData(zh);
 @NgModule({
-  declarations: [AppComponent, TitleComponent],
+  declarations: [
-  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, NgZorroAntdModule],
+    AppComponent,
-  // providers: [{ provide: NZ_I18N, useValue: zh_CN }],
+    HomeComponent,
+    BannerComponent,
+    LayoutComponent
+  ],
+  imports: [
+    BrowserModule,
+    NgZorroAntdModule,
+    FormsModule,
+    HttpClientModule,
+    BrowserAnimationsModule
+  ],
+  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
--- a/src/app/banner/banner.component.css
+++ b/src/app/banner/banner.component.css
+      [nz-carousel-content] {
+        text-align: center;
+        height: 160px;
+        line-height: 160px;
+        background: #364d79;
+        color: #fff;
+        overflow: hidden;
+      }
+      h3 {
+        color: #fff;
+      }
\ No newline at end of file
--- a/src/app/banner/banner.component.html
+++ b/src/app/banner/banner.component.html
+    <nz-carousel nzAutoPlay>
+      <div nz-carousel-content *ngFor="let index of array">
+        <h3>{{ index }}</h3>
+      </div>
+    </nz-carousel>
\ No newline at end of file
--- a/src/app/banner/banner.component.spec.ts
+++ b/src/app/banner/banner.component.spec.ts
+import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BannerComponent } from './banner.component';
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/banner/banner.component.ts
+++ b/src/app/banner/banner.component.ts
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrls: ['./banner.component.css']
+})
+export class BannerComponent {
+  array = [1, 2, 3, 4];
+}
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
+import { Component, OnInit } from '@angular/core';
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+  }
+}
--- a/src/app/layout/layout.component.css
+++ b/src/app/layout/layout.component.css
+.no-select {
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none;  /*webkit浏览器*/
+    -ms-user-select: none;   /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+}
+.nav {
+    background: #000000;
+}
+.nav > ul {
+    background: #000000;
+}
+.logo {
+    width: 120px;
+    height: 31px;
+    margin: 16px 24px 16px 0;
+    float: left;
+}
+.container {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    overflow-x: hidden;
+}
+.home-banner {
+    min-height: 720px;
+    min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    background-size: auto 100%;
+    background-image: url("../../assets/img/background.png");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.nav-affix {
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+}
+.download-button {
+    position: relative;
+    top: 70px;
+    left:245px;
+}
+.m-title {
+    display: inline;
+}
+.card-one {
+    position: relative;
+    display: inline;
+    transform: rotate(-15deg);
+    ms-transform: rotate(-15deg);
+    moz-transform: rotate(-15deg);
+    webkit-transform: rotate(-15deg);
+    o-transform: rotate(-15deg);
+    animation: card-one-move 4s infinite;
+    -webkit-animation: card-one-move 4s infinite; /* Safari 与 Chrome */
+}
+.card-two {
+    display: inline;
+    position: relative;
+    left: -140px;
+    top: 20px;
+    animation: card-two-move 4s infinite;
+    -webkit-animation: card-two-move 4s infinite;
+}
+.card-three {
+    display: inline;
+    position: relative;
+    left: -285px;
+    top: 60px;
+    transform: rotate(15deg);
+    ms-transform: rotate(15deg);
+    moz-transform: rotate(15deg);
+    webkit-transform: rotate(15deg);
+    o-transform: rotate(15deg);
+    animation: card-three-move 4s infinite;
+    -webkit-animation: card-three-move 4s infinite;
+}
+@keyframes card-one-move {
+    0% {
+        top: 0;
+        left: 0
+    }
+    25% {
+        top: 20px;
+        left: 10px
+    }
+    50% {
+        top: -20px;
+        left: -10px
+    }
+    100% {
+        top: 0;
+        left: 0
+    }
+}
+@-webkit-keyframes card-one-move /* Safari 与 Chrome */
+{
+    0% {
+        top: 20px;
+    }
+    25% {
+        top: 10px;
+    }
+    50% {
+        top: 0px;
+    }
+    100% {
+        top: 20px;
+    }
+}
+@keyframes card-two-move {
+    0% {
+        top: 20px;
+    }
+    25% {
+        top: 10px;
+    }
+    50% {
+        top: -10px;
+    }
+    100% {
+        top: 20px;
+    }
+}
+@-webkit-keyframes card-two-move /* Safari 与 Chrome */
+{
+    0% {
+        top: 20px;
+    }
+    25% {
+        top: 10px;
+    }
+    50% {
+        top: -10px;
+    }
+    100% {
+        top: 20px;
+    }
+}
+@keyframes card-three-move {
+    0% {
+        top: 60px;
+        left: -285px;
+    }
+    25% {
+        top: 40px;
+        left: -265px;
+    }
+    50% {
+        top: 20px;
+        left: -245px;
+    }
+    100% {
+        top: 60px;
+        left: -285px;
+    }
+}
+@-webkit-keyframes card-three-move /* Safari 与 Chrome */
+{
+    0% {
+        top: 20px;
+    }
+    25% {
+        top: 10px;
+    }
+    50% {
+        top: -10px;
+    }
+    100% {
+        top: 20px;
+    }
+}
+.plant-grid {
+    color: #ffffff;
+    text-align: center;
+}
+.plant-grid > i {
+    font-size: 100px;
+}
+.plant-title {
+    font-size: 30px;
+}
+.section-two {
+    height: 900px;
+    width: 100%;
+    background: #111111;
+    min-width: 1300px;
+    margin: 0 auto;
+}
+.section-two-container {
+    position: relative;
+    top: 130px;
+}
+.cards-group {
+    position: relative;
+    left: 100px;
+    top: 100px;
+    float: left;
+}
+.grid-group {
+    position: relative;
+    left: 600px;
+    top: -140px;
+    width: 700px;
+}
+.section-third {
+    min-height: 720px;
+    min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    background-size: auto 900px;
+    background-image: url("../../assets/img/background.png");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.section-third-container {
+    position: relative;
+    top: 130px;
+}
+.section-title {
+    text-align: center;
+    color: #ffffff;
+}
+.section-third-grid {
+    margin: 0 auto;
+    text-align: center;
+}
+.section-third-grid > div {
+    height: 220px;
+    margin-top: 10px;
+}
+.section-third-pic {
+    width: 300px;
+}
+.section-third-pic:hover {
+    animation: third-border 1s infinite;
+    -webkit-animation: third-border 1s infinite;
+}
+/* Chrome, Safari, Opera */
+@-webkit-keyframes third-border {
+    0% {
+        border: 0 solid;
+    }
+    25% {
+        border: 2px solid #CC6666;
+    }
+    50% {
+        border: 4px solid #CC6666;
+    }
+    75% {
+        border: 2px solid #CC6666;
+    }
+    100% {
+        border: 0 solid;
+    }
+}
+/* Standard syntax */
+@keyframes third-border {
+    0% {
+        border: 0 solid;
+    }
+    25% {
+        border: 2px solid #CC6666;
+    }
+    50% {
+        border: 4px solid #CC6666;
+    }
+    75% {
+        border: 2px solid #CC6666;
+    }
+    100% {
+        border: 0 solid;
+    }
+}
+.section-fourth {
+    height: 900px;
+    width: 100%;
+    background: #111111;
+    min-width: 1300px;
+    margin: 0 auto;
+}
+.section-fourth-container {
+    position: relative;
+    top: 170px;
+    width: 100%;
+}
+.section-fourth-row {
+    margin: 0 auto;
+    text-align: center;
+    align-items: center;
+}
+.section-fourth-bg {
+    text-align: center;
+    margin: 0 auto;
+    width: 300px;
+    height: 220px;
+    background: url('https://cdn01.moecube.com/store/zh-CN/assets/ozns_1.jpg');
+}
+.section-card-cover {
+    color: #ffffff;
+    height: 220px;
+    width: 100%;
+    float: right;
+    background: rgba(0, 0, 0, 0.8);
+    opacity: 0;
+}
+.section-card-cover:hover {
+    color: #ffffff;
+    height: 220px;
+    width: 100%;
+    float: right;
+    background: rgba(0, 0, 0, 0.8);
+    opacity: 1;
+}
+.section-card-body {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    top: 50px;
+}
+@keyframes iconShow {
+    0% {
+        transform: rotateY(0);
+        -webkit-transform: rotateY(0);
+    }
+    25% {
+        transform: rotateY(180deg);
+        -webkit-transform: rotateY(180deg); /* Safari 与 Chrome */
+    }
+    50% {
+        transform: rotateY(360deg);
+        -webkit-transform: rotateY(360deg); /* Safari 与 Chrome */
+    }
+    100% {
+        transform: rotateY(0deg);
+        -webkit-transform: rotateY(0deg); /* Safari 与 Chrome */
+    }
+}
+@-webkit-keyframes iconShow /* Safari 与 Chrome */
+{
+    0% {
+        transform: rotateY(0);
+        -webkit-transform: rotateY(0);
+    }
+    25% {
+        transform: rotateY(180deg);
+        -webkit-transform: rotateY(180deg); /* Safari 与 Chrome */
+    }
+    50% {
+        transform: rotateY(360deg);
+        -webkit-transform: rotateY(360deg); /* Safari 与 Chrome */
+    }
+    100% {
+        transform: rotateY(0deg);
+        -webkit-transform: rotateY(0deg); /* Safari 与 Chrome */
+    }
+}
+.icon {
+    animation: iconShow 2s 1;
+    -webkit-animation: iconShow 2s 2;
+}
+.section-fifth {
+    min-height: 720px;
+    min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    background-size: auto 900px;
+    background-image: url("../../assets/img/background.png");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.section-fifth-container {
+    position: relative;
+    top: 170px;
+    width: 100%;
+}
+.foot{
+    height:60px;
+    background: #111111;
+}
+.foot > p{
+    color: #ffffff;
+    font-size:16px;
+    text-align: center;
+    position: relative;
+    top:20px;
+}
+.down-icon{
+    position: relative;
+    animation: downIcon 1s infinite;
+    -webkit-animation: downIcon 1s infinite;
+}
+@-webkit-keyframes downIcon /* Safari 与 Chrome */
+{
+    0% {
+        top: 0;
+    }
+    25% {
+        top:10px;
+    }
+    50% {
+        top:20px;
+    }
+    100% {
+        top:0;
+    }
+}
--- a/src/app/layout/layout.component.html
+++ b/src/app/layout/layout.component.html
--- a/src/app/layout/layout.component.spec.ts
+++ b/src/app/layout/layout.component.spec.ts
+import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LayoutComponent } from './layout.component';
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
+import {Component, Inject, LOCALE_ID, OnInit} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {map} from "rxjs/operators";
+import yaml from 'yaml';
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent{
+  latest_win32 = this.http
+      .get('https://cdn01.moecube.com/downloads/latest.yml', { responseType: 'text' })
+      .pipe(map(rawData => 'https://cdn01.moecube.com/downloads/' + yaml.parse(rawData).path));
+  latest_drawin = this.http
+      .get('https://cdn01.moecube.com/downloads/latest-mac.yml', { responseType: 'text' })
+      .pipe(map((rawData) => 'https://cdn01.moecube.com/downloads/' + yaml.parse(rawData).path.replace('-mac.zip', '.dmg')));
+  latest_current = navigator.platform.match(/Mac/i) ? this.latest_drawin : this.latest_win32;
+  stats_signups = this.http
+      .get('https://ygobbs.com/admin/dashboard.json', {
+        params: { api_key: 'dc7298a754828b3d26b709f035a0eeceb43e73cbd8c4fa8dec18951f8a95d2bc', api_username: 'zh99998' }
+      })
+      .pipe(map((data: any) => data.global_reports.find(item => item.type === 'signups').total));
+  stats_online = this.http.get('https://api.moecube.com/stats/online', { responseType: 'text' }).pipe(
+      map(rawText => {
+        const doc = new DOMParser().parseFromString(rawText, 'text/xml');
+        const node = doc.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)');
+        return parseInt(node.textContent);
+      })
+  );
+  constructor(private http: HttpClient, @Inject(LOCALE_ID) public locale: string) {}
+  setLocale(locale) {
+    document.cookie = `locale=${locale}`;
+    location.reload();
+  }
+}
--- a/src/app/title/title.component.ts
+++ b/src/app/title/title.component.ts
-import { Component, Input, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-@Component({
-  selector: 'app-title',
-  template: ''
-})
-export class TitleComponent implements OnInit {
-  @Input()
-  title: string;
-  constructor(private titleService: Title) {}
-  ngOnInit() {
-    this.titleService.setTitle(this.title);
-  }
-}
--- a/src/assets/cubbit-full-512.png
+++ b/src/assets/cubbit-full-512.png
--- a/src/assets/df02_1.jpg
+++ b/src/assets/df02_1.jpg
--- a/src/assets/df02_2.jpg
+++ b/src/assets/df02_2.jpg
--- a/src/assets/eddyviolet_1.jpg
+++ b/src/assets/eddyviolet_1.jpg
--- a/src/assets/eddyviolet_2.jpg
+++ b/src/assets/eddyviolet_2.jpg
--- a/src/assets/flag-cn.png
+++ b/src/assets/flag-cn.png
--- a/src/assets/flag-us.png
+++ b/src/assets/flag-us.png
--- a/src/assets/front-page-background.jpg
+++ b/src/assets/front-page-background.jpg
--- a/src/assets/img/background.jpg
+++ b/src/assets/img/background.jpg
--- a/src/assets/img/background.png
+++ b/src/assets/img/background.png
--- a/src/assets/img/card-1.jpg
+++ b/src/assets/img/card-1.jpg
--- a/src/assets/img/card-2.jpeg
+++ b/src/assets/img/card-2.jpeg
--- a/src/assets/img/flower-left.png
+++ b/src/assets/img/flower-left.png
--- a/src/assets/img/flower-right.png
+++ b/src/assets/img/flower-right.png
--- a/src/assets/img/font-1.png
+++ b/src/assets/img/font-1.png
--- a/src/assets/img/font-2.png
+++ b/src/assets/img/font-2.png
--- a/src/assets/img/font-3.png
+++ b/src/assets/img/font-3.png
--- a/src/assets/img/plane-title.png
+++ b/src/assets/img/plane-title.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/moecube-product.png
+++ b/src/assets/moecube-product.png
--- a/src/assets/ozns_1.jpg
+++ b/src/assets/ozns_1.jpg
--- a/src/assets/ozns_2.jpg
+++ b/src/assets/ozns_2.jpg
--- a/src/assets/ygopro_1.jpg
+++ b/src/assets/ygopro_1.jpg
--- a/src/assets/ygopro_2.jpg
+++ b/src/assets/ygopro_2.jpg
--- a/src/browserslist
+++ b/src/browserslist
 # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
-# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
-# IE 9-11
+not IE 9-11
\ No newline at end of file
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
 // This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 export const environment = {
@@ -7,9 +7,10 @@ export const environment = {
 };
 /*
- * In development mode, to ignore zone related error stack frames such as
+ * For easier debugging in development mode, you can import the following file
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- * import the following file, but please comment it out in production mode
+ *
- * because it will have performance impact when throw error
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
 */
 // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/src/index.html
 <!doctype html>
-<html>
+<html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>MyCard</title>
+  <title>MycardStore</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

--- a/src/karma.conf.js
+++ b/src/karma.conf.js
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};
\ No newline at end of file
--- a/src/locale/messages.en-US.xlf
+++ b/src/locale/messages.en-US.xlf
--- a/src/locale/messages.xlf
+++ b/src/locale/messages.xlf
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,4 +9,4 @@ if (environment.production) {
 }
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+  .catch(err => console.error(err));
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -11,72 +11,53 @@
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
 */
 /***************************************************************************************************
 * BROWSER POLYFILLS
 */
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/weak-map';
-import 'core-js/es6/set';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-// import 'core-js/es7/reflect';
 /**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
 */
- (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
 * APPLICATION IMPORTS
 */
-import 'core-js/shim';
--- a/src/styles.css
+++ b/src/styles.css
 /* You can add global styles to this file, and also import other style files */
-body {
+body{
-  font-family: sans-serif;
+    height: 100%;
-  font-size: 12px;
 }
--- a/src/test.ts
+++ b/src/test.ts
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-declare const require: any;
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -5,7 +5,7 @@
    "types": []
  },
  "exclude": [
-    "src/test.ts",
+    "test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
--- a/src/tslint.json
+++ b/src/tslint.json
-{
-  "extends": "../tslint.json",
-  "rules": {
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
-    "radix": false
-  }
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,12 +9,14 @@
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
+    "importHelpers": true,
+    "esModuleInterop": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
-      "es2017",
+      "es2018",
      "dom"
    ]
  }