edit: consstruction d'une structure responsive pour l'interface

v1-com-officielle/src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

v1-com-officielle/src/components/Info/InboxContent.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="inboxContainer" class="uiStyle">
+
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #inboxContainer{
+    width:100%;
+    position:relative;
+    height:50%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'InboxContent',
+    mounted(){
+      console.log("Inbox content is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/Info/InfoMenu.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="infoMenuContainer" class="uiStyle">
+
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoMenuContainer{
+    width:100%;
+    position:relative;
+    height:40%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'InfoMenu',
+    mounted(){
+      console.log("Info menu is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/InfoContent.vue

@@ -0,0 +1,48 @@
+<template>
+    <div id="infoContainer">
+      <InfoMenuDiv></InfoMenuDiv>
+      <InboxDiv></InboxDiv>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoContainer{
+    background-color: transparent;
+    width:100%;
+    position:relative;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #infoContainer{
+      height: 100%;
+      width: 33.3%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'InfoContent',
+    mounted(){
+      console.log("Info content is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/Title/GeneratedContent.vue

@@ -0,0 +1,42 @@
+<template>
+    <div id="generatedContainer">
+
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #generatedContainer{
+    background-color: transparent;
+    width:100%;
+    position:relative;
+    height:70%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #generatedContainer{
+      height: 67%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'GeneratedContent',
+    mounted(){
+      console.log("Generated content is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/Title/MusicPlayer.vue

@@ -0,0 +1,41 @@
+<template>
+    <div id="playerContainer" class="uiStyle">
+
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #playerContainer{
+    width:100%;
+    position:relative;
+    height:10%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #playerContainer{
+      height: 13%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'MusicPlayer',
+    mounted(){
+      console.log("Music player is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/Title/TitleText.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="titleTextContainer" class="uiStyle">
+
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #titleTextContainer{
+    width:100%;
+    position:relative;
+    height:20%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'TitleText',
+    mounted(){
+      console.log("Title text is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/components/TitleContent.vue

@@ -0,0 +1,49 @@
+<template>
+    <div id="titleContainer">
+      <PlayerDiv></PlayerDiv>
+      <GeneratedDiv></GeneratedDiv>
+      <TitleTextDiv></TitleTextDiv>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #titleContainer{
+    background-color: transparent;
+    width:100%;
+    position: relative;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #titleContainer{
+      height:100%;
+      width:66.7%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'TitleContent',
+    mounted(){
+      console.log("Title content is loaded!");
+    }
+  };
+</script>