File uploading and fixes (#261)

Reviewed-on: #261 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
2023-11-06 11:17:42 +01:00
parent 1913c292d2
commit 5febb10d22
24 changed files with 155 additions and 131 deletions
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -3190,9 +3190,9 @@
      }
    },
    "node_modules/normalize-package-data/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
      "dev": true,
      "bin": {
        "semver": "bin/semver"
@@ -3326,9 +3326,9 @@
      }
    },
    "node_modules/npm-run-all/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
      "dev": true,
      "bin": {
        "semver": "bin/semver"
@@ -3616,9 +3616,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "funding": [
        {
          "type": "opencollective",
@@ -6994,9 +6994,9 @@
      },
      "dependencies": {
        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
          "dev": true
        }
      }
@@ -7097,9 +7097,9 @@
          "dev": true
        },
        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
          "dev": true
        },
        "shebang-command": {
@@ -7302,9 +7302,9 @@
      "dev": true
    },
    "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "requires": {
        "nanoid": "^3.3.6",
        "picocolors": "^1.0.0",
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>

 <template>
-  <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="font-sans flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
    <SidebarComponent />
    <div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
      <RouterView></RouterView>
--- a/Frontend/src/assets/tooltips/xpath/xpathdiffs.json
+++ b/Frontend/src/assets/tooltips/xpath/xpathdiffs.json
@@ -2,11 +2,11 @@
    "universalInfo":
    [
        {
-            "category":"What is XPath",
+            "category":"What is XPath?",
            "description":"XPath is a query language used for selecting nodes from XML and processing them. It may perform operations on strings, numbers and boolean values."
        },
        {
-            "category":"What's new in XPath?"
+            "category":"What's new in XPath"
        }
    ],
    "VersionDiffs":
--- a/Frontend/src/assets/tooltips/xslt/xsltdiffs.json
+++ b/Frontend/src/assets/tooltips/xslt/xsltdiffs.json
@@ -6,7 +6,7 @@
            "description":"XSLT (Extensible Stylesheet Language Transformations) is a language for converting and manipulating XML data into various formats. It uses rules defined in stylesheets to transform XML documents into HTML, XML, or other text-based outputs."
        },
        {
-            "category":"What's differences between XSLT versions"
+            "category":"Differences between XSLT versions"
        }
    ],
    "VersionDiffs":
--- a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -8,9 +8,9 @@ const props = defineProps({
 const emit = defineEmits(["update:result"])

 function process() {
-    var request:Request = prepareRequest();
+    var request:Request = prepareRequest()
    fetchRequest(request).then((data) => {
-        sendProcessedData(data);
+        sendProcessedData(data)
    })
 }

@@ -18,36 +18,36 @@ function prepareRequest():Request {
    var request = new Request(prepareURL(), {
        body: prepareRequestBody(),
        method: "POST"
-    });
+    })
    return request
 }

 function prepareURL(): string {
-    var mode = "prettify";
+    var mode = "prettify"
    if (props.isMinimizer)
-        mode = "minimize";
-    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
+        mode = "minimize"
+    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
 }

 function prepareRequestBody():string {
    var requestBody = JSON.stringify({
        "data": props.xml,
-        "process": "N/A",
+        "processorData": "N/A",
        "processor": "libxml",
        "version": "1.0"
-    });
-    return requestBody;
+    })
+    return requestBody
 }

 async function fetchRequest(request: Request):Promise<JSON> {
    var responseBody = await fetch(request)
    .then(response => response.json())
-    .then((body) => body);
-    return responseBody;
+    .then((body) => body)
+    return responseBody
 }

 function sendProcessedData(data: JSON) {
-    emit("update:result", data);
+    emit("update:result", data)
 }
 </script>

--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){


 <template>
-    <div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4">
+    <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
        <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
        <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
        <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -45,12 +45,12 @@ function refreshHistory(){
 </script>

 <template>
-    <div>
-        <table class="text-white h-28 w-full text-center">
+    <div class="h-28 text-center text-grey-900 dark:text-white">
+        <table class="w-full">
            <tr>
                <th>Time</th>
                <th>HTTP Method</th>
-                <th>HTTP Headers</th>
+                <th>Headers</th>
                <th>Request Body</th>
                <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
            </tr>
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -29,8 +29,8 @@ onMounted( () => {
            <a href="https://release11.com/">
                <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
            </a>
-            <div class="flex basis-full flex-col font-medium items-center">
-                <sidebar-menu-element-component category-name="XML">
+            <div class="flex basis-full flex-col font-normal items-center">
+                <sidebar-menu-element-component category-name="Parser">
                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -18,10 +18,10 @@ const props = defineProps(

 <template>
    <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
            <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
        </button>
-        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
            <slot></slot>
        </div>
    </div>
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -17,6 +17,6 @@ const props = defineProps(

 <style>
 .router-link-active {
-    font-weight: 500;
+    font-weight: 600;
 }
 </style>
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
-import { ref } from 'vue';
-import CodeEditor from '../CodeEditorComponent.vue';
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'

 const data = ref('')
+const inputFile = ref()

 const props = defineProps(
    {
@@ -15,7 +16,6 @@ const props = defineProps(
 const emit = defineEmits(['update'])

 function sendValue() {
-    console.log("input works")
    emit('update', data.value)
 }

@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
 }

 function updateData(newData: string) {
-    data.value = newData;
-    sendValue();
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
 }

 function clear() {
-    updateData('');
+    updateData('')
 }

 function canBeFormatted() {
    return props.stylizedName.toLowerCase() == 'xml' || 
           props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt';
+           props.stylizedName.toLowerCase() == 'xslt'
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            sendNewValue(result)
+            
+    }
+    reader.readAsText(file.target.files[0])
 }

 </script>
@@ -44,8 +57,12 @@ function canBeFormatted() {
 <template>
    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
        <div class="flex place-content-between w-full items-center">
-            <span class="dark:text-white">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-scroll">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
+                
                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                <button class="tool-button" @click="clear">Clear</button>
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
-
-const props = defineProps(
-    {
-        prettyName: {type: String, required: true}
-    }
-)
-
-const emit = defineEmits(['update:defaultData'])
-
-function setDefault(data: string) {
-    const emitName = "update:defaultData";
-    emit(emitName, data)
-}
-
-</script>
-
-<template>
-    
-</template>
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -47,6 +47,7 @@ function changeAvailableVersions() {
        changeAvailableVersionsOfXSLT();
    else if (props.tool == "xsd")
        versionsForCurrentEngine.value = ["N/A"];
+
    else if (props.tool == "xpath")
        changeAvailableVersionsOfXPath();

@@ -72,7 +73,7 @@ function selectDefaultEngine() {
 }

 function selectDefaultVersion() {
-    const lastVersion = versionsForCurrentEngine.value.length - 1
+    const lastVersion = versionsForCurrentEngine.value.length - 1;
    version.value = versionsForCurrentEngine.value[lastVersion];
    emitVersionChange();
 }
@@ -126,17 +127,21 @@ function emitVersionChange() {
    emit("update", version.value);
 }

+function isVersionSelectionAvailable() {
+    return !(props.tool == "xsd");
+}
+
 </script>

 <template>
-    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2">
+    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
        <div class="flex place-content-between w-full items-center pb-2">
            <span class="dark:text-white">Result:</span>
-            <div class="flex space-x-2">
+            <div class="flex space-x-2 overflow-x-scroll">
                <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                    <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                </select>
-                <select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                    <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                </select>
                <button class="tool-button" @click="clear">Clear</button>    
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -58,7 +58,7 @@ function toggleTooltips() {
 </script>

 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
            T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
        </button>
--- a/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
@@ -12,19 +12,19 @@ const props = defineProps({
 function getDiffEntry(toolVersion : String) : string[] {
    if ( props.toolName == "xpath" ){
        switch(toolVersion){
-        case "2.0" : {
-            return xpathDiffs.VersionDiffs[0].diffs
+            case "2.0" : {
+                return xpathDiffs.VersionDiffs[0].diffs
+            }
+            case "3.0" : {
+                return xpathDiffs.VersionDiffs[1].diffs
+            }
+            case "3.1" : {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
+            default: {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
        }
-        case "3.0" : {
-            return xpathDiffs.VersionDiffs[1].diffs
-        }
-        case "3.1" : {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-        default: {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-    }
    } else if (props.toolName == "xslt") {
        return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
    } else{
@@ -56,7 +56,7 @@ function getInfo(num : number ){
    </span>
 </TooltipCategoryComponent>    

-<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category">
+<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category + ' ' + toolVersion + '?'">
        <span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
            <div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
                ------------ {{ diff }} ------------
--- a/Frontend/src/fonts/Raleway-Variable.ttf
+++ b/Frontend/src/fonts/Raleway-Variable.ttf
--- a/Frontend/src/fonts/Sono-Variable.ttf
+++ b/Frontend/src/fonts/Sono-Variable.ttf
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -2,14 +2,28 @@
@tailwind components;
@tailwind utilities;

+@font-face {
+    font-family: "Raleway";
+    src: url("fonts/Raleway-Variable.ttf");
+}
+
+@font-face {
+    font-family: "Sono";
+    src: url("fonts/Sono-Variable.ttf");
+}
+
 .inactive-button {
    @apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
 }

 .tool-button {
-    @apply hover:brightness-110 py-2 px-4 h-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply hover:brightness-110 py-2 px-4 h-fit min-w-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }

 .text-field {
    @apply w-full font-mono dark:text-slate-100 bg-slate-50 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
+}
+
+.file-selector {
+    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
 }
--- a/Frontend/src/views/Base64EncoderView.vue
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
 import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
-import { ref } from 'vue';
+import { ref } from 'vue'


 const data : any = ref("")
 const imageData = ref("")
 const DoshowImage = ref(false)
-const inputImage = ref();
+const inputImage = ref()

 function setTextFieldValue(newData: string) {
    data.value = newData.toString()
-    DoshowImage.value = false;
+    DoshowImage.value = false
 }

 function showImage(newImage : string){
    imageData.value = "data:image/jpeg;base64,"+newImage
-    DoshowImage.value = true;
+    DoshowImage.value = true
 }

 function convertImageToBase64(file : any){
-    console.log(inputImage)
    const reader = new FileReader()
    reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
    reader.readAsDataURL(file.target.files[0])
@@ -29,34 +28,41 @@ function convertImageToBase64(file : any){
 function clear(){
    data.value = ""
    imageData.value = ""
-    DoshowImage.value = false;
+    DoshowImage.value = false
    inputImage.value.value = null
 }

 </script>

 <template>
-    <div id="layoutFull" class="w-full h-full flex">
-        <div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
-        <div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
-            <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
-            <button class="tool-button" @click="clear()">Clear</button>
+<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
+    <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
+        <div class="w-full flex flex-row place-content-between items-center">
+            <label class="dark:text-white text-center">Base64/Text</label>
+            <div class="flex flex-row items-center gap-2">
+                <button class="tool-button" @click="clear()">Clear</button>
+                <label class="text-grey-900 dark:text-white">Convert to</label>
+                <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+            </div>
+            
        </div>
-        <div id="codeEditor" class="w-4/5 h-1/3 ml-6  flex flex-col">
-            <label class="dark:text-white text-center w-full">Base64</label>
+        <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
+            
            <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
        </div>
-        <div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
-            <input id="imageLoader" ref="inputImage" class="block file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" type="file" @change="convertImageToBase64" />
+        <div class="flex flex-row justify-center w-full">
+            <div class="flex flex-col items-center w-fit" id="imageImporter">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
+                <input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm"  type="file" @change="convertImageToBase64" />
+            </div>    
        </div>
+        
    </div>
-    <div id="separator" class="bg-black h-full w-1" ></div>
    
-    <div id="layoutRight" class=" ml-6 w-2/5">
-        <div v-on="DoshowImage">
+    <div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full">
+        <div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
            <img :src="imageData"/>
        </div>
        
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
 </script>

 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
-            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <div id="layout" class="flex flex-row w-full h-full">
+        <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
+            <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
            </div>
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>

 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
+        <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
            <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
        </div>
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>

 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
+        <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
            <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
        </div>
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -15,14 +15,14 @@ function updateVersion(newVersion: string) {
 </script>

 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
-            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
-            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
+    <div id="layout" class="flex flex-row w-full h-full">
+        <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
+            <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
+                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+                <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            </div>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
        </div>
-        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
-        </div>
-        <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
+        <tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
    </div>
 </template>
--- a/Frontend/tailwind.config.js
+++ b/Frontend/tailwind.config.js
@@ -6,6 +6,10 @@ export default {
  ],
  theme: {
    extend: {},
+    fontFamily: {
+      'sans': ['Raleway'],
+      'mono': ["Sono"],
+    }
  },
  plugins: [],
 }