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

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

@@ -124,8 +124,8 @@
<v-list-item>
<v-dialog transition="dialog-top-transition" width="auto">
<template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
outlined="false">
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-wallet</v-icon>
<p @click="isActive.value = false">Bourse</p>
</v-btn>
@@ -137,7 +137,7 @@
<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>
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
</div>
<v-card-text class="text-h1 pa-12">
<v-row>
@@ -182,12 +182,12 @@
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
<v-row>
<v-col style="margin-right: -2%;" cols="1"
class="text-truncate text-center font-weight-bold">#T</v-col>
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>
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>
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>
@@ -196,10 +196,10 @@
<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>
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>
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
<v-col cols="5" class="text-truncate">Good Job</v-col>
</v-row>
@@ -453,14 +453,111 @@
<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>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import StripePayment from '../StripePayment.vue';
const accepted = ref(false);
const decline = ref(false);
let imageSrc = '../../../images/guillaimeaime3x.png';
let profilePicture = '../../../images/guillaume.png';
@@ -469,9 +566,9 @@ let name = 'Guillaume Mousseau'
let title = 'Créateur de contenus'
let drawerbottom = false
let navigationItems = [
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
];
let tools = [
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
@@ -479,8 +576,8 @@ let tools = [
let items = [
{icon: "icon", text: "text"},
{icon: "icon2", text: "text2"},
{ icon: "icon", text: "text" },
{ icon: "icon2", text: "text2" },
]
</script>

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

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

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