Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

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

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>