<!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></div>
    </nav>
    <header class="text-center text-white masthead">
        <div class="masthead-content">
            <div class="container">
                <h1 class="masthead-heading mb-0">Woodburn Vault</h1>
                <h2 class="masthead-subheading mb-0">An easy way to buy into a diverse crypto portfolio.</h2>
                <p>Woodburn Vault Balance: {{vault}} USD<br>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>Current Vault Contents</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>
    <section>
        <div class="container">
            <div class="p-5">
                <h2 class="display-4">Vault addresses</h2>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Chain</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Solana</td>
                                <td>NWywvhcqdkJsm1s9VVviPm9UfyDtyCW9t8kDb24PDPN</td>
                            </tr>
                            <tr>
                                <td>Cardano</td>
                                <td>stake1uy4qd785pcds7ph2jue2lrhhxa698c5959375lqdv3yphcgwc8qna</td>
                            </tr>
                        </tbody>
                    </table>
                </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>