import React, { useState } from 'react'; import axios from 'axios'; import './Analyzer.css'; const NumberAnalyzer = () => { const [phoneNumber, setPhoneNumber] = useState(''); const [analysisResult, setAnalysisResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const analyzeNumber = async () => { if (!phoneNumber) { setError('Please enter a phone number'); return; } setLoading(true); setError(''); try { const response = await axios.post('/api/analyze-number', { phoneNumber }); setAnalysisResult(response.data); } catch (err) { setError('Failed to analyze number. Please try again.'); console.error(err); } finally { setLoading(false); } }; return (

Phone Number Analysis

setPhoneNumber(e.target.value)} placeholder="Enter phone number" className="input-field" />

{error &&

{error}

} {analysisResult && (

Analysis Results:

Number Type: {analysisResult.numberType}

Cloned: {analysisResult.isCloned ? 'Yes' : 'No'}

Risk Score: 70 ? 'danger' : analysisResult.riskScore > 30 ? 'warning' : 'safe'}`}> {analysisResult.riskScore}%

{analysisResult.notes && (

Notes:

{analysisResult.notes}

)}

); }; export default NumberAnalyzer; import React, { useState } from 'react'; import axios from 'axios'; import './Analyzer.css'; const EmailAnalyzer = () => { const [email, setEmail] = useState(''); const [analysisResult, setAnalysisResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const analyzeEmail = async () => { if (!email) { setError('Please enter an email address'); return; } setLoading(true); setError(''); try { const response = await axios.post('/api/analyze-email', { email }); setAnalysisResult(response.data); } catch (err) { setError('Failed to analyze email. Please try again.'); console.error(err); } finally { setLoading(false); } }; return (

Email Analysis

setEmail(e.target.value)} placeholder="Enter email address" className="input-field" />

{error &&

{error}

} {analysisResult && (

Analysis Results:

Deep Web Presence: {analysisResult.deepWebPresence ? 'Found' : 'Not Found'}

Data Breaches: 0 ? 'danger' : 'safe'}`}> {analysisResult.breachCount} breaches

Risk Score: 70 ? 'danger' : analysisResult.riskScore > 30 ? 'warning' : 'safe'}`}> {analysisResult.riskScore}%

{analysisResult.breachDetails && analysisResult.breachDetails.length > 0 && (

Breach Details:

{breach.name} ({breach.date}): {breach.description}

)}

); }; export default EmailAnalyzer; .analyzer-container { max-width: 600px; margin: 20px auto; padding: 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .analyzer-container h2 { color: #333; margin-bottom: 20px; text-align: center; } .input-group { display: flex; gap: 10px; margin-bottom: 15px; } .input-field { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .analyze-button { padding: 10px 20px; background-color: #4a6fa5; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .analyze-button:hover { background-color: #3a5a80; } .analyze-button:disabled { background-color: #cccccc; cursor: not-allowed; } .error-message { color: #d32f2f; margin-bottom: 15px; } .result-container { margin-top: 20px; padding: 15px; border-radius: 4px; background-color: #f9f9f9; } .result-container h3 { margin-top: 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 10px; } .result-item { display: flex; justify-content: space-between; margin-bottom: 10px; } .result-label { font-weight: bold; color: #555; } .result-value { font-weight: bold; } .result-value.safe { color: #4caf50; } .result-value.warning { color: #ff9800; } .result-value.danger { color: #f44336; } .result-notes { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; } .result-notes h4 { margin-bottom: 10px; color: #555; } .result-notes ul { padding-left: 20px; margin: 0; } .result-notes li { margin-bottom: 5px; } import React from 'react'; import NumberAnalyzer from './components/NumberAnalyzer'; import EmailAnalyzer from './components/EmailAnalyzer'; import './App.css'; function App() { return (

Digital Identity Analyzer

Check phone numbers and emails for security risks

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f5f7fa; } .app { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background-color: #2c3e50; color: white; padding: 20px; text-align: center; } .app-header h1 { margin: 0; font-size: 2rem; } .app-header p { margin: 10px 0 0; opacity: 0.8; } .app-main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 30px; max-width: 1200px; margin: 0 auto; width: 100%; } .app-footer { background-color: #2c3e50; color: white; padding: 10px; text-align: center; font-size: 0.8rem; opacity: 0.7; } @media (min-width: 768px) { .app-main { flex-direction: row; justify-content: center; } .app-header h1 { font-size: 2.5rem; } } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); * { box-sizing: border-box; } body { margin: 0; padding: 0; } #root { min-height: 100vh; display: flex; flex-direction: column; } export const analyzeNumber = async (phoneNumber) => { // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); // Mock analysis logic const isVirtual = Math.random() > 0.7; const isCloned = Math.random() > 0.8; const riskScore = Math.floor(Math.random() * 100); return { numberType: isVirtual ? 'Virtual' : 'Regular', isCloned, riskScore, notes: isCloned ? 'This number appears in multiple devices' : isVirtual ? 'This is likely a VoIP number' : 'No significant risks detected' }; }; export const analyzeEmail = async (email) => { // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); // Mock analysis logic const hasDeepWebPresence = Math.random() > 0.6; const breachCount = hasDeepWebPresence ? Math.floor(Math.random() * 5) : 0; const riskScore = Math.floor(Math.random() * 100); const breachDetails = []; if (breachCount > 0) { const breachNames = ['LinkedIn 2012', 'Adobe 2013', 'Dropbox 2016', 'Yahoo 2013-14', 'Facebook 2019']; for (let i = 0; i < breachCount; i++) { breachDetails.push({ name: breachNames[i], date: `201${i + 2}-0${i + 1}-${10 + i}`, description: 'User credentials were compromised in this breach' }); } } return { deepWebPresence: hasDeepWebPresence, breachCount, riskScore, breachDetails }; }; const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); };