add: composant GeneratedContent.vue pour gérer et afficher la partie générative

src/components/GeneratedContent.vue

@@ -0,0 +1,31 @@
+<script setup>
+</script>
+
+<template>
+  <div id="generatorContainer">
+    <p>It's empty for now!</p>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================Generated Content CSS*/
+  #generatorContainer{
+    pointer-events: none;
+    position:absolute;
+    inset:0;
+    z-index: 3;
+    background-color: transparent;
+    opacity: 50%;
+    box-sizing: border-box;
+  }
+
+</style>
+
+<script>
+  export default {
+    name : 'GeneratedContent',
+    mounted(){
+      console.log("Content generator is loaded!");
+    }
+  };
+</script>

src/components/MainContent.vue

@@ -3,11 +3,14 @@
 
 <template>
   <div id="mainContainer">
+    <generatorDiv></generatorDiv>
     <div class="windowContainer" id="mainPannel">
       <div class="windowTitle">
         <div class="titleContent">
           <p>./MainContent.333</p>
-          <button type="button" class="titleBtn"> <p>RELOAD</p> </button>
+          <!--<Teleport to="div#generatorContainer">-->
+            <button type="button" class="titleBtn"> <p>RELOAD</p> </button>
+          <!--</Teleport>-->
         </div>
       </div>
     </div>