index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <title>polkadot{.js}</title>
    <style>
      a { color: #ff8c00 !important; text-decoration: none }
      body { color: #4e4e4e; font-family: "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; height: 100vh; overflow: hidden; padding: 0 }
      canvas#dots { left: 0; position: fixed; top: 0; z-index: 0 }
      h3 { font-weight: 400; margin: 1rem 0; opacity: 0.95; text-transform: lowercase }
      p { margin: 1rem 0 }

      .box { background: rgba(255, 255, 255, 0.85); border-radius: 0.25rem; flex: 1 1; margin: 0.5rem; min-width: 15rem; max-width: 21rem; padding: 0 1.5rem; text-align: center; white-space: nowrap; width: 21rem; z-index: 2 }
      .container { align-items: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
      .desc { font-size:  0.95rem; opacity: 0.85; white-space: normal }
      .dot { border-radius: 50%; position: absolute; z-index: 0 }
      .header { align-items: center; background: rgba(255, 255, 255, 0.85); display: flex; left: 0; justify-content: space-between; padding: 0.5rem 1rem; position: fixed; right: 0; top: 0; z-index: 1 }
      .header div.logo { display: flex; align-items: center }
      .header img { height: 1.5rem; margin-right: 0.5rem; width: 1.5rem }
      .row { align-items: center; display: flex; justify-content: center }
    </style>
  </head>
  <body>
    <canvas id="dots"></canvas>
    <div class="container">
      <div class="row">
        <div class="box">
          <h3>Apps Wallet (hosted)</h3>
          <p class="desc">A wallet built on the polkadot-js stack. This version is updated alongside any changes to the code and always has the latest features.</p>
          <p><a href="https://polkadot.js.org/apps/">polkadot.js.org/apps</a></p>
        </div>
        <div class="box">
          <h3>Apps Wallet (IPFS)</h3>
          <p class="desc">An IPFS version of the polkadot-js wallet. This version is updated weekly but fits closer with the Web3 vision of decentralization.</p>
          <p><a href="https://dotapps.io/">dotapps.io</a></p>
        </div>
      </div>
      <div class="row">
        <div class="box">
          <h3>Extension</h3>
          <p class="desc">A browser-based vault for management of your account keys. It is meant to be used alongside wallets such as the apps UI.</p>
          <p><a href="https://polkadot.js.org/extension/">polkadot.js.org/extension</a></p>
        </div>
        <div class="box">
          <h3>Phishing</h3>
          <p class="desc">Community driven lists of urls and addresses of dishonest operators. Used ecosystem wide in wallets and extensions.</p>
          <p><a href="https://polkadot.js.org/phishing/">polkadot.js.org/phishing</a></p>
        </div>
      </div>
      <div class="row">
        <div class="box">
          <h3>Documentation</h3>
          <p class="desc">Developer documentation for all (most?) of the libraries under the polkadot-js umbrella. If you want to build, this is where to start.</p>
          <p><a href="https://polkadot.js.org/docs/">polkadot.js.org/docs</a></p>
        </div>
        <div class="box">
          <h3>code</h3>
          <p class="desc">The code for everything we do. API, utilities, crypto, tools, user-facing interfaces and documentation.</p>
          <p><a href="https://github.com/polkadot-js/">github.com/polkadot-js</a></p>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="logo">
        <img src="logo.svg" />
        <div>polkadot{.js}</div>
      </div>
      <a href="https://github.com/polkadot-js/polkadot-js.github.io/edit/master/index.html">edit page on github</a>
    </div>
    <script>
      if (window.self !== window.top) {
        window.top.location.href = window.location.href;
      }

      const canvas = document.getElementById('dots');
      const style = document.createElement('style');

      canvas.height = window.innerHeight * 4;
      canvas.width = window.innerWidth * 4;
      document.head.appendChild(style);

      const context = canvas.getContext('2d');
      let hue = Math.floor(Math.random() * 359);
      let counter = 0;

      function draw () {
        hue = (hue + 1) % 360;
        document.body.style.background = `hsl(${hue}, 45%, 85%)`;
        style.innerHTML = `a { color: hsl(${hue}, 45%, 45%) !important }`;

        if (++counter % 4 === 0) {
          const centerX = window.innerWidth * Math.random();
          const centerY = window.innerHeight * Math.random();
          const radius = (Math.floor(32000 * Math.random()) / 1000) + 8;

          context.beginPath();
          context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
          context.fillStyle = `hsl(${hue}, 45%, 75%)`;
          context.fill();
        }

        setTimeout(() => window.requestAnimationFrame(draw), 25);
      };

      draw();
    </script>
  </body>
</html>