OSINT Lookup

Breach

Search

body { font-family: sans-serif; margin: 0; background-color: #000; /* Fallback black background */ color: #fff; display: flex; flex-direction: column; align-items: center; min-height: 100vh; /* Ensure body is at least viewport height */ /* Swirling background effect using radial gradients */ background-image: radial-gradient(circle at 20% 20%, rgba(153, 51, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%), /* Purple swirl 1 */ radial-gradient(circle at 80% 80%, rgba(255, 102, 204, 0.15) 0%, rgba(0, 0, 0, 0) 50%), /* Pink swirl 1 */ radial-gradient(circle at 80% 20%, rgba(255, 51, 51, 0.1) 0%, rgba(0, 0, 0, 0) 50%), /* Light Red swirl 1 */ radial-gradient(circle at 20% 80%, rgba(178, 102, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%); /* Purple swirl 2 */ background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%; /* Make gradients larger than viewport */ background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; animation: swirl-motion 40s linear infinite; /* Apply animation - slower speed */ overflow: hidden; /* Prevent scrollbars from dots overflowing */ } @keyframes swirl-motion { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; } 25% { background-position: 100% 0%, 0% 100%, 100% 0%, 0% 100%; } 50% { background-position: 100% 100%, 100% 100%, 0% 0%, 0% 0%; } 75% { background-position: 0% 100%, 100% 0%, 0% 100%, 100% 0%; } 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } /* Loading Screen Styles */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 1000; /* High z-index to be on top */ display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; transition: opacity 1s ease-out; } .loading-screen.fade-out { opacity: 0; visibility: hidden; /* Hide after fade out */ } .loading-text-container { display: flex; margin-bottom: 20px; overflow: hidden; /* Clip for animation */ } .loading-breach, .loading-search { font-size: 3em; font-weight: bold; color: #ff69b4; text-shadow: 0 0 10px #ff69b4; position: relative; /* For glimmer effect */ overflow: hidden; /* Clip glimmer */ white-space: nowrap; /* Prevent text wrap */ } .loading-breach { margin-right: 0px; transform: translateX(-100vw); /* Start off-screen left */ animation: slideInBreach 1.5s ease-out forwards 0.5s, glimmer 2s linear infinite alternate 2s; /* Delay start of glimmer */ } .loading-search { margin-left: 0px; transform: translateX(100vw); /* Start off-screen right */ animation: slideInSearch 1.5s ease-out forwards 0.5s, glimmer 2s linear infinite alternate 2s; /* Delay start of glimmer */ } @keyframes slideInBreach { to { transform: translateX(0); } } @keyframes slideInSearch { to { transform: translateX(0); } } @keyframes glimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .loading-breach, .loading-search { background: linear-gradient(to right, transparent 45%, white 50%, white 55%, transparent 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; } .loading-bar-container { width: 50%; height: 10px; background-color: #333; border-radius: 5px; overflow: hidden; /* Clip loading bar */ } .loading-bar { height: 100%; width: 0%; background: linear-gradient(to right, #a0f, #ff69b4); /* Purple to pink gradient */ border-radius: 5px; animation: progressBar 2s linear forwards 3s; /* Delay start of progress bar */ } @keyframes progressBar { to { width: 100%; } } .header { text-align: center; margin-bottom: 20px; width: 100%; position: relative; /* Make header relative for icon positioning */ z-index: 2; /* Ensure header is above dots */ } .logo-text { font-size: 5em; font-weight: bold; display: inline-block; margin: 0 auto; text-align: center; margin-left: 20px; background: linear-gradient(135deg, #ff0000 20%, #ff69b4 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px #ff69b4, 0 0 30px #ff0000; transition: all 0.3s ease-in-out; cursor: pointer; } .logo-text:hover { transform: scale(1.05); text-shadow: 0 0 30px #ff69b4, 0 0 40px #ff0000; } .tagline { font-size: 0.8em; color: #999; margin-top: 5px; text-shadow: none; } .tm-symbol { font-size: 0.2em; vertical-align: top; } .container { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 20px; width: 80%; max-width: 900px; z-index: 2; /* Ensure container is above dots */ } .search-input-group { display: flex; /* Enable flexbox for input group */ margin-bottom: 10px; /* Spacing below the input group */ position: relative; /* Positioning context for dropdown */ z-index: 2; /* Ensure search input is above dots */ } .dropdown { position: relative; /* For positioning dropdown content */ overflow: hidden; /* Clip dropdown content for animation */ max-height: 35px; /* Initial height to show only the select box - adjusted */ transition: max-height 0.3s ease-out; /* Transition for slide down */ } .dropdown.open { max-height: 250px; /* Adjust max-height to fit all options - adjusted */ } #searchType { padding: 3px; /* Even smaller padding */ margin-right: 5px; /* Even smaller right margin */ border: 1px solid #555; border-radius: 5px; background-color: rgba(51, 51, 51, 0.8); color: #fff; font-size: 0.75em; /* Even smaller font-size */ height: fit-content; align-self: center; /* Vertically align with input */ cursor: pointer; /* Indicate dropdown functionality */ transition: all 0.3s ease-in-out; /* Smooth transition for dropdown itself */ overflow: visible; /* Ensure options are visible when dropdown expands */ } #searchType:focus, #searchType:hover { background-color: rgba(70, 70, 70, 0.9); /* Slightly lighter on focus/hover */ box-shadow: 0 0 5px rgba(160, 0, 255, 0.5); /* Subtle glow on focus/hover */ transform: scale(1.03); /* Slight scale up on focus/hover */ } input[type="text"] { padding: 10px; margin-bottom: 0; /* Remove bottom margin, spacing is on input group */ border: 1px solid #555; border-radius: 5px; flex-grow: 1; background-color: rgba(51, 51, 51, 0.8); color: #fff; background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.8) 0%, rgba(60, 60, 60, 0.7) 30%, rgba(45, 45, 45, 0.7) 70%, rgba(34, 34, 34, 0.8) 100% ); box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset; backdrop-filter: blur(5px); text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); margin-left: 0; } .buttons-container { display: flex; justify-content: space-between; } button { padding: 8px 12px; /* Slightly smaller padding */ border: none; border-radius: 5px; background-color: rgba(170, 0, 255, 0.7); color: white; cursor: pointer; flex-grow: 1; margin: 0 5px; background-image: linear-gradient(to bottom, rgba(170, 0, 255, 0.7) 0%, rgba(150, 0, 230, 0.6) 40%, rgba(110, 0, 190, 0.6) 70%, rgba(128, 0, 128, 0.7) 100% ); box-shadow: 0 2px 5px rgba(0,0,0,0.6); backdrop-filter: blur(5px); box-shadow: 0 0 15px 2px rgba(170, 0, 255, 0.7); text-shadow: 0 0 3px rgba(255, 255, 255, 0.5); transition: all 0.3s ease-in-out; /* Smooth transition for all properties */ font-size: 0.95em; /* Optional: slightly smaller font size if needed */ } .buttons-container button:first-child { margin-left: 0; } .buttons-container button:last-child { margin-right: 0; } button:hover { transform: scale(1.05); /* Grow by 5% on hover */ background-color: rgba(144, 0, 255, 0.7); background-image: linear-gradient(to bottom, rgba(144, 0, 255, 0.7) 0%, rgba(130, 0, 210, 0.6) 40%, rgba(90, 0, 170, 0.6) 70%, rgba(112, 0, 112, 0.7) 100% ); box-shadow: 0 0 20px 5px rgba(144, 0, 255, 0.8); /* Keep glow, but ensure smooth transition */ } #results { background-color: rgba(34, 34, 34, 0.7); padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); width: 80%; max-width: 900px; z-index: 2; /* Ensure results are above dots */ backdrop-filter: blur(10px); /* Apply blur effect */ } #results h2 { margin-top: 0; text-align: center; } #results h3 { margin-top: 0; color: #fff; } #osintcatData, #snusbaseData { white-space: pre-wrap; background-color: rgba(68, 68, 68, 0.7); color: #eee; padding: 10px; border-radius: 5px; overflow-x: auto; border: 1px solid #555; background-image: linear-gradient(to bottom, rgba(68, 68, 68, 0.7) 0%, rgba(75, 75, 75, 0.6) 30%, rgba(60, 60, 60, 0.6) 70%, rgba(59, 59, 59, 0.7) 100% ); box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; backdrop-filter: blur(5px); text-shadow: 0 0 2px rgba(220, 220, 220, 0.2); } .settings-container { position: absolute; /* Position menu below icon */ display: inline-block; /* Allows width to be determined by content */ top: 20px; /* Distance from the top */ left: 20px; /* Distance from the left */ margin-left: 0; /* Remove negative margin */ z-index: 3; /* Ensure settings are above search and results */ } .settings-icon { position: relative; /* Take out absolute positioning */ font-size: 2.5em; color: #fff; cursor: pointer; opacity: 0.7; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out, transform 0.5s linear; /* Adjusted animation duration */ text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); display: inline-block; /* Needed for transform to work correctly */ z-index: 3; /* Ensure settings icon is above search and results */ } .settings-icon:hover { opacity: 1; transform: scale(1.1); text-shadow: 0 0 15px rgba(255, 255, 255, 0.7); } .settings-icon.spinning { animation-duration: 0.5s; /* Spin animation duration set to 0.5s */ animation-name: spin; /* Apply spin animation - slower 2s duration */ animation-iteration-count: 1; /* Spin only once */ animation-timing-function: linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } /* Spin 360 degrees (1 rotation) */ } .footer { text-align: center; /* Center the text */ color: #999; /* Gray color as requested */ font-size: 0.7em; /* Small font size as requested */ margin-top: 20px; /* Add some space above the footer */ margin-bottom: 10px; /* Add some space below the footer */ z-index: 2; /* Ensure footer is above dots */ } .settings-menu { position: absolute; /* Position menu below icon */ top: calc(100% + 5px); /* Position right below the icon, adjust as needed */ left: 0; background-color: #222; border-radius: 5px; padding: 10px 0; width: 150px; /* Adjust width as needed */ opacity: 0; /* Initially hidden */ visibility: hidden; /* Initially hidden */ transform: translateY(-10px); /* Start slightly above its natural position */ transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out; /* Smooth transitions */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); z-index: 3; /* Ensure settings menu is above search and results */ } .settings-menu.show { opacity: 1; /* Make visible when shown */ visibility: visible; /* Make visible when shown */ transform: translateY(0); /* Slide down to its natural position */ } .settings-menu-item { display: block; /* Stack menu items vertically */ padding: 8px 15px; text-decoration: none; color: #eee; font-size: 0.9em; transition: background-color 0.2s ease-in-out; } .settings-menu-item:hover { background-color: #333; /* Darker background on hover */ } #loadingIndicator { display: none; /* Initially hidden */ margin-top: 10px; text-align: center; z-index: 2; /* Ensure loading indicator is above dots */ } .loading-text { color: #fff; margin-right: 10px; } .loading-line { display: inline-block; width: 0%; /* Start with 0 width */ height: 4px; background: linear-gradient(to right, #a0f, #ff69b4); /* Purple to pink gradient */ border-radius: 2px; transition: width 1s linear; /* Animate width over 1 second */ animation: loading-fade 1s linear infinite alternate; /* Fade animation */ } @keyframes loading-fade { 0% { opacity: 0.4; } 100% { opacity: 1; } } /* Dots effect styles */ .dots-container { position: fixed; /* Fixed position to cover the whole viewport */ top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Make sure dots don't interfere with clicks */ z-index: 1; /* Place dots behind other content */ } .dot { position: absolute; bottom: -10px; /* Start below the bottom of the screen */ width: 6px; height: 6px; border-radius: 50%; background-color: white; /* Base color, will be overridden by JS */ opacity: 0; /* Start invisible */ animation: floatAndFade 8s linear infinite; /* Animation name and duration */ } @keyframes floatAndFade { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; /* Fade in quickly */ } 90% { opacity: 1; /* Stay visible for most of the animation */ } 100% { transform: translateY(-100vh); /* Move to the top of the viewport */ opacity: 0; /* Fade out at the end */ } } document.addEventListener('DOMContentLoaded', () => { const searchInput = document.getElementById('searchInput'); const searchButton = document.getElementById('searchButton'); const searchDataDisplay = document.getElementById('searchData'); const loadingIndicator = document.getElementById('loadingIndicator'); const loadingLine = document.querySelector('.loading-line'); const searchTypeDropdown = document.getElementById('searchType'); const dropdownContainer = document.querySelector('.dropdown'); const settingsIcon = document.getElementById('settingsIcon'); // Get settings icon const settingsMenu = document.getElementById('settingsMenu'); // Get settings menu const settingsContainer = document.getElementById('settingsContainer'); // Get settings container const dotsContainer = document.querySelector('.dots-container'); // Get dots container const loadingScreen = document.getElementById('loadingScreen'); const mainContent = document.getElementById('mainContent'); const loadingBar = document.getElementById('loadingBar'); const loadingBreachText = document.getElementById('loadingBreach'); const loadingSearchText = document.getElementById('loadingSearch'); loadingIndicator.style.display = 'none'; // Ensure loading indicator is hidden on page load settingsMenu.classList.remove('show'); // Ensure settings menu is hidden on page load searchTypeDropdown.addEventListener('focus', () => { dropdownContainer.classList.add('open'); }); searchTypeDropdown.addEventListener('blur', () => { dropdownContainer.classList.remove('open'); }); settingsContainer.addEventListener('click', () => { settingsMenu.classList.toggle('show'); // Toggle menu visibility settingsIcon.classList.add('spinning'); // Start spinning animation // Remove spinning class after animation completes setTimeout(() => { settingsIcon.classList.remove('spinning'); }, 1000); // 1000ms = 1 second (animation duration) }); searchButton.addEventListener('click', () => { const query = searchInput.value; const searchType = searchTypeDropdown.value; if (query) { searchDataDisplay.innerHTML = ''; // Clear previous results container loadingIndicator.style.display = 'block'; loadingLine.style.width = '0%'; requestAnimationFrame(() => { loadingLine.style.width = '100%'; }); searchQuery(query, searchType); } else { alert('Please enter a search query.'); } }); async function searchQuery(query, searchType) { try { const response = await fetch(`/api/snusbase?query=${encodeURIComponent(query)}&type=${encodeURIComponent(searchType)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (Array.isArray(data)) { // Check if data is an array (of results) searchDataDisplay.innerHTML = ''; // Clear "Loading..." text if needed data.forEach(result => { // Iterate through each result item const resultBox = document.createElement('div'); resultBox.classList.add('result-box'); // Example: Displaying source, email, password (adjust based on your API response structure) let resultHTML = ''; for (const key in result) { if (result.hasOwnProperty(key)) { resultHTML += `

${key}:

${result[key]}

`; } } resultBox.innerHTML = resultHTML; searchDataDisplay.appendChild(resultBox); // Append box to results container }); } else { // If data is not an array (e.g., error message, or single result object), handle accordingly searchDataDisplay.textContent = JSON.stringify(data, null, 2); // Fallback to JSON display } } catch (error) { console.error('Error fetching data:', error); searchDataDisplay.textContent = 'Error fetching data.'; } finally { loadingIndicator.style.display = 'none'; loadingLine.style.width = '0%'; } } // Function to create a dot function createDot() { const dot = document.createElement('div'); dot.classList.add('dot'); // Random color from pink, purple, gray const colors = ['#ff69b4', '#a0f', '#888']; const color = colors[Math.floor(Math.random() * colors.length)]; dot.style.backgroundColor = color; dot.style.boxShadow = `0 0 10px 2px ${color}`; // Glowing effect // Random horizontal position dot.style.left = `${Math.random() * 100}vw`; // Random animation delay for staggered effect dot.style.animationDelay = `${Math.random() * 3}s`; dotsContainer.appendChild(dot); // Remove dot after animation completes to prevent buildup dot.addEventListener('animationend', () => { dot.remove(); }); } // Create a new dot every so often setInterval(createDot, 300); // Adjust interval as needed for dot density // Loading screen logic loadingBar.addEventListener('animationend', () => { // Shorten text and change logo loadingBreachText.textContent = 'B'; loadingSearchText.textContent = 'S'; loadingBreachText.style.animation = 'none'; // Remove glimmer animation loadingSearchText.style.animation = 'none'; // Remove glimmer animation loadingBreachText.style.background = 'linear-gradient(135deg, #ff0000 20%, #ff69b4 80%)'; // Set logo gradient loadingSearchText.style.background = 'linear-gradient(135deg, #ff0000 20%, #ff69b4 80%)'; // Set logo gradient loadingBreachText.style.webkitBackgroundClip = 'text'; loadingSearchText.style.webkitBackgroundClip = 'text'; loadingBreachText.style.webkitTextFillColor = 'transparent'; loadingSearchText.style.webkitTextFillColor = 'transparent'; loadingBreachText.style.textShadow = '0 0 20px #ff69b4, 0 0 30px #ff0000'; loadingSearchText.style.textShadow = '0 0 20px #ff69b4, 0 0 30px #ff0000'; loadingBreachText.style.fontSize = '5em'; loadingSearchText.style.fontSize = '5em'; setTimeout(() => { loadingScreen.classList.add('fade-out'); // Fade out loading screen mainContent.style.display = 'flex'; // Show main content loadingScreen.addEventListener('transitionend', () => { loadingScreen.style.display = 'none'; // Hide loading screen completely }, { once: true }); // Remove listener after execution }, 500); // Delay before fade out and main content display }); }); { "name": "BreachSearch", "version": "1.0.0", "description": "Osinting...", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.17.1" } } const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); app.get('/api/snusbase', async (req, res) => { const query = req.query.query; const searchType = req.query.type; // Get search type from query parameters if (!query) { return res.status(400).send('Query parameter is required.'); } if (!searchType) { return res.status(400).send('Search type parameter is required.'); } try { // TODO: Implement actual Snusbase API call here, using searchType and query // Replace this with your actual API call using node-fetch or similar library // Ensure you handle your API keys securely // Placeholder data - now returns an array of result objects const snusbaseData = [ { "source": "Snusbase Example 1", "query": query, "type": searchType, "field1": "example data 1", "field2": "more example data 1" }, { "source": "Snusbase Example 2", "query": query, "type": searchType, "field1": "example data 2", "field2": "more example data 2" } ]; res.json(snusbaseData); } catch (error) { console.error('Error calling API:', error); res.status(500).send('Error fetching data from API'); } }); app.use(express.static('.')); // Serve static files from the current directory app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); });