jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'refs/remotes/origin/Profil' into Feature/wip

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-06-20 22:17:11 -04:00
parent b2cbc0814d f1fe81ea13
commit 0a9ae00867
11 changed files with 1419 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/hutopymedia/icons/logohutopy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

74
src/layouts/DefaultLayout.vue
View File

@@ -3,16 +3,22 @@
<body style="background-color: #f4f4f4;">
<!-- PC Version -->
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-container fluid>
<v-row>
<v-menu>
<template v-slot:activator="{ props }">
<v-row>
<!-- Colonne de droite -->
<v-col class="text-right d-flex align-center justify-end">
<v-row align="center"> <!-- Utilisation de align="center" pour aligner verticalement le contenu -->
<v-col class="ml-4">
<router-link to="/">
<v-img src="/images/hutopymedia/icons/logohutopy.png" alt="Description de l'image"
style="height: 70px; width: 70px;" class="mr-2" :elevation="10"></v-img>
</router-link>
</v-col>
<v-col cols="auto" class="ml-auto"> <!-- Utilisation de ml-auto pour aligner à droite -->
<div class="d-flex align-center">
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="header-profile-icon mr-2" alt="Logo">
class="header-profile-icon mr-2" alt="Logo">
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
{{ currentUserName }}
</v-btn>
@@ -35,7 +41,16 @@
</v-btn>
</v-list-item>
<v-list-item v-if="currentUser">
<v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
<router-link :to="{ name: 'yourprofile' }">
<v-btn class="full-width-btn" flat>
<v-icon left class="mr-4">mdi-account-details</v-icon>
<p>Mon profil</p>
</v-btn>
</router-link>
</v-list-item>
<v-list-item v-if="currentUser">
<v-btn @click="logout" class="full-width-btn" flat>Déconnecter</v-btn>
</v-list-item>
</v-list>
</v-menu>
@@ -80,9 +95,15 @@
<v-list-item prepend-icon="mdi-handshake" title="Aidez-nous" value="friends"></v-list-item>
</router-link>
<router-link :to="{ name: 'yourprofile' }">
<v-list-item prepend-icon="mdi-account-details" title="Mon profil" value="friends"> </v-list-item>
</router-link>
<v-list-item v-if="currentUser" @click="openWalletDialog" prepend-icon="mdi-wallet" title="Bourse"
value="wallet"></v-list-item>
<v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
<v-list-item v-if="currentUser" @click="logout" style="margin-top: 110%;" prepend-icon="mdi-logout"
title="Déconnecter" value="logout"></v-list-item>
</v-list>
</v-navigation-drawer>
@@ -135,7 +156,6 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
</v-btn>
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
@@ -146,7 +166,10 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';
import { useRouter } from 'vue-router';
const client = useClient();
const router = useRouter();
const drawer = ref(false);
const currentUserName = ref("INVITÉ");
@@ -172,7 +195,9 @@ onBeforeMount(async () => {
function logout() {
localStorage.removeItem('jwt');
window.location.reload();
currentUser = null;
currentUserName.value = "INVITÉ";
router.push('/');
}
function openWalletDialog() {
@@ -188,18 +213,15 @@ function openWalletDialog() {
padding-right: 24px;
z-index: 1001;
}
.mini-profile-picture {
border-radius: 100px;
}
.header-profile-icon {
height: 60px;
width: 60px;
border-radius: 50px;
border: 2px solid #a30e79;
}
.mobile-profile-picture {
height: 40px;
border-radius: 50px;
@@ -207,37 +229,11 @@ function openWalletDialog() {
border: 2px solid #a30e79;
margin-right: 10px;
}
.header-banner {
border-top: 5px solid rgba(107, 0, 101, 1);
margin-top: 15%;
}
.social-container {
background-color: #006d77;
margin-top: -20%;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.social-container2 {
background-color: #0baab2;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.mobile-header {
height: 50px;
width: auto;
border-radius: 10px;
}
.mobile-navigation-container {
background-color: #a30e79;
}
.h1-navigation {
padding-left: 20%;
font-size: 1.4rem;

4
src/layouts/FooterLayout.vue
View File

@@ -70,7 +70,7 @@ const links = [
'Conditions générales',
'Politique de Contenu',
'À Propos',
'Transactions'
'Frais'
];
const linkRoutes = {
@@ -80,7 +80,7 @@ const linkRoutes = {
'Conditions générales': { name: 'termsandconditions' },
'Politique de Contenu': { name: 'contentpolicy' },
'À Propos': { name: 'about' },
'Transactions': { name: 'transactions' }
'Frais': { name: 'frais' }
};
// If broken link, redirect to home page.

964
src/layouts/MainPage.vue Normal file
View File

@@ -0,0 +1,964 @@
<template>
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
<!-- Router Info and user informations
<v-container style="margin-top: -1%; margin-bottom: 2%;">
<v-row>
<v-col align="center">
<div>
<p>Router : {{ selectedUsername }}</p>
<div v-if="PublicCreatorData">
<h1>{{ PublicCreatorData.userName }}</h1>
<h1>{{ PublicCreatorData.firstName }} {{ PublicCreatorData.lastName }}</h1>
</div>
<div v-else>
<p v-if="errorMessage">{{ errorMessage }}</p>
</div>
<form @submit.prevent="manualFetch">
<input v-model="manualUsername" placeholder="Enter username" />
<button type="submit">Fetch User</button>
</form>
</div>
</v-col>
</v-row>
</v-container>
-->
<div style="background-color: #f4f4f4;">
<!-- Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0;" hidden-md-and-down>
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<!-- PurpleLine -->
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"></v-row>
<!-- Profile picture -->
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
</v-row>
<!-- User Social Network Links -->
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
hidden-md-and-down>
<!-- Facebook -->
<v-row no-gutters class="d-flex justify-space-between align-center"
style="margin-left: 3%; margin-right: 3%;">
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
class="d-flex justify-center align-center">
<a href="https://www.facebook.com/GuillaumeMousseau222">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Facebook"></v-img>
</a>
</v-col>
<!-- Instagram -->
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
class="d-flex justify-center align-center">
<a href="https://www.instagram.com/guillaumeaime/">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Instagram"></v-img>
</a>
</v-col>
<!-- Profile picture - Small -->
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
<v-row class="d-flex justify-center align-center">
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
</v-row>
</v-col>
<!-- TikTok -->
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
class="d-flex justify-center align-center">
<a href="https://www.tiktok.com/@guillaumeaime">
<v-img class="socialicons-mobile invert-color"
src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok"></v-img>
</a>
</v-col>
<v-spacer class="hidden-xs"> </v-spacer>
</v-row>
<!-- User informations Name title and description -->
<v-row class="social-container-mobile">
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
<v-row class="d-flex justify-center">
{{ name }}
</v-row>
</v-col>
<v-spacer xs="12" sm="4"></v-spacer>
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
<v-row class="d-flex justify-center">
{{ title }}
</v-row>
</v-col>
</v-row>
<v-row>
<v-container
style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
class="social-icon-group-mobile">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :"></v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
</v-container>
<!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0;"
hidden-sm-and-up>
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row class="hidden-sm-and-down"
style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up></v-row>
<!-- Core (Menu / Center / Donation) -->
<v-row>
<!-- Menu -->
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
<v-col style="margin: 0;">
<v-row class="Hutopy-menu-sticky-mobile">
<v-spacer></v-spacer>
<v-col>
<v-container style=" overflow-y: hidden;">
<!-- Nav-Btn -->
<v-col cols="12" class="px-0">
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
<v-list dense class="main-background">
<v-list-item v-for="item in navigationItems" :key="item.link">
<router-link :to="item.link">
<v-btn text class="d-flex align-start align-center main-background"
elevation="0" outlined="false">
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item>
</v-list>
</v-col>
</v-container>
</v-col>
</v-row>
<v-row style="height: 300px;"></v-row>
</v-col>
</v-col>
<!-- Profile Info Picture name title & description -->
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
<div v-if="PublicCreatorData">
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
<v-container>
<v-img :src="profilePicture"
class="elevation-4 mobile-profile-picture-creator"></v-img>
<!-- User informations Name & title -->
<v-container class="background-profile-container" style="margin-top: -8%;">
<v-row>
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
<h1 class="name-info">{{ PublicCreatorData.userName }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<v-row>
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
<h1 class="occupation-info">{{ title }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<!-- User Social Network Links -->
<v-row>
<v-spacer></v-spacer>
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
<v-row>
<a href="https://www.facebook.com/GuillaumeMousseau222">
<img class="socialicons"
src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
<img class="socialicons"
src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2">
</a>
<a href="https://www.tiktok.com/@guillaumeaime">
<img class="socialicons invert-color"
src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="Description image 2">
</a>
</v-row>
</v-col>
<v-col background-color="primary"></v-col>
</v-row>
<!-- Description -->
<v-row>
<v-container
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify"
style="color: white;"
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
</v-container>
</v-container>
</v-container>
</v-col>
</v-row>
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
</v-col>
</v-row>
</div>
<div v-else>
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8" align="center">
<v-card class="pa-5" elevation="2" style="max-width: 400px;">
<v-row class="d-flex justify-center align-center">
<v-icon size="128" color="grey">mdi-magnify</v-icon>
</v-row>
<v-row class="d-flex justify-center align-center">
<p>L'utilisateur <span style="color: red;">{{ selectedUsername }}</span> n'a pas
été trouvé</p>
</v-row>
</v-card>
</v-col>
</v-row>
</div>
</v-col>
<!-- Large-Monitor-RightCol Donation -->
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
<v-row>
<v-col>
<v-container class="sticky-bottom-label Je-soutien-container"
style="max-width: 400px ; bottom: 0;">
<!-- Donnation -->
<v-card style="border-radius: 20px;">
<v-container>
<v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
<v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS!
</v-card-title>
</v-row>
<StripePayment></StripePayment>
</v-container>
</v-card>
</v-container>
<v-container style="height: 300px;">
</v-container>
</v-col>
<v-spacer>
</v-spacer>
</v-row>
</v-col>
</v-row>
<v-snackbar v-model="errorSnackBar">
{{ snackBarMessage }}
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
</template>
</v-snackbar>
<!-- Mobile Donation -->
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<!-- Barre cliquable pour ouvrir le drawer -->
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
JE SOUTIENS
</v-btn>
</v-col>
<!-- Drawer du bas -->
<template>
<div>
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
<h1 class="text-soutiens">JE SOUTIENS</h1>
<StripePayment></StripePayment>
</v-container>
</v-bottom-sheet>
</div>
</template>
</div>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from "@/plugins/api.js";
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import StripePayment from '../views/StripePayment.vue';
const PublicCreatorData = ref(null);
const selectedUsername = ref('');
const route = useRoute();
const client = useClient();
let errorSnackBar = ref(false);
let snackBarMessage = ref('');
const errorMessage = ref('');
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
let drawerbottom = ref(false);
const name = computed(() => {
return PublicCreatorData.value ? PublicCreatorData.value.userName : '';
});
const title = 'Créateur de contenus';
let navigationItems = [
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
];
const fetchUser = async (username) => {
console.log(`Fetching user: ${username}`);
try {
const response = await client.get(`/api/Users`, {
params: {
UserName: username
}
});
const data = response.data;
console.log(`Data received: `, data);
if (data && Object.keys(data).length > 0 && (data.userName || data.firstName || data.lastName)) {
PublicCreatorData.value = data; // Met à jour la référence réactive
errorMessage.value = '';
errorSnackBar.value = false;
} else {
PublicCreatorData.value = null; // Réinitialise la référence si l'utilisateur n'est pas trouvé
errorMessage.value = "Utilisateur non trouvé";
snackBarMessage.value = "Utilisateur non trouvé";
errorSnackBar.value = true;
}
} catch (error) {
console.error(`Error fetching user: ${error}`);
PublicCreatorData.value = null;
errorMessage.value = "Erreur lors de la récupération des données";
snackBarMessage.value = "Erreur lors de la récupération des données";
errorSnackBar.value = true;
}
};
const updateUser = () => {
selectedUsername.value = route.params.username;
console.log(`Route username: ${selectedUsername.value}`);
if (selectedUsername.value) {
fetchUser(selectedUsername.value);
}
};
onMounted(updateUser);
watch(() => route.params.username, updateUser);
</script>
<style scoped>
.invert-color {
filter: invert(1);
}
.Hutopy-menu-sticky-mobile {
position: sticky;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
margin-top: -40px;
}
.sticky-bottom-label {
position: sticky;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
margin-top: 20px;
}
.sticky-top-label {
position: sticky;
bottom: 0;
right: 10%;
width: 100%;
z-index: 1000;
}
.text-soutiens {
margin-bottom: 15px;
color: white;
font-size: 1.5rem;
letter-spacing: 7px;
text-align: center;
}
.name-info {
margin-top: -10px;
margin-left: 15%;
}
.occupation-info {
margin-left: 15%;
font-size: large;
}
.name-info-mobile {
margin-left: 22px;
font-size: 1.3rem
}
.main-background {
background-color: #f4f4f4;
}
.profile-container {
margin-top: -16%;
}
.btn-custom {
width: 100%;
background-color: transparent;
}
.background-profile-container {
background-color: #ececec;
color: white;
border-top: 3px solid #a30e79;
border-right: 3px solid #a30e79;
font-weight: 700;
font-size: 1.15rem;
border-radius: 25px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
}
.background-pink {
background-color: #cc6f91;
color: white;
font-weight: 400;
}
.label-text {
font-weight: 400;
margin-left: 3%;
font-size: 1rem;
}
.profile-name {
margin-top: -15%;
}
.socialicons {
width: 35px;
max-width: 100px;
margin-top: 3px;
margin-left: 40px;
}
.socialicons-mobile {
width: 35px;
max-width: 100px;
margin-top: 27px;
margin-left: 20px;
}
.youtube-card {
margin-left: 2%;
margin-right: 2%;
border-radius: 15px;
background-color: #f4f4f4;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
}
.card-title {
font-size: 1.4rem;
margin-top: 10px;
}
.card-date {
margin-left: 10px;
margin-top: -18px;
margin-bottom: -20px;
font-size: .8rem;
}
.social-container {
background-color: #006d77;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
font-size: 1.7rem;
font-weight: 600;
color: white;
}
.social-container2 {
background-color: #0baab2;
border-bottom-right-radius: 30px;
font-size: 1.4rem;
font-weight: 500;
color: white;
}
.social-container-mobile {
background-color: #006d77;
font-size: 1.4rem;
font-weight: 600;
color: white;
z-index: 1000;
margin: auto;
text-align: center;
}
.social-container2-mobile {
background-color: #0baab2;
z-index: 1000;
font-size: 1.2rem;
font-weight: 500;
color: white;
}
.social-icon-group-mobile {
background-color: #0baab2;
}
.mini-profile-picture {
border-radius: 100px;
}
.btn-card-options {
background-color: #f4f4f4;
width: 50px;
margin-left: -12px;
margin-top: 10px;
}
.mobile-profile-picture-creator {
border-radius: 100px;
height: 150px;
width: 150px;
border-radius: 50%;
max-width: 150px;
border: 4px solid white;
z-index: 1000;
}
.mobile-header {
height: 50px;
margin-left: -13%;
margin-top: 6%;
}
.h1-navigation {
text-align: center;
font-weight: 600;
margin-bottom: 10%;
}
.mobile-profile-picture {
height: 40px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 2px solid #a30e79;
margin-right: 10px
}
.profile-banner {
margin-top: 25px;
min-height: 200px
}
.v-navigation-drawer {
max-height: 100vh;
}
@media (min-width: 150px) and (max-width: 474px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(-30%) translateX(0%);
}
.socialicons-mobile {
width: 35px;
max-width: 100px;
margin-top: 0px;
margin-left: 20px;
}
}
@media (min-width: 475px) and (max-width: 599px) {
.socialicons-mobile {
width: 35px;
max-width: 100px;
margin-top: 0px;
margin-left: px;
}
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(-30%) translateX(0%);
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -112px;
}
.occupation-info {
font-size: 1rem;
}
.card-youtube {
min-height: 250px;
}
.name-info-mobile {
font-size: 1.6rem;
}
}
@media (min-width: 599px) and (max-width: 749px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(0%);
}
.profile-container {
width: 110%;
margin-left: -3%;
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -110px;
}
.name-info {
font-size: 1.2rem;
}
.occupation-info {
font-size: 1rem;
}
.card-youtube {
min-height: 330px;
}
}
@media (min-width: 750px) and (max-width: 960px) {
.mobile-profile-picture-creator {
transform: scale(1.8) translateY(25%) translateX(0%);
}
.profile-container {
width: 110%;
margin-left: -3%;
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -110px;
}
.name-info {
font-size: 1.2rem;
}
.occupation-info {
font-size: 1rem;
}
.card-youtube {
min-height: 425px;
}
}
@media (min-width: 960px) and (max-width: 1280px) {
.middle-col {
margin-left: -30px;
}
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container {
margin-top: -185px;
min-width: 480px
}
.card-youtube {
min-height: 270px;
}
.Je-soutien-container {
min-width: 325px;
margin-left: -35px;
}
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(25%) translateX(-50px);
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
margin-top: -6px
}
.occupation-info {
margin-left: 40px;
margin-top: -8px
}
.social-container {
margin-left: 80px;
min-width: 270px;
max-height: 40px
}
.social-container2 {
margin-left: 50px;
min-width: 250px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
}
@media (min-width: 1280px) and (max-width: 1600px) {
.text-soutiens {
font-size: 1.3rem;
letter-spacing: 8px;
}
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(25%) translateX(-50px);
}
.profile-container {
margin-top: -180px;
}
.card-youtube {
min-height: 290px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 350px;
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
margin-top: -6px
}
.social-container {
margin-left: 90px;
min-width: 350;
max-height: 40px
}
.occupation-info {
margin-left: 70px;
margin-top: -8px
}
.social-container2 {
margin-left: 40px;
min-width: 290px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.text-soutiens {
font-size: 1.3rem;
}
.mobile-profile-picture-creator {
transform: scale(1.4) translateY(25%) translateX(-40px);
}
.profile-container {
margin-top: -171px;
}
.card-youtube {
min-height: 355px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 400px;
}
.name-info {
font-size: 1.5rem;
margin-top: -4px;
margin-left: 35px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 75px;
margin-top: -2px
}
.social-container2 {
margin-left: 70px;
min-width: 300px;
}
}
@media (min-width: 1920px) and (max-width: 2559px) {
.text-soutiens {
font-size: 1.3rem;
}
.profile-container {
margin-top: -160px;
}
.card-youtube {
min-height: 380px;
}
.Je-soutien-container {
min-width: 400px;
}
.mobile-profile-picture-creator {
transform: scale(1.4) translateY(25%) translateX(-40px);
}
.name-info {
font-size: 1.5rem;
margin-left: 35px;
margin-top: -4px;
}
.social-container {
margin-left: 100px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 110px;
margin-top: -4px
}
.social-container2 {
margin-left: 30px;
min-width: 360px;
}
.socialicons {
width: 38px;
max-width: 100px;
margin-top: 13px;
margin-left: 40px;
}
}
@media (min-width: 2560px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px);
}
.card-youtube {
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
.name-info {
font-size: 2rem;
}
.social-container {
margin-left: 140px;
}
.social-container2 {
margin-left: 130px;
}
.occupation-info {
font-size: 1.5rem;
margin-left: 65px;
margin-top: -6px
}
.socialicons {
width: 45px;
max-width: 100px;
margin-top: 15px;
margin-left: 40px;
}
}
</style>

267
src/router/index.js
View File

@@ -3,159 +3,162 @@ import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
import About from '@/views/tos/About.vue'
import ContentPolicy from '@/views/tos/ContentPolicy.vue'
import FAQ from '@/views/tos/FAQ.vue'
import Frais from '@/views/tos/Frais.vue'
import GuideForCreators from '@/views/tos/GuideForCreators.vue'
import HelpAndContact from '@/views/tos/HelpAndContact.vue'
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
import Transactions from '@/views/tos/Transactions.vue'
import { createRouter, createWebHistory } from 'vue-router'
import MainPage from '../layouts/MainPage.vue'
import LoginView from '../views/LoginView.vue'
import PaymentCompleted from '../views/PayementCompleted.vue'
import SignupView from '../views/SignupView.vue'
import UserBrowser from '../views/UsersBrowser.vue'
import ContactView from '../views/main/ContactView.vue'
import CreatorMainPage from '../views/main/CreatorMainPage.vue'
import CreatorFolio from '../views/main/CreatorFolio.vue'
import HomeView from '../views/main/HomeView.vue'
import UserBrowser from '../views/main/UsersBrowser.vue'
import YourProfile from '../views/main/YourProfile.vue'
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
import Hutopy from '../views/manualusers/HutopyProfile.vue'
import Leffet from '../views/manualusers/LeffetProfile.vue'
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
const routes = [
{
path: '/',
name: 'main',
component: HomeView
},
{
path: '/creatorfolio',
name: 'creatorfolio',
component: CreatorFolio
},
{
path: '/paymentcompleted',
name: 'PayementCompleted',
component: PaymentCompleted
},
{
path: '/yourprofile',
name: 'yourprofile',
component: YourProfile
},
{
path: '/contact',
name: 'contact',
component: ContactView
},
{
path: '/signup',
name: 'signup',
component: SignupView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/home',
name: 'home',
component: HomeView
},
{
path: '/helpandcontact',
name: 'helpandcontact',
component: HelpAndContact
},
{
path: '/termsandconditions',
name: 'termsandconditions',
component: TermsAndConditions
},
{
path: '/contentpolicy',
name: 'contentpolicy',
component: ContentPolicy
},
{
path: '/faq',
name: 'FAQ',
component: FAQ
},
{
path: '/guideforcreators',
name: 'guideforcreators',
component: GuideForCreators
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/frais',
name: 'frais',
component: Frais
},
{
path: '/Hutopy',
name: 'Hutopy',
component: Hutopy
},
{
path: '/Leffet',
name: 'Leffet',
component: Leffet
},
{
path: '/userbrowser',
name: 'userbrowser',
component: UserBrowser
},
{
path: '/chloebeaugrand',
name: 'chloebeaugrand',
component: ChloeBeaugrand
},
{
path: '/guillaumeaime',
name: 'guillaumeaime',
component: GuillaumeAime
},
{
path: '/mathieucaron',
name: 'mathieucaron',
component: MathieuCaron
},
{
path: '/arps',
name: 'arps',
component: ARPS
},
{
path: '/:username',
name: 'user-profile',
component: MainPage
},
{
path: '/creatorFolio',
name: 'creatorFolio',
component: CreatorFolio
},
{
path: '/creatormainpage',
name: 'creatormainpage',
component: CreatorMainPage
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'main',
component: HomeView
},
{
path: '/creatorfolio',
name: 'creatorfolio',
component: CreatorFolio
},
{
path: '/paymentcompleted',
name: 'PayementCompleted',
component: PaymentCompleted
},
{
path: '/yourprofile',
name: 'yourprofile',
component: YourProfile
},
{
path: '/contact',
name: 'contact',
component: ContactView
},
{
path: '/signup',
name: 'signup',
component: SignupView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/home',
name: 'home',
component: HomeView
},
{
path: '/helpandcontact',
name: 'helpandcontact',
component: HelpAndContact
},
{
path: '/termsandconditions',
name: 'termsandconditions',
component: TermsAndConditions
},
{
path: '/contentpolicy',
name: 'contentpolicy',
component: ContentPolicy
},
{
path: '/faq',
name: 'FAQ',
component: FAQ
},
{
path: '/guideforcreators',
name: 'guideforcreators',
component: GuideForCreators
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/transactions',
name: 'transactions',
component: Transactions
},
{
path: '/Hutopy',
name: 'Hutopy',
component: Hutopy
},
{
path: '/Leffet',
name: 'Leffet',
component: Leffet
},
{
path: '/userbrowser',
name: 'userbrowser',
component: UserBrowser
},
{
path: '/chloebeaugrand',
name: 'chloebeaugrand',
component: ChloeBeaugrand
},
{
path: '/guillaumeaime',
name: 'guillaumeaime',
component: GuillaumeAime
},
{
path: '/mathieucaron',
name: 'mathieucaron',
component: MathieuCaron
},
{
path: '/arps',
name: 'arps',
component: ARPS
},
{
path: '/guillaumeaime',
name: 'guillaumeaime',
component: GuillaumeAime
},
],
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 };
}
})
export default router

564
src/views/main/CreatorFolio.vue
View File

@@ -4,10 +4,10 @@
<!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
style="margin-top: -10px; position: relative; z-index: 0;">
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
@@ -22,22 +22,21 @@
</v-row>
<!-- User Social Network Links -->
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
hidden-md-and-down>
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons">
<!-- Facebook -->
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.facebook.com/GuillaumeMousseau222">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Facebook"></v-img>
alt="Facebook"></v-img>
</a>
</v-col>
<!-- Instagram -->
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.instagram.com/guillaumeaime/">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Instagram"></v-img>
alt="Instagram"></v-img>
</a>
</v-col>
<!-- Profile picture - Small -->
@@ -51,16 +50,11 @@
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.tiktok.com/@guillaumeaime">
<v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="TikTok"></v-img>
alt="TikTok"></v-img>
</a>
</v-col>
<v-spacer class="hidden-xs"> </v-spacer>
</v-row>
<!-- User informations Name title and description -->
@@ -79,14 +73,12 @@
</v-row>
<v-row>
<v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
class="social-icon-group-mobile">
class="social-icon-group-mobile">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :">
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
@@ -95,21 +87,19 @@
</v-container>
<!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
hidden-sm-and-up>
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0;">
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
hidden-sm-and-up>
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
<!-- "Core (Menu / Center / Donation)" -->
<v-row>
<!-- "Menu" -->
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col">
<v-col style="margin: 0;">
<v-row class="Hutopy-menu-sticky-mobile">
<v-spacer></v-spacer>
@@ -118,101 +108,16 @@
<!-- Nav-Btn -->
<v-col cols="12" class="px-0">
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
<v-list dense class="main-background">
<v-list-item v-for="item in navigationItems" :key="item.link">
<router-link :to="item.link">
<v-btn text class="d-flex align-start align-center main-background" elevation="0"
outlined="false">
<v-btn text class="d-flex align-start align-center main-background" elevation="0">
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
</router-link>
</v-list-item>
<v-list-item>
<v-dialog transition="dialog-top-transition" width="auto">
<!-- <template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-wallet</v-icon>
<p @click="isActive.value = false">Bourse</p>
</v-btn>
</template>-->
<!-- Wallet Modale -->
<template v-slot:default="{ isActive }">
<v-card style="border-radius: 30px;">
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
<v-icon left size="48">mdi-wallet</v-icon>
<v-toolbar title="PORTEFEUILLE"
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
</div>
<v-card-text class="text-h1 pa-12">
<v-row>
<v-col>
<v-row>
<v-col cols="7">
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
</v-col>
<v-col>
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
<p></p>
</v-col>
</v-row>
</v-col>
<v-col>
<v-row>
<v-col cols="8">
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
</v-col>
<v-col>
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
<p></p>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="justify-center">
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
</v-card-actions>
</v-card>
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
<v-row>
<v-col style="margin-right: -2%;" cols="1"
class="text-truncate text-center font-weight-bold">#T</v-col>
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
class="text-truncate text-center font-weight-bold">$</v-col>
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
<v-col cols="3" class="text-truncate text-center font-weight-bold"
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
</v-row>
</v-card>
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
<v-row>
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
class="text-truncate">10$</v-col>
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
<v-col cols="3" class="text-truncate"
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
<v-col cols="5" class="text-truncate">Good Job</v-col>
</v-row>
</v-card>
</template>
</v-dialog>
</v-list-item>
</v-list>
</v-col>
</v-container>
@@ -223,268 +128,162 @@
</v-col>
<!-- Profile Info Picture name title & description -->
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
<v-container>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
<!-- User informations Name & title -->
<v-container class="background-profile-container" style="margin-top: -8%;">
<v-row>
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
<h1 class="name-info">{{ name }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<v-row>
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
<h1 class="occupation-info">{{ title }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<!-- User Social Network Links -->
<v-row>
<v-spacer></v-spacer>
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<v-container class="profile-container hidden-sm-and-down">
<v-container>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
<!-- User informations Name & title -->
<v-container class="background-profile-container" style="margin-top: -8%;">
<v-row>
<a href="https://www.facebook.com/GuillaumeMousseau222">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2">
</a>
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
<h1 class="name-info">{{ name }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<v-row>
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
<h1 class="occupation-info">{{ title }}</h1>
</v-col>
<v-col></v-col>
</v-row>
<a href="https://www.tiktok.com/@guillaumeaime">
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="Description image 2">
</a>
<!-- User Social Network Links -->
<v-row>
<v-spacer></v-spacer>
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
<v-row>
<a href="https://www.facebook.com/GuillaumeMousseau222">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2">
</a>
<a href="https://www.tiktok.com/@guillaumeaime">
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="Description image 2">
</a>
</v-row>
</v-col>
<v-col background-color="primary"></v-col>
</v-row>
<!-- Description -->
<v-row>
<v-container
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
</v-container>
</v-container>
</v-container>
</v-col>
</v-row>
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
</v-col>
</v-row>
<!-- Example carte dynamique avec expension -->
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">POST DYNAMIQUE</h1>
</v-col>
<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
<v-col background-color="primary"></v-col>
</v-row>
<!-- Description -->
<v-row>
<v-container
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
title="À propos : Ma mission est claire :">
</v-expansion-panel>
<v-img :src="imageSrc" title="Guillaumem"></v-img>
<p class="text-justify pa-10" style="margin-bottom: -10px; font-size: 1em">
C’est un honneur de vous présenter mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement.
</p>
<div v-if="showMore">
<v-row no-gutters>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png" @click="openCarousel(0)" class="image-full"></v-img>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png" @click="openCarousel(1)" class="image-full"></v-img>
</v-col>
</v-row>
<p class="text-justify pa-10" style="font-size: 1em; margin-bottom: -25px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="text-justify pa-10" style="font-size: 1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<p class="text-justify pa-10" style="font-size: 1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire"></v-text-field>
<v-row>
<v-col class="text-right" style="margin-right: 25px">
<v-btn variant="plain" @click="toggleShowMore" class="text-body-2" style="margin-bottom: 10px; font-weight: bold">
{{ showMore ? 'AFFICHER MOINS' : 'AFFICHER PLUS' }}
</v-btn>
</v-col>
</v-row>
</v-card>
</v-container>
</v-container>
</v-container>
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
</v-col>
<v-dialog v-model="carouselVisible" max-width="600px">
<v-carousel v-model="currentImage">
<v-carousel-item v-for="(image, index) in images" :key="index">
<v-img :src="image"></v-img>
</v-carousel-item>
</v-carousel>
</v-dialog>
</v-row>
<!-- Card youtube balado -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
MON PREMIER BALADO</h1>
</v-col>
<!--<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
<v-container>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
présenter
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
le
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
agence
créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
personnelle,
"Guillaume aime", où je partage tout ce qui me passionne.</p>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
<!-- Card nouvelle boutique -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
</v-col>
<!--<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
<v-container>
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
title="Guillaumem"></v-img>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
boutique
à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
le
savoir-faire québécois !
J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
Carl
pour ce projet!</p>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
<!-- Card nouvelle boutique -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
C'EST PARTI POUR 2024!</h1>
</v-col>
<!--
<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
<v-container>
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
title="Guillaumem"></v-img>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
22-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
retour au
travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
lumière les
entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
n'hésite
pas à me contacter.</p>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
</v-col>
<!-- "Large-Monitor-RightCol" Donation -->
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down">
<v-row>
<v-col>
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
@@ -492,7 +291,7 @@
<v-card style="border-radius: 20px;">
<v-container>
<v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
<v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS!
</v-card-title>
@@ -511,12 +310,11 @@
</v-row>
<!-- "Mobile" Donation -->
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<v-col class="hidden-md-and-up sticky-bottom-label"
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<!-- Barre cliquable pour ouvrir le drawer -->
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
JE SOUTIENS
</v-btn>
</v-col>
@@ -530,7 +328,6 @@
<StripePayment></StripePayment>
</v-container>
</v-bottom-sheet>
</div>
</template>
@@ -544,17 +341,39 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
import PostContentMenu from '@/layouts/PostContentMenu.vue';
import { ref } from 'vue';
import StripePayment from '../StripePayment.vue';
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
let name = 'Guillaume Mousseau'
let title = 'Créateur de contenus'
let drawerbottom = ref(false)
let name = 'Guillaume Mousseau';
let title = 'Créateur de contenus';
let drawerbottom = ref(false);
let navigationItems = [
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
];
// Ajouter la variable réactive pour gérer l'état d'affichage du contenu
let showMore = ref(false);
// Ajouter les variables et méthodes pour gérer le carrousel
let carouselVisible = ref(false);
let currentImage = ref(0);
let images = [
'/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
'/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg',
// Ajoutez ici toutes les images que vous souhaitez afficher dans le carrousel
];
const toggleShowMore = () => {
showMore.value = !showMore.value;
};
const openCarousel = (index) => {
currentImage.value = index;
carouselVisible.value = true;
};
</script>
<style scoped>
@@ -562,7 +381,6 @@ let navigationItems = [
filter: invert(1);
}
.Hutopy-menu-sticky-mobile {
position: sticky;
top: 0;
@@ -688,8 +506,6 @@ let navigationItems = [
font-size: .8rem;
}
.social-container {
background-color: #006d77;
border-top-right-radius: 30px;
@@ -1095,9 +911,6 @@ let navigationItems = [
}
@media (min-width: 2560px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px);
}
@@ -1112,7 +925,6 @@ let navigationItems = [
.name-info {
font-size: 2rem;
}
.social-container {

11
src/views/main/CreatorMainPage.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<default-layout></default-layout>
<banner></banner>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import Banner from '@/views/main/CreatorViewComponents/Banner.vue';
</script>

21
src/views/main/CreatorViewComponents/Banner.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<v-container fluid>
<!-- Bannière Pc -->
<v-row style="margin-top: -15px; position: relative; z-index: 0; width: 100vw;">
<v-col cols="12" class="pa-0">
<v-img class="profile-banner" max-height="375" max-width="100%" :src="imageSrc" cover
style="width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row >
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
</v-container>
</template>
<script setup>
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
</script>

2
src/views/UsersBrowser.vue → src/views/main/UsersBrowser.vue
View File

@@ -236,7 +236,7 @@
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import StripePayment from './StripePayment.vue';
import StripePayment from '../StripePayment.vue';
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
let name = 'Hutopy'

101
src/views/main/YourProfile.vue
View File

@@ -3,82 +3,102 @@
<body style="background-color:#f4f4f4">
<DefaultLayout></DefaultLayout>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
</v-row>
<v-row justify="center">
<v-col cols="12">
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
<v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
<v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
<v-col cols="12" class="text-right">
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
<v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
</v-col>
</v-row>
<v-row justify="center">
</v-row>
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
<v-container>
<v-row>
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
<v-row style="margin-bottom: 20px;">
<v-spacer></v-spacer>
<v-col style="margin-top: -70px;">
<v-row>
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-row>
<v-col>
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
<v-row justify="center">
<v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
<v-row justify="center" style="margin-bottom: 20px;">
<v-col cols="auto" class="d-flex justify-center">
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-col>
<v-col cols="auto" class="d-flex justify-center align-center">
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
<v-spacer></v-spacer>
</v-row>
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
{{ userName }}
</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
{{ firstName }} {{ lastName }}
</p>
<v-form>
<v-text-field v-model="firstName" label="Prénom"></v-text-field>
<v-text-field v-model="lastName" label="Nom"></v-text-field>
<v-text-field v-model="titre" label="Titre"></v-text-field>
<v-text-field v-model="description" label="Description"></v-text-field>
<v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="description" label="Description"
:readonly="!isEditing"></v-text-field>
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
<v-col class="text-right">
<router-link :to="{ name: 'creatorfolio' }" class="">
<v-btn style="margin-right: 20px;">Retour</v-btn>
</router-link>
<v-btn>Éditer</v-btn>
<v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
</v-col>
</v-col>
</v-row>
</v-container>
</v-container>
<FooterLayout></FooterLayout>
</body>
</template>
<script setup>
<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';
const client = useClient();
const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
const firstName = ref('');
const lastName = ref('');
const userName = ref('');
const titre = ref('');
const description = ref('');
const isEditing = ref(false);
const fetchUserData = async () => {
try {
const myUser = await client.get("/api/GetMyUser");
const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
firstName.value = currentUserModel.firstName;
lastName.value = currentUserModel.lastName;
userName.value = currentUserModel.userName;
// Assignez d'autres champs si nécessaire
} catch (error) {
console.error('Error fetching user data:', error);
}
};
const toggleEdit = () => {
isEditing.value = !isEditing.value;
};
onBeforeMount(fetchUserData);
</script>
<style>
@@ -86,7 +106,6 @@ const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerG
width: 300px;
border-radius: 40px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.row-shadow {

4
src/views/tos/Transactions.vue → src/views/tos/Frais.vue
View File

@@ -14,7 +14,7 @@
<v-container style="z-index: 100; position: relative;">
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
class="header-text-size">
<v-typography class="headline text-center">Transactions</v-typography>
<v-typography class="headline text-center">Frais</v-typography>
</v-row>
</v-container>
@@ -34,7 +34,7 @@
<v-spacer></v-spacer>
<v-col cols="7">
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
Transactions
Frais
</p>
<p style="margin-top: 25px; margin-bottom: 25px;">