195 lines
8.7 KiB
HTML
195 lines
8.7 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 -->
|
||
<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 Content -->
|
||
<main class="main-content">
|
||
<!-- Control Panel -->
|
||
<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="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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Status Panel -->
|
||
<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">Progress:</span>
|
||
<span id="progress-display" class="status-value">0%</span>
|
||
</div>
|
||
<div class="status-row">
|
||
<span class="status-label">Indicators:</span>
|
||
<span id="indicators-display" class="status-value">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-bar">
|
||
<div id="progress-fill" class="progress-fill"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Visualization Panel -->
|
||
<section class="visualization-panel">
|
||
<div class="panel-header">
|
||
<h2>Infrastructure Map</h2>
|
||
<div class="view-controls">
|
||
<button id="reset-view" class="btn-icon-small" title="Reset View">[↻]</button>
|
||
<button id="fit-view" class="btn-icon-small" title="Fit to Screen">[□]</button>
|
||
</div>
|
||
</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>Certificates</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>
|
||
</section>
|
||
|
||
<!-- Provider Panel -->
|
||
<section class="provider-panel">
|
||
<div class="panel-header">
|
||
<h2>Data Providers</h2>
|
||
</div>
|
||
|
||
<div id="provider-list" class="provider-list">
|
||
<!-- Provider status will be populated here -->
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<span>DNSRecon v1.0 - Phase 1 Implementation</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>
|
||
|
||
<!-- Node Details Modal -->
|
||
<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">
|
||
<!-- Node details will be populated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||
</body>
|
||
</html> |