206 lines
11 KiB
HTML
206 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="auto" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>Setup - FireWallet</title>
|
|
<link rel="canonical" href="https://firewallet.woodburn.au/setup.html">
|
|
<meta property="og:url" content="https://firewallet.woodburn.au/setup.html">
|
|
<meta name="twitter:image" content="https://firewallet.woodburn.au/assets/img/splash.png">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="FireWallet">
|
|
<meta name="twitter:title" content="FireWallet">
|
|
<meta name="description" content="The Handshake wallet that is just Fire">
|
|
<meta name="twitter:description" content="The Handshake wallet that is just Fire">
|
|
<meta property="og:description" content="The Handshake wallet that is just Fire">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta property="og:image" content="https://firewallet.woodburn.au/assets/img/splash.png">
|
|
<script>
|
|
(function() {
|
|
|
|
// JavaScript snippet handling Dark/Light mode switching
|
|
|
|
const getStoredTheme = () => localStorage.getItem('theme');
|
|
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
|
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
|
|
|
const getPreferredTheme = () => {
|
|
|
|
if (forcedTheme) return forcedTheme;
|
|
|
|
const storedTheme = getStoredTheme();
|
|
if (storedTheme) {
|
|
return storedTheme;
|
|
}
|
|
|
|
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
|
|
|
if (pageTheme) {
|
|
return pageTheme;
|
|
}
|
|
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
const setTheme = theme => {
|
|
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
|
}
|
|
}
|
|
|
|
setTheme(getPreferredTheme());
|
|
|
|
const showActiveTheme = (theme, focus = false) => {
|
|
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
|
|
|
if (!themeSwitchers.length) return;
|
|
|
|
for (const themeSwitcher of themeSwitchers) {
|
|
|
|
const themeSwitcherText = document.querySelector('#theme-text');
|
|
const activeThemeIcon = document.querySelector('.theme-icon-active use');
|
|
const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]');
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
|
element.classList.remove('active');
|
|
element.setAttribute('aria-pressed', 'false');
|
|
});
|
|
|
|
btnToActive.classList.add('active');
|
|
btnToActive.setAttribute('aria-pressed', 'true');
|
|
}
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
const storedTheme = getStoredTheme();
|
|
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
|
setTheme(getPreferredTheme());
|
|
}
|
|
});
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
showActiveTheme(getPreferredTheme());
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]')
|
|
.forEach(toggle => {
|
|
toggle.addEventListener('click', () => {
|
|
const theme = toggle.getAttribute('data-bs-theme-value');
|
|
setStoredTheme(theme);
|
|
setTheme(theme);
|
|
showActiveTheme(theme);
|
|
})
|
|
})
|
|
});
|
|
})();
|
|
</script>
|
|
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
|
|
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
|
|
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
|
|
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
|
|
<link rel="icon" type="image/png" sizes="900x768" href="assets/img/FW.png">
|
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&display=swap">
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-dark navbar-expand-md sticky-top py-3" id="mainNav">
|
|
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-md bs-icon-rounded shadow d-flex justify-content-center align-items-center me-2 bs-icon"><img src="assets/img/FW.png" width="100%"></span><span>FireWallet</span></a>
|
|
<nav class="navbar navbar-light navbar-expand-md">
|
|
<div class="container-fluid"><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navcol-1">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="setup">Setup</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="usage">Usage</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="https://github.com/Nathanwoodburn/FireWallet" target="_blank">Git Repo</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</nav>
|
|
<header class="bg-dark">
|
|
<div class="container pt-4 pt-xl-5">
|
|
<div class="row pt-5">
|
|
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
|
|
<div class="text-center">
|
|
<p class="fw-bold text-success mb-2">FireWallet</p>
|
|
<h1 class="fw-bold">Setting up your wallet is only a few clicks away</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section style="background: rgb(39,38,46);">
|
|
<div class="container bg-dark py-5" style="background: rgb(39, 38, 46);">
|
|
<div class="row">
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<p class="fw-bold text-success mb-2">Setup</p>
|
|
<h3 class="fw-bold">You can get FireWallet running in just 3 steps</h3>
|
|
</div>
|
|
</div>
|
|
<div class="py-5 p-lg-5">
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
|
|
<div class="col mb-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">1.</span></div>
|
|
<h5 class="fw-bold card-title">Install the latest version</h5>
|
|
<p class="text-muted card-text mb-4">Get the latest release from <a href="https://github.com/Nathanwoodburn/FireWallet/releases/" target="_blank">here</a>. Or you can build this from the source code using Visual Studio</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-5" style="margin-top: 100px;">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">2.</span></div>
|
|
<h5 class="fw-bold card-title">Connect your Node</h5>
|
|
<p class="text-muted card-text mb-4">Choose either to connect FireWallet to your existing Node (either HSD or Bob wallet). This will require running Bob to have FireWallet work. Just copy the API key from your settings into the node setup form to get FireWallet connected.<br><br>Or FireWallet can run its own node, just select the Run HSD option in the node setup. Just give it a random API key and go to the next step.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4" style="margin-top: -200px;">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><span style="color: rgb(25,245,170);">3.</span></div>
|
|
<h5 class="fw-bold card-title">Add your accounts</h5>
|
|
<p class="text-muted card-text mb-4">If you have been using Bob your accounts will automatically sync.<br>Otherwise you can add them with the New button on the Accounts page</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="container py-5">
|
|
<div class="mx-auto" style="max-width: 900px;">
|
|
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
|
|
<div class="col mb-4">
|
|
<div class="card bg-primary-light">
|
|
<div class="card-body text-center px-4 py-5 px-md-5">
|
|
<p class="fw-bold text-primary card-text mb-2">Need Help?</p>
|
|
<h5 class="fw-bold card-title mb-3">Just ask Nathan.Woodburn/ in any Handshake chat or join the discord server.<br><a href="https://l.woodburn.au/discord" target="_blank">https://l.woodburn/discord</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="bg-dark">
|
|
<div class="container py-4 py-lg-5">
|
|
<hr>
|
|
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
|
<p class="mb-0">Copyright © 2023 FireWallet</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/script.min.js"></script>
|
|
</body>
|
|
|
|
</html> |