Merge branch 'main' into feature/oauth
This commit is contained in:
Kamigen
@@ -4,14 +4,13 @@
|
||||
<div class="hutopy-backgroud-color">
|
||||
<div class="hidden-xs flex-col items-center page-margin">
|
||||
<v-container>
|
||||
|
||||
<!-- Banner -->
|
||||
<v-row class="text-center align-center row-between-logo-text home-row">
|
||||
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
|
||||
|
||||
|
||||
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||
|
||||
|
||||
<img class="hutopy-header-image" src="/images/hutopymedia/banners/hutopy.png">
|
||||
<v-col class="ml-0 text-left ">
|
||||
<!-- Home btn -->
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
|
||||
</RouterLink>
|
||||
@@ -19,34 +18,32 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Home btn -->
|
||||
<v-container class="row-between-logo-text">
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||
<v-row>
|
||||
|
||||
<!-- Contact image -->
|
||||
<v-col>
|
||||
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||
<img class="contact-image" src="/images/hutopymedia/contactpage/contactpicture.png">
|
||||
</v-col>
|
||||
<!-- Form Information -->
|
||||
<v-col class="row-joinus">
|
||||
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
|
||||
<v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
||||
<v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
||||
<v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>Envoyez </v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>Envoyez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<v-row>
|
||||
<v-container>
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
@@ -80,38 +77,46 @@
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!-- Offset -->
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile low dimensions -->
|
||||
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
||||
|
||||
<!-- Offset -->
|
||||
<v-spacer style="margin-bottom: 25px;"></v-spacer>
|
||||
<v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
||||
|
||||
<!-- Contact image -->
|
||||
<v-img src="/images/hutopymedia/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
||||
style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
|
||||
|
||||
<!-- Title -->
|
||||
<v-row class="labelgroup">
|
||||
<v-col cols="12">
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
|
||||
<!-- Form Information -->+
|
||||
<v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux ?" placeholder="Écrivez votre message ici" rows="3"
|
||||
<v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>
|
||||
Envoyez
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>
|
||||
Envoyez
|
||||
</v-btn>
|
||||
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
@@ -143,15 +148,72 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-dialog v-model="showModal" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
|
||||
<p style="font-size: 2rem; font-weight: 600">INFORMATIONS REÇU</p>
|
||||
</v-card-title>
|
||||
<v-icon class="mx-auto" style="font-size: 10em; color: #a30e79;">mdi-emoticon-happy</v-icon>
|
||||
<v-card-text style="margin-top: 40px; font-size: 1.3rem; margin-bottom: 50px;" class="text-justify">
|
||||
Merci de vous intéresser à notre projet. Lorsque nous serons prêts, nous vous contacterons afin que vous
|
||||
puissiez vous inscrire en primeur sur la plateforme pour nous aider à la développer. Chaque étape du
|
||||
développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end" style="margin-right: 20px;">
|
||||
<v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
|
||||
const client = useClient();
|
||||
|
||||
const showModal = ref(false);
|
||||
const name = ref("");
|
||||
const emailAddress = ref("");
|
||||
const reasonToJoin = ref("");
|
||||
const socialNetworkAccount = ref("");
|
||||
|
||||
//const firstName = name.value.split(" ")[0];
|
||||
//const lastName = name.value.split(" ")[1];
|
||||
|
||||
async function sendForm() {
|
||||
try {
|
||||
const requestBody = {
|
||||
FirstName: name.value,
|
||||
LastName: name.value,
|
||||
EmailAddress: emailAddress.value,
|
||||
PhoneNumber: "",
|
||||
SocialNetworkAccount: socialNetworkAccount.value,
|
||||
ReasonToJoin: reasonToJoin.value
|
||||
};
|
||||
|
||||
await client.post('/api/JoinUs', requestBody);
|
||||
showModal.value = true;
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<v-container>
|
||||
<v-container>
|
||||
<div>
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator "
|
||||
style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
|
||||
</div>
|
||||
|
||||
<v-countainer >
|
||||
<v-card style="width: 100%; height: 600px;">
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
</v-countainer>
|
||||
</v-container>
|
||||
</v-container>
|
||||
@@ -1,776 +0,0 @@
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
|
||||
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
|
||||
|
||||
<!-- Banner + Profile-->
|
||||
<div style="margin-top: -1.6%;">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
|
||||
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-container class="pa-0" style="margin-left: 1%; margin: 0;">
|
||||
<v-row no-gutters class="justify-center">
|
||||
<!-- Left menu -->
|
||||
<v-col cols="2" class="mx-0" style="min-width: 300px;">
|
||||
|
||||
|
||||
<v-container style="position: sticky; top: 0;">
|
||||
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
|
||||
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-account-plus</v-icon>
|
||||
<div>Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%; ">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<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: 25pxo; 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: 25pxo; 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-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- center menu -->
|
||||
|
||||
<v-col cols="7" class="mx-0">
|
||||
|
||||
|
||||
<v-container style="min-width: 800px ;">
|
||||
|
||||
<v-col>
|
||||
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
|
||||
style="margin-left: 0%; width: 25%;"></v-img>
|
||||
</v-col>
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-top: -18%;">
|
||||
<v-container
|
||||
style="border-top: 4px solid #a40e79; border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #cc6f91;border-top-right-radius: 25px;">
|
||||
<v-row>
|
||||
<v-col cols="0">
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<h1 style="margin-bottom: -1%; font-size: 2rem; color: white;">Guillaume Mousseau </h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3">
|
||||
<v-row>
|
||||
|
||||
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/facebookicon.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/instawhite.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/xicon.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/tiktok.png"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container
|
||||
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; margin-bottom: -2%; background-color: #aedcde;">
|
||||
<v-row>
|
||||
<v-col cols="0">
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<h1 style="margin-bottom: -5%; font-size: 2rem; color: white;">Créateur de contenus</h1>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-row>
|
||||
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/icons/messenger.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/bookmark.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/share.png"></v-img>
|
||||
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container
|
||||
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #aedcde;border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;">
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="10">
|
||||
<v-expansion-panels>
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel
|
||||
style=" margin-left: 2%; font-size: 1.2rem; background-color: #0baab2; color: white;"
|
||||
:key="i"
|
||||
text="Ma mission est claire : 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"></v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
PODCAST #01</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2">
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
|
||||
<iframe style="margin-left: 2.1%;" width=96% height="650px"
|
||||
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="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
|
||||
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?</p>
|
||||
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<v-row style="z-index: 200;">
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
J'aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
|
||||
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2">
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
|
||||
<v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
|
||||
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?</p>
|
||||
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<v-row style="z-index: 200;">
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
J'aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Right menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
|
||||
<!-- tips menu -->
|
||||
<v-card
|
||||
style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
|
||||
<v-container class="text-center d-flex align-center justify-center"
|
||||
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
|
||||
<h1 style="font-size: 2rem; color: white; margin: 0; text-orientation: upright;">
|
||||
Je soutiens!
|
||||
</h1>
|
||||
</v-container>
|
||||
|
||||
<v-row style=" margin-top: 30px; ">
|
||||
<v-col cols="6" style="background-color: #f4f4f4">
|
||||
<v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field label="Montant ($)"
|
||||
style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex align-center">
|
||||
<v-btn
|
||||
style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
|
||||
label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- DonateMobile-->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
|
||||
<v-container style="width: 105%;">
|
||||
<v-card class="vcard-descriptions-mobile">
|
||||
<h1 class="h1profilemobile">Ma mission</h1>
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
|
||||
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : 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?</p>
|
||||
|
||||
</v-card>
|
||||
|
||||
<SimpleVideoCard> </SimpleVideoCard>
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
|
||||
|
||||
<h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
|
||||
|
||||
|
||||
|
||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
|
||||
don</v-btn>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
|
||||
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayMenu: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*Banner */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-banner {
|
||||
|
||||
width: 90%;
|
||||
/* 100% de la largeur de la fenêtre visible */
|
||||
margin: 0;
|
||||
/* Enlève les marges par défaut */
|
||||
z-index: -1000;
|
||||
/* Met l'image en arrière-plan */
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Profile */
|
||||
|
||||
.image-profile {
|
||||
border-radius: 50%;
|
||||
|
||||
margin-left: 15%;
|
||||
margin-top: -7%;
|
||||
border: 4px solid white;
|
||||
z-index: 200;
|
||||
|
||||
}
|
||||
|
||||
.description-text {
|
||||
font-size: 1.3rem;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
||||
/*LeftMenu */
|
||||
.icon-size {
|
||||
font-size: 30px;
|
||||
/* ou toute autre taille de votre choix */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sticky-column {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.profile-picture-position {
|
||||
margin-top: 25;
|
||||
}
|
||||
|
||||
.label-paiement-color {
|
||||
color: rgba(163, 14, 121, 0.5);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
/* Couleur de fond */
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
/* Ombre */
|
||||
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
/* Couleur de l'en-tête */
|
||||
padding: 10px;
|
||||
/* Marge intérieure */
|
||||
display: flex;
|
||||
/* Utilisation de flexbox */
|
||||
justify-content: space-between;
|
||||
/* Alignement des éléments sur l'en-tête */
|
||||
margin: 0 -24px 0;
|
||||
|
||||
}
|
||||
|
||||
.tips-h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.test-color {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.label-tips {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.menu-creator-position {
|
||||
margin-top: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.flow-menu {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.column-creatorFolio {
|
||||
flex-grow: 1.2;
|
||||
/* La colonne centrale peut agrandir de 20% */
|
||||
flex-shrink: 0;
|
||||
/* Empêche la colonne centrale de rétrécir */
|
||||
flex-basis: auto;
|
||||
/* La colonne centrale prend sa taille de base */
|
||||
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-creatorFolio-side {
|
||||
flex-grow: 0;
|
||||
/* Les colonnes latérales ne peuvent pas agrandir */
|
||||
flex-shrink: 0;
|
||||
/* Empêche les colonnes latérales de rétrécir */
|
||||
flex-basis: 200px;
|
||||
/* Largeur fixe pour les colonnes latérales */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rgb-background {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.top-aligned-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
width="256"
|
||||
>
|
||||
<v-layout>
|
||||
<v-navigation-drawer absolute permanent>
|
||||
<h1>Test</h1>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list
|
||||
:lines="false"
|
||||
density="compact"
|
||||
nav
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
:value="item"
|
||||
color="primary"
|
||||
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon :icon="item.icon"></v-icon>
|
||||
</template>
|
||||
|
||||
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main style="height: 354px;"></v-main>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [
|
||||
{ text: 'My Files', icon: 'mdi-folder' },
|
||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
||||
{ text: 'Starred', icon: 'mdi-star' },
|
||||
{ text: 'Recent', icon: 'mdi-history' },
|
||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
items: [
|
||||
{ text: 'My Files', icon: 'mdi-folder' },
|
||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
||||
{ text: 'Starred', icon: 'mdi-star' },
|
||||
{ text: 'Recent', icon: 'mdi-history' },
|
||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<v-container>
|
||||
<v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
|
||||
|
||||
</v-container>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
|
||||
.roadmap-image {
|
||||
border-radius: 35px;
|
||||
width: 50%;
|
||||
/* reduces width by 50% */
|
||||
height: auto;
|
||||
/* maintains aspect ratio */
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,99 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<main class="top-aligned-column">
|
||||
|
||||
<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 justify="center">
|
||||
<v-col cols="12">
|
||||
<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-col cols="12" class="text-right">
|
||||
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
<div class="column">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="center-column column">
|
||||
<p>YourProfile</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="column">
|
||||
</v-form>
|
||||
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="">
|
||||
<v-btn style="margin-right: 20px;">Retour</v-btn>
|
||||
</router-link>
|
||||
<v-btn>Éditer</v-btn>
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
<FooterLayout></FooterLayout>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
||||
|
||||
const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
|
||||
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.your-profile-picture {
|
||||
width: 300px;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.row-shadow {
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.col-shadow {
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user