Deployed Page

standardgalactic · Dec 7, 2024 · 122a6eb · 122a6eb
1 parent 655e2d3
commit 122a6eb
Show file tree

Hide file tree

Showing 2 changed files with 175 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,24 @@
+d3.json("structure.json").then(data => {
+	    const width = window.innerWidth;
+	    const height = window.innerHeight;
+
+	    const root = d3.hierarchy(data[0], d => d.contents)
+	        .sum(d => d.type === "file" ? 1 : 0)
+	        .sort((a, b) => b.value - a.value);
+
+	    const pack = d3.pack()
+	        .size([width, height])
+	        .padding(3);
+
+	    pack(root);
+
+	    const svg = d3.select("svg");
+	    const nodes = svg.selectAll("circle")
+	        .data(root.descendants())
+	        .enter().append("circle")
+	        .attr("cx", d => d.x)
+	        .attr("cy", d => d.y)
+	        .attr("r", d => d.r)
+	        .attr("fill", d => d.children ? "#69b3a2" : "#ffcc00");
+});
+
diff --git a/index.html b/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Visualizer</title>
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            overflow: hidden;
+        }
+        #container {
+            width: 100vw;
+            height: 100vh;
+            overflow: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #output {
+            padding: 20px;
+            background: white;
+            border: 2px solid #333;
+            border-radius: 8px;
+            min-width: 800px;
+            min-height: 600px;
+            max-width: 95%;
+            max-height: 95%;
+            overflow: auto;
+            position: relative;
+        }
+        .folder {
+            font-weight: bold;
+            color: #333;
+            margin-left: 20px;
+            margin-top: 5px;
+        }
+        .file {
+            color: #555;
+            margin-left: 40px;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+
+<div id="container">
+    <div id="output">Loading...</div>
+</div>
+
+<script>
+    async function fetchData() {
+        try {
+            const response = await fetch("structure.json");
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const data = await response.json();
+            return data;
+        } catch (error) {
+            console.error("Error loading file:", error.message);
+            document.getElementById("output").textContent = `Error loading file structure: ${error.message}`;
+        }
+    }
+
+    function renderFolder(folder, parent) {
+        const folderEl = document.createElement("div");
+        folderEl.className = "folder";
+        folderEl.textContent = `📁 ${folder.name}`;
+        parent.appendChild(folderEl);
+
+        if (folder.contents) {
+            folder.contents.forEach(item => {
+                if (item.type === "directory") {
+                    renderFolder(item, folderEl);
+                } else {
+                    const fileEl = document.createElement("div");
+                    fileEl.className = "file";
+                    fileEl.textContent = `📄 ${item.name}`;
+                    folderEl.appendChild(fileEl);
+                }
+            });
+        }
+    }
+
+    async function init() {
+        const data = await fetchData();
+        if (data && data.length > 0) {
+            const output = document.getElementById("output");
+            output.textContent = "";
+            renderFolder(data[0], output);
+        }
+    }
+
+    init();
+
+    // Enable dragging for desktop and mobile
+    let isDragging = false;
+    let startX, startY, scrollLeft, scrollTop;
+
+    const container = document.getElementById("container");
+
+    container.addEventListener("mousedown", (e) => {
+        isDragging = true;
+        startX = e.pageX - container.offsetLeft;
+        startY = e.pageY - container.offsetTop;
+        scrollLeft = container.scrollLeft;
+        scrollTop = container.scrollTop;
+    });
+
+    container.addEventListener("mouseleave", () => isDragging = false);
+    container.addEventListener("mouseup", () => isDragging = false);
+    container.addEventListener("mousemove", (e) => {
+        if (!isDragging) return;
+        e.preventDefault();
+        const x = e.pageX - container.offsetLeft;
+        const y = e.pageY - container.offsetTop;
+        const walkX = (x - startX) * 2;
+        const walkY = (y - startY) * 2;
+        container.scrollLeft = scrollLeft - walkX;
+        container.scrollTop = scrollTop - walkY;
+    });
+
+    container.addEventListener("touchstart", (e) => {
+        isDragging = true;
+        const touch = e.touches[0];
+        startX = touch.pageX - container.offsetLeft;
+        startY = touch.pageY - container.offsetTop;
+        scrollLeft = container.scrollLeft;
+        scrollTop = container.scrollTop;
+    });
+
+    container.addEventListener("touchend", () => isDragging = false);
+    container.addEventListener("touchmove", (e) => {
+        if (!isDragging) return;
+        e.preventDefault();
+        const touch = e.touches[0];
+        const x = touch.pageX - container.offsetLeft;
+        const y = touch.pageY - container.offsetTop;
+        const walkX = (x - startX) * 2;
+        const walkY = (y - startY) * 2;
+        container.scrollLeft = scrollLeft - walkX;
+        container.scrollTop = scrollTop - walkY;
+    });
+</script>
+
+</body>
+</html>