Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BlueSearch | Explore the Void</title> | |
| <style> | |
| /* --- RESET & VARIABLES --- */ | |
| :root { | |
| --bg-deep: #0f172a; | |
| --bg-gradient: radial-gradient(circle at top, #1e293b, #020617); | |
| --primary: #3b82f6; | |
| --primary-hover: #60a5fa; | |
| --accent: #0ea5e9; | |
| --glass: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --font-sans: system-ui, -apple-system, sans-serif; | |
| --font-mono: 'Courier New', Courier, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: var(--bg-deep); | |
| background-image: var(--bg-gradient); | |
| color: var(--text-main); | |
| font-family: var(--font-sans); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| } | |
| /* --- BACKGROUND ANIMATION --- */ | |
| .bg-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| z-index: -1; | |
| opacity: 0.4; | |
| animation: floatOrb 10s infinite ease-in-out; | |
| } | |
| .orb-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: -50px; | |
| left: -50px; | |
| } | |
| .orb-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: #4f46e5; | |
| bottom: -100px; | |
| right: -100px; | |
| animation-delay: -5s; | |
| } | |
| @keyframes floatOrb { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 50% { transform: translate(30px, 50px); } | |
| } | |
| /* --- HEADER --- */ | |
| header { | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .brand { | |
| font-weight: 800; | |
| font-size: 1.5rem; | |
| letter-spacing: -0.05em; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: white; | |
| } | |
| .brand span { | |
| color: var(--primary); | |
| } | |
| .anycoder-link { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| background: var(--glass); | |
| backdrop-filter: blur(5px); | |
| } | |
| .anycoder-link:hover { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); | |
| } | |
| /* --- MAIN CONTENT --- */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Search Container */ | |
| .search-container { | |
| width: 100%; | |
| max-width: 700px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .logo-area { | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| } | |
| .logo-area h1 { | |
| font-size: 4rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #fff 0%, var(--primary) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -2px; | |
| } | |
| .logo-area p { | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| } | |
| /* Search Bar Styling */ | |
| .search-wrapper { | |
| width: 100%; | |
| position: relative; | |
| group: 'search'; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| padding: 1.2rem 1.5rem; | |
| padding-right: 4rem; /* Space for button */ | |
| font-size: 1.1rem; | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50px; | |
| color: white; | |
| outline: none; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .search-bar:focus { | |
| background: rgba(15, 23, 42, 0.9); | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .search-btn { | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| border: none; | |
| background: var(--primary); | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| } | |
| .search-btn:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-50%) scale(1.1); | |
| } | |
| .search-btn:active { | |
| transform: translateY(-50%) scale(0.95); | |
| } | |
| /* Results Area */ | |
| .results-container { | |
| width: 100%; | |
| margin-top: 2rem; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.5s ease; | |
| pointer-events: none; /* Hidden initially */ | |
| } | |
| .results-container.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: all; | |
| } | |
| .result-stats { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| padding-left: 1rem; | |
| } | |
| .result-item { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| padding: 1.5rem; | |
| border-radius: 12px; | |
| margin-bottom: 1rem; | |
| transition: transform 0.2s ease, background 0.2s ease; | |
| cursor: pointer; | |
| animation: slideIn 0.4s ease forwards; | |
| opacity: 0; | |
| } | |
| .result-item:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| transform: translateX(5px); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| .result-link { | |
| color: var(--primary); | |
| font-size: 0.9rem; | |
| margin-bottom: 0.25rem; | |
| display: block; | |
| text-decoration: none; | |
| } | |
| .result-title { | |
| color: var(--text-main); | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .result-snippet { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| /* Loading Spinner */ | |
| .loader { | |
| display: none; | |
| width: 24px; | |
| height: 24px; | |
| border: 3px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes slideIn { | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Footer */ | |
| footer { | |
| padding: 1.5rem; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| border-top: 1px solid var(--glass-border); | |
| background: rgba(2, 6, 23, 0.5); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| .logo-area h1 { font-size: 3rem; } | |
| .search-bar { padding: 1rem; font-size: 1rem; } | |
| header { padding: 1rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Elements --> | |
| <div class="bg-orb orb-1"></div> | |
| <div class="bg-orb orb-2"></div> | |
| <header> | |
| <div class="brand"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> | |
| </svg> | |
| BLUE<span>SEARCH</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <main> | |
| <div class="search-container"> | |
| <div class="logo-area"> | |
| <h1>BlueSearch</h1> | |
| <p>Explore the digital void</p> | |
| </div> | |
| <div class="search-wrapper"> | |
| <input type="text" class="search-bar" id="searchInput" placeholder="Search for projects, ideas, or data..." autocomplete="off"> | |
| <button class="search-btn" id="searchBtn"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> | |
| </svg> | |
| <div class="loader" id="loader"></div> | |
| </button> | |
| </div> | |
| <div class="results-container" id="resultsContainer"> | |
| <div class="result-stats" id="resultStats"></div> | |
| <div id="resultsList"> | |
| <!-- Results injected here --> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| © 2023 BlueSearch Engine. Privacy focused. Secure. | |
| </footer> | |
| <script> | |
| // Mock Database for the Search Engine | |
| const database = [ | |
| { | |
| title: "Project Alpha: Neural Networks", | |
| url: "https://example.com/alpha", | |
| snippet: "Advanced neural network architecture designed for real-time data processing and pattern recognition in blue-themed environments." | |
| }, | |
| { | |
| title: "Blue Ocean Strategy", | |
| url: "https://example.com/strategy", | |
| snippet: "A marketing metaphor that refers to the creation of a new market space, or 'Blue Ocean', rather than competing in an existing industry." | |
| }, | |
| { | |
| title: "CSS Grid & Flexbox Mastery", | |
| url: "https://example.com/css-guide", | |
| snippet: "The ultimate guide to modern CSS layout techniques. Learn how to build responsive grids without frameworks." | |
| }, | |
| { | |
| title: "JavaScript ES6+ Features", | |
| url: "https://example.com/js-es6", | |
| snippet: "Explore arrow functions, destructuring, template literals, and promises. Modernize your codebase today." | |
| }, | |
| { | |
| title: "Cybersecurity Protocols 2024", | |
| url: "https://example.com/security", | |
| snippet: "New standards for encryption and data protection. Essential reading for system administrators." | |
| }, | |
| { | |
| title: "The History of the Internet", | |
| url: "https://example.com/history", | |
| snippet: "From ARPANET to the World Wide Web. A comprehensive timeline of the digital revolution." | |
| }, | |
| { | |
| title: "Minimalist UI Design Principles", | |
| url: "https://example.com/ui-design", | |
| snippet: "Less is more. How to create stunning user interfaces using whitespace, typography, and color theory." | |
| }, | |
| { | |
| title: "Quantum Computing Basics", | |
| url: "https://example.com/quantum", | |
| snippet: "Understanding qubits, superposition, and entanglement. The future of computing is here." | |
| } | |
| ]; | |
| const searchInput = document.getElementById('searchInput'); | |
| const searchBtn = document.getElementById('searchBtn'); | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const resultsList = document.getElementById('resultsList'); | |
| const resultStats = document.getElementById('resultStats'); | |
| const loader = document.getElementById('loader'); | |
| const searchIcon = searchBtn.querySelector('svg'); | |
| // Function to perform search | |
| function performSearch() { | |
| const query = searchInput.value.toLowerCase().trim(); | |
| if (!query) return; | |
| // UI State: Loading | |
| searchIcon.style.display = 'none'; | |
| loader.style.display = 'block'; | |
| resultsContainer.classList.remove('active'); | |
| resultsList.innerHTML = ''; | |
| // Simulate network delay | |
| setTimeout(() => { | |
| // Filter database | |
| const results = database.filter(item => | |
| item.title.toLowerCase().includes(query) || | |
| item.snippet.toLowerCase().includes(query) | |
| ); | |
| // UI State: Results | |
| loader.style.display = 'none'; | |
| searchIcon.style.display = 'block'; | |
| if (results.length > 0) { | |
| resultStats.textContent = `About ${results.length} results found (0.42 seconds)`; | |
| results.forEach((item, index) => { | |
| const resultHTML = ` | |
| <div class="result-item" style="animation-delay: ${index * 0.1}s"> | |
| <a href="${item.url}" class="result-link">${item.url}</a> | |
| <a href="${item.url}" class="result-title">${highlightMatch(item.title, query)}</a> | |
| <p class="result-snippet">${highlightMatch(item.snippet, query)}</p> | |
| </div> | |
| `; | |
| resultsList.innerHTML += resultHTML; | |
| }); | |
| } else { | |
| resultStats.textContent = `No results found for "${query}"`; | |
| resultsList.innerHTML = ` | |
| <div class="result-item"> | |
| <p class="result-snippet">Try searching for "CSS", "Blue", "JavaScript", or "Security".</p> | |
| </div> | |
| `; | |
| } | |
| resultsContainer.classList.add('active'); | |
| }, 600); // 600ms simulated delay | |
| } | |
| // Helper to highlight search terms | |
| function highlightMatch(text, query) { | |
| const regex = new RegExp(`(${query})`, 'gi'); | |
| return text.replace(regex, '<span style="color: var(--primary-hover); font-weight:bold;">$1</span>'); | |
| } | |
| // Event Listeners | |
| searchBtn.addEventListener('click', performSearch); | |
| searchInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| // Optional: Real-time search as you type (debounced) | |
| let timeout = null; | |
| searchInput.addEventListener('input', () => { | |
| clearTimeout(timeout); | |
| if(searchInput.value.length > 0) { | |
| timeout = setTimeout(performSearch, 800); | |
| } else { | |
| resultsContainer.classList.remove('active'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |