canvas included in the main page, still shiting with vue

front/MyINPulse-front/src/App.vue

@@ -3,6 +3,7 @@ import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 import Header from './components/Header.vue';
 import ProjectComp from './components/Project-comp.vue';
+import CanvasView from './components/canvas/Lean-canvas.vue';
 </script>
 
 <template>
@@ -15,9 +16,28 @@ import ProjectComp from './components/Project-comp.vue';
         :projectName="project.name"
       />
     </div>
+  <div id="canvas">
+      <button @click="$router.push('/canvas')">Voir Canvas</button>
+  </div>
 </template>
 
 <style scoped>
+
+#canvas { /* My shit */
+  margin-top: 20px;
+}
+button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+button:hover {
+  background-color: #0056b3;
+}
+
 </style>
 
 <script lang="ts">
@@ -26,6 +46,7 @@ export default {
   components: {
     Header,
     ProjectComp,
+    CanvasView, // My shit
   },
   data() {
     return {

front/MyINPulse-front/src/components/canvas/Avantage.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>9. Avantage déloyal</h3>
+        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Canaux.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>5. Canaux</h3>
+        <p>Chemins d'accès aux clients</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Couts.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>7. Structure des coûts</h3>
+        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Header.vue

@@ -0,0 +1,37 @@
+<template>
+    <header>
+      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
+      <div class="header-buttons">
+        <div class="contact-menu">
+          <button class="contact-button" @click="toggleDropdown">Contact</button>
+          <div class="contact-dropdown" v-show="isDropdownOpen">
+            <button>Contact All</button>
+            <button>Contact Person 1</button>
+            <button>Contact Person 2</button>
+            <button>Contact Person 3</button>
+          </div>
+          <div class="return"><a href="/">return to list project</a></div>
+        </div>
+      </div>
+    </header>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        isDropdownOpen: false
+      };
+    },
+    methods: {
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Indicateurs.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>8. Indicateurs clés</h3>
+        <p>Activités clés que vous souhaitez évaluer</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Lean-canvas.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="canvas">
+      <div class="row">
+        <Probleme />
+        <Segments />
+      </div>
+      <div class="row">
+        <Solution />
+        <Valeur />
+        <Canaux />
+      </div>
+      <div class="row">
+        <Couts />
+        <Revenus />
+      </div>
+      <div class="row">
+        <Indicateurs />
+        <Avantage />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import Probleme from "./Probleme.vue";
+  import Segments from "./Segments.vue";
+  import Solution from "./Solution.vue";
+  import Valeur from "./Valeur.vue";
+  import Canaux from "./Canaux.vue";
+  import Revenus from "./Revenus.vue";
+  import Couts from "./Couts.vue";
+  import Indicateurs from "./Indicateurs.vue";
+  import Avantage from "./Avantage.vue";
+  
+  export default {
+    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Probleme.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+      <h3>1. Problème</h3>
+      <p>3 problèmes essentiels à résoudre pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Revenus.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>6. Sources de revenus</h3>
+        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Segments.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>2. Segments de clients</h3>
+        <p>Clients cibles</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Solution.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>4. Solution</h3>
+        <p>3 fonctionnalités essentielles pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Valeur.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>3. Proposition de valeur unique</h3>
+        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/style-project.css

@@ -0,0 +1,184 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 10px;
+  }
+  
+  .canvas {
+    display: flex;
+    flex-direction: column;
+    max-width: 1200px;
+    margin: 20px auto;
+    border: 2px dashed #d33;
+    background: #fff;
+  }
+  
+  .row {
+    display: flex;
+  }
+  
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+  
+  .produit {
+    background-color: #f9e4e4;
+  }
+  
+  .marche {
+    background-color: #e4f1f9;
+  }
+  
+  .valeur {
+    background-color: #f9f4e4;
+  }
+  
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #333;
+  }
+  
+  p {
+    margin: 5px 0 0;
+    font-size: 14px;
+  }
+  
+
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+  }
+
+  h1 img {
+    height: 80px;
+  }
+
+  .canvas {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    border: 2px dashed #d33;
+    background-color: #fff;
+  }
+
+  .row {
+    display: flex;
+    margin-bottom: 10px;
+  }
+
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 20px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+
+  #ade {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    text-align: center;
+    background-color: #e8f5e9;
+    border: 2px solid #4caf50;
+    border-radius: 10px;
+  }
+
+  #ade h3 {
+    color: #2e7d32;
+  }
+
+  #ade p {
+    margin: 10px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+  }
+
+  header img {
+    height: 60px;
+  }
+
+  header .contact-menu {
+    position: relative;
+  }
+
+  .expanded {
+    transform: scale(1.2); /* L'élément reste agrandi */
+    transition: transform 0.3s ease; /* Animation fluide */
+  }
+
+  .contact-button, .return {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #2196f3;
+    color: #fff;
+    cursor: pointer;
+  }
+
+ .contact-button:hover, .return:hover {
+    background-color: #1976d2;
+  }
+
+  /* Dropdown styling */
+  .contact-dropdown {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  .contact-dropdown button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4caf50;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .contact-dropdown button:hover {
+    background-color: #388e3c;
+  }
+
+  .return {
+    background-color: #f44336;
+  }
+
+  .return:hover {
+    background-color: #d32f2f;
+  }
+
+  .header-buttons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+
+  a{
+    color: white;
+  }

front/MyINPulse-front/src/main.ts

@@ -25,7 +25,8 @@ keycloakService.CallInit(() => {
 
 })
 
-createApp(App).mount('#app');
+// this shit made by me so i can run the canva vue app
+createApp(App).use(router).mount('#app');
 
 // TODO: fix the comment
 /*

front/MyINPulse-front/src/router/index.ts

@@ -19,6 +19,13 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/Home.vue'),
     },
+
+      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+    {
+      path: '/canvas',
+      name: 'canvas',
+      component: () => import('../views/CanvasView.vue'),
+    },
   ],
 })
 

front/MyINPulse-front/src/views/CanvasView.vue

@@ -0,0 +1,12 @@
+<!-- src/views/CanvasView.vue -->
+<template>
+    <div>
+      <h1>Page Canvas</h1>
+      <LeanCanvas />
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
+  </script>
+