Embed

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Onboarding Guide</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

        body {
            font-family: 'Press Start 2P', cursive;
            background-color: #282a36; /* Dark background for a gaming vibe */
            color: #f8f8f2; /* Light text for contrast */
        }

        .popup {
            display: none;
            position: fixed;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #44475a; /* Lighter dark shade for popups */
            padding: 0px;
            z-index: 1000;
            width: 100%;
            height: 90%;
            border: 4px solid #bd93f9; /* Pixel-like border */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            overflow: auto;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 500;
        }

        button {
            background-color: #50fa7b; /* Vibrant button color */
            color: black;
            padding: 10px 20px;
            margin: 10px 0;
            border: 2px solid #ff79c6; /* Pixel-like border */
            border-radius: 0; /* Square buttons for a retro look */
            cursor: pointer;
            font-family: 'Press Start 2P', cursive;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #6272a4; /* Color change on hover */
        }

        #startButton {
            font-size: 10px; /* Smaller text to match the pixelized style */
            padding: 15px 30px;
        }
    </style>
</head>
<body>

<button id="startButton">Start Onboarding</button>

<div id="overlay" class="overlay"></div>

<div id="popup1" class="popup">
    <h4>Step 1: Create a Wallet</h4>
    <iframe src="https://metamask.io/download/" style="width: 120%; height: 82%; border: none; border-radius: 0;"></iframe>
    <button onclick="showPopup(2)">Next Step →</button>
</div>

<div id="popup2" class="popup">
    <h4>Step 2: Buy Crypto</h4>
    <iframe src="https://global.transak.com/?defaultCryptoCurrency=MATIC" style="width: 100%; height: 82%; border: none; border-radius: 0;"></iframe>
    <button onclick="showPopup(3)">Next Step →</button>
</div>

<div id="popup3" class="popup">
    <h4>Step 3: Deposit in Insula Crypto Vault</h4>
    <iframe src="https://insulavault.com/polygon-vaults" style="width: 100%; height: 82%; border: none; border-radius: 0;"></iframe>
    <button onclick="closePopup()">Finish</button>
</div>

<script>
    function showPopup(step) {
        document.getElementById('overlay').style.display = 'block';

        for (let i = 1; i <= 3; i++) {
            let popup = document.getElementById('popup' + i);
            if (i === step) {
                popup.style.display = 'block';
            } else {
                popup.style.display = 'none';
            }
        }
    }

    function closePopup() {
        document.getElementById('overlay').style.display = 'none';
        for (let i = 1; i <= 3; i++) {
            document.getElementById('popup' + i).style.display = 'none';
        }
    }

    document.getElementById('startButton').addEventListener('click', function() {
        showPopup(1);
    });
</script>

</body>
</html>


Image carousel

Image grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insula Token Balance Checker</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@1.3.0/dist/web3.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #balance {
            color: black;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Insula Token Balance Checker</h1>
    <button id="connectButton">Connect MetaMask</button>
    <div id="balance"></div>

    <script>
        const connectButton = document.getElementById('connectButton');
        const balanceDiv = document.getElementById('balance');
        let isConnected = false;

        connectButton.addEventListener('click', () => {
            if (!isConnected) {
                connectWallet();
            } else {
                disconnectWallet();
            }
        });

        async function connectWallet() {
            if (window.ethereum) {
                try {
                    const web3 = new Web3(window.ethereum);
                    await window.ethereum.request({ method: 'eth_requestAccounts' });
                    const accounts = await web3.eth.getAccounts();
                    getInsulaBalance(accounts[0]);
                    isConnected = true;
                    connectButton.textContent = 'Disconnect Wallet';
                } catch (error) {
                    console.error("User denied account access or error occurred:", error);
                }
            } else {
                console.error("MetaMask not detected");
                balanceDiv.innerHTML = "MetaMask not detected. Please install it.";
            }
        }

        function disconnectWallet() {
            isConnected = false;
            connectButton.textContent = 'Connect MetaMask';
            balanceDiv.innerHTML = '';
        }

       async function getInsulaBalance(address) {
            const insulaTokenAddress = '0x697eF32B4a3F5a4C39dE1cB7563f24CA7BfC5947'; // Insula Token Contract Address
            const insulaTokenABI = [{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"sender","type":"address"},{"name":"recipient","type":"address"},{"name":"amount","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"addedValue","type":"uint256"}],"name":"increaseAllowance","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"account","type":"address"},{"name":"amount","type":"uint256"}],"name":"mint","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"value","type":"uint256"}],"name":"burn","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"account","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"account","type":"address"}],"name":"addMinter","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"renounceMinter","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"subtractedValue","type":"uint256"}],"name":"decreaseAllowance","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"recipient","type":"address"},{"name":"amount","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"account","type":"address"}],"name":"isMinter","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newMinter","type":"address"}],"name":"transferMinterRole","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"owner","type":"address"},{"name":"spender","type":"address"}],"name":"allowance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"name","type":"string"},{"name":"symbol","type":"string"},{"name":"decimals","type":"uint8"},{"name":"initialSupply","type":"uint256"},{"name":"feeReceiver","type":"address"},{"name":"tokenOwnerAddress","type":"address"}],"payable":true,"stateMutability":"payable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"account","type":"address"}],"name":"MinterAdded","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"account","type":"address"}],"name":"MinterRemoved","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"}]; // The ABI for Insula Token Contract
            const web3 = new Web3(window.ethereum);

            const tokenContract = new web3.eth.Contract(insulaTokenABI, insulaTokenAddress);
            tokenContract.methods.balanceOf(address).call().then((balance) => {
                balanceDiv.innerHTML = `Insula Token Balance: ${balance}`;
            }).catch(error => console.error("Error fetching balance:", error));
        }
    </script>
</body>
</html>


List

Software products

<p><strong>Primary market</strong></p>
<p class="p1">Diversify your coins into hundreds of crypto tokens in 1-click.</p>

Vault Tokens

<p><strong>Secondary market &amp; arbitrage</strong></p>
<p>List your Vaults Tokens against Insula Tokens and tap into Insula Token arbitrage network.</p>

Insula Token (ISLA)

<p><strong>AI Assistant</strong></p>
<p><span style="font-weight: 400;">Insul.ai understands queries and generates responses for Insula depositors.</span></p>

Insul.ai 

Product features

<p>Vaults are denominated in an array of cryptocurrencies, offering options beyond stablecoins, BTC, or ETH. </p>

Versatile denominations

<p>Vaults deposits and withdrawals logic are pre-encoded into smart contracts and digital signature-enabled.</p>

Smart contract-based 

<p>Identify and gain exposure to thematic yield-farming.  Access multiple liquidity pools in 1-click.</p>

24/7 market exposure