YourProfile - effacé les variable, Modification de la version mobile, effacé code inutile dans Default
This commit is contained in:
PascalMarchesseault
@@ -67,7 +67,7 @@
|
||||
</RouterLink>
|
||||
<v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
|
||||
<v-divider style="margin-top: 20%;"></v-divider>
|
||||
<h1 class="h1-navigation">Outils</h1>
|
||||
|
||||
<v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
|
||||
<v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
|
||||
value="logout"></v-list-item>
|
||||
|
||||
@@ -227,99 +227,136 @@
|
||||
<div>
|
||||
|
||||
|
||||
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
|
||||
style="margin-top: -100px;">
|
||||
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
|
||||
|
||||
<div>
|
||||
<v-card-text>
|
||||
<div>
|
||||
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
||||
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
||||
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
||||
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
||||
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
||||
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
|
||||
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
|
||||
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
|
||||
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
|
||||
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
|
||||
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
|
||||
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
|
||||
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
|
||||
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
||||
</div>
|
||||
|
||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
|
||||
CONNECTEZ-VOUS
|
||||
|
||||
<v-row style="margin-top: 30px;" align="center">
|
||||
<v-col cols="6">
|
||||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||||
src="../../../images/homepage/creer.png"></v-img>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p style="margin: 20px; text-align: justify;" class="center-vertical">Libérez votre créativité sur Hutopy,
|
||||
où chaque idée trouve sa
|
||||
place et chaque
|
||||
créateur détient la clé
|
||||
d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
|
||||
Hutopy, en partageant
|
||||
votre vision, votre
|
||||
talent et vos histoires.
|
||||
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
|
||||
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||||
</v-col>
|
||||
<v-col cols="6" align="center">
|
||||
<v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
|
||||
src="../../../images/homepage/partager.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6" align="center">
|
||||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||||
src="../../../images/homepage/inspirer.png"></v-img>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p style="margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
|
||||
Hutopy, en partageant
|
||||
votre vision, votre
|
||||
talent et vos histoires.
|
||||
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
|
||||
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-img style="margin-top: 50px; margin-bottom: 50px; min-width: 350px;"
|
||||
src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||
|
||||
<v-row align="center">
|
||||
<v-col cols="5" style="margin: 4%;">
|
||||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||||
la créativité.
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-img style="border-radius: 30px; margin-right: 25px;"
|
||||
src="../../../images/homepage/microphone.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row align="center">
|
||||
<v-col cols="6">
|
||||
<v-img style="border-radius: 30px; margin-left: 25px " src="../../../images/homepage/grinding.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="5" style="margin: 4%;">
|
||||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||||
prendre vie.
|
||||
</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="margin-top: 50px;">
|
||||
<v-col> <v-img style="border-radius: 30px; margin-left: 25px;"
|
||||
src="../../../images/homepage/girlarmy.png"></v-img></v-col>
|
||||
<v-col><v-img style="border-radius: 30px; margin-right: 25px"
|
||||
src="../../../images/homepage/girlvr.png"></v-img></v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container align="center">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="4">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</router-link>
|
||||
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
|
||||
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||||
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
||||
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
|
||||
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
|
||||
une
|
||||
expérience
|
||||
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
|
||||
|
||||
</RouterLink>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
|
||||
partageant votre vision,
|
||||
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
|
||||
les
|
||||
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
|
||||
d'inspiration.</p>
|
||||
<h1
|
||||
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-card-text>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
|
||||
</div>
|
||||
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
|
||||
</h1>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center"
|
||||
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-row justify="center" class="profile-images">
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
|
||||
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
|
||||
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image ">
|
||||
</router-link>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
|
||||
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -388,6 +425,13 @@ const goToLoginPage = () => {
|
||||
<style src="../../cssstyle/homeView.css"></style>
|
||||
|
||||
<style scoped>
|
||||
.center-vertical {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layer1-backgroundmobile {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
border-radius: 20px;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</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%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
|
||||
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
|
||||
</v-row>
|
||||
<v-col>
|
||||
<v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
|
||||
<v-btn style="margin-top: -30px;">
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
@@ -44,10 +44,11 @@
|
||||
<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>
|
||||
|
||||
<v-form @submit.prevent="updateProfile">
|
||||
<v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
|
||||
<v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
|
||||
<v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
|
||||
<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>
|
||||
|
||||
</v-form>
|
||||
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
|
||||
@@ -55,8 +56,8 @@
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="">
|
||||
<v-btn style="margin-right: 20px;">Retour</v-btn>
|
||||
</router-link>
|
||||
<v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
|
||||
<v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
|
||||
<v-btn>Éditer</v-btn>
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
@@ -78,24 +79,6 @@ import { ref } from 'vue';
|
||||
const profilePictureUrl = ref('../../../images/guillaume.png');
|
||||
const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
|
||||
|
||||
let userName = 'Guillaume Mousseau';
|
||||
const firstName = ref('Votre prénom');
|
||||
const lastName = ref('Votre nom');
|
||||
const description = ref('Votre description');
|
||||
const password = ref('Votre mot de passe');
|
||||
const isEditing = ref(false);
|
||||
|
||||
const editProfilePicture = () => {
|
||||
// Mettez ici la logique pour changer la photo de profil
|
||||
};
|
||||
|
||||
const editBannerImage = () => {
|
||||
// Mettez ici la logique pour changer la bannière de profil
|
||||
};
|
||||
|
||||
const updateProfile = () => {
|
||||
// Mettez ici la logique pour mettre à jour le profil
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user