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

Reworking the layouts to allow for the new design

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-09-22 00:51:22 -04:00
parent b3fec80607
commit 3cfb3951e3
51 changed files with 819 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
package-lock.json generated
View File

@@ -30,7 +30,8 @@
"eslint-plugin-vue": "^9.22.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.2.11"
"vite": "^5.2.11",
"vite-svg-loader": "^5.1.0"
}
},
"node_modules/@alloc/quick-lru": {
@@ -994,6 +995,16 @@
"tailwindcss": ">=2.0.0"
}
},
"node_modules/@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1692,6 +1703,50 @@
"node": ">= 8"
}
},
"node_modules/css-select": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-tree": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"dev": true,
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1703,6 +1758,42 @@
"node": ">=4"
}
},
"node_modules/csso": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"css-tree": "~2.2.0"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/css-tree": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
"dev": true,
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.28",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/mdn-data": {
"version": "2.0.28",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
"dev": true,
"license": "CC0-1.0"
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1776,6 +1867,65 @@
"node": ">=6.0.0"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"dev": true,
"license": "MIT",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"license": "BSD-2-Clause"
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2887,6 +3037,13 @@
"node": ">=0.10.0"
}
},
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"dev": true,
"license": "CC0-1.0"
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3931,6 +4088,42 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svgo": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
"integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@trysound/sax": "0.2.0",
"commander": "^7.2.0",
"css-select": "^5.1.0",
"css-tree": "^2.3.1",
"css-what": "^6.1.0",
"csso": "^5.0.5",
"picocolors": "^1.0.0"
},
"bin": {
"svgo": "bin/svgo"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/svgo"
}
},
"node_modules/svgo/node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 10"
}
},
"node_modules/tailwindcss": {
"version": "3.4.10",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
@@ -4193,6 +4386,19 @@
}
}
},
"node_modules/vite-svg-loader": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
"integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
"dev": true,
"license": "MIT",
"dependencies": {
"svgo": "^3.0.2"
},
"peerDependencies": {
"vue": ">=3.2.13"
}
},
"node_modules/vue": {
"version": "3.4.38",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",

3
package.json
View File

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

13
public/images/hutopymedia/icons/x.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="Social_x_-2_1" data-name="Social x -2 1" class="cls-1" d="M208.568,8c149.2,0.331,300.422,2.648,449.617,2.979,86.663,0,162.7-4.391,218.357,25.818,41.312,22.424,77.08,62.95,94.291,109.23,20.963,56.368,12.9,149.956,12.9,225.411V674.3c0,48.187,7.128,109.475-3.97,150.936-13.034,48.693-38.509,94.2-74.44,120.153-24.954,18.023-55.528,34.237-90.321,41.706-23.029,4.944-51.493,2.979-78.41,2.979H318.739c-46.8,0-103.154,5.907-144.909-2.979-60.19-12.809-108.811-49.038-136.97-94.335C2.042,836.752,11.055,767.026,11.055,675.3c0-117.493.992-362.125,0.992-479.618C12.047,63.677,151.59,8,208.568,8Zm10.918,201.579-2.977,1.986L436.851,500.528c-4.6,17.548-37.928,43.94-49.627,58.586L271.1,694.162c-11.979,15.019-36.369,30.637-42.679,49.65l89.328-.993,158.805-183.7c5.547,0.3,5.794,1.012,8.933,2.979,9.391,25.049,36.577,46.289,51.611,67.524,19.634,27.733,42.32,53.1,61.537,80.433,7.99,11.363,14.845,25.453,25.806,33.762H754.461c12.721,0,40.162,4,48.634-1.986L633.372,516.416c-12.208-17.35-56.689-63.437-60.544-81.426L767.364,211.565v-0.993l-3.97-.993-84.365.993L576.8,326.753c-13.733,17.111-28.64,40.051-46.649,52.629h-1.985L400.127,210.572Zm126.052,49.65,29.776,1.986L695.9,685.225l-0.993,5.958-46.649-.993q-30.765-40.212-61.537-80.433l-184.611-241.3L343.553,292c-5.976-8.018-22.454-20.757-20.843-31.776Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

21
src/App.vue
View File

@@ -1,26 +1,23 @@
<template>
<v-app>
<div class="m-0 flex flex-column h-screen">
<!-- <Header class="fixed w-full z-50 top-0 p-2"></Header>-->
<div class="flex flex-row relative">
<div
class="fixed h-full w-2 z-20"
style="background: transparent;"
></div>
<Header class="fixed w-full z-50 p-2 h-16"></Header>
<div class="flex flex-row mt-16">
<transition name="slide-fade">
<div v-show="sideBarStore.visible"
class=" fixed h-full min-w-60 border-r-2 bg-white z-30 transition-transform duration-700">
<SideBar></SideBar>
class="fixed h-full min-w-60 border-r-2 z-30 ">
<side-bar></side-bar>
</div>
</transition>
<div class="flex flex-col w-full" style="background-color: #f4f4f4">
<div class="flex flex-col w-full min-h-screen bg-amber">
<RouterView></RouterView>
<Footer></Footer>
</div>
</div>
</div>
</v-app>
<size-indicator></size-indicator>

1
src/assets/icons/facebook.svg Normal file
View File

@@ -0,0 +1 @@
<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

After

Width:  |  Height:  |  Size: 498 B

1
src/assets/icons/instagram.svg Normal file
View File

@@ -0,0 +1 @@
<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

After

Width:  |  Height:  |  Size: 1.5 KiB

0
public/images/hutopymedia/icons/tiktok.svg → src/assets/icons/tiktok.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/assets/icons/x.svg Normal file
View File

@@ -0,0 +1 @@
<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

After

Width:  |  Height:  |  Size: 493 B

1
src/assets/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

10
src/locales/en.json
View File

@@ -9,16 +9,6 @@
"footer": {
"allRightsReserved": "All rights reserved"
},
"sitemenu": {
"HelpUs": "Help us",
"About": "About",
"ContentPolicy": "Content Policy",
"CreatorGuide": "Creator Guide",
"FAQ": "FAQ",
"HelpAndContact": "Help and Contact",
"Pricing": "Pricing",
"TermsAndConditions": "Terms and conditions"
},
"sidebar": {
"subscriptionTitle": "Subscription"
},

10
src/locales/fr.json
View File

@@ -9,16 +9,6 @@
"footer": {
"allRightsReserved": "Tout droits réservés"
},
"sitemenu": {
"HelpUs": "Aidez-nous",
"About": "À propos",
"ContentPolicy": "Politique de contenu",
"CreatorGuide": "Guide pour les créateurs",
"FAQ": "FAQ",
"HelpAndContact": "Aide & Contact",
"Pricing": "Frais",
"TermsAndConditions": "Conditions générales"
},
"sidebar": {
"subscriptionTitle": "Abonnements"
},

72
src/router/router.js
View File

@@ -1,4 +1,4 @@
import { createRouter, createWebHistory } from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
import About from '@/views/documentation/About.vue'
import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
import FAQ from '@/views/documentation/FAQ.vue'
@@ -14,27 +14,24 @@ import Register from '../views/main/Register.vue'
import Home from '../views/main/Home.vue'
import Wallet from '../views/main/Wallet.vue'
import ProfilePage from '@/views/profile/ProfilePage.vue'
import CreatorList from '@/views/creators/CreatorList.vue'
import CreatorPage from "@/views/creators/CreatorPage.vue";
import ContentPage from "@/views/contents/ContentPage.vue";
import CreatorList from '@/views/browser/CreatorList.vue'
import PostContent from "@/views/contents/PostContent.vue";
import Explorer from "@/views/explorer/explorer.vue";
import {useAuthStore} from "@/stores/authStore.js";
import ForYouPage from "@/views/profile/ForYouPage.vue";
import CreatorPresentation from "@/views/creators/CreatorPresentation.vue";
import CreatorExclusiveContent from "@/views/creators/CreatorExclusiveContent.vue";
import CreatorLayout from "@/views/creators/CreatorLayout.vue";
import ContentPage from "@/views/contents/ContentPage.vue";
import CreatorContent from "@/views/creators/CreatorContent.vue";
import CreatorNews from "@/views/creators/CreatorNews.vue";
import CreatorHome from "@/views/creators/CreatorHome.vue";
const routes = [
{
path: '/',
component: Home,
meta: { hideSideBar: true }
},
{
path: '/presentation/@:creator',
component: CreatorPresentation,
meta: {hideSideBar: true}
},
{
path: '/browse',
@@ -46,69 +43,81 @@ const routes = [
},
{
path: '/@:creator',
component: CreatorPage
component: CreatorLayout,
meta: {
requiresAuth: true,
},
children: [
{
path: '',
component: CreatorHome,
},
{
path: 'news',
component: CreatorNews,
},
{
path: 'content',
component: CreatorContent
},
]
},
{
path: '/content/post',
component: PostContent,
},
{
path: '/@:creator/exclusivecontent',
component: CreatorExclusiveContent
},
{
path: '/helpandcontact',
component: HelpAndContact,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/termsandconditions',
name: 'termsandconditions',
component: TermsAndConditions,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/contentpolicy',
name: 'contentpolicy',
component: ContentPolicy,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/faq',
name: 'FAQ',
component: FAQ,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/guideforcreators',
name: 'guideforcreators',
component: CreatorGuide,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/about',
name: 'about',
component: About,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/pricing',
name: 'pricing',
component: Pricing,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/join',
name: 'join',
component: Join,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/register',
name: 'register',
component: Register,
meta: { hideSideBar: true }
meta: {hideSideBar: true}
},
{
path: '/signup',
@@ -122,20 +131,20 @@ const routes = [
},
{
path: '/paymentcompleted',
name: 'PayementCompleted',
name: 'PaymentCompleted',
component: PaymentCompleted,
},
{
path: '/wallet',
name: 'wallet',
component: Wallet,
meta: { requiresAuth: true }
meta: {requiresAuth: true}
},
{
path: '/profile',
name: 'profile',
component: ProfilePage,
meta: { requiresAuth: true }
meta: {requiresAuth: true}
},
{
path: '/explorer',
@@ -147,7 +156,6 @@ const routes = [
path: '/feed',
name: 'feed',
component: ForYouPage,
},
]
@@ -156,7 +164,7 @@ const router = createRouter({
routes
})
// Navigation gards
// Navigation guards
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();

2
src/views/LoginView.vue
View File

@@ -14,11 +14,9 @@
</div>
</div>
</div>
<selected-footer></selected-footer>
</template>
<script setup>
import SelectedFooter from "@/views/main/SelectedFooter.vue";
import LoginForm from "@/views/main/LoginForm.vue";
import { useRouter } from 'vue-router';

0
src/views/creators/CreatorCard.vue → src/views/browser/CreatorCard.vue
View File

6
src/views/creators/CreatorList.vue → src/views/browser/CreatorList.vue
View File

@@ -15,9 +15,9 @@
<RouterLink v-for="(creator, index) in creators"
:key="index"
:to="creator.routerLink">
<CreatorCard :creator="creator"
<creator-card :creator="creator"
class="m-2">
</CreatorCard>
</creator-card>
</RouterLink>
</div>
@@ -27,6 +27,6 @@
<script setup>
import CreatorCard from "@/views/creators/CreatorCard.vue";
import CreatorCard from "@/views/browser/CreatorCard.vue";
</script>

15
src/views/contents/ContentList.vue
View File

@@ -1,9 +1,12 @@
<template>
<v-infinite-scroll :items="contents"
:onLoad="fetchContents"
class="md:gap-2">
<div>
<v-infinite-scroll :items="contents"
:onLoad="fetchContents">
<!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
<div class="flex flex-column gap-2 -mt-4">
<template v-for="content in contents" :key="content.id">
<component
:is="isSmallScreen ? ContentCardSm : ContentCardNormal"
@@ -11,6 +14,7 @@
@content-deleted="onContentDeleted"
></component>
</template>
</div>
<template v-slot:empty>
Il n'y a pas plus de contenus
@@ -22,8 +26,13 @@
</v-infinite-scroll>
</div>
</template>
<style>
</style>
<script setup>
import {useClient} from '@/plugins/api.js';

2
src/views/contents/contentcards/NContentCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="shadow-md rounded-2xl bg-gray-50 border custom-border w-full mb-2 ">
<div class="shadow-md rounded-2xl bg-gray-50 border custom-border w-full">
<div>
<v-card-title>
<div class="flex flex-row justify-between items-center">

65
src/views/creators/CreatorAbout.vue
View File

@@ -1,65 +0,0 @@
<template>
<div>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
@click="AboutUs = true"
>
<v-icon style="font-size: 30px; height: 30px; width: 55px;">
mdi-information
</v-icon>
</button>
<v-dialog v-model="AboutUs" max-width="500px">
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `3px solid ${creator.colors.menu}`
}">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
{{ creator.about.title }}
</div>
<v-btn icon @click="AboutUs = false" class="ml-auto mr-2" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<v-card-text class="scrollable-content">
{{ creator.about.description }}
</v-card-text>
<div class="p-4">
<v-btn variant="outlined" text class=" w-full" @click="AboutUs = false" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }">Fermer</v-btn>
</div>
</v-card>
</v-form>
</v-dialog>
</div>
</template>
<script setup>
import {ref} from 'vue';
const AboutUs = ref(false);
const props = defineProps({
creator: {type: Object, required: true},
});
</script>
<style scoped>
.scrollable-content {
max-height: 600px;
overflow-y: auto;
}
.scrollable-content::-webkit-scrollbar {
width: 6px;
}
</style>

9
src/views/creators/CreatorBanner.vue
View File

@@ -1,10 +1,7 @@
<template>
<div class="shadow-lg rounded-2xl" :style="{ backgroundColor: creator.colors.bannerBottom}">
<div class="shadow-lg rounded-2xl"
:style="{ backgroundColor: creator.colors.secondary}">
<div class="relative z-20">
<div class="py-4 min-h-9 md:rounded-t-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
</div>
<div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </div>
<!--Banner-->
<div class="relative">
@@ -19,9 +16,9 @@
</div>
</div>
<div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"></div>
<!--actions - Lowerpart-->
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
</div>
</template>

41
src/views/creators/CreatorContent.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<h1>Content Browser</h1>
</template>
<script async setup>
import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
const creator = ref(null)
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
</script>

80
src/views/creators/CreatorExclusiveContent.vue
View File

@@ -1,80 +0,0 @@
<template>
<div :style="{ backgroundColor: '#2D2728' }">
<div class="mt-10" v-if="creator && creator.id">
<div class="max-w-[1500px] mx-auto">
<creator-banner :creator="creator"
@content-posted="contentPosted"
></creator-banner>
</div>
</div>
<div v-else>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
<div v-else>
<v-card>
<v-card-text style="text-align: center;">
Aucun créateur au nom de {{ route.params.creator }}
</v-card-text>
</v-card>
</div>
</div>
<div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
<div>
<div class="flex flex-column px-2 max-w-[1200px]">
<exclusive-content-container :creator="creator"></exclusive-content-container>
</div>
</div>
<div class="max-w-80 hidden xl:block">
<!-- Rewards component will be visible only on xl screens -->
<rewards :creator="creator"></rewards>
</div>
</div>
</div>
</template>
<script async setup>
import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Creatornewssummary from "@/views/creators/CreatorNewsSummary.vue";
import Rewards from "@/views/creators/Rewards.vue";
import ExclusiveContentContainer from "@/views/creators/ExclusiveContentContainer.vue";
const creator = ref(null)
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
</script>

27
src/views/creators/CreatorHome.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="flex flex-row">
<div class="max-w-80">
<creator-news-summary></creator-news-summary>
</div>
<div class="px-4" :style="{ color: userStore.creator.colors.onBackground}">
<h1>{{ userStore.creator.about.title }}</h1>
<p>
{{ userStore.creator.about.description }}
</p>
</div>
</div>
</template>
<script setup>
import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore()
</script>
<style scoped>
</style>

28
src/views/creators/CreatorPresentation.vue → src/views/creators/CreatorLayout.vue
View File

@@ -1,13 +1,12 @@
<template>
<div :style="{ backgroundColor: '#2D2728' }">
<div class="mt-10" v-if="creator && creator.id">
<div :style="{ backgroundColor: creator.colors.background }">
<div class="max-w-[1500px] mx-auto">
<div v-if="creator && creator.id">
<creator-banner :creator="creator"
@content-posted="contentPosted"
></creator-banner>
</div>
</div>
<div v-else>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>
@@ -21,19 +20,21 @@
</div>
</div>
<div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
<div>
<div class="flex flex-row justify-center py-10">
<!-- Actualité feed-->
<div class="flex flex-column px-2 max-w-80">
<Creatornewssummary :creator="creator"></Creatornewssummary>
<div class="w-full">
<router-view></router-view>
</div>
</div>
<div class="min-w-[875px]"></div>
<div class="max-w-80">
<rewards :creator="creator"></rewards>
<rewards :creator="creator"></rewards>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
@@ -42,9 +43,8 @@ import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Creatornewssummary from "@/views/creators/CreatorNewsSummary.vue";
import Rewards from "@/views/creators/Rewards.vue";
import Footer from "@/views/main/Footer.vue";
const creator = ref(null)
const loading = ref(true)

14
src/views/creators/CreatorPage.vue → src/views/creators/CreatorNews.vue
View File

@@ -1,20 +1,12 @@
<template>
<div :style="{ backgroundColor: '#2D2728' }">
<div class="mt-10" v-if="creator && creator.id">
<div class="max-w-[1500px] mx-auto">
<creator-banner :creator="creator"
@content-posted="contentPosted"
></creator-banner>
</div>
<div class="max-w-[800px] mx-auto">
<div class="w-full h-full ">
<div v-if="creator && creator.id">
<div class="w-full h-full pr-4">
<content-list :creator-id="creator.id"
:contents="contents"
></content-list>
</div>
</div>
</div>
<div v-else>
<div v-if="loading">
@@ -28,7 +20,7 @@
</v-card>
</div>
</div>
</div>
</template>
<script async setup>

116
src/views/creators/CreatorNewsSummary.vue
View File

@@ -1,30 +1,49 @@
<template>
<div class="overflow-hidden relative" @wheel="handleScroll">
<div class="text-center text-white rounded-t-lg mb-1 py-1"
:style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
Actualité
</div>
<!-- Container that holds all the posts and allows dynamic scrolling -->
<div class="relative max-h-[1000px] overflow-hidden">
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white"
:style="{ backgroundColor: creator.colors.bannerTop }">
<div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
<p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
<p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
<div v-for="(item, index) in articles"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
<div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
<p class="text-xl tracking-[8px]">
<span v-if="item.type === 'nouvelle'">
Nouvelle
</span>
<span v-if="item.type === 'contenu'">
Contenu
</span>
</p>
<p class="text-xs">{{ item.date }}</p>
</div>
<div class="p-3">
<div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
<div class="p-4">
<div class="text-lg tracking-[2px]">
{{ item.title }}
</div>
<p v-if="item.description"
class="text-gray-300 text-sm text-justify mt-1 py-1">
{{ item.description }}
</p>
<div v-if="item.rating" class="stars flex justify-end">
{{ item.rating }} ★
</div>
<img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2"/>
<img v-if="item.photo"
:src="item.photo"
class="w-full h-auto my-2"/>
<video v-if="item.video"
controls
:src="item.video"
class="w-full h-auto my-2">
</video>
<div class="flex justify-evenly">
<v-btn icon variant="plain">
@@ -37,35 +56,19 @@
<v-icon>mdi-gift-outline</v-icon>
</v-btn>
</div>
<video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons directly below the content -->
<div class="flex justify-center mt-2 space-x-2" v-if="showNavigationButtons">
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
</v-btn>
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
import {ref} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
const props = defineProps({
creator: {
type: Object,
required: true,
},
});
const userStore = useUserStore()
const actualites = ref([
const articles = ref([
{
type: 'nouvelle',
title: 'La visite du studio',
@@ -113,45 +116,4 @@ const actualites = ref([
},
]);
const startIndex = ref(0);
const cardsPerPage = 3;
// Gestion de la position du scroll
const scrollPosition = ref(0);
const cardHeight = 250; // Hauteur approximative d'une carte en pixels
// Calculer l'index final
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
// Calculer si les boutons doivent être affichés
const showNavigationButtons = computed(() => {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
return totalHeight > containerHeight; // Afficher les boutons seulement si le contenu dépasse la hauteur du conteneur
});
function scrollDown() {
if (endIndex.value < actualites.value.length) {
startIndex.value += 1; // Défiler d'une carte à la fois
scrollPosition.value += cardHeight; // Augmenter la position de défilement
}
}
function scrollUp() {
if (startIndex.value > 0) {
startIndex.value -= 1; // Défiler d'une carte à la fois
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
}
}
// Handle scroll wheel event to scroll up or down
function handleScroll(event) {
event.preventDefault(); // Empêche le défilement de la page
if (event.deltaY < 0) {
scrollUp(); // Défilement vers le haut
} else if (event.deltaY > 0) {
scrollDown(); // Défilement vers le bas
}
}
</script>

5
src/views/creators/DonationButtonBanner.vue
View File

@@ -7,11 +7,6 @@
<div class="font-bold"> Je soutiens </div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">

5
src/views/creators/DonationButtonBannerSlim.vue
View File

@@ -7,11 +7,6 @@
<div class="font-bold"> Je soutiens </div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">

6
src/views/creators/FollowButton.vue
View File

@@ -4,7 +4,7 @@ import {computed, ref} from "vue";
const props = defineProps({
creator: {type: Object, required: true},
colorBorder: {required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
@@ -33,7 +33,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',
@@ -53,7 +53,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',

89
src/views/creators/Rewards.vue
View File

@@ -1,52 +1,41 @@
<template>
<div class="overflow-hidden relative" @wheel="handleScroll">
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
Récompenses
</div>
<div class="text-center text-white rounded-t-lg py-1 mb-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Récompenses</div>
<div v-for="(item, index) in rewards"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
<!-- Container that holds all the posts and allows dynamic scrolling -->
<div class="relative h-[1000px] max-h-[1000px] overflow-hidden">
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white p-4" :style="{ backgroundColor: creator.colors.bannerTop }">
<div class="flex justify-center items-center border-b-2 border-white p-3 mx-2">
<div class="text-xl align-center" style="letter-spacing: 4px">{{ item.title }}</div>
<div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
{{ item.title }}
</div>
<div class="p-3">
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">
{{ item.description }}
</p>
<div v-if="item.amount" class="flex flex-row justify-end space-x-2">
<div class="text-right text-white">{{ item.amount }}$</div>
<div>|</div>
<div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons directly below the content -->
<div v-if="showNavigationButtons" class="flex justify-center mt-2 py-2">
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
</v-btn>
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
import {ref, computed} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
const props = defineProps({
creator: {
type: Object,
required: true,
},
});
const userStore = useUserStore()
const actualites = ref([
const rewards = ref([
{
title: 'Hoodie',
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
@@ -91,45 +80,5 @@ const actualites = ref([
},
]);
const startIndex = ref(0);
const cardsPerPage = 3;
const scrollPosition = ref(0);
const cardHeight = 250;
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
// Calculate whether navigation buttons should be shown
const showNavigationButtons = computed(() => {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
return totalHeight > containerHeight; // Only show buttons if content exceeds the container
});
function scrollUp() {
if (startIndex.value > 0) {
startIndex.value -= 1;
scrollPosition.value -= cardHeight;
}
}
function scrollDown() {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
if (scrollPosition.value + containerHeight < totalHeight) {
startIndex.value += 1;
scrollPosition.value += cardHeight;
}
}
// Handle scroll wheel event to scroll up or down
function handleScroll(event) {
event.preventDefault(); // Empêche le défilement de la page
if (event.deltaY < 0) {
scrollUp(); // Défilement vers le haut
} else if (event.deltaY > 0) {
scrollDown(); // Défilement vers le bas
}
}
</script>

10
src/views/creators/SubscribeButton.vue
View File

@@ -4,11 +4,9 @@ import {computed, ref} from "vue";
const props = defineProps({
creator: {type: Object, required: true},
colorBorder: {required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
@@ -33,7 +31,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
@@ -44,7 +42,7 @@ function unsubscribeFromCreator() {
}"
@click="subscribeToCreator"
>
<div>{{ $t('subscribebutton.subscribe') }}</div>
{{ $t('subscribebutton.subscribe') }}
</v-btn>
</template>
@@ -53,7 +51,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',

19
src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -5,7 +5,7 @@ import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
const props = defineProps({
creator: { type: Object, required: true }
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
@@ -17,18 +17,27 @@ function addContent(content) {
<template>
<div>
<banner-actions-sm class="d-sm-none" :creator="creator" @content-posted="addContent"></banner-actions-sm>
<banner-actions-sm class="d-sm-none"
:creator="creator"
@content-posted="addContent"
></banner-actions-sm>
<div class="d-none d-sm-flex d-md-none">
<banner-actions-md :creator="creator" @content-posted="addContent"></banner-actions-md>
<banner-actions-md :creator="creator"
@content-posted="addContent"
></banner-actions-md>
</div>
<div class="d-none d-md-flex d-lg-none">
<banner-actions-lg :creator="creator" @content-posted="addContent"></banner-actions-lg>
<banner-actions-lg :creator="creator"
@content-posted="addContent"
></banner-actions-lg>
</div>
<div class="d-none d-lg-flex">
<banner-actions-xl :creator="creator" @content-posted="addContent"></banner-actions-xl>
<banner-actions-xl :creator="creator"
@content-posted="addContent"
></banner-actions-xl>
</div>
</div>
</template>

9
src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -14,13 +14,7 @@
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div class="ml-72 text-white mr-10">
<p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
<div class="text-2xl text-white flex flex-row align-center">
{{ creator.about.title }}
<creator-about class="px-2" :creator="creator"></creator-about>
</div>
</div>
<div class="flex flex-row ml-auto space-x-2.5">
<donation-button-banner
:color-border="creator.colors.menu"
@@ -92,7 +86,6 @@ import { ref, onMounted, computed } from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";

16
src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

@@ -22,18 +22,13 @@
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
<div class="flex items-center">
<div class="mt-1">{{ creator.about.title }}</div>
<creator-about :creator="creator"></creator-about>
</div>
</div>
<div class="flex justify-between mt-2">
<subscribe-button :creator="creator"></subscribe-button>
<div class="flex space-x-2">
<publish-content-button :creator="creator"
@content-posted="addContent"
></publish-content-button>
<donation-button :color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
@@ -54,17 +49,10 @@
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
const props = defineProps({
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script>

9
src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -24,18 +24,14 @@
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
</div>
<div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
<div class="mt-1">{{ creator.about.title }}</div>
<creator-about :creator="creator"></creator-about>
</div>
</div>
<!-- Title-info-donation-->
<div class="flex flex-row items-center justify-between w-full px-4">
<div>
<subscribe-button :creator="creator"></subscribe-button>
<subscribe-button :creator="creator"
></subscribe-button>
</div>
<div class="flex ml-auto space-x-4">
@@ -64,7 +60,6 @@
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
const props = defineProps({
creator: {type: Object, required: true}

78
src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -2,27 +2,26 @@
<div class="flex flex-column w-full">
<div class="relative w-full shadow-xl rounded-2xl">
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
:style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div>
<div>
<!-- Profile and info-->
<!--Profile and info-->
<div class="absolute">
<div>
<img
class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-10 -mt-10"
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
:style="{ borderColor: creator.colors.secondary, height: '190px'}"
/>
</div>
<div class="ml-64 text-white w-25 min-w-60">
<p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
<div class="text-md py-1">
{{ creator.about.title }}
</div>
<div class="text-xs">
105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
</div>
@@ -53,32 +52,34 @@
<div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
<follow-button
:creator="creator"
:color-border="creator.colors.menu">
:background-color="creator.colors.secondary">
</follow-button>
<subscribe-button
:creator="creator"
:color-border="creator.colors.menu">
:background-color="creator.colors.secondary">
</subscribe-button>
</div>
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: creator.colors.bannerTop}">
:style="{ backgroundColor: creator.colors.background}">
<div class="w-96 h-28 flex flex-col">
<!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
<div class="flex flex-row flex-grow-[2] min-h-20">
<div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
:style="{ backgroundColor: creator.colors.primary, opacity: 0.20 }">
</div>
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.bannerBottom}">
:style="{ backgroundColor: creator.colors.secondary}">
<div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5">
<div class="flex flex-row items-center">
<div style="display: flex; align-items: center;">
<textarea class="text-3xl" rows="1" cols="6" style="border: none; resize: none; text-align: right; outline: none;" placeholder="0"></textarea>
<textarea class="text-3xl" rows="1" cols="6"
style="border: none; resize: none; text-align: right; outline: none;"
placeholder="0"></textarea>
<div class="px-1">$</div>
</div>
@@ -86,11 +87,11 @@
<div class="flex flex-col items-center space-y-2">
<v-btn
:style="{ backgroundColor: creator.colors.bannerBottom, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+
</v-btn>
<v-btn
:style="{ backgroundColor: creator.colors.bannerBottom, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">-
</v-btn>
</div>
@@ -107,15 +108,15 @@
</div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
<textarea
:style="{ backgroundColor: creator.colors.secondary, opacity: 0.80 }">
<textarea
rows="1"
placeholder="Message facultatif"
class="w-full p-2 border border-gray-300 rounded-b-md resize-none"
style="max-height: 300px; overflow-y: hidden; outline: none;"
oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"></textarea>
oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"
></textarea>
</div>
</div>
@@ -124,12 +125,21 @@
</div>
</div>
<div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.bannerBottom, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="flex justify-evenly w-full">
<v-btn variant="text" class="text-white">Présentation</v-btn>
<v-btn variant="text" class="text-white">Actualité</v-btn>
<v-btn variant="text" class="text-white">Exclusivité</v-btn>
<RouterLink class="nav-button"
:to="`/@${creator.name}`">
Présentation
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/news`">
Actualité
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/content`">
Exclusivité
</RouterLink>
</div>
</div>
@@ -137,14 +147,19 @@
</template>
<style scoped>
.nav-button {
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
}
.nav-button:hover {
@apply bg-purple-800;
}
</style>
<script setup>
import {ref, onMounted, computed} from 'vue';
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import FollowButton from "@/views/creators/FollowButton.vue";
@@ -209,10 +224,7 @@ const props = defineProps({
creator: {type: Object, required: true}
});
const subscriptionStore = useSubscriptionStore();
// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
const isSticky = ref(false);
const mainContainer = ref(null);

6
src/views/documentation/About.vue
View File

@@ -128,14 +128,8 @@
d’Hutopy votre utopie. Merci de faire partie de notre histoire.
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

6
src/views/documentation/ContentPolicy.vue
View File

@@ -123,14 +123,8 @@
Si vous avez des questions sur cette politique de contenu ou sur la manière dont nous l'appliquons, veuillez contacter notre équipe d'assistance à <a href="mailto:support@hutopy.com">support@hutopy.com</a>.
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

6
src/views/documentation/CreatorGuide.vue
View File

@@ -38,14 +38,8 @@
<li class="text-justify p-tos">Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour améliorer vos compétences et rester à jour sur les tendances du secteur. (À venir)</li>
</ul>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

5
src/views/documentation/FAQ.vue
View File

@@ -80,8 +80,6 @@
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@@ -91,6 +89,3 @@
@apply m-2 text-red-500 my-4;
}
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

6
src/views/documentation/HelpAndContact.vue
View File

@@ -34,14 +34,8 @@
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

5
src/views/documentation/Pricing.vue
View File

@@ -21,14 +21,9 @@
Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

5
src/views/documentation/TermsAndConditions.vue
View File

@@ -63,13 +63,8 @@
</p>
</div>
<selected-footer></selected-footer>
</template>
<style>
@import '@/cssstyle/tosstyle.css';
</style>
<script setup lang="ts">
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

82
src/views/main/Footer.vue
View File

@@ -1,9 +1,85 @@
<template>
<script setup>
import XIcon from '@/assets/icons/x.svg'
import FacebookIcon from '@/assets/icons/facebook.svg'
import InstagramIcon from '@/assets/icons/instagram.svg'
</script>
<footer>
<div class="p-4 text-center font-sans">
<template>
<footer class="py-8 flex flex-col gap-8">
<div class="flex justify-center">
<router-link to="/">
<img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"
width="300px"
height="64px">
</router-link>
</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>
<a href="https://www.instagram.com/hutopy.inc/">
<instagram-icon class="icon"></instagram-icon>
</a>
<a href="https://x.com/Hutopyinc/">
<x-icon class="icon"></x-icon>
</a>
</div>
<div class="flex flex-row flex-wrap justify-center gap-4">
<router-link to="/helpandcontact">
Aide & Contact
</router-link>
<router-link to="/faq">
FAQ
</router-link>
<router-link to="/guideforcreators">
Guide pour les créateurs
</router-link>
<router-link to="/termsandconditions">
Termes et Conditions
</router-link>
<router-link to="/contentpolicy">
Politique de Contenu
</router-link>
<router-link to="/about">
À Propos
</router-link>
<router-link to="/pricing">
Frais
</router-link>
</div>
<div class="flex justify-center base-text">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
</div>
</footer>
</template>
<style scoped>
.icon {
width: 36px;
height: 36px;
fill: #6a0065;
}
.base-text {
@apply text-gray-600 tracking-widest font-sans text-sm uppercase
}
a {
@apply base-text
}
a:hover {
@apply text-gray-400
}
</style>

42
src/views/main/Home.vue
View File

@@ -8,34 +8,44 @@
</div>
<div class="mx-auto flex justify-center pt-10 max-w-[980px]">
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction" class="max-w-full block rounded-none md:rounded-2xl">
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction"
class="max-w-full block rounded-none md:rounded-2xl">
</div>
<div>
<div class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">
<div
class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
<img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="w-full rounded-2xl">
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<div
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
Libérez votre créativité sur Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
Libérez votre créativité sur Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un
monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
</p>
</div>
</div>
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
<img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="w-full rounded-2xl">
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<div
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.
Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus
uniques, des interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
enrichir votre quotidien.
</p>
</div>
</div>
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
<img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="w-full rounded-2xl">
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<div
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
Devenez une source d'inspiration sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle vertueux de créativité et d'inspiration.
Devenez une source d'inspiration sur Hutopy, en partageant votre vision, votre talent et vos histoires.
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves
dans un cercle vertueux de créativité et d'inspiration.
</p>
</div>
</div>
@@ -84,17 +94,20 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex justify-center items-center">
<RouterLink to="/@Hutopy">
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image"
class="rounded-2xl shadow-lg">
</RouterLink>
</div>
<div class="flex justify-center items-center">
<RouterLink to="/@guillaumem">
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg" alt="Profile Image" class="rounded-2xl shadow-lg">
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
alt="Profile Image" class="rounded-2xl shadow-lg">
</RouterLink>
</div>
<div class="flex justify-center items-center">
<RouterLink to="/@chloebeaugrand">
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
alt="Profile Image" class="rounded-2xl shadow-lg">
</RouterLink>
</div>
</div>
@@ -111,17 +124,10 @@
</div>
</div>
<selected-footer></selected-footer>
</div>
</div>
</template>
<script setup>
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>
<style scoped>
.overlay p {

4
src/views/main/Register.vue
View File

@@ -10,14 +10,10 @@
</div>
</div>
</div>
<selected-footer></selected-footer>
</template>
<script setup>
import SelectedFooter from "@/views/main/SelectedFooter.vue";
import RegisterForm from "@/views/main/RegisterForm.vue";
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

55
src/views/main/SelectedFooter.vue
View File

@@ -1,55 +0,0 @@
<template>
<div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
<router-link to="/">
<img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
</router-link>
</div>
<div class="flex flex-row justify-center space-x-10 py-10">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<v-icon size="40px" class="text-fuchsia-900">mdi-facebook</v-icon>
</a>
<a href="https://www.instagram.com/hutopy.inc/">
<v-icon size="40px" class="text-fuchsia-900">mdi-instagram</v-icon>
</a>
<a href="https://x.com/Hutopyinc/">
<img src="/images/hutopymedia/icons/x.svg" width="34px" height="34px" class="mt-1 filter-fushia ">
</a>
</div>
<div class="flex flex-row flex-wrap justify-center space-x-2 py-2 pb-6">
<router-link to="/helpandcontact">
<v-btn variant="plain"> Aide & Contact</v-btn>
</router-link>
<router-link to="/faq">
<v-btn variant="plain"> FAQ</v-btn>
</router-link>
<router-link to="/guideforcreators">
<v-btn variant="plain"> Guide pour les créateurs</v-btn>
</router-link>
<router-link to="/termsandconditions">
<v-btn variant="plain">Termes et Conditions </v-btn>
</router-link>
<router-link to="/contentpolicy">
<v-btn variant="plain"> Politique de Contenu </v-btn>
</router-link>
<router-link to="/about">
<v-btn variant="plain"> À Propos</v-btn>
</router-link>
<router-link to="/pricing">
<v-btn variant="plain"> Frais</v-btn>
</router-link>
</div>
</template>
<script setup lang="ts">
</script>
<style>
.filter-fushia{
filter: invert(14%) sepia(60%) saturate(4103%) hue-rotate(285deg) brightness(84%) contrast(93%);
}
</style>

21
src/views/main/SideBar.vue
View File

@@ -1,12 +1,11 @@
<script setup>
import SiteMenu from "@/views/main/SiteMenu.vue";
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
import { useAuthStore } from "@/stores/authStore.js";
import { useRouter } from 'vue-router';
import { ref } from "vue";
import { useI18n } from 'vue-i18n';
import {useAuthStore} from "@/stores/authStore.js";
import {useRouter} from 'vue-router';
import {ref} from "vue";
import {useI18n} from 'vue-i18n';
const { locale } = useI18n();
const {locale} = useI18n();
const router = useRouter();
const selectedLanguage = ref(locale.value);
@@ -37,14 +36,12 @@ initializeLocale();
</script>
<template>
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar">
<div class="mt-16"></div>
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white">
<div class="flex justify-center py-3">
<v-btn v-if="authStore.isAuthenticated" variant="plain" class="p-8" @click="feedHandler">
<img src="/images/hutopymedia/icons/feedfollow.svg" alt="feed follow icon"
style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;" />
style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;"/>
</v-btn>
<v-btn variant="plain" class="p-8" @click="explorerHandler">
<v-icon style="font-size: 28px;">mdi-earth</v-icon>
@@ -76,10 +73,6 @@ initializeLocale();
<span>Connectez-vous</span>
</div>
<div class="border-t w-full py-10 mt-auto">
<SiteMenu></SiteMenu>
</div>
</nav>
</template>

44
src/views/main/SiteMenu.vue
View File

@@ -1,44 +0,0 @@
<template>
<div class="flex flex-col">
<div class="flex flex-row justify-center pb-4 pt-2 py-4">
<!-- Facebook -->
<a href="https://www.facebook.com/profile.php?id=61556819217561" class="social">
<v-icon>mdi-facebook</v-icon>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/hutopy.inc/" class="social">
<v-icon>mdi-instagram</v-icon>
</a>
<!-- X / Twitter -->
<a href="https://twitter.com/Hutopyinc" class="social">
<img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px" class="mb-5 mr-2">
</a>
</div>
<div class="text-center ">
<RouterLink class="nav-button" to="/helpandcontact">{{ $t('sitemenu.HelpAndContact') }}</RouterLink>
<RouterLink class="nav-button" to="/faq">{{ $t('sitemenu.FAQ') }}</RouterLink>
<RouterLink class="nav-button" to="/guideforcreators">{{ $t('sitemenu.CreatorGuide') }}</RouterLink>
<RouterLink class="nav-button" to="/termsandconditions">{{ $t('sitemenu.TermsAndConditions') }}</RouterLink>
<RouterLink class="nav-button" to="/contentpolicy">{{ $t('sitemenu.ContentPolicy') }}</RouterLink>
<RouterLink class="nav-button" to="/about">{{ $t('sitemenu.About') }}</RouterLink>
<RouterLink class="nav-button" to="/pricing">{{ $t('sitemenu.Pricing') }}</RouterLink>
</div>
</div>
</template>
<style scoped>
.nav-button {
@apply rounded flex justify-center font-sans py-1;
}
.nav-button:hover {
@apply text-purple-800 bg-gray-50;
}
.social {
@apply m-2 w-10 h-10;
}
</style>

26
src/views/profile/creators/CreatorPage.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import XIcon from '@/assets/icons/x.svg'
import {computed, ref} from 'vue'
import {useUserStore} from "@/stores/userStore.js"
import Socials from './Socials.vue'
@@ -84,19 +85,19 @@ const closeDialog = () => {
<div class="flex flex-col items-center w-full">
<h1 class="uppercase pb-5 text-2xl">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
{{$t('creatorinfopage.pageinformation')}}
{{ $t('creatorinfopage.pageinformation') }}
</h1>
<div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
<div class="my-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.informations')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div>
<div class="flex flex-col w-full">
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.name')}}</span>
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span>
<span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -106,7 +107,7 @@ const closeDialog = () => {
<button
@click="openDialog('About')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.title')}}</span>
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.title') }}</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -116,7 +117,7 @@ const closeDialog = () => {
<button
@click="openDialog('About')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl ">
<span class="pa-2 min-w-32 text-left">{{$t('creatorinfopage.description')}}</span>
<span class="pa-2 min-w-32 text-left">{{ $t('creatorinfopage.description') }}</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -126,7 +127,7 @@ const closeDialog = () => {
</div>
<div class="border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.banner&profile')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
<div class="flex flex-col w-full">
<button
@@ -168,7 +169,7 @@ const closeDialog = () => {
@click="openDialog('ColorsPicker', 'accent')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
<span class="flex-auto text-left pr-6">{{$t('creatorinfopage.borderpicturecolor')}}</span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
@@ -178,7 +179,7 @@ const closeDialog = () => {
@click="openDialog('ColorsPicker', 'menu')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
<span class="flex-auto text-left pr-6">{{$t('creatorinfopage.menucolor')}}</span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
@@ -188,7 +189,7 @@ const closeDialog = () => {
<div class="mt-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">{{$t('creatorinfopage.socialnetwork')}}</div>
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div>
<div class="flex flex-col w-full">
<button
@@ -214,8 +215,9 @@ const closeDialog = () => {
<button
@click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/x.svg" width="23px"
height="23px"></span>
<span class="flex-none pa-2 w-6 h-6 text-left">
<XIcon></XIcon>
</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
@@ -236,7 +238,7 @@ const closeDialog = () => {
@click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
<span class="flex-none pa-2 min-w-32 text-left">
<img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
<XIcon class="w-5 h-5"></XIcon>
</span>
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
<span class="flex-none">

25
src/views/profile/creators/Socials.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import XIcon from '@/assets/icons/x.svg'
import {ref} from 'vue'
import {useClient} from "@/plugins/api.js";
@@ -56,6 +57,14 @@ const cancel = () => {
</script>
<style scoped>
.icon {
width: 40px;
height: 40px;
fill: #1976d2;
}
</style>
<template>
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
<div class="flex flex-row align-center">
@@ -87,7 +96,7 @@ const cancel = () => {
label="Lien LinkedIn"
outlined
></v-text-field>
</div>
</div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
@@ -97,10 +106,12 @@ const cancel = () => {
label="Lien Reddit"
outlined
></v-text-field>
</div>
</div>
<div class="flex flex-row align-center">
<img src="/images/hutopymedia/icons/tiktok.svg" width="23px" height="23px" class="mb-5 mr-2">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon></XIcon>
</div>
<v-text-field
variant="outlined"
v-model="tikTokUrl"
@@ -118,9 +129,13 @@ const cancel = () => {
outlined
></v-text-field>
</div>
<div class="flex flex-row align-center">
<img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px" class="mb-5 mr-2">
<div class="w-6 h-6 mb-5 mr-2">
<XIcon class="icon"></XIcon>
</div>
<v-text-field
variant="outlined"
v-model="xUrl"

9
vite.config.js
View File

@@ -1,15 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import {fileURLToPath, URL} from 'node:url'
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
export default defineConfig(({mode}) => {
// Load environment variables based on the mode
const env = loadEnv(mode, process.cwd(), '')
return {
plugins: [
vue(),
svgLoader()
],
resolve: {
alias: {