Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Beiizetu - AI-Powered Search Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: #1a1a1a; | |
| } | |
| .search-box { | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); | |
| transition: all 0.2s ease; | |
| } | |
| .search-box:hover { | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); | |
| } | |
| .result-card { | |
| transition: all 0.2s ease; | |
| } | |
| .result-card:hover { | |
| background-color: #f8fafc; | |
| } | |
| .ai-response { | |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); | |
| border-radius: 0.5rem; | |
| border-left: 4px solid #6366f1; | |
| } | |
| .nav-link:hover { | |
| text-decoration: underline; | |
| } | |
| .footer-link:hover { | |
| text-decoration: underline; | |
| } | |
| .search-tab { | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.2s ease; | |
| } | |
| .search-tab.active { | |
| border-bottom: 3px solid #6366f1; | |
| color: #6366f1; | |
| } | |
| .search-tab:hover:not(.active) { | |
| border-bottom: 3px solid #e2e8f0; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .loading-pulse { | |
| animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col bg-white"> | |
| <!-- Header --> | |
| <header class="py-3 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="text-lg font-bold gradient-text">Beiizetu</a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-sm text-gray-700 hover:text-indigo-600 nav-link">Discover</a> | |
| <a href="#" class="text-sm text-gray-700 hover:text-indigo-600 nav-link">Images</a> | |
| <a href="#" class="text-sm text-gray-700 hover:text-indigo-600 nav-link">Videos</a> | |
| <a href="#" class="text-sm text-gray-700 hover:text-indigo-600 nav-link">News</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-cog text-gray-600"></i> | |
| </button> | |
| <button class="px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-md hover:opacity-90 transition-opacity"> | |
| Sign in | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col items-center pt-12 px-4"> | |
| <!-- Logo --> | |
| <div class="mb-8 text-center"> | |
| <h1 class="text-6xl font-bold mb-2 gradient-text">Beiizetu</h1> | |
| <p class="text-gray-500">Intelligent search powered by AI</p> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="w-full max-w-2xl mb-8"> | |
| <div class="relative search-box rounded-full border border-gray-200 bg-white"> | |
| <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <input type="text" id="search-input" | |
| class="w-full py-4 px-12 rounded-full focus:outline-none text-lg" | |
| placeholder="Ask anything... Beiizetu understands natural language"> | |
| <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex space-x-2"> | |
| <button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| <button id="search-button" class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-full"> | |
| <i class="fas fa-bolt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-6 space-x-3"> | |
| <button class="px-5 py-2.5 bg-gray-100 text-sm text-gray-800 rounded-full hover:shadow transition-shadow flex items-center"> | |
| <i class="fas fa-brain mr-2 text-indigo-600"></i> AI Search | |
| </button> | |
| <button class="px-5 py-2.5 bg-gray-100 text-sm text-gray-800 rounded-full hover:shadow transition-shadow flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-indigo-600"></i> Trends | |
| </button> | |
| <button class="px-5 py-2.5 bg-gray-100 text-sm text-gray-800 rounded-full hover:shadow transition-shadow flex items-center"> | |
| <i class="fas fa-history mr-2 text-indigo-600"></i> History | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Results --> | |
| <div id="search-results" class="w-full max-w-3xl hidden"> | |
| <!-- Search Tabs --> | |
| <div class="flex border-b border-gray-200 mb-4"> | |
| <button class="px-4 py-3 text-sm font-medium search-tab active"> | |
| <i class="fas fa-globe mr-1"></i> Web | |
| </button> | |
| <button class="px-4 py-3 text-sm font-medium search-tab"> | |
| <i class="fas fa-image mr-1"></i> Images | |
| </button> | |
| <button class="px-4 py-3 text-sm font-medium search-tab"> | |
| <i class="fas fa-newspaper mr-1"></i> News | |
| </button> | |
| <button class="px-4 py-3 text-sm font-medium search-tab"> | |
| <i class="fas fa-play-circle mr-1"></i> Videos | |
| </button> | |
| <button class="px-4 py-3 text-sm font-medium search-tab"> | |
| <i class="fas fa-shopping-bag mr-1"></i> Shopping | |
| </button> | |
| <button class="px-4 py-3 text-sm font-medium search-tab"> | |
| <i class="fas fa-ellipsis-h mr-1"></i> More | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-sm text-gray-600"> | |
| About <span id="result-count">1,240,000,000</span> results (<span id="search-time">0.42</span> seconds) | |
| </div> | |
| <div class="text-sm text-indigo-600 flex items-center"> | |
| <i class="fas fa-shield-alt mr-1"></i> Private & Secure | |
| </div> | |
| </div> | |
| <div id="results-container" class="space-y-6"> | |
| <!-- AI Generated Answer --> | |
| <div class="result-card p-4 rounded-lg border border-gray-100"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="text-sm font-medium text-gray-700">AI Summary</div> | |
| </div> | |
| <div class="ai-response p-4 mb-4"> | |
| <div id="ai-answer" class="text-gray-800"> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-3/4 mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-full mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-5/6 mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-2/3"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-info-circle mr-1.5"></i> AI responses may contain inaccuracies. Always verify critical information. | |
| </div> | |
| </div> | |
| <!-- Regular Results will be inserted here by JavaScript --> | |
| </div> | |
| <!-- People Also Ask --> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-xl font-medium mb-4 text-gray-800">Related questions</h3> | |
| <div class="space-y-2"> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 cursor-pointer transition-colors"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-gray-800">What makes Beiizetu different from other search engines?</span> | |
| <i class="fas fa-chevron-down text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 cursor-pointer transition-colors"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-gray-800">How does Beiizetu's AI understand complex queries?</span> | |
| <i class="fas fa-chevron-down text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 cursor-pointer transition-colors"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-gray-800">Is Beiizetu better for research than traditional search?</span> | |
| <i class="fas fa-chevron-down text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Searches --> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-medium mb-4 text-gray-800">Related searches</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-search text-gray-400 mr-2"></i> | |
| <a href="#" class="text-indigo-600 hover:underline">beiizetu vs traditional search</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-search text-gray-400 mr-2"></i> | |
| <a href="#" class="text-indigo-600 hover:underline">beiizetu advanced search operators</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-search text-gray-400 mr-2"></i> | |
| <a href="#" class="text-indigo-600 hover:underline">how to use beiizetu for research</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-search text-gray-400 mr-2"></i> | |
| <a href="#" class="text-indigo-600 hover:underline">beiizetu privacy features</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="flex space-x-1"> | |
| <button class="px-4 py-2 text-indigo-600 font-medium rounded-l-lg hover:bg-indigo-50 transition-colors"> | |
| <i class="fas fa-arrow-left mr-1"></i> Previous | |
| </button> | |
| <button class="px-4 py-2 text-white font-medium bg-indigo-600 rounded">1</button> | |
| <button class="px-4 py-2 text-indigo-600 font-medium hover:bg-indigo-50 transition-colors">2</button> | |
| <button class="px-4 py-2 text-indigo-600 font-medium hover:bg-indigo-50 transition-colors">3</button> | |
| <button class="px-4 py-2 text-indigo-600 font-medium hover:bg-indigo-50 transition-colors">4</button> | |
| <button class="px-4 py-2 text-indigo-600 font-medium hover:bg-indigo-50 transition-colors">5</button> | |
| <button class="px-4 py-2 text-indigo-600 font-medium rounded-r-lg hover:bg-indigo-50 transition-colors"> | |
| Next <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 border-t border-gray-200 py-4 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="px-4 py-3 text-sm text-gray-600"> | |
| <span class="font-medium">United States</span> | |
| </div> | |
| <div class="border-t border-gray-300 pt-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="flex flex-wrap gap-x-4 gap-y-2 mb-3 md:mb-0"> | |
| <a href="#" class="text-sm text-gray-600 footer-link">About Beiizetu</a> | |
| <a href="#" class="text-sm text-gray-600 footer-link">Privacy Policy</a> | |
| <a href="#" class="text-sm text-gray-600 footer-link">Terms of Service</a> | |
| <a href="#" class="text-sm text-gray-600 footer-link">How Search Works</a> | |
| </div> | |
| <div class="flex flex-wrap gap-x-4 gap-y-2"> | |
| <a href="#" class="text-sm text-gray-600 footer-link">Help Center</a> | |
| <a href="#" class="text-sm text-gray-600 footer-link">Feedback</a> | |
| <a href="#" class="text-sm text-gray-600 footer-link">Settings</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample search results data | |
| const sampleResults = [ | |
| { | |
| title: "Beiizetu - The Future of AI-Powered Search", | |
| url: "https://www.beiizetu.com", | |
| description: "Beiizetu is revolutionizing search with advanced natural language understanding and contextual AI that delivers precise answers to complex questions.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "How Beiizetu's AI Understands Your Intent - Tech Insights", | |
| url: "https://techinsights.com/beiizetu-ai", | |
| description: "A technical deep dive into Beiizetu's proprietary neural network architecture that enables it to interpret search intent with unprecedented accuracy.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "Beiizetu Pro - Enhanced AI Search Experience", | |
| url: "https://pro.beiizetu.com", | |
| description: "Upgrade to Beiizetu Pro for advanced AI features, unlimited follow-up questions, and enterprise-grade security. Start your free trial today.", | |
| isSponsored: true | |
| }, | |
| { | |
| title: "Independent Study: Beiizetu Outperforms in Complex Queries", | |
| url: "https://searchstudies.org/beiizetu-performance", | |
| description: "Recent research shows Beiizetu provides more accurate results for multi-faceted questions compared to traditional search engines.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "The Ethics of AI Search: Beiizetu's Transparent Approach", | |
| url: "https://airethics.org/beiizetu", | |
| description: "How Beiizetu balances powerful AI capabilities with ethical considerations around bias, transparency, and user privacy.", | |
| isSponsored: false | |
| } | |
| ]; | |
| // AI generated answers | |
| const aiAnswers = [ | |
| "Beiizetu is an AI-powered search engine that goes beyond keyword matching to understand the context and intent behind your questions. Using advanced natural language processing and machine learning, Beiizetu can interpret complex queries, synthesize information from multiple sources, and provide direct answers when appropriate. Unlike traditional search engines that primarily return lists of links, Beiizetu aims to deliver comprehensive, contextual responses that save you time and effort.", | |
| "Beiizetu's AI works by analyzing your query using state-of-the-art language models that understand semantics, context, and user intent. The system searches across billions of documents while evaluating source credibility, freshness, and relevance. For factual queries, Beiizetu cross-references multiple authoritative sources. For subjective questions, it provides balanced perspectives. The AI continuously learns from user interactions to improve its understanding and response quality.", | |
| "The key advantages of Beiizetu include its ability to handle conversational, multi-part questions that would require multiple searches on traditional engines. Beiizetu remembers context within a search session, allows natural language follow-ups, and can explain its reasoning. The AI also personalizes results based on demonstrated interests (with user consent) while maintaining strict privacy standards that differentiate it from ad-driven platforms." | |
| ]; | |
| // Handle search | |
| document.getElementById('search-button').addEventListener('click', performSearch); | |
| document.getElementById('search-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| function performSearch() { | |
| const query = document.getElementById('search-input').value.trim(); | |
| if (query === '') return; | |
| // Show loading state | |
| document.getElementById('search-results').classList.remove('hidden'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| // Clear previous results (except the AI answer card which is static) | |
| const aiCard = resultsContainer.querySelector('.result-card'); | |
| resultsContainer.innerHTML = ''; | |
| resultsContainer.appendChild(aiCard); | |
| // Show loading in AI answer | |
| const aiAnswer = document.getElementById('ai-answer'); | |
| aiAnswer.innerHTML = ` | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-3/4 mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-full mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-5/6 mb-2"></div> | |
| <div class="loading-pulse h-4 bg-gray-200 rounded w-2/3"></div> | |
| `; | |
| // Simulate search delay | |
| setTimeout(() => { | |
| displayResults(query); | |
| }, 800 + Math.random() * 700); | |
| } | |
| function displayResults(query) { | |
| const resultsContainer = document.getElementById('results-container'); | |
| // Update result stats | |
| const resultCount = Math.floor(Math.random() * 500000000) + 1000000; | |
| document.getElementById('result-count').textContent = resultCount.toLocaleString(); | |
| document.getElementById('search-time').textContent = (Math.random() * 0.5 + 0.2).toFixed(2); | |
| // Display AI answer | |
| const aiAnswer = document.getElementById('ai-answer'); | |
| const randomAnswer = aiAnswers[Math.floor(Math.random() * aiAnswers.length)]; | |
| aiAnswer.innerHTML = randomAnswer; | |
| // Display regular results | |
| sampleResults.forEach((result, index) => { | |
| const resultElement = document.createElement('div'); | |
| resultElement.className = 'result-card p-4 rounded-lg border border-gray-100'; | |
| if (result.isSponsored) { | |
| resultElement.innerHTML = ` | |
| <div class="flex items-center mb-1"> | |
| <div class="w-4 h-4 rounded-full bg-green-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <div class="text-xs text-gray-500">Sponsored</div> | |
| </div> | |
| <h3 class="text-xl font-medium text-indigo-600 mb-1"><a href="#" class="hover:underline">${highlightQuery(result.title, query)}</a></h3> | |
| <div class="text-green-700 text-sm mb-1 flex items-center"> | |
| <span>${result.url}</span> | |
| <i class="fas fa-caret-down text-gray-500 ml-2 text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">${highlightQuery(result.description, query)}</p> | |
| `; | |
| } else { | |
| resultElement.innerHTML = ` | |
| <h3 class="text-xl font-medium text-indigo-600 mb-1"><a href="#" class="hover:underline">${highlightQuery(result.title, query)}</a></h3> | |
| <div class="text-green-700 text-sm mb-1 flex items-center"> | |
| <span>${result.url}</span> | |
| <i class="fas fa-caret-down text-gray-500 ml-2 text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">${highlightQuery(result.description, query)}</p> | |
| `; | |
| } | |
| resultsContainer.appendChild(resultElement); | |
| }); | |
| // Scroll to results | |
| document.getElementById('search-results').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function highlightQuery(text, query) { | |
| if (!query) return text; | |
| const regex = new RegExp(query.split(' ').join('|'), 'gi'); | |
| return text.replace(regex, match => `<span class="font-medium bg-indigo-50 text-indigo-700">${match}</span>`); | |
| } | |
| // Initialize with a sample search if the page loads without a query | |
| window.addEventListener('load', function() { | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const query = urlParams.get('q'); | |
| if (query) { | |
| document.getElementById('search-input').value = query; | |
| performSearch(); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=THEMONEYHOLLIC/ai-web-search" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |