Search Trifecta

body{font-family:Arial,Helvetica,sans-serif;font-size:16px;} .smartsearchdemo__container {margin: 0 auto;min-width: 340px;max-width: 1280px;} .smartsearchdemo__container .search-field__container,.smartsearchdemo__container .conceptsearch-field__container {display: flex;justify-content: space-around;gap: 12px;} .smartsearchdemo__container .search-field__bar{display: flex;justify-content: space-around;background-color: #f5f7fa;padding: 0px 16px;align-items: center;flex: 1 0 0;border-radius: 100px;border: 1px solid #e6e9ed;transition: all .25s ease-in-out;} .smartsearchdemo__container .search-field__bar:focus,.smartsearchdemo__container .search-field__bar:hover,.smartsearchdemo__container .search-field__bar:focus-within,.smartsearchdemo__container .search-field__bar:target,.smartsearchdemo__container .search-field__bar:focus-visible, .smartsearchdemo__container .search-field__actions .search-field__actions__button:focus,.smartsearchdemo__container .search-field__actions .search-field__actions__button:hover,.smartsearchdemo__container .search-field__actions .search-field__actions-button:focus-within, .smartsearchdemo__container .search-field__actions .search-field__actions__button:target,.smartsearchdemo__container .search-field__actions .search-field__actions__button:focus-visible {border: 1px solid #119FF7;background: #FFF;} .smartsearchdemo__container .search-field__bar .search-field__bar__icon {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;margin: 0;max-width: 7.5rem;vertical-align: top;} .smartsearchdemo__container .search-field__bar .search-field__bar__link {color: #656D78;padding: 16px 24px;cursor: pointer;} .smartsearchdemo__container .search-field__bar .search-field__bar__divider{display: flex;border-left: 1px solid #e6e9ed;height: 100%;} .smartsearchdemo__container .search-field__actions .search-field__actions__button {display: flex;padding: 16px;align-items: center;align-self: stretch;border-radius: 100px;border: 1px solid #e6e9ed;background: #f5f7fa;transition: all .25s ease-in-out;cursor: pointer;} .smartsearchdemo__container .search-field__actions .search-field__actions__icon {width: 20px;height: 20px;} .smartsearchdemo__container .visualsearch-field__dialog {display: flex;position: relative;box-sizing: border-box;max-width: 1280px;padding: 32px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 32px;border-radius: 25px;border: 1px solid #119ff7;background: #fff;} .smartsearchdemo__container .visualsearch-field__dialog .visualsearch-field__dialog__title {display: flex;justify-content: space-between;width: 100%;} .smartsearchdemo__container .visualsearch-field__dialog .visualsearch-field__dialog__title > h2 {display: block;margin: 0;color: #353b48 !important;font-size: 18px;font-style: normal;font-weight: 700;line-height: 100%;letter-spacing: .2px;} .smartsearchdemo__container .visualsearch-field__dialog .visualsearch-field__dialog__body {display: flex;width: 100%;flex-direction: column;} .smartsearchdemo__container .visualsearch-field__close {display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;margin: 0;position: absolute;top: 1px;right: 1px;box-sizing: border-box;vertical-align: top;border: none;background: #fff;border-radius: 50%;cursor: pointer;} .smartsearchdemo__container .visualsearch-field__close:hover {background-color: #F5F7FA } function getRequestTypeIndex(e){const t=e.get(“requestType”);return t?”ConceptSearch”===t?1:”ImageSearch”===t?2:0:0}document.addEventListener(“DOMContentLoaded”,(function(){let e=getRequestTypeIndex(new URL(document.location).searchParams)||0;function t(t){if(t.preventDefault(),”keypress”===t.type&&13===t.which||”click”===t.type){let t=parseInt(this.dataset.tabIndex);t!==e&&document.querySelectorAll(“.smartsearchdemo__container .tab-container”).forEach((function(n){if(parseInt(n.dataset.tabIndex)===t)return document.querySelectorAll(“.tab-container”).forEach((function(e){e.style.display=”none”})),n.style.display=”block”,void(e=parseInt(n.dataset.tabIndex))}))}}document.querySelectorAll(“.tab-container”).forEach((function(t){parseInt(t.dataset.tabIndex)===e?t.style.display=”block”:t.style.display=”none”})),document.querySelectorAll(“.tab-switcher”).forEach((function(e){e.addEventListener(“click”,t),e.addEventListener(“keypress”,t)}))})); addEventListener(‘hawksearch:loaded’, () => { HawkSearch.init({ clientId: “3953cf87e0aa4a4eb9496a24d5a0fa84”, components: { ‘search-field’: { strings: { placeholder: ‘Search by Keyword’ } }, ‘conceptsearch-field’: { strings: { placeholder: ‘Search by a Concept’ } }, ‘imagesearch-field’: { strings: { placeholder: ‘Describe an image’ } }, ‘visualsearch-field’: { template: ‘visualsearch-field__template’, strings: { dragImageMessage: ‘Search By Image’, dropImageMessage: ‘Drop an image here’ } }, ‘search-results-item’: { template: ‘search-results-item__template’ } }, search: { url: window.location.pathname, endpointUrl: “https://essearchapi-na.hawksearch.com” }, urlPrefixes: { assets: “https://dashboard-na.hawksearch.com”, content: “https://preview.hawksearch.net/outdoordemo”, }, css: { customStyles: ‘custom-styles__template’ }, debug: true }); });