Arjun Porwal
aaac5f853f
* feat: Add Manrope and Unbounded font files * feat: Add new SVG assets for social media and backgrounds * feat: revamped completed ui for polkadot extension page * feat: update text color in style.css for improved readability * feat: add dynamic link for Firefox users in index.html * feat: redirect to top frame if in an iframe in index.html * fix: GitHub link * feat: adjust max-width for better responsiveness and update card layout in style.css * chore: minor change * chore: remove duplicate badge * chore: fixed footer styles
318 lines
10 KiB
HTML
318 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Polkadot-js extension, manage accounts for substrate based chains
|
|
</title>
|
|
<meta
|
|
name="description"
|
|
content="This browser extension for Polkadot, Kusama or any other substrate-base blockchain allows to keep all your accounts in one place while being able to interact with any website or application that support it."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
property="og:title"
|
|
content="Polkadot-js extension, manage accounts for substrate based chains"
|
|
/>
|
|
<meta property="og:url" content="https://polkadot-js.github.io/extension" />
|
|
<meta property="og:image" content="./logo.jpg" />
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:description"
|
|
content="This browser extension for Polkadot, Kusama or any other substrate-base blockchain allows to keep all your accounts in one place while being able to interact with any website or application that support it."
|
|
/>
|
|
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="headerWrapper">
|
|
<img id="logo" src="assets/header_logo.svg" />
|
|
<div class="header__launch" onclick="onLaunchExplorer()">
|
|
<div class="header__launch__title">
|
|
<p>
|
|
Launch Polkadot <br />
|
|
Developer Interface
|
|
</p>
|
|
<img id="logo" src="favicon.ico" />
|
|
</div>
|
|
<img src="assets/polkadot_explorer.svg" alt="Explorer" />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<h2>Explore Polkadot with user-friendly wallets.</h2>
|
|
<p>Access the Polkadot Ecosystem through these easy to use wallets.</p>
|
|
</section>
|
|
|
|
<!-- Extensions -->
|
|
<section class="cardWrapper">
|
|
<div class="desktop__extensions">
|
|
<div class="badge">For desktop</div>
|
|
|
|
<div class="card__items">
|
|
<!-- SubWallet -->
|
|
<div class="card__item">
|
|
<div>
|
|
<div class="card__header">
|
|
<img alt="SubWallet" src="assets/extensions/subwallet.svg" />
|
|
<a
|
|
target="_blank"
|
|
href="https://www.subwallet.app/download.html"
|
|
class="extension__cta"
|
|
>
|
|
Download
|
|
</a>
|
|
</div>
|
|
<div class="card__info">
|
|
<h2>SubWallet</h2>
|
|
<div class="extension__badges">
|
|
<div class="extension__badge">Mobile app</div>
|
|
<div class="extension__badge">Web extension</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img alt="SubWallet App" src="assets/subwallet_app.svg" />
|
|
</div>
|
|
|
|
<!-- Talisman -->
|
|
<div class="card__item">
|
|
<div>
|
|
<div class="card__header">
|
|
<img alt="Talisman" src="assets/extensions/talisman.svg" />
|
|
<a
|
|
target="_blank"
|
|
href="https://talisman.xyz/"
|
|
class="extension__cta"
|
|
>
|
|
Download
|
|
</a>
|
|
</div>
|
|
<div class="card__info">
|
|
<h2>Talisman</h2>
|
|
<div class="extension__badges">
|
|
<div class="extension__badge">Web extension</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img alt="Talisman App" src="assets/talisman_app.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mobile__extensions">
|
|
<div class="badge">For mobile</div>
|
|
|
|
<div class="card__items">
|
|
<!-- Nova Wallet -->
|
|
<div class="card__item">
|
|
<div>
|
|
<div class="card__header">
|
|
<img alt="Nova" src="assets/extensions/nova.svg" />
|
|
<a
|
|
target="_blank"
|
|
href="https://novawallet.io/"
|
|
class="extension__cta"
|
|
>Download</a
|
|
>
|
|
</div>
|
|
<div class="card__info">
|
|
<h2>Nova Wallet</h2>
|
|
<div class="extension__badges">
|
|
<div class="extension__badge">Mobile app</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img alt="Nova App" src="assets/nova_app.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Developer Tools -->
|
|
<sections class="cardWrapper">
|
|
<div class="developerTools">
|
|
<div class="badge">For developers</div>
|
|
<div class="developerTools__hero">
|
|
<h2>Polkadot Developer Tools</h2>
|
|
<p>Build, Deploy, and Interact with the Polkadot Ecosystem</p>
|
|
</div>
|
|
|
|
<div class="card__items">
|
|
<!-- Polkadot Developer Signer -->
|
|
<div class="card__item">
|
|
<div>
|
|
<div class="card__header">
|
|
<img alt="Polkadot" src="assets/extensions/polkadot.svg" />
|
|
<a
|
|
target="_blank"
|
|
href="https://chromewebstore.google.com/detail/mopnmbcafieddcagagdcbnhejhlodfdd?utm_source=item-share-cb"
|
|
class="extension__cta"
|
|
id="developerSigner"
|
|
>
|
|
Download
|
|
</a>
|
|
</div>
|
|
<div class="card__info">
|
|
<h2>
|
|
Polkadot Developer<br />
|
|
Signer
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<img
|
|
alt="Polkadot Developer Signer"
|
|
src="assets/polkadot_developer_signer.svg"
|
|
style="background-color: #e0e7ff80; border-radius: 16px"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Polkadot Developer Interface -->
|
|
<div class="card__item">
|
|
<div>
|
|
<div class="card__header">
|
|
<img
|
|
alt="Polkadot"
|
|
src="assets/polkadot-developer-interface-icon.svg"
|
|
/>
|
|
<a
|
|
target="_blank"
|
|
href="https://polkadot.js.org/apps/"
|
|
class="extension__cta"
|
|
>
|
|
Launch
|
|
</a>
|
|
</div>
|
|
<div class="card__info">
|
|
<h2>
|
|
Polkadot Developer<br />
|
|
Interface
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<img
|
|
alt="Polkadot Developer Interface"
|
|
src="assets/polkadot_developer_interface.svg"
|
|
style="background-color: #e0e7ff80; border-radius: 16px"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Docs -->
|
|
<div class="chip__item">
|
|
<img alt="Docs" src="assets/docs.svg" />
|
|
<div class="chip__info__wrapper">
|
|
<div class="chip__info">
|
|
<h2>Docs</h2>
|
|
<a
|
|
target="_blank"
|
|
href="https://polkadot.js.org/docs/"
|
|
class="chip__cta"
|
|
>
|
|
LINK
|
|
</a>
|
|
</div>
|
|
<p>
|
|
Developer documentation for libraries under the polkadot-js
|
|
umbrella. If you want to build, this is where to start.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code -->
|
|
<div class="chip__item">
|
|
<img alt="Code" src="assets/code.svg" />
|
|
<div class="chip__info__wrapper">
|
|
<div class="chip__info">
|
|
<h2>Code</h2>
|
|
<a
|
|
target="_blank"
|
|
href="https://github.com/polkadot-js/"
|
|
class="chip__cta"
|
|
>
|
|
LINK
|
|
</a>
|
|
</div>
|
|
<p>
|
|
API, utilities, crypto, tools, user-facing interfaces and
|
|
documentation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phishing -->
|
|
<div class="chip__item">
|
|
<img alt="Phishing" src="assets/phishing.svg" />
|
|
<div class="chip__info__wrapper">
|
|
<div class="chip__info">
|
|
<h2>Phishing</h2>
|
|
<a
|
|
target="_blank"
|
|
href="https://polkadot.js.org/phishing/"
|
|
class="chip__cta"
|
|
>
|
|
LINK
|
|
</a>
|
|
</div>
|
|
<p>
|
|
Community driven lists of urls and addresses of dishonest
|
|
operators. Used ecosystem wide in wallets and extensions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</sections>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer__left">
|
|
<img alt="Polkadot" src="assets/polkadot_logo.svg" />
|
|
<section>
|
|
<span>C</span>
|
|
<span id="currentYear"></span>
|
|
</section>
|
|
</div>
|
|
<div class="footer__right">
|
|
<a href="https://polkadot-discord.w3f.tools/" target="_blank">
|
|
<img alt="Discord" src="assets/socials/discord.svg" />
|
|
</a>
|
|
<a href="https://www.reddit.com/r/Polkadot/" target="_blank">
|
|
<img alt="Reddit" src="assets/socials/reddit.svg" />
|
|
</a>
|
|
<a href="https://github.com/polkadot-js/" target="_blank">
|
|
<img alt="Github" src="assets/socials/github.svg" />
|
|
</a>
|
|
<a
|
|
href="https://www.youtube.com/channel/UCB7PbjuZLEba_znc7mEGNgw"
|
|
target="_blank"
|
|
>
|
|
<img alt="YouTube" src="assets/socials/youtube.svg" />
|
|
</a>
|
|
<a href="https://twitter.com/Polkadot" target="_blank">
|
|
<img alt="X" src="assets/socials/x.svg" />
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
if (window.self !== window.top) {
|
|
window.top.location.href = window.location.href;
|
|
}
|
|
|
|
window.onload = function () {
|
|
document.getElementById("currentYear").innerText = new Date().getFullYear();
|
|
|
|
const userAgent = navigator.userAgent;
|
|
|
|
if(userAgent.includes("Firefox")) {
|
|
document.getElementById('developerSigner').setAttribute('href', 'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/');
|
|
}
|
|
};
|
|
|
|
function onLaunchExplorer() {
|
|
window.open("https://polkadot.js.org/apps/", "_blank");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|