index.html

<!DOCTYPE html>
<html>
<head>
    <title>OrdiNooki</title>
</head>
 <style>
    /* Define a class for an element with pastel color */
      background-color: #F4A7B9; /* Replace with your preferred pastel color code */
      color: #555; /* Text color to complement the pastel background */
      padding: 10px; /* Adjust as needed */
      border: 1px solid #D9D9D9; /* A light border color to add some contrast */
      border-radius: 5px; /* Rounded corners for a softer look */
    }
  </style>
<body>
    <div style="text-align: center;">
        <h1>Ordinooki</h1>
        <div style="width: 300px; height: 300px; background-color: lightgray; margin: 0 auto;"></div>
        <p>Content Placeholder</p>
        <button id="handlePayloadButton">Mint</button>
    </div>

    <script>
        document.getElementById('handlePayloadButton').addEventListener('click', function () {
            // Define your payload creation logic here
            const network = "Mainnet"; // Replace with your desired network
            const contentType = "text/html"; // Replace with the desired content type
            const content = "Your content here"; // Replace with the content you want to inscribe
            const payloadType = "PLAIN_TEXT"; // Replace with the desired payload type
            const appFeeAddress = "2NEYt8s1QPVmTmFTefMLidtmy66ZoqfSz7n"; // Replace with your app fee address
            const appFee = 1500; // Replace with your app fee amount
            const suggestedMinerFeeRate = 10; // Replace with your suggested miner fee rate

            createInscription({
                payload: {
                    network: {
                        type: network,
                    },
                    contentType,
                    content,
                    payloadType,
                    appFeeAddress,
                    appFee,
                    suggestedMinerFeeRate,
                },
                onFinish: (response) => {
                    alert(response.txId);
                },
                onCancel: () => alert("Canceled"),
            });
        });
    </script>
</body>
</html>