Search boxes are a fundamental component of any user interface, providing a seamless way for users to find the information they need quickly.
In this article, we will explore 10 exemplary search box designs that enhance user experience and functionality.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas, making it easy to create pixel-perfect UI every time. Whether you're crafting a search box or a complete interface, Subframe ensures precision and efficiency.
Start for free and experience the difference today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect interfaces, including search boxes, in minutes. Experience unparalleled efficiency with our drag-and-drop editor and beautifully crafted components.
Start for free and begin designing stunning UIs immediately. Don't wait—unlock your creative potential today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ShopQuest Search</title> <style> :root { --primary-color: #3c6e71; --primary-light: #4fa3a8; --secondary-color: #d9d9d9; --accent-color: #ff6b6b; --text-color: #333; --light-text: #6a6a6a; --bg-color: #f7f9fc; --white: #ffffff; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 650px; padding: 30px 20px; } .header { text-align: center; margin-bottom: 20px; } .header h1 { color: var(--primary-color); font-size: 2rem; margin-bottom: 10px; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background: var(--accent-color); border-radius: 2px; } .header p { color: var(--light-text); margin-top: 20px; font-size: 1rem; } .search-wrapper { position: relative; margin-top: 15px; } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--light-text); z-index: 2; transition: var(--transition); } .search-input { width: 100%; padding: 18px 20px 18px 50px; border-radius: 30px; border: 2px solid var(--secondary-color); background-color: var(--white); font-size: 1rem; transition: var(--transition); box-shadow: var(--shadow); } .search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 6px 20px rgba(60, 110, 113, 0.2); } .search-input:focus + .search-icon { color: var(--primary-color); } .clear-button { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--light-text); display: none; font-size: 1rem; z-index: 2; } .clear-button:hover { color: var(--accent-color); } .mic-button { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--light-text); font-size: 1.1rem; z-index: 2; transition: var(--transition); } .mic-button:hover, .mic-button.active { color: var(--accent-color); } .mic-button.pulsing::after { content: ''; position: absolute; width: 30px; height: 30px; background-color: rgba(255, 107, 107, 0.3); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: pulse 1.5s infinite; z-index: -1; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; } 70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .dropdown { position: absolute; width: 100%; max-height: 380px; overflow-y: auto; background-color: var(--white); border-radius: 15px; margin-top: 10px; box-shadow: var(--shadow); z-index: 10; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: var(--transition); } .dropdown.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .suggestion { padding: 14px 18px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .suggestion:last-child { border-bottom: none; } .suggestion:hover { background-color: rgba(60, 110, 113, 0.08); } .suggestion-left { display: flex; align-items: center; gap: 12px; } .suggestion-icon { color: var(--light-text); font-size: 1rem; } .suggestion-text { font-size: 0.95rem; color: var(--text-color); } .suggestion-category { font-size: 0.8rem; color: var(--primary-light); background-color: rgba(60, 110, 113, 0.08); padding: 4px 8px; border-radius: 12px; } .typo-correction { color: var(--accent-color); font-style: italic; font-size: 0.85rem; margin-left: 10px; } .trending-keyword { display: inline-block; background-color: var(--bg-color); color: var(--primary-color); padding:.4rem .8rem; border-radius: 20px; margin: 5px; font-size: .85rem; transition: var(--transition); cursor: pointer; border: 1px solid rgba(60, 110, 113, 0.3); } .trending-keyword:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(60, 110, 113, 0.2); } .trending-section { margin-top: 30px; text-align: center; } .trending-title { color: var(--light-text); font-size: 0.95rem; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; } .flash-icon { color: var(--accent-color); animation: flash 1.5s infinite; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .search-tips { margin-top: 30px; background-color: rgba(60, 110, 113, 0.06); padding: 15px; border-radius: 10px; font-size: 0.9rem; color: var(--light-text); } .tips-title { color: var(--primary-color); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .tip-item { margin: 8px 0; display: flex; align-items: flex-start; gap: 8px; } .tip-icon { color: var(--primary-light); margin-top: 3px; } @media (max-width: 600px) { .container { padding: 15px 10px; } .header h1 { font-size: 1.6rem; } .search-input { padding: 14px 15px 14px 45px; } .trending-keyword { padding: .35rem .7rem; font-size: .8rem; } .suggestion { padding: 12px 15px; } .dropdown { max-height: 300px; } } /* Loader animation */ .loader { display: none; position: absolute; right: 85px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; } .loader:after { content: " "; display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary-color); border-color: var(--primary-color) transparent var(--primary-color) transparent; animation: loader 1.2s linear infinite; } @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Recent searches badge */ .recent-badge { background-color: rgba(255, 107, 107, 0.1); color: var(--accent-color); padding: 3px 6px; border-radius: 4px; font-size: 0.7rem; margin-left: 8px; } /* Highlighted text */ .highlight { color: var(--primary-color); font-weight: 600; } /* Product count */ .product-count { color: var(--light-text); font-size: 0.8rem; margin-left: 5px; } /* Image for products */ .suggestion-img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>ShopQuest</h1> <p>Discover over 10 million products from trusted sellers worldwide</p> </div> <div class="search-wrapper"> <input type="text" class="search-input" placeholder="Search for products, brands, or categories..." autocomplete="off"> <div class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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> </div> <div class="loader"></div> <button class="mic-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> <line x1="12" y1="19" x2="12" y2="23"></line> <line x1="8" y1="23" x2="16" y2="23"></line> </svg> </button> <button class="clear-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> <div class="dropdown"> <!-- Suggestions will be dynamically added here --> </div> </div> <div class="trending-section"> <div class="trending-title"> <span class="flash-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon> </svg> </span> Popular searches right now </div> <div class="trending-keywords"> <span class="trending-keyword">Wireless Earbuds</span> <span class="trending-keyword">Smart Watch</span> <span class="trending-keyword">Mechanical Keyboard</span> <span class="trending-keyword">Ergonomic Chair</span> <span class="trending-keyword">Air Fryer</span> <span class="trending-keyword">Portable Charger</span> </div> </div> <div class="search-tips"> <div class="tips-title"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Search tips </div> <div class="tip-item"> <span class="tip-icon">•</span> <span>Use specific terms like "waterproof bluetooth speaker" instead of just "speaker"</span> </div> <div class="tip-item"> <span class="tip-icon">•</span> <span>Include brand names if you have preferences, e.g., "Nike running shoes"</span> </div> <div class="tip-item"> <span class="tip-icon">•</span> <span>Filter by pressing the microphone icon for voice search</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const searchInput = document.querySelector('.search-input'); const clearButton = document.querySelector('.clear-button'); const dropdown = document.querySelector('.dropdown'); const micButton = document.querySelector('.mic-button'); const loader = document.querySelector('.loader'); const trendingKeywords = document.querySelectorAll('.trending-keyword'); // Sample product database for demo const products = [ { name: "Wireless Bluetooth Earbuds", category: "Electronics", count: 243, img: "https://images.unsplash.com/photo-1606220588913-b3aacb4d2f46?w=100&auto=format&fit=crop&q=60" }, { name: "Ergonomic Office Chair", category: "Furniture", count: 189, img: "https://images.unsplash.com/photo-1596079890744-c1a0462d0975?w=100&auto=format&fit=crop&q=60" }, { name: "Ultra HD Smart TV 55-inch", category: "Electronics", count: 137, img: "https://images.unsplash.com/photo-1593305841991-05c297ba4575?w=100&auto=format&fit=crop&q=60" }, { name: "Mechanical Gaming Keyboard", category: "Computers", count: 205, img: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?w=100&auto=format&fit=crop&q=60" }, { name: "Cordless Stick Vacuum Cleaner", category: "Home Appliances", count: 118, img: "https://images.unsplash.com/photo-1558317374-067fb5f30001?w=100&auto=format&fit=crop&q=60" }, { name: "Portable Power Bank 20000mAh", category: "Electronics", count: 289, img: "https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=100&auto=format&fit=crop&q=60" }, { name: "Waterproof Bluetooth Speaker", category: "Electronics", count: 176, img: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=100&auto=format&fit=crop&q=60" }, { name: "Memory Foam Mattress", category: "Furniture", count: 92, img: "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=100&auto=format&fit=crop&q=60" }, { name: "Stainless Steel Water Bottle", category: "Kitchen", count: 312, img: "https://images.unsplash.com/photo-1570087635000-c188b4469448?w=100&auto=format&fit=crop&q=60" }, { name: "Smart Watch Fitness Tracker", category: "Wearables", count: 225, img: "https://images.unsplash.com/photo-1617043786394-f977fa12eddf?w=100&auto=format&fit=crop&q=60" }, { name: "Air Fryer 5.5L", category: "Kitchen Appliances", count: 147, img: "https://images.unsplash.com/photo-1648126471449-779d80c8a3c0?w=100&auto=format&fit=crop&q=60" } ]; // Recent searches (would be stored in localStorage in a real app) const recentSearches = [ "wireless headphones", "gaming monitor", "ergonomic mouse" ]; // Set focus on the input box when the page loads setTimeout(() => { searchInput.focus(); }, 500); // Show clear button when input has text searchInput.addEventListener('input', () => { clearButton.style.display = searchInput.value ? 'block' : 'none'; if (searchInput.value.trim()) { showDropdown(); showSuggestions(searchInput.value); } else { hideDropdown(); } }); // Clear input when clear button is clicked clearButton.addEventListener('click', () => { searchInput.value = ''; clearButton.style.display = 'none'; hideDropdown(); searchInput.focus(); }); // Voice search functionality micButton.addEventListener('click', () => { if (micButton.classList.contains('active')) { // Stop recording micButton.classList.remove('active', 'pulsing'); return; } // Simulate voice recognition micButton.classList.add('active', 'pulsing'); searchInput.placeholder = "Listening..."; // Simulate processing delay setTimeout(() => { const voiceCommands = [ "wireless earbuds", "organic cotton t-shirts", "stainless steel water bottle", "mechanical keyboard" ]; const randomCommand = voiceCommands[Math.floor(Math.random() * voiceCommands.length)]; searchInput.value = randomCommand; clearButton.style.display = 'block'; searchInput.placeholder = "Search for products, brands, or categories..."; micButton.classList.remove('active', 'pulsing'); showDropdown(); showSuggestions(randomCommand); }, 2000); }); // Handle clicking on trending keywords trendingKeywords.forEach(keyword => { keyword.addEventListener('click', () => { searchInput.value = keyword.textContent; clearButton.style.display = 'block'; showDropdown(); showSuggestions(keyword.textContent); searchInput.focus(); }); }); // Show suggestions based on input function showSuggestions(query) { loader.style.display = 'block'; // Simulate network delay setTimeout(() => { loader.style.display = 'none'; dropdown.innerHTML = ''; const lowerQuery = query.toLowerCase(); // Check if there's a typo correction to suggest const commonMisspellings = { 'wireles': 'wireless', 'blutooth': 'bluetooth', 'headfone': 'headphone', 'earbud': 'earbuds', 'keybord': 'keyboard', 'labtop': 'laptop', 'mause': 'mouse' }; // Check for possible typo corrections let typoCorrection = null; Object.keys(commonMisspellings).forEach(misspelling => { if (lowerQuery.includes(misspelling)) { typoCorrection = query.replace(new RegExp(misspelling, 'gi'), commonMisspellings[misspelling]); } }); // Add typo correction suggestion if found if (typoCorrection) { const typoItem = document.createElement('div'); typoItem.className = 'suggestion'; typoItem.innerHTML = ` <div class="suggestion-left"> <div class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> </svg> </div> <div class="suggestion-text">Did you mean: <span class="highlight">${typoCorrection}</span></div> </div> `; dropdown.appendChild(typoItem); typoItem.addEventListener('click', () => { searchInput.value = typoCorrection; showSuggestions(typoCorrection); }); } // Add recent searches const matchingRecentSearches = recentSearches.filter(search => search.toLowerCase().includes(lowerQuery) ); matchingRecentSearches.forEach(search => { const item = document.createElement('div'); item.className = 'suggestion'; // Highlight matching part const highlightedText = highlightMatch(search, lowerQuery); item.innerHTML = ` <div class="suggestion-left"> <div class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> </div> <div class="suggestion-text">${highlightedText} <span class="recent-badge">Recent</span></div> </div> `; dropdown.appendChild(item); item.addEventListener('click', () => { searchInput.value = search; hideDropdown(); }); }); // Filter products based on query const filteredProducts = products.filter(product => product.name.toLowerCase().includes(lowerQuery) || product.category.toLowerCase().includes(lowerQuery) ); // Add product suggestions filteredProducts.forEach(product => { const item = document.createElement('div'); item.className = 'suggestion'; // Highlight matching part const highlightedText = highlightMatch(product.name, lowerQuery); item.innerHTML = ` <div class="suggestion-left"> <img src="${product.img}" alt="${product.name}" class="suggestion-img"> <div class="suggestion-text">${highlightedText} <span class="product-count">(${product.count})</span></div> </div> <div class="suggestion-category">${product.category}</div> `; dropdown.appendChild(item); item.addEventListener('click', () => { searchInput.value = product.name; hideDropdown(); }); }); // Add "View all results" option const viewAllItem = document.createElement('div'); viewAllItem.className = 'suggestion'; viewAllItem.innerHTML = ` <div class="suggestion-left"> <div class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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> </div> <div class="suggestion-text">Search for "<span class="highlight">${query}</span>"</div> </div> `; dropdown.appendChild(viewAllItem); viewAllItem.addEventListener('click', () => { hideDropdown(); // Would trigger search in a real app searchInput.blur(); // Show a visual feedback that search was performed searchInput.style.borderColor = 'var(--primary-color)'; setTimeout(() => { searchInput.style.borderColor = 'var(--secondary-color)'; }, 800); }); // If no results if (filteredProducts.length === 0 && matchingRecentSearches.length === 0 && !typoCorrection) { const noResults = document.createElement('div'); noResults.className = 'suggestion'; noResults.innerHTML = ` <div class="suggestion-text">No results found for "${query}"</div> `; dropdown.insertBefore(noResults, viewAllItem); } }, 300); } // Helper function to highlight matching text function highlightMatch(text, query) { if (!query) return text; const regex = new RegExp(`(${query})`, 'gi'); return text.replace(regex, '<span class="highlight">$1</span>'); } // Show dropdown function showDropdown() { dropdown.classList.add('active'); } // Hide dropdown function hideDropdown() { dropdown.classList.remove('active'); } // Close dropdown when clicking outside document.addEventListener('click', (e) => { if (!dropdown.contains(e.target) && e.target !== searchInput) { hideDropdown(); } }); // Handle keyboard navigation document.addEventListener('keydown', (e) => { if (dropdown.classList.contains('active')) { const suggestions = dropdown.querySelectorAll('.suggestion'); const activeIndex = Array.from(suggestions).findIndex(s => s === document.activeElement || s.contains(document.activeElement)); if (e.key === 'ArrowDown') { e.preventDefault(); if (activeIndex < suggestions.length - 1) { suggestions[activeIndex + 1].focus(); } else { suggestions[0].focus(); } } else if (e.key === 'ArrowUp') { e.preventDefault(); if (activeIndex > 0) { suggestions[activeIndex - 1].focus(); } else { suggestions[suggestions.length - 1].focus(); } } else if (e.key === 'Escape') { hideDropdown(); searchInput.blur(); } } }); // Make suggestions focusable for keyboard navigation function makeItemsFocusable() { const suggestions = dropdown.querySelectorAll('.suggestion'); suggestions.forEach(item => { item.setAttribute('tabindex', '0'); }); } // Add a mutation observer to make new suggestions focusable const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { makeItemsFocusable(); } }); }); observer.observe(dropdown, { childList: true }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; padding: 20px; } .blog-header { max-width: 700px; width: 100%; background-color: #fff; border-radius: 4px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.03); padding: 40px; position: relative; overflow: hidden; transition: all 0.3s ease; } .blog-title { color: #1a1a1a; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 25px; position: relative; display: inline-block; } .blog-title::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 3px; background-color: #1a1a1a; border-radius: 2px; } .search-container { position: relative; width: 100%; margin-top: 30px; margin-bottom: 20px; } .search-form { width: 100%; position: relative; } .search-input { width: 100%; padding: 16px 18px; padding-right: 55px; border: 1px solid #e6e6e6; border-radius: 3px; font-size: 16px; transition: all 0.25s ease; background-color: #f9f9f9; color: #1a1a1a; letter-spacing: -0.2px; } .search-input:focus { outline: none; border-color: #1a1a1a; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .search-input::placeholder { color: #888; transition: all 0.25s ease; } .search-input:focus::placeholder { opacity: 0.5; transform: translateX(5px); } .search-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.25s ease; } .search-button:hover { opacity: 1; } .search-button svg { width: 20px; height: 20px; } .search-loader { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) scale(0); width: 20px; height: 20px; border: 2px solid #e6e6e6; border-top: 2px solid #1a1a1a; border-radius: 50%; opacity: 0; transition: all 0.3s ease; } .is-searching .search-loader { animation: spin 0.8s linear infinite; opacity: 1; transform: translateY(-50%) scale(1); } .is-searching .search-button { opacity: 0; transform: translateY(-50%) scale(0.8); } .search-suggestion { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 3px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); padding: 12px 0; max-height: 250px; overflow-y: auto; z-index: 10; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.25s ease; visibility: hidden; } .show-suggestions .search-suggestion { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; } .suggestion-item { padding: 12px 18px; font-size: 14px; color: #555; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; } .suggestion-item:hover { background-color: #f9f9f9; color: #1a1a1a; } .suggestion-item svg { width: 16px; height: 16px; margin-right: 12px; opacity: 0.5; } .suggestion-item:hover svg { opacity: 0.8; } .recent-searches { margin-top: 30px; } .recent-searches-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 12px; font-weight: 500; } .recent-search-list { display: flex; flex-wrap: wrap; gap: 8px; } .recent-search-tag { background-color: #f2f2f2; color: #555; padding: 8px 14px; border-radius: 3px; font-size: 13px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; } .recent-search-tag:hover { background-color: #e6e6e6; color: #1a1a1a; } .recent-search-tag svg { width: 14px; height: 14px; margin-right: 6px; opacity: 0.5; } @keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease forwards; } .search-results { margin-top: 30px; opacity: 0; height: 0; overflow: hidden; transition: all 0.3s ease; } .show-results .search-results { opacity: 1; height: auto; } .results-title { font-size: 15px; color: #555; margin-bottom: 15px; } .results-title span { font-weight: 600; color: #1a1a1a; } .result-item { padding: 15px 0; border-bottom: 1px solid #f2f2f2; transition: all 0.2s ease; } .result-item:hover { background-color: #fcfcfc; } .result-item-title { font-size: 16px; color: #1a1a1a; font-weight: 600; margin-bottom: 5px; cursor: pointer; } .result-item-title:hover { color: #555; } .result-item-excerpt { font-size: 14px; color: #666; line-height: 1.5; } .result-item-meta { display: flex; align-items: center; margin-top: 8px; font-size: 12px; color: #888; } .result-item-meta span { display: flex; align-items: center; margin-right: 15px; } .result-item-meta svg { width: 14px; height: 14px; margin-right: 5px; opacity: 0.6; } @media (max-width: 600px) { .blog-header { padding: 25px; } .blog-title { font-size: 24px; } .search-input { padding: 14px 16px; padding-right: 50px; font-size: 15px; } .suggestion-item { padding: 10px 16px; } .recent-search-tag { padding: 6px 12px; font-size: 12px; } } </style> </head> <body> <div class="blog-header"> <h1 class="blog-title">Minimal Notes</h1> <div class="search-container"> <form class="search-form" onsubmit="return false;"> <input type="text" class="search-input" placeholder="Search through 347 minimal design articles..." aria-label="Search"> <div class="search-loader"></div> <button type="button" class="search-button" aria-label="Search"> <svg 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> </button> </form> <div class="search-suggestion"> <div class="suggestion-item"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line> </svg> minimalist kitchen design </div> <div class="suggestion-item"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line> </svg> japanese interior aesthetics </div> <div class="suggestion-item"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line> </svg> scandinavian furniture </div> <div class="suggestion-item"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line> </svg> monochrome color palette </div> </div> </div> <div class="recent-searches"> <div class="recent-searches-title">Recent Searches</div> <div class="recent-search-list"> <div class="recent-search-tag"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> <line x1="7" y1="7" x2="7.01" y2="7"></line> </svg> flat design </div> <div class="recent-search-tag"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> <line x1="7" y1="7" x2="7.01" y2="7"></line> </svg> typography </div> <div class="recent-search-tag"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> <line x1="7" y1="7" x2="7.01" y2="7"></line> </svg> negative space </div> </div> </div> <div class="search-results"> <div class="results-title">Showing results for <span>"minimalist"</span></div> <div class="result-item"> <div class="result-item-title">The Essence of Minimalism in Modern Web Design</div> <div class="result-item-excerpt">Explore how the principles of minimalism create focused user experiences through intentional white space and simplified navigation patterns...</div> <div class="result-item-meta"> <span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> June 12, 2023 </span> <span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> 124 likes </span> </div> </div> <div class="result-item"> <div class="result-item-title">Monochrome Aesthetics: Less Colors, More Impact</div> <div class="result-item-excerpt">Why limiting your color palette to black, white, and shades of gray can create more sophisticated and timeless digital interfaces...</div> <div class="result-item-meta"> <span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> May 9, 2023 </span> <span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> 98 likes </span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const searchInput = document.querySelector('.search-input'); const searchForm = document.querySelector('.search-form'); const searchContainer = document.querySelector('.search-container'); const blogHeader = document.querySelector('.blog-header'); const searchButton = document.querySelector('.search-button'); const recentTags = document.querySelectorAll('.recent-search-tag'); const suggestionItems = document.querySelectorAll('.suggestion-item'); // Focus effect searchInput.addEventListener('focus', function() { searchContainer.classList.add('show-suggestions'); }); // Blur effect (delayed to allow for clicks on suggestions) searchInput.addEventListener('blur', function(e) { setTimeout(() => { if (!searchContainer.contains(document.activeElement)) { searchContainer.classList.remove('show-suggestions'); } }, 150); }); // Search simulation searchForm.addEventListener('submit', simulateSearch); searchButton.addEventListener('click', simulateSearch); // Recent tags click handler recentTags.forEach(tag => { tag.addEventListener('click', function() { const tagText = tag.textContent.trim(); searchInput.value = tagText; simulateSearch(); }); }); // Suggestion items click handler suggestionItems.forEach(item => { item.addEventListener('click', function() { const suggestionText = item.textContent.trim(); searchInput.value = suggestionText; simulateSearch(); }); }); function simulateSearch() { if (!searchInput.value.trim()) return; // Show loading state searchContainer.classList.add('is-searching'); searchContainer.classList.remove('show-suggestions'); // Hide previous results if any blogHeader.classList.remove('show-results'); // Simulate API call delay setTimeout(() => { // Remove loading state searchContainer.classList.remove('is-searching'); // Show results blogHeader.classList.add('show-results'); // Update results title with search term const resultsTitle = document.querySelector('.results-title span'); resultsTitle.textContent = `"${searchInput.value.trim()}"`; // Animate results const results = document.querySelectorAll('.result-item'); results.forEach((result, index) => { result.style.opacity = 0; setTimeout(() => { result.style.opacity = 1; result.classList.add('fade-in'); }, index * 100); }); }, 800); } // Input typing effect - show suggestions searchInput.addEventListener('input', function() { if (this.value.length > 0) { searchContainer.classList.add('show-suggestions'); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #4f46e5; --primary-hover: #6366f1; --secondary-color: #1f2937; --text-color: #f9fafb; --highlight-color: #10b981; --error-color: #ef4444; --warning-color: #f59e0b; --border-radius: 8px; --shadow-color: rgba(0, 0, 0, 0.2); --animation-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #0f172a; color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 700px; background-color: #1e293b; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); padding: 32px; position: relative; overflow: hidden; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; } .user-profile { display: flex; align-items: center; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 12px; } .search-section { position: relative; margin-bottom: 24px; } .search-container { position: relative; z-index: 10; } .search-box { width: 100%; background-color: #283548; border: 2px solid #384258; border-radius: var(--border-radius); padding: 16px 48px; font-size: 16px; color: var(--text-color); transition: all var(--animation-speed) ease; caret-color: var(--primary-color); } .search-box::placeholder { color: #94a3b8; } .search-box:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; transition: color var(--animation-speed) ease; } .search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; display: none; opacity: 0; transition: all var(--animation-speed) ease; } .search-clear:hover { color: var(--text-color); } .search-loading { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: none; } .loading-spinner { width: 20px; height: 20px; border: 2px solid rgba(79, 70, 229, 0.3); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s linear infinite; } .autocomplete-container { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background-color: #283548; border-radius: var(--border-radius); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); max-height: 0; overflow: hidden; transition: all var(--animation-speed) ease; z-index: 9; } .autocomplete-container.active { max-height: 320px; overflow-y: auto; border: 1px solid #384258; } .autocomplete-header { padding: 12px 16px; border-bottom: 1px solid #384258; font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .autocomplete-group { border-bottom: 1px solid #384258; padding: 8px 0; } .autocomplete-group:last-child { border-bottom: none; } .autocomplete-group-title { padding: 8px 16px 4px; font-size: 12px; color: #94a3b8; font-weight: 600; } .autocomplete-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background-color var(--animation-speed) ease; } .autocomplete-item:hover { background-color: #374151; } .autocomplete-item.active { background-color: rgba(79, 70, 229, 0.1); } .item-main { display: flex; align-items: center; flex: 1; } .item-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 12px; border-radius: 6px; flex-shrink: 0; } .item-content { flex: 1; } .item-title { font-weight: 500; margin-bottom: 2px; } .item-description { font-size: 12px; color: #94a3b8; } .item-meta { display: flex; align-items: center; font-size: 12px; color: #94a3b8; margin-left: 12px; } .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background-color: rgba(79, 70, 229, 0.15); color: var(--primary-color); margin-left: 8px; } .error-message { position: absolute; left: 0; top: calc(100% + 4px); width: 100%; padding: 12px 16px; background-color: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--error-color); border-radius: var(--border-radius); color: #fca5a5; font-size: 14px; display: none; opacity: 0; transform: translateY(-10px); transition: all var(--animation-speed) ease; z-index: 8; } .search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .filter-chip { display: inline-flex; align-items: center; background-color: #384258; border-radius: 16px; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: all var(--animation-speed) ease; } .filter-chip:hover { background-color: #455166; } .filter-chip.active { background-color: var(--primary-color); } .filter-chip-icon { margin-right: 6px; } .search-results { padding: 16px; background-color: #283548; border-radius: var(--border-radius); margin-top: 8px; } .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .result-title { font-size: 16px; font-weight: 600; } .result-count { font-size: 13px; color: #94a3b8; } .result-item { padding: 12px; border-radius: var(--border-radius); cursor: pointer; transition: background-color var(--animation-speed) ease; display: flex; align-items: flex-start; margin-bottom: 8px; } .result-item:hover { background-color: #374151; } .result-item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 12px; flex-shrink: 0; } .result-item-content { flex: 1; } .result-item-title { font-weight: 500; margin-bottom: 4px; } .result-item-description { font-size: 13px; color: #94a3b8; margin-bottom: 8px; } .result-item-meta { display: flex; flex-wrap: wrap; gap: 8px; } .meta-item { display: flex; align-items: center; font-size: 12px; color: #94a3b8; } .meta-icon { margin-right: 4px; } .pulse-animation { position: absolute; width: 100%; height: 100%; border-radius: var(--border-radius); background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(79, 70, 229, 0) 70%); z-index: -1; opacity: 0; transform: scale(0.95); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0; } 50% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(0.95); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Tooltip styles */ .tooltip { position: relative; } .tooltip-text { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #0f172a; color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 20; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); pointer-events: none; } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #0f172a transparent transparent transparent; } .tooltip:hover .tooltip-text { opacity: 1; visibility: visible; bottom: calc(100% + 10px); } /* Responsive adjustments */ @media (max-width: 600px) { .dashboard-container { padding: 20px; } .header h1 { font-size: 20px; } .search-box { padding: 12px 40px; font-size: 14px; } .result-item { flex-direction: column; } .result-item-icon { margin-bottom: 8px; } .search-filters { margin-top: 12px; } .filter-chip { padding: 4px 10px; font-size: 12px; } } </style> </head> <body> <div class="dashboard-container"> <div class="header"> <h1>Enterprise Analytics Hub</h1> <div class="user-profile"> <div class="user-avatar">AM</div> </div> </div> <div class="search-section"> <div class="search-container"> <div class="pulse-animation"></div> <input type="text" class="search-box" id="searchBox" placeholder="Search data assets, reports, or metrics..." autocomplete="off"> <div class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </div> <button class="search-clear" id="searchClear"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> </button> <div class="search-loading"> <div class="loading-spinner"></div> </div> </div> <div class="autocomplete-container" id="autocompleteContainer"> <div class="autocomplete-header">Suggested Search</div> <div class="autocomplete-group"> <div class="autocomplete-group-title">Recent Searches</div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#94a3b8" viewBox="0 0 16 16"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/> </svg> </div> <div class="item-content"> <div class="item-title">Q3 Revenue Forecast</div> <div class="item-description">Financial report with quarterly projections</div> </div> </div> <div class="item-meta">3 days ago</div> </div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#94a3b8" viewBox="0 0 16 16"> <path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/> </svg> </div> <div class="item-content"> <div class="item-title">User Acquisition Metrics</div> <div class="item-description">Customer growth trends by region</div> </div> </div> <div class="item-meta">1 week ago</div> </div> </div> <div class="autocomplete-group"> <div class="autocomplete-group-title">Suggested Filters</div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon" style="background-color: rgba(16, 185, 129, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#10b981" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </svg> </div> <div class="item-content"> <div class="item-title">type:dashboard</div> <div class="item-description">Filter by dashboard type</div> </div> </div> <div class="tag">Filter</div> </div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon" style="background-color: rgba(16, 185, 129, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#10b981" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </svg> </div> <div class="item-content"> <div class="item-title">team:marketing</div> <div class="item-description">Show only marketing team assets</div> </div> </div> <div class="tag">Filter</div> </div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon" style="background-color: rgba(16, 185, 129, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#10b981" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </svg> </div> <div class="item-content"> <div class="item-title">date:last30days</div> <div class="item-description">Recent assets within 30 days</div> </div> </div> <div class="tag">Filter</div> </div> </div> <div class="autocomplete-group"> <div class="autocomplete-group-title">Popular Metrics</div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon" style="background-color: rgba(245, 158, 11, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#f59e0b" viewBox="0 0 16 16"> <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/> </svg> </div> <div class="item-content"> <div class="item-title">Monthly Recurring Revenue</div> <div class="item-description">Current MRR: $1.8M (+5.3% MoM)</div> </div> </div> <div class="tag">Metric</div> </div> <div class="autocomplete-item"> <div class="item-main"> <div class="item-icon" style="background-color: rgba(245, 158, 11, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#f59e0b" viewBox="0 0 16 16"> <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/> </svg> </div> <div class="item-content"> <div class="item-title">Customer Acquisition Cost</div> <div class="item-description">Average CAC: $125 (-3.2% QoQ)</div> </div> </div> <div class="tag">Metric</div> </div> </div> </div> <div class="error-message" id="errorMessage"> Unable to process search query. Please check your syntax or try again. </div> <div class="search-filters"> <div class="filter-chip tooltip" data-filter="dashboards"> <div class="filter-chip-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2z"/> <path d="M5.5 4.002h2.962C10.045 4.002 11 5.104 11 6.586c0 1.494-.967 2.578-2.55 2.578H6.784V12H5.5V4.002zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97H8.27z"/> </svg> </div> Dashboards <span class="tooltip-text">View only dashboard assets</span> </div> <div class="filter-chip tooltip" data-filter="reports"> <div class="filter-chip-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/> </svg> </div> Reports <span class="tooltip-text">View only report assets</span> </div> <div class="filter-chip tooltip" data-filter="datasets"> <div class="filter-chip-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-13zM1.5 1h13a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 .5-.5z"/> </svg> </div> Datasets <span class="tooltip-text">View only dataset assets</span> </div> <div class="filter-chip tooltip" data-filter="metrics"> <div class="filter-chip-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/> </svg> </div> Metrics <span class="tooltip-text">View only metric assets</span> </div> <div class="filter-chip tooltip" data-filter="favorites"> <div class="filter-chip-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/> </svg> </div> Favorites <span class="tooltip-text">View your favorites</span> </div> </div> </div> <div class="search-results" id="searchResults" style="display: none;"> <div class="result-header"> <div class="result-title">Search Results</div> <div class="result-count">3 results found</div> </div> <div class="result-item"> <div class="result-item-icon" style="background-color: rgba(79, 70, 229, 0.1);"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#4f46e5" viewBox="0 0 16 16"> <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2z"/> <path d="M5.5 4.002h2.962C10.045 4.002 11 5.104 11 6.586c0 1.494-.967 2.578-2.55 2.578H6.784V12H5.5V4.002zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97H8.27z"/> </svg> </div> <div class="result-item-content"> <div class="result-item-title">Customer Retention Dashboard</div> <div class="result-item-description">Comprehensive analysis of customer churn factors and retention strategies by product segment.</div> <div class="result-item-meta"> <div class="meta-item"> <div class="meta-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16"> <path d="M14 0H2a2 2 0 0 0-2 2v12a2
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Urban Navigator</title> <style> :root { --primary: #FF5722; --secondary: #2196F3; --dark: #263238; --light: #ECEFF1; --success: #4CAF50; --accent: #7C4DFF; --error: #F44336; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, var(--dark), #1A237E); height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--light); padding: 20px; overflow: hidden; } .app-container { width: 100%; max-width: 500px; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .city-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.08; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="50" width="10" height="50" fill="white"/><rect x="15" y="30" width="10" height="70" fill="white"/><rect x="30" y="60" width="10" height="40" fill="white"/><rect x="45" y="20" width="10" height="80" fill="white"/><rect x="60" y="40" width="10" height="60" fill="white"/><rect x="75" y="10" width="10" height="90" fill="white"/><rect x="90" y="30" width="10" height="70" fill="white"/></svg>'); background-size: 200px; animation: cityPulse 30s linear infinite; } @keyframes cityPulse { 0% { background-position: 0 0; } 100% { background-position: 500px 0; } } .app-header { text-align: center; margin-bottom: 20px; position: relative; } .app-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .app-subtitle { font-size: 14px; color: var(--light); opacity: 0.8; } .search-container { position: relative; margin-bottom: 15px; } .search-box { width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.9); border: none; border-radius: 15px; padding: 0 60px 0 20px; font-size: 18px; color: var(--dark); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .search-box:focus { outline: none; box-shadow: 0 0 0 3px var(--secondary), 0 5px 15px rgba(0, 0, 0, 0.2); background-color: #fff; } .search-box::placeholder { color: #90A4AE; } .search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; pointer-events: none; } .voice-button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .voice-button:focus { outline: none; } .voice-icon { fill: var(--dark); transition: all 0.3s ease; } .voice-button:hover .voice-icon { fill: var(--secondary); transform: scale(1.1); } .voice-button.listening .voice-icon { fill: var(--error); } .voice-pulse { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(244, 67, 54, 0.3); transform: scale(0); opacity: 0; pointer-events: none; } .voice-button.listening .voice-pulse { animation: pulse 1.5s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } .current-location { display: flex; align-items: center; margin-bottom: 20px; padding: 10px 15px; background-color: rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; } .current-location:hover { background-color: rgba(255, 255, 255, 0.2); } .location-icon { margin-right: 10px; fill: var(--primary); } .current-location-text { font-size: 14px; flex-grow: 1; } .current-location-action { color: var(--primary); font-weight: 600; font-size: 13px; } .suggestions-container { background-color: rgba(255, 255, 255, 0.95); border-radius: 15px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); max-height: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; } .suggestions-container.active { max-height: 300px; opacity: 1; margin-bottom: 15px; } .suggestion-item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; transition: all 0.2s ease; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background-color: rgba(0, 0, 0, 0.05); } .suggestion-icon { width: 16px; height: 16px; margin-right: 15px; fill: var(--dark); opacity: 0.7; } .suggestion-text { color: var(--dark); font-size: 16px; } .suggestion-type { margin-left: auto; font-size: 12px; color: #78909C; background-color: rgba(0, 0, 0, 0.05); padding: 4px 8px; border-radius: 4px; } .quick-categories { display: flex; justify-content: space-between; margin-bottom: 10px; } .category-button { background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 12px; padding: 12px 15px; color: var(--light); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; flex: 1; margin: 0 5px; display: flex; flex-direction: column; align-items: center; } .category-button:first-child { margin-left: 0; } .category-button:last-child { margin-right: 0; } .category-button:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .category-icon { margin-bottom: 8px; width: 24px; height: 24px; fill: var(--light); } .recent-searches { margin-top: 25px; } .section-title { font-size: 14px; margin-bottom: 10px; color: var(--light); opacity: 0.7; display: flex; justify-content: space-between; align-items: center; } .clear-all { color: var(--secondary); font-size: 12px; cursor: pointer; font-weight: normal; } .recent-item { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 10px 15px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease; } .recent-item:hover { background-color: rgba(255, 255, 255, 0.15); } .recent-icon { width: 16px; height: 16px; margin-right: 12px; fill: var(--light); opacity: 0.7; } .recent-text { font-size: 14px; flex-grow: 1; } .recent-delete { color: var(--light); opacity: 0.5; font-size: 16px; cursor: pointer; transition: all 0.2s ease; } .recent-delete:hover { opacity: 1; color: var(--error); } .search-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: var(--dark); color: white; padding: 15px 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); font-size: 14px; opacity: 0; transition: all 0.4s ease; z-index: 1000; text-align: center; } .search-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .location-accuracy { position: absolute; top: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.3); padding: 5px 10px; border-radius: 20px; font-size: 12px; display: flex; align-items: center; } .accuracy-icon { width: 14px; height: 14px; margin-right: 5px; fill: var(--success); } @media (max-width: 480px) { .app-container { padding: 20px 15px; } .search-box { height: 55px; font-size: 16px; } .quick-categories { flex-wrap: wrap; justify-content: center; } .category-button { flex: 0 0 calc(33.333% - 10px); margin-bottom: 10px; padding: 10px; font-size: 12px; } .category-icon { margin-bottom: 5px; } } </style> </head> <body> <div class="app-container"> <div class="city-backdrop"></div> <div class="location-accuracy"> <svg class="accuracy-icon" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.6,7.8L15.5,9.3L14.2,8.2L13.9,9.1L15.9,10.5L17.4,8.3L16.6,7.8M10.1,8.2L8.8,9.3L7.7,7.8L6.9,8.3L8.4,10.5L10.4,9.1L10.1,8.2M12,17A2,2 0 0,0 14,15C14,13.8 12,11.5 12,11.5C12,11.5 10,13.8 10,15A2,2 0 0,0 12,17Z" /> </svg> High accuracy </div> <div class="app-header"> <h1 class="app-title">Urban Navigator</h1> <p class="app-subtitle">Discover what's around you in New York City</p> </div> <div class="search-container"> <input type="text" class="search-box" placeholder="Find cafés, shops, attractions..." id="search-input"> <button class="voice-button" id="voice-button"> <div class="voice-pulse"></div> <svg class="voice-icon" viewBox="0 0 24 24" width="24" height="24"> <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /> </svg> </button> </div> <div class="current-location"> <svg class="location-icon" viewBox="0 0 24 24" width="20" height="20"> <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" /> </svg> <span class="current-location-text">Currently in SoHo, Manhattan</span> <span class="current-location-action">Use</span> </div> <div class="suggestions-container" id="suggestions-container"> <!-- Dynamic suggestions will be inserted here --> </div> <div class="quick-categories"> <button class="category-button"> <svg class="category-icon" viewBox="0 0 24 24"> <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /> </svg> Info </button> <button class="category-button"> <svg class="category-icon" viewBox="0 0 24 24"> <path d="M11,16H13V8H11M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /> </svg> Coffee </button> <button class="category-button"> <svg class="category-icon" viewBox="0 0 24 24"> <path d="M18.06 23H19.72C20.56 23 21.25 22.35 21.35 21.53L23 5.05H18V1H16.03V5.05H11.06L11.36 7.39C13.07 7.86 14.67 8.71 15.94 9.88C17.07 10.91 18.18 12.65 18.7 14.7M2 17.5V19.5H10V17.5H2Z" /> </svg> Food </button> <button class="category-button"> <svg class="category-icon" viewBox="0 0 24 24"> <path d="M12,13A5,5 0 0,1 7,8H9A3,3 0 0,0 12,11A3,3 0 0,0 15,8H17A5,5 0 0,1 12,13M12,3A3,3 0 0,1 15,6H9A3,3 0 0,1 12,3M19,6H17A5,5 0 0,0 12,1A5,5 0 0,0 7,6H5C3.89,6 3,6.89 3,8V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V8C21,6.89 20.1,6 19,6Z" /> </svg> Shopping </button> </div> <div class="recent-searches"> <div class="section-title"> <span>Recent Searches</span> <span class="clear-all">Clear all</span> </div> <div class="recent-item"> <svg class="recent-icon" viewBox="0 0 24 24"> <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /> </svg> <span class="recent-text">High Line Park</span> <span class="recent-delete">×</span> </div> <div class="recent-item"> <svg class="recent-icon" viewBox="0 0 24 24"> <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /> </svg> <span class="recent-text">Bluestone Lane Coffee</span> <span class="recent-delete">×</span> </div> <div class="recent-item"> <svg class="recent-icon" viewBox="0 0 24 24"> <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /> </svg> <span class="recent-text">Chelsea Market</span> <span class="recent-delete">×</span> </div> </div> </div> <div class="search-toast" id="search-toast">Searching...</div> <script> document.addEventListener('DOMContentLoaded', function() { const searchInput = document.getElementById('search-input'); const voiceButton = document.getElementById('voice-button'); const suggestionsContainer = document.getElementById('suggestions-container'); const searchToast = document.getElementById('search-toast'); const recentItems = document.querySelectorAll('.recent-item'); const recentDeleteButtons = document.querySelectorAll('.recent-delete'); const clearAllButton = document.querySelector('.clear-all'); const categoryButtons = document.querySelectorAll('.category-button'); const currentLocation = document.querySelector('.current-location'); // Sample suggestions data const suggestionsData = [ { text: "Brooklyn Bridge", type: "Landmark", icon: "M21,18A3,3 0 0,1 18,21H6A3,3 0 0,1 3,18V6A3,3 0 0,1 6,3H18A3,3 0 0,1 21,6V18M19,6.17L14.83,2H6A2,2 0 0,0 4,4V18A2,2 0 0,0 6,20H18C19.1,20 20,19.1 20,18V8L19,6.17M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" }, { text: "Little Italy", type: "Neighborhood", icon: "M15,11V5L12,2L9,5V7H3V21H21V11H15M7,19H5V17H7V19M7,15H5V13H7V15M7,11H5V9H7V11M13,19H11V17H13V19M13,15H11V13H13V15M13,11H11V9H13V11M13,7H11V5H13V7M19,19H17V17H19V19M19,15H17V13H19V15Z" }, { text: "Washington Square Park", type: "Park", icon: "M17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12C7,9.58 8.72,7.56 11,7.1V3H13V7.1C15.28,7.56 17,9.58 17,12M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" }, { text: "The Metropolitan Museum of Art", type: "Museum", icon: "M9.25,3C9.25,3 8.97,7.17 6.38,7.17C3.8,7.17 3.53,3 3.53,3H2L4.75,18L12,22L19.25,18L22,3H9.25M4.59,5H8.97C8.97,5 8.97,5.37 9.07,5.55C9.5,6.35 10.2,7.17 12,7.17C12.1,7.17 12.2,7.15 12.3,7.14V19.25L7.69,16.83L5.13,5M10.25,5V7.17C11.24,6.89 11.91,6.11 12,5.42C12.03,5.37 12.05,5.29 12.05,5.19C12.05,5.13 12.05,5.08 12.03,5H10.25Z" }, { text: "Empire State Building", type: "Landmark", icon: "M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75Z" } ]; // Voice recognition functionality let isListening = false; let recognition; if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) { recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.continuous = false; recognition.lang = 'en-US'; recognition.onresult = function(event) { const transcript = event.results[0][0].transcript; searchInput.value = transcript; toggleSuggestions(true); searchInput.focus(); stopListening(); }; recognition.onend = function() { stopListening(); }; recognition.onerror = function(event) { console.error('Speech recognition error', event.error); stopListening(); showToast('Voice recognition failed. Please try again.'); }; } else { voiceButton.style.display = 'none'; } function startListening() { if (recognition) { try { recognition.start(); isListening = true; voiceButton.classList.add('listening'); showToast('Listening...'); } catch (e) { console.error('Speech recognition error:', e); } } } function stopListening() { if (recognition) { recognition.stop(); isListening = false; voiceButton.classList.remove('listening'); } } function toggleListening() { if (isListening) { stopListening(); } else { startListening(); } } // Show suggestions function toggleSuggestions(show) { if (show) { suggestionsContainer.innerHTML = ''; // Filter suggestions based on input const inputValue = searchInput.value.toLowerCase(); const filteredSuggestions = inputValue ? suggestionsData.filter(s => s.text.toLowerCase().includes(inputValue)) : suggestionsData; if (filteredSuggestions.length > 0) { filteredSuggestions.forEach(suggestion => { const suggestionItem = document.createElement('div'); suggestionItem.className = 'suggestion-item'; suggestionItem.innerHTML = ` <svg class="suggestion-icon" viewBox="0 0 24 24"> <path d="${suggestion.icon}" /> </svg> <span class="suggestion-text">${suggestion.text}</span> <span class="suggestion-type">${suggestion.type}</span> `; suggestionItem.addEventListener('click', () => { searchInput.value = suggestion.text; performSearch(suggestion.text); toggleSuggestions(false); }); suggestionsContainer.appendChild(suggestionItem); }); suggestionsContainer.classList.add('active'); } else { suggestionsContainer.classList.remove('active'); } } else { suggestionsContainer.classList.remove('active'); } } // Simulate search action function performSearch(query) { showToast(`Searching for "${query}"...`); // Just for demo purposes - in a real app this would trigger an API call setTimeout(() => { showToast(`Found results for "${query}"`); setTimeout(() => { hideToast(); }, 2000); }, 1500); } // Toast message functionality function showToast(message) { searchToast.textContent = message; searchToast.classList.add('show'); } function hideToast() { searchToast.classList.remove('show'); } // Event listeners searchInput.addEventListener('focus', () => { if (searchInput.value.length > 0) { toggleSuggestions(true); } }); searchInput.addEventListener('input', () => { toggleSuggestions(searchInput.value.length > 0); }); searchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && searchInput.value.trim() !== '') { performSearch(searchInput.value); toggleSuggestions(false); } }); document.addEventListener('click', (e) => { if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target) && !voiceButton.contains(e.target)) { toggleSuggestions(false); } }); voiceButton.addEventListener('click', toggleListening); // Recent items functionality recentItems.forEach(item => { item.addEventListener('click', (e) => { if (!e.target.classList.contains('recent-delete')) { const text = item.querySelector('.recent-text').textContent; searchInput.value = text; performSearch(text); } }); }); recentDeleteButtons.forEach(button => { button.addEventListener('click', (e) => { e.stopPropagation(); const item = button.closest('.recent-item'); item.style.height = '0'; item.style.opacity = '0'; item.style.marginBottom = '0'; item.style.padding = '0'; setTimeout(() => { item.remove(); if (document.querySelectorAll('.recent-item').length === 0) { document.querySelector('.recent-searches').style.display = 'none'; } }, 300); }); }); clearAllButton.addEventListener('click', () => { const items = document.querySelectorAll('.recent-item'); items.forEach(item => { item.style.height = '0'; item.style.opacity = '0'; item.style.marginBottom = '0'; item.style.padding = '0'; }); setTimeout(() => { document.querySelector('.recent-searches').style.display = 'none'; }, 300); }); // Category buttons categoryButtons.forEach(button => { button.addEventListener('click', () => { const category = button.textContent.trim(); searchInput.value = category; performSearch(category); }); }); // Current location currentLocation.addEventListener('click', () => { searchInput.value = 'SoHo, Manhattan'; performSearch('Near SoHo, Manhattan'); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoVox Search</title> <style> :root { --main-bg-color: rgba(10, 14, 25, 0.95); --neon-blue: #00e1ff; --neon-pink: #ff00e5; --neon-pulse: #ff00e5; --glass-bg: rgba(25, 33, 52, 0.6); --glass-hover: rgba(30, 39, 60, 0.8); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; max-width: 700px; margin: 0 auto; background: var(--main-bg-color); background-image: radial-gradient(circle at 10% 20%, rgba(0, 225, 255, 0.03) 0%, transparent 30%), radial-gradient(circle at 90% 80%, rgba(255, 0, 229, 0.03) 0%, transparent 30%); color: #ffffff; overflow: hidden; position: relative; } .container { width: 90%; max-width: 600px; padding: 20px; position: relative; z-index: 10; } .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; z-index: 1; } .header { text-align: center; margin-bottom: 40px; } .logo { font-size: 2rem; font-weight: 700; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; margin-bottom: 15px; position: relative; display: inline-block; } .subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } .search-container { position: relative; margin-bottom: 30px; backdrop-filter: blur(12px); background: var(--glass-bg); border-radius: 50px; padding: 6px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 225, 255, 0.1); transition: all 0.3s ease; } .search-container:hover, .search-container:focus-within { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 15px rgba(0, 225, 255, 0.3); background: var(--glass-hover); } .search-container.listening { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px var(--neon-pulse), 0 0 20px rgba(255, 0, 229, 0.4); animation: pulse 1.5s infinite alternate; } @keyframes pulse { 0% { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px var(--neon-pulse), 0 0 20px rgba(255, 0, 229, 0.4); } 100% { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px var(--neon-pulse), 0 0 30px rgba(255, 0, 229, 0.7); } } .search-input { width: calc(100% - 60px); background: transparent; border: none; padding: 15px 20px; font-size: 1.1rem; color: white; outline: none; } .search-input::placeholder { color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; } .search-input:focus::placeholder { color: rgba(255, 255, 255, 0.3); } .mic-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; outline: none; } .mic-button:hover { background: rgba(255, 255, 255, 0.1); } .mic-icon { position: relative; width: 18px; height: 18px; fill: white; transition: all 0.3s ease; } .mic-button:hover .mic-icon { fill: var(--neon-blue); } .mic-button.listening .mic-icon { fill: var(--neon-pink); } .sound-wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; visibility: hidden; pointer-events: none; } .sound-wave.active { visibility: visible; } .sound-wave span { display: block; width: 2px; height: 15px; margin: 0 1px; background: var(--neon-pink); border-radius: 50px; animation: wave 1s infinite ease-in-out; opacity: 0; } .sound-wave span:nth-child(1) { animation-delay: 0s; } .sound-wave span:nth-child(2) { animation-delay: 0.1s; } .sound-wave span:nth-child(3) { animation-delay: 0.2s; } .sound-wave span:nth-child(4) { animation-delay: 0.3s; } .sound-wave span:nth-child(5) { animation-delay: 0.4s; } @keyframes wave { 0%, 100% { transform: scaleY(0.2); opacity: 0.2; } 50% { transform: scaleY(1); opacity: 1; } } .transcript { padding: 15px 20px; background: var(--glass-bg); border-radius: 12px; margin-bottom: 20px; backdrop-filter: blur(8px); transition: all 0.3s ease; min-height: 80px; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.1); display: flex; align-items: center; } .transcript p { width: 100%; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.5; } .transcript p.placeholder { color: rgba(255, 255, 255, 0.5); font-style: italic; } .transcript.active { background: var(--glass-hover); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 8px 30px rgba(0, 0, 0, 0.15); } .sensitivity-settings { margin-top: 30px; } .sensitivity-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .sensitivity-label span { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .sensitivity-value { padding: 2px 8px; background: rgba(0, 225, 255, 0.2); border-radius: 4px; font-size: 0.8rem; color: var(--neon-blue); } .sensitivity-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); border-radius: 10px; outline: none; } .sensitivity-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 0 10px rgba(0, 225, 255, 0.6); cursor: pointer; transition: all 0.3s ease; } .sensitivity-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 15px rgba(0, 225, 255, 0.8); transform: scale(1.1); } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 30px; } .feature { background: var(--glass-bg); padding: 15px; border-radius: 10px; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .feature:hover { background: var(--glass-hover); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 8px 30px rgba(0, 0, 0, 0.15); } .feature h3 { font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; color: var(--neon-blue); } .feature h3 svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--neon-blue); } .feature p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; } .status-indicator { margin-top: 20px; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neon-blue); margin-right: 8px; display: inline-block; } .status-dot.listening { background: var(--neon-pink); animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .commands { margin-top: 30px; width: 100%; padding: 15px; background: var(--glass-bg); border-radius: 12px; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.1); } .commands h3 { font-size: 0.9rem; margin-bottom: 10px; color: var(--neon-blue); } .command-items { display: flex; flex-wrap: wrap; gap: 8px; } .command-item { background: rgba(0, 225, 255, 0.1); color: rgba(255, 255, 255, 0.9); font-size: 0.8rem; padding: 5px 10px; border-radius: 20px; white-space: nowrap; cursor: pointer; transition: all 0.3s ease; } .command-item:hover { background: rgba(0, 225, 255, 0.2); transform: translateY(-2px); } .glow-effect { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 225, 255, 0.3) 0%, transparent 70%); filter: blur(50px); opacity: 0.5; animation: float 10s infinite alternate ease-in-out; z-index: 0; } .glow-effect:nth-child(1) { top: -50px; left: -50px; } .glow-effect:nth-child(2) { bottom: -50px; right: -50px; background: radial-gradient(circle, rgba(255, 0, 229, 0.3) 0%, transparent 70%); animation-delay: -5s; } @keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 30px); } } @media (max-width: 600px) { .container { width: 95%; padding: 15px; } .header { margin-bottom: 20px; } .logo { font-size: 1.6rem; margin-bottom: 10px; } .subtitle { font-size: 0.9rem; } .features { grid-template-columns: 1fr; } } </style> </head> <body> <div class="grid-background"></div> <div class="glow-effect"></div> <div class="glow-effect"></div> <div class="container"> <div class="header"> <h1 class="logo">NeoVox Search</h1> <p class="subtitle">AI-powered voice & text search for your smart devices</p> </div> <div class="search-container" id="search-container"> <input type="text" class="search-input" id="search-input" placeholder="Type or say 'Hey NeoVox'" autocomplete="off"> <button class="mic-button" id="mic-button"> <svg class="mic-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/> <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/> </svg> <div class="sound-wave" id="sound-wave"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </button> </div> <div class="transcript" id="transcript"> <p class="placeholder">Voice transcription will appear here in real-time</p> </div> <div class="status-indicator"> <span class="status-dot" id="status-dot"></span> <span id="status-text">Ready to listen</span> </div> <div class="sensitivity-settings"> <div class="sensitivity-label"> <span>Voice Sensitivity</span> <span class="sensitivity-value" id="sensitivity-value">Medium</span> </div> <input type="range" min="0" max="100" value="50" class="sensitivity-slider" id="sensitivity-slider"> </div> <div class="commands"> <h3>Try these voice commands:</h3> <div class="command-items"> <div class="command-item">"Search for recipes"</div> <div class="command-item">"Find smart home devices"</div> <div class="command-item">"Weather forecast"</div> <div class="command-item">"Play music"</div> <div class="command-item">"Set a timer"</div> </div> </div> <div class="features"> <div class="feature"> <h3> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm0 20a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm-1-7h2v2h-2v-2zm0-8h2v6h-2V6z"/> </svg> Real-Time Transcription </h3> <p>See your voice converted to text instantly as you speak with advanced speech recognition.</p> </div> <div class="feature"> <h3> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7 21h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM16 1.01L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 17H8V5h8v12z"/> </svg> Multi-Device Support </h3> <p>Seamlessly works across smartphones, tablets, smart speakers, and IoT devices.</p> </div> <div class="feature"> <h3> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/> </svg> Noise Filtering </h3> <p>Advanced algorithms filter out background noise for accurate voice recognition in any environment.</p> </div> <div class="feature"> <h3> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/> </svg> Language Support </h3> <p>Recognizes and transcribes over 30 languages and regional dialects with high accuracy.</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const searchContainer = document.getElementById('search-container'); const searchInput = document.getElementById('search-input'); const micButton = document.getElementById('mic-button'); const soundWave = document.getElementById('sound-wave'); const transcript = document.getElementById('transcript'); const transcriptText = transcript.querySelector('p'); const statusDot = document.getElementById('status-dot'); const statusText = document.getElementById('status-text'); const sensitivitySlider = document.getElementById('sensitivity-slider'); const sensitivityValue = document.getElementById('sensitivity-value'); const commandItems = document.querySelectorAll('.command-item'); let isListening = false; let simulatedRecognition; // Update sensitivity label sensitivitySlider.addEventListener('input', function() { const value = parseInt(this.value); let sensitivity; if (value < 25) { sensitivity = "Low"; } else if (value < 50) { sensitivity = "Medium-Low"; } else if (value < 75) { sensitivity = "Medium"; } else if (value < 90) { sensitivity = "High"; } else { sensitivity = "Very High"; } sensitivityValue.textContent = sensitivity; }); // Click to apply suggested commands commandItems.forEach(item => { item.addEventListener('click', function() { const text = this.textContent.replace(/"/g, ''); searchInput.value = text; // Simulate search after delay setTimeout(() => { transcript.classList.add('active'); transcriptText.classList.remove('placeholder'); transcriptText.textContent = `Searching for: "${text}"`; }, 300); }); }); // Voice recognition toggle function micButton.addEventListener('click', toggleVoiceRecognition); function toggleVoiceRecognition() { if (isListening) { stopListening(); } else { startListening(); } } function startListening() { isListening = true; micButton.classList.add('listening'); searchContainer.classList.add('listening'); soundWave.classList.add('active'); statusDot.classList.add('listening'); statusText.textContent = "Listening..."; // For demo purposes, we'll simulate voice recognition here simulateVoiceRecognition(); } function stopListening() { isListening = false; micButton.classList.remove('listening'); searchContainer.classList.remove('listening'); soundWave.classList.remove('active'); statusDot.classList.remove('listening'); statusText.textContent = "Ready to listen"; if (simulatedRecognition) { clearTimeout(simulatedRecognition); } } function simulateVoiceRecognition() { // Clear the transcript placeholder text transcript.classList.add('active'); transcriptText.classList.remove('placeholder'); // Simulate real-time voice transcription with typing effect let examplePhrases = [ "Setting up smart home devices", "Looking for recipe recommendations", "Checking weather forecast for today", "Searching for nearby coffee shops", "Playing your favorite playlist" ]; let selectedPhrase = examplePhrases[Math.floor(Math.random() * examplePhrases.length)]; let currentChar = 0; transcriptText.textContent = ""; function typeEffect() { if (currentChar < selectedPhrase.length && isListening) { transcriptText.textContent += selectedPhrase.charAt(currentChar); currentChar++; setTimeout(typeEffect, 70 + Math.random() * 50); } else if (isListening) { // Automatically stop listening after phrase is complete simulatedRecognition = setTimeout(() => { searchInput.value = selectedPhrase; stopListening(); }, 800); } } typeEffect(); } // Prevent actual form submission searchInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { transcript.classList.add('active'); transcriptText.classList.remove('placeholder'); transcriptText.textContent = `Searching for: "${searchTerm}"`; } } }); // Add hover effects for visual feedback searchInput.addEventListener('focus', function() { searchContainer.classList.add('focus'); }); searchInput.addEventListener('blur', function() { searchContainer.classList.remove('focus'); }); // Add interactive animations const logo = document.querySelector('.logo'); logo.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05)'; this.style.transition = 'transform 0.3s ease'; }); logo.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Search Component</title> <style> :root { --primary: #5468ff; --primary-light: #7b8aff; --secondary: #03dac6; --dark: #1d1d42; --light: #f7f9fc; --light-gray: #e6e8f0; --medium-gray: #b4b7c9; --text: #383b5a; --shadow: rgba(84, 104, 255, 0.2); --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); --radius: 8px; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--light); color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; perspective: 1000px; } .theme-selector { position: absolute; top: 20px; right: 20px; display: flex; gap: 6px; } .theme-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: var(--transition); position: relative; overflow: hidden; } .theme-option:hover { transform: scale(1.1); } .theme-option.active { border-color: var(--light); box-shadow: 0 0 0 2px var(--primary); } .theme-option.blue { background: linear-gradient(135deg, #5468ff, #3b4fd3); } .theme-option.purple { background: linear-gradient(135deg, #8e44ad, #5f2c82); } .theme-option.green { background: linear-gradient(135deg, #00b894, #007c65); } .theme-option.dark { background: linear-gradient(135deg, #2d3436, #1e272e); } .search-container { width: 100%; max-width: 650px; border-radius: var(--radius); background-color: white; box-shadow: 0 15px 45px -12px var(--shadow); padding: 24px; transition: var(--transition); transform-style: preserve-3d; transform: translateZ(0); } .search-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .search-title { font-size: 20px; font-weight: 600; } .view-toggle { display: flex; background-color: var(--light-gray); border-radius: 20px; padding: 3px; } .view-option { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 20px; cursor: pointer; transition: var(--transition); color: var(--medium-gray); } .view-option.active { background-color: white; color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .view-option:hover:not(.active) { color: var(--text); } .view-option svg { width: 16px; height: 16px; } .search-input-container { position: relative; margin-bottom: 16px; } .search-input { width: 100%; height: 52px; padding: 0 48px; border-radius: var(--radius); border: 2px solid var(--light-gray); font-size: 16px; transition: var(--transition); background-color: white; color: var(--text); } .search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--shadow); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--medium-gray); transition: var(--transition); pointer-events: none; } .search-input:focus + .search-icon { color: var(--primary); } .search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--medium-gray); cursor: pointer; transition: var(--transition); padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; } .search-clear.visible { opacity: 1; visibility: visible; } .search-clear:hover { color: var(--text); background-color: var(--light-gray); } .filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .filter-tag { display: flex; align-items: center; padding: 6px 12px; background-color: var(--light-gray); border-radius: 16px; font-size: 14px; cursor: pointer; transition: var(--transition); user-select: none; } .filter-tag.active { background-color: var(--primary); color: white; } .filter-tag:hover:not(.active) { background-color: var(--medium-gray); color: white; } .filter-tag-remove { margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; } .advanced-filters { padding: 16px; border-radius: var(--radius); background-color: var(--light); margin-bottom: 16px; overflow: hidden; max-height: 0; opacity: 0; transition: var(--transition); } .advanced-filters.open { max-height: 300px; opacity: 1; margin-top: 16px; } .filter-group { margin-bottom: 16px; } .filter-group:last-child { margin-bottom: 0; } .filter-label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 14px; } .filter-options { display: flex; flex-wrap: wrap; gap: 8px; } .filter-option { padding: 6px 12px; border-radius: var(--radius); background-color: white; border: 1px solid var(--light-gray); font-size: 14px; cursor: pointer; transition: var(--transition); } .filter-option.active { border-color: var(--primary); background-color: rgba(84, 104, 255, 0.05); color: var(--primary); font-weight: 500; } .filter-option:hover:not(.active) { border-color: var(--medium-gray); } .filter-actions { display: flex; justify-content: space-between; margin-top: 20px; } .search-controls { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; } .toggle-filters { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--primary); font-weight: 500; transition: var(--transition); } .toggle-filters:hover { color: var(--primary-light); } .toggle-filters svg { transition: var(--transition); } .toggle-filters.open svg { transform: rotate(180deg); } .sort-options { display: flex; align-items: center; gap: 8px; } .sort-label { font-size: 14px; color: var(--text); } .sort-select { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--light-gray); background-color: white; font-size: 14px; transition: var(--transition); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b7c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 32px; } .sort-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--shadow); } .result-indicator { font-size: 14px; color: var(--medium-gray); margin-top: 16px; display: flex; align-items: center; justify-content: space-between; } .result-count { font-weight: 500; color: var(--primary); } .search-suggestions { margin-top: 20px; } .suggestion-label { font-size: 14px; color: var(--medium-gray); margin-bottom: 8px; } .suggestion-items { display: flex; flex-wrap: wrap; gap: 8px; } .suggestion-item { padding: 6px 12px; border-radius: var(--radius); background-color: white; border: 1px solid var(--light-gray); font-size: 14px; cursor: pointer; transition: var(--transition); color: var(--text); } .suggestion-item:hover { background-color: var(--light-gray); border-color: var(--medium-gray); } .button { padding: 8px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; } .button-primary { background-color: var(--primary); color: white; } .button-primary:hover { background-color: var(--primary-light); box-shadow: 0 4px 12px var(--shadow); } .button-secondary { background-color: var(--light-gray); color: var(--text); } .button-secondary:hover { background-color: var(--medium-gray); color: white; } .theme-dark { --primary: #bb86fc; --primary-light: #d8b9ff; --secondary: #03dac6; --dark: #121212; --light: #1e1e1e; --light-gray: #2d2d2d; --medium-gray: #6c6c6c; --text: #e0e0e0; --shadow: rgba(187, 134, 252, 0.2); } .theme-dark .search-container { background-color: #121212; } .theme-dark .search-input, .theme-dark .filter-option, .theme-dark .sort-select, .theme-dark .suggestion-item { background-color: #1e1e1e; color: var(--text); } .theme-dark .view-option.active { background-color: #2d2d2d; } .theme-purple { --primary: #8e44ad; --primary-light: #9b59b6; --secondary: #e74c3c; --shadow: rgba(142, 68, 173, 0.2); } .theme-green { --primary: #00b894; --primary-light: #00d1a7; --secondary: #fdcb6e; --shadow: rgba(0, 184, 148, 0.2); } /* Micro-animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .filter-tag.active { animation: pulse 0.3s ease-in-out; } .filter-options { animation: fadeIn 0.3s ease-out; } /* Responsive styles */ @media (max-width: 600px) { .search-container { padding: 16px; } .search-header { flex-direction: column; align-items: flex-start; gap: 12px; } .view-toggle { align-self: flex-end; } .search-controls { flex-direction: column; align-items: flex-start; gap: 12px; } .sort-options { width: 100%; } .sort-select { flex-grow: 1; } .filter-actions { flex-direction: column; gap: 12px; } .button { width: 100%; } } </style> </head> <body> <div class="theme-selector"> <div class="theme-option blue active" data-theme="blue"></div> <div class="theme-option purple" data-theme="purple"></div> <div class="theme-option green" data-theme="green"></div> <div class="theme-option dark" data-theme="dark"></div> </div> <div class="search-container"> <div class="search-header"> <h1 class="search-title">Advanced Query Builder</h1> <div class="view-toggle"> <div class="view-option active" title="Grid View"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> </svg> </div> <div class="view-option" title="List View"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </div> </div> </div> <div class="search-input-container"> <input type="text" class="search-input" placeholder="Search your SaaS resources..." id="searchInput" autocomplete="off"> <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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> <button class="search-clear" id="searchClear"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> </div> <div class="filter-tags" id="filterTags"> <div class="filter-tag" data-filter="customer">Customer records</div> <div class="filter-tag" data-filter="tickets">Support tickets</div> <div class="filter-tag" data-filter="reports">Analytics reports</div> <div class="filter-tag" data-filter="documents">Documents</div> <div class="filter-tag" data-filter="integrations">Integrations</div> </div> <div class="search-controls"> <button class="toggle-filters" id="toggleFilters"> Advanced filters <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="sort-options"> <span class="sort-label">Sort by:</span> <select class="sort-select" id="sortOptions"> <option value="relevance">Relevance</option> <option value="date_desc">Latest first</option> <option value="date_asc">Oldest first</option> <option value="name_asc">A-Z</option> <option value="name_desc">Z-A</option> </select> </div> </div> <div class="advanced-filters" id="advancedFilters"> <div class="filter-group"> <span class="filter-label">Date modified</span> <div class="filter-options"> <div class="filter-option" data-date="today">Today</div> <div class="filter-option" data-date="week">Last week</div> <div class="filter-option" data-date="month">Last month</div> <div class="filter-option" data-date="quarter">Last quarter</div> <div class="filter-option" data-date="custom">Custom range</div> </div> </div> <div class="filter-group"> <span class="filter-label">Status</span> <div class="filter-options"> <div class="filter-option" data-status="active">Active</div> <div class="filter-option" data-status="archived">Archived</div> <div class="filter-option" data-status="pending">Pending</div> <div class="filter-option" data-status="draft">Draft</div> </div> </div> <div class="filter-group"> <span class="filter-label">User access</span> <div class="filter-options"> <div class="filter-option" data-access="owner">Owner</div> <div class="filter-option" data-access="editor">Editor</div> <div class="filter-option" data-access="viewer">Viewer</div> <div class="filter-option" data-access="shared">Shared with me</div> </div> </div> <div class="filter-actions"> <button class="button button-secondary" id="resetFilters">Reset filters</button> <button class="button button-primary" id="applyFilters">Apply filters</button> </div> </div> <div class="result-indicator"> <div> <span class="result-count">0</span> results found </div> <div>Quick search mode</div> </div> <div class="search-suggestions"> <div class="suggestion-label">Popular searches</div> <div class="suggestion-items"> <div class="suggestion-item">Analytics dashboard performance</div> <div class="suggestion-item">API integration guides</div> <div class="suggestion-item">User onboarding metrics</div> <div class="suggestion-item">Customer retention reports</div> <div class="suggestion-item">Feature usage trends</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Elements const searchContainer = document.querySelector('.search-container'); const searchInput = document.getElementById('searchInput'); const searchClear = document.getElementById('searchClear'); const filterTags = document.querySelectorAll('.filter-tag'); const toggleFilters = document.getElementById('toggleFilters'); const advancedFilters = document.getElementById('advancedFilters'); const filterOptions = document.querySelectorAll('.filter-option'); const resetFilters = document.getElementById('resetFilters'); const applyFilters = document.getElementById('applyFilters'); const viewOptions = document.querySelectorAll('.view-option'); const sortSelect = document.getElementById('sortOptions'); const resultCount = document.querySelector('.result-count'); const themeOptions = document.querySelectorAll('.theme-option'); const suggestionItems = document.querySelectorAll('.suggestion-item'); // State let activeFilters = []; let activeSort = 'relevance'; let activeTheme = 'blue'; // Initialize updateResultCount(); // Search input handlers searchInput.addEventListener('input', () => { if (searchInput.value.length > 0) { searchClear.classList.add('visible'); // Simulate search results updating updateResultCount(Math.floor(Math.random() * 120) + 1); } else { searchClear.classList.remove('visible'); updateResultCount(0); } }); searchInput.addEventListener('focus', () => { searchContainer.style.transform = 'translateZ(30px)'; searchContainer.style.boxShadow = '0 20px 50px -18px var(--shadow)'; }); searchInput.addEventListener('blur', () => { searchContainer.style.transform = 'translateZ(0)'; searchContainer.style.boxShadow = '0 15px 45px -12px var(--shadow)'; }); searchClear.addEventListener('click', () => { searchInput.value = ''; searchClear.classList.remove('visible'); updateResultCount(0); searchInput.focus(); }); // Filter tags filterTags.forEach(tag => { tag.addEventListener('click', () => { tag.classList.toggle('active'); const filter = tag.dataset.filter; if (tag.classList.contains('active')) { if (!activeFilters.includes(filter)) { activeFilters.push(filter); } } else { activeFilters = activeFilters.filter(f => f !== filter); } // Update results based on new filters updateResultCount(Math.floor(Math.random() * 120) + 1); }); }); // Advanced filters toggle toggleFilters.addEventListener('click', () => { advancedFilters.classList.toggle('open'); toggleFilters.classList.toggle('open'); }); // Filter options filterOptions.forEach(option => { option.addEventListener('click', () => { // Find siblings (options in the same group) const parent = option.parentElement; const siblings = Array.from(parent.querySelectorAll('.filter-option')); siblings.forEach(sib => { sib.classList.remove('active'); }); option.classList.add('active'); }); }); // Reset filters resetFilters.addEventListener('click', () => { filterOptions.forEach(option => { option.classList.remove('active'); }); filterTags.forEach(tag => { tag.classList.remove('active'); }); activeFilters = []; updateResultCount(0); }); // Apply filters applyFilters.addEventListener('click', () => { advancedFilters.classList.remove('open'); toggleFilters.classList.remove('open'); // Count active filters const activeFilterCount = document.querySelectorAll('.filter-option.active').length + activeFilters.length; // Generate random result count based on filter count let resultNum; if (activeFilterCount === 0) { resultNum = Math.floor(Math.random() * 120) + 1; } else { resultNum = Math.floor(Math.random() * (120 / (activeFilterCount + 1))) + 1; } updateResultCount(resultNum); }); // View options viewOptions.forEach(option => { option.addEventListener('click', () => { viewOptions.forEach(opt => opt.classList.remove('active')); option.classList.add('active'); }); }); // Sort select sortSelect.addEventListener('change', () => { activeSort = sortSelect.value; // Simulate resorting results updateResultCount(parseInt(resultCount.textContent)); }); // Theme options themeOptions.forEach(option => { option.addEventListener('click', () => { themeOptions.forEach(opt => opt.classList.remove('active')); option.classList.add('active'); activeTheme = option.dataset.theme; // Remove all theme classes document.body.classList.remove('theme-blue', 'theme-purple', 'theme-green', 'theme-dark'); // Add the active theme class if (activeTheme !== 'blue') { document.body.classList.add(`theme-${activeTheme}`); } }); }); // Suggestion items suggestionItems.forEach(item => { item.addEventListener('click', () => { searchInput.value = item.textContent; searchClear.classList.add('visible'); updateResultCount(Math.floor(Math.random() * 120) + 1); searchInput.focus(); }); }); // Helper functions function updateResultCount(count = 0) { resultCount.textContent = count; const animation = resultCount.animate( [ { transform: 'scale(1.2)', color: 'var(--primary)' }, { transform: 'scale(1)', color: 'var(--primary)' } ], { duration: 300, easing: 'ease-out' } ); } // Add hover effect to search container searchContainer.addEventListener('mousemove', (e) => { const rect = searchContainer.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const tiltX = (x - centerX) / 30; const tiltY = (y - centerY) / 30; searchContainer.style.transform = `rotateX(${-tiltY}deg) rotateY(${tiltX}deg) translateZ(0)`; }); searchContainer.addEventListener('mouseleave', () => { searchContainer.style.transform = 'rotateX(0) rotateY(0) translateZ(0)'; }); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Poppins:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #f9f6f2; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; color: #333; } .container { width: 100%; max-width: 680px; padding: 20px; position: relative; } .search-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; } .title { font-family: 'Caveat', cursive; font-size: 2.8rem; margin-bottom: 20px; color: #433a3f; text-align: center; position: relative; font-weight: 600; } .title::after { content: ''; position: absolute; width: 70px; height: 4px; background: #ff6b6b; bottom: -8px; left: 50%; transform: translateX(-50%); border-radius: 5px; } .subtitle { font-size: 0.95rem; text-align: center; margin-bottom: 30px; max-width: 85%; line-height: 1.6; color: #666; } .search-box { position: relative; width: 100%; } .search-input { width: 100%; padding: 18px 60px 18px 25px; border: none; border-radius: 0; background: transparent; font-size: 18px; color: #333; font-family: 'Caveat', cursive; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s ease; position: relative; z-index: 1; } .search-input:focus { outline: none; } .search-border { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: 0; } .search-border svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .search-border path { stroke: #433a3f; stroke-width: 2; fill: white; stroke-dasharray: 1500; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; } .search-button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; z-index: 2; transition: transform 0.3s ease; } .search-button:hover { transform: translateY(-50%) scale(1.1); } .search-button svg { width: 28px; height: 28px; fill: #433a3f; } .suggestions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; gap: 15px; perspective: 600px; } .suggestion-tag { padding: 8px 16px; background: white; border-radius: 25px; font-family: 'Caveat', cursive; font-size: 17px; cursor: pointer; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transform-style: preserve-3d; transform: translateZ(0) rotateX(0); transition: all 0.3s ease; position: relative; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: calc(var(--i) * 0.1s); } .suggestion-tag:hover { transform: translateZ(10px) rotateX(5deg); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .suggestion-tag::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color); opacity: 0.1; border-radius: 25px; z-index: -1; } .search-active .suggestion-tag { animation: spin-out 0.5s forwards; } .results { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; display: none; } .results.show { opacity: 1; transform: translateY(0); display: grid; } .result-item { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .result-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .result-image { width: 100%; height: 160px; object-fit: cover; } .result-info { padding: 15px; } .result-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; } .result-artist { font-size: 0.9rem; color: #666; font-family: 'Caveat', cursive; font-size: 1rem; } .no-results { text-align: center; width: 100%; font-size: 1.1rem; color: #666; margin-top: 30px; font-family: 'Caveat', cursive; font-size: 1.5rem; display: none; } .brush-stroke { position: absolute; width: 100px; height: 20px; z-index: -1; opacity: 0.2; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin-out { to { opacity: 0; transform: translateY(-20px) rotateX(-90deg); } } @keyframes floating { 0%, 100% { transform: translateY(0) rotate(var(--rotation)); } 50% { transform: translateY(-10px) rotate(var(--rotation)); } } /* Responsive adjustments */ @media (max-width: 600px) { .title { font-size: 2.2rem; } .subtitle { font-size: 0.9rem; max-width: 95%; } .search-input { font-size: 16px; padding: 15px 50px 15px 20px; } .search-button svg { width: 24px; height: 24px; } .suggestions { margin-top: 25px; } .suggestion-tag { font-size: 15px; padding: 6px 14px; } .results { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } </style> </head> <body> <div class="container"> <div class="search-wrapper"> <h1 class="title">Creative Portfolio Finder</h1> <p class="subtitle">Discover unique artistic voices across mediums, styles, and expressions. What inspires you today?</p> <div class="search-box"> <input type="text" class="search-input" placeholder="Search for artists, illustrations, photography..." autocomplete="off"> <div class="search-border"> <svg viewBox="0 0 500 80" preserveAspectRatio="none"> <path d="M8,65 C8,65 60,10 250,10 C440,10 492,65 492,65" fill="none" /> </svg> </div> <button class="search-button"> <svg viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </button> </div> <div class="suggestions"> <div class="suggestion-tag" style="--i: 1; --color: #ff6b6b;" data-query="illustrations">Illustrations</div> <div class="suggestion-tag" style="--i: 2; --color: #48dbfb;" data-query="typography">Typography</div> <div class="suggestion-tag" style="--i: 3; --color: #1dd1a1;" data-query="watercolor">Watercolor</div> <div class="suggestion-tag" style="--i: 4; --color: #feca57;" data-query="digital art">Digital Art</div> <div class="suggestion-tag" style="--i: 5; --color: #ff9ff3;" data-query="mixed media">Mixed Media</div> <div class="suggestion-tag" style="--i: 6; --color: #54a0ff;" data-query="photography">Photography</div> </div> <div class="results"> <!-- Results will be dynamically populated here --> </div> <div class="no-results"> We couldn't find any portfolios matching your search. Try something else? </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // DOM elements const searchInput = document.querySelector('.search-input'); const searchBox = document.querySelector('.search-box'); const searchWrapper = document.querySelector('.search-wrapper'); const suggestions = document.querySelector('.suggestions'); const suggestionTags = document.querySelectorAll('.suggestion-tag'); const searchButton = document.querySelector('.search-button'); const results = document.querySelector('.results'); const noResults = document.querySelector('.no-results'); // Sample portfolio data const portfolios = [ { title: "Dreamscape Surrealism", artist: "Elena Morgenstern", image: "https://source.unsplash.com/LRlzTAv8GCs/400x300", tags: ["illustrations", "digital art", "surrealism"] }, { title: "Urban Typography", artist: "Marcus Chen", image: "https://source.unsplash.com/wn7dOzUh3Rs/400x300", tags: ["typography", "design", "lettering"] }, { title: "Ethereal Waterscapes", artist: "Sophia Aquarelle", image: "https://source.unsplash.com/6xQFmqPdQ5U/400x300", tags: ["watercolor", "painting", "landscapes"] }, { title: "Neon Future", artist: "Kai Takahashi", image: "https://source.unsplash.com/eIgwrKpnQbM/400x300", tags: ["digital art", "illustrations", "cyberpunk"] }, { title: "Textural Assemblage", artist: "Lila Morganfield", image: "https://source.unsplash.com/mGNvmx0IW9Q/400x300", tags: ["mixed media", "sculpture", "abstract"] }, { title: "Street Moments", artist: "Xavier Santos", image: "https://source.unsplash.com/O2MBKqwjoRA/400x300", tags: ["photography", "urban", "street"] } ]; // Focus animation for search input searchInput.addEventListener('focus', () => { const path = searchBox.querySelector('path'); path.style.stroke = '#ff6b6b'; path.style.strokeDasharray = '1500'; path.style.strokeDashoffset = '1500'; setTimeout(() => { path.style.transition = 'stroke-dashoffset 1.5s ease'; path.style.strokeDashoffset = '0'; }, 50); }); searchInput.addEventListener('blur', () => { const path = searchBox.querySelector('path'); path.style.stroke = '#433a3f'; path.style.transition = 'stroke 0.3s ease'; }); // Suggestion tag click handler suggestionTags.forEach(tag => { tag.addEventListener('click', () => { searchInput.value = tag.dataset.query; performSearch(tag.dataset.query); }); }); // Search functionality searchButton.addEventListener('click', () => { performSearch(searchInput.value); }); searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { performSearch(searchInput.value); } }); function performSearch(query) { if (!query.trim()) return; searchWrapper.classList.add('search-active'); // Find matching portfolios const searchTerms = query.toLowerCase().split(' '); const filteredPortfolios = portfolios.filter(portfolio => { return searchTerms.some(term => { return portfolio.title.toLowerCase().includes(term) || portfolio.artist.toLowerCase().includes(term) || portfolio.tags.some(tag => tag.includes(term)); }); }); // Clear previous results results.innerHTML = ''; // Display results or no results message if (filteredPortfolios.length > 0) { filteredPortfolios.forEach(portfolio => { const resultItem = document.createElement('div'); resultItem.className = 'result-item'; resultItem.innerHTML = ` <img src="${portfolio.image}" class="result-image" alt="${portfolio.title}"> <div class="result-info"> <h3 class="result-title">${portfolio.title}</h3> <p class="result-artist">by ${portfolio.artist}</p> </div> `; results.appendChild(resultItem); }); results.classList.add('show'); noResults.style.display = 'none'; } else { results.classList.remove('show'); noResults.style.display = 'block'; } // Add animated brush strokes around results setTimeout(() => { addBrushStrokes(); }, 500); } function addBrushStrokes() { // Remove existing brush strokes document.querySelectorAll('.brush-stroke').forEach(el => el.remove()); // Add new brush strokes around results const positions = [ { top: '10%', left: '-5%', rotation: '15deg', color: '#ff6b6b' }, { top: '80%', right: '-5%', rotation: '-10deg', color: '#48dbfb' }, { top: '40%', left: '-8%', rotation: '30deg', color: '#1dd1a1' }, { top: '25%', right: '-7%', rotation: '-25deg', color: '#feca57' } ]; positions.forEach(pos => { const brushStroke = document.createElement('div'); brushStroke.className = 'brush-stroke'; Object.keys(pos).forEach(key => { if (key === 'rotation') { brushStroke.style.setProperty('--rotation', pos[key]); brushStroke.style.transform = `rotate(${pos[key]})`; } else if (key === 'color') { brushStroke.style.backgroundColor = pos[key]; } else { brushStroke.style[key] = pos[key]; } }); brushStroke.style.animation = `floating ${3 + Math.random() * 2}s ease-in-out infinite`; results.appendChild(brushStroke); }); } // Animated intro of search component setTimeout(() => { document.querySelectorAll('.suggestion-tag').forEach(tag => { tag.style.opacity = 1; }); }, 100); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Search Interface</title> <style> :root { --primary: #4A90E2; --secondary: #6C63FF; --accent: #FF6B6B; --light: #F5F7FA; --dark: #2D3748; --success: #48BB78; --warning: #F6AD55; --danger: #F56565; --border-radius: 12px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background: linear-gradient(135deg, #F6F8FB 0%, #E9F0F8 100%); color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .travel-search { width: 100%; max-width: 700px; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 25px; transition: var(--transition); } .search-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .search-title { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, var(--primary), var(--secondary)); background-clip: text; -webkit-background-clip: text; color: transparent; } .search-modes { display: flex; gap: 10px; margin-bottom: 25px; } .search-mode { padding: 10px 18px; background: var(--light); border-radius: 30px; font-size: 14px; font-weight: 600; color: var(--dark); cursor: pointer; transition: var(--transition); border: none; outline: none; } .search-mode.active { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 4px 15px rgba(106, 99, 255, 0.3); } .search-input-container { position: relative; margin-bottom: 20px; } .search-input { width: 100%; padding: 20px; padding-left: 55px; border-radius: var(--border-radius); border: 2px solid var(--light); font-size: 16px; transition: var(--transition); background: var(--light); } .search-input:focus { outline: none; border-color: var(--secondary); background: white; box-shadow: 0 4px 15px rgba(106, 99, 255, 0.15); } .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 20px; } .filter-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 25px; } .filter-item { position: relative; } .filter-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--dark); } .filter-input { width: 100%; padding: 12px 15px; border-radius: 8px; border: 2px solid var(--light); font-size: 14px; transition: var(--transition); background: var(--light); } .filter-input:focus { outline: none; border-color: var(--secondary); background: white; } .date-inputs { display: flex; gap: 10px; } .date-input { flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 25px; } .tag { padding: 8px 15px; background: var(--light); border-radius: 20px; font-size: 13px; color: var(--dark); cursor: pointer; transition: var(--transition); border: 1px solid transparent; display: flex; align-items: center; gap: 8px; } .tag:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } .tag.active { background: rgba(106, 99, 255, 0.1); border-color: var(--secondary); color: var(--secondary); } .tag-icon { font-size: 14px; } .search-button { width: 100%; padding: 16px; background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: var(--border-radius); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 15px rgba(106, 99, 255, 0.3); display: flex; justify-content: center; align-items: center; gap: 10px; } .search-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(106, 99, 255, 0.4); } .recent-searches { margin-top: 25px; } .recent-title { font-size: 14px; font-weight: 600; margin-bottom: 15px; color: var(--dark); display: flex; align-items: center; gap: 10px; } .recent-title span { color: var(--secondary); } .recent-list { display: flex; flex-wrap: wrap; gap: 10px; } .recent-item { padding: 10px 15px; background: white; border: 1px solid var(--light); border-radius: 8px; font-size: 13px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px; } .recent-item:hover { background: var(--light); transform: translateY(-2px); } .recent-icon { color: var(--primary); font-size: 14px; } .dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border-radius: 8px; box-shadow: var(--shadow); z-index: 10; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: 5px; } .dropdown.open { max-height: 300px; overflow-y: auto; } .dropdown-item { padding: 12px 15px; font-size: 14px; cursor: pointer; transition: var(--transition); } .dropdown-item:hover { background: var(--light); } .dropdown-divider { height: 1px; background: var(--light); margin: 5px 0; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(106, 99, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(106, 99, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(106, 99, 255, 0); } } .tooltip { position: absolute; background: var(--dark); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 100; } .tooltip:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .filter-item:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-5px); } .theme-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .theme-container.open { max-height: 200px; margin-bottom: 15px; } .theme-item { padding: 8px 15px; background: white; border: 1px solid var(--light); border-radius: 20px; font-size: 13px; cursor: pointer; transition: var(--transition); } .theme-item:hover { background: var(--light); } .theme-item.active { background: rgba(106, 99, 255, 0.1); border-color: var(--secondary); color: var(--secondary); } .theme-toggle { font-size: 13px; color: var(--primary); text-decoration: underline; cursor: pointer; display: inline-block; margin-top: 5px; } .loading { display: none; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading.active { display: inline-block; } .search-text { transition: opacity 0.3s ease; } .search-text.hidden { opacity: 0; } @media (max-width: 600px) { .filter-section { grid-template-columns: 1fr; } .date-inputs { flex-direction: column; } .search-title { font-size: 20px; } .search-button { padding: 14px; } } /* Dark mode toggle */ .mode-toggle { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--dark); transition: var(--transition); } .mode-toggle:hover { transform: rotate(30deg); } /* Dark mode styles */ body.dark-mode { background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%); color: white; } body.dark-mode .travel-search { background: #2D3748; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } body.dark-mode .search-mode { background: #4A5568; color: white; } body.dark-mode .search-input, body.dark-mode .filter-input { background: #4A5568; border-color: #4A5568; color: white; } body.dark-mode .search-input:focus, body.dark-mode .filter-input:focus { border-color: var(--secondary); background: #3A4559; } body.dark-mode .tag, body.dark-mode .recent-item, body.dark-mode .theme-item { background: #4A5568; color: white; } body.dark-mode .tag.active, body.dark-mode .theme-item.active { background: rgba(106, 99, 255, 0.3); } body.dark-mode .recent-item { border-color: #4A5568; } body.dark-mode .dropdown { background: #2D3748; } body.dark-mode .dropdown-item:hover { background: #4A5568; } body.dark-mode .dropdown-divider { background: #4A5568; } body.dark-mode .filter-label, body.dark-mode .recent-title { color: #E2E8F0; } body.dark-mode ::placeholder { color: #A0AEC0; } </style> </head> <body> <div class="travel-search"> <div class="search-header"> <h1 class="search-title">Wanderlust Explorer</h1> <button class="mode-toggle" id="modeToggle"> <i class="fas fa-moon"></i> </button> </div> <div class="search-modes"> <button class="search-mode active" data-mode="flights"> <i class="fas fa-plane"></i> Flights </button> <button class="search-mode" data-mode="hotels"> <i class="fas fa-hotel"></i> Hotels </button> <button class="search-mode" data-mode="packages"> <i class="fas fa-suitcase"></i> Packages </button> <button class="search-mode" data-mode="experiences"> <i class="fas fa-map-marked-alt"></i> Experiences </button> </div> <div class="search-input-container"> <i class="fas fa-search search-icon"></i> <input type="text" class="search-input" id="destinationInput" placeholder="Where would you like to go?" autocomplete="off"> <div class="dropdown" id="destinationDropdown"> <div class="dropdown-item"><i class="fas fa-map-marker-alt"></i> Bali, Indonesia</div> <div class="dropdown-item"><i class="fas fa-map-marker-alt"></i> Barcelona, Spain</div> <div class="dropdown-item"><i class="fas fa-map-marker-alt"></i> Tokyo, Japan</div> <div class="dropdown-item"><i class="fas fa-map-marker-alt"></i> Santorini, Greece</div> <div class="dropdown-item"><i class="fas fa-map-marker-alt"></i> New York, USA</div> <div class="dropdown-divider"></div> <div class="dropdown-item"><i class="fas fa-globe-americas"></i> Explore Worldwide Destinations</div> </div> </div> <div class="filter-section" id="flightFilters"> <div class="filter-item"> <label class="filter-label">Departure</label> <input type="date" class="filter-input" id="departureDate"> <div class="tooltip">Choose your departure date</div> </div> <div class="filter-item"> <label class="filter-label">Return</label> <input type="date" class="filter-input" id="returnDate"> <div class="tooltip">Choose your return date</div> </div> <div class="filter-item"> <label class="filter-label">Travelers</label> <input type="number" class="filter-input" min="1" value="1" id="travelersInput"> <div class="tooltip">How many travelers?</div> </div> <div class="filter-item"> <label class="filter-label">Class</label> <select class="filter-input" id="classSelect"> <option value="economy">Economy</option> <option value="premium">Premium Economy</option> <option value="business">Business</option> <option value="first">First Class</option> </select> <div class="tooltip">Select travel class</div> </div> </div> <div class="filter-item"> <label class="filter-label">Travel Themes</label> <span class="theme-toggle" id="themeToggle">Browse themes</span> <div class="theme-container" id="themeContainer"> <div class="theme-item" data-theme="beach">Beach Escapes</div> <div class="theme-item" data-theme="culture">Cultural Explorations</div> <div class="theme-item" data-theme="adventure">Adventure & Outdoors</div> <div class="theme-item" data-theme="food">Culinary Journeys</div> <div class="theme-item" data-theme="wellness">Wellness Retreats</div> <div class="theme-item" data-theme="city">City Breaks</div> </div> </div> <div class="tags-container"> <div class="tag" data-tag="nonstop"> <i class="fas fa-exchange-alt tag-icon"></i> Non-stop flights </div> <div class="tag" data-tag="flexible"> <i class="fas fa-calendar-alt tag-icon"></i> Flexible dates </div> <div class="tag" data-tag="price"> <i class="fas fa-tag tag-icon"></i> Best price guarantee </div> <div class="tag pulse" data-tag="deals"> <i class="fas fa-fire tag-icon"></i> Flash deals </div> </div> <button class="search-button" id="searchButton"> <span class="loading" id="searchLoading"></span> <span class="search-text" id="searchText">Find Your Perfect Trip</span> </button> <div class="recent-searches"> <h3 class="recent-title"> <i class="fas fa-history"></i> Recently Searched <span>Inspirations</span> </h3> <div class="recent-list"> <div class="recent-item"> <i class="fas fa-plane-departure recent-icon"></i> Tokyo, Aug 10-20 </div> <div class="recent-item"> <i class="fas fa-plane-departure recent-icon"></i> Maldives, Sep 5-15 </div> <div class="recent-item"> <i class="fas fa-hotel recent-icon"></i> Paris, Oct 22-29 </div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Handle search modes const searchModes = document.querySelectorAll('.search-mode'); searchModes.forEach(mode => { mode.addEventListener('click', function() { searchModes.forEach(m => m.classList.remove('active')); this.classList.add('active'); // Update placeholder based on mode const destinationInput = document.getElementById('destinationInput'); const searchText = document.getElementById('searchText'); switch(this.dataset.mode) { case 'flights': destinationInput.placeholder = 'Where would you like to go?'; searchText.textContent = 'Find Your Perfect Flight'; break; case 'hotels': destinationInput.placeholder = 'Search for hotels or destinations'; searchText.textContent = 'Find Your Perfect Stay'; break; case 'packages': destinationInput.placeholder = 'Where do you want to explore?'; searchText.textContent = 'Find Your Perfect Package'; break; case 'experiences': destinationInput.placeholder = 'What experience are you looking for?'; searchText.textContent = 'Find Your Perfect Experience'; break; } }); }); // Destination dropdown const destinationInput = document.getElementById('destinationInput'); const destinationDropdown = document.getElementById('destinationDropdown'); destinationInput.addEventListener('focus', function() { destinationDropdown.classList.add('open'); }); destinationInput.addEventListener('blur', function() { setTimeout(() => { destinationDropdown.classList.remove('open'); }, 200); }); // Handle dropdown selection const dropdownItems = document.querySelectorAll('.dropdown-item'); dropdownItems.forEach(item => { item.addEventListener('click', function() { destinationInput.value = this.textContent.trim(); destinationDropdown.classList.remove('open'); }); }); // Toggle tags const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', function() { this.classList.toggle('active'); }); }); // Theme toggle const themeToggle = document.getElementById('themeToggle'); const themeContainer = document.getElementById('themeContainer'); themeToggle.addEventListener('click', function() { themeContainer.classList.toggle('open'); this.textContent = themeContainer.classList.contains('open') ? 'Hide themes' : 'Browse themes'; }); // Theme selection const themeItems = document.querySelectorAll('.theme-item'); themeItems.forEach(item => { item.addEventListener('click', function() { this.classList.toggle('active'); }); }); // Set today as minimum date for date inputs const today = new Date().toISOString().split('T')[0]; document.getElementById('departureDate').min = today; document.getElementById('returnDate').min = today; // Update return date min when departure date changes document.getElementById('departureDate').addEventListener('change', function() { document.getElementById('returnDate').min = this.value; // If return date is before departure date, update it const returnDate = document.getElementById('returnDate'); if (returnDate.value && returnDate.value < this.value) { returnDate.value = this.value; } }); // Search button animation const searchButton = document.getElementById('searchButton'); const searchLoading = document.getElementById('searchLoading'); const searchText = document.getElementById('searchText'); searchButton.addEventListener('click', function() { searchLoading.classList.add('active'); searchText.classList.add('hidden'); // Simulate search delay setTimeout(() => { searchLoading.classList.remove('active'); searchText.classList.remove('hidden'); // Show success message const originalText = searchText.textContent; searchText.textContent = "Trip options being loaded..."; setTimeout(() => { searchText.textContent = originalText; }, 2000); }, 1500); }); // Dark mode toggle const modeToggle = document.getElementById('modeToggle'); const body = document.body; modeToggle.addEventListener('click', function() { body.classList.toggle('dark-mode'); if (body.classList.contains('dark-mode')) { this.innerHTML = '<i class="fas fa-sun"></i>'; } else { this.innerHTML = '<i class="fas fa-moon"></i>'; } }); // Set random animation delay for the pulse tag document.querySelector('.tag.pulse').style.animationDelay = Math.random() + 's'; // Add some basic form validation document.getElementById('departureDate').addEventListener('change', validateDates); document.getElementById('returnDate').addEventListener('change', validateDates); function validateDates() { const departureDate = document.getElementById('departureDate').value; const returnDate = document.getElementById('returnDate').value; if (departureDate && returnDate && new Date(returnDate) < new Date(departureDate)) { alert('Return date cannot be before departure date'); document.getElementById('returnDate').value = departureDate; } } // Fallback for Font Awesome if it fails to load setTimeout(() => { const hasIcons = document.querySelector('.fas'); if (!hasIcons || window.getComputedStyle(hasIcons).fontFamily !== "Font Awesome 5 Free") { loadFallbackIcons(); } }, 1000); function loadFallbackIcons() { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; document.head.appendChild(link); } }); </script> </body> </html>
<html> <head> <title>NewsHive Search</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } :root { --primary: #6000FF; --primary-dark: #4900c7; --accent: #FF3D3D; --dark: #111111; --darker: #080808; --light: #FFFFFF; --light-gray: #f0f0f0; --mid-gray: #888888; --transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } body { background-color: var(--darker); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; color: var(--light); padding: 20px; } .container { width: 100%; max-width: 650px; margin-top: 60px; } .logo { display: flex; align-items: center; margin-bottom: 30px; } .logo h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin-left: 12px; background: linear-gradient(90deg, var(--light) 0%, #b199ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .search-container { position: relative; width: 100%; } .search-box { width: 100%; padding: 20px 60px 20px 25px; background-color: var(--dark); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 16px; font-size: 18px; color: var(--light); transition: var(--transition); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .search-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(96, 0, 255, 0.2), 0 8px 30px rgba(0, 0, 0, 0.3); } .search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--mid-gray); transition: var(--transition); pointer-events: none; } .search-box:focus + .search-icon { color: var(--primary); } .pulse { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background-color: var(--primary); opacity: 0; transition: var(--transition); pointer-events: none; } .search-box:focus ~ .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: translateY(-50%) scale(0.8); opacity: 0.6; } 70% { transform: translateY(-50%) scale(1.4); opacity: 0; } 100% { transform: translateY(-50%) scale(0.8); opacity: 0; } } .search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--dark); border-radius: 16px; margin-top: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: var(--transition); overflow: hidden; z-index: 100; } .search-dropdown.active { visibility: visible; opacity: 1; transform: translateY(0); } .dropdown-section { padding: 15px 25px; } .dropdown-section h3 { font-size: 14px; font-weight: 600; color: var(--mid-gray); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .trending-topics { display: flex; flex-wrap: wrap; gap: 10px; } .topic-tag { display: inline-block; padding: 8px 16px; background-color: rgba(96, 0, 255, 0.15); color: var(--primary); border-radius: 30px; font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); } .topic-tag:hover { background-color: rgba(96, 0, 255, 0.25); transform: translateY(-2px); } .top-stories { margin-top: 20px; } .story-item { padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; cursor: pointer; transition: var(--transition); } .story-item:hover { background-color: rgba(255, 255, 255, 0.05); } .story-meta { display: flex; align-items: center; margin-bottom: 8px; } .story-source { font-size: 12px; font-weight: 600; color: var(--primary); margin-right: 10px; } .story-time { font-size: 12px; color: var(--mid-gray); } .story-title { font-size: 16px; font-weight: 500; color: var(--light); line-height: 1.3; } .story-content { flex-grow: 1; } .story-image { width: 80px; height: 60px; border-radius: 8px; object-fit: cover; margin-left: 15px; background-color: var(--darker); } .search-footer { padding: 15px 25px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .search-footer p { font-size: 14px; color: var(--mid-gray); } .search-footer span { color: var(--primary); font-weight: 500; } @media (max-width: 600px) { .container { margin-top: 30px; } .logo h1 { font-size: 24px; } .search-box { padding: 16px 50px 16px 20px; font-size: 16px; } .dropdown-section { padding: 12px 20px; } .story-image { width: 60px; height: 45px; } .story-title { font-size: 14px; } } @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .skeleton { background: linear-gradient(to right, var(--dark) 8%, #222 18%, var(--dark) 33%); background-size: 800px 100px; animation: shimmer 1.5s infinite linear; } .highlighted { background-color: rgba(96, 0, 255, 0.2); color: var(--primary); padding: 0 2px; border-radius: 3px; } </style> </head> <body> <div class="container"> <div class="logo"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#6000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 17L12 22L22 17" stroke="#6000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12L12 17L22 12" stroke="#6000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h1>NewsHive</h1> </div> <div class="search-container"> <input type="text" class="search-box" placeholder="Search for news, topics, sources..." id="search-input"> <svg class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="pulse"></div> <div class="search-dropdown" id="search-dropdown"> <div class="dropdown-section"> <h3>Trending Topics</h3> <div class="trending-topics"> <div class="topic-tag">AI Regulation</div> <div class="topic-tag">Climate Summit</div> <div class="topic-tag">Tech Layoffs</div> <div class="topic-tag">Cryptocurrency</div> <div class="topic-tag">Global Markets</div> <div class="topic-tag">Renewable Energy</div> </div> </div> <div class="dropdown-section top-stories"> <h3>Top Stories</h3> <div class="story-item"> <div class="story-content"> <div class="story-meta"> <div class="story-source">TECH WIRE</div> <div class="story-time">2 hours ago</div> </div> <div class="story-title">New AI search algorithm delivers results <span class="highlighted">50% faster</span> than competitors</div> </div> <img src="https://images.unsplash.com/photo-1573164713619-24c711fe7878?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" class="story-image"> </div> <div class="story-item"> <div class="story-content"> <div class="story-meta"> <div class="story-source">GLOBAL PRESS</div> <div class="story-time">4 hours ago</div> </div> <div class="story-title">Breaking: Climate agreement reached with unprecedented <span class="highlighted">carbon reduction targets</span></div> </div> <img src="https://images.unsplash.com/photo-1562038969-e85c6262f3ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" class="story-image"> </div> <div class="story-item"> <div class="story-content"> <div class="story-meta"> <div class="story-source">FINANCE TODAY</div> <div class="story-time">6 hours ago</div> </div> <div class="story-title">Markets react to central bank's surprise rate decision, <span class="highlighted">tech stocks rally</span></div> </div> <img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" class="story-image"> </div> </div> <div class="search-footer"> <p>Press <span>Enter</span> to see all results</p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const searchInput = document.getElementById('search-input'); const searchDropdown = document.getElementById('search-dropdown'); const topicTags = document.querySelectorAll('.topic-tag'); const storyItems = document.querySelectorAll('.story-item'); // Toggle dropdown visibility when input is focused searchInput.addEventListener('focus', function() { searchDropdown.classList.add('active'); }); // Hide dropdown when clicking outside document.addEventListener('click', function(event) { if (!searchInput.contains(event.target) && !searchDropdown.contains(event.target)) { searchDropdown.classList.remove('active'); } }); // Handling topic tag clicks topicTags.forEach(tag => { tag.addEventListener('click', function() { searchInput.value = this.textContent; searchInput.focus(); // Animate the selection with a pulse this.style.backgroundColor = 'var(--primary)'; this.style.color = 'white'; setTimeout(() => { this.style.backgroundColor = ''; this.style.color = ''; }, 300); }); }); // Story item click animation storyItems.forEach(item => { item.addEventListener('click', function() { const title = this.querySelector('.story-title').textContent; // Extract key phrases for search const searchTerm = title.split(' ').slice(0, 3).join(' '); searchInput.value = searchTerm; searchInput.focus(); // Highlight effect this.style.backgroundColor = 'rgba(96, 0, 255, 0.1)'; setTimeout(() => { this.style.backgroundColor = ''; }, 300); }); }); // Dynamic search behavior let typingTimer; searchInput.addEventListener('input', function() { // Show dropdown when typing searchDropdown.classList.add('active'); // Update highlighted text based on search input if (searchInput.value.trim() !== '') { updateHighlightedText(searchInput.value); } // Simulate search delay and loading state clearTimeout(typingTimer); if (searchInput.value.trim() !== '') { // Add loading state storyItems.forEach(item => { item.querySelector('.story-image').classList.add('skeleton'); }); typingTimer = setTimeout(() => { // Remove loading state storyItems.forEach(item => { item.querySelector('.story-image').classList.remove('skeleton'); }); }, 500); } }); // Prevent actual form submission searchInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); // Simulate search action with visual feedback searchInput.blur(); // Pulse animation for search action const pulse = document.querySelector('.pulse'); pulse.style.opacity = '0.6'; setTimeout(() => { pulse.style.opacity = '0'; searchDropdown.classList.remove('active'); }, 300); } }); // Function to highlight matching text in story titles function updateHighlightedText(searchText) { if (!searchText) return; const regex = new RegExp(searchText, 'gi'); storyItems.forEach(item => { const titleElement = item.querySelector('.story-title'); const originalText = titleElement.textContent; if (regex.test(originalText)) { // Reset highlighted content titleElement.innerHTML = originalText.replace(regex, match => `<span class="highlighted">${match}</span>` ); } }); } // Initial animation for search icon to draw attention setTimeout(() => { const searchIcon = document.querySelector('.search-icon'); searchIcon.style.color = 'var(--primary)'; setTimeout(() => { searchIcon.style.color = ''; }, 1000); }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scholarly Repository Search</title> <style> :root { --parchment: #f5f1e8; --parchment-dark: #e8e2d6; --ink: #2a2625; --accent: #822111; --accent-light: #a5402e; --highlight: #f0e1c5; --serif: 'Baskerville', 'Libre Baskerville', 'Garamond', serif; --sans: 'Optima', 'Avenir', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--parchment); color: var(--ink); font-family: var(--serif); line-height: 1.6; padding: 20px; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-image: linear-gradient(to right, rgba(107, 90, 70, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(107, 90, 70, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .container { width: 100%; max-width: 650px; margin: 0 auto; padding: 30px; position: relative; } .scholarly-search { position: relative; width: 100%; border-radius: 8px; background-color: var(--parchment); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); padding: 30px; transition: all 0.4s ease; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23826f4c' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .logo { text-align: center; margin-bottom: 15px; } .logo h1 { font-family: var(--serif); font-weight: normal; font-size: 30px; letter-spacing: 1.2px; color: var(--accent); margin-bottom: 5px; position: relative; display: inline-block; } .logo h1::after { content: ""; position: absolute; bottom: -5px; left: 10%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); } .logo p { font-family: var(--sans); font-size: 14px; color: var(--ink); opacity: 0.8; font-style: italic; } .search-form { position: relative; margin-top: 25px; } .search-input-container { position: relative; margin-bottom: 10px; display: flex; border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: all 0.3s ease; } .search-input-container:focus-within { border-color: var(--accent); } .search-input { flex: 1; background: transparent; border: none; font-family: var(--serif); font-size: 18px; color: var(--ink); padding: 12px 0; outline: none; transition: all 0.3s ease; } .search-input::placeholder { color: rgba(42, 38, 37, 0.6); font-style: italic; transition: opacity 0.3s ease; } .search-input:focus::placeholder { opacity: 0.5; } .search-button { background: none; border: none; cursor: pointer; padding: 0 10px; color: var(--ink); opacity: 0.7; transition: all 0.3s ease; } .search-button:hover { color: var(--accent); opacity: 1; transform: scale(1.05); } .search-icon { width: 20px; height: 20px; position: relative; display: inline-block; } .search-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; } .search-icon::after { content: ""; position: absolute; top: 11px; left: 13px; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); } .advanced-toggle { font-family: var(--sans); font-size: 14px; color: var(--accent); text-decoration: none; cursor: pointer; display: inline-block; margin-right: 10px; padding: 3px 7px; transition: all 0.3s ease; border-radius: 4px; position: relative; } .advanced-toggle::after { content: ""; position: absolute; width: 0; height: 1px; bottom: 0; left: 50%; background-color: var(--accent); transition: all 0.3s ease; } .advanced-toggle:hover::after { width: 100%; left: 0; } .search-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .repository-select { font-family: var(--serif); font-size: 14px; background: transparent; border: none; color: var(--ink); cursor: pointer; padding: 3px 15px 3px 7px; position: relative; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath fill='%232a2625' d='M5 6 0 1.058 1.057 0 5 3.884 8.943 0 10 1.058 5 6Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; transition: all 0.3s; border-radius: 4px; } .repository-select:hover, .repository-select:focus { background-color: var(--parchment-dark); outline: none; } .advanced-search-panel { background-color: var(--parchment-dark); border-radius: 8px; margin-top: 15px; padding: 20px; transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1); max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); box-shadow: inset 0 2px 3px rgba(0,0,0,0.05); } .advanced-search-panel.active { max-height: 450px; opacity: 1; transform: translateY(0); padding: 20px; margin-bottom: 20px; } .search-field { margin-bottom: 15px; } .search-field label { display: block; font-family: var(--sans); font-size: 14px; margin-bottom: 5px; color: var(--ink); } .search-field select, .search-field input[type="text"], .search-field input[type="number"] { width: 100%; padding: 10px; border: 1px solid rgba(42, 38, 37, 0.2); border-radius: 4px; background-color: rgba(255, 255, 255, 0.5); font-family: var(--serif); color: var(--ink); transition: all 0.3s ease; } .search-field select:focus, .search-field input[type="text"]:focus, .search-field input[type="number"]:focus { border-color: var(--accent-light); outline: none; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 5px rgba(130, 33, 17, 0.1); } .filter-row { display: flex; gap: 15px; } .filter-row .search-field { flex: 1; } .checkbox-container { display: flex; gap: 20px; margin-bottom: 15px; } .checkbox-field { display: flex; align-items: center; gap: 5px; } .checkbox-field label { font-family: var(--serif); font-size: 14px; cursor: pointer; } .search-hints { margin-top: 20px; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--ink); opacity: 0.7; padding: 0 15px; transition: all 0.3s ease; } .search-hints:hover { opacity: 1; } .search-hints strong { color: var(--accent); font-weight: normal; } .results-preview { margin-top: 20px; overflow: hidden; max-height: 0; transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1); opacity: 0; } .results-preview.active { max-height: 500px; opacity: 1; } .result-stats { display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 14px; padding: 10px 0; border-bottom: 1px solid rgba(42, 38, 37, 0.1); margin-bottom: 15px; } .result-card { background-color: white; padding: 15px; margin-bottom: 15px; border-radius: 6px; border-left: 3px solid var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); cursor: pointer; transition: all 0.3s ease; transform-origin: center left; } .result-card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transform: translateX(2px) scale(1.01); } .result-title { font-family: var(--serif); font-size: 17px; margin-bottom: 8px; color: var(--accent); } .result-authors { font-family: var(--serif); font-size: 14px; margin-bottom: 8px; font-style: italic; } .result-abstract { font-family: var(--serif); font-size: 14px; color: var(--ink); opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .result-meta { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12px; color: var(--ink); opacity: 0.6; } .result-journal { font-style: italic; } .watermark { position: absolute; bottom: 60%; left: 50%; transform: translate(-50%, 0) rotate(-45deg); font-size: 120px; font-family: var(--serif); opacity: 0.03; pointer-events: none; white-space: nowrap; color: var(--ink); user-select: none; z-index: 0; } @media (max-width: 600px) { .container { padding: 15px; } .scholarly-search { padding: 20px 15px; } .filter-row { flex-direction: column; gap: 10px; } .checkbox-container { flex-direction: column; gap: 10px; } .search-input { font-size: 16px; } .logo h1 { font-size: 24px; } .search-tools { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Animation styles */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(130, 33, 17, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(130, 33, 17, 0); } 100% { box-shadow: 0 0 0 0 rgba(130, 33, 17, 0); } } .scholarly-search { animation: fadeIn 0.6s ease-out forwards; } .result-card { animation: fadeIn 0.4s ease-out forwards; animation-delay: calc(var(--animation-order) * 0.1s); opacity: 0; } </style> </head> <body> <div class="container"> <div class="scholarly-search"> <div class="watermark">ACADEMIA</div> <div class="logo"> <h1>Scholarly Archives</h1> <p>Explore the collective knowledge of academic repositories</p> </div> <div class="search-form"> <div class="search-input-container"> <input type="text" class="search-input" placeholder="Search for articles, authors, keywords..." id="main-search"> <button type="button" class="search-button" id="search-btn"> <span class="search-icon"></span> </button> </div> <div class="search-tools"> <a class="advanced-toggle" id="advanced-toggle">Advanced Search</a> <select class="repository-select" id="repository-select"> <option value="all">All Repositories</option> <option value="pubmed">PubMed Central</option> <option value="arxiv">arXiv</option> <option value="jstor">JSTOR</option> <option value="ieee">IEEE Xplore</option> <option value="science">Science Direct</option> </select> </div> <div class="advanced-search-panel" id="advanced-panel"> <div class="filter-row"> <div class="search-field"> <label for="author-search">Author</label> <input type="text" id="author-search" placeholder="e.g., J. Smith"> </div> <div class="search-field"> <label for="title-search">Title Contains</label> <input type="text" id="title-search" placeholder="e.g., quantum computing"> </div> </div> <div class="filter-row"> <div class="search-field"> <label for="publication-search">Journal/Publication</label> <input type="text" id="publication-search" placeholder="e.g., Nature"> </div> <div class="search-field"> <label for="field-search">Field of Study</label> <select id="field-search"> <option value="">Any Field</option> <option value="biology">Biology</option> <option value="chemistry">Chemistry</option> <option value="computer-science">Computer Science</option> <option value="physics">Physics</option> <option value="psychology">Psychology</option> <option value="medicine">Medicine</option> <option value="humanities">Humanities</option> <option value="social-sciences">Social Sciences</option> <option value="mathematics">Mathematics</option> <option value="engineering">Engineering</option> </select> </div> </div> <div class="filter-row"> <div class="search-field"> <label for="year-from">Year Range</label> <div style="display: flex; gap: 10px;"> <input type="number" id="year-from" placeholder="From" min="1800" max="2023" style="width: 50%;"> <input type="number" id="year-to" placeholder="To" min="1800" max="2023" style="width: 50%;"> </div> </div> <div class="search-field"> <label for="citation-count">Citation Count</label> <select id="citation-count"> <option value="">Any Number</option> <option value="10+">10+</option> <option value="50+">50+</option> <option value="100+">100+</option> <option value="500+">500+</option> <option value="1000+">1000+</option> </select> </div> </div> <div class="checkbox-container"> <div class="checkbox-field"> <input type="checkbox" id="peer-reviewed"> <label for="peer-reviewed">Peer Reviewed Only</label> </div> <div class="checkbox-field"> <input type="checkbox" id="full-text"> <label for="full-text">Full Text Available</label> </div> <div class="checkbox-field"> <input type="checkbox" id="open-access"> <label for="open-access">Open Access</label> </div> </div> </div> </div> <div class="search-hints"> Try using boolean operators like <strong>AND</strong>, <strong>OR</strong>, <strong>NOT</strong>, or use quotation marks for exact phrase matches </div> <div class="results-preview" id="results-preview"> <div class="result-stats"> <div>Found <strong>283</strong> results</div> <div>Sorted by: <strong>Relevance</strong></div> </div> <div class="result-card" style="--animation-order: 1"> <div class="result-title">Quantum Entanglement in Neural Network Architectures: A Critical Review</div> <div class="result-authors">Chen, J., Damasvolk, N., & Thompson, R.</div> <div class="result-abstract">This paper explores the theoretical connections between quantum entanglement phenomena and the architectural design of modern neural networks, highlighting computational parallels and implementation challenges...</div> <div class="result-meta"> <div class="result-journal">Nature Quantum Computing</div> <div class="result-year">2022</div> </div> </div> <div class="result-card" style="--animation-order: 2"> <div class="result-title">Historical Analysis of Bibliographic Methodologies in Digital Humanities</div> <div class="result-authors">Albertson, M. & Ramírez, C.</div> <div class="result-abstract">An extensive examination of how digital technologies have transformed bibliographic practices in humanities research over the past three decades, with particular focus on archival preservation techniques...</div> <div class="result-meta"> <div class="result-journal">Digital Scholarship in the Humanities</div> <div class="result-year">2021</div> </div> </div> <div class="result-card" style="--animation-order: 3"> <div class="result-title">Algorithmic Bias in Academic Search Systems: Implications for Scholarly Discovery</div> <div class="result-authors">Washington, E., Goldstein, S., & Kim, J.</div> <div class="result-abstract">This research identifies patterns of algorithmic bias in major academic search engines and repository systems, demonstrating how these biases can impact discovery of scholarly work and proposing technical remediation strategies...</div> <div class="result-meta"> <div class="result-journal">Journal of Library Metadata</div> <div class="result-year">2023</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const advancedToggle = document.getElementById('advanced-toggle'); const advancedPanel = document.getElementById('advanced-panel'); const searchBtn = document.getElementById('search-btn'); const mainSearch = document.getElementById('main-search'); const resultsPreview = document.getElementById('results-preview'); // Toggle Advanced Search Panel advancedToggle.addEventListener('click', function() { advancedPanel.classList.toggle('active'); if(advancedPanel.classList.contains('active')) { advancedToggle.textContent = 'Hide Advanced Search'; } else { advancedToggle.textContent = 'Advanced Search'; } }); // Search Function function performSearch() { // Add a small delay for the animation effect setTimeout(function() { resultsPreview.classList.add('active'); // Reset animation for result cards document.querySelectorAll('.result-card').forEach(card => { card.style.opacity = '0'; void card.offsetWidth; // Trigger reflow card.style.opacity = ''; // Reset to use the CSS animation }); }, 300); } // Event listeners for search searchBtn.addEventListener('click', performSearch); mainSearch.addEventListener('keypress', function(e) { if (e.key === 'Enter') { performSearch(); } }); // Select styling const repositorySelect = document.getElementById('repository-select'); const fieldSearch = document.getElementById('field-search'); const citationCount = document.getElementById('citation-count'); [repositorySelect, fieldSearch, citationCount].forEach(select => { select.addEventListener('focus', function() { this.style.backgroundColor = 'var(--highlight)'; }); select.addEventListener('blur', function() { this.style.backgroundColor = ''; }); }); // Search input focus effect mainSearch.addEventListener('focus', function() { this.parentElement.style.borderColor = 'var(--accent)'; setTimeout(() => { this.parentElement.style.transform = 'scale(1.005)'; this.parentElement.style.boxShadow = '0 2px 8px rgba(130, 33, 17, 0.06)'; }, 100); }); mainSearch.addEventListener('blur', function() { this.parentElement.style.borderColor = ''; this.parentElement.style.transform = ''; this.parentElement.style.boxShadow = ''; }); // Initialize with some sample placeholder const queryPlaceholders = [ "Search for articles, authors, keywords...", "Try 'climate change mitigation strategies'...", "Find papers by 'Margaret Atwood'...", "Explore 'machine learning in medicine'...", "Look for 'ancient philosophy' discussions..." ]; let placeholderIndex = 0; function rotatePlaceholders() { placeholderIndex = (placeholderIndex + 1) % queryPlaceholders.length; const currentPlaceholder = queryPlaceholders[placeholderIndex]; if (document.activeElement !== mainSearch) { // Don't change if user is typing mainSearch.placeholder = currentPlaceholder; } } // Set initial placeholder mainSearch.placeholder = queryPlaceholders[0]; // Rotate placeholders every 5 seconds setInterval(rotatePlaceholders, 5000); }); </script> </body> </html>
