src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dockstore</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
    <link rel="manifest" href="manifest.json" />
    <meta name="theme-color" content="#21335B" />
    <meta
      name="Description"
      content="Dockstore, developed by the Cancer Genome Collaboratory, is an open platform used
     by the GA4GH for sharing Docker-based tools described with the Common Workflow Language (CWL), the Workflow
     Description Language (WDL), or Nextflow (NFL)"
    />

    <!--As suggested by Google Lighthouse audit, preload fonts-->
    <!--    <link rel="preload" href="src/assets/fonts/Gotham-Book.otf" as="font" crossorigin>-->
    <!--    <link rel="preload" href="src/assets/fonts/Gotham-Bold.otf" as="font" crossorigin>-->
    <!--    <link rel="preload" href="node_modules/font-awesome/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>-->
  </head>

  <body>
    <app-root>
      <style>
        app-root {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          color: white;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
          font-size: 2.5em;
          text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        }
        body {
          background: #21335b;
          margin: 0;
          padding: 0;
        }
        .loader {
          border: 8px solid #f3f3f3;
          border-top: 8px solid #487980;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
          margin-top: 10px;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        .tagline {
          font-size: 18px;
        }
      </style>

      Dockstore
      <p class="tagline">Create, Share, Use</p>
      <div class="loader"></div>
    </app-root>
  </body>
</html>