add contact info w/ clipboardmain

2 files changed, 29 insertions, 0 deletions

diff --git a/src/static/js/clipboard.js b/src/static/js/clipboard.js
new file mode 100644
index 0000000..5cbad5d
--- /dev/null
+++ b/src/static/js/clipboard.js
@@ -0,0 +1,16 @@
+const copyToClipboard = (v) => {
+  navigator.clipboard.writeText(v)
+    .then(alert("text copied to clipboard!"));
+}
+
+const clickEventHandler = (e) => {
+  e.preventDefault()
+  const raw = e.target.getAttributeNode("x-content");
+  const content = atob(raw.value);
+  copyToClipboard(content);
+}
+
+const copyables = document.getElementsByClassName("copyable");
+for (const c of copyables) {
+  c.onclick = clickEventHandler;
+}
diff --git a/src/static/stylesheets/index.css b/src/static/stylesheets/index.css
index 316daee..ea520fb 100644
--- a/src/static/stylesheets/index.css
+++ b/src/static/stylesheets/index.css
@@ -21,6 +21,14 @@
     gap: 4px;
 }
 
+.copyable {
+    cursor: pointer;
+}
+
+.copyable:hover, .copyable:focus {
+    text-decoration: underline;
+}
+
 #basenamering {
     justify-content: start;
     gap: 30px;
@@ -38,6 +46,11 @@
     padding: 20px;
 }
 
+#random-img {
+    padding: 20px;
+    max-width: 250px;
+}
+
 .button {
     image-rendering: auto;
     image-rendering: crisp-edges;