add vst search

docs/index.html

@@ -39,9 +39,10 @@
             <h1>KeksPirates</h1>
         </div>
         <nav class="tab">
-            <a class="tablinks" onclick="openTab(event, 'start')" id="defaultOpen">Home</a>
+            <a class="tablinks" onclick="openTab(event, 'start')" id="navHome">Home</a>
-            <a class="tablinks" onclick="openTab(event, 'api')">API</a>
+            <a class="tablinks" onclick="openTab(event, 'api')" id="navApi">API</a>
-            <a class="tablinks" onclick="openTab(event, 'docs')">Docs</a>
+            <a class="tablinks" onclick="openTab(event, 'docs')" id="navDocs">Docs</a>
+            <a class="tablinks" id="navVst" href="https://vstsearch.softwaremanager.xyz">VST Search</a>
             <!-- <a class="tablinks" onclick="openTab(event, 'notfound')">404</a> -->
         </nav>
     </header>
@@ -187,6 +188,17 @@
             </div>
         </div>
 
+        <div id="vstsearch" class="tabcontent">
+            <div class="cse-search">
+                <h3 class="vst-logo"><span style="color: #db65d5">VST Search</span></h3>
+                <div class="gcse-searchbox"></div>
+
+                <div class="gcse-searchresults"></div>
+
+
+            </div>
+        </div>
+
         <div id="notfound" class="tabcontent">
             <div class="notfound-frame">
                 <h1 class="notfound-title">404</h1>
@@ -203,6 +215,20 @@
     </footer>
 
     <script>
+    const MAIN_ORIGIN = 'https://softwaremanager.xyz';
+    const VST_ORIGIN  = 'https://vstsearch.softwaremanager.xyz';
+    const onVstDomain = window.location.hostname.startsWith('vstsearch.');
+
+    let cseLoaded = false;
+    function loadCSE() {
+        if (cseLoaded) return;
+        cseLoaded = true;
+        var s = document.createElement('script');
+        s.async = true;
+        s.src = 'https://cse.google.com/cse.js?cx=e7334cef72a8b42e7';
+        document.head.appendChild(s);
+    }
+
     function openTab(evt, tabName, pushToHistory = true) {
         var i, tabcontent, tablinks;
         
@@ -218,6 +244,8 @@
         
         var target = document.getElementById(tabName);
         target.style.display = "block";
+
+        if (tabName === 'vstsearch') loadCSE();
         // restart animation
         target.classList.remove('tab-animate');
         void target.offsetWidth;
@@ -247,6 +275,10 @@
 
     // Determine the correct tab immediately (before full load) to prevent flash
     (function() {
+        if (onVstDomain) {
+            document.getElementById('vstsearch').style.display = 'block';
+            return;
+        }
         let currentPath = window.location.pathname;
         let tabName = 'start';
         if (currentPath === '/api') tabName = 'api';
@@ -257,9 +289,23 @@
     })();
 
     window.onload = function() {
+        if (onVstDomain) {
+            document.getElementById('navHome').href = MAIN_ORIGIN + '/';
+            document.getElementById('navApi').href  = MAIN_ORIGIN + '/api';
+            document.getElementById('navDocs').href = MAIN_ORIGIN + '/docs';
+            ['navHome', 'navApi', 'navDocs'].forEach(function(id) {
+                document.getElementById(id).removeAttribute('onclick');
+            });
+            openTab(null, 'vstsearch', false);
+            document.getElementById('navVst').className += " active";
+            return;
+        }
+
         let currentPath = window.location.pathname;
-        
+
-        if (currentPath === '/api') {
+        if (currentPath === '/vstsearch') {
+            window.location.replace(VST_ORIGIN);
+        } else if (currentPath === '/api') {
             openTab(null, 'api', false);
         } else if (currentPath === '/docs') {
             openTab(null, 'docs', false);

docs/main.css

@@ -378,6 +378,84 @@ pre.api-response {
     font-size: 2rem;
 }
 
+.cse-search {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 70vh;
+    text-align: center;
+}
+
+.cse-search .vst-logo {
+    font-family: var(--main-font);
+    font-size: 3.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin-bottom: 1.5rem;
+    user-select: none;
+}
+
+.cse-search .gsc-control-cse,
+.cse-search .gsc-results-wrapper-overlay,
+.cse-search .gsc-results-wrapper-visible {
+    background: transparent !important;
+    border: none !important;
+}
+
+.cse-search .gsc-input-box,
+.cse-search .gsc-input-box.gsc-input-box-hover,
+.cse-search .gsc-input-box.gsc-input-box-focus {
+    background: #1a1b1d !important;
+    border-color: #1a1b1d !important;
+}
+
+.cse-search .gsc-input,
+.cse-search input.gsc-input,
+.cse-search .gsib_a input.gsc-input {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.cse-search .gsib_a {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.76 13.27L20.49 19L19 20.49L13.27 14.76C12.2 15.53 10.91 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C13.09 3 16 5.91 16 9.5C16 10.91 15.53 12.2 14.76 13.27ZM9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.99 14 14 11.99 14 9.5C14 7.01 11.99 5 9.5 5Z' fill='%23ffffff'/></svg>") !important;
+}
+
+.cse-search .gsc-search-button-v2 {
+    background: #db65d5 !important;
+    border-color: #db65d5 !important;
+}
+
+.cse-search .gsc-search-button-v2:hover {
+    background: #c94dc3 !important;
+    border-color: #c94dc3 !important;
+}
+
+.cse-search .gcsc-more-maybe-branding-root,
+.gcsc-find-more-on-google {
+    display: none !important;
+}
+
+.gsc-completion-container,
+.gssb_c, .gssb_e,
+table.gssb_c, table.gssb_e {
+    background: #1a1b1d !important;
+    border-color: #333 !important;
+    color: #fff !important;
+}
+
+.gsc-completion-container td,
+.gsc-completion-container .gsc-completion-suggestion,
+.gssb_a, .gssb_a td, .gssb_i {
+    background: #1a1b1d !important;
+    color: #fff !important;
+}
+
+.gsc-completion-container .gsc-completion-selected,
+.gsc-completion-container tr:hover td,
+.gssb_a:hover td, .gssb_e-hover {
+    background: #2a2b2d !important;
+}
 
 @media(max-width: 560px) {