random-web-tools/src/views/general/DummyFiles.vue

<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>
            ul {
               list-style-type: disc;
               list-style-position: inside;
               margin-bottom: 20px;
            }
            ul li {
               margin-left: 20px;
            }
          </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>