integrate this by creating a centralized placeholderquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SquADRON GRIT Search Aggregator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --primary-color: #5d5d5d; --secondary-color: #8b0000; --background: #1a1a1a; --text-color: #e0e0e0; --panel-bg: #2a2a2a; --result-bg: #333333; --border-color: #444444; } body { font-family: 'Courier New', monospace; margin: 0; padding: 0; background: var(--background); color: var(--text-color); transition: all 0.3s ease; } /* Military Typing Effect */
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--secondary-color) } } .typing-text { overflow: hidden; border-right: .15em solid var(--secondary-color); white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } /* Hamburger Menu */ .hamburger { position: fixed; top: 20px; left: 20px; z-index: 1000; cursor: pointer; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--panel-bg); border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: all 0.3s ease; border: 1px solid var(--border-color); } .hamburger:hover { transform: scale(1.1); background: #3a3a3a; } .hamburger div { width: 20px; height: 2px; background: var(--text-color); margin: 3px 0; transition: all 0.3s ease; } .hamburger.active div:nth-child(1) { transform: translateY(5px) rotate(45deg); } .hamburger.active div:nth-child(2) { opacity: 0; } .hamburger.active div:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Search Engines Panel */ .engines-panel { position: fixed; left: -400px; top: 0; width: 400px; height: 100vh; background: var(--panel-bg); box-shadow: 5px 0 15px rgba(0,0,0,0.3); transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); overflow-y: auto; padding: 20px; z-index: 999; border-right: 1px solid var(--border-color); } .engines-panel.active { left: 0; } .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; } .panel-header h2 { margin: 0; font-size: 1.4rem; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 1px; } .panel-header i { color: var(--text-color); } .search-engine-input { width: 100%; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem; margin-bottom: 15px; outline: none; transition: all 0.3s ease; background: #3a3a3a; color: var(--text-color); font-family: 'Courier New', monospace; } .search-engine-input:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.3); } .engine-categories { display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; } .category-btn { padding: 5px 12px; background: #3a3a3a; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; color: var(--text-color); font-family: 'Courier New', monospace; text-transform: uppercase; letter-spacing: 1px; } .category-btn.active { background: var(--secondary-color); color: white; border-color: #6b0000; } .category-btn:hover { background: #4a4a4a; } .engine-list { display: grid; grid-template-columns: 1fr; gap: 10px; } .engine-item { padding: 12px 15px; border-radius: 4px; background: #3a3a3a; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-color); } .engine-item:hover { background: #4a4a4a; transform: translateX(5px); box-shadow: 2px 2px 5px rgba(0,0,0,0.2); } .engine-item.active { background: rgba(139, 0, 0, 0.3); border-left: 3px solid var(--secondary-color); } .engine-icon { width: 24px; height: 24px; object-fit: contain; border-radius: 2px; } .engine-name { font-weight: 500; font-size: 0.95rem; } /* Main Search Container */ .search-container { max-width: 800px; margin: 2rem auto; padding: 2rem; background: var(--panel-bg); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); margin-left: 50px; transition: all 0.3s ease; border: 1px solid var(--border-color); } .search-container.panel-active { margin-left: 420px; } .search-header { text-align: center; margin-bottom: 2rem; } .search-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 3px; font-weight: bold; } .search-header p { color: #aaa; margin-top: 0; font-size: 0.9rem; letter-spacing: 1px; } .current-engine { display: inline-block; padding: 5px 15px; background: rgba(139, 0, 0, 0.3); border-radius: 4px; font-size: 0.9rem; margin-top: 10px; color: var(--secondary-color); border: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 1px; } .search-box { display: flex; gap: 1rem; margin-bottom: 1.5rem; } #searchInput { flex: 1; padding: 1rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; transition: all 0.3s ease; background: #3a3a3a; color: var(--text-color); font-family: 'Courier New', monospace; } #searchInput:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.3); outline: none; } .search-button { padding: 1rem 2rem; background: var(--secondary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; display: flex; align-items: center; gap: 8px; font-family: 'Courier New', monospace; text-transform: uppercase; letter-spacing: 1px; } .search-button:hover { background: #6b0000; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .search-button:active { transform: translateY(0); } /* Results Container */ .results-container { margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem; } .result-frame { width: 100%; height: 500px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--result-bg); } .result-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #3a3a3a; border-bottom: 1px solid var(--border-color); } .result-title { font-size: 0.9rem; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 1px; } .result-close { background: none; border: none; color: var(--text-color); cursor: pointer; font-size: 1rem; } .result-content { height: calc(100% - 40px); width: 100%; border: none; } /* Placeholder for mobile */ .mobile-placeholder { display: none; text-align: center; padding: 2rem; } .mobile-placeholder h2 { color: var(--secondary-color); text-transform: uppercase; letter-spacing: 2px; } /* Responsive Design */
@media (max-width: 768px) { .engines-panel { width: 300px; left: -300px; } .engines-panel.active { left: 0; } .search-container { margin-left: 20px; padding: 1.5rem; } .search-container.panel-active { margin-left: 320px; } .search-box { flex-direction: column; } .search-button { width: 100%; justify-content: center; } .search-header h1 { font-size: 1.8rem; } }
@media (max-width: 480px) { .engines-panel { width: 100%; left: -100%; } .engines-panel.active { left: 0; } .search-container { display: none; } .mobile-placeholder { display: block; } .search-container.panel-active { opacity: 0.3; pointer-events: none; } .result-frame { height: 300px; } } </style> </head> <body> <!-- Hamburger Menu --> <div class="hamburger" onclick="toggleEnginePanel()"> <div></div> <div></div> <div></div> </div> <!-- Search Engines Panel --> <div class="engines-panel" id="enginePanel"> <div class="panel-header"> <h2>SquADRON Engines</h2> <i class="fas fa-times" onclick="toggleEnginePanel()" style="cursor:pointer;"></i> </div> <input type="text" class="search-engine-input" placeholder="Search for engines..." id="engineSearch"> <div class="engine-categories" id="engineCategories"> <button class="category-btn active" data-category="all">All</button> <button class="category-btn" data-category="general">General</button> <button class="category-btn" data-category="privacy">Stealth</button> <button class="category-btn" data-category="academic">Intel</button> <button class="category-btn" data-category="multimedia">Recon</button> <button class="category-btn" data-category="regional">Local</button> </div> <div class="engine-list" id="engineList"></div> </div> <!-- Mobile Placeholder (shown only on mobile) --> <div class="mobile-placeholder"> <h2 class="typing-text">SquADRON GRIT</h2> <p>Search Aggregator - Desktop Mode Required</p> </div> <!-- Main Search Container (hidden on mobile) --> <div class="search-container" id="searchContainer"> <div class="search-header"> <h1>SquADRON GRIT</h1> <p>Advanced Search Aggregation System</p> <div class="current-engine" id="currentEngine">Google</div> </div> <div class="search-box"> <input type="text" id="searchInput" placeholder="Enter search query..."> <button class="search-button" onclick="handleSearch()"> <i class="fas fa-search"></i> Execute </button> </div> <!-- Results Container --> <div class="results-container" id="resultsContainer" style="display: none;"> <div class="result-frame"> <div class="result-header"> <div class="result-title" id="resultTitle">Search Results</div> <button class="result-close" onclick="closeResults()"><i class="fas fa-times"></i></button> </div> <iframe class="result-content" id="resultContent" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe> </div> </div> </div> <script> // Complete Search Engines Data const searchEngines = [ { name: "All the Internet", url: "https://www.alltheinternet.com/search?q=", category: "general" }, { name: "AltaVista", url: "https://www.altavistasearchengine.com/search?q=", category: "general" }, { name: "Andi", url: "https://andisearch.com/?q=", category: "privacy" }, { name: "AOL Search", url: "https://search.aol.com/aol/search?q=", category: "general" }, { name: "Archive", url: "https://archive.org/search?query=", category: "academic" }, { name: "Ask", url: "https://www.ask.com/web?q=", category: "general" }, { name: "Baidu", url: "https://www.baidu.com/s?wd=", category: "regional" }, { name: "Biznar", url: "https://biznar.com/biznar/desktop/en/search.html?q=", category: "business" }, { name: "Brave", url: "https://search.brave.com/search?q=", category: "privacy" }, { name: "Carrot2", url: "https://search.carrot2.org/#/search/web/", category: "general" }, { name: "Choosito", url: "https://www.choosito.com/search?q=", category: "academic" }, { name: "Dogpile", url: "https://www.dogpile.com/serp?q=", category: "general" }, { name: "DuckDuckGo", url: "https://duckduckgo.com/?q=", category: "privacy" }, { name: "Easy Seek", url: "https://www.easyseek.com/search.php?q=", category: "general" }, { name: "Ecosia", url: "https://www.ecosia.org/search?q=", category: "general" }, { name: "eFind", url: "https://www.efind.com/search/?q=", category: "general" }, { name: "Ekoru", url: "https://www.ekoru.org/?q=", category: "general" }, { name: "Entireweb", url: "https://www.entireweb.com/search/?q=", category: "general" }, { name: "eTools", url: "https://www.etools.ch/search.do?q=", category: "general" }, { name: "Excite", url: "https://results.excite.com/serp?q=", category: "general" }, { name: "Find Software", url: "https://www.findsoftware.com/search/?q=", category: "tech" }, { name: "Fireball", url: "https://www.fireball.de/suche?q=", category: "regional" }, { name: "Freespoke", url: "https://www.freespoke.com/search?q=", category: "general" }, { name: "Ghostery", url: "https://ghosterysearch.com/search?q=", category: "privacy" }, { name: "Gibiru", url: "https://gibiru.com/results.html?q=", category: "privacy" }, { name: "Gigablast", url: "https://www.gigablast.com/search?q=", category: "general" }, { name: "Givero", url: "https://www.givero.com/search?q=", category: "general" }, { name: "GoGoPrivate", url: "https://www.gogoprivate.com/search?q=", category: "privacy" }, { name: "Goo", url: "https://search.goo.ne.jp/web.jsp?q=", category: "regional" }, { name: "Good", url: "https://www.good-search.org/search?q=", category: "general" }, { name: "Goodsearch", url: "https://www.goodsearch.com/search-web?q=", category: "general" }, { name: "Google", url: "https://www.google.com/search?q=", category: "general" }, { name: "iSeek", url: "https://www.iseek.com/#/search?q=", category: "academic" }, { name: "iZito", url: "https://www.izito.com/?q=", category: "general" }, { name: "Jeeves", url: "https://www.ask.com/web?q=", category: "general" }, { name: "Kiddle", url: "https://www.kiddle.co/s.php?q=", category: "kids" }, { name: "LibreX", url: "https://librex.beparanoid.de/search?q=", category: "privacy" }, { name: "Lilo", url: "https://search.lilo.org/results.php?q=", category: "general" }, { name: "Lukol", url: "https://www.lukol.com/search?q=", category: "privacy" }, { name: "Lycos", url: "https://search.lycos.com/web/?q=", category: "general" }, { name: "MetaCrawler", url: "https://www.metacrawler.com/serp?q=", category: "general" }, { name: "MetaGer", url: "https://metager.org/meta/meta.ger3?eingabe=", category: "privacy" }, { name: "Bing", url: "https://www.bing.com/search?q=", category: "general" }, { name: "Mojeek", url: "https://www.mojeek.com/search?q=", category: "privacy" }, { name: "Monster Crawler", url: "https://www.monstercrawler.com/search?q=", category: "general" }, { name: "MyAllSearch", url: "https://www.myallsearch.com/search?q=", category: "general" }, { name: "Naver", url: "https://search.naver.com/search.naver?query=", category: "regional" }, { name: "Neeva", url: "https://neeva.com/search?q=", category: "general" }, { name: "OpenMD", url: "https://openmd.com/search?q=", category: "medical" }, { name: "Openverse", url: "https://wordpress.org/openverse/search/?q=", category: "multimedia" }, { name: "Petal Search", url: "https://petalsearch.com/search?query=", category: "general" }, { name: "Police Buddy", url: "https://www.policebuddy.com/search?q=", category: "specialized" }, { name: "Popular Search Engines", url: "https://www.popularsearchengines.com/search?q=", category: "meta" }, { name: "Presearch", url: "https://presearch.com/search?q=", category: "privacy" }, { name: "Qmamu", url: "https://www.qmamu.com/search?q=", category: "general" }, { name: "Qwant", url: "https://www.qwant.com/?q=", category: "privacy" }, { name: "Result Hunter", url: "https://www.resulthunter.com/search?q=", category: "general" }, { name: "Right Dao", url: "https://www.rightdao.com/search?q=", category: "general" }, { name: "SearchBuddy", url: "https://www.searchbuddy.com/search?q=", category: "general" }, { name: "Search Encrypt", url: "https://www.searchencrypt.com/search?q=", category: "privacy" }, { name: "Search Geek", url: "https://www.searchgeek.com/search?q=", category: "general" }, { name: "Search Raven", url: "https://www.searchraven.com/search?q=", category: "general" }, { name: "Search Haven", url: "https://www.searchhaven.com/search?q=", category: "general" }, { name: "Search Here", url: "https://www.search-here.net/search?q=", category: "general" }, { name: "Search Thing", url: "https://www.searchthing.com/search?q=", category: "general" }, { name: "Search Tool", url: "https://www.searchtool.com/search?q=", category: "general" }, { name: "Searchalot", url: "https://www.searchalot.com/search?q=", category: "general" }, { name: "SearchCode", url: "https://searchcode.com/?q=", category: "tech" }, { name: "Startpage", url: "https://www.startpage.com/do/search?q=", category: "privacy" }, { name: "StartSiden", url: "https://www.startsiden.no/sok?q=", category: "regional" }, { name: "Swisscows", url: "https://swisscows.com/web?query=", category: "privacy" }, { name: "Torry", url: "https://www.torry.io/search?q=", category: "general" }, { name: "Wiki Buddy", url: "https://www.wikibuddy.com/search?q=", category: "reference" }, { name: "WolframAlpha", url: "https://www.wolframalpha.com/input/?i=", category: "academic" }, { name: "Yahoo", url: "https://search.yahoo.com/search?p=", category: "general" }, { name: "Yandex", url: "https://yandex.com/search/?text=", category: "regional" }, { name: "Yelliot", url: "https://www.yelliot.com/search?q=", category: "general" }, { name: "Yippy", url: "https://www.yippy.com/search?query=", category: "general" }, { name: "YouCare", url: "https://youcare.world/search?q=", category: "general" }, { name: "ZapMeta", url: "https://www.zapmeta.com/search?q=", category: "general" }, { name: "4Search", url: "https://www.4search.com/search?q=", category: "general" }, { name: "99 Search Engines", url: "https://www.99searchengines.com/search?q=", category: "meta" } ]; // Current active engine let activeEngine = searchEngines.find(engine => engine.name === "Google"); let currentCategory = "all"; // Initialize the engine list function initEngineList() { const list = document.getElementById('engineList'); list.innerHTML = ''; const filteredEngines = currentCategory === "all" ? searchEngines : searchEngines.filter(engine => engine.category === currentCategory); filteredEngines.forEach(engine => { const div = document.createElement('div'); div.className = `engine-item ${engine.name === activeEngine.name ? 'active' : ''}`; div.innerHTML = ` <img src="https://www.google.com/s2/favicons?domain=${engine.url.split('/')[2]}" class="engine-icon" alt="${engine.name}"> <span class="engine-name">${engine.name}</span> `; div.onclick = () => selectEngine(engine); list.appendChild(div); }); } // Select a search engine function selectEngine(engine) { activeEngine = engine; updateActiveEngineDisplay(); initEngineList(); toggleEnginePanel(); localStorage.setItem('lastUsedEngine', JSON.stringify(engine)); } // Update the current engine display function updateActiveEngineDisplay() { document.getElementById('currentEngine').textContent = activeEngine.name; } // Toggle the engine panel function toggleEnginePanel() { const panel = document.getElementById('enginePanel'); const hamburger = document.querySelector('.hamburger'); const searchContainer = document.getElementById('searchContainer'); panel.classList.toggle('active'); hamburger.classList.toggle('active'); searchContainer.classList.toggle('panel-active'); } // Handle search function handleSearch() { const query = document.getElementById('searchInput').value.trim(); if (!query) return; const searchUrl = `${activeEngine.url}${encodeURIComponent(query)}`; // Display results in the iframe document.getElementById('resultTitle').textContent = `${activeEngine.name} Results`; document.getElementById('resultContent').src = searchUrl; document.getElementById('resultsContainer').style.display = 'block'; // Scroll to results document.getElementById('resultsContainer').scrollIntoView({ behavior: 'smooth' }); } // Close results function closeResults() { document.getElementById('resultsContainer').style.display = 'none'; document.getElementById('resultContent').src = ''; } // Filter engines by search document.getElementById('engineSearch').addEventListener('input', (e) => { const searchTerm = e.target.value.toLowerCase(); const items = document.querySelectorAll('.engine-item'); items.forEach(item => { const name = item.querySelector('.engine-name').textContent.toLowerCase(); item.style.display = name.includes(searchTerm) ? 'flex' : 'none'; }); }); // Filter by category document.querySelectorAll('.category-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentCategory = btn.dataset.category; initEngineList(); }); }); // Handle Enter key document.getElementById('searchInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSearch(); }); // Initialize on load window.addEventListener('load', () => { // Show mobile placeholder on mobile devices if (window.innerWidth <= 480) { document.getElementById('searchContainer').style.display = 'none'; document.querySelector('.mobile-placeholder').style.display = 'block'; } else { document.getElementById('searchContainer').style.display = 'block'; document.querySelector('.mobile-placeholder').style.display = 'none'; } // Load last used engine from localStorage const lastUsed = localStorage.getItem('lastUsedEngine'); if (lastUsed) { try { activeEngine = JSON.parse(lastUsed); } catch (e) { console.error("Error loading last used engine", e); } } initEngineList(); updateActiveEngineDisplay(); }); // Handle window resize window.addEventListener('resize', () => { if (window.innerWidth <= 480) { document.getElementById('searchContainer').style.display = 'none'; document.querySelector('.mobile-placeholder').style.display = 'block'; } else { document.getElementById('searchContainer').style.display = 'block'; document.querySelector('.mobile-placeholder').style.display = 'none'; } }); </script> </body> </html> - Follow Up Deployment
