Create extract-urls.html

simonw · web-flow · commit 0f7fb49fd53d · 2024-10-15T16:19:00.000-07:00
https://gist.github.com/simonw/0a7d0ddeb0fdd63a844669475778ca06
diff --git a/extract-urls.html b/extract-urls.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Extract URLs</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #input {
+            width: 100%;
+            max-width: 100%;
+            height: 100px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            background-color: #f0f0f0;
+        }
+        #output-container {
+            display: none;
+        }
+        #output {
+            width: 100%;
+            max-width: 100%;
+            height: 150px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            background-color: #fff;
+        }
+        #copy-button {
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+        @media (max-width: 600px) {
+            body {
+                padding: 10px;
+            }
+            #input, #output {
+                height: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>Extract URLs</h1>
+    <p>Copy content from a web page and paste here to extract linked URLs:</p>
+    <div id="input" contenteditable="true"></div>
+    <div id="output-container">
+        <h2>Extracted</h2>
+        <textarea id="output" readonly></textarea>
+        <button id="copy-button">Copy to clipboard</button>
+    </div>
+
+    <script>
+        const input = document.getElementById('input');
+        const outputContainer = document.getElementById('output-container');
+        const output = document.getElementById('output');
+        const copyButton = document.getElementById('copy-button');
+
+        input.addEventListener('paste', function(e) {
+            e.preventDefault();
+            
+            const clipboardData = e.clipboardData || window.clipboardData;
+            const pastedData = clipboardData.getData('text/html');
+
+            const temp = document.createElement('div');
+            temp.innerHTML = pastedData;
+
+            const links = temp.getElementsByTagName('a');
+            const urls = Array.from(links)
+                .map(link => link.href)
+                .filter(url => url.startsWith('http'));
+
+            if (urls.length > 0) {
+                output.value = urls.join('\n');
+                outputContainer.style.display = 'block';
+            } else {
+                outputContainer.style.display = 'none';
+            }
+
+            input.textContent = 'Content pasted. URLs extracted.';
+        });
+
+        input.addEventListener('focus', function() {
+            if (input.textContent === 'Content pasted. URLs extracted.') {
+                input.textContent = '';
+            }
+        });
+
+        copyButton.addEventListener('click', function() {
+            output.select();
+            document.execCommand('copy');
+            
+            const originalText = copyButton.textContent;
+            copyButton.textContent = 'Copied!';
+            
+            setTimeout(() => {
+                copyButton.textContent = originalText;
+            }, 1500);
+        });
+    </script>
+</body>
+</html>
