<!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>