Hide everything that is not necessary for the first release.

2024-12-09 23:56:57 -05:00
parent c69c6770e9
commit 6960ab5576
13 changed files with 533 additions and 354 deletions
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,5 +1,18 @@
 <template>
-  <div class="flex items-center justify-center">
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
+
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+    </div>
+  </div>
+  
+  <div v-if="!isMobileView">
+  <div class="py-2 flex items-center justify-center">
  <div class="max-w-[600px] ">
    <img class="rounded-2xl"
         src="/images/hutopymedia/loginpage/loginhutopy.png"
@@ -8,8 +21,19 @@
    <login-form></login-form>    
  </div>
  </div>
+  </div>
 </template>

 <script setup>
 import LoginForm from "@/views/main/LoginForm.vue";
+import { useDisplay } from "vuetify";
+import {ref, watch} from "vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
 </script>
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -1,174 +1,86 @@
-<template>
-  <div class="flex flex-column w-full">
-
-    <div class="relative w-full shadow-xl rounded-2xl">
-
-      <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
-           :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
-
-        <div>
-          <div>
-
-            <!--Profile and info-->
-            <div class="absolute">
-              <div>
-                <img
-                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
-                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
-                    alt="Profile Picture"
-                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
-                />
-              </div>
-              <div class="ml-64 text-white w-25 min-w-60">
-                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
-                <p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
-                <div class="text-xs">
-                  105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
-                </div>
-              </div>
-            </div>
-
-            <!--  Actions - follow register-->
-            <div class="flex flex-col items-center justify-center w-full min-h-24">
-              <!-- Social Media Icons -->
-              <div class="flex flex-row space-x-6 justify-center">
-                <a
-                    v-for="socialNetwork in GetSocialsUrls()"
-                    :href="socialNetwork.url"
-                    target="_blank"
-                    class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-                  <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-                  <img v-if="socialNetwork.icon.includes('tiktok')"
-                       :src="socialNetwork.icon"
-                       class="w-6 h-6 mt-0.5"
-                       alt="Tiktok">
-                  <img v-if="socialNetwork.icon.includes('websiteIcon')"
-                       :src="socialNetwork.icon"
-                       class="w-6 h-6 mt-0.5"
-                       alt="Website">
-                </a>
-              </div>
-              <!-- Follow and Subscribe Buttons -->
-              <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
-                <subscribe-button></subscribe-button>
-              </div>
-            </div>
-          </div>
-
-          <div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
-               :style="{ backgroundColor: brandingStore.colors.secondary}">
-           
-            <donation-button-banner               
-                :creator-id="creatorId"
-                :creator-name="creatorName"
-                :on-success-url="successUrl"
-                :on-cancelled-url="cancelledUrl"></donation-button-banner>
-          </div>
-       
-
-
-        </div>
-      </div>
-    </div>
-
-    <div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
-         :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
-      <div class="flex justify-evenly mt-3 w-full">
-        <RouterLink class="nav-button"
-                    :to="`/@${brandingStore.value.name}`">
-          Présentation
-        </RouterLink>
-        <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${brandingStore.value.name}/content`">
-          Exclusivité
-        </RouterLink>
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<style scoped>
-.nav-button {
-  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
-}
-
-.nav-button:hover {
-  @apply bg-purple-800;
-}
-</style>
-
-<script setup>
-import {ref, onMounted} from 'vue';
-import SubscribeButton from "@/views/creators/SubscribeButton.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
+<script setup>
+import {ref, onMounted, onBeforeUnmount} from 'vue';
 import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";

-const brandingStore = useBrandingStore()

+const brandingStore = useBrandingStore();
+const isMobile = ref(false);
+
+
+function updateIsMobile() {
+  isMobile.value = window.innerWidth <= 640; // Taille mobile (sm)
+}
+
+// Récupération des URLs des réseaux sociaux
 function GetSocialsUrls() {
-
  const socials = [];
+  const brandingSocials = brandingStore.value.socials;

-  if (brandingStore.value.socials.facebookUrl !== null) {
+  if (brandingSocials.facebookUrl) {
    socials.push({
      icon: "mdi-facebook",
-      url: brandingStore.value.socials.facebookUrl
-    })
+      url: brandingSocials.facebookUrl,
+    });
  }
-  if (brandingStore.value.socials.instagramUrl !== null) {
+  if (brandingSocials.instagramUrl) {
    socials.push({
      icon: "mdi-instagram",
-      url: brandingStore.value.socials.instagramUrl
-    })
+      url: brandingSocials.instagramUrl,
+    });
  }
-  if (brandingStore.value.socials.xUrl !== null) {
+  if (brandingSocials.xUrl) {
    socials.push({
      icon: "mdi-twitter",
-      url: brandingStore.value.socials.xUrl
-    })
+      url: brandingSocials.xUrl,
+    });
  }
-  if (brandingStore.value.socials.linkedInUrl !== null) {
+  if (brandingSocials.linkedInUrl) {
    socials.push({
-      icon: 'mdi-linkedin',
-      url: brandingStore.value.socials.linkedInUrl
-    })
+      icon: "mdi-linkedin",
+      url: brandingSocials.linkedInUrl,
+    });
  }
-  if (brandingStore.value.socials.tikTokUrl !== null) {
+  if (brandingSocials.tikTokUrl) {
    socials.push({
-      icon: '/images/socials/tiktok-white.png',
-      url: brandingStore.value.socials.tikTokUrl
-    })
+      icon: "/images/socials/tiktok-white.png",
+      url: brandingSocials.tikTokUrl,
+    });
  }
-  if (brandingStore.value.socials.youtubeUrl !== null) {
+  if (brandingSocials.youtubeUrl) {
    socials.push({
-      icon: 'mdi-youtube',
-      url: brandingStore.value.socials.youtubeUrl
-    })
+      icon: "mdi-youtube",
+      url: brandingSocials.youtubeUrl,
+    });
  }
-  if (brandingStore.value.socials.redditUrl !== null) {
+  if (brandingSocials.redditUrl) {
    socials.push({
-      icon: 'mdi-reddit',
-      url: brandingStore.value.socials.redditUrl
-    })
+      icon: "mdi-reddit",
+      url: brandingSocials.redditUrl,
+    });
  }
-  if (brandingStore.value.socials.websiteUrl !== null) {
+  if (brandingSocials.websiteUrl) {
    socials.push({
-      icon: 'mdi-web',
-      url: brandingStore.value.socials.websiteUrl
-    })
+      icon: "mdi-web",
+      url: brandingSocials.websiteUrl,
+    });
  }

  return socials;
 }

-// Calculer si l'utilisateur est abonné
+// Gestion du conteneur principal pour la stickiness
 const isSticky = ref(false);
 const mainContainer = ref(null);

 onMounted(() => {
+  // Mise à jour de l'état mobile lors du montage
+  updateIsMobile();
+
+  // Ajout d'un écouteur pour le redimensionnement de la fenêtre
+  window.addEventListener("resize", updateIsMobile);
+
+  // Intersection Observer pour gérer la stickiness
  const observer = new IntersectionObserver(
      ([entry]) => {
        isSticky.value = !entry.isIntersecting;
@@ -180,5 +92,137 @@ onMounted(() => {
    observer.observe(mainContainer.value);
  }
 });
+
+onBeforeUnmount(() => {
+  // Suppression de l'écouteur pour éviter les fuites de mémoire
+  window.removeEventListener("resize", updateIsMobile);
+});
 </script>

+<template>
+  <div class="flex flex-column w-full">
+    <!-- Container principal avec le profil -->
+    <div class="relative w-full shadow-xl rounded-2xl">
+      <div
+          ref="mainContainer"
+          class="rounded-b-2xl shadow-2xl"
+          :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"
+      >
+        <div>
+          <!-- Profile et Info -->
+          <div>
+            <!-- Version PC -->
+            <div v-show="!isMobile" class="  items-start">
+              <div>
+                <img
+                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10 "
+                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
+                    alt="Profile Picture"
+                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px' }"
+                />
+              </div>
+              <div class="ml-64   w-25 min-w-60 flex flex-col" :style="{color: brandingStore.colors.onPrimary}">
+                <p class="capitalize text-3xl mt-4">{{ brandingStore.value.name }}</p>
+                <p class="capitalize text-lg -mb-14">{{ brandingStore.value.title }}</p>
+              </div>
+            </div>
+
+            <!-- Version Mobile -->
+            <div class="relative">
+              <div :style="{ borderColor: brandingStore.colors.secondary, height: '60px' }">
+                <div v-show="isMobile" class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30">
+                  <div>
+                    <img
+                        class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
+                        :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
+                        alt="Profile Picture"
+                        :style="{height: '135px'}"
+                    />
+                  </div>
+                  <div class=" ml-3 text-white w-full flex flex-col items-start">
+                    <p class="capitalize text-2xl">{{ brandingStore.value.name }}</p>
+                    <p class="capitalize text-md">{{ brandingStore.value.title }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+
+          <!-- Actions - Follow et Register -->
+          <div class="flex flex-col items-center justify-center w-full">
+            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
+              <!-- Place pour un bouton Subscribe -->
+              <!--<subscribe-button></subscribe-button>-->
+            </div>
+          </div>
+        </div>
+
+        <!-- Bouton Support -->      
+          <div
+              class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center"
+              :class="{
+            'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
+            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile
+          }"
+              :style="{ backgroundColor: brandingStore.colors.secondary }"
+          >        
+            <donation-button-banner
+                :creator-id="creatorId"
+                :creator-name="creatorName"
+                :on-success-url="successUrl"
+                :on-cancelled-url="cancelledUrl"
+            ></donation-button-banner>
+            </div>        
+        </div>     
+    </div>
+
+    <!-- Section pour les icônes de réseaux sociaux -->
+    <div
+        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
+        :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"
+    >
+      <div class="flex justify-evenly mt-3 w-full">
+        <div class="flex flex-row space-x-6 justify-center">
+          <a
+              v-for="socialNetwork in GetSocialsUrls()"
+              :key="socialNetwork.url"
+              :href="socialNetwork.url"
+              target="_blank"
+              class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
+          >
+            <v-icon v-if="socialNetwork.icon.includes('mdi')">
+              {{ socialNetwork.icon }}
+            </v-icon>
+            <img
+                v-else
+                :src="socialNetwork.icon"
+                class="w-6 h-6 mt-0.5"
+                :alt="socialNetwork.url"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.nav-button {
+  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
+}
+
+.nav-button:hover {
+  @apply bg-purple-800;
+}
+
+/* Transition CSS */
+.transition-all {
+  transition: all 0.3s ease-in-out;
+}
+</style>
+
+
+
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
-    <div class="shadow-lg rounded-2xl mt-2 ">
+  <!-- PC -->
+  <div v-if="!isMobile" >
+    <div class="shadow-lg rounded-2xl mt-2">
      <div class="relative z-20">
-        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary}"></div>
-        <!--Banner-->
+        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary }"></div>
+        <!-- Banner -->
        <div class="relative">
          <div>
            <img
@@ -15,16 +16,77 @@
          </div>
        </div>
      </div>
-      <!--actions - Lowerpart-->
+      <!-- Actions - Lower Part -->
+      <banner-actions></banner-actions>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div v-if="isMobile">
+    <div class="shadow-lg rounded-2xl ">
+      <div class="relative z-20">
+        <div class="min-h-8 shadow-lg flex items-center px-4 py-2 "
+             :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
+          <!-- Logo et texte Hutopy -->
+          <router-link to="/">
+          <div class="flex items-center gap-2">         
+
+            <div class="text-xl font-bold">Hutopy</div>
+          </div>
+          </router-link>
+
+          <!-- Espace vide au centre -->
+          <div class="flex-1"></div>
+
+          <!-- Bouton Hamburger (visible uniquement sur mobile) -->
+          <router-link to="/login">  
+          <button class="lg:hidden flex items-center justify-center mr-4">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                 :stroke="branding.colors.onPrimary" class="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          </router-link>
+        </div>
+        
+        <!-- Banner -->
+        <div class="relative">
+          <div>
+            <img
+                class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
+                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
+                alt="Profile Banner"
+                style="max-height: 425px"
+            >
+          </div>
+        </div>
+      </div>
+      <!-- Actions - Lower Part -->
      <banner-actions></banner-actions>
    </div>
  </div>
 </template>

+
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import BannerActions from "@/views/creators/BannerActions.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";

-const branding = useBrandingStore()
+const branding = useBrandingStore();
+const isMobile = ref(false);
+
+function updateIsMobile() {
+  isMobile.value = window.innerWidth <= 640; 
+}
+
+onMounted(() => {
+  updateIsMobile(); 
+  window.addEventListener("resize", updateIsMobile); 
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateIsMobile);
+});

 </script>
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -1,5 +1,5 @@
-<template>
-  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
+<template>  
+  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8 shadow-2xl"
       :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">

    <!-- Boutons pour Éditer/Enregistrer et Annuler -->
@@ -120,78 +120,79 @@
    <!-- 4 images côte à côte -->

    <div>
-      <div v-if="isEditMode" class="text-2xl py-2"> Images</div>
-      <div class="flex justify-center space-x-4">
+      <div v-if="isEditMode" class="text-2xl py-2">Images</div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
        <!-- Première image -->
-        <div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
+        <div v-if="image1Url || isEditMode" class="relative">
          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
            <img :src="image1Url || fallbackImage"
                 alt="Image 1"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
          </label>
          <img v-else-if="image1Url" :src="image1Url"
               alt="Image 1"
-               class="rounded-md max-w-full h-auto"/>
+               class="rounded-md max-w-full h-auto" />
          <button v-if="isEditMode" @click="deleteImage('image1Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Deuxième image -->
-        <div v-if="image2Url || isEditMode" :class="image1Url" class="relative w-1/2">
+        <div v-if="image2Url || isEditMode" class="relative">
          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
            <img :src="image2Url || fallbackImage"
                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
          </label>
          <img v-else-if="image2Url" :src="image2Url"
               alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               class="rounded-md max-w-full h-auto" />
          <button v-if="isEditMode" @click="deleteImage('image2Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Troisième image -->
-        <div v-if="image3Url || isEditMode" :class="image3Url" class="relative w-1/2">
+        <div v-if="image3Url || isEditMode" class="relative">
          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
            <img :src="image3Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 alt="Image 3"
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
          </label>
          <img v-else-if="image3Url" :src="image3Url"
-               alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               alt="Image 3"
+               class="rounded-md max-w-full h-auto" />
          <button v-if="isEditMode" @click="deleteImage('image3Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Quatrième image -->
-        <div v-if="image4Url || isEditMode" :class="image4Url " class="relative w-1/2">
+        <div v-if="image4Url || isEditMode" class="relative">
          <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
            <img :src="image4Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 alt="Image 4"
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
          </label>
          <img v-else-if="image4Url" :src="image4Url"
-               alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               alt="Image 4"
+               class="rounded-md max-w-full h-auto" />
          <button v-if="isEditMode" @click="deleteImage('image4Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
            X
          </button>
        </div>
      </div>
    </div>

+
    <!-- Texte sous les deux images -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Images</div>
@@ -252,7 +253,6 @@
      <div v-if="isEditMode" class="flex flex-col space-y-2">
        <!-- Édition du téléphone -->
        <div>
-
          <label class="text-lg">Numéro de téléphone</label>
          <input
              v-model="editablePhoneNumber"
@@ -274,11 +274,7 @@
      </div>
      <div
          v-else
-          :class="{
-      'flex justify-center items-center': phoneNumber || email,
-      'flex justify-center': !(phoneNumber && email),
-    }"
-          class="space-x-64"
+          class="flex flex-col sm:flex-row sm:space-x-64 space-y-4 sm:space-y-0 justify-center items-center"
      >
        <!-- Affichage du téléphone -->
        <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
@@ -295,10 +291,10 @@
            {{ editableEmail }}
          </a>
        </div>
-
      </div>
    </div>

+
  </div>

 </template>
@@ -310,6 +306,11 @@ import { useClient } from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
+import { useDisplay } from "vuetify";
+import { watch} from "vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);


 const creatorProfileStore = useCreatorProfileStore();
@@ -322,7 +323,9 @@ const isEditMode = ref(false);

 const authStore = useAuthStore();

-
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});

 // Image de fallback pour l'éditeur
 const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -1,6 +1,7 @@
 <template>
+  
  <v-btn variant="text" style="font-size: x-large; height: 100%" block   @click="openDonationDialog()">
-   Je supporte
+    Je Soutiens
  </v-btn>


@@ -8,7 +9,7 @@
    <v-form>
      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
        <div class="py-4 text-2xl font-bold border-b mb-2">
-          Je Soutiens!
+          Je Soutiens
        </div>

        <div class="flex flex-row align-center px-3">
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -10,7 +10,7 @@ const brandingStore = useBrandingStore()

  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">

-    <div class="centered-text" :style="{color: brandingStore.colors.onBackground}" >Hutopy</div>
+    <div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>


    <div class="flex flex-row justify-center gap-10">
@@ -27,7 +27,7 @@ const brandingStore = useBrandingStore()
      </a>
    </div>

-    <div class="flex flex-row flex-wrap justify-center gap-4" >
+    <div class="flex flex-row flex-wrap justify-center gap-4 px-4 "  >
      <router-link to="/documents/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
        Aide & Contact
      </router-link>
@@ -51,7 +51,7 @@ const brandingStore = useBrandingStore()
      </router-link>
    </div>

-    <div class="flex justify-center base-text"  :style="{color: brandingStore.colors.onBackground}">
+    <div class="flex justify-center base-text mb-13"  :style="{color: brandingStore.colors.onBackground}">
      Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
    </div>
 
@@ -81,12 +81,26 @@ a:hover {
 .centered-text {
  display: flex;
  justify-content: center;
-  align-items: center; 
-  letter-spacing: 125px; 
-  font-size: 2rem; 
-  font-weight: bold; 
+  align-items: center;
+  letter-spacing: 125px;
+  font-size: 2rem;
+  font-weight: bold;
  margin-left: 7rem;
 }

+@media (max-width: 768px) {
+  .centered-text {
+    letter-spacing: 60px;
+    margin-left: 2rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .centered-text {
+    letter-spacing: 40px;
+    margin-left: 1rem;
+  }
+}
+

 </style>
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -62,26 +62,26 @@ initializeLocale();
    </div>

    
-    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
-      <template v-if="authStore.isAuthenticated">  
-        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">
-          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>
-          <span v-else>A</span>
-        </div>
-        <div
-            class="border-b border-gray-300 my-4 mx-auto"
-            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
-        ></div>
-        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>
-      </template>
-    </div>
+<!--    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">-->
+<!--      <template v-if="authStore.isAuthenticated">  -->
+<!--        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">-->
+<!--          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>-->
+<!--          <span v-else>A</span>-->
+<!--        </div>-->
+<!--        <div-->
+<!--            class="border-b border-gray-300 my-4 mx-auto"-->
+<!--            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"-->
+<!--        ></div>-->
+<!--        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>-->
+<!--      </template>-->
+<!--    </div>-->

    <div
        class="border-b border-gray-300 my-4 mx-auto"
        :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
    ></div>

-
+<div class="flex-grow"></div>

    <!-- SECTION UTILISATEUR -->
    <div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
@@ -100,11 +100,11 @@ initializeLocale();
      </div>

      <div class="flex flex-col gap-4 mb-4">
-        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">
-          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">Éditeur</span>
-          </v-btn>
-        </router-link>
+<!--        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">-->
+<!--          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">-->
+<!--            <span v-if="sideBarStore.isOpen">Éditeur</span>-->
+<!--          </v-btn>-->
+<!--        </router-link>-->
        
        <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
          <v-btn class="w-full justify-start" prepend-icon="mdi-home-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
@@ -124,18 +124,22 @@ initializeLocale();
        </div>

        <v-btn variant="flat" class="w-full justify-start" prepend-icon="mdi-translate-variant" @click="toggleLanguage" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-          <span v-if="sideBarStore.isOpen">{{ selectedLanguage.value === 'fr' ? 'Fr' : 'En' }}</span>
+          <span v-if="sideBarStore.isOpen">{{ $t('language.language') }}</span>
        </v-btn>

-        <div>
-          <v-btn @click="toggleMenu"  variant="flat" class="w-full justify-start" :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ sideBarStore.isOpen ? 'Réduire' : '' }}</span>
-          </v-btn>
-        </div>
+        <v-btn
+            @click="toggleMenu"
+            variant="flat"
+            class="w-full justify-start"
+            :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'"
+            :class="!sideBarStore.isOpen ? 'my-2' : ''"
+        >
+          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.Reduce') }}</span>
+        </v-btn>

        <div v-if="!authStore.isAuthenticated">
          <v-btn to="/login" variant="flat" class="justify-start" prepend-icon="mdi-login" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">Connexion</span>
+            <span v-if="sideBarStore.isOpen">{{ $t('sidebar.connection') }}</span>
          </v-btn>
        </div>
        <div v-else>
--- a/src/views/profile/ProfilePage.vue
+++ b/src/views/profile/ProfilePage.vue
@@ -1,104 +1,99 @@
 <template>
-  <div class="flex flex-col md:flex-row bg-[#f4f4f4] h-full">
+  <!-- Mobile -->
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />

-    <!-- Left Menu -->
-    <div class=" z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
-      <div class="sticky top-20 z-30">
-        <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
-          <h1 class="text-2xl py-4 font-bold text-center md:text-left">{{$t('profilemenu.manageyouraccount')}}</h1>
-
-          <div class="relative flex items-center md:mt-0 w-full">
-            <!-- Navigation buttons for small screens -->
-            <button @click="scrollLeftFunc"
-                    class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800  text-2xl ">
-              <v-icon>mdi-chevron-left</v-icon>
-            </button>
-
-            <div
-                ref="scrollContainer"
-                class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
-                @mousedown="mouseDown"
-                @mouseleave="mouseLeave"
-                @mouseup="mouseUp"
-                @mousemove="mouseMove">
-
-              <v-btn variant="text" @click="currentComponent = 'CreatorPage'">
-                <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
-                {{ $t('profilemenu.creator') }}
-              </v-btn>
-
-              <v-btn variant="text" @click="currentComponent = 'AccountPage'">
-                <v-icon class="mr-2">mdi-information</v-icon>
-                {{ $t('profilemenu.user') }}
-              </v-btn>
-
-            </div>
-            <button @click="scrollRightFunc"
-                    class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
-              <v-icon>mdi-chevron-right</v-icon>
-            </button>
-          </div>
-
-        </div>
-      </div>
-    </div>
-
-    <!-- Mid Content -->
-    <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
-      <template v-if="currentComponent === 'CreatorPage'">
-        <creator-page></creator-page>
-      </template>
-      <template v-else-if="currentComponent === 'AccountPage'">
-        <account-page></account-page>
-      </template>
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
    </div>
  </div>

+  <!-- PC -->
+  <div v-else>
+    <div class="flex flex-col md:flex-row bg-[#f4f4f4] h-full">
+      <!-- Left Menu -->
+      <div class=" z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
+        <div class="sticky top-20 z-30">
+          <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
+            <h1 class="text-2xl py-4 font-bold text-center md:text-left">{{$t('profilemenu.manageyouraccount')}}</h1>
+
+            <div class="relative flex items-center md:mt-0 w-full">
+              <!-- Navigation buttons for small screens -->
+              <button @click="scrollLeftFunc"
+                      class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 text-2xl ">
+                <v-icon>mdi-chevron-left</v-icon>
+              </button>
+
+              <div
+                  ref="scrollContainer"
+                  class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
+                  @mousedown="mouseDown"
+                  @mouseleave="mouseLeave"
+                  @mouseup="mouseUp"
+                  @mousemove="mouseMove">
+
+                <v-btn variant="text" @click="currentComponent = 'CreatorPage'">
+                  <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+                  {{ $t('profilemenu.creator') }}
+                </v-btn>
+
+                <v-btn variant="text" @click="currentComponent = 'AccountPage'">
+                  <v-icon class="mr-2">mdi-information</v-icon>
+                  {{ $t('profilemenu.user') }}
+                </v-btn>
+
+              </div>
+              <button @click="scrollRightFunc"
+                      class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
+                <v-icon>mdi-chevron-right</v-icon>
+              </button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Mid Content -->
+      <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
+        <template v-if="currentComponent === 'CreatorPage'">
+          <creator-page></creator-page>
+        </template>
+        <template v-else-if="currentComponent === 'AccountPage'">
+          <account-page></account-page>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>

 <script setup>
-import {ref, onMounted} from "vue";
+import { ref, watch } from "vue";
 import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
 import AccountPage from "@/views/profile/account/AccountPage.vue";
-import {useRoute} from "vue-router";
+import { useRoute } from "vue-router";
+import { useDisplay } from "vuetify";

+const { smAndDown } = useDisplay();

-const route = useRoute()
-const startingComponent = route.query.target || 'AccountPage'
-
+const route = useRoute();
+const startingComponent = route.query.target || 'CreatorPage';
 const currentComponent = ref(startingComponent);
+
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
+// Gestion du slider (scroll sur petit écran)
 const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);

-onMounted(() => {
-  const slider = document.querySelector('.custom-scroll');
-  slider.addEventListener('mousedown', (e) => {
-    isDown.value = true;
-    slider.classList.add('active');
-    startX.value = e.pageX - slider.offsetLeft;
-    scrollLeft.value = slider.scrollLeft;
-  });
-
-  slider.addEventListener('mouseleave', () => {
-    isDown.value = false;
-    slider.classList.remove('active');
-  });
-
-  slider.addEventListener('mouseup', () => {
-    isDown.value = false;
-    slider.classList.remove('active');
-  });
-
-  slider.addEventListener('mousemove', (e) => {
-    if (!isDown.value) return;
-    e.preventDefault();
-    const x = e.pageX - slider.offsetLeft;
-    const walk = (x - startX.value) * 3; // scroll-fast
-    slider.scrollLeft = scrollLeft.value - walk;
-  });
-});
-
 const mouseDown = (e) => {
  const slider = document.querySelector('.custom-scroll');
  isDown.value = true;
@@ -130,17 +125,17 @@ const mouseMove = (e) => {

 const scrollLeftFunc = () => {
  const container = document.querySelector('.custom-scroll');
-  container.scrollBy({left: -100, behavior: 'smooth'});
+  container.scrollBy({ left: -100, behavior: 'smooth' });
 };

 const scrollRightFunc = () => {
  const container = document.querySelector('.custom-scroll');
-  container.scrollBy({left: 100, behavior: 'smooth'});
+  container.scrollBy({ left: 100, behavior: 'smooth' });
 };
 </script>

-<style scoped>

+<style scoped>
 .custom-scroll {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
@@ -149,5 +144,4 @@ const scrollRightFunc = () => {
 .custom-scroll::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
 }
-
 </style>
--- a/src/views/profile/account/AccountPage.vue
+++ b/src/views/profile/account/AccountPage.vue
@@ -11,20 +11,20 @@
        {{ $t('personnalinformation.informations') }}
      </v-card-title>

-      <button
-          class="editableValue"
-          @click="openEditPortrait">
-        <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>
-        <span class="value">Un portrait vous permet de personnaliser votre profil</span>
-        <span>
-            <img
-                :src="userProfileStore.user.portraitUrl"
-                alt="Profile Image"
-                class="rounded-full"
-                width="48px"
-                height="48px"/>
-        </span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditPortrait">-->
+<!--        <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>-->
+<!--        <span class="value">Un portrait vous permet de personnaliser votre profil</span>-->
+<!--        <span>-->
+<!--            <img-->
+<!--                :src="userProfileStore.user.portraitUrl"-->
+<!--                alt="Profile Image"-->
+<!--                class="rounded-full"-->
+<!--                width="48px"-->
+<!--                height="48px"/>-->
+<!--        </span>-->
+<!--      </button>-->

      <button
          class="editableValue"
@@ -42,13 +42,13 @@
        <span><v-icon>mdi-chevron-right</v-icon></span>
      </button>

-      <button
-          class="editableValue"
-          @click="openEditBirthday">
-        <span class="label">{{ $t('personnalinformation.dob') }}</span>
-        <span class="value">{{ userProfileStore.user.birthDate }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditBirthday">-->
+<!--        <span class="label">{{ $t('personnalinformation.dob') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.birthDate }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->

    </v-card>

@@ -66,29 +66,29 @@
        <span><v-icon>mdi-chevron-right</v-icon></span>
      </button>

-      <button
-          class="editableValue"
-          @click="openEditPhone">
-        <span class="label">{{ $t('personnalinformation.phone') }}</span>
-        <span class="value">{{ userProfileStore.user.phoneNumber }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditPhone">-->
+<!--        <span class="label">{{ $t('personnalinformation.phone') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.phoneNumber }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->
    </v-card>

    <!-- Address -->
-    <v-card class="w-full">
-      <v-card-title>
-        {{ $t('personnalinformation.addresses') }}
-      </v-card-title>
+<!--    <v-card class="w-full">-->
+<!--      <v-card-title>-->
+<!--        {{ $t('personnalinformation.addresses') }}-->
+<!--      </v-card-title>-->

-      <button
-          class="editableValue"
-          @click="openEditAddress">
-        <span class="label">{{ $t('personnalinformation.home') }}</span>
-        <span class="value">{{ userProfileStore.user.address }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
-    </v-card>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditAddress">-->
+<!--        <span class="label">{{ $t('personnalinformation.home') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.address }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->
+<!--    </v-card>-->
  </div>

  <!-- Modal -->