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

CreatorFolio - Modal paiement, Homeview positionnement contenu

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-14 00:46:40 -04:00
parent 8e8b137dc1
commit 81cce3e496
3 changed files with 202 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,8 +124,8 @@
<v-list-item> <v-list-item>
<v-dialog transition="dialog-top-transition" width="auto"> <v-dialog transition="dialog-top-transition" width="auto">
<template v-slot:activator="{ props: activatorProps }"> <template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0" <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
outlined="false"> elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-wallet</v-icon> <v-icon left class="mr-4">mdi-wallet</v-icon>
<p @click="isActive.value = false">Bourse</p> <p @click="isActive.value = false">Bourse</p>
</v-btn> </v-btn>
@@ -453,14 +453,111 @@
<FooterLayout></FooterLayout> <FooterLayout></FooterLayout>
<v-dialog v-model="accepted" max-width="500">
<template v-slot:activator="{ on }">
<div class="text-center pa-4">
<v-btn @click="accepted = true" v-on="on">
Approuve
</v-btn>
</div>
</template>
<!-- Your custom dialog content -->
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
<v-container>
<v-row justify="center">
<v-col cols="12" class="text-center">
<v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12">
<v-card-text style="font-weight: 600;">
Paiement complété
</v-card-text>
<v-card-text style="margin-top: -24px;">
Transaction : #
</v-card-text>
<v-card-text style="font-size: 1.2rem; text-align: center;">
Merci de supporter
</v-card-text>
<v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
Guillaume Mousseau
</v-card-text>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-card-actions class="justify-end">
<v-btn text @click="accepted = false">Ok</v-btn>
</v-card-actions>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>
<v-dialog v-model="decline" max-width="500">
<template v-slot:activator="{ on }">
<div class="text-center pa-4">
<v-btn @click="decline = true" v-on="on">
Decline
</v-btn>
</div>
</template>
<!-- Your custom dialog content -->
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
<v-container>
<v-row justify="center">
<v-col cols="12" class="text-center">
<v-icon color="black" size="250">mdi-cancel</v-icon>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12">
<v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
Paiement refusé
</v-card-text>
<v-card-text style="font-size: 1rem; text-align: center;">
Une erreur s'est produit
</v-card-text>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-card-actions class="justify-end">
<v-btn text @click="decline = false">Ok</v-btn>
</v-card-actions>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import StripePayment from '../StripePayment.vue'; import StripePayment from '../StripePayment.vue';
const accepted = ref(false);
const decline = ref(false);
let imageSrc = '../../../images/guillaimeaime3x.png'; let imageSrc = '../../../images/guillaimeaime3x.png';
let profilePicture = '../../../images/guillaume.png'; let profilePicture = '../../../images/guillaume.png';

256
src/views/main/HomeView.vue
View File

@@ -5,10 +5,10 @@
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;"> <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons --> <!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center"> <v-container class="d-flex justify-center align-center container-spacer header-container">
<v-row justify="center" align="center"> <v-row justify="center" align="center">
<v-col></v-col> <v-col></v-col>
<v-col cols="5"> <v-col cols="5" xl="4" xxl="4">
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img> <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
</v-col> </v-col>
<v-col> <v-col>
@@ -29,10 +29,10 @@
</v-container> </v-container>
<!--Header --> <!--Header -->
<v-container> <v-container class="container-spacer">
<v-row> <v-row>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7"> <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png" <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
style="border-radius: 20px;"></v-img> style="border-radius: 20px;"></v-img>
</v-col> </v-col>
@@ -41,9 +41,9 @@
</v-container> </v-container>
<!-- Créer Profiter Inspirer --> <!-- Créer Profiter Inspirer -->
<v-container> <v-container class="container-spacer">
<v-row class="d-flex justify-center creer-profiter-inspirer-row"> <v-row class="d-flex justify-center creer-profiter-inspirer-row">
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7"> <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center" align="center" class="créer-profiter-inspirer-row"> <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
<v-col cols="4" sm="4" md="4"> <v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
@@ -115,10 +115,9 @@
</v-container> </v-container>
<!-- Votre Hutopy --> <!-- Votre Hutopy -->
<v-container> <v-container class="container-spacer">
<v-row justify="center"> <v-row justify="center">
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
<v-row justify="center"> <v-row justify="center">
<v-col cols="6" md="7" lg="6"> <v-col cols="6" md="7" lg="6">
<v-img cols="12" style="margin-top: -5%; min-width: 350px;" <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
@@ -150,27 +149,24 @@
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
</v-col> </v-col>
<v-col cols="6" md="5" lg="6"> <v-col cols="6" md="5" lg="6">
<v-row justify="center"> <v-row justify="center" class="votre-hutopy-img">
<v-col cols="6" sm="12" md="12" lg="6"> <v-col cols="6" sm="12" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png" <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
class="hidden-md-and-down" hidden-and-down></v-img> class="hidden-md-and-down" hidden-and-down></v-img>
</v-col> </v-col>
<v-col cols="6" sm="12" md="12" lg="6"> <v-col cols="6" sm="12" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img> <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
</v-col> </v-col>
<v-col cols="6" sm="3" md="12" lg="6"> <v-col cols="6" sm="12" md="6" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img> <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
</v-col> </v-col>
<v-col cols="6" sm="3" md="12" lg="6"> <v-col cols="6" sm="6" md="6" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png" <v-img style="border-radius: 30px;" class="d-none d-md-block"
class="hidden-md-and-down" hidden-and-down></v-img> src="../../../images/homepage/girlvr.png"></v-img>
</v-col> </v-col>
</v-row> </v-row>
</v-col> </v-col>
@@ -181,67 +177,48 @@
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
<!-- ILS SONT SUR HUTOPY --> <h1 style=" margin-bottom: 70px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
<v-container style="max-width: 1500px;">
<v-card-text>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1> Ils sont sur Hutopy.</h1>
<v-spacer></v-spacer>
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;"> <v-col>
<v-row justify="center" class="profile-images"> <v-row justify="center" class="profile-images">
<v-col> <v-col>
<router-link :to="{ name: 'creatorfolio' }"> <router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image "> <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col> </v-col>
<v-col> <v-col>
<router-link :to="{ name: 'creatorfolio' }"> <router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"> <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col> </v-col>
<v-col> <v-col>
<router-link :to="{ name: 'creatorfolio' }"> <router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image"> <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col> </v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row> </v-row>
</v-container>
</v-card-text>
</v-container>
<!-- Fin Description D'hutopy -->
</div> </div>
@@ -411,116 +388,37 @@ const goToLoginPage = () => {
<style src="../../cssstyle/homeView.css"></style> <style src="../../cssstyle/homeView.css"></style>
<style scoped> <style scoped>
.phototexte {
margin-left: 10px;
margin-right: 10px;
}
.layer1-background {
background-color: rgba(163, 14, 121, 0.03);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.layer1-backgroundmobile { .layer1-backgroundmobile {
background-color: rgba(163, 14, 121, 0.1); background-color: rgba(163, 14, 121, 0.1);
border-radius: 20px; border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
} }
.layer2-backgroundmobile { .layer2-backgroundmobile {
border-radius: 20px; border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
} }
.container-spacer {
.layer2-background {
background-color: rgba(107, 0, 101, 0.02);
border-radius: 20px;
}
.v-container {
margin-bottom: 50px; margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */ /* Augmente l'espace entre les v-containers */
} }
.h2ilssontsurutopy {
font-weight: bold;
font-size: 2rem;
margin-bottom: 100px;
/* Ajoute de l'espace en bas du titre */
margin-top: 25px;
}
.h2ilssontsurutopytitle {
color: rgba(107, 0, 101, 0.85);
}
.profile-images { .profile-images {
gap: 90px; gap: 15px;
/* Espace entre les images */ transform: scale(.92);
margin-top: 50px;
/* Ajoute de l'espace en haut des images */
} }
.profile-image { .profile-image {
width: auto; width: auto;
/* Largeur des images */
/* Hauteur des images */
border-radius: 35px; border-radius: 35px;
/* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
} }
.image-wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
}
.image-container {
position: relative;
width: 23vw;
/* Utilisation de 20% de la largeur de la vue */
margin: 5px 8px;
}
.image { .image {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
}
.v-card-text h2 {
margin-bottom: 20px;
/* Ajoute de l'espace en bas du titre h2 */
font-size: 2rem;
/* Taille du texte */
font-weight: bold;
/* Texte en gras */
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
}
.v-card-text p {
font-size: 1rem;
/* Taille du texte */
}
.textjustify {
text-align: justify;
} }
.overlay { .overlay {
@@ -535,17 +433,13 @@ const goToLoginPage = () => {
display: flex; display: flex;
text-align: left; text-align: left;
font-size: 1.5rem; font-size: 1.5rem;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} }
.banner-image { .banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
/* Ombre douce */
} }
.image-container:hover .overlay { .image-container:hover .overlay {
@@ -562,8 +456,6 @@ const goToLoginPage = () => {
position: relative; position: relative;
max-width: 100vw; max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */ /* Limiter la largeur de la v-container à la largeur de l'écran */
} }
.v-card { .v-card {
@@ -577,21 +469,11 @@ const goToLoginPage = () => {
border-radius: 8px; border-radius: 8px;
} }
.overlay p.image-text {
display: none;
}
.overlay:hover p.image-text {
display: block;
}
body { body {
background-color: #F4F4F4; background-color: #F4F4F4;
} }
.votre_hutopy_fontsize {
font-size: .2em;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
@@ -602,10 +484,9 @@ body {
@media (min-width: 601px) and (max-width: 889px) { @media (min-width: 601px) and (max-width: 889px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 0.9em; font-size: 1.06em;
} }
.créer-profiter-inspirer-row { .créer-profiter-inspirer-row {
margin-left: -120px; margin-left: -120px;
margin-top: -120px margin-top: -120px
@@ -613,26 +494,34 @@ body {
.card-size { .card-size {
transform: scale(.7); transform: scale(.7);
} }
.banner-homepage { .banner-homepage {
transform: scale(1.19) transform: scale(1.19)
} }
.votre-hutopy-img {
margin-top: -30px;
}
.header-container {
margin-top: 30px;
}
} }
@media (min-width: 890px) and (max-width: 960px) { @media (min-width: 890px) and (max-width: 960px) {
.header-container {
margin-top: 30px;
}
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 0.9em; font-size: 1.2em;
} }
.card-size { .card-size {
transform: scale(.75); transform: scale(.75);
} }
.créer-profiter-inspirer-row { .créer-profiter-inspirer-row {
@@ -644,9 +533,11 @@ body {
transform: scale(1.07) transform: scale(1.07)
} }
.votre-hutopy-img {
margin-top: -40px;
} }
}
@media (min-width: 961px) and (max-width: 1280px) { @media (min-width: 961px) and (max-width: 1280px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
@@ -659,7 +550,6 @@ body {
.card-size { .card-size {
transform: scale(.90); transform: scale(.90);
} }
.créer-profiter-inspirer-row { .créer-profiter-inspirer-row {
@@ -669,23 +559,28 @@ body {
.in-between-image { .in-between-image {
margin-left: -100px; margin-left: -100px;
} }
.profile-images {
gap: 15px;
transform: scale(.72);
} }
.votre-hutopy-img {
margin-top: -30px;
}
}
@media (min-width: 1281px) and (max-width: 1920px) { @media (min-width: 1281px) and (max-width: 1920px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 1.1em; font-size: 1.2em;
} }
.card-size { .card-size {
transform: scale(1); transform: scale(1);
} }
.banner-homepage { .banner-homepage {
transform: scale(1.03) transform: scale(1.03)
} }
@@ -695,11 +590,19 @@ body {
margin-top: -70px margin-top: -70px
} }
.profile-images {
gap: 15px;
transform: scale(.64);
}
.votre-hutopy-img {
margin-top: 65px;
}
} }
@media (min-width: 1921px) and (max-width: 2560px) { @media (min-width: 1921px) and (max-width: 2560px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 1.3em; font-size: 1.2em;
} }
.créer-profiter-inspirer-row { .créer-profiter-inspirer-row {
@@ -713,29 +616,42 @@ body {
transform: scale(1.0) transform: scale(1.0)
} }
.profile-images {
gap: 15px;
transform: scale(.90);
}
.votre-hutopy-img {
margin-top: 65px;
}
} }
@media (min-width: 2561px) { @media (min-width: 2561px) {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 1.4em; font-size: 1.2em;
} }
.créer-profiter-inspirer-row { .créer-profiter-inspirer-row {
margin-top: -50px; margin-top: -50px;
} }
.card-size { .card-size {
transform: scale(.98); transform: scale(.98);
} }
.banner-homepage { .banner-homepage {
transform: scale(.98) transform: scale(.98)
} }
.profile-images {
gap: 15px;
transform: scale(.978);
}
.votre-hutopy-img {
margin-top: -10px;
}
} }
</style> </style>

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

@@ -1,24 +1,16 @@
<template> <template>
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<main class="top-aligned-column"> <main class="top-aligned-column">
<div class="column">
</div>
<div class="center-column column"> <div class="center-column column">
<p>YourProfile</p> <p>YourProfile</p>
</div> </div>
<div class="column">
</div>
</main> </main>
</template> </template>
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
</script> </script>