edit: création d'une structure responsive qui servira de base pour la suite (structure html & composants vue , class css communes, typo, gamme colorée)

src/App.vue

@@ -2,9 +2,8 @@
 </script>
 
 <template>
-  <div class="test">
+  <mainDiv></mainDiv>
-    <p>It's empty now!</p>
+  <extraDiv></extraDiv>
-  </div>
 </template>
 
 <style scoped>
@@ -15,6 +14,7 @@
   export default {
     name : 'App',
     mounted(){
+      document.documentElement.setAttribute("data-theme", "purple");
       console.log("Vue root app is loaded!");
     }
   };

src/assets/style.css

@@ -1 +1,157 @@
+/*=====================Gamme color + theme*/
+:root[data-theme="purple"]{
+  --dark-color: #380052;
+  --light-color: #C303FF;
+  --accent-color: #00FF76;
+}
 
+:root[data-theme="orange"]{
+  --dark-color: #E67300;
+  --light-color: #99FF99;
+  --accent-color: #00CC00;
+}
+
+:root[data-theme="green"]{
+  --dark-color: #004D33;
+  --light-color: #33FF77;
+  --accent-color: #E600E6;
+}
+
+/*====================Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('./typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('./typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('./typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('./typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*================App racine vue*/
+#app{
+  inset:0;
+  position: fixed;
+  background-color: var(--dark-color);
+}
+
+/*===================Desact. Default*/
+input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+a{
+  text-decoration: none;
+}
+
+/*=====================Classes générales*/
+.windowContainer{
+  border-style: solid;
+  border-width: thin;
+  border-color: var(--light-color);
+  border-radius: 16.1px;
+  background-color: transparent;
+  position: relative;
+  height: 90%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  contain: layout;
+}
+
+.windowTitle{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--light-color);
+  color: var(--dark-color);
+  font-family: 'lineal';
+  font-size: 16.1px;
+  top: 0;
+  border-radius: 16.1px 16.1px 0 0;
+  width:100%;
+  height: 33px;
+}
+
+.titleContent{
+  box-sizing: border-box;
+  padding-left: 16.1px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.titleBtn{
+  margin-right: 16.1px;
+  background-color: var(--light-color);
+  font-family: 'lineal';
+  font-size: 16.1px;
+  color: var(--dark-color);
+  border-color: var(--dark-color);
+  border-style: solid;
+  border-radius: 16.1px;
+  border-width: thin;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 27px;
+  padding: 0 16.1px 0 16.1px;
+}
+
+.titleBtn:hover{
+  background-color: var(--accent-color);
+}
+
+/*=====================Animation*/
+.floating {
+  position: fixed;
+  animation: float 1s ease-in-out infinite;
+}
+
+.floating:hover{
+  animation: none;
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  35%  { transform: translateY(1px); }
+  50%  { transform: translateY(-10px); }
+  65%  { transform: translateY(1px); }
+  100% { transform: translateY(0px); }
+}
+
+.blinking{
+  animation: blink 3.33s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%   { border-color: var(--accent-color);}
+  25%  { border-color: var(--dark-color);}
+  50%  { border-color: var(--accent-color);}
+  75%  { border-color: var(--dark-color);}
+  100%  { border-color: var(--accent-color);}
+}

src/components/ExtraContent.vue

@@ -0,0 +1,162 @@
+<script setup>
+</script>
+
+<template>
+  <div id="extraContainer">
+    <div id="btnPannel">
+      <button type="button" class="btnColStyle"><p>I</p></button>
+      <button type="button" class="btnColStyle"><p>@</p></button>
+      <button type="button" class="btnColStyle"><p>#</p></button>
+      <button type="button" class="btnColStyle"><p>:/</p></button>
+    </div>
+    <div id="contentContainer">
+      <div class="windowContainer" id="contentPannel">
+        
+      </div>
+    </div>
+  </div>
+</template>vh
+<style scoped>
+  /*Template HTML pour section titre pre-styled
+
+  <div class="windowTitle">
+    <div class="titleContent">
+      <p>./ExtraContent.333</p>
+      <button type="button" class="titleBtn"> <p>×</p> </button>
+    </div>
+  </div>
+  */
+  /*=====================Extra Content CSS*/
+
+  .btnColStyle{
+    background-color: var(--dark-color);
+    z-index: 1;
+    font-family: 'lineal';
+    font-size: 33px;
+    color: var(--light-color);
+    border-color: var(--Light-color);
+    border-style: solid;
+    border-radius: 16.1px;
+    border-width: thin;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .btnColStyle:hover{
+    background-color: var(--light-color);
+    color: var(--dark-color);
+  }
+
+  /*=====================format pc*/
+  @media (min-width:800px){
+    #extraContainer{
+      position: fixed;
+      height: 100%;
+      width: 50%;
+      right: 0;
+      background-color: transparent;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      z-index: -2;
+    }
+
+    #btnPannel{
+      position: relative;
+      height: 100%;
+      width: 25%;
+      left:0;
+      padding-top: 2vh;
+      background-color: transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      z-index: 0;
+    }
+
+    #contentContainer{
+      position: relative;
+      height: 100%;
+      width: 75%;
+      left:0;
+      background-color: transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      z-index: 0;
+    }
+
+    #contentPannel{
+      background-color: transparent;
+      z-index: 1;
+    }
+
+    .btnColStyle{
+      width:100%;
+      height:20%;
+      margin-top: 3.33vh;
+    }
+  }
+
+  /*=====================format tel*/
+  @media (max-width:800px){
+    #extraContainer{
+      position: fixed;
+      height: 50%;
+      width: 100%;
+      bottom: 0;
+      background-color: transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      z-index: -2;
+    }
+
+    #btnPannel{
+      position: relative;
+      height: 25%;
+      width: 100%;
+      top: 0;
+      padding-left: 3vw;
+      background-color: transparent;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      z-index: 0;
+    }
+
+    #contentContainer{
+      position: relative;
+      height: 75%;
+      width: 100%;
+      top: 0;
+      background-color: transparent;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      z-index: 0;
+    }
+
+    #contentPannel{
+      background-color: transparent;
+      z-index: 1;
+    }
+    .btnColStyle{
+      width:20%;
+      height:100%;
+      margin-left: 2.666vw;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'ExtraContent',
+    mounted(){
+      console.log("Extra content is loaded!");
+    }
+  };
+</script>

src/components/MainContent.vue

@@ -2,12 +2,63 @@
 </script>
 
 <template>
-  <div class="mainContainer">
+  <div id="mainContainer">
+    <div class="windowContainer" id="mainPannel">
+      <div class="windowTitle">
+        <div class="titleContent">
+          <p>./MainContent.333</p>
+          <button type="button" class="titleBtn"> <p>RELOAD</p> </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-  /*CSS général app*/
+  /*=====================Main Content CSS*/
+
+    /*=====================format pc*/
+    @media(min-width:800px){
+      #mainContainer{
+        position: fixed;
+        height: 100%;
+        width: 50%;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        background-color: transparent;
+        z-index: -2;
+      }
+
+      #mainPannel{
+        background-color: transparent;
+        z-index: 1;
+      }
+
+    }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #mainContainer{
+      position: fixed;
+      height: 50%;
+      width: 100%;
+      top: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+      background-color: transparent;
+      z-index: -2;
+    }
+
+    #mainPannel{
+      background-color: transparent;
+      z-index: 1;
+    }
+  }
 </style>
 
 <script>

src/main.js

@@ -5,12 +5,14 @@ import './assets/style.css'
 import App from './App.vue'
 // import composants
 import MainContent from './components/MainContent.vue'
+import ExtraContent from './components/ExtraContent.vue'
 
 // création app racine
 const app = createApp(App);
 
 //Composants
-app.component('mainDiv',MainContent)
+app.component('mainDiv',MainContent);
+app.component('extraDiv',ExtraContent);
 
 //Démarrage dans div#app de index.html
-app.mount('#app')
+app.mount('#app');