candid-decoder
Version:
Typeless candid decode
103 lines (97 loc) • 3.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Candid Decoder & Converter</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom font for Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
body {
font-family: "Inter", sans-serif;
}
</style>
</head>
<body
class="p-5 min-h-screen flex flex-col items-center bg-gray-100 text-gray-800"
>
<!-- Main content container -->
<div class="w-full max-w-4xl bg-white p-8 rounded-xl shadow-lg">
<h1
class="text-4xl font-extrabold text-center text-blue-700 mb-6 tracking-tight"
>
Candid Decoder & Converter
</h1>
<p class="text-lg text-gray-600 mb-6 text-center leading-relaxed">
Enter hex, an escaped string (e.g., `DIDL\00\01\71...`), or Base64
encoded Candid data into the field below. The tool will automatically
detect the format and provide conversions and the decoded result.
</p>
<!-- Single Input Field -->
<label
for="unifiedInput"
class="block text-lg font-semibold text-gray-700 mb-2"
>Input (Hex, Escaped String, or Base64):</label
>
<textarea
id="unifiedInput"
placeholder="Paste your data here (e.g., 4449444C..., DIDL\00\01..., or AAAAAQBxAQA...)"
rows="8"
class="w-full p-4 border border-gray-300 rounded-lg bg-white shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono text-gray-700 text-base transition-all duration-200 ease-in-out"
style="resize: vertical"
>
RElETAZte24AbAKzsNrDA2ithsqDBQFufW54bAb7ygECxvy2AgO6ieXCBAGi3pTrBgGC8/ORDATYo4yoDX0BBQEdXdZAg85gOc3s6DkTiv7FBn9RDHSPT6rgmlsBGgIAAAAAAICAgPXduOvktWw=</textarea
>
<!-- Display area for Candid decoding results -->
<div class="mt-8 pt-8 border-t border-gray-200">
<h2 class="text-2xl font-bold text-gray-800 mb-4">
Candid Decoding Result:
</h2>
<div id="resultContainer">
<!-- Results will be injected here by JavaScript -->
</div>
</div>
<!-- Conversion Output Section (moved below resultContainer) -->
<div id="conversionOutput" class="mt-8 pt-6 border-t border-gray-200">
<h2 class="text-xl font-bold text-gray-800 mb-4">Conversions:</h2>
<div class="mb-4">
<label class="block text-md font-semibold text-gray-700 mb-1"
>Hex String:</label
>
<textarea
id="hexOutput"
rows="3"
readonly
class="w-full p-3 border border-gray-200 rounded-lg bg-gray-50 font-mono text-gray-700 text-sm overflow-auto resize-none"
></textarea>
</div>
<div class="mb-4">
<label class="block text-md font-semibold text-gray-700 mb-1"
>Escaped String:</label
>
<textarea
id="escapedStringOutput"
rows="3"
readonly
class="w-full p-3 border border-gray-200 rounded-lg bg-gray-50 font-mono text-gray-700 text-sm overflow-auto resize-none"
></textarea>
</div>
<div>
<label class="block text-md font-semibold text-gray-700 mb-1"
>Base64 Encoded:</label
>
<textarea
id="base64Output"
rows="3"
readonly
class="w-full p-3 border border-gray-200 rounded-lg bg-gray-50 font-mono text-gray-700 text-sm overflow-auto resize-none"
></textarea>
</div>
</div>
</div>
<!-- Link to the combined JavaScript file as a module -->
<script type="module" src="./candid.js"></script>
</body>
</html>