From 28ce635a3e6a8cdfe3bff2ca5d0359347b7b9e29 Mon Sep 17 00:00:00 2001 From: mica Date: Sun, 25 Feb 2024 17:18:16 -0800 Subject: [PATCH] . --- CNAME | 1 + README.md | 5 ++ dc/index.htm | 34 +++++++++++ edm/index.htm | 35 ++++++++++++ index.htm | 25 +++++++++ script.js | 78 ++++++++++++++++++++++++++ style.css | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++ van/index.htm | 35 ++++++++++++ vic/index.htm | 37 ++++++++++++ 9 files changed, 402 insertions(+) create mode 100644 CNAME create mode 100644 README.md create mode 100644 dc/index.htm create mode 100644 edm/index.htm create mode 100644 index.htm create mode 100644 script.js create mode 100644 style.css create mode 100644 van/index.htm create mode 100644 vic/index.htm diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..a5b02d1 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +multisearch.app \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..28ef6dd --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +## MultiSearch / [multisearch.app](https://multisearch.app) + +In a world where people insist on using 5 different classifieds sites, multisearch.app allows them all to be searched from one place. + +Leave a message in the Issues tab above, and I'll add your city — or any other category of site you think could use a MultiSearch. \ No newline at end of file diff --git a/dc/index.htm b/dc/index.htm new file mode 100644 index 0000000..aa495db --- /dev/null +++ b/dc/index.htm @@ -0,0 +1,34 @@ + + + + + + DC Classifieds MultiSearch + + + +
+
+

MultiSearch

+

Washington, DC Classifieds

+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/edm/index.htm b/edm/index.htm new file mode 100644 index 0000000..e7e28af --- /dev/null +++ b/edm/index.htm @@ -0,0 +1,35 @@ + + + + + + Edmonton Classifieds MultiSearch + + + +
+
+

MultiSearch

+

Edmonton, AB Classifieds

+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..b201799 --- /dev/null +++ b/index.htm @@ -0,0 +1,25 @@ + + + + + + MultiSearch + + + +
+

MultiSearch

+

Classifieds:

+ Victoria, BC

+ Vancouver, BC

+ Edmonton, AB

+ Washington, DC +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0f3be4f --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +const urlParams = new URLSearchParams(location.search); +let q = urlParams.get('q'); +document.querySelector('header').innerText = 'Allow popups for Open All button to work'; +document.querySelector('form div').innerText = 'for multiple searches, separate with commas'; +document.querySelector('footer').addEventListener('click', () => window.open('https://github.com/mica/multisearch.app')); +if (q) { + document.getElementById('search').value = q; + q = q.split(',').filter(e => {return e !== ''}).map(e => e.trim()); + if (q.length > 1) { + const span = document.createElement('span'); + span.classList.add('hidden'); + span.innerText = 'Multi'; + document.querySelector('h1').prepend(span); + setTimeout(() => { + span.classList.add('fade'); + span.classList.remove('hidden'); + }, 300); + } + q.reverse().forEach((search, i) => { + if (!search.length == i) { + document.title = search + ' - ' + document.title; + } else { + document.title = search + ', ' + document.title; + } + }); + q.reverse().forEach((search, i) => { + setTimeout(() => { + mkBtns(search, i); + }, 40 * (i + 1)); + }); +} +function mkBtns(search, i) { + const btns = document.createElement('div'); + btns.classList.add('btns'); + document.querySelector('main').insertAdjacentElement('beforeend', btns) + sites.forEach(site => { + const btnIcon = document.createElement('img'); + btnIcon.src = 'https://www.google.com/s2/favicons?domain=' + site[1].split('/')[2]; + const btnSite = document.createElement('div'); + btnSite.classList.add('btnSite'); + btnSite.append(btnIcon, site[0]); + const btnTxt = document.createElement('div'); + btnTxt.classList.add('btnTxt'); + btnTxt.innerHTML = `search
“${search}”`; + const btn = document.createElement('div'); + btn.classList.add('btn'); + btn.append(btnSite, btnTxt); + const btnLink = document.createElement('a'); + btnLink.href = site[1] + encodeURIComponent(search); + if (site[2]) { + btnLink.href = btnLink.href + site[2]; + } + btnLink.classList.add('hidden'); + btnLink.append(btn); + document.getElementsByClassName('btns')[i].append(btnLink); + }); + const allTxt = document.createElement('div'); + allTxt.innerHTML = 'Open All
in new tabs'; + const allBtn = document.createElement('div'); + allBtn.classList.add('btnAll'); + allBtn.classList.add('hidden'); + allBtn.append(allTxt); + allBtn.addEventListener('click', openAll); + document.getElementsByClassName('btns')[i].append(allBtn); + document.getElementsByClassName('btns')[i].childNodes.forEach((btn, i) => { + setTimeout(() => { + btn.classList.add('fade'); + btn.classList.remove('hidden'); + }, 40 * (i + 1)); + }) +} +function openAll() { + let links = this.parentElement.getElementsByTagName('a'); + links = [...links]; + links.reverse().forEach(link => { + window.open(link.href); + }); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..bdc2bfe --- /dev/null +++ b/style.css @@ -0,0 +1,152 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap'); +body { + background-color: #fcfcfc; + text-align: center; + font-family: 'Montserrat', sans-serif; +} +a, a:visited { + text-decoration: none; + color: #000; +} +/* light grey backgrounds */ +.btn, #search { + background-color: #f9f9f9; +} +/* dark grey backgrounds */ +.btnSite, .btnAll, input[type='submit'] { + background-color: #eee; +} +main { + padding-top: 120px; +} +header { + padding-left: 25px; + position: absolute; + top: 15px; + right: 100px; + font-size: 83%; + color: #888; + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; +} +footer { + position: absolute; + bottom: 20px; + right: 20px; + width: 30px; + height: 30px; + cursor: pointer; + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-size: cover; +} +h1 { + margin: 0; + font-weight: 300; +} +h1 span { + margin-right: 2px; + font-size: 55%; +} +h2 { + margin: 10px 0 18px 0; + font-weight: 300; +} +input { + margin: 2px; + padding: 10px; + border: 1px solid #bbb; + border-radius: 5px; + font-size: 120%; + font-family: inherit; +} +input:focus-visible { + outline: none; +} +input[type='submit'] { + font-size: 105%; +} +form { + margin: 0; +} +form div { + margin: 10px 0 14px 0; + font-size: 83%; + color: #aaa; +} +.btns { + margin-bottom: 8px; + display: flex; + flex-flow: wrap; + justify-content: center; +} +.btn, .btnAll { + margin: 4px; + position: relative; + width: 145px; + height: 95px; + float: left; + border: 1px solid #bbb; + border-radius: 5px; + cursor: pointer; +} +.btnSite { + padding: 4px 0 2px 0; + border-bottom: 1px solid #ddd; + border-radius: 5px 5px 0 0; + font-size: 85%; + white-space: nowrap; + overflow: hidden; +} +.btnSite img { + margin: 0px 5px 3px 3px; + vertical-align: middle; +} +.btnTxt, .btnAll div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.btnTxt { + margin: 6px 2px 0 2px; + color: #bbb; + font-size: 105%; +} +.btnTxt span { + color: #000; +} +.btnTxt small { + font-size: 80%; +} +.btnAll { + color: #bbb; + font-size: 80%; + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-position: 95% 10%; +} +.btnAll span { + color: #000; + font-size: 130%; +} +.btnAll div { + margin-top: 30px; +} +/* hover shadow */ +.btn, .btnAll, input { + transition: box-shadow .3s; +} +.btn:hover, .btnAll:hover, input:hover, input:focus-visible { + box-shadow: 0 0 10px rgba(33,33,33,.3); +} +/* fade-in */ +.hidden { + opacity: 0; +} +.fade { + animation: fade .3s; +} +@keyframes fade { + 0% {opacity: 0;} + 100% {opacity: 1;} +} diff --git a/van/index.htm b/van/index.htm new file mode 100644 index 0000000..b9e1cbf --- /dev/null +++ b/van/index.htm @@ -0,0 +1,35 @@ + + + + + + Vancouver Classifieds MultiSearch + + + +
+
+

MultiSearch

+

Vancouver, BC Classifieds

+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/vic/index.htm b/vic/index.htm new file mode 100644 index 0000000..0adbfcf --- /dev/null +++ b/vic/index.htm @@ -0,0 +1,37 @@ + + + + + + Victoria Classifieds MultiSearch + + + +
+
+

MultiSearch

+

Victoria, BC Classifieds

+
+ + +
+
+
+ + + + + \ No newline at end of file