index.html

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cypher OSINT Search Engine</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.19.0/cytoscape.min.js"></script>
  <style>
    body {
      font-family: 'Courier New', monospace;
      background-color: #0d1b2a;
      color: #00ff00;
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    #search-container {
      margin-bottom: 20px;
    }
    #search-input, #phone-input {
      padding: 10px;
      font-size: 16px;
      background-color: #1b263b;
      color: #00ff00;
      border: 2px solid #415a77;
      border-radius: 5px;
      margin: 5px;
    }
    #search-btn, #phone-search-btn {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #415a77;
      color: #00ff00;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 5px;
    }
    #search-btn:hover, #phone-search-btn:hover {
      background-color: #778da9;
    }
    #cy {
      width: 100%;
      height: 600px;
      background-color: #1b263b;
      border: 2px solid #415a77;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>Cypher OSINT Search Engine</h1>
  <p>Search for social media data, phone numbers, and map connections.</p>
  
  <div id="search-container">
    <input type="text" id="search-input" placeholder="Enter username (e.g., cypher)">
    <button id="search-btn" onclick="searchUser()">Search by Username</button>
    <br>
    <input type="text" id="phone-input" placeholder="Enter phone number (e.g., +1234567890)">
    <button id="phone-search-btn" onclick="searchPhone()">Search by Phone</button>
  </div>
  
  <div id="cy"></div>

  <script>
    // Sample social media data with phone numbers and face data (simulating pre-fetched OSINT data)
    const osintData = {
      users: {
        "cypher": {
          platform: "Twitter",
          followers: ["user1", "user2", "user3"],
          posts: ["Post 1: Hacking tips", "Post 2: CTF writeup"],
          phone: "+1234567890",
          faceData: { features: "simulated_face_id_1", imageUrl: "simulated_image_1" }
        },
        "user1": {
          platform: "Instagram",
          followers: ["cypher", "user4"],
          posts: ["Post 1: Cybersecurity"],
          phone: "+0987654321",
          faceData: { features: "simulated_face_id_2", imageUrl: "simulated_image_2" }
        },
        "user2": {
          platform: "Twitter",
          followers: ["cypher"],
          posts: ["Post 1: Red teaming"],
          phone: "+1122334455",
          faceData: { features: "simulated_face_id_3", imageUrl: "simulated_image_3" }
        }
      },
      phoneToUser: {
        "+1234567890": "cypher",
        "+0987654321": "user1",
        "+1122334455": "user2"
      }
    };

    // Initialize Cytoscape.js graph
    let cy = cytoscape({
      container: document.getElementById('cy'),
      style: [
        {
          selector: 'node',
          style: {
            'background-color': '#00ff00',
            'label': 'data(id)',
            'color': '#ffffff',
            'text-valign': 'center',
            'text-halign': 'center',
            'font-size': '12px'
          }
        },
        {
          selector: 'node[type="phone"]',
          style: {
            'background-color': '#ff00ff',
            'shape': 'diamond'
          }
        },
        {
          selector: 'node[type="face"]',
          style: {
            'background-color': '#00ffff',
            'shape': 'ellipse'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': 2,
            'line-color': '#415a77',
            'target-arrow-color': '#415a77',
            'target-arrow-shape': 'triangle',
            'curve-style': 'bezier'
          }
        }
      ],
      layout: {
        name: 'grid',
        rows: 1
      }
    });

    // Function to search and map user data by username
    function searchUser() {
      const username = document.getElementById('search-input').value.toLowerCase();
      if (!osintData.users[username]) {
        alert('User not found in dataset.');
        return;
      }

      // Clear previous graph
      cy.elements().remove();

      // Add user node
      cy.add({ group: 'nodes', data: { id: username } });

      // Add follower nodes and edges
      const userData = osintData.users[username];
      userData.followers.forEach(follower => {
        cy.add({ group: 'nodes', data: { id: follower } });
        cy.add({ group: 'edges', data: { source: username, target: follower } });
      });

      // Add posts as nodes and edges
      userData.posts.forEach((post, index) => {
        const postId = `${username}-post-${index}`;
        cy.add({ group: 'nodes', data: { id: postId, label: post } });
        cy.add({ group: 'edges', data: { source: username, target: postId } });
      });

      // Add phone number node and edge
      if (userData.phone) {
        cy.add({ group: 'nodes', data: { id: userData.phone, type: 'phone' } });
        cy.add({ group: 'edges', data: { source: username, target: userData.phone } });
      }

      // Add face data node and edge
      if (userData.faceData) {
        const faceId = `${username}-face`;
        cy.add({ group: 'nodes', data: { id: faceId, type: 'face', label: `Face: ${userData.faceData.features}` } });
        cy.add({ group: 'edges', data: { source: username, target: faceId } });
      }

      // Layout the graph
      cy.layout({
        name: 'cose',
        animate: true,
        nodeRepulsion: 400000,
        idealEdgeLength: 100
      }).run();
    }

    // Function to search by phone number
    function searchPhone() {
      const phone = document.getElementById('phone-input').value;
      if (!osintData.phoneToUser[phone]) {
        alert('Phone number not found in dataset.');
        return;
      }

      const username = osintData.phoneToUser[phone];
      document.getElementById('search-input').value = username;
      searchUser();
    }
  </script>
</body>
</html>