Add dummy files tool

src/views/general/DummyFiles.vue

@@ -0,0 +1,86 @@
+<template>
+  <div v-html="toolResult"></div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      toolResult: "",
+    };
+  },
+  async mounted() {
+      axios.post(`/static/dummy-files/index.php`, {}).then((response) => {
+        const phpinfoHTML = response.data;
+
+        // Create a temporary DOM element
+        const tempDiv = document.createElement("div");
+        tempDiv.innerHTML = phpinfoHTML;
+
+        // Select all <style> tags
+        const styleTags = tempDiv.querySelectorAll("style");
+
+        styleTags.forEach((styleTag) => {
+          // Get the CSS content
+          let cssContent = styleTag.innerHTML;
+
+          // Prepend "main " to each selector
+          cssContent = cssContent.replace(/([^{}]+){/g, "main $1 {");
+
+          // Update the <style> tag's content
+          styleTag.innerHTML = cssContent;
+        });
+
+        // Make <hr> full width
+        tempDiv.innerHTML += `
+          <style>
+            main hr {
+              width: 100% !important;
+            }
+          </style>
+        `;
+
+        // Extract the modified HTML content
+        this.toolResult = tempDiv.innerHTML;
+
+        Promise.resolve(response);
+      });
+  }
+};
+</script>
+
+<style scoped>
+.dummy-files {
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input[type='number'] {
+  width: 100px;
+}
+
+button {
+  padding: 8px 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.message {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+}
+</style>