Mobile adaptation

angular.json

@@ -25,9 +25,10 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {
@@ -87,9 +88,10 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           }
         }
       }

package-lock.json

@@ -16,8 +16,10 @@
         "@angular/platform-browser": "^15.2.0",
         "@angular/platform-browser-dynamic": "^15.2.0",
         "@angular/router": "^15.2.0",
+        "bootstrap": "^5.3.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
+        "yaml": "^2.3.1",
         "zone.js": "~0.12.0"
       },
       "devDependencies": {
@@ -3233,6 +3235,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "15.2.9",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-15.2.9.tgz",
@@ -4203,6 +4215,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
+      "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.7"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -4819,6 +4849,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/critters": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.16.tgz",
@@ -11690,12 +11729,11 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/yargs": {

package.json

@@ -18,8 +18,10 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "bootstrap": "^5.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "yaml": "^2.3.1",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {

src/app/app.component.html

-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo {
-    height: 40px;
-    margin: 0 8px;
-  }
-
-  .toolbar #youtube-logo {
-    height: 40px;
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo:hover,
-  .toolbar #youtube-logo:hover {
-    opacity: 0.8;
-  }
-
-  .content {
-    display: flex;
-    margin: 82px auto 32px;
-    padding: 0 16px;
-    max-width: 960px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .card svg.material-icons path {
-    fill: #888;
-  }
-
-  .card-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  .card {
-    all: unset;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    background-color: #fafafa;
-    height: 40px;
-    width: 200px;
-    margin: 0 8px 16px;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    line-height: 24px;
-  }
-
-  .card-container .card:not(:last-child) {
-    margin-right: 0;
-  }
-
-  .card.card-small {
-    height: 16px;
-    width: 168px;
-  }
-
-  .card-container .card:not(.highlight-card) {
-    cursor: pointer;
-  }
-
-  .card-container .card:not(.highlight-card):hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-  }
-
-  .card-container .card:not(.highlight-card):hover .material-icons path {
-    fill: rgb(105, 103, 103);
-  }
-
-  .card.highlight-card {
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-    border: none;
-    width: auto;
-    min-width: 30%;
-    position: relative;
-  }
-
-  .card.card.highlight-card span {
-    margin-left: 60px;
-  }
-
-  svg#rocket {
-    width: 80px;
-    position: absolute;
-    left: -10px;
-    top: -24px;
-  }
-
-  svg#rocket-smoke {
-    height: calc(100vh - 95px);
-    position: absolute;
-    top: 10px;
-    right: 180px;
-    z-index: -10;
-  }
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-  .terminal {
-    position: relative;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 6px;
-    padding-top: 45px;
-    margin-top: 8px;
-    overflow: hidden;
-    background-color: rgb(15, 15, 16);
-  }
-
-  .terminal::before {
-    content: "\2022 \2022 \2022";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 4px;
-    background: rgb(58, 58, 58);
-    color: #c2c3c4;
-    width: 100%;
-    font-size: 2rem;
-    line-height: 0;
-    padding: 14px 0;
-    text-indent: 4px;
-  }
-
-  .terminal pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    color: white;
-    padding: 0 1rem 1rem;
-    margin: 0;
-  }
-
-  .circle-link {
-    height: 40px;
-    width: 40px;
-    border-radius: 40px;
-    margin: 8px;
-    background-color: white;
-    border: 1px solid #eeeeee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: 1s ease-out;
-  }
-
-  .circle-link:hover {
-    transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-  }
-
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-
-  svg#clouds {
-    position: fixed;
-    bottom: -160px;
-    left: -230px;
-    z-index: -10;
-    width: 1920px;
-  }
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-    .card-container > *:not(.circle-link) ,
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Welcome</span>
-    <div class="spacer"></div>
-    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
-      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
-        <rect width="400" height="400" fill="none"/>
-        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
-      </svg>
-    </a>
-    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
-      </svg>
-    </a>
-</div>
-
-<div class="content" role="main">
-
-  <!-- Highlight Card -->
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
-      <title>Rocket Ship</title>
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
-          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
-        </g>
-      </g>
-    </svg>
-
-    <span>{{ title }} app is running!</span>
-
-    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
-      <title>Rocket Ship Smoke</title>
-      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
-    </svg>
-
-  </div>
-
-  <!-- Resources -->
-  <h2>Resources</h2>
-  <p>Here are some links to help you get started:</p>
-
-  <div class="card-container">
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
-      <span>Learn Angular</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-      <span>CLI Documentation</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
-      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
-      <span>Angular Material</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
-      <span>Angular Blog</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
-      <span>Angular DevTools</span>
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-  </div>
-
-  <!-- Next Steps -->
-  <h2>Next Steps</h2>
-  <p>What do you want to do next with your app?</p>
-
-  <input type="hidden" #selection>
-
-  <div class="card-container">
-    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>New Component</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Angular Material</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add PWA Support</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Add Dependency</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Run and Watch Tests</span>
-    </button>
-
-    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-      <span>Build for Production</span>
-    </button>
-  </div>
-
-  <!-- Terminal -->
-  <div class="terminal" [ngSwitch]="selection.value">
-      <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
-      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
-      <pre *ngSwitchCase="'test'">ng test</pre>
-      <pre *ngSwitchCase="'build'">ng build</pre>
-  </div>
-
-  <!-- Links -->
-  <div class="card-container">
-    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
-        <title>Meetup Logo</title>
-        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
-        <title>Discord Logo</title>
-        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
-        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
-      </svg>
-    </a>
-  </div>
-
-  <!-- Footer -->
-  <footer>
-      Love Angular?&nbsp;
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
-        <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-          Star
-        </div>
-      </a>
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-      </a>
-  </footer>
-
-  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
-    <title>Gray Clouds Background</title>
-    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
-  </svg>
-
-</div>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<router-outlet></router-outlet>

src/app/app.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  template: `<app-layout></app-layout>`,
+  styles: []
 })
 export class AppComponent {
   title = 'mycardindex';

src/app/app.module.ts

-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {LayoutComponent} from './layout/layout.component';
+import {HttpClientModule} from "@angular/common/http";
+import { TableComponent } from './table/table.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    AppComponent,
+    LayoutComponent,
+    TableComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/layout/layout.component.css

+
+* {
+  color: white;
+}
+
+.my-custom-container {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+.logo {
+  height: 2em;
+  float: left;
+  margin: 0 8px;
+}
+
+.nav-link {
+  color: gray;
+  font-weight: normal;
+}
+
+a {
+  font-weight: bold;
+}
+
+a:hover {
+  color: white;
+}
+
+#background {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+#custom-nav {
+  z-index: 999;
+  position: relative;
+  background-color: #fff;
+}
+
+#banner {
+  flex: 1;
+  background-repeat: no-repeat;
+  background-size: 100% 100%; /* 将背景图片拉伸以填满元素 */
+  background-position: center;
+  background-image: url('src/assets/img/background.jpg');
+  height: calc(100vh - 70px); /* 填满视窗，减去导航栏的高度 */
+}
+
+@media (max-width: 768px) {
+  #banner {
+    background-size: cover;
+    background-position: left top;
+  }
+
+  svg {
+    height: 5vh;
+  }
+
+  .details p {
+    font-size: 0.7em
+  }
+
+}
+
+.cards {
+  transform: translateX(30%) translateY(-15%) scale(0.7);
+}
+
+@media (min-width: 768px) {
+  .cards {
+    transform: translateX(12%) translateY(-5%) scale(0.8);
+  }
+  .plant-grid .icon{
+    max-width: 10vw;
+  }
+}
+
+#down {
+  animation: slowBlink 1s infinite;
+}
+
+@keyframes slowBlink {
+  0% {
+    transform: translateY(0px);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: translateY(8px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 0.6;
+  }
+}
+
+:host {
+  overflow: hidden; /* 隐藏溢出内容 */
+}
+
+/*滚轮吸附*/
+.priorityElements {
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+  height: 100vh; /* 将滚动容器的高度设置为100vh */
+  scroll-padding-top: 4em; /* 添加底部内边距 */
+}
+
+.priority {
+  scroll-snap-align: start;
+  height: 80vh; /* 将每个滚动目标的高度设置为80vh */
+  /*scroll-snap-stop: normal; !* 在滚动时不停止吸附效果 *!*/
+}
+
+
+
+
+/*颜色方案*/
+.bg-blue-dark {
+  background-color: #021123;
+}
+
+.bg-blue-light {
+  background-color: #c5d0e8;
+
+}
+
+.text-blue-dark {
+  color: #021123;
+
+}
+
+
+.text-blue-light {
+  color: #c5d0e8;
+}
+
+
+.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;
+  }
+}
+
+.details svg {
+  animation: rotate 3s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotateY(0deg);
+  }
+  30% {
+    transform: rotateY(180deg);
+  }
+  60% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+/*轮播图*/
+.section-third-pic {
+  height: 25vh;
+  object-fit: cover;
+  overflow: hidden;
+  transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+.section-third-pic:hover {
+  transform: scale(0.95);
+  box-shadow: 0 0 20px rgba(0,0,0,0.2);
+}
+
+.carousel-fade .section-third-pic {
+  width: 80vw;
+  height: 30vh;
+  object-fit: cover;
+  overflow: hidden;
+  margin-bottom: 1em;
+}
+
+/*周边*/
+.product-lg img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+.image-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  cursor: pointer;
+}
+
+.overlay-content {
+  text-align: center;
+}
+
+.image-container:hover .overlay {
+  opacity: 1;
+}
+
+.p-s{
+  font-size: 1vw;
+}
+@media (max-width: 768px) {
+  .p-s{
+    font-size: 0.5em;
+  }
+}
+
+

src/app/layout/layout.component.html

+<div class="priorityElements">
+  <!--  第一版面 包含nav+banner-->
+  <div class="priority" id="background">
+    <nav class="navbar navbar-expand-lg navbar-expand-sm navbar-expand-md bg-black fixed-top">
+      <div class="container-fluid my-custom-container">
+        <a class="navbar-brand d-flex align-items-center" href="https://mycard.moe/">
+          <img class="logo" src="assets/img/mycardlogo.png" alt="Logo">MyCard
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
+                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-link flex-sm-fill text-sm-center" href="https://mycard.moe/">首页</a>
+            <a class="nav-link flex-sm-fill text-sm-center" href="https://ygobbs.com/">社区</a>
+            <a class="nav-link flex-sm-fill text-sm-center"
+               href="https://mycard.moe/ygopro/arena/index.html#/">决斗数据库</a>
+            <a class="nav-link flex-sm-fill text-sm-center" href="https://event.ygobbs.com/">赛事系统</a>
+            <a class="nav-link flex-sm-fill text-sm-center" href="https://accounts.moecube.com/profiles">用户中心</a>
+            <a class="nav-link flex-sm-fill text-sm-center" href="https://accounts.moecube.com/signup">注册账号</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <div id="banner" style="position:relative" class="home-banner text-center my-custom-container">
+      <div style="width:100%;position: relative;top:100px;text-align: center;">
+        <div class="container">
+          <div class="row">
+            <img
+              class="no-select col-lg-6 col-sm-10 custom-width"
+              draggable="false"
+              style="margin:0 auto;width:480px;position: relative;top:10VH;margin-bottom:0.5em;"
+              src="assets/img/font-2.png"
+            />
+          </div>
+        </div>
+        <br/>
+        <div class="container">
+          <div class="row">
+            <img class="no-select col-lg-8 col-sm-9 custom-width" draggable="false"
+                 style="width:580px;position: relative;margin:1em  auto 2em;"
+                 src="assets/img/desc.png"/>
+          </div>
+        </div>
+        <div style="margin:0 auto;position: relative; top:-50px;">
+          <a [href]="latest_current">
+            <img
+              src="assets/img/button-3_1.png"
+              minwidth="20vw"
+              style="position: relative;top:80px; border-radius: 3px; border: 1px solid #F2F6FC"
+            />
+          </a>
+        </div>
+      </div>
+
+      <div class="no-select" style="position:absolute;bottom:0;left:50%;z-index:0;color:#fff;font-size: 25px;">
+        <p style="position:relative;left: -50%;">向下
+          <svg id="down" t="1688375022718" class="icon" viewBox="0 0 1024 1024" version="1.1"
+               width="48" height="48">
+            <path
+              d="M533.333333 388.266667L358.4 213.333333 298.666667 277.333333l234.666666 234.666667L768 277.333333 708.266667 213.333333l-174.933334 174.933334z m0 260.266666l-174.933333-174.933333L298.666667 533.333333l234.666666 234.666667 234.666667-234.666667-59.733333-59.733333-174.933334 174.933333z"
+              fill="#ffffff" p-id="2645"></path>
+          </svg>
+          滚动
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!--  游戏王全卡模拟器-->
+  <div class="priority my-custom-container container-fluid text-center bg-blue-dark ">
+    <div class="row">
+      <div class="col-md-12 text-center">
+        <p class="h4 d-md-none mt-3 mb-5 text-blue-light">游戏王全卡模拟器YGOPro</p>
+        <h1 class="d-none d-md-block mt-5 mb-5 text-blue-light">游戏王全卡模拟器YGOPro</h1>
+      </div>
+    </div>
+    <div class="row">
+      <!--      左图-->
+      <div class="col-12 col-lg-6 mt-0 mb-0  mt-lg-5 mb-lg-5 d-flex justify-content-center ">
+        <div class="d-flex justify-content-center center cards">
+          <img class=" card-one col-6 col-lg-5" draggable="false" src="assets/img/55144522.jpg"/>
+          <img class=" card-two col-6 col-lg-5" draggable="false" src="assets/img/37818794.jpg"/>
+          <img class=" card-three col-6 col-lg-5" draggable="false" src="assets/img/17330916.jpg"/>
+        </div>
+      </div>
+      <!--      右字-->
+      <div class="col-12 col-lg-6 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
+        <div class="row">
+          <div class="plant-grid col-4 my-custom-container">
+            <svg class="icon" viewBox="0 0 1024 1024">
+              <path
+                d="M836.345598 257.721713l-28.427446 0c14.415314-24.441669 20.741393-47.75463 18.720364-69.379137-1.677199-18.098193-10.254551-43.982724-41.686425-64.611553-26.059516-17.143449-59.57177-21.348214-96.751554-12.059664-60.292178 15.137769-131.649366 67.180052-178.566932 130.073474C462.687386 178.852434 391.387503 126.809127 331.096349 111.671359c-37.210483-9.348925-70.751391-5.114484-96.807836 12.059664-31.404244 20.62883-39.983643 46.51336-41.659819 64.611553-2.02103 21.624507 4.246721 44.937468 18.720364 69.379137l-28.427446 0c-43.043329 0-78.073146 35.056424-78.073146 78.132498l0 100.636025c0 34.075073 22.474874 64.190975 54.991452 74.30431-3.090385 8.550747-4.708232 17.390066-4.708232 26.347065l0 301.923424c0 43.046399 35.069727 78.117149 78.117149 78.117149l552.85857 0c43.044352 0 78.05882-35.069727 78.05882-78.117149L864.166223 537.140587c0-9.014304-1.558495-17.882276-4.649903-26.376741 32.468482-10.169617 54.890144-40.285518 54.890144-74.274634l0-100.609419C914.405441 292.806789 879.390973 257.721713 836.345598 257.721713M786.10638 861.540931 537.426601 861.540931 537.426601 514.636037l248.680802 0c12.394285 0 22.445198 10.110265 22.445198 22.50455l0 301.923424C808.551578 851.459319 798.500665 861.540931 786.10638 861.540931M568.049039 257.721713c39.549761-45.61899 91.462085-81.468476 133.614114-92.043323 21.896706-5.487991 39.807634-3.985778 52.780087 4.565992 13.781888 9.055237 16.23373 17.129122 16.785292 23.227004 2.192945 22.35924-21.784142 52.504818-33.108049 64.250326L568.049039 257.721713zM858.763167 335.880817l0 100.609419c0 12.394285-10.024308 22.473851-22.417569 22.473851L537.426601 458.964086 537.426601 313.390593l298.918997 0C848.738859 313.390593 858.763167 323.488579 858.763167 335.880817M481.812979 514.636037l0 346.904894L233.24781 861.540931c-12.423961 0-22.477944-10.082636-22.477944-22.476921L210.769866 537.140587c0-12.394285 10.053983-22.50455 22.477944-22.50455L481.812979 514.636037zM248.039701 193.471386c0.547469-6.097882 3.03308-14.172791 16.756639-23.227004 12.882402-8.55177 30.794353-10.127661 52.809763-4.565992 41.917692 10.515494 93.773733 46.36805 133.410476 92.043323L281.088398 257.721713C270.948457 247.451812 245.81401 216.366839 248.039701 193.471386M160.445714 335.880817c0-12.391215 10.053983-22.490224 22.474874-22.490224l298.891368 0 0 145.573493L182.920588 458.964086c-12.420891 0-22.474874-10.079566-22.474874-22.473851L160.445714 335.880817z"
+                fill="#c5d0e8" p-id="2443"></path>
+            </svg>
+            <p class="col-md-12 text-center h2 mt-3 mb-3 text-blue-light">免费收录</p>
+            <p class="grid-desc small mt-2 mb-2 text-blue-light">氪金要素不存在的<br/>所有卡片都可直接使用<br/>随心组出想要的卡组
+            </p>
+          </div>
+          <div class="plant-grid col-4 my-custom-container">
+            <svg class="icon" viewBox="0 0 1025 1024">
+              <path
+                d="M852.255 322.528c0-65.712-53.442-119.172-119.132-119.172-65.711 0-119.171 53.461-119.171 119.172 0 65.69 53.46 119.132 119.171 119.132C798.813 441.66 852.255 388.217 852.255 322.528zM801.935 322.553c0 37.942-30.869 68.811-68.812 68.811-37.964 0-68.851-30.869-68.851-68.811 0-37.965 30.886-68.852 68.851-68.852C771.066 253.701 801.935 284.588 801.935 322.553z"
+                p-id="14655" fill="#c5d0e8"></path>
+              <path
+                d="M1021.905 40.751l-0.842-6.791-6.838-0.284c-12.267-0.509-24.382-0.767-36.007-0.767-86.79 0-168.182 13.548-241.91 40.269-59.076 21.41-113.379 51.273-161.401 88.757-71.787 56.035-107.4 111.497-116.092 126.169l-168.014 21.019L42.324 557.61l243.649 0c-3.286 67.805 12.286 120.663 46.338 157.203 45.252 48.56 111.951 55.81 147.681 55.81 7.315 0 13.461-0.293 18.057-0.621L498.049 991.09l270.026-248.559L768.075 595.908c66.683-49.787 121.513-109.535 163.006-177.636 33.736-55.371 58.766-116.336 74.395-181.204C1032.094 126.591 1022.334 44.204 1021.905 40.751zM709.63 591.844l0 133.51-153.111 134.47 0-98.691c0-27.767-22.847-50.357-50.929-50.357-2.153 0-14.174 1.402-25.597 1.402-44.742 0-79.152-12.588-102.276-37.414-25.257-27.116-36.634-69.198-32.902-121.704 0.967-13.792-3.946-27.567-13.48-37.793-9.54-10.233-22.947-16.102-36.783-16.102L183.466 499.165 317.96 364.672l152.091-19.062c16.077-1.985 30.302-11.686 38.022-25.895 5.076-9.171 127.185-222.971 457.649-228.224-0.696 92.773-27.065 305.992-235.611 459.79C717.287 560.744 709.63 575.908 709.63 591.844z"
+                p-id="14656" fill="#c5d0e8"></path>
+              <path
+                d="M242.325 696.294c-24.879-44.079-24.358-82.709-24.351-83.078l0.429-17.049L0 766.072l132.946 22.13L44.695 923.239l181.519-46.792 44.229 110.606L437.39 820.088l-14.037-3.358C337.849 796.275 275.251 754.628 242.325 696.294zM188.355 810.215c9.456-14.196 10.984-32.138 4.087-47.996-6.875-15.806-20.994-26.886-37.749-29.636l-13.533-2.255 37.999-29.537c12.287 27.803 29.561 53.445 51.45 76.349 26.682 27.922 59.684 51.039 98.229 68.828l-37.048 37.048-13.945-34.84c-7.559-18.906-26.441-31.609-46.986-31.609-4.042 0-8.078 0.49-12.014 1.462l-42.831 10.683L188.355 810.215z"
+                p-id="14657" fill="#c5d0e8"></path>
+            </svg>
+            <p class="col-md-12 text-center h2 mt-3 mb-3 text-blue-light">自动更新</p>
+            <p class="grid-desc small mt-2 mb-2 text-blue-light">无需为更新而烦恼<br/>客户端会自动更新</p>
+          </div>
+          <div class="plant-grid col-4 my-custom-container">
+            <svg class="icon" viewBox="0 0 1024 1024">
+              <path
+                d="M909.135926 920.271544 684.514075 920.271544c-0.206708-0.684592-0.446162-1.36509-0.730641-2.037403l-50.870598-120.131031c37.015032-14.876826 70.860884-36.009122 100.236935-62.078871l21.500687 21.499663-24.105001 24.105001c-7.79043 7.79043-7.79043 20.421098 0 28.211529 3.895727 3.89368 8.999978 5.842055 14.105253 5.842055s10.209526-1.948375 14.105253-5.842055l76.41846-76.41846c7.79043-7.79043 7.79043-20.421098 0-28.211529-7.792477-7.788383-20.419052-7.788383-28.211529 0l-24.102954 24.102954-21.439288-21.439288c50.609655-56.55404 82.84073-129.873929 87.193875-210.493062l28.603455 0 0 33.911344c0 11.016915 8.931416 19.947308 19.947308 19.947308s19.947308-8.930393 19.947308-19.947308L917.112598 423.574065c0-11.016915-8.931416-19.947308-19.947308-19.947308s-19.947308 8.930393-19.947308 19.947308l0 33.911344-28.754904 0c-4.828982-79.310324-36.633339-151.443178-86.342484-207.331046l20.738323-20.738323 24.102954 24.101931c3.895727 3.894703 8.999978 5.842055 14.105253 5.842055 5.106298 0 10.209526-1.948375 14.105253-5.843078 7.79043-7.79043 7.79043-20.420075 0-28.210505l-76.41846-76.416414c-7.792477-7.79043-20.419052-7.789407-28.211529 0.001023-7.79043 7.79043-7.79043 20.420075 0 28.210505l24.103978 24.102954-20.709671 20.709671c-56.417941-50.376341-129.473817-82.480526-209.794144-86.912465L524.142551 106.406448l33.911344 0c11.015891 0 19.947308-8.930393 19.947308-19.947308s-8.931416-19.947308-19.947308-19.947308L450.338638 66.511833c-11.015891 0-19.947308 8.930393-19.947308 19.947308s8.931416 19.947308 19.947308 19.947308l33.911344 0 0 28.694529c-79.846536 4.76656-152.438854 36.870746-208.53343 87.070055l-20.966521-20.966521 24.102954-24.102954c7.79043-7.79043 7.79043-20.421098 0-28.211529-7.792477-7.79043-20.419052-7.79043-28.211529 0l-76.416414 76.416414c-7.79043 7.79043-7.79043 20.421098 0 28.211529 3.894703 3.894703 9.001001 5.842055 14.105253 5.842055s10.210549-1.947352 14.105253-5.842055l24.102954-24.102954 21.026896 21.026896c-49.562812 55.847959-81.264838 127.869273-86.085634 207.043497l-30.30419 0 0-33.911344c0-11.016915-8.930393-19.947308-19.947308-19.947308s-19.947308 8.930393-19.947308 19.947308l0 107.717304c0 11.016915 8.930393 19.947308 19.947308 19.947308s19.947308-8.930393 19.947308-19.947308L131.175575 497.381048l30.153764 0c4.344958 80.482009 36.475749 153.690358 86.938048 210.204489l-21.727861 21.727861-24.102954-24.102954c-7.79043-7.786337-20.421098-7.788383-28.210505 0-7.79043 7.79043-7.791453 20.421098-0.001023 28.211529l76.416414 76.41846c3.895727 3.89368 8.999978 5.842055 14.105253 5.842055 5.104251 0 10.209526-1.948375 14.105253-5.842055 7.79043-7.79043 7.79043-20.421098 0-28.211529l-24.102954-24.103978 21.756513-21.756513c30.93557 27.514657 66.845431 49.541323 106.199741 64.549132l-47.684022 118.233821c-0.229221 0.568958-0.420579 1.144056-0.594541 1.720178L111.228267 920.271544c-11.016915 0-19.947308 8.931416-19.947308 19.947308s8.930393 19.947308 19.947308 19.947308l797.907659 0c11.015891 0 19.947308-8.931416 19.947308-19.947308S920.151817 920.271544 909.135926 920.271544zM617.355513 761.366418l-83.647095-197.532889c6.540973-2.212388 12.750395-5.145184 18.523889-8.725732l152.672168 152.671145C679.160137 730.269166 649.610124 748.500389 617.355513 761.366418zM454.918957 478.619752c0-27.600615 22.454408-50.053999 50.053999-50.053999 25.588795 0 46.739511 19.305695 49.687656 44.11473-0.373507 1.52575-0.593518 3.111874-0.593518 4.753257 0 1.882883 0.278339 3.697205 0.766456 5.423523-2.160199 25.622564-23.688515 45.815465-49.860595 45.815465C477.373365 528.672728 454.918957 506.219343 454.918957 478.619752zM484.249983 782.164093c-16.492626-1.11438-32.632211-3.532453-48.307216-7.182586l48.307216-119.777991L484.249983 782.164093zM524.145621 643.559315l55.108109 130.137942c-17.803481 4.483104-36.225039 7.385201-55.108109 8.565073L524.145621 643.559315zM733.176378 679.628812 580.664869 527.119349c5.760191-8.959046 9.983375-18.99154 12.273535-29.738301l215.703737 0C804.385187 567.007825 776.612657 630.374014 733.176378 679.628812zM808.490691 457.485409l-216.101803 0c-2.295276-9.492188-6.094812-18.399045-11.140735-26.456558l152.629189-152.629189C776.422322 326.979076 803.780413 389.164371 808.490691 457.485409zM705.694467 250.160503 553.141002 402.713968c-8.759501-5.579065-18.537192-9.685593-28.995381-11.965519L524.145621 174.97615C593.474616 179.308829 656.57884 206.954469 705.694467 250.160503zM484.249983 175.074388l0 216.032218c-10.006911 2.369977-19.367093 6.411013-27.777647 11.819187L303.96185 250.41633C352.754113 207.387327 415.393755 179.728384 484.249983 175.074388zM275.81172 278.688233l152.671145 152.671145c-4.942569 7.969509-8.665357 16.764825-10.92891 26.126031L201.454198 457.485409C206.15629 389.30047 233.412051 327.22467 275.81172 278.688233zM201.303772 497.381048l215.70169 0c2.261507 10.613732 6.407943 20.531616 12.059664 29.40675L276.512684 679.340239C233.222739 630.126374 205.552539 566.870702 201.303772 497.381048zM304.751842 707.523115 457.381032 554.894949c6.344498 3.972475 13.208836 7.184633 20.478404 9.488095L397.630183 763.311723C363.291097 750.321874 331.897086 731.296565 304.751842 707.523115zM420.865373 812.366975c20.467147 5.15951 41.657772 8.473999 63.384609 9.770528l0 30.312376-33.911344 0c-11.015891 0-19.947308 8.931416-19.947308 19.947308s8.931416 19.947308 19.947308 19.947308l107.717304 0c11.015891 0 19.947308-8.931416 19.947308-19.947308s-8.931416-19.947308-19.947308-19.947308l-33.911344 0 0-30.213116c24.365944-1.344624 48.058552-5.244444 70.827115-11.420097l46.350654 109.455901L377.347231 920.272567 420.865373 812.366975z"
+                fill="#c5d0e8" p-id="12849"></path>
+            </svg>
+            <p class="col-md-12 text-center h2 mt-3 mb-3 text-blue-light">丰富玩法</p>
+            <p class="grid-desc small mt-2 mb-2 text-blue-light">
+              2V2决斗/人机决斗<br/>竞技向卡组决斗<br/>娱乐向卡组决斗<br/>总有适合你的<br/></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--  作品展示-->
+  <div class="priority my-custom-container container-fluid text-center bg-blue-light">
+    <div class="row">
+      <div class="col-md-12 text-center">
+        <p class="h4 d-md-none mt-3 mb-3 text-blue-dark">代表作品</p>
+        <h1 class="d-none d-md-block mt-5 mb-5 text-blue-dark">代表作品</h1>
+      </div>
+    </div>
+    <!-- 大屏幕 -->
+    <div class="d-flex align-items-center">
+      <div class="d-none d-xl-block">
+        <div class="row">
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded" src="assets/img/ygopro-screenshot-1.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/ozns_1.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/df02_1.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded" src="assets/img/ygopro-screenshot-2.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/ozns_2.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/>
+            </div>
+          </div>
+          <div class="col-3 mb-4">
+            <div class="d-flex justify-content-center">
+              <img class="section-third-pic col-12 rounded"
+                   src="https://cdn02.moecube.com:444/store/en-US/assets/df02_2.jpg"/>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- 小屏幕轮播-->
+    <div class="d-xl-none carousel-fade" #carousel>
+      <div id="carousel2" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
+        <div class="carousel-inner">
+          <!--主图-->
+          <div class="carousel-item active">
+            <div class="row">
+              <div class="d-flex justify-content-center mb-4">
+                <img class="section-third-pic col-12 rounded"
+                     src="assets/img/ygopro-screenshot-1.jpg"/>
+              </div>
+              <div class="d-flex justify-content-center">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/ozns_1.jpg"/>
+              </div>
+            </div>
+          </div>
+          <!--轮播-->
+          <div class="carousel-item">
+            <div class="row">
+              <div class="d-flex justify-content-center mb-4 ">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_1.jpg"/>
+              </div>
+
+              <div class="d-flex justify-content-center">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/df02_1.jpg"/>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <div class="row">
+              <div class="d-flex justify-content-center mb-4">
+                <img class="section-third-pic col-12 rounded"
+                     src="assets/img/ygopro-screenshot-2.jpg"/>
+              </div>
+
+              <div class="d-flex justify-content-center">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/ozns_2.jpg"/>
+              </div>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <div class="row">
+              <div class="d-flex justify-content-center mb-4">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/eddyviolet_2.jpg"/>
+              </div>
+
+              <div class="d-flex justify-content-center">
+                <img class="section-third-pic col-12 rounded"
+                     src="https://cdn02.moecube.com:444/store/en-US/assets/df02_2.jpg"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--  原创周边-->
+  <div class="priority my-custom-container container-fluid text-center bg-blue-dark">
+    <div class="row">
+      <div class="col-md-12 text-center">
+        <p class="h4 d-md-none mt-4 mb-4 text-blue-light">原创周边</p>
+        <h1 class="d-none d-md-block mt-5 mb-4 text-blue-light">原创周边</h1>
+      </div>
+    </div>
+
+    <div class="d-flex align-items-center product-lg" style="height: 65vh;">
+      <div class="row">
+        <div class="col-6 lg-3 col-lg-3 mb-3 mb-lg-0">
+          <div class="d-flex justify-content-center image-container">
+            <img class="product-pic"
+                 src="https://gd1.alicdn.com/imgextra/i1/3326824106/O1CN01z6DnKm1gCardQ7XUR_!!3326824106.jpg"/>
+            <div class="overlay">
+              <div class="overlay-content my-custom-container">
+                <p class="p-s">MCPro五手坑人形牌挂件</p>
+                <p class="p-s">灰流丽、幽鬼兔、浮幽樱、屋敷童、儚无水木</p>
+                <a href="https://item.taobao.com/item.htm?id=605854592741" target="_blank" class="btn btn-primary">
+                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
+                    <path
+                      d="M895.6 860.048l0.144-0.016-64-512-0.144 0.016A31.888 31.888 0 0 0 800 320h-110.816l-1.52-22.864h-0.016C684 203.28 606.736 128 512 128s-172 75.28-175.648 169.136h-0.032L334.8 320H224c-16.32 0-29.632 12.256-31.6 28.048l-0.144-0.016-64 512 0.144 0.016c-0.16 1.312-0.4 2.592-0.4 3.952a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32c0-1.36-0.24-2.64-0.4-3.952zM400.176 301.36h-0.048C401.552 240.832 451.136 192 512 192s110.448 48.832 111.872 109.36h-0.048L625.056 320H398.944l1.232-18.64z m-80.112 240.512l0.144 0.016c-0.048 0.704-0.208 1.392-0.208 2.112a31.92 31.92 0 1 0 63.792 2.112l0.144 0.016L394.688 384h234.608l10.768 162.128 0.128-0.016A31.952 31.952 0 0 0 704 544c0-0.72-0.16-1.408-0.208-2.112l0.144-0.016L693.44 384h78.304l56 448H196.24l56-448h78.304l-10.48 157.872z"
+                      fill="#ffffff" p-id="2363"></path>
+                  </svg>
+                  购买</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-6 lg-3 col-lg-3 mb-3 mb-lg-0">
+          <div class="d-flex justify-content-center image-container">
+            <img class="product-pic"
+                 src="https://gd3.alicdn.com/imgextra/i3/3326824106/O1CN01DdpzJg1gCasU4R9ml_!!3326824106.jpg"/>
+            <div class="overlay">
+              <div class="overlay-content my-custom-container">
+                <p class="p-s">McPro原创卡垫</p>
+                <p class="p-s">闪刀姬露世圣诞卡垫</p>
+                <a href="https://item.taobao.com/item.htm?id=616864203942" target="_blank"
+                   class="btn btn-primary btn-xs">
+                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
+                    <path
+                      d="M895.6 860.048l0.144-0.016-64-512-0.144 0.016A31.888 31.888 0 0 0 800 320h-110.816l-1.52-22.864h-0.016C684 203.28 606.736 128 512 128s-172 75.28-175.648 169.136h-0.032L334.8 320H224c-16.32 0-29.632 12.256-31.6 28.048l-0.144-0.016-64 512 0.144 0.016c-0.16 1.312-0.4 2.592-0.4 3.952a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32c0-1.36-0.24-2.64-0.4-3.952zM400.176 301.36h-0.048C401.552 240.832 451.136 192 512 192s110.448 48.832 111.872 109.36h-0.048L625.056 320H398.944l1.232-18.64z m-80.112 240.512l0.144 0.016c-0.048 0.704-0.208 1.392-0.208 2.112a31.92 31.92 0 1 0 63.792 2.112l0.144 0.016L394.688 384h234.608l10.768 162.128 0.128-0.016A31.952 31.952 0 0 0 704 544c0-0.72-0.16-1.408-0.208-2.112l0.144-0.016L693.44 384h78.304l56 448H196.24l56-448h78.304l-10.48 157.872z"
+                      fill="#ffffff" p-id="2363"></path>
+                  </svg>
+                  购买</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-6 lg-3 col-lg-3 mb-3 mb-lg-0">
+          <div class="d-flex justify-content-center image-container">
+            <img class="product-pic"
+                 src="https://gd1.alicdn.com/imgextra/i2/3326824106/O1CN01nD82zW1gCavgN7T36_!!3326824106.jpg"/>
+            <div class="overlay">
+              <div class="overlay-content my-custom-container">
+                <p class="p-s">MCPro原创游戏王主题雕刻骰子</p>
+                <p class="p-s">埃及金还有系列家徽等等</p>
+                <a href="https://item.taobao.com/item.htm?id=638608427667" target="_blank" class="btn btn-primary">
+                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
+                    <path
+                      d="M895.6 860.048l0.144-0.016-64-512-0.144 0.016A31.888 31.888 0 0 0 800 320h-110.816l-1.52-22.864h-0.016C684 203.28 606.736 128 512 128s-172 75.28-175.648 169.136h-0.032L334.8 320H224c-16.32 0-29.632 12.256-31.6 28.048l-0.144-0.016-64 512 0.144 0.016c-0.16 1.312-0.4 2.592-0.4 3.952a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32c0-1.36-0.24-2.64-0.4-3.952zM400.176 301.36h-0.048C401.552 240.832 451.136 192 512 192s110.448 48.832 111.872 109.36h-0.048L625.056 320H398.944l1.232-18.64z m-80.112 240.512l0.144 0.016c-0.048 0.704-0.208 1.392-0.208 2.112a31.92 31.92 0 1 0 63.792 2.112l0.144 0.016L394.688 384h234.608l10.768 162.128 0.128-0.016A31.952 31.952 0 0 0 704 544c0-0.72-0.16-1.408-0.208-2.112l0.144-0.016L693.44 384h78.304l56 448H196.24l56-448h78.304l-10.48 157.872z"
+                      fill="#ffffff" p-id="2363"></path>
+                  </svg>
+                  购买</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-6 lg-3 col-lg-3 mb-3 mb-lg-0">
+          <div class="d-flex justify-content-center image-container">
+            <img class="product-pic"
+                 src="https://gd3.alicdn.com/imgextra/i4/3326824106/O1CN01ziXHUa1gCasZ4Uytx_!!3326824106.jpg"/>
+            <div class="overlay">
+              <div class="overlay-content my-custom-container">
+                <p class="p-s">McPro原创卡垫</p>
+                <p class="p-s">水灵使与火灵使</p>
+                <a href="https://item.taobao.com/item.htm?id=609176073733" target="_blank" class="btn btn-primary">
+                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
+                    <path
+                      d="M895.6 860.048l0.144-0.016-64-512-0.144 0.016A31.888 31.888 0 0 0 800 320h-110.816l-1.52-22.864h-0.016C684 203.28 606.736 128 512 128s-172 75.28-175.648 169.136h-0.032L334.8 320H224c-16.32 0-29.632 12.256-31.6 28.048l-0.144-0.016-64 512 0.144 0.016c-0.16 1.312-0.4 2.592-0.4 3.952a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32c0-1.36-0.24-2.64-0.4-3.952zM400.176 301.36h-0.048C401.552 240.832 451.136 192 512 192s110.448 48.832 111.872 109.36h-0.048L625.056 320H398.944l1.232-18.64z m-80.112 240.512l0.144 0.016c-0.048 0.704-0.208 1.392-0.208 2.112a31.92 31.92 0 1 0 63.792 2.112l0.144 0.016L394.688 384h234.608l10.768 162.128 0.128-0.016A31.952 31.952 0 0 0 704 544c0-0.72-0.16-1.408-0.208-2.112l0.144-0.016L693.44 384h78.304l56 448H196.24l56-448h78.304l-10.48 157.872z"
+                      fill="#ffffff" p-id="2363"></path>
+                  </svg>
+                  购买</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!--决斗数据库等-->
+  <!--  大屏幕-->
+  <div class="priority d-none d-lg-block my-custom-container container-fluid text-center bg-blue-light"
+       style="height: 65vh">
+    <div class="row">
+      <div class="col-12 col-9-lg col-lg-4 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
+        <div class="col-9 container-fluid text-center">
+          <app-table></app-table>
+        </div>
+      </div>
+      <!--决斗数据库-->
+      <div class="col-12 col-lg-4 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
+        <p style="font-size: 40px;color:#313154">决斗数据库</p>
+        <p style="font-size: 20px;color:#313154;">
+          实时 YGOPro 线上对战数据 <br/>
+          卡组与卡片使用数据 <br/>
+          实时玩家排行 <br/>
+          排表、打印实卡比赛卡表等特色功能 <br/>
+        </p>
+        <p style="font-size: 20px;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
+          月进行了 {{matchCount.count}} 场对战</p>
+        <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.moe/ygopro/arena")'>>>&nbsp;进入决斗数据库
+        </button>
+      </div>
+      <!--      全明星-->
+      <div class="col-4 col-lg-4 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
+        <p style="font-size: 40px;color:#313154">YGOPro全明星(YAS)</p>
+        <p style="font-size: 20px;color:#313154;">
+          每年我们会有两个赛季 <br/>
+          每个赛季都有奖励丰富的决斗大赛 - YAS <br/>
+          最强的决斗者们会在此相遇，争夺荣誉 <br/>
+          节假日更会举办各类趣味活动 <br/>
+          让你的游戏人生有趣起来 <br/>
+        </p>
+        <button class="btn btn-primary" (click)='navigateToUrl("https://event.ygobbs.com")'>>>&nbsp;查看近期赛事
+        </button>
+
+      </div>
+    </div>
+
+  </div>
+  <!--  小屏幕-->
+  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light" style="height:35em" >
+    <div class="row">
+      <div class=" mt-0 mb-0 mt-4 details">
+        <div class="col-9 container-fluid text-center">
+          <app-table></app-table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--决斗数据库-->
+  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light" >
+    <div class="col-12 mt-0 mb-0 details">
+      <p style="font-size: 1.6em;color:#313154">决斗数据库</p>
+      <p style="font-size: 1em;color:#313154;">
+        实时 YGOPro 线上对战数据 <br/>
+        卡组与卡片使用数据 <br/>
+        实时玩家排行 <br/>
+        排表、打印实卡比赛卡表等特色功能 <br/>
+      </p>
+      <p style="font-size: 20px;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
+        月进行了 {{matchCount.count}} 场对战</p>
+      <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.moe/ygopro/arena")'>>>&nbsp;进入决斗数据库
+      </button>
+    </div>
+    <!--      全明星-->
+    <div class="col-12 mt-0 mb-0 details mt-5">
+      <p style="font-size: 1.6em;color:#313154">YGOPro全明星(YAS)</p>
+      <p style="font-size: 1em;color:#313154">
+        每年我们会有两个赛季 <br/>
+        每个赛季都有奖励丰富的决斗大赛 - YAS <br/>
+        最强的决斗者们会在此相遇，争夺荣誉 <br/>
+        节假日更会举办各类趣味活动 <br/>
+        让你的游戏人生有趣起来 <br/>
+      </p>
+      <button class="btn btn-primary" (click)='navigateToUrl("https://event.ygobbs.com")'>>>&nbsp;查看近期赛事
+      </button>
+    </div>
+  </div>
+
+  <footer
+    class="footer container-fluid text-center text-white align-items-center bg-black custom-footer d-flex justify-content-center">
+    <p class="m-3">© MyCard 2021 all rights reserved.</p>
+  </footer>
+</div>
+
+
+
+
+

src/app/layout/layout.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layout/layout.component.ts

+import {HttpClient} from "@angular/common/http";
+import {map} from "rxjs/operators";
+import yaml from 'yaml';
+import {firstValueFrom} from "rxjs";
+import {Component, Inject, LOCALE_ID, OnInit, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
+import { HostListener } from '@angular/core';
+
+
+interface HomePageMatchCountDto {
+  count: number;
+  year: number;
+  month: number;
+}
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent implements OnInit, AfterViewInit {
+  matchCount: HomePageMatchCountDto = {
+    count: 100,
+    year: 1000,
+    month: 1
+  };
+
+  latest_win32 = this.http
+    .get('https://cdn02.moecube.com:444/downloads/latest.yml', {responseType: 'text'})
+    .pipe(map(rawData => 'https://cdn02.moecube.com:444/downloads/' + yaml.parse(rawData).path));
+
+  latest_linux = this.http
+    .get('https://cdn02.moecube.com:444/downloads/latest-linux.yml', {responseType: 'text'})
+    .pipe(map(rawData => 'https://cdn02.moecube.com:444/downloads/' + yaml.parse(rawData).path));
+
+  latest_drawin = this.http
+    .get('https://cdn02.moecube.com:444/downloads/latest-mac.yml', {responseType: 'text'})
+    .pipe(map((rawData) => 'https://cdn02.moecube.com:444/downloads/' + yaml.parse(rawData).path.replace('-mac.zip', '.dmg')));
+
+  latest_current = ''
+
+  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: { type: any; }) => 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 ?? '0');
+    })
+  );
+
+  constructor(private http: HttpClient, @Inject(LOCALE_ID) public locale: string) {
+  }
+
+
+  @ViewChild('carousel', { static: true }) carousel!: ElementRef;
+
+  ngAfterViewInit(): void {
+    const carouselElement = this.carousel.nativeElement;
+    const carousel = new (window as any)['bootstrap'].Carousel(carouselElement, {
+      interval: 2000, // 设置轮播间隔时间为2秒
+      pause: 'hover', // 鼠标悬停时是否暂停轮播
+      ride: true, // 自动开始轮播
+    });
+  }
+
+
+// 下载
+  async ngOnInit() {
+    if (navigator.platform.match(/Android/i)) {
+      this.latest_current = 'https://www.123pan.com/s/bKZKVv-m3sTd.html';
+    } else if (navigator.platform.match(/Mac/i)) {
+      this.latest_current = await firstValueFrom(this.latest_drawin);
+    } else if (navigator.platform.match(/Linux/i)) {
+      if (window.innerHeight > window.innerWidth) {
+        this.latest_current = 'https://www.123pan.com/s/bKZKVv-m3sTd.html';
+      } else {
+        this.latest_current = await firstValueFrom(this.latest_linux);
+      }
+
+    } else {
+      this.latest_current = await this.latest_win32.toPromise() as string;
+    }
+    this.matchCount = await this.http.get<HomePageMatchCountDto>('https://sapi.moecube.com:444/ygopro/arena/homepageCount', {
+      responseType: 'json'
+    }).toPromise() as HomePageMatchCountDto;
+  }
+
+
+  setLocale(locale: any) {
+    document.cookie = `locale=${locale}`;
+    location.reload();
+  }
+
+  navigateToUrl(url: string) {
+    location.href = url;
+  }
+
+
+}

src/app/table/table.component.html

+<table class="table table-white table-hover">
+  <thead>
+  <tr>
+    <th>Rank</th>
+    <th>Deck</th>
+    <th>Count</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of listOfData | slice:0:10; let i = index">
+    <td>{{ i+1 }}</td>
+    <td>{{ data.name }}</td>
+    <td>{{ data.count }}</td>
+  </tr>
+  </tbody>
+</table>

src/app/table/table.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.css']
+})
+export class TableComponent implements OnInit {
+  listOfData: ArenaDeck[] = [];
+  loading = true;
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.http
+      .get<ArenaDeck[]>('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
+        params: {
+          type: 'day',
+          source: 'mycard-athletic'
+        }
+      })
+      .subscribe((data: ArenaDeck[]) => {
+        this.listOfData = data;
+        this.loading = false;
+      });
+  }
+}
+
+interface ArenaDeck {
+  count: string;
+  name: string;
+  recent_time: string;
+  source: string;
+  tags: string[];
+}

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+::-webkit-scrollbar {height: 0;width: 0;color: transparent;}

tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
@@ -28,6 +29,7 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
   }
 }
+