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: 50%;
            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 Quest</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/insula-vaults"
<iframe style="height:420vh; width:100vw" frameBorder="0"
        src="https://insulavault.com/"
        scrolling="no">"
</iframe>
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>



List

GameFi 🎮 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 

Image carousel

GameFi 🎮 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