Refactor views structure

src/views/general/DummyImage.vue

@@ -0,0 +1,78 @@
+<template>
+  <h2 class="tool-title">Dummy image</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label>Dimensions</label>
+    <div style="display: flex">
+      <input class="input" v-model="toolData.width" v-on:keyup="result" v-on:change="result" placeholder="500"
+             type="number" style="width: 70px">px
+      <span style="padding: 0 10px">x</span>
+      <input class="input" v-model="toolData.height" v-on:keyup="result" v-on:change="result" placeholder="500"
+             type="number" style="width: 70px">px
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label for="result">Background colour</label>
+    <input class="input" v-model="toolData.color_bg" v-on:change="result" type="color">
+  </div>
+
+  <div class="input-group">
+    <label for="result">Text colour</label>
+    <input class="input" v-model="toolData.color_text" v-on:change="result" type="color">
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <div :style="{'width': toolData.width, 'height': toolData.height}">
+      <canvas ref="canvas" :width="toolData.width" :height="toolData.height"
+              style="max-width: 50vw; max-height: 50vh;"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        width: 500,
+        height: 500,
+        color_bg: "#000000",
+        color_text: "#ffffff"
+      },
+      toolResult: ""
+    };
+  },
+  mounted() {
+    this.result();
+  },
+  methods: {
+    result() {
+      const ctx = this.$refs.canvas.getContext("2d");
+
+      // Set background color
+      ctx.fillStyle = this.toolData.color_bg;
+      ctx.fillRect(0, 0, this.toolData.width, this.toolData.height);
+
+      // Set text color and font
+      ctx.fillStyle = this.toolData.color_text;
+      ctx.font = "bold 30px Arial";
+
+      // Draw text on the canvas
+      const text = `${this.toolData.width}x${this.toolData.height}`;
+      const textWidth = ctx.measureText(text).width;
+      const x = (this.toolData.width - textWidth) / 2;
+      const y = this.toolData.height / 2 + 10;
+      ctx.fillText(text, x, y);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>