profil menu base

frontend/src/Apps/Profil.vue

@@ -0,0 +1,98 @@
+<script setup>
+  import {reactive} from 'vue'
+  const example =reactive({
+  profilPicture:"../assets/clyde.png",
+  type:"Inscription",
+  lastName:"Ghost",
+  firstName:"Clyde",
+  role:"student",
+  address: "Radiator Springs",
+  email:"ClydeGhost@gmail.com",
+  cursus:{
+  cours1:{  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "Teacher": 42,
+  "Assistants": []},
+  cours2:{ "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "Teacher": 42,
+  "Assistants": []}
+
+  },
+  option:"IT",
+  degree:"BAC1",
+  })
+</script>
+
+
+
+<template>
+  <div class="body">
+  <div class="container">
+    <div class="profilPic">
+      <img class="subContainter" src="../assets/Clyde.png">
+    </div>
+      <div class="globalInfos">
+        <div  style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
+          <div >
+            {{example.firstName}} {{example.lastName.toUpperCase()}}   
+          </div>
+          <div>
+            E-mail: {{example.email}}      
+          </div>
+          <div>
+           {{example.option}} {{example.role.toUpperCase()}} 
+          </div>
+        </div>
+      </div>
+      <div class="moreInfos">
+        <div  style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;" v-for="item in example.cursus
+"></div>
+      </div>
+  </div>
+</div>
+</template>
+<style scoped>
+
+.container{
+  
+  display:grid;
+  grid-template-columns:200px 900px;
+  grid-template-rows:200px auto;
+  column-gap:30px;
+  row-gap:25px;
+  grid-template-areas:
+  "profilPic globalInfos"
+  "minfos minfos";
+}
+
+.profilPic{
+  grid-area:profilPic;
+}
+
+.globalInfos {
+  grid-area:globalInfos;
+  align-self :center;
+
+}
+
+.subContainter{
+  width:100%;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  border:4px solid black;
+}
+
+.moreInfos {
+  grid-area:minfos;
+}
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+
+</style>