280 lines
13 KiB
HTML
280 lines
13 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-input">Target Domain or IP</label>
|
||
<input type="text" id="target-input" placeholder="example.com or 8.8.8.8" autocomplete="off">
|
||
</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-settings" class="btn btn-secondary">
|
||
<span class="btn-icon">[API]</span>
|
||
<span>Settings</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 class="progress-placeholder">
|
||
<span class="status-label">
|
||
⚠️ <strong>Important:</strong> Scanning large public services (e.g., Google, Cloudflare,
|
||
AWS) is
|
||
<strong>discouraged</strong> due to rate limits (e.g., crt.sh).
|
||
<br><br>
|
||
Our task scheduler operates on a <strong>priority-based queue</strong>:
|
||
Short, targeted tasks like DNS are processed first, while resource-intensive requests (e.g.,
|
||
crt.sh)
|
||
are <strong>automatically deprioritized</strong> and may be processed later.
|
||
</span>
|
||
</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>
|
||
|
||
<!-- Replace the existing settings modal section in index.html -->
|
||
<div id="settings-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Scanner Configuration</h3>
|
||
<button id="settings-modal-close" class="modal-close">[×]</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-details">
|
||
<!-- Scan Settings Section -->
|
||
<section class="modal-section">
|
||
<details open>
|
||
<summary>
|
||
<span>⚙️ Scan Settings</span>
|
||
</summary>
|
||
<div class="modal-section-content">
|
||
<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>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- Provider Configuration Section -->
|
||
<section class="modal-section">
|
||
<details open>
|
||
<summary>
|
||
<span>🔧 Provider Configuration</span>
|
||
<span class="merge-badge" id="provider-count">0</span>
|
||
</summary>
|
||
<div class="modal-section-content">
|
||
<div id="provider-config-list">
|
||
<!-- Dynamically populated -->
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- API Keys Section -->
|
||
<section class="modal-section">
|
||
<details>
|
||
<summary>
|
||
<span>🔑 API Keys</span>
|
||
<span class="merge-badge" id="api-key-count">0</span>
|
||
</summary>
|
||
<div class="modal-section-content">
|
||
<p class="placeholder-subtext" style="margin-bottom: 1rem;">
|
||
⚠️ API keys are stored in memory for the current session only.
|
||
Only provide API keys you don't use for anything else.
|
||
</p>
|
||
<div id="api-key-inputs">
|
||
<!-- Dynamically populated -->
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="button-group" style="margin-top: 1.5rem;">
|
||
<button id="save-settings" class="btn btn-primary">
|
||
<span class="btn-icon">[SAVE]</span>
|
||
<span>Save Configuration</span>
|
||
</button>
|
||
<button id="reset-settings" class="btn btn-secondary">
|
||
<span class="btn-icon">[RESET]</span>
|
||
<span>Reset to Defaults</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||
</body>
|
||
|
||
</html> |