piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

front_foundation #5

Open
mohamed_maoulainine wants to merge 73 commits from front_foundation into main
pull from: front_foundation
merge into: piair:main
Conversation 3 Commits 73 Files Changed 27 +494 -1
16 changed files with 494 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b30e1196f4 - Show all commits

21
front/MyINPulse-front/src/App.vue
View File

@ -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>
piair commented 2025-02-19 08:30:49 +01:00
Outdated
Review
Copy Link

Il faut laisser ça, cela permet d'afficher les messages d'erreurs par desssus le contenu.

Il faut laisser ça, cela permet d'afficher les messages d'erreurs par desssus le contenu.
@ -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 {

21
front/MyINPulse-front/src/components/canvas/Avantage.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Canaux.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Couts.vue Normal file
View File

@ -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>

37
front/MyINPulse-front/src/components/canvas/Header.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Indicateurs.vue Normal file
View File

@ -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>

42
front/MyINPulse-front/src/components/canvas/Lean-canvas.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Probleme.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Revenus.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Segments.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Solution.vue Normal file
View File

@ -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>

21
front/MyINPulse-front/src/components/canvas/Valeur.vue Normal file
View File

@ -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>

184
front/MyINPulse-front/src/components/canvas/style-project.css Normal file
View File

@ -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 {
mohamed_maoulainine marked this conversation as resolved
piair commented 2025-02-19 09:10:39 +01:00
Review
Copy Link

ce serait cool d'utiliser des variables comme ça https://stackoverflow.com/questions/1875852/how-can-i-define-colors-as-variables-in-css , mais c'est aps urgent du tout

ce serait cool d'utiliser des variables comme ça https://stackoverflow.com/questions/1875852/how-can-i-define-colors-as-variables-in-css , mais c'est aps urgent du tout
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;
}
piair commented 2025-02-19 09:12:08 +01:00
Review
Copy Link

Si cela ne concerne que le dropdown d'un contact, cela devrait être dans le style de la view contact

Si cela ne concerne que le dropdown d'un contact, cela devrait être dans le style de la view contact
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;
}

3
front/MyINPulse-front/src/main.ts
View File

@ -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
/*
piair commented 2025-02-19 09:12:55 +01:00
Review
Copy Link

svp, des commentaires plus propres...

svp, des commentaires plus propres...

7
front/MyINPulse-front/src/router/index.ts
View File

@ -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'),
},
],
})

12
front/MyINPulse-front/src/views/CanvasView.vue Normal file
View File

@ -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>