feat: canvas are now generic
This commit is contained in:
parent
9d71c93b5b
commit
6a3d4239ab
@ -3,7 +3,7 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||||||
import HelloWorld from './components/HelloWorld.vue'
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
import Header from './components/Header.vue';
|
import Header from './components/Header.vue';
|
||||||
import ProjectComp from './components/Project-comp.vue';
|
import ProjectComp from './components/Project-comp.vue';
|
||||||
import CanvasView from './components/canvas/Lean-canvas.vue';
|
import CanvasView from './components/canvas/LeanCanvas.vue';
|
||||||
import ErrorWrapper from "@/views/errorWrapper.vue";
|
import ErrorWrapper from "@/views/errorWrapper.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
56
front/MyINPulse-front/src/components/canvas/CanvasItem.vue
Normal file
56
front/MyINPulse-front/src/components/canvas/CanvasItem.vue
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['cell', { expanded }]" @click="toggleExpand">
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
<p>{{ description }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String,
|
||||||
|
description: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
expanded: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleExpand() {
|
||||||
|
this.expanded = !this.expanded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "@/components/canvas/style-project.css";
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* Pour empiler le titre et la description */
|
||||||
|
align-items: center; /* Centre horizontalement */
|
||||||
|
justify-content: center; /* Centre verticalement */
|
||||||
|
text-align: center; /* Centre le texte */
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.expanded {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
36
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
36
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<img src="../icons/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>
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="canvas">
|
|
||||||
<Probleme class="Probleme" />
|
|
||||||
<Segments class="Segments" />
|
|
||||||
<Valeur class="Valeur" />
|
|
||||||
<Solution class="Solution" />
|
|
||||||
<Avantage class="Avantage" />
|
|
||||||
<Canaux class="Canaux" />
|
|
||||||
<Indicateurs class="Indicateurs" />
|
|
||||||
<Couts class="Couts" />
|
|
||||||
<Revenus class="Revenus" />
|
|
||||||
</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>
|
|
||||||
.canvas {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(10, 1fr);
|
|
||||||
grid-template-rows: repeat(6, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
|
|
||||||
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
|
|
||||||
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
|
|
||||||
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
|
|
||||||
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
|
|
||||||
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
|
|
||||||
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
|
|
||||||
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
|
|
||||||
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
|
|
||||||
|
|
||||||
.expanded {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%; /* Remplit toute la zone sans dépassement */
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
z-index: 10;
|
|
||||||
background: white; /* S'assurer que le contenu s'affiche correctement */
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optionnel : un petit effet visuel */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
92
front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
Normal file
92
front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<div class="LeanCanvas">
|
||||||
|
<CanvasItem
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="index"
|
||||||
|
:title="item.title"
|
||||||
|
:description="item.description"
|
||||||
|
:class="item.class"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CanvasItem from "./CanvasItem.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CanvasItem
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{ title: "1. Problème",
|
||||||
|
description: "3 problèmes essentiels à résoudre pour le client",
|
||||||
|
class: "Probleme"
|
||||||
|
},
|
||||||
|
{ title: "2. Segments",
|
||||||
|
description: "Les segments de clientèle visés",
|
||||||
|
class: "Segments"
|
||||||
|
},
|
||||||
|
{ title: "3. Valeur",
|
||||||
|
description: "La proposition de valeur",
|
||||||
|
class: "Valeur"
|
||||||
|
},
|
||||||
|
{ title: "4. Solution",
|
||||||
|
description: "Les solutions proposées",
|
||||||
|
class: "Solution"
|
||||||
|
},
|
||||||
|
{ title: "5. Avantage",
|
||||||
|
description: "Les avantages concurrentiels",
|
||||||
|
class: "Avantage"
|
||||||
|
},
|
||||||
|
{ title: "6. Canaux",
|
||||||
|
description: "Les canaux de distribution",
|
||||||
|
class: "Canaux"
|
||||||
|
},
|
||||||
|
{ title: "7. Indicateurs",
|
||||||
|
description: "Les indicateurs clés de performance",
|
||||||
|
class: "Indicateurs"
|
||||||
|
},
|
||||||
|
{ title: "8. Coûts",
|
||||||
|
description: "Les coûts associés",
|
||||||
|
class: "Couts"
|
||||||
|
},
|
||||||
|
{ title: "9. Revenus",
|
||||||
|
description: "Les sources de revenus",
|
||||||
|
class: "Revenus"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.LeanCanvas {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(10, 1fr);
|
||||||
|
grid-template-rows: repeat(6, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 20px auto;
|
||||||
|
border: 2px dashed #d33;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
height: 80vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
|
||||||
|
.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
|
||||||
|
.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
|
||||||
|
.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
|
||||||
|
.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
|
||||||
|
.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
|
||||||
|
.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
|
||||||
|
.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
|
||||||
|
.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -58,14 +58,8 @@ body {
|
|||||||
|
|
||||||
h1 img {
|
h1 img {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
margin: 40px;
|
||||||
|
text-align: center;
|
||||||
.canvas {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 20px;
|
|
||||||
border: 2px dashed #d33;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
@ -117,11 +111,6 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expanded {
|
|
||||||
transform: scale(1.2); /* L'élément reste agrandi */
|
|
||||||
transition: transform 0.3s ease; /* Animation fluide */
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-button, .return {
|
.contact-button, .return {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border: none;
|
border: none;
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<!-- src/views/CanvasView.vue -->
|
<!-- src/views/CanvasView.vue -->
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<header>
|
||||||
|
<HeaderCanvas />
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1>Page Canvas</h1>
|
<h1>Page Canvas</h1>
|
||||||
<LeanCanvas />
|
<LeanCanvas />
|
||||||
@ -7,6 +12,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
|
import HeaderCanvas from '../components/canvas/HeaderCanvas.vue';
|
||||||
|
import LeanCanvas from '../components/canvas/LeanCanvas.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user