Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d

frontend/src/views/creators/BannerActions.vue

@@ -0,0 +1,285 @@
+<script setup>
+import { useClient } from '@/plugins/api.js';
+import { useBrandingStore } from '@/stores/brandingStore.js';
+import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
+
+const brandingStore = useBrandingStore();
+const isMobile = ref(false);
+const creator = ref(null);
+const baseURL = window.location.origin;
+const creatorName = window.location.pathname.split('/@').pop();
+
+function updateIsMobile() {
+  isMobile.value = window.innerWidth <= 640;
+}
+
+// Récupération des URLs des réseaux sociaux
+function GetSocialsUrls() {
+  const socials = [];
+  const brandingSocials = brandingStore.value.socials;
+
+  if (brandingSocials.facebookUrl) {
+    socials.push({
+      icon: 'mdi-facebook',
+      url: brandingSocials.facebookUrl,
+    });
+  }
+  if (brandingSocials.instagramUrl) {
+    socials.push({
+      icon: 'mdi-instagram',
+      url: brandingSocials.instagramUrl,
+    });
+  }
+  if (brandingSocials.xUrl) {
+    socials.push({
+      icon: 'mdi-twitter',
+      url: brandingSocials.xUrl,
+    });
+  }
+  if (brandingSocials.linkedInUrl) {
+    socials.push({
+      icon: 'mdi-linkedin',
+      url: brandingSocials.linkedInUrl,
+    });
+  }
+  if (brandingSocials.tikTokUrl) {
+    socials.push({
+      icon: '/images/socials/tiktok-white.png',
+      url: brandingSocials.tikTokUrl,
+    });
+  }
+  if (brandingSocials.youtubeUrl) {
+    socials.push({
+      icon: 'mdi-youtube',
+      url: brandingSocials.youtubeUrl,
+    });
+  }
+  if (brandingSocials.redditUrl) {
+    socials.push({
+      icon: 'mdi-reddit',
+      url: brandingSocials.redditUrl,
+    });
+  }
+  if (brandingSocials.websiteUrl) {
+    socials.push({
+      icon: 'mdi-web',
+      url: brandingSocials.websiteUrl,
+    });
+  }
+
+  return socials;
+}
+
+const isSticky = ref(false);
+const mainContainer = ref(null);
+
+onMounted(async () => {
+  updateIsMobile();
+  window.addEventListener('resize', updateIsMobile);
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      isSticky.value = !entry.isIntersecting;
+    },
+    { threshold: 0 }
+  );
+
+  if (mainContainer.value) {
+    observer.observe(mainContainer.value);
+  }
+
+  const client = useClient();
+
+  try {
+    const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
+    creator.value = creatorResponse.data;
+  } catch (error) {
+    creator.value = undefined;
+  }
+});
+
+onBeforeUnmount(() => {
+  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-5"
+                  :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-row"
+                :style="{ color: brandingStore.colors.onPrimary }"
+              >
+                <div v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center verifiedhook">
+                  <icon-account-verified></icon-account-verified>
+                </div>
+
+                <div class="flex flex-col">
+                  <span class="capitalize text-3xl titlepos">
+                    {{ brandingStore.value.name }}
+                  </span>
+                  <span class="capitalize text-lg titlepos">
+                    {{ brandingStore.value.title }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Version Mobile -->
+            <div class="relative">
+              <div
+                :style="{
+                  borderColor: brandingStore.colors.secondary,
+                  height: '80px',
+                }"
+              >
+                <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 v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center">
+                    <icon-account-verified></icon-account-verified>
+                  </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">-->
+<!--              &lt;!&ndash;<subscribe-button></subscribe-button>&ndash;&gt;-->
+<!--            </div>-->
+<!--          </div>-->
+        </div>
+
+        <!-- Bouton Support -->
+        <div
+          v-show="brandingStore.value.acceptDonation"
+          class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
+          :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
+            v-if="creator"
+            :creator-id="creator.id"
+            :creator-name="creator.name"
+            :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
+            :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
+          ></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;
+}
+
+
+.titlepos {
+  position: relative;
+  top: 30px; 
+}
+.verifiedhook{
+  position: relative;
+  top: 16px; 
+}
+
+</style>

frontend/src/views/creators/CreatorBanner.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- 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="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>
+      <banner-actions></banner-actions>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div v-if="isMobile">
+    <div class="shadow-lg rounded-2xl ">
+      <div class="relative z-20">
+        <div class="shadow-2xl flex items-center px-2 py-2"
+             :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
+  
+          <router-link to="/@Hutopy">
+            <div class="flex items-center">
+              <HutopySvg></HutopySvg>          
+              <div class="text-xl font-bold -ml-2 ">Hutopy</div>
+            </div>
+          </router-link>
+         
+          <div class="flex-1"></div>
+         
+          <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>    
+      <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";
+import HutopySvg from "@/views/svg/HutopySvg.vue";
+
+
+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>
+
+<style>
+
+</style>

frontend/src/views/creators/CreatorContent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="w-full h-full">   
+    <div v-if="brandingStore.value.loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <content-list :creator-id="brandingStore.value.id"
+      ></content-list>
+    </div>    
+  </div>
+</template>
+
+<script async setup>
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import ContentList from "@/views/contents/ContentList.vue";
+import {useRouter} from "vue-router";
+const brandingStore = useBrandingStore()
+const router = useRouter();
+
+const createHtmlContent = () => {
+  router.push('/content/editor');
+}
+
+const createContent = () => {
+  router.push('/content/post');
+}
+
+</script>

frontend/src/views/creators/CreatorHome.vue

@@ -0,0 +1,634 @@
+<template>
+  <div v-if="creatorProfileStore.creator.id === brandingStore.value.id" class="flex justify-end space-x-2 mb-5 pa-1">
+    <!-- Bouton principal : Éditer ou Enregistrer -->
+    <button
+        v-if="isLoggedIn"
+        @click="isEditMode ? saveChanges() : toggleEditMode()"
+        class="px-4 py-2 rounded-md hover:opacity-90"
+        :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+    >
+      {{ isEditMode ? 'Enregistrer' : 'Éditer' }}
+    </button>
+
+    <button
+        v-if="isEditMode && isLoggedIn"
+        @click="cancelEdit"
+        class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
+    >
+      Annuler
+    </button>
+  </div>
+  
+  <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 }">
+
+  
+
+   
+    <!-- Titre principal -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Titre</div>
+      <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <h1 v-else-if="mainTitle" class="text-4xl font-bold text-center ">{{ mainTitle }}</h1>
+
+    <!-- Image principale -->
+    <div class="relative flex justify-center">
+      <label v-if="isEditMode">
+        <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
+        <img :src="mainImageUrl || fallbackImage"
+             alt="Image principale"
+             class="rounded-md max-w-full h-auto cursor-pointer"/>
+      </label>     
+      <img v-else-if="mainImageUrl" :src="mainImageUrl"
+           alt="Image principale"
+           class="rounded-md max-w-full h-auto cursor-pointer"
+           @click="openFullscreen(mainImageUrl)"/>
+   
+      <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
+              class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+        X
+      </button>
+    </div>
+
+    <!-- Texte sous l'image principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Description</div>
+      <textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <p v-else-if="mainImageText" class="text-lg text-justify">
+      {{ mainImageText }}
+    </p>
+
+    <!-- Titre video principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Titre Vidéo Princpiale</div>
+      <textarea v-model="editableVideoSubtitleMain" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <h2 v-else-if="videoSubtitleMain" class="text-2xl font-semibold text-center" >
+      {{ videoSubtitleMain }}
+    </h2>
+
+    <!-- Vidéo YouTube principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2">URL vidéo</div>
+      <input
+          v-if="isEditMode"
+          type="text"
+          v-model="editableVideoUrlMain"
+          class="w-full p-2 border rounded-md"
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+      />
+    </div>
+    <div class="flex justify-center">
+      <div v-if="isEditMode"></div>
+      <div v-else-if="videoUrlMain" class="video-container">
+        <iframe
+            :src="videoUrlMain"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            class="video-frame">
+        </iframe>
+      </div>
+    </div>
+
+
+    <!-- Texte sous video principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Description</div>
+      <textarea v-model="editableMainVideoText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <p v-else-if="mainVideoText" class="text-lg text-justify">
+      {{ mainVideoText }}
+    </p>
+
+
+    <!-- Sous-titre avant les deux images -->
+    <div v-if="isEditMode">
+      <div v-if="isEditMode" class="text-2xl py-2"> Sous-titre</div>
+      <textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <h2 v-else-if="imagesSubtitle" class="text-2xl font-semibold text-center">
+      {{ imagesSubtitle }}
+    </h2>
+
+    <!-- 4 images côte à côte -->
+    <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />
+    <div>
+      <!-- Mode édition -->
+      <div v-if="isEditMode">
+        <div class="text-2xl py-2">Images</div>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+          <!-- Première image -->
+          <div class="relative">
+            <label>
+              <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" />
+            </label>
+            <button @click="deleteImage('image1Url')"
+                    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 class="relative">
+            <label>
+              <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" />
+            </label>
+            <button @click="deleteImage('image2Url')"
+                    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 class="relative">
+            <label>
+              <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
+              <img :src="image3Url || fallbackImage"
+                   alt="Image 3"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image3Url')"
+                    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 class="relative">
+            <label>
+              <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
+              <img :src="image4Url || fallbackImage"
+                   alt="Image 4"
+                   class="rounded-md max-w-full h-auto cursor-pointer" />
+            </label>
+            <button @click="deleteImage('image4Url')"
+                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+              X
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Mode normal -->
+      <div v-else>
+        <div class="flex flex-wrap gap-4">
+          <!-- Première image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image1Url" @click="openFullscreen(image1Url)">
+            <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Deuxième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image2Url" @click="openFullscreen(image2Url)">
+            <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Troisième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url" @click="openFullscreen(image3Url)">
+            <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+
+          <!-- Quatrième image -->
+          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url" @click="openFullscreen(image4Url)">
+            <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+
+
+
+    <!-- Texte sous les deux images -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Images</div>
+      <textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <p v-else-if="imagesText" class="text-lg text-justify">
+      {{ imagesText }}
+    </p>
+
+    <!-- Sous-titre avant la vidéo -->
+
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Titre Video</div>
+      <textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <h2 v-else-if="videoSubtitle" class="text-2xl font-semibold text-center">
+      {{ videoSubtitle }}
+    </h2>
+
+    <!-- Vidéo YouTube -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2">URL vidéo</div>
+      <input
+          v-if="isEditMode"
+          type="text"
+          v-model="editableVideoUrl"
+          class="w-full p-2 border rounded-md"
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+      />
+    </div>
+    <div class="flex justify-center">
+      <div v-if="isEditMode"></div>
+      <iframe
+          v-else-if="videoUrl"
+          :src="videoUrl"
+          title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+          class="rounded-md"
+          style="width: 600px; height: 337px;"
+      ></iframe>
+    </div>
+
+    <!-- Texte sous la vidéo -->
+    <div v-if="isEditMode" class="text-2xl"> Description</div>
+    <div v-if="isEditMode">
+      <textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <p v-else-if="videoText" class="text-lg text-justify">
+      {{ videoText }}
+    </p>
+
+    <!-- Informations de contact -->
+    <div class="flex flex-col space-y-6 mt-8">
+      <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"
+              type="text"
+              class="w-full p-2 border rounded-md"
+              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          />
+        </div>
+        <!-- Édition de l'email -->
+        <div>
+          <label class="text-lg">Adresse email</label>
+          <input
+              v-model="editableEmail"
+              type="text"
+              class="w-full p-2 border rounded-md"
+              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          />
+        </div>
+      </div>
+      <div
+          v-else
+          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">
+          <i class="mdi mdi-phone-outline text-2xl"></i>
+          <span>{{ editablePhoneNumber }}</span>
+        </div>
+        <!-- Affichage de l'email -->
+        <div v-if="editableEmail" class="flex items-center space-x-2">
+          <i class="mdi mdi-email-outline text-2xl"></i>
+          <a
+              :href="`mailto:${editableEmail}`"
+              class="no-underline text-current"
+          >
+            {{ editableEmail }}
+          </a>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import { useClient } from "@/plugins/api.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
+import { useDisplay } from "vuetify";
+import { watch} from "vue";
+import FullscreenImage from "@/views/creators/FullscreenImage.vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);
+
+
+const creatorProfileStore = useCreatorProfileStore();
+const brandingStore = useBrandingStore();
+const client = useClient();
+
+const isLoading = ref(true);
+const isLoggedIn = true;
+const isEditMode = ref(false);
+
+
+
+const currentImage = ref("");
+const fullscreenImage = ref(null);
+
+function openFullscreen(imageUrl) {
+  currentImage.value = imageUrl;
+  fullscreenImage.value.open();
+}
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
+// Image de fallback pour l'éditeur
+const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
+
+// Variables réactives pour les données
+const editablePhoneNumber = ref("");
+const editableEmail = ref("");
+const mainTitle = ref("");
+const mainImageUrl = ref("");
+const mainImageText = ref("");
+const mainVideoText = ref("");
+const imagesSubtitle = ref("");
+const image1Url = ref("");
+const image2Url = ref("");
+const image3Url = ref("");
+const image4Url = ref("");
+const imagesText = ref("");
+const videoSubtitle = ref("");
+const videoSubtitleMain = ref("");
+const videoUrlMain = ref("");
+const videoUrl = ref("");
+const videoText = ref("");
+const phoneNumber = ref("");
+const email = ref("");
+
+
+const editableImages = ref([null, null, null, null]); 
+
+
+// Editable fields
+const editableMainTitle = ref("");
+const editableMainImageText = ref("");
+const editableMainVideoText = ref("");
+const editableImagesSubtitle = ref("");
+const editableImagesText = ref("");
+const editableVideoSubtitle = ref("");
+const editableVideoSubtitleMain = ref("");
+const editableVideoText = ref("");
+const editableVideoUrlMain = ref("");
+const editableVideoUrl = ref("");
+
+// Activer/désactiver le mode édition
+function toggleEditMode() {
+  isEditMode.value = !isEditMode.value;
+  if (isEditMode.value) {
+    // Charger les valeurs pour l'édition
+    editableMainTitle.value = mainTitle.value;
+    editableMainImageText.value = mainImageText.value;
+    editableMainVideoText.value = mainVideoText.value;
+    editableImagesSubtitle.value = imagesSubtitle.value;
+    editableImagesText.value = imagesText.value;
+    editableVideoSubtitle.value = videoSubtitle.value;
+    editableVideoSubtitleMain.value = videoSubtitleMain.value;
+    editableVideoText.value = videoText.value;
+    editableVideoUrlMain.value = videoUrlMain.value;
+    editableVideoUrl.value = videoUrl.value;
+    editablePhoneNumber.value = phoneNumber.value;
+    editableEmail.value = email.value;
+  } else {
+    // Sauvegarder les modifications ou réinitialiser les URLs des images supprimées
+    mainTitle.value = editableMainTitle.value;
+    mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
+    imagesSubtitle.value = editableImagesSubtitle.value;
+    imagesText.value = editableImagesText.value;
+    videoSubtitle.value = editableVideoSubtitle.value;
+    videoSubtitleMain.value = editableVideoSubtitleMain.value;
+    videoText.value = editableVideoText.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
+    videoUrl.value = editableVideoUrl.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
+
+    // Réinitialisation des images supprimées à des strings vides si nécessaire
+    if (mainImageUrl.value === null) mainImageUrl.value = "";
+    if (image1Url.value === null) image1Url.value = "";
+    if (image2Url.value === null) image2Url.value = "";
+    if (image3Url.value === null) image3Url.value = "";
+    if (image4Url.value === null) image4Url.value = "";
+  }
+}
+
+
+
+
+// Supprimer une image
+function deleteImage(field) {
+  switch (field) {
+    case "mainImageUrl":
+      mainImageUrl.value = ""; // Remplace par un string vide
+      break;
+    case "image1Url":
+      image1Url.value = ""; // Remplace par un string vide
+      break;
+    case "image2Url":
+      image2Url.value = ""; // Remplace par un string vide
+      break;
+    case "image3Url":
+      image3Url.value = ""; // Remplace par un string vide
+      break;
+    case "image4Url":
+      image4Url.value = ""; // Remplace par un string vide
+      break;
+  }
+}
+
+
+// Mettre à jour une image
+function updateImage(field, event) {
+  const file = event.target.files[0];
+  if (file) {
+    // Stocker le fichier dans editableImages pour l'envoi
+    switch (field) {
+      case "mainImageUrl":
+        editableImages.value[0] = file;
+        mainImageUrl.value = URL.createObjectURL(file);
+        break;
+      case "image1Url":
+        editableImages.value[1] = file;
+        image1Url.value = URL.createObjectURL(file);
+        break;
+      case "image2Url":
+        editableImages.value[2] = file;
+        image2Url.value = URL.createObjectURL(file);
+        break;
+      case "image3Url":
+        editableImages.value[3] = file;
+        image3Url.value = URL.createObjectURL(file);
+        break;
+      case "image4Url":
+        editableImages.value[4] = file;
+        image4Url.value = URL.createObjectURL(file);
+        break;
+    }
+  }
+}
+
+
+
+// Charger les données au montage
+onMounted(() => {
+  mainTitle.value = brandingStore.presentationInfos.title;
+  mainImageUrl.value = brandingStore.presentationInfos.mainImageUrl;
+  mainImageText.value = brandingStore.presentationInfos.mainImageText;
+  mainVideoText.value = brandingStore.presentationInfos.mainVideoText;
+  imagesSubtitle.value = brandingStore.presentationInfos.imagesSubtitle;
+  image1Url.value = brandingStore.presentationInfos.image1Url;
+  image2Url.value = brandingStore.presentationInfos.image2Url;
+  image3Url.value = brandingStore.presentationInfos.image3Url;
+  image4Url.value = brandingStore.presentationInfos.image4Url;
+  imagesText.value = brandingStore.presentationInfos.imagesText;
+  videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
+  videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
+  videoUrl.value = brandingStore.presentationInfos.videoUrl;
+  videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
+  videoText.value = brandingStore.presentationInfos.videoText;
+  editablePhoneNumber.value = brandingStore.presentationInfos.phoneNumber;
+  editableEmail.value= brandingStore.presentationInfos.email;
+  phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
+  email.value = brandingStore.presentationInfos.email;
+});
+
+async function saveChanges() {
+  if (!creatorProfileStore.creator.id) {
+    console.error("L'ID du créateur est manquant !");
+    return;
+  }
+
+  const formData = new FormData();
+
+  // Ajout des champs textuels
+  formData.append("PhoneNumber", editablePhoneNumber.value || "");
+  formData.append("Email", editableEmail.value || "");
+  formData.append("Title", editableMainTitle.value || "");
+  formData.append("MainImageText", editableMainImageText.value || "");
+  formData.append("MainVideoText", editableMainVideoText.value || "");
+  formData.append("ImagesSubtitle", editableImagesSubtitle.value || "");
+  formData.append("ImagesText", editableImagesText.value || "");
+  formData.append("VideoSubtitle", editableVideoSubtitle.value || "");
+  formData.append("VideoSubtitleMain", editableVideoSubtitleMain.value || "");
+  formData.append("VideoUrlMain", editableVideoUrlMain.value || "");
+  formData.append("VideoUrl", editableVideoUrl.value || "");
+  formData.append("VideoText", editableVideoText.value || "");
+
+  // Ajout des URLs d'images supprimées
+  formData.append("MainImageUrl", mainImageUrl.value || ""); // Peut contenir un string vide
+  formData.append("Image1Url", image1Url.value || "");
+  formData.append("Image2Url", image2Url.value || "");
+  formData.append("Image3Url", image3Url.value || "");
+  formData.append("Image4Url", image4Url.value || "");
+
+  // Ajout des fichiers d'images téléversées
+  if (editableImages.value[0]) formData.append("MainImage", editableImages.value[0]);
+  if (editableImages.value[1]) formData.append("Image1", editableImages.value[1]);
+  if (editableImages.value[2]) formData.append("Image2", editableImages.value[2]);
+  if (editableImages.value[3]) formData.append("Image3", editableImages.value[3]);
+  if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
+
+  try {
+    // Désactiver le bouton de sauvegarde pour éviter les clics multiples
+    isLoading.value = true;
+
+    // Envoyer les données au backend
+    const response = await client.post(
+        `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
+        formData,
+        { headers: { "Content-Type": "multipart/form-data" } }
+    );
+
+    // Mettre à jour les valeurs locales pour refléter les changements
+    mainTitle.value = editableMainTitle.value;
+    mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
+    imagesSubtitle.value = editableImagesSubtitle.value;
+    imagesText.value = editableImagesText.value;
+    videoSubtitle.value = editableVideoSubtitle.value;
+    videoSubtitleMain.value = editableVideoSubtitleMain.value;
+    videoText.value = editableVideoText.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
+    videoUrl.value = editableVideoUrl.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
+
+    console.log("Données sauvegardées :", response.data);
+
+    // Réinitialiser le mode édition
+    isEditMode.value = false;
+
+    // Rafraîchir après une légère pause pour s'assurer des mises à jour visuelles
+   
+  } catch (error) {
+    console.error("Erreur lors de la sauvegarde :", error);
+  } finally {
+    // Réactiver les interactions
+    isLoading.value = false;
+  }
+}
+
+
+
+
+function cancelEdit() {
+  // Restaurer les valeurs d'origine
+  editableMainTitle.value = mainTitle.value;
+  editableMainImageText.value = mainImageText.value;
+  editableMainVideoText.value = mainVideoText.value;
+  editableImagesSubtitle.value = imagesSubtitle.value;
+  editableImagesText.value = imagesText.value;
+  editableVideoSubtitle.value = videoSubtitle.value;
+  editableVideoSubtitleMain.value = videoSubtitleMain.value;
+  editableVideoText.value = videoText.value;
+  editableVideoUrlMain.value = videoUrlMain.value;
+  editableVideoUrl.value = videoUrl.value;
+  editablePhoneNumber.value = phoneNumber.value;
+  editableEmail.value = email.value;
+
+  // Désactiver le mode édition
+  isEditMode.value = false;
+}
+
+</script>
+
+<style scoped>
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
+}
+
+.video-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0.5rem; /* Pour les bords arrondis */
+}
+</style>

frontend/src/views/creators/CreatorLayout.vue

@@ -0,0 +1,27 @@
+<template>
+
+  <div class="flex flex-col min-h-screen max-w-[1100px] mx-auto">
+    <div v-if="brandingStore.loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <creator-banner></creator-banner>
+    </div>
+    <div class="py-8 flex-grow">
+      <router-view></router-view>
+    </div>
+
+    <div>
+      <Footer></Footer>
+    </div>
+
+  </div>
+  
+</template>
+
+<script async setup>
+import CreatorBanner from "@/views/creators/CreatorBanner.vue";
+import Footer from "@/views/main/Footer.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+const brandingStore = useBrandingStore()
+</script>

frontend/src/views/creators/DonationButton.vue

@@ -0,0 +1,165 @@
+<template> 
+  <v-btn class="hover:scale-125" variant="text" icon @click="openDonationDialog()">
+    <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
+  </v-btn>
+
+
+  <v-dialog v-model="donationModal" max-width="500">
+    <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!
+        </div>
+
+        <div class="flex flex-row align-center px-3">
+          <img
+              :src="brandingStore.value.images.logo"
+              alt="Profile Image"
+              class="rounded-full"
+              width="40"
+              height="40"
+              :style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
+          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
+          <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
+
+        <v-card-text>
+          <v-text-field
+              v-model="tipAmountInDollars"
+              type="number"
+              :min="0"
+              class="p-2"
+              label="Montant"
+              density="comfortable"
+              variant="outlined"
+              hide-details
+              clearable
+              inputmode="numeric"
+              @keydown="preventNonNumeric"
+              prepend-inner-icon="mdi-currency-usd"
+          ></v-text-field>
+
+          <v-textarea v-model="tipMessage"
+                      label="Message (facultatif)"
+                      class="p-2"
+                      density="comfortable"
+                      variant="outlined"
+                      hide-details
+                      clearable
+          ></v-textarea>
+
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
+                 @click="goPay()" class="w-full mt-5">
+            Envoyez
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-form>
+  </v-dialog>
+
+  <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+    <template v-slot:default>
+      <v-card>
+
+        <div id="checkout">
+        </div>
+
+        <v-spacer></v-spacer>
+
+        <v-card-actions>
+          <v-btn block class="ma-auto"
+                 style="width: 200px;"
+                 @click="closeDialog()">Annuler
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+
+</template>
+
+<script setup>
+import {useClient} from '@/plugins/api.js';
+import {loadStripe} from '@stripe/stripe-js';
+import {onMounted, ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
+
+const props = defineProps({
+  creatorId: {default: 'missing-creator-id', required: true},
+  creatorName: {default: 'missing-creator-name', required: true},
+  onSuccessUrl: {default: 'missing-on-success-u', required: true},
+  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
+  iconColorClass: {default: 'text-black'}
+});
+
+const donationModal = ref(false);
+
+function openDonationDialog() {
+  donationModal.value = true
+}
+
+function closeDonationDialog() {
+  donationModal.value = false
+}
+
+
+const isPaymentDialogActive = ref(false);
+
+const tipAmountInDollars = ref(0);
+const tipMessage = ref("");
+
+let stripe = null;
+let checkout;
+
+
+onMounted(async () => {
+  stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
+});
+
+async function createCheckoutSession() {
+  const client = useClient()
+
+  let clientSecret = await client.post(
+      `/api/tips`,
+      {
+        amount: tipAmountInDollars.value * 100,
+        currency: 'CAD',
+        message: tipMessage.value,
+        creatorId: props.creatorId,
+        checkoutSuccessUrl: props.onSuccessUrl,
+        checkoutCancelledUrl: props.onCancelledUrl
+      });
+
+  return clientSecret.data;
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  if (checkout) {
+    checkout.destroy();
+  }
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  const response = await createCheckoutSession()
+
+  // Redirect to the Stripe Checkout page
+  window.location.href = response.stripeCheckoutUrl
+}
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
+</script>

frontend/src/views/creators/DonationButtonBanner.vue

@@ -0,0 +1,208 @@
+<template>
+  <v-btn
+    variant="text"
+    style="font-size: x-large; height: 100%"
+    block
+    @click="openDonationDialog()"
+  >
+    {{ $t('isupportbtn.isupport') }}
+  </v-btn>
+
+  <v-dialog v-model="donationModal" max-width="500">
+    <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"> {{ $t('isupportbtn.isupport') }}</div>
+
+        <div class="flex flex-row align-center px-3">
+          <img
+            :src="brandingStore.value.images.logo"
+            alt="Profile Image"
+            class="rounded-full"
+            width="40"
+            height="40"
+            :style="{ border: `2px solid ${brandingStore.colors.secondary}` }"
+          />
+          <div class="capitalize px-2 text-2xl">
+            {{ brandingStore.value.name }}
+          </div>
+          <v-btn
+            icon
+            @click="closeDonationDialog()"
+            class="ml-auto"
+            variant="text"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
+
+        <v-card-text>
+          <v-text-field
+            v-model="tipAmountInDollars"
+            type="number"
+            autofocus
+            placeholder="0"
+            :min="0"
+            class="p-2"
+            :label="`${$t('isupportbtn.amount')}`"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            clearable
+            inputmode="numeric"
+            @keydown="preventNonNumeric"
+            prepend-inner-icon="mdi-currency-usd"
+          ></v-text-field>
+
+          <v-textarea
+            v-model="tipMessage"
+            :label="`${$t('isupportbtn.message')}`"
+            class="p-2"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            clearable
+          ></v-textarea>
+
+          <v-btn
+            variant="outlined"
+            :style="{
+              borderColor: brandingStore.colors.primary,
+              color: brandingStore.colors.primary,
+              backgroundColor: brandingStore.colors.secondary,
+            }"
+            @click="goPay()"
+            class="w-full mt-5"
+          >
+            {{ $t('isupportbtn.send') }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-form>
+  </v-dialog>
+
+  <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+    <template v-slot:default>
+      <v-card :style="{ padding: '20px' }">
+        <div id="checkout"></div>
+        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
+
+        <v-spacer></v-spacer>
+
+        <v-card-actions>
+          <v-btn
+            block
+            class="ma-auto"
+            style="width: 200px"
+            @click="closeDialog()"
+            >Annuler
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup>
+import { useClient } from '@/plugins/api.js';
+import { useBrandingStore } from '@/stores/brandingStore.js';
+import { loadStripe } from '@stripe/stripe-js';
+import { onMounted, ref } from 'vue';
+
+const brandingStore = useBrandingStore();
+
+const props = defineProps({
+  creatorId: { default: 'missing-creator-id', required: true },
+  creatorName: { default: 'missing-creator-name', required: true },
+  onSuccessUrl: { default: 'missing-on-success-u', required: true },
+  onCancelledUrl: { default: 'missing-on-cancelled-url', required: true },
+  iconColorClass: { default: 'text-black' },
+});
+
+const errorMessage = ref('');
+
+const donationModal = ref(false);
+
+function openDonationDialog() {
+  donationModal.value = true;
+}
+
+function closeDonationDialog() {
+  donationModal.value = false;
+}
+
+const isPaymentDialogActive = ref(false);
+
+const tipAmountInDollars = ref('');
+const tipMessage = ref('');
+
+let stripe = null;
+let checkout;
+
+onMounted(async () => {
+  stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
+});
+
+async function createCheckoutSession() {
+  const client = useClient();
+  try {
+    let clientSecret = await client.post(`/api/tips`, {
+      creatorId: props.creatorId,
+      amount: tipAmountInDollars.value * 100,
+      currency: 'CAD',
+      message: tipMessage.value,
+      checkoutSuccessUrl: props.onSuccessUrl,
+      checkoutCancelledUrl: props.onCancelledUrl,
+    });
+
+    return clientSecret.data;
+  } catch (error) {
+    console.error(error);
+    errorMessage.value = 'Une erreur est survenue. Veuillez réessayer.';
+  }
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  errorMessage.value = '';
+
+  if (checkout) {
+    checkout.destroy();
+  }
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  const response = await createCheckoutSession();
+
+  // Redirect to the Stripe Checkout page
+  window.location.href = response.stripeCheckoutUrl;
+}
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<style>
+.full-height {
+  height: 100%;
+}
+
+.error-message {
+  color: white;
+  background-color: red;
+  border-radius: 4px;
+  text-align: center;
+  width: 100%;
+  padding: 5px;
+}
+</style>

frontend/src/views/creators/ExclusiveContentCard.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { ref } from "vue";
+
+const branding = useBrandingStore();
+const menu = ref(false); // C'est pour le menu déroulant!
+
+// Fonction pour convertir une couleur hexadécimale en RGB afin d'appliquer la transparence avec nos couleurs du backend hex a rgb
+function hexToRgb(hex) {
+  const bigint = parseInt(hex.replace('#', ''), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `${r}, ${g}, ${b}`;
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <!-- ExclusiveCard -->
+    <div
+        class="rounded-lg w-[290px] h-[380px] relative"
+        :style="{
+        backgroundColor: branding.colors.surface,
+        boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
+        borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
+        borderWidth: '1px',
+      }"
+    >
+      <!-- Conteneur pour aligner le titre et le bouton -->
+      <div
+          class="flex items-center justify-between py-2 px-3"
+          :style="{ color: branding.colors.onPrimary }"
+      >
+        <div class="text-md">Comment créer un logo</div>
+
+        <!-- Bouton à trois points avec menu déroulant -->
+        <v-menu v-model="menu" activator="parent" offset-y>
+          <template #activator="{ props }">
+            <button
+                v-bind="props"
+                class="text-gray-600"
+                :style="{ color: branding.colors.onPrimary }"
+            >
+              <i class="mdi mdi-dots-vertical text-lg"></i>
+            </button>
+          </template>
+          <v-list
+              :style="{
+              backgroundColor: branding.colors.secondary,
+              color: branding.colors.onSecondary,
+            }"
+          >
+            <v-list-item title="Modifier" @click="modifier" />
+            <v-list-item title="Effacer" @click="effacer" />
+            <v-list-item title="Reporter" @click="reporter" />
+          </v-list>
+        </v-menu>
+      </div>
+
+      <div class="relative h-[170px] overflow-hidden">
+        <img
+            src="/images/hutopymedia/banners/hutopyul.png"
+            class="w-full h-full object-cover blur-md"
+            alt="image"
+        />
+        <div class="absolute inset-0 flex items-center justify-center">
+          <i
+              class="mdi mdi-lock text-7xl p-2 rounded-full"
+              :style="{
+              color: branding.colors.secondary,
+              border: `2px solid ${branding.colors.secondary}`,
+            }"
+          ></i>
+        </div>
+      </div>
+
+      <div class="text-end pa-2 px-4" :style="{ color: branding.colors.onPrimary }">
+        14-05-2024
+      </div>
+
+      <div class="text-justify px-4 text-md" :style="{ color: branding.colors.onPrimary }">
+        Tutoriel sur comment s'assurer d'avoir un logo unique et percutant
+        qui se démarque de la concurrence.
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script>
+function modifier() {
+  console.log("Modifier l'élément");
+}
+function effacer() {
+  console.log("Effacer l'élément");
+}
+function reporter() {
+  console.log("Reporter l'élément");
+}
+</script>

frontend/src/views/creators/ExclusiveContentContainer.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="overflow-hidden relative" @wheel="handleScroll">
+    <!-- Container that holds all the posts and permet le défilement -->
+    <div class="relative h-[1000px] max-h-[1000px] overflow-hidden p-4">
+      <div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
+        <!-- Grille avec colonnes dynamiques basées sur la largeur -->
+        <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-[250px]">
+          <div v-for="(item, index) in contenuexclusif" :key="index"
+               class="my-1 text-white rounded-lg w-full border-2 shadow h-[380px] hover-card relative overflow-hidden"
+               :style="{ 
+                 background: creator.colors.bannerTop, 
+                 borderColor: `rgba(${getRGB(creator.colors.bannerBottom)}, 0.38)` 
+               }">
+            <div class="flex justify-center items-center">            
+            </div>
+            <div>
+              <img :src="item.photo" class="w-full h-auto max-h-[170px] object-cover" />
+
+              <!-- Section du nombre de clics et du bouton d'édition -->
+              <div class="flex flex-row justify-between items-center p-2">
+                <div class="flex items-center">
+                  <p class="text-xs">{{ item.date }}</p>
+                  <p class="text-xs px-2">|</p>
+                  <p class="text-xs">200 clicks</p>
+                </div>
+                <!-- Bouton pour éditer le contenu à droite -->
+                <v-btn class="" icon variant="plain" @click="editCard(item)">
+                  <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+              </div>
+
+              <p class="text-md p-4">{{ item.title }}</p>
+              <!-- Section des étoiles, fixée dans le coin inférieur droit -->
+              <div v-if="item.rating" class="stars flex justify-end p-2 absolute bottom-0 right-0">
+                <!-- Génération dynamique des étoiles -->
+                <span v-for="star in 5" :key="star" class="text-yellow-500">
+                  <v-icon v-if="star <= item.rating">mdi-star</v-icon>
+                  <v-icon v-else>mdi-star-outline</v-icon>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+
+function hexToRgb(hex) {
+  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function getRGB(hexColor) {
+  const rgb = hexToRgb(hexColor);
+  return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+}
+
+const contenuexclusif = ref([
+  { title: 'Créer un site web moderne', description: 'Un guide pour concevoir un site qui attire l\'attention et se démarque.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 2, date: '2024-09-19' },
+  { title: ' Les secrets d’un logo réussiLes secrets d’un logo réussiLes secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  { title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
+  // autres objets...
+]);
+
+const scrollPosition = ref(0);
+const cardHeight = 320;
+
+const props = defineProps({
+  creator: {
+    type: Object,
+    required: true,
+  },
+});
+
+function handleScroll(event) {
+  event.preventDefault();
+  const scrollSpeed = 100;
+  scrollPosition.value += event.deltaY > 0 ? scrollSpeed : -scrollSpeed;
+
+  const totalRows = Math.ceil(contenuexclusif.value.length / getCurrentCols());
+  const visibleRows = 1000 / cardHeight;
+  const maxScrollPosition = totalRows * cardHeight - visibleRows * cardHeight + 360;
+
+  if (scrollPosition.value < 0) {
+    scrollPosition.value = 0;
+  } else if (scrollPosition.value > maxScrollPosition) {
+    scrollPosition.value = maxScrollPosition;
+  }
+}
+
+const gridColsClass = computed(() => {
+  const width = window.innerWidth;
+  if (width >= 1200) {
+    return 'grid-cols-4';
+  } else if (width >= 900) {
+    return 'grid-cols-3';
+  } else if (width >= 600) {
+    return 'grid-cols-2';
+  } else {
+    return 'grid-cols-1';
+  }
+});
+
+function getCurrentCols() {
+  const width = window.innerWidth;
+  if (width >= 1200) {
+    return 4;
+  } else if (width >= 900) {
+    return 3;
+  } else if (width >= 600) {
+    return 2;
+  } else {
+    return 1;
+  }
+}
+
+function editCard(item) {
+  console.log(`Editing card: ${item.title}`);
+}
+
+window.addEventListener('resize', () => {
+  gridColsClass.value = getCurrentCols();
+});
+</script>
+
+<style>
+.hover-card {
+  transition: transform 0.3s ease-in-out;
+}
+
+.hover-card:hover {
+  transform: scale(1.03); /* Effet de hover restauré */
+}
+
+.stars .v-icon {
+  font-size: 18px; /* Ajustez la taille des icônes */
+}
+
+.limited-text {
+  height: 60px; /* Limite la hauteur du texte */
+  overflow: hidden; /* Empêche le texte de dépasser */
+  text-overflow: ellipsis; /* Ajoute des points de suspension si le texte dépasse */
+  white-space: nowrap; /* Le texte reste sur une seule ligne */
+}
+
+.stars {
+  position: absolute; /* Fixe les étoiles au bas à droite */
+  bottom: 10px;
+  right: 10px;
+}
+
+</style>

frontend/src/views/creators/FullscreenImage.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="isVisible" fullscreen hide-overlay transition="fade-transition">
+    <v-card class="pa-0" :style="{ backgroundColor: brandingStore.colors.background, color: brandingStore.colors.onBackground }">
+      <v-btn
+          class="close-button"
+          icon
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          @click="close"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+      <v-img :src="imageUrl" class="fullscreen-image"></v-img>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore();
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const isVisible = ref(false);
+
+function open() {
+  isVisible.value = true;
+}
+
+function close() {
+  isVisible.value = false;
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped>
+.fullscreen-image {
+  height: 100vh;
+  width: 100%;
+  object-fit: contain;
+}
+
+.close-button {
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  z-index: 10;
+}
+</style>

frontend/src/views/creators/SubscribeButton.vue

@@ -0,0 +1,97 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {computed, ref} from "vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+const brandingStore = useBrandingStore()
+const subscriptionStore = useSubscriptionStore()
+
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
+
+function subscribeToCreator() {
+  const target = `@${brandingStore.currentBrand}/subscription`;
+  router.push(target)
+}
+
+// Référence pour contrôler l'affichage du modal
+const showUnsubscribeModal = ref(false);
+
+function unsubscribeFromCreator() {
+  subscriptionStore.unsubscribeFrom(brandingStore.value.id);
+  // Fermer le modal après désabonnement
+  showUnsubscribeModal.value = false;
+}
+</script>
+
+<template>
+  <template v-if="isSubscribe">
+    <v-btn
+        :style="{ 
+          width: '150px',
+          height: '28px',
+          backgroundColor: brandingStore.colors.secondary, 
+          color: 'white', 
+          borderRadius: '8px',
+          padding: '10px 24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'background-color 0.3s ease'
+        }"
+        @click="subscribeToCreator"
+    >
+      {{ $t('subscribebutton.subscribe') }}
+    </v-btn>
+  </template>
+
+  <template v-else>
+    <v-btn
+        :style="{ 
+          width: '150px',
+          height: '28px',
+          backgroundColor: brandingStore.colors.secondary, 
+          color: 'white', 
+          borderRadius: '0 8px 8px 0',
+          padding: '10px 24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'background-color 0.3s ease'
+    }"
+        @click="showUnsubscribeModal = true"
+    >
+      <div>{{ $t('subscribebutton.unsubscribe') }}</div>
+    </v-btn>
+  </template>
+
+  <v-dialog v-model="showUnsubscribeModal" max-width="500">
+    <v-card class="text-center rounded-xl"
+            :style="{ border: `3px solid ${brandingStore.colors.secondary}` }">
+
+      <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+        <div class="flex-1 text-center">
+          Déabonnement
+        </div>
+      </div>
+
+      <v-card-title>Confirmation</v-card-title>
+      <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
+      <v-card-actions class="justify-center px-4 pb-4">
+        <v-btn text class="flex-grow-1" variant="outlined"
+               :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
+               @click="unsubscribeFromCreator">Oui
+        </v-btn>
+
+        <v-btn class="flex-grow-1"
+               :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
+               variant="outlined"
+               @click="showUnsubscribeModal = false">
+          <div :style="{ color: brandingStore.colors.secondary }">Non</div>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+

frontend/src/views/creators/SubscriptionList.vue

@@ -0,0 +1,33 @@
+<script setup>
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+
+const subscriptionStore = useSubscriptionStore()
+</script>
+
+<template>
+
+  <template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
+    <template v-for="subscription in subscriptionStore.subscriptions">
+
+      <RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
+
+        <div class="flex items-center content-center font-sans font-semibold pt-2 ">
+          <img
+              :src="subscription.creatorPortraitUrl"
+              alt="Profile Image"
+              class="rounded-full mx-2"
+              width="32px"
+              height="32px">
+          {{ subscription.creatorName }}
+        </div>
+
+      </RouterLink>
+
+    </template>
+  </template>
+
+  <template v-else>
+    <span>No subscriptions</span>
+  </template>
+
+</template>

frontend/src/views/creators/SubscriptionMenu.vue

@@ -0,0 +1,99 @@
+<script setup>
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {ref, onMounted} from 'vue';
+import {useClient} from "@/plugins/api.js";
+import {useRoute, useRouter} from "vue-router";
+
+const router = useRouter()
+const brandingStore = useBrandingStore();
+
+const tiers = ref([]);
+
+// Fetch tiers from API
+async function fetchTiers() {
+  const client = useClient()
+  const response = await client.get(
+      `/api/membership/tiers/${brandingStore.value.id}`
+  );
+  tiers.value = response.data;
+}
+
+// Fetch tiers when the component is mounted
+onMounted(() => {
+  fetchTiers();
+});
+
+// Colors
+
+const onPrimary = {color: brandingStore.colors.onPrimary}
+const Primary = {backgroundColor: brandingStore.colors.primary}
+
+const onSecondaryColor = {color: brandingStore.colors.onSecondary}
+const secondaryColor = {backgroundColor: brandingStore.colors.secondary}
+
+const route = useRoute()
+const baseUrl = window.location.origin;
+const creatorSlug = route.params.creator_slug || route.path.split('/')[1];
+const successUrl = `${baseUrl}/${creatorSlug}/content`
+const cancelledUrl = `${baseUrl}/${creatorSlug}`
+
+async function doSubscribe(tier) {
+  try {
+    const client = useClient()
+    const response = await client.post(
+        `/api/membership/subscribe`,
+        {
+          creatorId: brandingStore.value.id,
+          tierId: tier.id,
+          checkoutSuccessUrl: successUrl, // TODO: ensure the success-url will insert subscription
+          checkoutCancelledUrl: cancelledUrl
+        })
+    
+    window.location.href = response.data.stripeCheckoutUrl;
+  } catch (error) {
+    console.error("Error loading subscriptions:", error);
+  }
+}
+
+</script>
+
+<template>
+  <v-container class="d-flex justify-center">
+    <v-row justify="center">
+
+      <v-col
+          :cols="12 / Math.min(tiers.length, 3)"
+          md="4"
+          v-for="tier in tiers"
+          :key="tier.id"
+      >
+        <v-btn @click="doSubscribe(tier)" variant="text">
+          <div class="bg-white shadow-2xl rounded-2xl">
+            <v-img src="/images/hutopymedia/loginpage/loginhutopy.png" class="rounded-t-2xl"></v-img>
+            <div class="pa-6" :style="[Primary, onPrimary]">
+              <v-card-title class="text-h4 text-center py-4 ">{{ tier.name }}</v-card-title>
+              <div class="text-justify">{{ tier.description }}</div>
+            </div>
+
+            <v-card-text class="text-center rounded-b-2xl" :style="[secondaryColor, onSecondaryColor]">
+              <span class="text-h5">{{ tier.price }} $ / par mois</span>
+            </v-card-text>
+          </div>
+        </v-btn>
+      </v-col>
+
+    </v-row>
+  </v-container>
+
+</template>
+
+<style scoped>
+.v-card {
+  border-radius: 12px;
+}
+
+.dotted-border {
+  border: 2px dotted;
+  padding: 1px;
+}
+</style>