Tools/BitcoinWitnessDataDecoder/index.html at main · sorukumar/Tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bitcoin Witness Data Decoder - Bitcoin Data Labs</title>

    <!-- Bitcoin Data Labs base styles -->
    <link rel="stylesheet" href="https://sorukumar.github.io/Bitcoin-Data-Labs/styles/styles.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- Shared tool styles -->
    <link rel="stylesheet" href="../shared-tool-styles.css">
    <!-- Tailwind for this tool (already using it) -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- Bitcoin Data Labs Header -->
    <div id="header"></div>

    <div class="tool-content">
        <div class="tool-header">
            <h1>Bitcoin Witness Data Decoder</h1>
            <p>Decode witness data from Bitcoin transactions including P2WPKH, P2WSH, Ordinals, and Taproot</p>
        </div>

        <div class="content-section">
            <div class="mb-6">
                <h3 class="font-bold mb-3">Quick Start Examples</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <button onclick="loadExample('p2wpkh')" class="bg-blue-100 hover:bg-blue-200 p-2 rounded transition">
                        P2WPKH
                    </button>
                    <button onclick="loadExample('p2wsh')" class="bg-green-100 hover:bg-green-200 p-2 rounded transition">
                        P2WSH
                    </button>
                    <button onclick="loadExample('ordinal')" class="bg-yellow-100 hover:bg-yellow-200 p-2 rounded transition">
                        Ordinal
                    </button>
                    <button onclick="loadExample('taproot')" class="bg-purple-100 hover:bg-purple-200 p-2 rounded transition">
                        Taproot
                    </button>
                </div>
                <div id="exampleDescription" class="text-sm text-gray-600 italic mt-3"></div>
            </div>

            <label for="witnessInput">Witness Data (hex):</label>
            <textarea
                id="witnessInput"
                class="w-full p-3 border rounded-lg h-32 font-mono text-sm"
                placeholder="Enter witness data in hex format or use the example buttons above..."
            ></textarea>

            <button onclick="decodeWitnessData()">Decode</button>
            <div id="result" class="mt-6"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div class="content-section">
                <h2>Supported Types</h2>
                <div class="space-y-3">
                    <div>
                        <h3 class="font-bold text-blue-600">P2WPKH</h3>
                        <p class="text-sm text-gray-600">Pay-to-Witness-Public-Key-Hash signatures</p>
                    </div>
                    <div>
                        <h3 class="font-bold text-green-600">P2WSH</h3>
                        <p class="text-sm text-gray-600">Pay-to-Witness-Script-Hash transactions</p>
                    </div>
                    <div>
                        <h3 class="font-bold text-yellow-600">Ordinals</h3>
                        <p class="text-sm text-gray-600">Ordinal inscriptions with content</p>
                    </div>
                    <div>
                        <h3 class="font-bold text-purple-600">Taproot</h3>
                        <p class="text-sm text-gray-600">Schnorr signatures and taproot scripts</p>
                    </div>
                </div>
            </div>

            <div class="content-section">
                <h2>Hex Converter</h2>
                <div class="space-y-2">
                    <input type="text" id="hexInput" placeholder="Enter hex value..." onchange="convertHex()">
                    <input type="text" id="asciiOutput" readonly placeholder="ASCII result" class="bg-gray-100">
                </div>
            </div>
        </div>
    </div>

    <!-- Bitcoin Data Labs Footer -->
    <div id="footer"></div>

    <!-- Bitcoin Data Labs App Components -->
    <script src="https://sorukumar.github.io/Bitcoin-Data-Labs/components/app-components.js"></script>
    <script>
        BitcoinLabsAppComponents.init({
            isApp: true,
            appName: 'Bitcoin Witness Decoder',
            appHomeUrl: window.location.href
        });
    </script>
</body>
</html>