diff --git a/index.html b/index.html index 3c5e019..65219da 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + - Bang + Bang! + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/chrome.svg b/public/chrome.svg new file mode 100644 index 0000000..4ff6ab6 --- /dev/null +++ b/public/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/clipboard.svg b/public/clipboard.svg index deea4b9..c3744d0 100644 --- a/public/clipboard.svg +++ b/public/clipboard.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/firefox.svg b/public/firefox.svg new file mode 100644 index 0000000..b5ab67e --- /dev/null +++ b/public/firefox.svg @@ -0,0 +1,120 @@ + + + + Firefox Browser logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Firefox Browser logo + + + + \ No newline at end of file diff --git a/src/global.css b/src/global.css index ac468d7..e70413a 100644 --- a/src/global.css +++ b/src/global.css @@ -1,13 +1,10 @@ -/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */ - -/* Font fallback that closely matches Inter metrics */ +/* --- Import and fonts unchanged --- */ @font-face { font-family: "Inter Fallback"; size-adjust: 107%; ascent-override: 90%; src: local("Arial"); } - :root { font-family: Inter, @@ -27,27 +24,41 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + /* --- Dark mode color variables --- */ + --bg-color: #121212; /* Dark background */ + --text-color: #e2e2e2; /* Light text */ + --input-bg-color: #1e1e1e; /* Dark input background */ + --input-border-color: #333; /* Darker border for inputs */ + --accent-color: #bbb; /* Accent color for links/buttons */ + --hover-bg-color: #2c2c2c; /* Hover state background color */ + --active-bg-color: #3a3a3a; /* Active state background color */ + --success-color: #28a745; /* Green for copy-success feedback */ } +/* --- Normalized layout reset stays the same --- */ * { margin: 0; padding: 0; box-sizing: border-box; } - html, body { height: 100%; width: 100%; + background-color: var(--bg-color); } +/* --- Modified to Dark mode --- */ body { line-height: 1.5; font-weight: 400; font-size: 16px; - color: #1a1a1a; + background-color: var(--bg-color); /* Changed: Added dark background */ + color: var(--text-color); /* Changed: Light text color */ } +/* Header and fonts remain unchanged (already good contrast with dark mode) */ h1, h2, h3, @@ -58,94 +69,87 @@ h6 { line-height: 1.2; } +/* --- Link colors modified for contrast --- */ a { - color: #444444; + color: var(--accent-color); /* Changed: Lighter accent/link color */ } a:hover { - color: #888888; + color: white; /* Changed: Bright when hovered */ } +/* --- Basic element reset unchanged --- */ button { font: inherit; border: none; background: none; cursor: pointer; } - input, textarea { font: inherit; } +.bang-title { + margin-bottom: 16px; +} -/* Add these new styles */ +/* --- Container layout unchanged --- */ .url-container { display: flex; align-items: center; gap: 8px; margin-top: 16px; } - -/* Add this new style */ .content-container { max-width: 36rem; text-align: center; padding: 0 8px; } -/* Update url-input width to be 100% since container will control max width */ +/* --- URL input element styling adjustments --- */ .url-input { padding: 8px 12px; - border: 1px solid #ddd; + border: 1px solid var(--input-border-color); /* Changed: Darker border */ border-radius: 4px; width: 100%; - background: #f5f5f5; + background: var(--input-bg-color); /* Changed: Dark input bg */ + color: var(--text-color); /* Added: Input text color */ text-align: center; } +/* --- Copy-button style adjustments --- */ .copy-button { padding: 8px; - color: #666; + color: var(--accent-color); /* Changed: Accent color instead of gray */ border-radius: 4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } - .copy-button:hover { - background: #f0f0f0; + background: var(--hover-bg-color); /* Changed: Hover bg darker */ } - .copy-button:active { - background: #e5e5e5; + background: var(--active-bg-color); /* Changed: Active state even darker */ } - .copy-button img { width: 20px; height: 20px; } - +/* Copy feedback unchanged (Green stands out in dark mode as well) */ .copy-button.copied { - background: #28a745; + background: var(--success-color); + color: white; /* Ensures contrast */ } - -/* Add footer styles */ -.footer { - position: fixed; - bottom: 16px; - left: 0; - right: 0; - text-align: center; - font-size: 14px; - color: #666; +.settings-title { + margin-top: 36px; + margin-bottom: 24px; + font-size: 20px; } - -.footer a { - color: #666; - text-decoration: none; - font-weight: 500; -} - -.footer a:hover { - color: #333; +.settings-links-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 32px; } diff --git a/src/main.ts b/src/main.ts index 64a7cf0..2bd2dc2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,18 +6,46 @@ function noSearchDefaultPageRender() { app.innerHTML = `
-

Bang

+

💣 Bang!

+

+ Add the following URL as a custom search engine to your browser in order to enable + + all of DuckDuckGo's bangs + + right from your browser's search bar! +

+

Search Settings Links

+
+

+ + Firefox + +

+

+ + Chrome + +

+
`; @@ -27,7 +55,7 @@ function noSearchDefaultPageRender() { const urlInput = app.querySelector(".url-input")!; copyButton.addEventListener("click", async () => { - await navigator.clipboard.writeText("https://" + urlInput.value); + await navigator.clipboard.writeText(urlInput.value); copyIcon.src = "/clipboard-check.svg"; setTimeout(() => {