stWDBRN/templates/index.html
Nathan Woodburn 595f22f742
All checks were successful
Build Docker / BuildImage (push) Successful in 35s
feat: Add link to coingecko portfolio
2024-12-04 20:51:08 +11:00

168 lines
7.1 KiB
HTML

<!DOCTYPE html>
<html data-bs-theme="dark" lang="en-au">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Vault | Woodburn</title>
<meta name="twitter:description" content="Woodburn Vault">
<meta name="twitter:image" content="https://vault.woodburn.au/assets/img/favicon.png">
<meta property="og:description" content="Woodburn Vault">
<meta property="og:image" content="https://vault.woodburn.au/assets/img/favicon.png">
<meta name="description" content="Woodburn Vault">
<meta property="og:type" content="website">
<meta property="og:title" content="Vault | Woodburn">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vault | Woodburn">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Vault | Woodburn",
"url": "https://vault.woodburn.au"
}
</script>
<link rel="icon" type="image/png" sizes="512x512" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;display=swap">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-custom navbar-dark">
<div class="container"><a class="navbar-brand" href="#">Vault | Woodburn</a><button class="navbar-toggler" data-bs-toggle="collapse"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button></div>
</nav>
<header class="text-center text-white masthead">
<div class="masthead-content">
<div class="container">
<h1 class="masthead-heading mb-0">Woodburn Portfolio Vault</h1>
<h2 class="masthead-subheading mb-0">An easy way to start crypto investing</h2>
<p>stWDBRN Token Supply: {{supply}}<br>Current Token Value: {{value}} USD</p>
</div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>
<section style="margin-top: 50px;margin-bottom: 50px;max-width: 100vw;overflow: hidden;">
<div class="text-center">
<h1>Vault Balances</h1>
<div id="pie-chart" style="margin: auto;"><script type="text/javascript">
window.onload = function () {
google.charts.load('current', {
packages: ['corechart']
});
// Set a callback to run when the API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create data array from Flask data passed into the template
var data = new google.visualization.DataTable();
data.addColumn('string', 'Token');
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
data.addRows([
{% for token, value, name in pie_chart %}
['{{ token }}', {{ value }}, '{{name}}'],
{% endfor %}
]);
// Set chart options
var options = {
pieSliceText: 'label',
legend: {
position: 'right',
textStyle: {
color: 'white'
}
},
backgroundColor: '#212529',
};
var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
function resizeChart() {
// Dynamically adjust the chart size to the container
var width = window.innerWidth * 0.8;
var height = window.innerHeight * 0.5;
// If the width is less than 600 px use full width
if (width < 700) {
chart.draw(data, options);
}
else {
chart.draw(data, {
...options,
width: width,
height: height
});
}
}
resizeChart();
window.addEventListener('resize', resizeChart);
}
};
</script></div><a class="btn btn-secondary" role="button" href="https://www.coingecko.com/en/portfolios/public/vault" target="_blank">View on Coingecko</a>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5"><img class="rounded-circle img-fluid" src="assets/img/01.jpg"></div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">1. Buy tokens</h2>
<p>To get started buy stWDBRN tokens at the current price to buy a percent of the vault value. The buy in value is then invested in various projects in order to increase the token's value.<br><br>Send USDC or SOL to vault.woodburn.sol and send me a message to mint stWDBRN</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Buy Tokens</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-1">
<div class="p-5"><img class="rounded-circle img-fluid" src="assets/img/02.jpg"></div>
</div>
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<h2 class="display-4">2. HODL and check price</h2>
<p>Hodl your stWDBRN while the value fluctuates. Check this site to see the current value.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5"><img class="rounded-circle img-fluid" src="assets/img/03.jpg"></div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">3. Sell your tokens</h2>
<p>When you want to cash out&nbsp; just sell your tokens back to us at the current token price.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Sell Tokens</a>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-black">
<div class="container">
<p class="text-center text-white m-0 small">Copyright&nbsp;© Vault | Woodburn 2024</p>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</body>
</html>