Complete visual overhaul (still has some bugs)

frontend/src/App.vue

@@ -1,30 +1,38 @@
 <template>
   <v-app>
     <v-main>
-      <HelloWorld />
-      <drag-and-drop />
+      <h1 class="logo">ASCIIfy</h1>
+      <div class="main-container">
+        <settings />
+        <drag-and-drop />
+      </div>
+      <result-display class="result" />
     </v-main>
   </v-app>
 </template>
 
 <script>
 import DragAndDrop from "./components/DragAndDrop.vue";
-import HelloWorld from "./components/HelloWorld.vue";
+import ResultDisplay from "./components/ResultDisplay.vue";
+import Settings from "./components/Settings.vue";
 
 export default {
   name: "App",
-
   components: {
-    HelloWorld,
     DragAndDrop,
+    ResultDisplay,
+    Settings,
+  },
+  data: () => {
+    return { keepResolution: false };
   },
 };
 </script>
 
 <style>
 :root {
   --background-base: #e5edf1;
-  --primary-base: #009966;
+  --primary-base: #41b883;
   --secondary-base: #003322;
 }
 
@@ -47,4 +55,22 @@ body::-webkit-scrollbar-track {
 body::-webkit-scrollbar-thumb {
   background: rgb(15, 124, 82);
 }
+
+.main-container {
+  display: flex;
+  width: 90%;
+  margin: auto;
+}
+
+.logo {
+  font-size: 70px;
+  width: 90%;
+  text-align: center;
+  margin: 0 auto;
+  color: #003322;
+}
+
+.result {
+  margin-top: 10px;
+}
 </style>

frontend/src/api/backend.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const API_URL = "http://127.0.0.1:5000";
+
+export default {
+  async asciify(formData) {
+    const response = await axios.post(`${API_URL}/api/asciify`, formData);
+    let asciifiedImageURL = "data:img/jpeg;base64," + response.data;
+    return asciifiedImageURL;
+  },
+  async getFonts() {
+    const response = await axios.get(`${API_URL}/api/fonts`);
+    let fonts = response.data["fonts"];
+    return fonts;
+  },
+};

frontend/src/components/BooleanOption.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <h2>{{ title }}</h2>
+    <v-row class="mx-auto" dense>
+      <v-col class="col-6">
+        <v-sheet
+          class="text-center d-flex align-center justify-space-between py-3 px-4"
+          rounded
+          :color="modelValue ? '#41b883' : '#53565d'"
+          flat
+          link
+          @click="(event) => $emit('update:modelValue', true)"
+        >
+          <span>Enabled</span><v-icon color="#f5f6fa">fas fa-check</v-icon>
+        </v-sheet>
+      </v-col>
+      <v-col class="col-6">
+        <v-sheet
+          class="text-center d-flex align-center justify-space-between py-3 px-4"
+          rounded
+          :color="!modelValue ? '#41b883' : '#53565d'"
+          flat
+          link
+          @click="(event) => $emit('update:modelValue', false)"
+        >
+          <span>Disabled</span><v-icon color="#f5f6fa">fas fa-times</v-icon>
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      default: "",
+      type: String,
+    },
+    name: String,
+    modelValue: {
+      default: false,
+      type: Boolean,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.v-sheet {
+  cursor: pointer;
+  color: #f5f6fa;
+}
+</style>

frontend/src/components/DragAndDrop.vue

@@ -14,13 +14,18 @@
       <div v-else class="inner">
         <v-icon class="icon" size="70">fas fa-cloud-upload-alt</v-icon>
         <header>Drag & Drop or Click to Upload File</header>
-        <input ref="fsFileInput" type="file" @change="handleFileChange" />
+        <input
+          ref="fsFileInput"
+          type="file"
+          @change.prevent="handleFileChange"
+        />
       </div>
     </div>
   </div>
 </template>
 <script>
 import { ref } from "vue";
+import { resultStore } from "../store/result-store";
 export default {
   name: "DragAndDrop",
   setup() {
@@ -33,6 +38,7 @@ export default {
       active.value = true;
       file.value = event.target.files[0];
       showFile();
+      resultStore.setAsciifiedImageURL(file.value);
       uploaded.value = true;
     };
 
@@ -52,8 +58,8 @@ export default {
         active.value = false;
       }
       let fileReader = new FileReader();
-      fileReader.onload = () => {
-        fileURL.value = fileReader.result;
+      fileReader.onload = (event) => {
+        fileURL.value = event.target.result;
       };
       fileReader.readAsDataURL(file.value);
     };
@@ -62,6 +68,7 @@ export default {
       event.preventDefault();
       file.value = event.dataTransfer.files[0];
       showFile(event);
+      resultStore.setAsciifiedImageURL(file.value);
       uploaded.value = true;
     };
     return {