YourProfile - effacé les variable, Modification de la version mobile, effacé code inutile dans Default

src/layouts/DefaultLayout.vue

@@ -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>

src/views/main/HomeView.vue

@@ -227,99 +227,136 @@
       <div>
 
 
-        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
+        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
-          style="margin-top: -100px;">
 
-        <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-row style="margin-top: 30px;" align="center">
-              <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
+          <v-col cols="6">
-                CONNECTEZ-VOUS
+            <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>
+          </RouterLink>
-
-          </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>
-
         </v-container>
 
 
-        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+        <h1
-          <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
+          style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
-          <p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
+          Ils sont sur Hutopy.</h1>
-            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-container>
+        <v-spacer></v-spacer>
-
+        <v-col>
-        <v-container>
+          <v-row justify="center" class="profile-images">
-          <v-card-text>
+            <v-col cols="8">
-            <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;">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
-
               </router-link>
-
+            </v-col>
+            <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
-                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
               </router-link>
-
+            </v-col>
+            <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
-                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
               </router-link>
-            </div>
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-spacer></v-spacer>
 
 
-          </v-card-text>
+        <v-spacer></v-spacer>
-        </v-container>
+
 
       </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;

src/views/main/YourProfile.vue

@@ -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-form>
-              <v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="firstName" label="Prénom"></v-text-field>
-              <v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="lastName" label="Nom"></v-text-field>
-              <v-text-field v-model="description" label="Description" :readonly="!isEditing"></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>Éditer</v-btn>
-              <v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</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>