230 lines
10 KiB
HTML
230 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>DNSRecon - Infrastructure Reconnaissance</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=Special+Elite&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">[DNS]</span>
|
||
<span class="logo-text">RECON</span>
|
||
</div>
|
||
<div class="status-indicator">
|
||
<span id="connection-status" class="status-dot"></span>
|
||
<span class="status-text">System Online</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<section class="control-panel">
|
||
<div class="panel-header">
|
||
<h2>Target Configuration</h2>
|
||
</div>
|
||
|
||
<div class="form-container">
|
||
<div class="input-group">
|
||
<label for="target-domain">Target Domain</label>
|
||
<input type="text" id="target-domain" placeholder="example.com" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="max-depth">Recursion Depth</label>
|
||
<select id="max-depth">
|
||
<option value="1">Depth 1 - Direct relationships</option>
|
||
<option value="2" selected>Depth 2 - Recommended</option>
|
||
<option value="3">Depth 3 - Extended analysis</option>
|
||
<option value="4">Depth 4 - Deep reconnaissance</option>
|
||
<option value="5">Depth 5 - Maximum depth</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button id="start-scan" class="btn btn-primary">
|
||
<span class="btn-icon">[RUN]</span>
|
||
<span>Start Reconnaissance</span>
|
||
</button>
|
||
<button id="add-to-graph" class="btn btn-primary">
|
||
<span class="btn-icon">[ADD]</span>
|
||
<span>Add to Graph</span>
|
||
</button>
|
||
<button id="stop-scan" class="btn btn-secondary" disabled>
|
||
<span class="btn-icon">[STOP]</span>
|
||
<span>Terminate Scan</span>
|
||
</button>
|
||
<button id="export-results" class="btn btn-secondary">
|
||
<span class="btn-icon">[EXPORT]</span>
|
||
<span>Download Results</span>
|
||
</button>
|
||
<button id="configure-api-keys" class="btn btn-secondary">
|
||
<span class="btn-icon">[API]</span>
|
||
<span>Configure API Keys</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="status-panel">
|
||
<div class="panel-header">
|
||
<h2>Reconnaissance Status</h2>
|
||
</div>
|
||
|
||
<div class="status-content">
|
||
<div class="status-row">
|
||
<span class="status-label">Current Status:</span>
|
||
<span id="scan-status" class="status-value">Idle</span>
|
||
</div>
|
||
<div class="status-row">
|
||
<span class="status-label">Target:</span>
|
||
<span id="target-display" class="status-value">None</span>
|
||
</div>
|
||
<div class="status-row">
|
||
<span class="status-label">Depth:</span>
|
||
<span id="depth-display" class="status-value">0/0</span>
|
||
</div>
|
||
<div class="status-row">
|
||
<span class="status-label">Relationships:</span>
|
||
<span id="relationships-display" class="status-value">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-container">
|
||
<div class="progress-info">
|
||
<span id="progress-label">Progress:</span>
|
||
<span id="progress-compact">0/0</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div id="progress-fill" class="progress-fill"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="visualization-panel">
|
||
<div class="panel-header">
|
||
<h2>Infrastructure Map</h2>
|
||
</div>
|
||
|
||
<div id="network-graph" class="graph-container">
|
||
<div class="graph-placeholder">
|
||
<div class="placeholder-content">
|
||
<div class="placeholder-icon">[○]</div>
|
||
<div class="placeholder-text">Infrastructure map will appear here</div>
|
||
<div class="placeholder-subtext">Start a reconnaissance scan to visualize relationships</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #00ff41;"></div>
|
||
<span>Domains</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #ff9900;"></div>
|
||
<span>IP Addresses</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #c7c7c7;"></div>
|
||
<span>Domain (invalid cert)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #9d4edd;"></div>
|
||
<span>Correlation Objects</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-edge high-confidence"></div>
|
||
<span>High Confidence</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-edge medium-confidence"></div>
|
||
<span>Medium Confidence</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #ff6b6b;"></div>
|
||
<span>Large Entity</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="provider-panel">
|
||
<div class="panel-header">
|
||
<h2>Data Providers</h2>
|
||
</div>
|
||
|
||
<div id="provider-list" class="provider-list">
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<span>v0.0.0rc</span>
|
||
<span class="footer-separator">|</span>
|
||
<span>Passive Infrastructure Reconnaissance</span>
|
||
<span class="footer-separator">|</span>
|
||
<span id="session-id">Session: Loading...</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="node-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modal-title">Node Details</h3>
|
||
<button id="modal-close" class="modal-close">[×]</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="modal-details">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="api-key-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Configure API Keys</h3>
|
||
<button id="api-key-modal-close" class="modal-close">[×]</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="modal-description">
|
||
Enter your API keys for enhanced data providers. Keys are stored in memory for the current session only and are never saved to disk.
|
||
</p>
|
||
<div id="api-key-inputs">
|
||
</div>
|
||
<div class="button-group" style="flex-direction: row; justify-content: flex-end;">
|
||
<button id="reset-api-keys" class="btn btn-secondary">
|
||
<span>Reset</span>
|
||
</button>
|
||
<button id="save-api-keys" class="btn btn-primary">
|
||
<span>Save Keys</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function copyToClipboard(elementId) {
|
||
const element = document.getElementById(elementId);
|
||
const textToCopy = element.innerText;
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
// Optional: Show a success message
|
||
console.log('Copied to clipboard');
|
||
}).catch(err => {
|
||
console.error('Failed to copy: ', err);
|
||
});
|
||
}
|
||
</script>
|
||
<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||
</body>
|
||
</html> |