Modification Main page
This commit is contained in:
PascalMarchesseault
@@ -70,7 +70,7 @@ const links = [
|
|||||||
'Conditions générales',
|
'Conditions générales',
|
||||||
'Politique de Contenu',
|
'Politique de Contenu',
|
||||||
'À Propos',
|
'À Propos',
|
||||||
'Transactions'
|
'Frais'
|
||||||
];
|
];
|
||||||
|
|
||||||
const linkRoutes = {
|
const linkRoutes = {
|
||||||
@@ -80,7 +80,7 @@ const linkRoutes = {
|
|||||||
'Conditions générales': { name: 'termsandconditions' },
|
'Conditions générales': { name: 'termsandconditions' },
|
||||||
'Politique de Contenu': { name: 'contentpolicy' },
|
'Politique de Contenu': { name: 'contentpolicy' },
|
||||||
'À Propos': { name: 'about' },
|
'À Propos': { name: 'about' },
|
||||||
'Transactions': { name: 'transactions' }
|
'Frais': { name: 'frais' }
|
||||||
};
|
};
|
||||||
|
|
||||||
// If broken link, redirect to home page.
|
// If broken link, redirect to home page.
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container style="margin-top: 5%;">
|
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||||
<v-row style="background-color: #c4c4c4;">
|
|
||||||
|
<!--
|
||||||
|
<v-container style="margin-top: -1%; margin-bottom: 2%;">
|
||||||
|
<v-row>
|
||||||
<v-col align="center">
|
<v-col align="center">
|
||||||
<div>
|
<div>
|
||||||
<p>Router : {{ selectedUsername }}</p>
|
<p>Router : {{ selectedUsername }}</p>
|
||||||
@@ -20,19 +23,302 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
-->
|
||||||
|
|
||||||
<v-snackbar v-model="errorSnackBar">
|
<div style="background-color: #f4f4f4;">
|
||||||
{{ snackBarMessage }}
|
<!-- Mobile -->
|
||||||
<template v-slot:actions>
|
<v-row class="fluid hidden-md-and-up social-mobile-container"
|
||||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
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>
|
</template>
|
||||||
</v-snackbar>
|
</div>
|
||||||
|
<FooterLayout></FooterLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import { useClient } from "@/plugins/api.js";
|
import { useClient } from "@/plugins/api.js";
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import StripePayment from '../views/StripePayment.vue';
|
||||||
|
|
||||||
const PublicCreatorData = ref(null);
|
const PublicCreatorData = ref(null);
|
||||||
const selectedUsername = ref('');
|
const selectedUsername = ref('');
|
||||||
@@ -44,6 +330,21 @@ let errorSnackBar = ref(false);
|
|||||||
let snackBarMessage = ref('');
|
let snackBarMessage = ref('');
|
||||||
const errorMessage = 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) => {
|
const fetchUser = async (username) => {
|
||||||
console.log(`Fetching user: ${username}`);
|
console.log(`Fetching user: ${username}`);
|
||||||
try {
|
try {
|
||||||
@@ -89,3 +390,583 @@ onMounted(updateUser);
|
|||||||
|
|
||||||
watch(() => route.params.username, updateUser);
|
watch(() => route.params.username, updateUser);
|
||||||
</script>
|
</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>
|
||||||
@@ -3,10 +3,10 @@ import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
|
|||||||
import About from '@/views/tos/About.vue'
|
import About from '@/views/tos/About.vue'
|
||||||
import ContentPolicy from '@/views/tos/ContentPolicy.vue'
|
import ContentPolicy from '@/views/tos/ContentPolicy.vue'
|
||||||
import FAQ from '@/views/tos/FAQ.vue'
|
import FAQ from '@/views/tos/FAQ.vue'
|
||||||
|
import Frais from '@/views/tos/Frais.vue'
|
||||||
import GuideForCreators from '@/views/tos/GuideForCreators.vue'
|
import GuideForCreators from '@/views/tos/GuideForCreators.vue'
|
||||||
import HelpAndContact from '@/views/tos/HelpAndContact.vue'
|
import HelpAndContact from '@/views/tos/HelpAndContact.vue'
|
||||||
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
||||||
import Transactions from '@/views/tos/Transactions.vue'
|
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import MainPage from '../layouts/MainPage.vue'
|
import MainPage from '../layouts/MainPage.vue'
|
||||||
import LoginView from '../views/LoginView.vue'
|
import LoginView from '../views/LoginView.vue'
|
||||||
@@ -94,9 +94,9 @@ const routes = [
|
|||||||
component: About
|
component: About
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/transactions',
|
path: '/frais',
|
||||||
name: 'transactions',
|
name: 'frais',
|
||||||
component: Transactions
|
component: Frais
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/Hutopy',
|
path: '/Hutopy',
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<v-container style="z-index: 100; position: relative;">
|
<v-container style="z-index: 100; position: relative;">
|
||||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||||
class="header-text-size">
|
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-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-col cols="7">
|
<v-col cols="7">
|
||||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||||
Transactions
|
Frais
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||||
Reference in New Issue
Block a user