jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds SVG for all social network icons

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-13 00:22:40 -05:00
parent be06638582
commit d2e5810736
29 changed files with 422 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/package-lock.json generated
View File

@@ -32,8 +32,7 @@
"eslint-plugin-vue": "^9.22.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.2.11",
"vite-svg-loader": "^5.1.0"
"vite": "^5.2.11"
}
},
"node_modules/@alloc/quick-lru": {
@@ -1015,6 +1014,16 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
"integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
"dev": true,
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
"engines": {
"node": ">=6"
}
},
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",

3
frontend/package.json
View File

@@ -33,7 +33,6 @@
"eslint-plugin-vue": "^9.22.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.2.11",
"vite-svg-loader": "^5.1.0"
"vite": "^5.2.11"
}
}

1
frontend/src/assets/icons/facebook.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 498 B

8
frontend/src/assets/icons/hutopy.svg
View File

@@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406 432">
<path d="M0 0 C2.69849689 0.0031451 5.39587704 -0.02033719 8.09423828 -0.0456543 C24.64095924 -0.10755047 40.6877731 1.83145667 56.59814453 6.50317383 C57.64365479 6.80505615 58.68916504 7.10693848 59.76635742 7.41796875 C92.79656028 17.21576522 120.14877162 34.84217931 145.09814453 58.31567383 C145.80712891 58.97051758 146.51611328 59.62536133 147.24658203 60.30004883 C156.43027452 69.07141226 164.10800524 79.75645166 171.09814453 90.31567383 C171.99726562 91.64985352 171.99726562 91.64985352 172.91455078 93.01098633 C202.24624509 138.40104257 210.21713133 193.46657021 199.45556641 245.92919922 C192.90962056 275.68852135 179.08829353 305.20779517 159.09814453 328.31567383 C158.12705075 329.46844293 157.15708766 330.62216508 156.18798828 331.77661133 C145.74534244 344.15953661 145.74534244 344.15953661 140.09814453 349.31567383 C139.43814453 349.31567383 138.77814453 349.31567383 138.09814453 349.31567383 C138.09814453 349.97567383 138.09814453 350.63567383 138.09814453 351.31567383 C125.46428062 363.48565937 109.61785837 373.30307857 94.09814453 381.31567383 C93.49325195 381.62843262 92.88835937 381.94119141 92.26513672 382.26342773 C64.72703152 396.27155233 34.49385055 402.76232703 3.72314453 402.69067383 C2.84274506 402.69013 1.96234558 402.68958618 1.05526733 402.68902588 C-13.25349056 402.64848426 -26.95433873 401.73425935 -40.90185547 398.31567383 C-42.23821045 397.99421387 -42.23821045 397.99421387 -43.6015625 397.66625977 C-72.07884569 390.61747809 -98.87807183 378.00655878 -121.53857422 359.26879883 C-124.98230298 356.422742 -128.53024689 353.7103623 -132.06591797 350.97973633 C-132.97470703 350.15602539 -132.97470703 350.15602539 -133.90185547 349.31567383 C-133.90185547 348.65567383 -133.90185547 347.99567383 -133.90185547 347.31567383 C-134.56185547 347.31567383 -135.22185547 347.31567383 -135.90185547 347.31567383 C-135.90185547 346.65567383 -135.90185547 345.99567383 -135.90185547 345.31567383 C-136.56185547 345.31567383 -137.22185547 345.31567383 -137.90185547 345.31567383 C-139.24169922 343.98754883 -139.24169922 343.98754883 -140.83935547 342.06567383 C-143.10188476 339.38611053 -145.39815773 336.76489417 -147.80810547 334.21801758 C-148.30834229 333.68660156 -148.8085791 333.15518555 -149.32397461 332.60766602 C-150.32555716 331.54718583 -151.33248849 330.49172924 -152.3449707 329.44165039 C-155.90185547 325.64913211 -155.90185547 325.64913211 -155.90185547 322.31567383 C-151.7526342 322.86293323 -149.09751951 325.32327358 -145.96435547 327.87817383 C-112.49996321 354.28872765 -70.28107399 364.92725762 -28.16088867 360.37231445 C11.7404784 355.37903429 50.51367105 333.83116901 75.28564453 302.00317383 C102.2073581 266.1942078 113.74287629 223.77918143 108.03564453 179.19067383 C103.36182966 146.79964046 88.57557441 116.98148746 66.09814453 93.31567383 C65.60604492 92.78570801 65.11394531 92.25574219 64.60693359 91.7097168 C40.8738918 66.25446714 8.58347239 50.05740641 -25.90185547 45.31567383 C-27.07103516 45.13391602 -28.24021484 44.9521582 -29.44482422 44.76489258 C-71.61533582 39.65438979 -112.89208728 51.7135382 -146.31201172 77.46020508 C-149.8276055 80.21952147 -153.19809546 83.10839876 -156.42138672 86.20629883 C-157.90185547 87.31567383 -157.90185547 87.31567383 -160.90185547 87.31567383 C-160.35570146 83.08040407 -157.80081795 80.22554824 -155.21435547 77.00317383 C-154.72813721 76.3936084 -154.24191895 75.78404297 -153.7409668 75.15600586 C-143.89916607 62.99985508 -133.13277345 52.06245136 -120.90185547 42.31567383 C-120.33450684 41.85741211 -119.7671582 41.39915039 -119.18261719 40.92700195 C-97.55281967 23.63297615 -71.10136924 11.56026197 -44.27685547 5.06567383 C-43.26478027 4.81954346 -42.25270508 4.57341309 -41.20996094 4.31982422 C-27.42871573 1.10789603 -14.10433559 -0.03420308 0 0 Z "
transform="translate(184.90185546875,13.684326171875)"/>
<path d="M0 0 C23.93418963 20.21356155 38.18828481 47.87411238 43.30859375 78.609375 C43.72796962 83.82104607 43.79621346 89.00908218 43.74609375 94.234375 C43.7423877 94.93147583 43.73868164 95.62857666 43.73486328 96.34680176 C43.51079954 126.08447361 33.84943539 152.98108038 14.30859375 175.609375 C13.37273437 176.74439453 13.37273437 176.74439453 12.41796875 177.90234375 C7.3119221 183.93204517 1.58692987 188.83219983 -4.69140625 193.609375 C-5.65691406 194.351875 -6.62242187 195.094375 -7.6171875 195.859375 C-33.76277727 214.99515608 -66.44544142 222.27976227 -98.37890625 217.421875 C-129.2224086 212.211016 -156.10496998 196.18588064 -175.99609375 172.10546875 C-177.69140625 169.609375 -177.69140625 169.609375 -177.69140625 166.609375 C-176.37140625 166.939375 -175.05140625 167.269375 -173.69140625 167.609375 C-173.69140625 168.269375 -173.69140625 168.929375 -173.69140625 169.609375 C-172.85222656 170.00576172 -172.85222656 170.00576172 -171.99609375 170.41015625 C-169.47801141 171.72041265 -167.18096648 173.22649078 -164.81640625 174.796875 C-141.95286732 189.35191305 -116.13355444 194.94004479 -89.48388672 189.12792969 C-74.00965166 185.43003002 -61.09388018 178.62819028 -48.69140625 168.609375 C-48.05976563 168.14273438 -47.428125 167.67609375 -46.77734375 167.1953125 C-29.95140734 154.19707727 -19.18769244 130.97695501 -16.03515625 110.39453125 C-15.865 109.01587891 -15.865 109.01587891 -15.69140625 107.609375 C-15.55734375 106.55621094 -15.42328125 105.50304687 -15.28515625 104.41796875 C-12.8813248 80.40697048 -19.85309354 55.11934523 -34.69921875 36.02734375 C-35.35664063 35.22941406 -36.0140625 34.43148437 -36.69140625 33.609375 C-37.32820312 32.82175781 -37.965 32.03414062 -38.62109375 31.22265625 C-54.38763523 12.57508008 -77.98681734 0.98006353 -102.19970703 -1.04858398 C-115.33840527 -1.9297872 -128.14870541 -0.56547477 -140.69140625 3.609375 C-141.71621094 3.94710937 -142.74101562 4.28484375 -143.796875 4.6328125 C-155.05737548 8.64192736 -164.81345042 14.73678833 -173.984375 22.359375 C-175.69140625 23.609375 -175.69140625 23.609375 -177.69140625 23.609375 C-176.02661937 12.90007435 -162.17010016 2.50403181 -153.91601562 -3.73193359 C-107.16913616 -37.54750108 -44.81974776 -36.84949238 0 0 Z " transform="translate(217.69140625,119.390625)"/>
<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C-6.58 9.58 -15.16 18.16 -24 27 C-24 23.39768908 -23.43128853 23.0209684 -21.03515625 20.48828125 C-20.40359619 19.81603516 -19.77203613 19.14378906 -19.12133789 18.45117188 C-18.44192139 17.74541016 -17.76250488 17.03964844 -17.0625 16.3125 C-16.3811499 15.59513672 -15.6997998 14.87777344 -14.99780273 14.13867188 C-10.21994145 9.15189593 -5.33436292 4.3947055 0 0 Z " transform="translate(59,60)"/>
<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C-4.93 7.93 -11.86 14.86 -19 22 C-19 17.63604688 -16.29697402 15.68537662 -13.4375 12.6875 C-12.8919043 12.10589111 -12.34630859 11.52428223 -11.78417969 10.92504883 C-8.06375023 7.00117561 -4.23602964 3.36956903 0 0 Z " transform="translate(62,117)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.9 KiB

4
frontend/src/assets/icons/instagram.svg
View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M194.4 211.7a53.3 53.3 0 1 0 59.3 88.7 53.3 53.3 0 1 0 -59.3-88.7zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12c-18.1-7.1-57.6-6.8-83.1-6.5c-4.1 0-7.9 .1-11.2 .1c-3.3 0-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5c-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2c0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2c2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5c4.1 0 7.9-.1 11.2-.1c3.3 0 7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5c6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83c0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83l0 0c-2.7-6.9-6.8-13.1-12-18.4zm-67.1 44.5A82 82 0 1 1 178.4 324.2a82 82 0 1 1 91.1-136.4zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1s2.6-7.1 5.2-9.8s6.1-4.5 9.8-5.2s7.6-.4 11.1 1.1s6.5 3.9 8.6 7s3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2s-3.9 3.2-6.2 4.2s-4.8 1.5-7.3 1.5l0 0c-3.8 0-7.5-1.1-10.6-3.2zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM357 389c-18.7 18.7-41.4 24.6-67 25.9c-26.4 1.5-105.6 1.5-132 0c-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132c1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0c25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9c-1.3 25.6-7.1 48.3-25.8 67z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
frontend/src/assets/icons/tiktok.svg
View File

@@ -1,13 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
<defs>
<style>
.cls-1 {
stroke: #000;
stroke-width: 1px;
stroke-dasharray: 4 2;
fill-rule: evenodd;
}
</style>
</defs>
<path id="Tiktok_1" data-name="Tiktok 1" class="cls-1" d="M820.292,990H171.646C14.581,990,11,989.648,11,821.766V174.626c0-159.964-1.459-161.5,154.584-161.5C198.026,13.122,258.91,12,291.878,12h458.7c43.88,0,15.011.37,47.358,0.37C986.933,12.37,987,17.717,987,199.3V793.727C987,989.389,946.485,990,820.292,990ZM532.342,195.936q-3.031,3.924-6.062,7.851c7.912,32.725,2.02,81.845,2.02,118.885V621.007c-5.878,25.116-21.509,52.119-39.4,63.929-65.7,43.363-157.373-18.919-133.366-104.305,7.6-27.019,36.416-53.485,62.642-59.443,14.361-3.262,33.807,2.726,44.455-2.243,5.2-22.038,1.692-65.469,2.021-94.211-96.37-32.3-186.121,59-204.091,132.344-5.533,22.583-15.541,61.3-6.062,91.968,25.379,82.1,60.537,106.81,129.325,143.56,19.407,10.368,70.144,7.051,90.932,2.243,90.864-21.02,136.493-72.949,153.573-176.085q-0.505-106.538-1.01-213.1l5.051-6.729c11.848,0.933,19.225,11.11,27.28,16.823,16.459,11.676,54.457,22.153,79.818,22.432,2.394-19.282,6.375-99.811-1.011-117.764-15.162-6.86-34.949-4.067-50.517-12.337-19.277-10.241-42.6-26.041-55.57-43.741C626.435,256.259,598.6,199.14,597,198.179,583.942,190.284,549.838,195.687,532.342,195.936Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/src/assets/icons/x.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 493 B

4
frontend/src/assets/main.css
View File

@@ -13,7 +13,7 @@
--h-surface: #252829;
--h-on-surface: #e2e5e9;
--h-primary: #1B1B1F;
--h-on-primary: #c5c8c8;
--h-on-primary: #e2e5e9;
--h-secondary: #e7e5ea;
--h-on-secondary: #000000;
--h-tertiary: #272A44;
@@ -45,7 +45,7 @@
}
div.card {
@apply w-[800px];
@apply w-[1024px];
@apply rounded-xl p-10 m-4;
@apply bg-hSurface text-hOnSurface;
}

2
frontend/src/main.js
View File

@@ -1,7 +1,6 @@
import {createApp} from 'vue'
import App from './App.vue'
import router from './router/router.js'
import './assets/main.css'
import {createPinia} from 'pinia'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
@@ -13,6 +12,7 @@ import {useAuthStore} from "@/stores/authStore.js";
import i18n from './i18n.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import './assets/main.css'
const vuetify = createVuetify({
components,

10
frontend/src/views/creators/ActualBanner.vue
View File

@@ -9,7 +9,7 @@
@click="isCurrentCreator && openBannerEditor()"
>
<img
class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)] h-60"
class="drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)] w-[1024px] h-[256px]"
:src="brandingStore.value.images?.banner ?? '/images/placeholders/banner.png'"
alt="Profile Banner"
>
@@ -30,11 +30,9 @@
<v-dialog v-model="isDialogOpen" max-width="800px">
<template #default="{ close }">
<div class="bg-white rounded-2xl p-4">
<banner-editor :creator="brandingStore.value"
@closeRequested="() => isDialogOpen = false"
></banner-editor>
</div>
<banner-editor :creator="brandingStore.value"
@closeRequested="() => isDialogOpen = false"
></banner-editor>
</template>
</v-dialog>

158
frontend/src/views/creators/BannerActions.vue
View File

@@ -5,6 +5,14 @@ import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
import {onBeforeUnmount, onMounted, ref} from 'vue';
import CreatorLogo from "@/views/creators/CreatorLogo.vue";
import NameTitle from "@/views/creators/NameTitle.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import X from "@/views/svg/X.vue";
import Facebook from "@/views/svg/Facebook.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Reddit from "@/views/svg/Reddit.vue";
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
const brandingStore = useBrandingStore();
const isMobile = ref(false);
@@ -16,70 +24,6 @@ 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);
@@ -130,7 +74,7 @@ onBeforeUnmount(() => {
<creator-logo/>
</div>
<div class="flex items-center ml-52 grow">
<div class="flex items-center ml-56 grow">
<name-title></name-title>
</div>
@@ -149,33 +93,69 @@ onBeforeUnmount(() => {
<!-- 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 bg-hSecondary text-hOnSecondary"
:style="{
boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
}"
class="rounded-b-2xl h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary"
>
<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-md transform transition-transform duration-200 hover:scale-125 hover:text-fuchsia-900"
>
<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 class="flex flex-row gap-10">
<a v-if="brandingStore.value.socials?.facebookUrl"
:href="brandingStore.value.socials?.facebookUrl"
target="_blank">
<facebook class="social-icon"></facebook>
</a>
<a v-if="brandingStore.value.socials?.instagramUrl"
:href="brandingStore.value.socials?.instagramUrl"
target="_blank">
<instagram class="social-icon"></instagram>
</a>
<a v-if="brandingStore.value.socials?.linkedInUrl"
:href="brandingStore.value.socials?.linkedInUrl"
target="_blank">
<linkedin class="social-icon"></linkedin>
</a>
<a v-if="brandingStore.value.socials?.redditUrl"
:href="brandingStore.value.socials?.redditUrl"
target="_blank">
<reddit class="social-icon"></reddit>
</a>
<a v-if="brandingStore.value.socials?.tikTokUrl"
:href="brandingStore.value.socials?.tikTokUrl"
target="_blank">
<tiktok class="social-icon"></tiktok>
</a>
<a v-if="brandingStore.value.socials?.xUrl"
:href="brandingStore.value.socials?.xUrl"
target="_blank">
<x class="social-icon"></x>
</a>
<a v-if="brandingStore.value.socials?.youtubeUrl"
:href="brandingStore.value.socials?.youtubeUrl"
target="_blank">
<youtube class="social-icon"></youtube>
</a>
<a v-if="brandingStore.value.socials?.websiteUrl"
:href="brandingStore.value.socials?.websiteUrl"
target="_blank">
<web class="social-icon"></web>
</a>
</div>
</div>
</div>
</template>
<style scoped>
.social-icon {
@apply w-5 h-5;
@apply text-base;
@apply transform transition-transform duration-200;
@apply hover:scale-125 hover:text-fuchsia-900;
}
</style>

47
frontend/src/views/creators/BannerEditor.vue
View File

@@ -1,25 +1,36 @@
<template>
<h2 class="text-2xl font-semibold mb-4">
Bannière
</h2>
<div class="card">
<div class="card-title">
Bannière
</div>
<img
:src="fileUrl || fallbackUrl"
class="mb-5 w-full transition duration-200 ease-in-out transform"
alt="Aperçu de la bannière"
>
<div class="card-entry">
<img
:src="fileUrl || fallbackUrl"
alt="Aperçu de la bannière"
class="mb-5 transition duration-200 ease-in-out transform w-[1024px] h-[256px]"
/>
<v-file-input
v-model="selectedFile"
variant="outlined"
accept="image/*"
label="Votre bannière"
@change="onFileSelected"
></v-file-input>
<v-file-input
v-model="selectedFile"
accept="image/*"
label="Votre bannière"
variant="outlined"
@change="onFileSelected"
></v-file-input>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="publish">
Enregistrer
</button>
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
</div>
</template>

7
frontend/src/views/creators/CreatorLogo.vue
View File

@@ -6,12 +6,9 @@
>
<img
class="shadow-2xl rounded-full border-solid border-hSecondary border-102 max-w-[190px]"
class="shadow-2xl rounded-full border-solid border-hSecondary border-102 w-[200px] h-[200px]"
:src="brandingStore.value.images?.logo ?? '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{
height: '190px'
}"
/>
<!-- Tint Effect -->
@@ -31,12 +28,10 @@
<v-dialog v-model="isDialogOpen" max-width="800px">
<template #default="{ close }">
<div class="bg-white rounded-2xl p-4">
<creator-logo-editor
:creator="brandingStore?.value"
@closeRequested="() => isDialogOpen = false"
></creator-logo-editor>
</div>
</template>
</v-dialog>

49
frontend/src/views/creators/CreatorLogoEditor.vue
View File

@@ -1,27 +1,36 @@
<template>
<h2 class="text-2xl font-semibold mb-4 flex justify-center">
Logo
</h2>
<div class="card">
<div class="card-title">
Logo
</div>
<div class="flex justify-center mb-5">
<img
:src="fileUrl || fallbackUrl"
class="w-full transition duration-200 ease-in-out transform max-w-[400px]"
alt="Aperçu du logo"
/>
</div>
<div class="card-entry flex flex-col items-center">
<img
:src="fileUrl || fallbackUrl"
alt="Aperçu du logo"
class="mb-5 transition duration-200 ease-in-out transform w-[200px] h-[200px]"
/>
<v-file-input
v-model="selectedFile"
variant="outlined"
accept="image/*"
label="Votre logo"
@change="onFileSelected"
></v-file-input>
<v-file-input
v-model="selectedFile"
accept="image/*"
class="w-full"
label="Votre logo"
variant="outlined"
@change="onFileSelected"
></v-file-input>
</div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="publish">
Enregistrer
</button>
</div>
</div>
</template>

164
frontend/src/views/creators/DonationButton.vue
View File

@@ -1,164 +0,0 @@
<template>
<v-btn class="hover:scale-125" variant="text" @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 border-2 border-solid border-hPrimary">
<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 border-2 border-solid border-hSecondary"
width="40"
height="40">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn @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"
@click="goPay()"
class="w-full mt-5 border-hPrimary">
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>

88
frontend/src/views/creators/DonationButtonBanner.vue
View File

@@ -1,40 +1,19 @@
<template>
<button
class="secondary"
@click="openDonationDialog()"
@click="openDonationDialog()"
>
{{ $t('isupportbtn.isupport') }}
</button>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card
class="text-center rounded-xl border-2 border-solid border-hPrimary"
>
<div class="py-4 text-2xl font-bold border-b mb-2"> {{ $t('isupportbtn.isupport') }}</div>
<v-dialog v-model="donationModal">
<div class="card">
<div class="card-title">
{{ $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 border-2 border-solid border-hSecondary"
width="40"
height="40"
/>
<div class="capitalize px-2 text-2xl">
{{ brandingStore.value.name }}
</div>
<v-btn
@click="closeDonationDialog()"
class="ml-auto"
variant="text"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<v-card-text>
<v-text-field
<div class="card-entry">
<v-text-field
v-model="tipAmountInDollars"
type="number"
autofocus
@@ -49,9 +28,9 @@
inputmode="numeric"
@keydown="preventNonNumeric"
prepend-inner-icon="mdi-currency-usd"
></v-text-field>
></v-text-field>
<v-textarea
<v-textarea
v-model="tipMessage"
:label="`${$t('isupportbtn.message')}`"
class="p-2"
@@ -59,18 +38,23 @@
variant="outlined"
hide-details
clearable
></v-textarea>
></v-textarea>
</div>
<v-btn
variant="outlined"
@click="goPay()"
class="w-full mt-5 border-hPrimary bg-hSecondary text-hOnPrimary"
>
{{ $t('isupportbtn.send') }}
</v-btn>
</v-card-text>
</v-card>
</v-form>
<div class="card-actions">
<button class="secondary"
@click="closeDonationDialog()">
Cancel
</button>
<button class="primary"
@click="goPay()">
{{ $t('isupportbtn.send') }}
</button>
</div>
</div>
</v-dialog>
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
@@ -83,11 +67,11 @@
<v-card-actions>
<v-btn
block
class="ma-auto"
style="width: 200px"
@click="closeDialog()"
>Annuler
block
class="ma-auto"
style="width: 200px"
@click="closeDialog()"
>Annuler
</v-btn>
</v-card-actions>
</v-card>
@@ -104,11 +88,11 @@ 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' },
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('');

22
frontend/src/views/main/Footer.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import XIcon from '@/assets/icons/x.svg'
import FacebookIcon from '@/assets/icons/facebook.svg'
import InstagramIcon from '@/assets/icons/instagram.svg'
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";
import X from "@/views/svg/X.vue";
</script>
<template>
@@ -14,16 +14,16 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
</div>
<div class="flex flex-row justify-center gap-10">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<facebook-icon class="icon"></facebook-icon>
<a href="https://www.facebook.com/profile.php?id=61556819217561" target="_blank">
<facebook class="social-icon"></facebook>
</a>
<a href="https://www.instagram.com/hutopy.inc/">
<instagram-icon class="icon"></instagram-icon>
<a href="https://www.instagram.com/hutopy.inc/" target="_blank">
<instagram class="social-icon"></instagram>
</a>
<a href="https://x.com/Hutopyinc/">
<x-icon class="icon"></x-icon>
<a href="https://x.com/Hutopyinc/" target="_blank">
<x class="social-icon"></x>
</a>
</div>
@@ -68,9 +68,9 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
<style scoped>
.icon {
.social-icon {
@apply fill-current w-8 h-8;
fill: var(--h-on-background);
@apply text-hOnBackground;
}
.link {

45
frontend/src/views/profile/ProfilePage.vue
View File

@@ -111,49 +111,65 @@
<div class="content">
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-facebook</v-icon></span>
<span class="label">
<facebook class="social-icon"></facebook>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-instagram</v-icon></span>
<span class="label">
<instagram class="social-icon"></instagram>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="label">
<x class="social-icon"></x>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-linkedin</v-icon></span>
<span class="label">
<linkedin class="social-icon"></linkedin>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
<span class="label">
<tiktok class="social-icon"></tiktok>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-youtube</v-icon></span>
<span class="label">
<youtube class="social-icon"></youtube>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-reddit</v-icon></span>
<span class="label">
<reddit class="social-icon"></reddit>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
<span class="label"><v-icon>mdi-web</v-icon></span>
<span class="label">
<web class="social-icon"></web>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
</button>
@@ -177,7 +193,14 @@ import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import XIcon from "@/assets/icons/x.svg"
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
import X from "@/views/svg/X.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";
const userProfileStore = useUserProfileStore()
@@ -267,6 +290,10 @@ const closeDialog = () => {
@apply flex-none min-w-32 text-left;
}
.social-icon {
@apply w-6 h-6;
}
.value {
@apply flex-auto text-left pr-6 capitalize;
}

195
frontend/src/views/profile/creators/SocialsDialog.vue
View File

@@ -1,7 +1,14 @@
<script setup>
import XIcon from '@/assets/icons/x.svg'
import {ref} from 'vue'
import {useClient} from "@/plugins/api.js";
import X from "@/views/svg/X.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Reddit from "@/views/svg/Reddit.vue";
import Web from "@/views/svg/Web.vue";
import Youtube from "@/views/svg/Youtube.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";
const props = defineProps({
creator: {
@@ -57,15 +64,6 @@ const cancel = () => {
</script>
<style scoped>
.icon {
width: 28px;
height: 30px;
fill: #000000;
}
</style>
<template>
<div class="card">
@@ -75,105 +73,87 @@ const cancel = () => {
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
<v-text-field
<div class="editor-line">
<facebook class="social-icon"></facebook>
<input
v-model="facebookUrl"
label="Lien Facebook"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien Facebook"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
<v-text-field
<div class="editor-line">
<instagram class="social-icon"></instagram>
<input
v-model="instagramUrl"
label="Lien Instagram"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien Instagram"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
<v-text-field
<div class="editor-line">
<linkedin class="social-icon"></linkedin>
<input
v-model="linkedInUrl"
label="Lien LinkedIn"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien LinkedIn"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
<v-text-field
<div class="editor-line">
<reddit class="social-icon"></reddit>
<input
v-model="redditUrl"
label="Lien Reddit"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien Reddit"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon></XIcon>
</div>
<v-text-field
<div class="editor-line">
<tiktok class="social-icon"></tiktok>
<input
v-model="tikTokUrl"
label="Lien TikTok"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien TikTok"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-web</v-icon>
<v-text-field
<div class="editor-line">
<web class="social-icon"></web>
<input
v-model="websiteUrl"
label="Lien site web"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien site web"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon class="icon"></XIcon>
</div>
<v-text-field
<div class="editor-line">
<x class="social-icon"></x>
<input
v-model="xUrl"
label="Lien X"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien X"
type="text"
/>
</div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
<v-text-field
<div class="editor-line">
<youtube class="social-icon"></youtube>
<input
v-model="youtubeUrl"
label="Lien Youtube"
outlined
variant="outlined"
></v-text-field>
class="input-field"
placeholder="Lien Youtube"
type="text"
/>
</div>
</div>
<div class="card-actions">
@@ -189,5 +169,46 @@ const cancel = () => {
</div>
</template>
<style scoped>
.editor-line {
@apply flex flex-row gap-6;
@apply items-center;
@apply mb-4;
}
.social-icon {
@apply w-8 h-8;
}
.input-field {
@apply border border-gray-400;
/* Persistent border */
@apply rounded-lg;
/* Rounded corners */
@apply p-3;
/* Padding inside the input */
@apply flex-1;
/* Make input take up available space */
@apply text-gray-900;
/* Ensure text is visible */
@apply bg-white;
/* Background similar to Vuetify */
transition: border-color 0.2s; /* Smooth border effect */
}
/* Border highlight effect similar to Vuetify */
.input-field:focus {
border-width: 2px;
border-color: var(--hutopy-primary); /* Vuetify primary color (adjust if needed) */
}
/* Disable auto styles on input */
.input-field::placeholder {
color: #9e9e9e; /* Light gray for placeholder */
opacity: 1;
}
</style>

9
frontend/src/views/svg/Facebook.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/>
</svg>
</template>

12
frontend/src/views/svg/Hutopy.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<svg fill="currentColor"
viewBox="0 0 540 540"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 0 C2.69849689 0.0031451 5.39587704 -0.02033719 8.09423828 -0.0456543 C24.64095924 -0.10755047 40.6877731 1.83145667 56.59814453 6.50317383 C57.64365479 6.80505615 58.68916504 7.10693848 59.76635742 7.41796875 C92.79656028 17.21576522 120.14877162 34.84217931 145.09814453 58.31567383 C145.80712891 58.97051758 146.51611328 59.62536133 147.24658203 60.30004883 C156.43027452 69.07141226 164.10800524 79.75645166 171.09814453 90.31567383 C171.99726562 91.64985352 171.99726562 91.64985352 172.91455078 93.01098633 C202.24624509 138.40104257 210.21713133 193.46657021 199.45556641 245.92919922 C192.90962056 275.68852135 179.08829353 305.20779517 159.09814453 328.31567383 C158.12705075 329.46844293 157.15708766 330.62216508 156.18798828 331.77661133 C145.74534244 344.15953661 145.74534244 344.15953661 140.09814453 349.31567383 C139.43814453 349.31567383 138.77814453 349.31567383 138.09814453 349.31567383 C138.09814453 349.97567383 138.09814453 350.63567383 138.09814453 351.31567383 C125.46428062 363.48565937 109.61785837 373.30307857 94.09814453 381.31567383 C93.49325195 381.62843262 92.88835937 381.94119141 92.26513672 382.26342773 C64.72703152 396.27155233 34.49385055 402.76232703 3.72314453 402.69067383 C2.84274506 402.69013 1.96234558 402.68958618 1.05526733 402.68902588 C-13.25349056 402.64848426 -26.95433873 401.73425935 -40.90185547 398.31567383 C-42.23821045 397.99421387 -42.23821045 397.99421387 -43.6015625 397.66625977 C-72.07884569 390.61747809 -98.87807183 378.00655878 -121.53857422 359.26879883 C-124.98230298 356.422742 -128.53024689 353.7103623 -132.06591797 350.97973633 C-132.97470703 350.15602539 -132.97470703 350.15602539 -133.90185547 349.31567383 C-133.90185547 348.65567383 -133.90185547 347.99567383 -133.90185547 347.31567383 C-134.56185547 347.31567383 -135.22185547 347.31567383 -135.90185547 347.31567383 C-135.90185547 346.65567383 -135.90185547 345.99567383 -135.90185547 345.31567383 C-136.56185547 345.31567383 -137.22185547 345.31567383 -137.90185547 345.31567383 C-139.24169922 343.98754883 -139.24169922 343.98754883 -140.83935547 342.06567383 C-143.10188476 339.38611053 -145.39815773 336.76489417 -147.80810547 334.21801758 C-148.30834229 333.68660156 -148.8085791 333.15518555 -149.32397461 332.60766602 C-150.32555716 331.54718583 -151.33248849 330.49172924 -152.3449707 329.44165039 C-155.90185547 325.64913211 -155.90185547 325.64913211 -155.90185547 322.31567383 C-151.7526342 322.86293323 -149.09751951 325.32327358 -145.96435547 327.87817383 C-112.49996321 354.28872765 -70.28107399 364.92725762 -28.16088867 360.37231445 C11.7404784 355.37903429 50.51367105 333.83116901 75.28564453 302.00317383 C102.2073581 266.1942078 113.74287629 223.77918143 108.03564453 179.19067383 C103.36182966 146.79964046 88.57557441 116.98148746 66.09814453 93.31567383 C65.60604492 92.78570801 65.11394531 92.25574219 64.60693359 91.7097168 C40.8738918 66.25446714 8.58347239 50.05740641 -25.90185547 45.31567383 C-27.07103516 45.13391602 -28.24021484 44.9521582 -29.44482422 44.76489258 C-71.61533582 39.65438979 -112.89208728 51.7135382 -146.31201172 77.46020508 C-149.8276055 80.21952147 -153.19809546 83.10839876 -156.42138672 86.20629883 C-157.90185547 87.31567383 -157.90185547 87.31567383 -160.90185547 87.31567383 C-160.35570146 83.08040407 -157.80081795 80.22554824 -155.21435547 77.00317383 C-154.72813721 76.3936084 -154.24191895 75.78404297 -153.7409668 75.15600586 C-143.89916607 62.99985508 -133.13277345 52.06245136 -120.90185547 42.31567383 C-120.33450684 41.85741211 -119.7671582 41.39915039 -119.18261719 40.92700195 C-97.55281967 23.63297615 -71.10136924 11.56026197 -44.27685547 5.06567383 C-43.26478027 4.81954346 -42.25270508 4.57341309 -41.20996094 4.31982422 C-27.42871573 1.10789603 -14.10433559 -0.03420308 0 0 Z "
transform="translate(258.90185546875,69.684326171875)"/>
<path
d="M0 0 C23.93418963 20.21356155 38.18828481 47.87411238 43.30859375 78.609375 C43.72796962 83.82104607 43.79621346 89.00908218 43.74609375 94.234375 C43.7423877 94.93147583 43.73868164 95.62857666 43.73486328 96.34680176 C43.51079954 126.08447361 33.84943539 152.98108038 14.30859375 175.609375 C13.37273437 176.74439453 13.37273437 176.74439453 12.41796875 177.90234375 C7.3119221 183.93204517 1.58692987 188.83219983 -4.69140625 193.609375 C-5.65691406 194.351875 -6.62242187 195.094375 -7.6171875 195.859375 C-33.76277727 214.99515608 -66.44544142 222.27976227 -98.37890625 217.421875 C-129.2224086 212.211016 -156.10496998 196.18588064 -175.99609375 172.10546875 C-177.69140625 169.609375 -177.69140625 169.609375 -177.69140625 166.609375 C-176.37140625 166.939375 -175.05140625 167.269375 -173.69140625 167.609375 C-173.69140625 168.269375 -173.69140625 168.929375 -173.69140625 169.609375 C-172.85222656 170.00576172 -172.85222656 170.00576172 -171.99609375 170.41015625 C-169.47801141 171.72041265 -167.18096648 173.22649078 -164.81640625 174.796875 C-141.95286732 189.35191305 -116.13355444 194.94004479 -89.48388672 189.12792969 C-74.00965166 185.43003002 -61.09388018 178.62819028 -48.69140625 168.609375 C-48.05976563 168.14273438 -47.428125 167.67609375 -46.77734375 167.1953125 C-29.95140734 154.19707727 -19.18769244 130.97695501 -16.03515625 110.39453125 C-15.865 109.01587891 -15.865 109.01587891 -15.69140625 107.609375 C-15.55734375 106.55621094 -15.42328125 105.50304687 -15.28515625 104.41796875 C-12.8813248 80.40697048 -19.85309354 55.11934523 -34.69921875 36.02734375 C-35.35664063 35.22941406 -36.0140625 34.43148437 -36.69140625 33.609375 C-37.32820312 32.82175781 -37.965 32.03414062 -38.62109375 31.22265625 C-54.38763523 12.57508008 -77.98681734 0.98006353 -102.19970703 -1.04858398 C-115.33840527 -1.9297872 -128.14870541 -0.56547477 -140.69140625 3.609375 C-141.71621094 3.94710937 -142.74101562 4.28484375 -143.796875 4.6328125 C-155.05737548 8.64192736 -164.81345042 14.73678833 -173.984375 22.359375 C-175.69140625 23.609375 -175.69140625 23.609375 -177.69140625 23.609375 C-176.02661937 12.90007435 -162.17010016 2.50403181 -153.91601562 -3.73193359 C-107.16913616 -37.54750108 -44.81974776 -36.84949238 0 0 Z "
transform="translate(291.69140625,175.390625)"/>
</svg>
</template>

25
frontend/src/views/svg/HutopySvg.vue
View File

@@ -1,25 +0,0 @@
<template>
<v-container>
<div>
<svg width="45" height="45" viewBox="0 0 540 540" class="fill-hOnPrimary">
<path fill="currentColor" d="M0 0 C2.69849689 0.0031451 5.39587704 -0.02033719 8.09423828 -0.0456543 C24.64095924 -0.10755047 40.6877731 1.83145667 56.59814453 6.50317383 C57.64365479 6.80505615 58.68916504 7.10693848 59.76635742 7.41796875 C92.79656028 17.21576522 120.14877162 34.84217931 145.09814453 58.31567383 C145.80712891 58.97051758 146.51611328 59.62536133 147.24658203 60.30004883 C156.43027452 69.07141226 164.10800524 79.75645166 171.09814453 90.31567383 C171.99726562 91.64985352 171.99726562 91.64985352 172.91455078 93.01098633 C202.24624509 138.40104257 210.21713133 193.46657021 199.45556641 245.92919922 C192.90962056 275.68852135 179.08829353 305.20779517 159.09814453 328.31567383 C158.12705075 329.46844293 157.15708766 330.62216508 156.18798828 331.77661133 C145.74534244 344.15953661 145.74534244 344.15953661 140.09814453 349.31567383 C139.43814453 349.31567383 138.77814453 349.31567383 138.09814453 349.31567383 C138.09814453 349.97567383 138.09814453 350.63567383 138.09814453 351.31567383 C125.46428062 363.48565937 109.61785837 373.30307857 94.09814453 381.31567383 C93.49325195 381.62843262 92.88835937 381.94119141 92.26513672 382.26342773 C64.72703152 396.27155233 34.49385055 402.76232703 3.72314453 402.69067383 C2.84274506 402.69013 1.96234558 402.68958618 1.05526733 402.68902588 C-13.25349056 402.64848426 -26.95433873 401.73425935 -40.90185547 398.31567383 C-42.23821045 397.99421387 -42.23821045 397.99421387 -43.6015625 397.66625977 C-72.07884569 390.61747809 -98.87807183 378.00655878 -121.53857422 359.26879883 C-124.98230298 356.422742 -128.53024689 353.7103623 -132.06591797 350.97973633 C-132.97470703 350.15602539 -132.97470703 350.15602539 -133.90185547 349.31567383 C-133.90185547 348.65567383 -133.90185547 347.99567383 -133.90185547 347.31567383 C-134.56185547 347.31567383 -135.22185547 347.31567383 -135.90185547 347.31567383 C-135.90185547 346.65567383 -135.90185547 345.99567383 -135.90185547 345.31567383 C-136.56185547 345.31567383 -137.22185547 345.31567383 -137.90185547 345.31567383 C-139.24169922 343.98754883 -139.24169922 343.98754883 -140.83935547 342.06567383 C-143.10188476 339.38611053 -145.39815773 336.76489417 -147.80810547 334.21801758 C-148.30834229 333.68660156 -148.8085791 333.15518555 -149.32397461 332.60766602 C-150.32555716 331.54718583 -151.33248849 330.49172924 -152.3449707 329.44165039 C-155.90185547 325.64913211 -155.90185547 325.64913211 -155.90185547 322.31567383 C-151.7526342 322.86293323 -149.09751951 325.32327358 -145.96435547 327.87817383 C-112.49996321 354.28872765 -70.28107399 364.92725762 -28.16088867 360.37231445 C11.7404784 355.37903429 50.51367105 333.83116901 75.28564453 302.00317383 C102.2073581 266.1942078 113.74287629 223.77918143 108.03564453 179.19067383 C103.36182966 146.79964046 88.57557441 116.98148746 66.09814453 93.31567383 C65.60604492 92.78570801 65.11394531 92.25574219 64.60693359 91.7097168 C40.8738918 66.25446714 8.58347239 50.05740641 -25.90185547 45.31567383 C-27.07103516 45.13391602 -28.24021484 44.9521582 -29.44482422 44.76489258 C-71.61533582 39.65438979 -112.89208728 51.7135382 -146.31201172 77.46020508 C-149.8276055 80.21952147 -153.19809546 83.10839876 -156.42138672 86.20629883 C-157.90185547 87.31567383 -157.90185547 87.31567383 -160.90185547 87.31567383 C-160.35570146 83.08040407 -157.80081795 80.22554824 -155.21435547 77.00317383 C-154.72813721 76.3936084 -154.24191895 75.78404297 -153.7409668 75.15600586 C-143.89916607 62.99985508 -133.13277345 52.06245136 -120.90185547 42.31567383 C-120.33450684 41.85741211 -119.7671582 41.39915039 -119.18261719 40.92700195 C-97.55281967 23.63297615 -71.10136924 11.56026197 -44.27685547 5.06567383 C-43.26478027 4.81954346 -42.25270508 4.57341309 -41.20996094 4.31982422 C-27.42871573 1.10789603 -14.10433559 -0.03420308 0 0 Z " transform="translate(258.90185546875,69.684326171875)"/>
<path fill="currentColor" d="M0 0 C23.93418963 20.21356155 38.18828481 47.87411238 43.30859375 78.609375 C43.72796962 83.82104607 43.79621346 89.00908218 43.74609375 94.234375 C43.7423877 94.93147583 43.73868164 95.62857666 43.73486328 96.34680176 C43.51079954 126.08447361 33.84943539 152.98108038 14.30859375 175.609375 C13.37273437 176.74439453 13.37273437 176.74439453 12.41796875 177.90234375 C7.3119221 183.93204517 1.58692987 188.83219983 -4.69140625 193.609375 C-5.65691406 194.351875 -6.62242187 195.094375 -7.6171875 195.859375 C-33.76277727 214.99515608 -66.44544142 222.27976227 -98.37890625 217.421875 C-129.2224086 212.211016 -156.10496998 196.18588064 -175.99609375 172.10546875 C-177.69140625 169.609375 -177.69140625 169.609375 -177.69140625 166.609375 C-176.37140625 166.939375 -175.05140625 167.269375 -173.69140625 167.609375 C-173.69140625 168.269375 -173.69140625 168.929375 -173.69140625 169.609375 C-172.85222656 170.00576172 -172.85222656 170.00576172 -171.99609375 170.41015625 C-169.47801141 171.72041265 -167.18096648 173.22649078 -164.81640625 174.796875 C-141.95286732 189.35191305 -116.13355444 194.94004479 -89.48388672 189.12792969 C-74.00965166 185.43003002 -61.09388018 178.62819028 -48.69140625 168.609375 C-48.05976563 168.14273438 -47.428125 167.67609375 -46.77734375 167.1953125 C-29.95140734 154.19707727 -19.18769244 130.97695501 -16.03515625 110.39453125 C-15.865 109.01587891 -15.865 109.01587891 -15.69140625 107.609375 C-15.55734375 106.55621094 -15.42328125 105.50304687 -15.28515625 104.41796875 C-12.8813248 80.40697048 -19.85309354 55.11934523 -34.69921875 36.02734375 C-35.35664063 35.22941406 -36.0140625 34.43148437 -36.69140625 33.609375 C-37.32820312 32.82175781 -37.965 32.03414062 -38.62109375 31.22265625 C-54.38763523 12.57508008 -77.98681734 0.98006353 -102.19970703 -1.04858398 C-115.33840527 -1.9297872 -128.14870541 -0.56547477 -140.69140625 3.609375 C-141.71621094 3.94710937 -142.74101562 4.28484375 -143.796875 4.6328125 C-155.05737548 8.64192736 -164.81345042 14.73678833 -173.984375 22.359375 C-175.69140625 23.609375 -175.69140625 23.609375 -177.69140625 23.609375 C-176.02661937 12.90007435 -162.17010016 2.50403181 -153.91601562 -3.73193359 C-107.16913616 -37.54750108 -44.81974776 -36.84949238 0 0 Z " transform="translate(291.69140625,175.390625)"/>
</svg>
</div>
</v-container>
</template>
<script>
import { useBrandingStore } from "@/stores/brandingStore.js";
export default {
setup() {
const branding = useBrandingStore();
return {
branding,
};
},
};
</script>

9
frontend/src/views/svg/Instagram.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</svg>
</template>

9
frontend/src/views/svg/Linkedin.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
</template>

9
frontend/src/views/svg/Reddit.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/>
</svg>
</template>

8
frontend/src/views/svg/Tiktok.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<svg fill="currentColor"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg">
<path
d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/>
</svg>
</template>

9
frontend/src/views/svg/Web.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"/>
</svg>
</template>

9
frontend/src/views/svg/X.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<svg fill="currentColor"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
</svg>
</template>

10
frontend/src/views/svg/Youtube.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<svg fill="currentColor"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
</svg>
</template>