Update index.html

index.html

@@ -6,296 +6,7 @@
   <title>SurfGO — premium search engine by AnesNT</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'Inter', system-ui, -apple-system, sans-serif;
-      background: linear-gradient(145deg, #f5f7fe 0%, #eef2fa 100%);
-      min-height: 100vh;
-      color: #121826;
-    }
-
-    /* premium glass header */
-    .header {
-      background: rgba(255, 255, 255, 0.94);
-      backdrop-filter: blur(20px);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .container {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 1.25rem 2rem;
-    }
-
-    .logo-area {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-
-    .brand h1 {
-      font-size: 2.1rem;
-      font-weight: 800;
-      letter-spacing: -0.5px;
-      background: linear-gradient(135deg, #1A2A6C, #b21f1f, #fdbb4d);
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-    }
-
-    .brand .badge {
-      background: rgba(0, 0, 0, 0.05);
-      padding: 4px 10px;
-      border-radius: 40px;
-      font-size: 0.7rem;
-      font-weight: 600;
-      color: #2c3e66;
-    }
-
-    .creator {
-      font-size: 0.85rem;
-      font-weight: 500;
-      color: #4a5b7a;
-      background: #ffffffcc;
-      padding: 5px 12px;
-      border-radius: 30px;
-    }
-
-    .creator i {
-      margin-right: 6px;
-      color: #fdbb4d;
-    }
-
-    /* search bar */
-    .search-section {
-      margin: 1.5rem 0 0.5rem;
-    }
-
-    .search-wrapper {
-      background: white;
-      border-radius: 60px;
-      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.02);
-      display: flex;
-      align-items: center;
-      padding: 0.35rem 0.35rem 0.35rem 1.8rem;
-      transition: all 0.25s ease;
-    }
-
-    .search-wrapper:focus-within {
-      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12), 0 0 0 2px #fdbb4d80;
-      transform: scale(1.01);
-    }
-
-    .search-wrapper input {
-      flex: 1;
-      border: none;
-      padding: 1rem 0;
-      font-size: 1.1rem;
-      font-weight: 500;
-      background: transparent;
-      outline: none;
-      font-family: 'Inter', monospace;
-      color: #111827;
-    }
-
-    .search-wrapper input::placeholder {
-      color: #9ca3af;
-      font-weight: 400;
-    }
-
-    .search-actions {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .voice-btn, .search-submit {
-      background: transparent;
-      border: none;
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      font-size: 1.3rem;
-      cursor: pointer;
-      transition: 0.2s;
-      color: #4b5563;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .voice-btn:hover, .search-submit:hover {
-      background: #f3f4f6;
-      color: #fdbb4d;
-    }
-
-    .search-submit {
-      background: #1e293b;
-      color: white;
-      width: auto;
-      padding: 0 1.6rem;
-      border-radius: 50px;
-      font-weight: 600;
-      gap: 8px;
-      font-size: 0.95rem;
-    }
-
-    .search-submit:hover {
-      background: #fdbb4d;
-      color: #1e293b;
-    }
-
-    /* TABS */
-    .tabs {
-      display: flex;
-      gap: 0.25rem;
-      background: #ffffffcc;
-      backdrop-filter: blur(8px);
-      padding: 0.5rem;
-      border-radius: 60px;
-      margin: 1.8rem 0 1.2rem;
-      border: 1px solid rgba(0,0,0,0.03);
-      width: fit-content;
-    }
-
-    .tab-btn {
-      padding: 0.6rem 1.8rem;
-      border-radius: 40px;
-      font-weight: 600;
-      font-size: 0.9rem;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      transition: all 0.2s;
-      color: #334155;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-family: 'Inter', sans-serif;
-    }
-
-    .tab-btn i {
-      font-size: 1rem;
-    }
-
-    .tab-btn.active {
-      background: #1e293b;
-      color: white;
-      box-shadow: 0 6px 12px -8px rgba(0,0,0,0.2);
-    }
-
-    .tab-btn:not(.active):hover {
-      background: #eef2ff;
-      color: #1e293b;
-    }
-
-    /* results container */
-    .results-container {
-      margin-top: 1.5rem;
-      background: rgba(255,255,255,0.6);
-      backdrop-filter: blur(2px);
-      border-radius: 32px;
-      padding: 0.2rem;
-      min-height: 55vh;
-    }
-
-    .cse-wrapper {
-      display: none;
-    }
-
-    .cse-wrapper.active {
-      display: block;
-    }
-
-    /* style Google results */
-    .gsc-control-cse, .gsc-control-wrapper-cse {
-      background: transparent !important;
-      border: none !important;
-      padding: 0 !important;
-    }
-    .gsc-result-info, .gsc-orderby {
-      font-family: 'Inter', sans-serif !important;
-      color: #334155 !important;
-    }
-    .gsc-webResult .gsc-result {
-      background: white !important;
-      border-radius: 20px !important;
-      padding: 0.8rem 1.2rem !important;
-      margin-bottom: 1rem !important;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
-      border: 1px solid rgba(0,0,0,0.03) !important;
-    }
-
-    .footer {
-      text-align: center;
-      margin-top: 3rem;
-      padding: 1.5rem;
-      color: #6c757d;
-      font-size: 0.75rem;
-      border-top: 1px solid rgba(0,0,0,0.05);
-    }
-
-    .toast-msg {
-      position: fixed;
-      bottom: 25px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: #1e293be6;
-      backdrop-filter: blur(12px);
-      color: #fef9e6;
-      padding: 12px 24px;
-      border-radius: 50px;
-      font-size: 0.85rem;
-      font-weight: 500;
-      z-index: 999;
-      border-left: 4px solid #fdbb4d;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.2s;
-      white-space: nowrap;
-    }
-
-    @media (max-width: 700px) {
-      .container { padding: 1rem; }
-      .brand h1 { font-size: 1.7rem; }
-      .search-wrapper { padding-left: 1rem; }
-      .search-wrapper input { font-size: 0.95rem; }
-      .tab-btn { padding: 0.4rem 1rem; font-size: 0.8rem; }
-      .search-submit span { display: none; }
-      .search-submit { width: 48px; padding: 0; }
-      .toast-msg { white-space: nowrap; font-size: 0.75rem; }
-    }
-
-    @keyframes pulseMic {
-      0% { box-shadow: 0 0 0 0 rgba(253, 187, 77, 0.6); }
-      70% { box-shadow: 0 0 0 12px rgba(253, 187, 77, 0); }
-      100% { box-shadow: 0 0 0 0 rgba(253, 187, 77, 0); }
-    }
-    .listening-active {
-      animation: pulseMic 1.2s infinite;
-      background: #fdbb4d !important;
-      color: #121826 !important;
-    }
-  </style>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
@@ -344,248 +55,6 @@
 </div>
 <div id="toastMsg" class="toast-msg"></div>
 
-<script>
-  (function() {
-    // Configuration: mapping tab -> container ID & CSE ID
-    const config = {
-      all: { container: 'cse-all', cx: '2342fc17cd34f4cba' },
-      images: { container: 'cse-images', cx: '23c7fd94975714dd8' },
-      news: { container: 'cse-news', cx: '35b0f5b6012e94f78' },
-      videos: { container: 'cse-videos', cx: 'b11f5dceb04784b9f' }
-    };
-    
-    let activeTab = 'all';
-    let cseReady = { all: false, images: false, news: false, videos: false };
-    let cseElements = {}; // store element references
-    
-    // DOM elements
-    const searchInput = document.getElementById('searchInput');
-    const searchBtn = document.getElementById('searchBtn');
-    const voiceBtn = document.getElementById('voiceBtn');
-    const tabs = document.querySelectorAll('.tab-btn');
-    
-    function showMessage(msg, isError = false) {
-      const toast = document.getElementById('toastMsg');
-      toast.textContent = msg;
-      toast.style.opacity = '1';
-      toast.style.background = isError ? '#b91c1ce6' : '#1e293be6';
-      toast.style.borderLeftColor = isError ? '#ff8a5c' : '#fdbb4d';
-      setTimeout(() => { toast.style.opacity = '0'; }, 2800);
-    }
-    
-    // Load Google CSE API dynamically once (without default cx, we'll render manually)
-    function loadGoogleCSE() {
-      return new Promise((resolve, reject) => {
-        if (window.google && window.google.search && window.google.search.cse) {
-          resolve();
-          return;
-        }
-        const script = document.createElement('script');
-        // We must include a cx, but we will override with render. Use a dummy temporary cx.
-        script.src = 'https://cse.google.com/cse.js?cx=2342fc17cd34f4cba'; // any valid one to load library
-        script.async = true;
-        script.onload = () => {
-          // Wait for google.search.cse to be fully defined
-          const checkInterval = setInterval(() => {
-            if (window.google && window.google.search && window.google.search.cse && window.google.search.cse.element) {
-              clearInterval(checkInterval);
-              resolve();
-            }
-          }, 100);
-          setTimeout(() => { clearInterval(checkInterval); reject(new Error('Timeout loading CSE')); }, 8000);
-        };
-        script.onerror = () => reject(new Error('Failed to load CSE script'));
-        document.head.appendChild(script);
-      });
-    }
-    
-    // Render a specific CSE engine inside its container
-    async function renderCSE(tabId) {
-      if (cseReady[tabId]) return true;
-      const cfg = config[tabId];
-      if (!cfg) return false;
-      const containerDiv = document.getElementById(cfg.container);
-      if (!containerDiv) return false;
-      
-      // Clear any previous content
-      containerDiv.innerHTML = '';
-      
-      return new Promise((resolve) => {
-        try {
-          google.search.cse.element.render({
-            div: cfg.container,
-            tag: 'searchresults-only',
-            cx: cfg.cx,
-            query: '' // start empty
-          });
-          // Wait a bit for the element to be registered
-          setTimeout(() => {
-            const element = google.search.cse.element.getElement(cfg.container);
-            if (element) {
-              cseElements[tabId] = element;
-              cseReady[tabId] = true;
-              resolve(true);
-            } else {
-              resolve(false);
-            }
-          }, 400);
-        } catch(e) {
-          console.error(e);
-          resolve(false);
-        }
-      });
-    }
-    
-    // Perform search on active tab
-    async function performSearch(query) {
-      if (!query.trim()) {
-        showMessage('✨ Please enter a search term.', true);
-        return;
-      }
-      const tab = activeTab;
-      // Ensure CSE for this tab is rendered
-      if (!cseReady[tab]) {
-        showMessage(`Initializing ${tab} search engine...`, false);
-        const ok = await renderCSE(tab);
-        if (!ok) {
-          showMessage(`Failed to load ${tab} search. Check your internet or CSE ID.`, true);
-          return;
-        }
-      }
-      const element = cseElements[tab];
-      if (element && typeof element.execute === 'function') {
-        element.execute(query);
-        showMessage(`🔍 SurfGO: "${query}" in ${tab.toUpperCase()}`, false);
-      } else {
-        // Fallback: try to re-render with query
-        const cfg = config[tab];
-        const containerDiv = document.getElementById(cfg.container);
-        if (containerDiv) {
-          containerDiv.innerHTML = '';
-          google.search.cse.element.render({
-            div: cfg.container,
-            tag: 'searchresults-only',
-            cx: cfg.cx,
-            query: query
-          });
-          showMessage(`🔄 Loading results for "${query}"...`, false);
-          // update reference after render
-          setTimeout(() => {
-            const newEl = google.search.cse.element.getElement(cfg.container);
-            if (newEl) cseElements[tab] = newEl;
-            cseReady[tab] = true;
-          }, 300);
-        } else {
-          showMessage('Cannot display results container', true);
-        }
-      }
-    }
-    
-    // Switch active tab visually and prepare CSE if needed
-    function switchTab(tabId) {
-      activeTab = tabId;
-      // Update UI
-      tabs.forEach(btn => {
-        if (btn.getAttribute('data-tab') === tabId) {
-          btn.classList.add('active');
-        } else {
-          btn.classList.remove('active');
-        }
-      });
-      // Show correct wrapper
-      for (const [key, cfg] of Object.entries(config)) {
-        const wrapper = document.getElementById(cfg.container);
-        if (wrapper) {
-          if (key === tabId) wrapper.classList.add('active');
-          else wrapper.classList.remove('active');
-        }
-      }
-      // If there's already a query, re-run search on new tab (great UX)
-      const currentQuery = searchInput.value.trim();
-      if (currentQuery !== "") {
-        performSearch(currentQuery);
-      } else {
-        // ensure engine is ready silently
-        if (!cseReady[tabId]) renderCSE(tabId);
-      }
-    }
-    
-    // Event handlers
-    searchBtn.addEventListener('click', () => performSearch(searchInput.value.trim()));
-    searchInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') performSearch(searchInput.value.trim());
-    });
-    
-    tabs.forEach(btn => {
-      btn.addEventListener('click', () => {
-        const tabId = btn.getAttribute('data-tab');
-        if (tabId === activeTab) return;
-        switchTab(tabId);
-      });
-    });
-    
-    // Voice search
-    let recognition = null;
-    let isListening = false;
-    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-      recognition = new SpeechRecognition();
-      recognition.lang = 'en-US';
-      recognition.continuous = false;
-      recognition.interimResults = false;
-      recognition.onstart = () => {
-        isListening = true;
-        voiceBtn.classList.add('listening-active');
-        showMessage("🎙️ Listening... speak your query", false);
-      };
-      recognition.onend = () => {
-        isListening = false;
-        voiceBtn.classList.remove('listening-active');
-      };
-      recognition.onerror = (event) => {
-        voiceBtn.classList.remove('listening-active');
-        let errMsg = "Voice recognition failed";
-        if (event.error === 'no-speech') errMsg = "No speech detected. Try again.";
-        else if (event.error === 'not-allowed') errMsg = "Microphone permission denied.";
-        showMessage(`🎤 ${errMsg}`, true);
-      };
-      recognition.onresult = (event) => {
-        const transcript = event.results[0][0].transcript;
-        if (transcript.trim()) {
-          searchInput.value = transcript.trim();
-          performSearch(transcript.trim());
-        } else {
-          showMessage("Could not understand, please type.", true);
-        }
-      };
-      voiceBtn.addEventListener('click', () => {
-        if (isListening) recognition.stop();
-        else recognition.start();
-      });
-    } else {
-      voiceBtn.addEventListener('click', () => showMessage("Voice search not supported in this browser.", true));
-    }
-    
-    // Initialize: load CSE library, then pre-render active tab (All)
-    async function init() {
-      await loadGoogleCSE();
-      // Pre-render the 'all' tab
-      const ok = await renderCSE('all');
-      if (ok) {
-        showMessage("SurfGO is ready — search anything.", false);
-      } else {
-        showMessage("CSE initialization issue, but you can still try searching.", true);
-      }
-      // Preload other tabs in background (optional)
-      setTimeout(() => {
-        renderCSE('images');
-        renderCSE('news');
-        renderCSE('videos');
-      }, 1000);
-      searchInput.focus();
-    }
-    init();
-  })();
-</script>
+<script src="script.js"></script>
 </body>
 </html>