File size: 9,217 Bytes
c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 efb9b47 c2d7742 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!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; align-items: center; min-height: 100vh; }
.header { width: 100%; background: var(--white); padding: 40px 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: 15px 0; }
.logo { font-size: 3rem; 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.9rem; color: #64748b; margin-bottom: 25px; }
.search-container { width: 90%; max-width: 700px; display: flex; gap: 12px; }
.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.01); }
input { flex: 1; border: none; padding: 15px 25px; font-size: 1.1rem; outline: none; font-family: inherit; }
.search-btn { background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); color: white; border: none; padding: 0 30px; border-radius: 50px; cursor: pointer; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
.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); border-color: var(--primary-color); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.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="Explore the web with SurfGO...">
<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 Backend.</p>';
}
}
document.getElementById('search-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') performSearch();
});
</script>
</body>
</html> |