Add link or color added

src/components/AddLinkDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <div v-if="showDialog" class="modal">
+        <div class="modal-content">
+            <span class="close" @click="closeDialog">&times;</span>
+            <h2>Link hinzufügen</h2>
+            <table>
+                <tr>
+                    <td>
+                        <label for="link-url">URL:</label>
+                    </td>
+                    <td>
+                        <input id="link-url" v-model="url" type="text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="link-text">Linktext:</label>
+                    </td>
+                    <td>
+                        <input id="link-text" v-model="text" type="text" />
+                    </td>
+                </tr>
+            </table>
+            <button @click="confirm">Hinzufügen</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AddLinkDialog',
+    data() {
+        return {
+            showDialog: false,
+            url: '',
+            text: '',
+        };
+    },
+    methods: {
+        openAddLinkDialog() {
+            this.showDialog = true;
+        },
+        closeDialog() {
+            this.showDialog = false;
+            this.url = '';
+            this.text = '';
+        },
+        confirm() {
+            this.$emit('confirm', this.url, this.text);
+            this.closeDialog();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    display: flex;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+</style>