Added Dark Mode/Fixed file placement problem

This commit is contained in:
Kyle Matthews
2024-10-02 19:22:42 -04:00
parent a36968e7be
commit 9c5e4caaea
6 changed files with 23 additions and 261 deletions
-62
View File
@@ -1,62 +0,0 @@
body {
background-color: #ffffff;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
#body {
margin: 0 auto;
position: relative;
}
#header {
font-size: 40px;
font-weight: bold;
top: 20px;
text-align: center;
}
.dark-Mode{
background-color: #000;
color: #fff;
.node text {
fill: #fff;
}
.legend{
color: #fff;
}
path.link{
stroke: #444;
}
}
.legend {
position: absolute;
top: 0px;
right: 0;
width: 330px;
font-size: 11px;
color: #000;
}
.node {
cursor: pointer;
}
.node circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font-size: 12px;
fill: rgb(0, 0, 0);
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
-156
View File
@@ -1,156 +0,0 @@
var margin = [20, 120, 20, 140],
width = 1280 - margin[1] - margin[3],
height = 800 - margin[0] - margin[2],
i = 0,
duration = 1250,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#body").append("svg:svg")
.attr("width", width + margin[1] + margin[3])
.attr("height", height + margin[0] + margin[2])
.append("svg:g")
.attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");
d3.json("arf.json", function(json) {
root = json;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
/* function toggleAll(d) {
if (d.children) {
d.children.forEach(toggleAll);
toggle(d);
}
} */
root.children.forEach(collapse);
update(root);
});
function update(source) {
// var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append('a')
.attr("target", "_blank")
.attr('xlink:href', function(d) { return d.url; })
.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill: rgb(0, 0, 0)", function(d) { return d.free ? 'black' : '#999'; })
.style("fill-opacity", 1e-6);
nodeEnter.append("svg:title")
.text(function(d) {
return d.description;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children.
function toggle(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}
//Togle Dark Mode
function goDark() {
var element = document.body;
element.classList.toggle("dark-Mode");
}
-40
View File
@@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="css/arf.css"/>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<title>OSINT Framework</title>
</head>
<body>
<div id="body">
<div id="header">
OSINT Framework
<hr/>
</div>
</div>
<script src="js/arf.js"></script>
<div class="legend"><p>(T) - Indicates a link to a tool that must be installed and run locally<br>
(D) - Google Dork, for more information: <a href="https://en.wikipedia.org/wiki/Google_hacking">Google Hacking</a><br>
(R) - Requires registration<br>
(M) - Indicates a URL that contains the search term and the URL itself must be edited manually<br></p>
<button onclick="goDark()">Toggle dark mode</button></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>
+14
View File
@@ -16,6 +16,20 @@ body {
text-align: center;
}
.dark-Mode{
background-color: #000;
color: #fff;
.node text {
fill: #fff;
}
.legend{
color: #fff;
}
path.link{
stroke: #444;
}
}
.legend {
position: absolute;
top: 0px;
+3 -2
View File
@@ -20,8 +20,9 @@
<div class="legend"><p>(T) - Indicates a link to a tool that must be installed and run locally<br>
(D) - Google Dork, for more information: <a href="https://en.wikipedia.org/wiki/Google_hacking">Google Hacking</a><br>
(R) - Requires registration<br>
(M) - Indicates a URL that contains the search term and the URL itself must be edited manually<br></p></div>
(M) - Indicates a URL that contains the search term and the URL itself must be edited manually<br></p>
<button onclick="goDark()">Toggle dark mode</button></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>
+6 -1
View File
@@ -148,4 +148,9 @@ function toggle(d) {
d.children = d._children;
d._children = null;
}
}
}
//Togle Dark Mode
function goDark() {
var element = document.body;
element.classList.toggle("dark-Mode");
}