diff --git a/src/script.js b/src/script.js
index 3289384..fa3caa5 100644
--- a/src/script.js
+++ b/src/script.js
@@ -73,7 +73,7 @@ function displayJSON(jsonData){
lang = lang ? lang : "text";
data.command = data.command.replace(/^![^\s]+ */i, "");
- dataDiv.innerHTML += `${safeString(data.description)}
${safeString(data.command)}
`;
+ dataDiv.innerHTML += `${safeString(data.description)}${safeString(data.command)}
Copied
`;
});
jsonContainer.appendChild(dataDiv);
@@ -107,6 +107,22 @@ function displayJSON(jsonData){
hljs.highlightAll();
+ document.querySelectorAll('.copy-icon').forEach((codeElement) => {
+ codeElement.addEventListener('click', function() {
+ var codeText = codeElement.parentElement;
+
+ navigator.clipboard.writeText(codeText.querySelector('code').innerText).then(function() {
+ var copied = codeText.querySelector('.copied');
+ copied.classList.add('visible');
+ setTimeout(() => {
+ copied.classList.remove('visible');
+ }, 500);
+ }).catch(function(err) {
+ console.error('Unable to copy code to clipboard', err);
+ });
+ });
+ });
+
}
function filterItemsByTag(clickedTag) {
diff --git a/src/styles.css b/src/styles.css
index 9fc0dad..34f7b81 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,5 @@
:root {
- color-scheme: dark;
+ color-scheme: dark;
}
body{
@@ -10,7 +10,7 @@ body{
}
h1 {
- color: #fff;
+ color: #fff;
}
h2, h3 {
@@ -25,25 +25,17 @@ h2, h3 {
overflow-x: auto;
}
-pre.code {
- background-color: #191919;
- padding: 10px;
- border-radius: 5px;
- overflow-x: auto;
- color: #fff; /* TODO: syntax highlight according to the language*/
-}
-
small, small a {
font-size: 90%;
color: #006600;
}
small a:hover{
- color: #009900;
+ color: #009900;
}
.description {
- color: #aaa;
+ color: #aaa;
}
.separator {
@@ -53,8 +45,8 @@ small a:hover{
#jsonList{
/* width: 50%; */
- padding: 20px 0;
- margin: 0 auto;
+ padding: 20px 0;
+ margin: 0 auto;
}
#jsonList a{
@@ -62,16 +54,16 @@ small a:hover{
}
header{
- font-size:1.3vw;
- display: flex;
- align-items: center;
+ font-size:1.3vw;
+ display: flex;
+ align-items: center;
justify-content: center;
}
.header {
- font-family: courier new, monospace;
- color:#4e0 !important;
- text-decoration: none;
- text-align: left;
+ font-family: courier new, monospace;
+ color:#4e0 !important;
+ text-decoration: none;
+ text-align: left;
}
@@ -87,7 +79,7 @@ header{
.menu a {
color: #00cc00;
text-decoration: none;
- margin: 10px 20px 10px 20px;
+ margin: 10px 20px 10px 20px;
}
.textbox-container {
@@ -108,21 +100,21 @@ header{
}
.not-found{
- color: #a00;
+ color: #a00;
}
.footer {
- margin: 40px 0 0 0;
+ margin: 40px 0 0 0;
color: #444 !important;
text-align: center;
- display: block;
+ display: block;
width: 100%;
justify-content: center;
line-height:20px;
}
.footer a{
- color: #060;
+ color: #060;
}
h1 {
@@ -147,23 +139,98 @@ h1:hover::after {
}
.about{
- color: #ccc;
+ color: #ccc;
}
- #error-message{
- text-align: center;
- color: #a00;
- }
+#error-message{
+ text-align: center;
+ color: #a00;
+}
.container{
- margin: 0 auto;
- width: 80%;
- max-width: 900px;
+ margin: 0 auto;
+ width: 80%;
+ max-width: 900px;
}
-/* Styles for syntax highlighting from highlight.js */
+/* .copy-button:hover {
+ background-color: #45a049;
+} */
+.copy-icon path {
+ transition: 100ms;
+}
+.copy-icon:hover path {
+ fill: #0FCD0F;
+}
+
+pre code {
+ background-color: #191919;
+ padding: 10px;
+ border-radius: 5px;
+ overflow-x: auto;
+ color: #fff;
+}
+
+pre code::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+pre code::-webkit-scrollbar-track {
+ background-color: #050505;
+ border-radius: 5px;
+}
+
+pre code::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: #232323;
+}
+
+pre code::-webkit-scrollbar-thumb:hover {
+ background-color: #454545;
+}
+
+.copy-icon {
+ opacity: 0;
+ cursor: pointer;
+ font-size: 1em;
+ position: absolute;
+ right: 6px;
+ top: 6px;
+ background-color: #141014;
+ padding: 4px;
+}
+
+.copy-icon path{
+ pointer-events: all;
+}
+
+.code-wrapper:hover .copy-icon{
+ opacity: 1;
+}
+
+.code-wrapper{
+ position: relative;
+}
+
+.copied {
+ user-select: none;
+ position: absolute;
+ opacity: 0;
+ top: 13px;
+ right:-70px;
+ transition: opacity 0.35s ease;
+ z-index: 999;
+ pointer-events: none;
+}
+
+.visible {
+ opacity: 1;
+}
+
+/* Styles for syntax highlighting from highlight.js */
pre code.hljs{
display:block;
@@ -174,15 +241,15 @@ code.hljs{
padding:3px 5px
}
.hljs{
- display: block;
- overflow-x: auto;
- padding: 0.5em;
- background: #141014;
- border:solid 1px #050;
- padding:20px;
- padding-right:50px;
- display: inline-block;
- border-radius:5px;
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
+ background: #141014;
+ border:solid 1px #050;
+ padding:20px;
+ padding-right:50px;
+ display: inline-block;
+ border-radius:5px;
}
.hljs ::selection,.hljs::selection{
background-color:#515151;
@@ -235,4 +302,3 @@ code.hljs{
.hljs-meta .hljs-keyword,.hljs-meta-keyword{
font-weight:700
}
-
\ No newline at end of file