mirror of
https://github.com/lockfale/OSINT-Framework.git
synced 2026-09-06 01:37:45 +02:00
s0lrayandPaperclip
c4531cb053
On mobile (<=768px), the legend, notes, and about sections consumed most of the viewport, leaving the D3 tree nearly unusable. This moves the theme toggle into the header as a compact "Light Mode"/"Dark Mode" button, hides the below-tree content, and adds a floating "Notes" button that opens all that content in a full-screen overlay panel (matching the existing tool detail panel pattern). Desktop layout is completely unchanged. Co-Authored-By: Paperclip <noreply@paperclip.ing>
149 lines
6.2 KiB
HTML
149 lines
6.2 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">
|
|
<span id="header-title">OSINT Framework</span>
|
|
<button id="mobile-theme-toggle" onclick="goDark()">Light Mode</button>
|
|
<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">
|
|
<div id="panel-header-text">
|
|
<span id="panel-title"></span>
|
|
<div id="panel-breadcrumb" class="empty"></div>
|
|
</div>
|
|
<button id="panel-close" aria-label="Close panel">✕</button>
|
|
</div>
|
|
<div id="panel-body">
|
|
<div id="panel-cta-section" class="empty">
|
|
<a id="panel-open-tool" href="#" target="_blank" rel="noopener noreferrer">Open Tool →</a>
|
|
</div>
|
|
|
|
<hr class="panel-divider">
|
|
|
|
<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-io-section" class="empty">
|
|
<span class="panel-section-label">Input → Output</span>
|
|
<span id="panel-io"></span>
|
|
</div>
|
|
|
|
<hr class="panel-divider">
|
|
|
|
<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">Community Rating</span>
|
|
<span id="panel-rating"></span>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="panel-footer">
|
|
<div id="panel-report-section">
|
|
<span class="panel-section-label">Report an Issue</span>
|
|
<div id="panel-report-buttons">
|
|
<button class="report-btn" data-type="dead_link">Dead link</button>
|
|
<button class="report-btn" data-type="paywalled">Paywalled</button>
|
|
<button class="report-btn" data-type="incorrect_info">Incorrect info</button>
|
|
</div>
|
|
<div id="panel-report-feedback" class="panel-report-feedback hidden"></div>
|
|
</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 isLight = localStorage.getItem("theme") === "light";
|
|
var btn = document.getElementById("theme-toggle");
|
|
if (btn && isLight) btn.textContent = "Switch to dark mode";
|
|
var mBtn = document.getElementById("mobile-theme-toggle");
|
|
if (mBtn) mBtn.textContent = isLight ? "Dark Mode" : "Light Mode";
|
|
})();
|
|
</script>
|
|
</div>
|
|
|
|
<div id="notes-content">
|
|
<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.
|
|
</div>
|
|
|
|
<!-- Mobile notes button (visible only on mobile) -->
|
|
<button id="mobile-notes-btn" onclick="toggleNotesPanel()">Notes</button>
|
|
|
|
<!-- Mobile notes overlay panel -->
|
|
<div id="notes-overlay"></div>
|
|
<div id="notes-panel">
|
|
<div id="notes-panel-header">
|
|
<span id="notes-panel-title">Notes</span>
|
|
<button id="notes-panel-close" onclick="toggleNotesPanel()" aria-label="Close notes">✕</button>
|
|
</div>
|
|
<div id="notes-panel-body"></div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|