3 files changed, 77 insertions, 0 deletions
diff --git a/frontend/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf b/frontend/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf
new file mode 100644
index 0000000..78fd014
--- /dev/null
+++ b/frontend/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..c9ef360
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>mindmap.ai</title>
+	<script src="Https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap" rel="stylesheet">
+</head>
+<body class="max-w-2xl mx-auto text-center bg-cover bg-fixed bg-bottom bg-no-repeat h-screen bg-[url(https://images.unsplash.com/photo-1509803874385-db7c23652552?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)] from-sky-500 to-indigo-500">
+	<script defer src="/script.js"></script>
+	<h1 class="text-5xl mt-8 font-[Bitcount_Grid_Double] text-white">mindmap.ai</h1>
+	<input autocomplete=off class="truncate p-4 bg-slate-700/40 border-2 rounded-full backdrop-blur-2xl border-blue-300 mt-8 text-white" type="file" id="file-input" multiple accept="image/*, .pdf, .docx">
+	<ol id="file-list" class="hidden">
+
+	</ol>
+	<button id="doit-btn" class="rounded-full border-blue-300 border-2 bg-sky-700 mt-8 p-4 text-white hover:bg-sky-500 active:bg-sky-800">Make a mind map!</button>
+	<div id="mindmap" class="text-left text-white p-8 border-2 border-blue-300 rounded-4xl mt-16 backdrop-blur-2xl bg-slate-700/30"></div>
+</body>
+</html>
diff --git a/frontend/script.js b/frontend/script.js
new file mode 100644
index 0000000..5af0c08
--- /dev/null
+++ b/frontend/script.js
@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', () => {
+	const fileInput = document.getElementById('file-input');
+	const fileList = document.getElementById('file-list');
+	const btn = document.getElementById('doit-btn');
+	const cont = document.getElementById('mindmap');
+	
+	var files;
+
+        fileInput.addEventListener('change', (event) => {
+		fileList.innerHTML = "";
+
+		files = event.target.files;
+
+		for (let i = 0; i < files.length; i++) {
+			fileList.innerHTML += `<li>${files[i].name}</li>`;
+		}
+	});
+
+	btn.addEventListener('click', async () => {
+		if (files.length == 0) return;
+
+		const formData = new FormData();
+
+		for (let i = 0; i < files.length; i++) {
+			formData.append('files', files[i]);
+		}
+
+		cont.innerHTML = "Generating...";
+		
+		const response = await fetch("http://127.0.0.1:9000/yeah", {
+			method: "POST",
+			body: formData
+		})
+
+
+		const data = await response.json();
+
+		lines = data.map.split('\n')
+
+		cont.innerHTML = "";
+
+		for (let i = 0; i < lines.length; i++) {
+			if (lines.length == 0) return;
+
+			let depth = 0;
+			for (let j = 0; j < lines[i].length; j++) {
+				if (lines[i][j] == ">") {
+					depth++;
+				} else {break;}
+			}
+console.log(lines[i].slice(depth, lines[i].length))
+			cont.innerHTML += `<div style="display: flex; gap: 1rem;"><span style="opacity: 50%; margin-left: ${(depth - 1) * 2}rem"> ▸ </span><span>${lines[i].slice(depth, lines[i].length)}</span></div>`;
+			console.log(cont.innerHTML);
+		}
+	});
+});