Cleaned up a ton

public/clipboard-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-check"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>

public/clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>

src/global.css

@@ -0,0 +1,119 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+:root {
+  font-family:
+    Inter,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  line-height: 1.5;
+  font-weight: 400;
+  font-size: 16px;
+  color: #1a1a1a;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+a {
+  color: #444444;
+}
+a:hover {
+  color: #888888;
+}
+
+button {
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+input,
+textarea {
+  font: inherit;
+}
+
+/* Add these new styles */
+.url-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* Add this new style */
+.content-container {
+  max-width: 36rem;
+  text-align: center;
+}
+
+/* Update url-input width to be 100% since container will control max width */
+.url-input {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 100%;
+  background: #f5f5f5;
+}
+
+.copy-button {
+  padding: 8px;
+  color: #666;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button:hover {
+  background: #f0f0f0;
+}
+
+.copy-button:active {
+  background: #e5e5e5;
+}
+
+.copy-button img {
+  width: 20px;
+  height: 20px;
+}
+
+.copy-button.copied {
+  background: #28a745;
+}

src/main.ts

@@ -1,4 +1,5 @@
 import { bangs } from "./bang";
+import "./global.css";
 
 const defaultBang = bangs.find((b) => b.t === "g");
 
@@ -6,9 +7,36 @@ function noSearchDefaultPageRender() {
   const app = document.querySelector<HTMLDivElement>("#app")!;
   app.innerHTML = `
     <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
-      <h1>Unduck</h1>
+      <div class="content-container">
+        <h1>Unduck</h1>
+        <p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>
+        <div class="url-container"> 
+          <input 
+            type="text" 
+            class="url-input"
+            value="https://unduck.link/search?q={{{s}}}" 
+            readonly 
+          />
+          <button class="copy-button">
+            <img src="/clipboard.svg" alt="Copy" />
+          </button>
+        </div>
+      </div>
     </div>
   `;
+
+  const copyButton = app.querySelector<HTMLButtonElement>(".copy-button")!;
+  const copyIcon = copyButton.querySelector("img")!;
+  const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
+
+  copyButton.addEventListener("click", async () => {
+    await navigator.clipboard.writeText(urlInput.value);
+    copyIcon.src = "/clipboard-check.svg";
+
+    setTimeout(() => {
+      copyIcon.src = "/clipboard.svg";
+    }, 2000);
+  });
 }
 
 function getBangredirectUrl() {