Use clipboard icon

diff --git a/clipboard-svg.js b/clipboard-svg.js
new file mode 100644 (file)
index 0000000..c2be7c6
--- /dev/null
+++ b/clipboard-svg.js
@@ -0,0 +1,6 @@
+// SVG from Bootstrap Icons
+// Copyright (c) 2019-2024 The Bootstrap Authors
+// Licensed under the MIT license, see https://github.com/twbs/icons/blob/main/LICENSE
+
+export const CLIPBOARD_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>';
+export const CLIPBOARD_CHECK_SVG ='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>';

diff --git a/index.html b/index.html
index 6da443072d80d7c8d692586f88f7a7deef293790..e29102dd9fde12ae77e087b98ac140e7351d80d6 100644 (file)
--- a/index.html
+++ b/index.html
@@ -70,9 +70,11 @@
                <script type="module" src="dnssec_prover_wasm.js"></script>
                <!-- doh_lookup.js comes from the `wasmpack` folder in the above git repo -->
                <script type="module" src="doh_lookup.js"></script>
+               <script type="module" src="clipboard-svg.js"></script>
                <script type="module">
                        import init, {verify_byte_stream} from './dnssec_prover_wasm.js';
                        import * as doh from './doh_lookup.js';
+                       import {CLIPBOARD_SVG, CLIPBOARD_CHECK_SVG} from './clipboard-svg.js';
                        init().then(() => {
                                const address_box = document.getElementById("address");
                                const check_text = function() {
@@ -183,9 +185,9 @@
                                                if (!/^[\p{ASCII}]*$/u.test(contents)) {
                                                        value = "<th>Invalid</th><th></th>";
                                                } else if (contents.length < 70) {
-                                                       value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents + "</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">Copy</a></th>";
+                                                       value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents + "</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</a></th>";
                                                } else {
-                                                       value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents.substring(0, 70) + "...</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">Copy</a></th>";
+                                                       value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents.substring(0, 70) + "...</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</a></th>";
                                                }
                                                addr_idx += 1;
                                                addr_ty_table += "<tr><th>" + ty + "</th>" + value + "</tr>";
@@ -214,7 +216,7 @@
                                }
                                window.copy = function(text, element_id) {
                                        navigator.clipboard.writeText(text);
-                                       document.getElementById("addr_copy_" + element_id).innerText = "Copied!";
+                                       document.getElementById("addr_copy_" + element_id).innerHTML = CLIPBOARD_CHECK_SVG;
                                }
                        });
                </script>