diff --git a/public/css/arf.css b/public/css/arf.css index 2b04000..fbbbf39 100644 --- a/public/css/arf.css +++ b/public/css/arf.css @@ -1,18 +1,51 @@ +/* === Color tokens === */ +:root { + --color-bg: #1a1a2e; + --color-surface: #16213e; + --color-text-primary: #e0e0e0; + --color-text-secondary: #888; + --color-node-stroke: #4a9eff; + --color-node-fill-branch: #2a4a7f; + --color-node-fill-leaf: #1a1a2e; + --color-link: #444; + --color-noscript-bg: #2a1a00; + --color-noscript-border: #7a4a00; + --color-legend: #e0e0e0; + --color-header: #e0e0e0; +} + +body.light-mode { + --color-bg: #ffffff; + --color-surface: #f5f5f5; + --color-text-primary: #000000; + --color-text-secondary: #999; + --color-node-stroke: steelblue; + --color-node-fill-branch: lightsteelblue; + --color-node-fill-leaf: #ffffff; + --color-link: #ccc; + --color-noscript-bg: rgb(255, 228, 196); + --color-noscript-border: rgb(255, 204, 153); + --color-legend: #000000; + --color-header: #000000; +} + body { - background-color: #ffffff; + background-color: var(--color-bg); + color: var(--color-text-primary); font-size: 14px; font-family: "Helvetica Neue", Helvetica; } -noscript p{ +noscript p { text-align: center; - background-color: rgb(255, 228, 196); + background-color: var(--color-noscript-bg); + color: var(--color-text-primary); margin: 0 auto; width: 80vw; padding: 25px 0; margin-top: 80px; border-radius: 10px; - border: 1px solid rgb(255, 204, 153); + border: 1px solid var(--color-noscript-border); margin-bottom: 20px; display: flex-wrap; } @@ -27,20 +60,7 @@ noscript p{ 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; - } + color: var(--color-header); } .legend { @@ -49,7 +69,11 @@ noscript p{ right: 0; width: 330px; font-size: 11px; - color: #000; + color: var(--color-legend); +} + +.legend a { + color: var(--color-node-stroke); } .node { @@ -58,18 +82,26 @@ noscript p{ .node circle { cursor: pointer; - fill: #fff; - stroke: steelblue; + fill: var(--color-node-fill-leaf); + stroke: var(--color-node-stroke); stroke-width: 1.5px; } .node text { font-size: 12px; - fill: rgb(0, 0, 0); + fill: var(--color-text-primary); } path.link { fill: none; - stroke: #ccc; + stroke: var(--color-link); stroke-width: 1px; -} \ No newline at end of file +} + +h3 { + color: var(--color-text-primary); +} + +a { + color: var(--color-node-stroke); +} diff --git a/public/index.html b/public/index.html index 13bd6af..e349123 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + @@ -15,6 +15,14 @@ browser to use the site.

+ +
- + + +
+

Notes

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.
diff --git a/public/js/arf.js b/public/js/arf.js index 7b31315..b3fa05f 100644 --- a/public/js/arf.js +++ b/public/js/arf.js @@ -18,6 +18,10 @@ var vis = d3.select("#body").append("svg") .append("g") .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")"); +function getCSSVar(name) { + return getComputedStyle(document.body).getPropertyValue(name).trim(); +} + d3.json("arf.json").then(function(json) { root = d3.hierarchy(json, function(d) { return d && d.children ? d.children.filter(function(c) { return c != null; }) : null; @@ -33,20 +37,11 @@ d3.json("arf.json").then(function(json) { } } -/* 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. tree(root); var nodes = root.descendants().reverse(); var links = root.links(); @@ -54,7 +49,7 @@ function update(source) { // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 180; }); - // Update the nodes… + // Update the nodes var node = vis.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); @@ -66,7 +61,9 @@ function update(source) { nodeEnter.append("circle") .attr("r", 1e-6) - .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + .style("fill", function(d) { + return d._children ? getCSSVar("--color-node-fill-branch") : getCSSVar("--color-node-fill-leaf"); + }); nodeEnter.append('a') .attr("target", "_blank") @@ -76,7 +73,9 @@ function update(source) { .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.data.name; }) - .style("fill", function(d) { return d.data.free ? 'black' : '#999'; }) + .style("fill", function(d) { + return d.data.free ? getCSSVar("--color-text-primary") : getCSSVar("--color-text-secondary"); + }) .style("fill-opacity", 1e-6); nodeEnter.append("title") @@ -91,10 +90,15 @@ function update(source) { nodeUpdate.select("circle") .attr("r", 6) - .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + .style("fill", function(d) { + return d._children ? getCSSVar("--color-node-fill-branch") : getCSSVar("--color-node-fill-leaf"); + }); nodeUpdate.select("text") - .style("fill-opacity", 1); + .style("fill-opacity", 1) + .style("fill", function(d) { + return d.data.free ? getCSSVar("--color-text-primary") : getCSSVar("--color-text-secondary"); + }); // Transition exiting nodes to the parent's new position. var nodeExit = node.exit().transition() @@ -108,7 +112,7 @@ function update(source) { nodeExit.select("text") .style("fill-opacity", 1e-6); - // Update the links… + // Update the links var link = vis.selectAll("path.link") .data(links, function(d) { return d.target.id; }); @@ -129,7 +133,7 @@ function update(source) { .duration(duration) .attr("d", diagonal); - // Transition exiting nodes to the parent's new position. + // Transition exiting links to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d) { @@ -155,8 +159,16 @@ function toggle(d) { d._children = null; } } -//Togle Dark Mode + +// Toggle light/dark mode and persist preference. function goDark() { - var element = document.body; - element.classList.toggle("dark-Mode"); -} \ No newline at end of file + var body = document.body; + var isLight = body.classList.toggle("light-mode"); + localStorage.setItem("theme", isLight ? "light" : "dark"); + var btn = document.getElementById("theme-toggle"); + if (btn) { + btn.textContent = isLight ? "Switch to dark mode" : "Switch to light mode"; + } + // Re-render to pick up new CSS variable values for D3 inline styles. + update(root); +}