mirror of
https://github.com/lockfale/OSINT-Framework.git
synced 2026-08-30 03:39:45 +02:00
s0lrayandPaperclip
0e7fdcfdbf
THE-104: Build panel UI component - New public/css/panel.css using existing design tokens - Fixed-position slide-in panel (340px desktop, 100vw bottom-sheet on mobile) - 250ms GPU-accelerated translateX() slide animation with will-change - All section placeholders: header, breadcrumb, badges, description, usage, OPSEC, rating, report link, CTA button - Dark mode via body.light-mode CSS variable overrides - Graceful empty states (sections hidden via .empty class) THE-105: Wire panel to D3 tree interactions - Leaf-node clicks (nodes with url, no children) open panel instead of navigating - parseName() for clean title + badge rendering - Breadcrumb built by walking parent chain to root - Selected-node ring via _panelSelected flag + stroke style in nodeUpdate - Close triggers: ✕ button, Escape key, overlay click, canvas click, same-node re-click - Clicking another leaf swaps panel content in-place - Session hash via crypto.randomUUID() stored in sessionStorage Co-Authored-By: Paperclip <noreply@paperclip.ing>
114 lines
4.8 KiB
HTML
114 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<!-- Viewport Settings -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
|
<link type="text/css" rel="stylesheet" href="css/arf.css"/>
|
|
<link type="text/css" rel="stylesheet" href="css/panel.css"/>
|
|
<script type="text/javascript" src="js/d3.min.js"></script>
|
|
<title>OSINT Framework</title>
|
|
</head>
|
|
<noscript>
|
|
<p>Sorry, Your browser does not support JavaScript! Activate JavaScript on your browser or look for a compatible
|
|
browser to use the site.</p>
|
|
</noscript>
|
|
<body>
|
|
<!-- Apply light-mode class immediately if stored preference is light -->
|
|
<script>
|
|
(function() {
|
|
if (localStorage.getItem("theme") === "light") {
|
|
document.body.classList.add("light-mode");
|
|
}
|
|
})();
|
|
</script>
|
|
<div id="body">
|
|
<div id="header">
|
|
OSINT Framework
|
|
<hr/>
|
|
</div>
|
|
<div id="search-container">
|
|
<input type="text" id="search-input" placeholder="Search tools..." autocomplete="off" aria-label="Search OSINT tools">
|
|
<div id="search-results" role="listbox" aria-label="Search results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool details panel -->
|
|
<div id="panel-overlay"></div>
|
|
<div id="tool-panel" role="complementary" aria-label="Tool details">
|
|
<div id="panel-header">
|
|
<span id="panel-title"></span>
|
|
<button id="panel-close" aria-label="Close panel">✕</button>
|
|
</div>
|
|
<div id="panel-body">
|
|
<div id="panel-breadcrumb" class="empty"></div>
|
|
|
|
<div id="panel-badges" class="empty"></div>
|
|
|
|
<div id="panel-description-section" class="empty">
|
|
<span class="panel-section-label">Description</span>
|
|
<span id="panel-description"></span>
|
|
</div>
|
|
|
|
<div id="panel-usage-section" class="empty">
|
|
<span class="panel-section-label">Usage Context</span>
|
|
<span id="panel-usage"></span>
|
|
</div>
|
|
|
|
<div id="panel-opsec-section" class="empty">
|
|
<span class="panel-section-label">OPSEC Notes</span>
|
|
<span id="panel-opsec"></span>
|
|
</div>
|
|
|
|
<div id="panel-rating-section" class="empty">
|
|
<span class="panel-section-label">Rating</span>
|
|
<span id="panel-rating"></span>
|
|
</div>
|
|
|
|
<div id="panel-report-section">
|
|
<a id="panel-report-link" href="https://github.com/lockfale/OSINT-Framework/issues/new?template=tool-feedback.md" target="_blank" rel="noopener noreferrer">Report an issue with this tool</a>
|
|
</div>
|
|
|
|
<div id="panel-cta-section" class="empty">
|
|
<a id="panel-open-tool" href="#" target="_blank" rel="noopener noreferrer">Open Tool →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/arf.js"></script>
|
|
|
|
<div class="legend"><p>
|
|
<span class="badge badge-T">T</span> - Indicates a link to a tool that must be installed and run locally<br>
|
|
<span class="badge badge-D">D</span> - Google Dork, for more information: <a href="https://en.wikipedia.org/wiki/Google_hacking">Google Hacking</a><br>
|
|
<span class="badge badge-R">R</span> - Requires registration<br>
|
|
<span class="badge badge-M">M</span> - Indicates a URL that contains the search term and the URL itself must be edited manually<br>
|
|
</p>
|
|
<button id="theme-toggle" onclick="goDark()">Switch to light mode</button>
|
|
<script>
|
|
(function() {
|
|
var btn = document.getElementById("theme-toggle");
|
|
if (btn && localStorage.getItem("theme") === "light") {
|
|
btn.textContent = "Switch to dark mode";
|
|
}
|
|
})();
|
|
</script>
|
|
</div>
|
|
|
|
<h3>Notes</h3>
|
|
OSINT framework focused on gathering information from free tools or resources. The intention is to help people find free OSINT resources. Some of the sites included might require registration or offer more data for $$$, but you should be able to get at least a portion of the available information for no cost.<br>
|
|
|
|
<p>I originally created this framework with an information security point of view. Since then, the response from other fields and disciplines has been incredible. I would love to be able to include any other OSINT resources, especially from fields outside of infosec. Please let me know about anything that might be missing!</p>
|
|
|
|
<h3>For Update Notifications</h3>
|
|
Follow me on Twitter: <a href="https://twitter.com/jnordine">@jnordine</a><br>
|
|
Watch or star the project on Github: <a href="https://github.com/lockfale/osint-framework">https://github.com/lockfale/osint-framework</a>
|
|
|
|
<h3>Suggestions, Comments, Feedback</h3>
|
|
Feedback or new tool suggestions are extremely welcome! Please feel free to reach out on Twitter or submit an issue on Github.
|
|
|
|
</body>
|
|
|
|
</html>
|