| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SurfGO - Powered by AnesNT</title> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-color: #2563eb; |
| --accent-color: #7c3aed; |
| --bg-color: #f8fafc; |
| --text-color: #1e293b; |
| --white: #ffffff; |
| --shadow: 0 10px 25px rgba(0,0,0,0.05); |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text-color); |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| |
| .header { |
| width: 100%; |
| background: var(--white); |
| padding: 20px 0; |
| box-shadow: var(--shadow); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| position: sticky; |
| top: 0; |
| z-index: 1000; |
| transition: var(--transition); |
| } |
| |
| .header.compact { |
| padding: 10px 0; |
| } |
| |
| .logo { |
| font-size: 2.5rem; |
| font-weight: 600; |
| color: var(--primary-color); |
| text-decoration: none; |
| letter-spacing: -1px; |
| transition: var(--transition); |
| } |
| |
| .header.compact .logo { |
| font-size: 1.5rem; |
| } |
| |
| .dev-info { |
| font-size: 0.8rem; |
| color: #64748b; |
| margin-bottom: 15px; |
| } |
| |
| |
| .search-container { |
| width: 90%; |
| max-width: 650px; |
| display: flex; |
| gap: 10px; |
| } |
| |
| .input-group { |
| display: flex; |
| background: var(--white); |
| border-radius: 50px; |
| flex: 1; |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| border: 2px solid transparent; |
| transition: var(--transition); |
| } |
| |
| .input-group:focus-within { |
| border-color: var(--primary-color); |
| transform: scale(1.02); |
| } |
| |
| input { |
| flex: 1; |
| border: none; |
| padding: 12px 25px; |
| font-size: 1rem; |
| outline: none; |
| font-family: inherit; |
| } |
| |
| .search-btn { |
| background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); |
| color: white; |
| border: none; |
| padding: 0 25px; |
| border-radius: 50px; |
| cursor: pointer; |
| font-weight: 600; |
| transition: var(--transition); |
| } |
| |
| .search-btn:hover { |
| opacity: 0.9; |
| transform: translateY(-2px); |
| } |
| |
| |
| #home-page { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| flex: 1; |
| padding: 40px 20px; |
| animation: fadeIn 0.8s ease; |
| } |
| |
| .quick-links { |
| margin-top: 50px; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); |
| gap: 20px; |
| width: 100%; |
| max-width: 800px; |
| } |
| |
| .link-card { |
| background: var(--white); |
| padding: 20px; |
| border-radius: 20px; |
| text-align: center; |
| text-decoration: none; |
| color: var(--text-color); |
| box-shadow: var(--shadow); |
| transition: var(--transition); |
| border: 1px solid rgba(0,0,0,0.05); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .link-card:hover { |
| transform: translateY(-10px); |
| background: var(--white); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.1); |
| border-color: var(--primary-color); |
| } |
| |
| .link-card img { |
| width: 48px; |
| height: 48px; |
| border-radius: 12px; |
| object-fit: cover; |
| } |
| |
| .link-card span { |
| font-size: 0.85rem; |
| font-weight: 500; |
| } |
| |
| .genisi-card { |
| background: linear-gradient(45deg, var(--primary-color), var(--accent-color)) !important; |
| color: white !important; |
| } |
| |
| |
| #results-page { |
| display: none; |
| width: 90%; |
| max-width: 850px; |
| margin: 30px auto; |
| animation: slideUp 0.5s ease; |
| } |
| |
| .result-card { |
| background: var(--white); |
| padding: 20px 25px; |
| border-radius: 15px; |
| box-shadow: var(--shadow); |
| text-decoration: none; |
| color: inherit; |
| transition: var(--transition); |
| border: 1px solid #e2e8f0; |
| margin-bottom: 20px; |
| display: block; |
| } |
| |
| .result-card:hover { |
| transform: translateX(10px); |
| border-color: var(--primary-color); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.08); |
| } |
| |
| .result-url { |
| font-size: 0.8rem; |
| color: #94a3b8; |
| margin-bottom: 5px; |
| display: block; |
| } |
| |
| .result-card h3 { |
| margin: 0 0 8px 0; |
| color: var(--primary-color); |
| font-size: 1.2rem; |
| } |
| |
| .result-card p { |
| margin: 0; |
| font-size: 0.9rem; |
| color: #475569; |
| line-height: 1.6; |
| } |
| |
| |
| .loader { |
| display: none; |
| text-align: center; |
| margin: 30px 0; |
| font-weight: 500; |
| color: var(--primary-color); |
| } |
| |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } |
| |
| footer { |
| padding: 20px; |
| text-align: center; |
| font-size: 0.8rem; |
| color: #94a3b8; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="header" id="main-header"> |
| <a href="/" class="logo" onclick="goHome(event)">SurfGO</a> |
| <div class="dev-info">Developed by <b>AnesNT</b> 🇩🇿</div> |
|
|
| <div class="search-container"> |
| <div class="input-group"> |
| <input type="text" id="search-input" placeholder="Search the web or type a URL..."> |
| <button class="search-btn" onclick="performSearch()">Search</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="home-page"> |
| <div class="quick-links"> |
| <a href="https://copilot.microsoft.com/" target="_blank" class="link-card genisi-card"> |
| <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"> |
| <span>Genisi AI</span> |
| </a> |
| <a href="https://youtube.com" target="_blank" class="link-card"> |
| <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube"> |
| <span>YouTube</span> |
| </a> |
| <a href="https://facebook.com" target="_blank" class="link-card"> |
| <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook"> |
| <span>Facebook</span> |
| </a> |
| <a href="https://web.whatsapp.com" target="_blank" class="link-card"> |
| <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp"> |
| <span>WhatsApp</span> |
| </a> |
| <a href="https://instagram.com" target="_blank" class="link-card"> |
| <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram"> |
| <span>Instagram</span> |
| </a> |
| <a href="https://github.com" target="_blank" class="link-card"> |
| <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub"> |
| <span>GitHub</span> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div id="results-page"> |
| <div class="loader" id="loader">Searching the web...</div> |
| <div id="results"></div> |
| </div> |
|
|
| <footer> |
| © 2026 SurfGO - AnesNT Initiative |
| </footer> |
|
|
| <script> |
| const header = document.getElementById('main-header'); |
| const homePage = document.getElementById('home-page'); |
| const resultsPage = document.getElementById('results-page'); |
| |
| function goHome(e) { |
| e.preventDefault(); |
| homePage.style.display = 'flex'; |
| resultsPage.style.display = 'none'; |
| header.classList.remove('compact'); |
| document.getElementById('search-input').value = ''; |
| } |
| |
| async function performSearch() { |
| const query = document.getElementById('search-input').value; |
| const resultsDiv = document.getElementById('results'); |
| const loader = document.getElementById('loader'); |
| |
| if (!query) return; |
| |
| |
| homePage.style.display = 'none'; |
| resultsPage.style.display = 'block'; |
| header.classList.add('compact'); |
| |
| loader.style.display = 'block'; |
| resultsDiv.innerHTML = ''; |
| |
| try { |
| |
| const response = await fetch(`/search?q=${encodeURIComponent(query)}`); |
| if (!response.ok) throw new Error('Network response was not ok'); |
| |
| const data = await response.json(); |
| loader.style.display = 'none'; |
| |
| if (data.results && data.results.length > 0) { |
| data.results.forEach((result, index) => { |
| const card = document.createElement('a'); |
| card.className = 'result-card'; |
| card.href = result.url; |
| card.target = '_blank'; |
| card.style.animationDelay = `${index * 0.1}s`; |
| |
| card.innerHTML = ` |
| <span class="result-url">${result.pretty_url}</span> |
| <h3>${result.title}</h3> |
| <p>${result.content}</p> |
| `; |
| resultsDiv.appendChild(card); |
| }); |
| } else { |
| resultsDiv.innerHTML = '<p style="text-align:center">No results found.</p>'; |
| } |
| } catch (error) { |
| loader.style.display = 'none'; |
| resultsDiv.innerHTML = '<p style="text-align:center; color:red;">Error connecting to SurfGO engine.</p>'; |
| } |
| } |
| |
| document.getElementById('search-input').addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') performSearch(); |
| }); |
| </script> |
| </body> |
| </html> |
