Initial commit: add core features, impr README and add WTFPL license

Truiteseche · Aug 8, 2024 · 81fdc52 · 81fdc52
1 parent b75a7dd
commit 81fdc52
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 1 deletion.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,13 @@
+           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                   Version 2, December 2004
+
+Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+Everyone is permitted to copy and distribute verbatim or modified
+copies of this license document, and changing it is allowed as long
+as the name is changed.
+
+           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+ 0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/README.md b/README.md
@@ -1,2 +1,27 @@
-# text2clipboard
+# Text2Clipboard
+
 A minimalistic interface that copies any text to the user's clipboard using URL query params
+
+## How to use
+
+Add the text you want the user to copy in query params with the key "text" (make sure to encodeURIComponent your text before). Example:
+
+With the [official instance of the website](https://text2clipboard.netlify.app/) hosted on netlify:
+
+```text
+https://text2clipboard.netlify.app/?text=Hello%2C%20World!
+```
+
+With a self-hosted version:
+
+```text
+https://<your-domain>/index.html?text=Hello%2C%20World!
+```
+
+## Contributing
+
+There is nothing simpler than this website, I think you should understand the code pretty quickly. No overkill framework, just basic HTML, CSS and JS.
+
+## License
+
+Text2Clipboard is a free and open source software licensed under the WTFPL license. Do what the fuck you want to.
diff --git a/clipboard-dark.ico b/clipboard-dark.ico
diff --git a/clipboard-light.ico b/clipboard-light.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="clipboard-light.ico" type="image/x-icon" media="(prefers-color-scheme: light)">
+    <link rel="icon" href="clipboard-dark.ico" type="image/x-icon" media="(prefers-color-scheme: dark)">
+    <title>Text2Clipboard</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" >
+</head>
+<body>
+    <div class="container">
+        <h1>Awesome text2clipboard</h1>
+        <h2 class="copying">Copying text...<br/>Make sure to allow access to your clipboard.</h2>
+        <h2 class="success">Text successfully copied.</h2>
+        <button id="copy-btn">Copy text</button>
+        <h2 class="failure">An error occured.<br/>Make sure you have allowed access to your clipboard.</h2>
+        <h2 class="no-text">No text to copy.</h2>
+    </div>
+    <script type="module" src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,35 @@
+
+function resetBodyClasses() {
+    document.body.classList.toggle("no-text", false);
+    document.body.classList.toggle("sucess", false);
+    document.body.classList.toggle("failure", false);
+    document.body.classList.toggle("button", false);
+}
+
+
+function copyURLSearchParamsText(origin="onclick") {
+    resetBodyClasses();
+    const params = new URLSearchParams(location.search);
+    const textToCopy = decodeURIComponent(params.get("text"));
+    if (textToCopy !== "null") {
+        navigator.clipboard.writeText(textToCopy).then(function() {
+            document.body.classList.toggle("success", true);
+        }).catch(function() {
+            console.log("origin:", origin)
+            if (origin === "onclick") {
+                document.body.classList.toggle("failure", true);
+            } else {
+
+                document.body.classList.toggle("button", true);
+            }
+        });
+    } else {
+        document.body.classList.toggle("no-text", true);
+    }
+}
+
+copyURLSearchParamsText("script");
+
+
+const btn = document.getElementById("copy-btn");
+btn.addEventListener("click", copyURLSearchParamsText)
diff --git a/styles.css b/styles.css
@@ -0,0 +1,70 @@
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: system-ui, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color: #ff6300;
+    box-sizing: border-box;
+    background-color: #1a1a1a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+
+h2 {
+    display: none;
+    margin: 0 auto;
+    color: #9f9f9f;
+}
+
+body:not(.success, .failure, .no-text, .button) .copying {
+    display: block;
+}
+
+body.success .success {
+    display: block;
+}
+
+body.failure .failure {
+    display: block;
+}
+
+body.no-text .no-text {
+    display: block;
+}
+
+button {
+    font-family: system-ui, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    display: none;
+    appearance: none;
+    background: none;
+    background-color: transparent;
+    color: #9f9f9f;
+    border: 2px solid #9f9f9f;
+    padding: 10px 15px;
+    margin: 0 auto;
+    border-radius: 10px;
+    font-size: 20px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: .1s;
+}
+
+button:is(:hover, :focus-visible) {
+    color: #1a1a1a;
+    background-color: #9f9f9f;
+}
+button:active {
+    opacity: .7;
+}
+
+body.button button {
+    display: block;
+}