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

Ui Updated - Modification de LoginView.vue et ContactView.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-13 17:49:04 -04:00
parent db29b20e42
commit 5380626ec9
20 changed files with 360 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,33 +28,40 @@
<v-col cols="2" class="mx-0">
<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>
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
<RouterLink :to="{ name: 'home' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
elevation="0">
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
Accueil
<div style="margin-left: 10%;"> Accueil</div>
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
<v-icon left class="icon-size">mdi-account-plus</v-icon>
Ajouter des amis
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
elevation="0">
<v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
<div style="margin-left: 10%;">Ajouter des amis</div>
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
<v-icon left class="icon-size" style="margin-left: -75%;">mdi-newspaper</v-icon>
Contenu
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
elevation="0">
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
<div style="margin-left: 10%;">Contenu</div>
</v-btn>
</RouterLink>
</v-container>
</v-col>
<!-- center menu -->
<v-col cols="7" class="mx-0">
@@ -63,25 +70,22 @@
<v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
<div class="card-header"> <!-- 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>
PODCAST #01</h1>
</v-col>
<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(0, 0, 0);">mdi-pencil</v-icon></v-btn>
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col>
</div>
@@ -102,28 +106,31 @@
comprises. Et toi, quel est ton objectif pour cette année?</p>
<div
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<v-row>
<v-row style="z-index: 200;">
<v-row class="fill-height">
<!-- Bouton Like -->
<v-col cols="3" class="text-center" style="margin-left: 3%;">
<v-btn size="x-large" style="width: 500;" elevation="0">
<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>
Aime
J'aime
</v-btn>
</v-col>
<!-- Bouton Dislike -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
<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="width: 500; margin-left: 80%;" elevation="0">
<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>
@@ -148,28 +155,23 @@
</div>
</v-card>
<v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
<div class="card-header"> <!-- 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>
<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(0, 0, 0);">mdi-pencil</v-icon></v-btn>
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col>
</div>
@@ -178,9 +180,8 @@
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%; border-top: 6px solid rgb(107, 0, 101); border-bottom: 6px solid rgb(163, 14, 121);"
src="../../../images/guillaumepublication.jpg"></v-img>
<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 :
@@ -191,28 +192,31 @@
comprises. Et toi, quel est ton objectif pour cette année?</p>
<div
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<v-row>
<v-row style="z-index: 200;">
<v-row class="fill-height">
<!-- Bouton Like -->
<v-col cols="3" class="text-center" style="margin-left: 3%;">
<v-btn size="x-large" style="width: 500;" elevation="0">
<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>
Aime
J'aime
</v-btn>
</v-col>
<!-- Bouton Dislike -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
<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="width: 500; margin-left: 80%;" elevation="0">
<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>
@@ -238,85 +242,51 @@
</v-card>
</v-col>
<!-- Right menu -->
<v-col cols="2" class="mx-0">
<!-- Profile menu -->
<!-- tips menu -->
<v-card
style="margin-top: -25%; border-top-left-radius: 25px; border-top-right-radius: 25px; height: auto; max-height: 400; min-width: 200; min-height: 325; position: sticky; top: 0;">
style=" background-color: #f4f4f4; 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" style="background-color: #6b0065; margin-bottom: -10px;">
<h1 style="font-size:3rem; color: white;">
<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-img src="../../../images/guillaume.jpg"></v-img>
<v-container style="background-color: #6b0065; margin-bottom: -1px">
<h1 style="font-size:1.5rem; color: white;">Guillaume Mousseau</h1>
</v-container>
<v-container style="background-color: #a30e79;">
<h1 style="font-size:1.5rem; color: white;">Créateur de contenus</h1>
</v-container>
<v-expansion-panels style="margin-top: -50px;">
<v-expansion-panel
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-expansion-panels>
<v-row style="margin-top: 20px;">
<v-col cols="6">
<v-sheet class="mx-auto" width="150">
<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="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
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">
<v-col cols="6" class="d-flex align-center">
<v-btn
style=" margin-left: -15px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
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="color: rgb(107, 0, 101)" label="Votre message" placeholder="Écrivez votre message ici"
rows="3" auto-grow></v-textarea>
<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-container>
<v-row justify="center" style="margin-top: 10px;">
<router-link to="lien_facebook" class="mr-13">
<img src="../../../images/facebook.svg" alt="Facebook" width="40">
</router-link>
<router-link to="lien_tiktok" class="mr-13">
<img src="../../../images/tiktok.svg" alt="TikTok" width="40">
</router-link>
<router-link to="lien_instagram" class="mr-13">
<img src="../../../images/instagram.svg" alt="Instagram" width="40">
</router-link>
<router-link to="lien_x">
<img src="../../../images/x.svg" alt="X" width="40">
</router-link>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>