initial commit

assets/css/main.css

@@ -0,0 +1,25 @@
+#svg-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px; /* space between grid items */
+  justify-content: center; /* center items horizontally */
+}
+
+.grid-item {
+  flex: 1 1 150px; /* grow, shrink, base width */
+  max-width: 200px;
+  padding: 8px;
+  box-sizing: border-box;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.grid-item:hover {
+  background-color: #999999;
+}
+
+.selected {
+  background-color: #777777;
+}

assets/js/main.js

@@ -0,0 +1,39 @@
+const selectedIcons = new Set();
+
+function iconClick(iconID) {
+  console.log(iconID);
+  const element = document.getElementById(iconID);
+  if (selectedIcons.has(iconID)) {
+    console.log("delete");
+    selectedIcons.delete(iconID);
+    element.classList.remove("selected");
+  } else {
+    console.log("add");
+    selectedIcons.add(iconID);
+    element.classList.add("selected");
+  }
+}
+
+function deleteSelected() {
+  fetch("delete-selected", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      svgs: [...selectedIcons],
+    }),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log("Server response:", data);
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+}