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

Big cleanup for styling

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-12 13:38:29 -05:00
parent d6f3610d17
commit aba9ba7658
20 changed files with 519 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/images/hutopymedia/homepage/brain.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
frontend/public/images/hutopymedia/homepage/hands.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

36
frontend/src/App.vue
View File

@@ -1,26 +1,15 @@
<template> <template>
<v-app> <v-app>
<div class="flex flex-row"> <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
<!-- Side Bar for larger screens -->
<div v-if="!smAndDown" class="border-r-1 z-30"> <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
<side-bar></side-bar> <side-bar></side-bar>
</div> </div>
<!-- Mobile --> <div class="ml-64 w-full flex justify-center items-center ">
<div v-if="smAndDown" class="mobile-container"> <router-view></router-view>
<div v-if="!brandingStore.loading"
class="min-h-screen justify-center items-center bg-hBackground">
<router-view></router-view>
</div>
</div> </div>
<!-- PC -->
<div v-if="!smAndDown" class="w-full ml-64">
<div v-if="!brandingStore.loading"
class="min-h-screen justify-center items-center bg-hBackground">
<router-view></router-view>
</div>
</div>
</div> </div>
</v-app> </v-app>
@@ -28,20 +17,9 @@
<script async setup> <script async setup>
import SideBar from "@/views/main/SideBar.vue"; import SideBar from "@/views/main/SideBar.vue";
import { useBrandingStore } from "@/stores/brandingStore.js";
import { useDisplay } from "vuetify";
const { smAndDown } = useDisplay();
const brandingStore = useBrandingStore();
</script> </script>
<style scoped> <style scoped>
/* Ensure content does not overflow on mobile */
.mobile-container {
width: 100%; /* Full width for mobile */
max-width: 100vw; /* Prevent overflow */
overflow-x: hidden; /* Hide horizontal overflow */
padding: 0; /* Remove extra padding */
box-sizing: border-box; /* Include padding in width/height calculation */
}
</style> </style>

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

@@ -3,16 +3,59 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--h-background: #1C1C1D; /* Branding Colors */
--hutopy-primary: #6B0065;
--hutopy-secondary: #A30E79;
/* UI COLORS */
--h-background: #201b20;
--h-on-background: #e2e5e9; --h-on-background: #e2e5e9;
--h-surface: #252728; --h-surface: #252829;
--h-on-surface: #e2e5e9; --h-on-surface: #e2e5e9;
--h-primary: #231F20; --h-primary: #1B1B1F;
--h-on-primary: #d9e1e1; --h-on-primary: #c5c8c8;
--h-secondary: #683B1E; --h-secondary: #e7e5ea;
--h-on-secondary: #b0b3b8; --h-on-secondary: #000000;
--h-tertiary: #272A44; --h-tertiary: #272A44;
--h-on-tertiary: #bdb6b6; --h-on-tertiary: #bdb6b6;
--h-error: #bc2f2f; --h-error: #bc2f2f;
--h-on-error: #ffffff; --h-on-error: #ffffff;
} }
@layer components {
.btn {
@apply min-w-24 w-full;
@apply p-4;
@apply flex flex-nowrap gap-4 items-center justify-center;
@apply rounded-lg;
@apply capitalize text-base font-sans font-medium;
@apply w-fit px-10;
}
button.primary {
@apply btn bg-hPrimary text-hOnPrimary;
}
button.secondary {
@apply btn bg-hSecondary text-hOnSecondary;
}
div.card {
@apply w-[800px];
@apply rounded-xl p-10 m-4;
@apply bg-hSurface text-hOnSurface;
}
div.card-title {
@apply font-sans font-bold text-2xl;
@apply mb-8;
}
div.card-entry {
@apply mb-4;
}
div.card-actions {
@apply flex flex-row gap-6 justify-end;
}
}

63
frontend/src/views/LoginView.vue
View File

@@ -1,39 +1,48 @@
<template> <template>
<div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
<!-- Image -->
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
<!-- Message --> <div class="flex min-h-screen items-center">
<div class="text-lg text-gray-700 mt-8"> <div class="card justify-items-center">
<p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
<p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p> <img alt="hutopy login"
<p class="mt-4 font-bold">Désolé de l'inconvénient.</p> src="/images/hutopy-logo.png"/>
<div class="flex flex-col w-[800px] gap-10 justify-items-center">
<h1 class="text-2xl font-bold login-text text-center mt-10">
Connexion
</h1>
<google-login :callback="googleCallback"
class="w-full justify-items-center"
popup-type="TOKEN">
<button class="secondary w-full">
<v-icon left>mdi-google</v-icon>
Google
</button>
</google-login>
</div>
</div> </div>
</div>
<div>
<div class="flex items-start justify-center py-2">
<div class="max-w-[600px] mt-[10%] ">
<img class="rounded-2xl"
src="/images/hutopymedia/loginpage/loginhutopy.png"
alt="hutopy login">
<login-form></login-form>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import LoginForm from "@/views/main/LoginForm.vue"; import {ref} from 'vue';
import { useDisplay } from "vuetify"; import {GoogleLogin} from "vue3-google-login";
import {ref, watch} from "vue"; import {useAuthStore} from '@/stores/authStore.js';
const { smAndDown } = useDisplay(); const authStore = useAuthStore();
const isMobileView = ref(smAndDown.value);
watch(smAndDown, (newVal) => { const errorSnackBar = ref(false);
isMobileView.value = newVal;
}); async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response !== true) {
errorSnackBar.value = true;
}
}
</script> </script>

67
frontend/src/views/creators/CreateCreator.vue
View File

@@ -47,48 +47,55 @@ async function createAccount() {
</script> </script>
<template> <template>
<div class="container">
<div class="card">
<div class="h-1"></div> <!-- To delete and find the bug that causes the margin of the following component to use a white background.--> <div class="card-title">
Créez votre Hutopy.
</div>
<div class="create-creator-card"> <div class="card-entry">
<name-editor
v-model:name="creatorName"
creator-name-reservation-id="creatorNameDirty"
@update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
></name-editor>
</div>
<div class="py-2 text-3xl font-bold text-center mb-10"> <div class="card-actions">
Créez votre Hutopy. <button
</div>
<div class="flex flex-column justify-end gap-2">
<v-alert
v-if="!!errorMessage"
outlined
type="error"
>
{{ errorMessage }}
</v-alert>
<name-editor
v-model:name="creatorName"
creator-name-reservation-id="creatorNameDirty"
@update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
></name-editor>
<div class="flex flex-row justify-end gap-2">
<v-btn
:disabled="!canSave" :disabled="!canSave"
variant="outlined" class="secondary"
@click="createAccount" @click="createAccount">
:style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }" Cancel
> </button>
<button
class="primary"
:disabled="!canSave"
@click="createAccount">
Créer Créer
</v-btn> </button>
</div> </div>
</div> </div>
</div> </div>
<v-alert
v-if="!!errorMessage"
outlined
type="error"
>
{{ errorMessage }}
</v-alert>
</template> </template>
<style scoped> <style scoped>
.create-creator-card {
@apply text-center max-w-[1000px] mx-auto p-10 bg-white shadow-2xl rounded mt-16 ; .container {
@apply min-h-screen w-full;
@apply flex items-center justify-center;
} }
</style> </style>

12
frontend/src/views/creators/CreatorHome.vue
View File

@@ -7,7 +7,7 @@
<button <button
v-if="isLoggedIn" v-if="isLoggedIn"
@click="isEditMode ? saveChanges() : toggleEditMode()" @click="isEditMode ? saveChanges() : toggleEditMode()"
class="px-4 py-2 rounded-md hover:opacity-90 bg-hSecondary text-hOnSecondary" class="primary"
> >
{{ isEditMode ? 'Enregistrer' : 'Éditer la page' }} {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
</button> </button>
@@ -15,14 +15,14 @@
<button <button
v-if="isEditMode && isLoggedIn" v-if="isEditMode && isLoggedIn"
@click="cancelEdit" @click="cancelEdit"
class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white" class="secondary"
> >
Annuler Annuler
</button> </button>
</div> </div>
<!-- MainPage --> <!-- MainPage -->
<div class="flex flex-col max-w-[650px] mx-auto px-6 bg-hBackground text-hOnBackground"> <div class="flex flex-col mx-auto px-6">
<h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1> <h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1>
@@ -55,7 +55,8 @@
alt="Image principale" alt="Image principale"
class=" max-w-full h-auto cursor-pointer max-h-96"/> class=" max-w-full h-auto cursor-pointer max-h-96"/>
</label> </label>
<button v-if="isEditMode" @click="deleteImage('mainImageUrl')" <button v-if="isEditMode"
@click="deleteImage('mainImageUrl')"
class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X X
</button> </button>
@@ -301,12 +302,11 @@
</template> </template>
<script setup> <script setup>
import {ref, onMounted} from "vue"; import {onMounted, ref, watch} from "vue";
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
import {useBrandingStore} from "@/stores/brandingStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js"; import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useDisplay} from "vuetify"; import {useDisplay} from "vuetify";
import {watch} from "vue";
import FullscreenImage from "@/views/creators/FullscreenImage.vue"; import FullscreenImage from "@/views/creators/FullscreenImage.vue";
const {smAndDown} = useDisplay(); const {smAndDown} = useDisplay();

21
frontend/src/views/creators/CreatorLayout.vue
View File

@@ -1,18 +1,20 @@
<template> <template>
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
<div v-if="brandingStore.loading"> <div v-if="brandingStore.loading">
<v-progress-linear indeterminate></v-progress-linear> <v-progress-linear indeterminate></v-progress-linear>
</div> </div>
<div v-else> <div v-else>
<banner></banner> <div>
</div> <banner></banner>
<div class="py-8 flex-grow"> </div>
<router-view></router-view> <div>
</div> <router-view></router-view>
</div>
<div> <div>
<Footer></Footer> <Footer></Footer>
</div>
</div> </div>
</div> </div>
@@ -23,5 +25,6 @@
import Banner from "@/views/creators/Banner.vue"; import Banner from "@/views/creators/Banner.vue";
import Footer from "@/views/main/Footer.vue"; import Footer from "@/views/main/Footer.vue";
import {useBrandingStore} from "@/stores/brandingStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore() const brandingStore = useBrandingStore()
</script> </script>

20
frontend/src/views/documentation/DocumentationLayout.vue
View File

@@ -3,22 +3,12 @@ import Footer from "@/views/main/Footer.vue";
</script> </script>
<template> <template>
<div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div>
<!-- <div class="flex justify-center">-->
<!-- <img src="/images/hutopy.png"-->
<!-- class="rounded-2xl"-->
<!-- alt="logo hutopy"-->
<!-- width="600">-->
<!-- </div>-->
<div class="p-4">
<router-view></router-view> <router-view></router-view>
</div> </div>
<div>
<Footer></Footer> <Footer></Footer>
</div>
</div> </div>
</template> </template>

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

@@ -6,7 +6,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
<template> <template>
<footer class="py-8 flex flex-col gap-8 bg-hBackground"> <footer class="py-8 flex flex-col gap-8">
<div <div
class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]"> class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
@@ -58,7 +58,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
</router-link> </router-link>
</div> </div>
<div class="flex justify-center base-text mb-13 link"> <div class="flex justify-center base-text link">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }} Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
</div> </div>

259
frontend/src/views/main/Landing.vue
View File

@@ -4,124 +4,135 @@ import Footer from "@/views/main/Footer.vue";
<template> <template>
<div> <div>
<div class="pa-4 flex flex-col justify-center md:flex-row">
<div class="py-6">
<div>
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto">
</div>
</div>
<div class="flex flex-col space-y-3 header-btn">
<v-btn
to="/login"
class="text-white w-full sm:w-auto inscription-btn-header">
Inscription
</v-btn>
<v-btn
to="/create-creator"
variant="outlined"
class="w-full sm:w-auto inscription-btn-header-outlined">
Créer ma page
</v-btn>
</div>
</div> <div>
</div> <div class="pa-4 flex flex-col justify-center md:flex-row">
<div class="py-6">
<div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6"> <div>
<div class="support-text text-justify md:text-left"> <img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"
<span class="text-white"> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br> src="/images/hutopymedia/banners/hutopy.png">
<span class="text-white"> les <span class="highlight2">CRÉATEURS</span>, </span><br>
<span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br>
<span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span>
</div>
<img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain">
</div>
<div class="relative mt-10">
<img
src="/images/hutopymedia/banners/bannerbg.png"
alt="YourHutopy"
class="responsive-banner"
/>
<div class="absolute inset-0 flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je soutiens</div>
<img
src="/images/hutopymedia/homepage/hands.png"
alt="YourHutopy"
class="max-h-56 mx-auto"
>
<div class="text-md text-justify px-6 ">
Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion.
</div>
<!-- <v-btn>Soutenir</v-btn> -->
</div>
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je crée</div>
<img
src="/images/hutopymedia/homepage/brain.png"
alt="YourHutopy"
class="max-h-56 mx-auto"
>
<div class="text-md text-justify px-6">
Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous.
</div>
<v-btn
to="/login"
class="inscription-btn"
>
Inscription
</v-btn>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-6 py-8">
<div class="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte -->
<div class="space-y-6">
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6">
<div class="space-y-4">
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
</p>
<div class="flex justify-center">
<v-btn
to="/create-creator"
class="text-white mt-12 flex items-center justify-center round create-btn"
>
Créer ma page
</v-btn>
</div> </div>
</div> </div>
</div> <div class="flex flex-col space-y-3 header-btn">
<v-btn
class="text-white w-full sm:w-auto inscription-btn-header"
to="/login">
Inscription
</v-btn>
<v-btn
class="w-full sm:w-auto inscription-btn-header-outlined"
to="/create-creator"
variant="outlined">
Créer ma page
</v-btn>
</div>
<!-- Section droite : 4 images -->
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
<div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/sign.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div>
</div> </div>
</div> </div>
<div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
<div class="support-text text-justify md:text-left">
<span class="text-white"> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br>
<span class="text-white"> les <span class="highlight2">CRÉATEURS</span>, </span><br>
<span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br>
<span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span>
</div>
<img alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"
src="/images/hutopymedia/banners/heart.png">
</div>
<div class="relative mt-10">
<div class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je soutiens</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/hands.png"
>
<div class="text-md text-justify px-6 ">
Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution
est un geste fort pour encourager leur talent et leur passion.
</div>
<!-- <v-btn>Soutenir</v-btn> -->
</div>
<div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je crée</div>
<img
alt="YourHutopy"
class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/brain.png"
>
<div class="text-md text-justify px-6">
Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos
idées en réalité grâce à ceux qui croient en vous.
</div>
<v-btn
class="inscription-btn"
to="/login"
>
Inscription
</v-btn>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-6 py-8">
<div class="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte -->
<div class="space-y-6">
<img alt="YourHutopy" class="w-full mb-6" src="/images/hutopymedia/homepage/votrehutopy.png">
<div class="space-y-4">
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les
encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer
leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit
soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
</p>
<div class="flex justify-center">
<v-btn
class="text-white mt-12 flex items-center justify-center round create-btn"
to="/create-creator"
>
Créer ma page
</v-btn>
</div>
</div>
</div>
<!-- Section droite : 4 images -->
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
<div><img alt="Grinding" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/grinding.png"></div>
<div><img alt="Microphone" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/sign.png"></div>
<div><img alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlvr.png"></div>
<div><img alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlarmy.png"></div>
</div>
</div>
</div>
<Footer class="mt-10"></Footer>
</div> </div>
<Footer class="mt-10"></Footer>
</template> </template>
<style scoped> <style scoped>
.box-text{ .box-text {
color: #6A0164; color: #6A0164;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
.inscription-btn-header{ .inscription-btn-header {
color: white; color: white;
background-color: #6A0164; background-color: #6A0164;
font-size: 18px; font-size: 18px;
@@ -132,7 +143,7 @@ import Footer from "@/views/main/Footer.vue";
} }
.inscription-btn-header-outlined{ .inscription-btn-header-outlined {
color: #6A0164; color: #6A0164;
font-size: 18px; font-size: 18px;
height: 40px; height: 40px;
@@ -142,7 +153,7 @@ import Footer from "@/views/main/Footer.vue";
} }
.inscription-btn{ .inscription-btn {
color: white; color: white;
background-color: #6A0164; background-color: #6A0164;
font-size: 18px; font-size: 18px;
@@ -197,30 +208,15 @@ body {
} }
.responsive-banner {
width: 100vw; /* Prend toute la largeur de l'écran */
height: 1100px; /* Hauteur par défaut pour les petits écrans */
object-fit: cover; /* Maintient les proportions de l'image */
}
.header-btn {
}
.logo-image { .logo-image {
margin-left: auto; margin-left: auto;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.header-btn{ .header-btn {
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.support-text { .support-text {
font-size: 3.0rem; /* Ajustez la taille du texte */ font-size: 3.0rem; /* Ajustez la taille du texte */
@@ -231,35 +227,20 @@ body {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 768px */ .header-btn {
}
.header-btn{
margin-top: 60px; margin-top: 60px;
} }
.logo-image { .logo-image {
margin-right: 20px; margin-right: 20px;
margin-left: 0; margin-left: 0;
} }
} }
@media (min-width: 1024px) { .homepagetext {
.responsive-banner {
height: 750px; /* Pour les écrans >= 1024px */
}
}
@media (min-width: 1280px) {
.responsive-banner {
height: 600px; /* Pour les écrans >= 1280px */
}
}
.homepagetext{
color: white; color: white;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
</style> </style>

42
frontend/src/views/main/LoginForm.vue
View File

@@ -1,42 +0,0 @@
<template>
<div class="flex flex-col items-center min-w-[300px] m-4">
<h1 class="text-center text-2xl font-bold mb-5 login-text">Connexion</h1>
<google-login class="w-full"
:callback="googleCallback"
popup-type="TOKEN">
<v-btn density="comfortable" class="mb-2 w-full">
<v-icon left>mdi-google</v-icon>
Google
</v-btn>
</google-login>
</div>
</template>
<script setup>
import {ref} from 'vue';
import {useAuthStore} from '@/stores/authStore.js';
import {GoogleLogin} from "vue3-google-login";
const authStore = useAuthStore();
const errorSnackBar = ref(false);
async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response !== true) {
errorSnackBar.value = true;
}
}
</script>
<style scoped>
.login-text{
@apply text-hOnBackground;
}
</style>

12
frontend/src/views/main/SideBar.vue
View File

@@ -35,7 +35,7 @@ function toggleLanguage() {
<template> <template>
<nav class="container"> <nav class="container">
<div class="mt-4 px-4"> <div class="m-4">
<router-link to="/@hutopy"> <router-link to="/@hutopy">
<img src="/images/hutopy-logo.png" <img src="/images/hutopy-logo.png"
alt="hutopy logo"> alt="hutopy logo">
@@ -98,7 +98,7 @@ function toggleLanguage() {
<button @click="authStore.logout" <button @click="authStore.logout"
class="action"> class="action">
<i class="mdi mdi-logout"></i> <i class="mdi mdi-logout"></i>
{{ t.signOut }} <span class="text-no-wrap">{{ t.signOut }}</span>
</button> </button>
</div> </div>
@@ -110,19 +110,17 @@ function toggleLanguage() {
<style scoped> <style scoped>
.container { .container {
@apply fixed flex flex-col h-full max-w-64; @apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
@apply border-r;
@apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
} }
.profile { .profile {
@apply ml-4 text-lg font-sans capitalize; @apply ml-4 text-lg font-sans capitalize;
@apply font-sans font-semibold; @apply font-semibold;
} }
.action { .action {
@apply capitalize;
@apply w-full flex items-center gap-4 px-4 py-2 rounded; @apply w-full flex items-center gap-4 px-4 py-2 rounded;
@apply capitalize text-base font-sans font-medium;
@apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */ @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
} }

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div class="flex flex-col min-h-screen w-[1024px]">
<!-- Modal --> <!-- Modal -->
<v-dialog v-model="dialogEditFullnameShown" max-width="800px"> <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
<fullname-dialog <fullname-dialog
@@ -20,21 +20,19 @@
</v-dialog> </v-dialog>
<!-- Creator Section (integrated directly) --> <!-- Creator Section (integrated directly) -->
<v-dialog v-model="dialog" max-width="800px"> <v-dialog v-model="dialogShown" max-width="800px">
<div class="card">
<component <component
:is="currentComponent" :is="currentComponent"
:creator="creatorProfileStore.creator" :creator="creatorProfileStore.creator"
@closeRequested="closeDialog" @closeRequested="closeDialog"
></component> ></component>
</div>
</v-dialog> </v-dialog>
<div class="space-y-6 p-4"> <div class="space-y-6 p-4">
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('personnalinformation.informations') }} {{ $t('personnalinformation.informations') }}
</div> </div>
@@ -61,7 +59,7 @@
<!-- Phone & email --> <!-- Phone & email -->
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('personnalinformation.contactdetails') }} {{ $t('personnalinformation.contactdetails') }}
</div> </div>
@@ -77,7 +75,7 @@
<template v-if="creatorProfileStore.creator !== undefined"> <template v-if="creatorProfileStore.creator !== undefined">
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('creatorinfopage.informations') }} {{ $t('creatorinfopage.informations') }}
</div> </div>
<div class="content"> <div class="content">
@@ -107,7 +105,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('creatorinfopage.socialnetwork') }} {{ $t('creatorinfopage.socialnetwork') }}
</div> </div>
<div class="content"> <div class="content">
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
const creatorProfileStore = useCreatorProfileStore(); const creatorProfileStore = useCreatorProfileStore();
const dialog = ref(false); const dialogShown = ref(false);
const currentComponent = ref(''); const currentComponent = ref('');
const componentsMap = { const componentsMap = {
@@ -245,34 +243,22 @@ const componentsMap = {
function requestCancel() { function requestCancel() {
currentComponent.value = null; currentComponent.value = null;
dialog.value = false; dialogShown.value = false;
} }
const openDialog = (component) => { const openDialog = (component) => {
currentComponent.value = componentsMap[component]; currentComponent.value = componentsMap[component];
dialog.value = true; dialogShown.value = true;
}; };
const closeDialog = () => { const closeDialog = () => {
currentComponent.value = null; currentComponent.value = null;
dialog.value = false; dialogShown.value = false;
}; };
</script> </script>
<style scoped> <style scoped>
.card {
@apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
}
.title {
@apply text-lg font-semibold text-hOnSecondary mb-2;
}
.content {
@apply text-base font-semibold text-hOnSurface flex flex-col w-full;
}
.action { .action {
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full; @apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
} }

33
frontend/src/views/profile/account/AliasDialog.vue
View File

@@ -1,10 +1,12 @@
<template> <template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.alias') }}
</v-card-title>
<div class="m-4"> <div class="card">
<div class="card-title">
{{ $t('personnalinformation.alias') }}
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="alias" v-model="alias"
@@ -12,15 +14,22 @@
></v-text-field> ></v-text-field>
</div> </div>
<v-card-actions> <div class="card-actions">
<v-btn variant="plain" @click="requestClose">
<button class="secondary"
@click="requestClose">
Annuler Annuler
</v-btn> </button>
<v-btn color="#A6147D" @click="requestSave">
<button class="primary"
@click="requestSave">
Enregistrer Enregistrer
</v-btn> </button>
</v-card-actions>
</v-card> </div>
</div>
</template> </template>
<script setup> <script setup>

39
frontend/src/views/profile/account/EmailDialog.vue
View File

@@ -1,23 +1,28 @@
<template> <template>
<div class="pb-5 text-2xl">Courriel</div> <div class="card">
<div class="card-title">
Courriel
</div>
<div class="m-4"> <div class="card-entry">
<v-text-field <v-text-field
variant="outlined" v-model="email"
v-model="email" label="Votre courriel"
label="Votre courriel" variant="outlined"
></v-text-field> ></v-text-field>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div> </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="save">
Enregistrer
</v-btn>
</div>
</template> </template>
<script setup> <script setup>

33
frontend/src/views/profile/account/FullnameDialog.vue
View File

@@ -1,16 +1,19 @@
<template> <template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.fullname') }}
</v-card-title>
<div class="m-4"> <div class="card">
<div class="card-title">
{{ $t('personnalinformation.fullname') }}
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="firstname" v-model="firstname"
:label="$t('personnalinformation.firstname')" :label="$t('personnalinformation.firstname')"
></v-text-field> ></v-text-field>
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="lastname" v-model="lastname"
@@ -18,15 +21,21 @@
></v-text-field> ></v-text-field>
</div> </div>
<v-card-actions> <div class="card-actions">
<v-btn variant="plain" @click="requestClose">
<button class="secondary"
@click="requestClose">
Annuler Annuler
</v-btn> </button>
<v-btn color="#A6147D" @click="requestSave">
<button class="primary"
@click="requestSave">
Enregistrer Enregistrer
</v-btn> </button>
</v-card-actions>
</v-card> </div>
</div>
</template> </template>
<script setup> <script setup>

44
frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import { useClient } from '@/plugins/api.js'; import {useClient} from '@/plugins/api.js';
import { ref } from 'vue'; import {ref} from 'vue';
const props = defineProps({ const props = defineProps({
creator: { creator: {
@@ -33,27 +33,33 @@ const cancel = () => {
</script> </script>
<template> <template>
<div class="pb-5 text-2xl">Modifier le Stripe ID</div> <div class="card">
<div class="flex flex-col space-y-4"> <div class="card-title">
<v-text-field Modifier le Stripe ID
variant="outlined" </div>
v-model="stripeId"
label="Stripe Id"
outlined
></v-text-field>
<div class="flex justify-end space-x-4"> <div class="card-entry">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn> <v-text-field
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn> v-model="stripeId"
label="Stripe Id"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style> </style>

40
frontend/src/views/profile/creators/ChangeTitleDialog.vue
View File

@@ -36,28 +36,34 @@ const cancel = () => {
</script> </script>
<template> <template>
<div class="pb-5 text-2xl">Modifier le Titre</div> <div class="card">
<div class="flex flex-col space-y-4">
<v-text-field
variant="outlined"
v-model="title"
label="Titre"
outlined
></v-text-field>
<div class="flex justify-end space-x-4"> <div class="card-title">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn> Modifier le Titre
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn> </div>
<div class="card-entry">
<v-text-field
v-model="title"
label="Titre"
outlined
variant="outlined"
></v-text-field>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style> </style>

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

@@ -59,7 +59,7 @@ const cancel = () => {
<style scoped> <style scoped>
.icon { .icon {
width: 28px; width: 28px;
height: 30px; height: 30px;
fill: #000000; fill: #000000;
@@ -67,96 +67,127 @@ const cancel = () => {
</style> </style>
<template> <template>
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
<div class="flex flex-row align-center"> <div class="card">
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
<v-text-field
variant="outlined"
v-model="facebookUrl"
label="Lien Facebook"
outlined
></v-text-field>
</div>
<div class="card-title">
<div class="flex flex-row align-center"> Reseaux Sociaux
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon> </div>
<v-text-field
variant="outlined" <div class="card-entry">
v-model="instagramUrl" <div class="flex flex-row align-center">
label="Lien Instagram" <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
outlined <v-text-field
></v-text-field> v-model="facebookUrl"
</div> label="Lien Facebook"
outlined
<div class="flex flex-row align-center"> variant="outlined"
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon> ></v-text-field>
<v-text-field </div>
variant="outlined" </div>
v-model="linkedInUrl"
label="Lien LinkedIn" <div class="card-entry">
outlined <div class="flex flex-row align-center">
></v-text-field> <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
</div> <v-text-field
v-model="instagramUrl"
<div class="flex flex-row align-center"> label="Lien Instagram"
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon> outlined
<v-text-field variant="outlined"
variant="outlined" ></v-text-field>
v-model="redditUrl" </div>
label="Lien Reddit" </div>
outlined
></v-text-field> <div class="card-entry">
</div> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
<div class="flex flex-row align-center"> <v-text-field
<div class="w-6 h-6 mb-5 mr-2"> v-model="linkedInUrl"
<XIcon></XIcon> label="Lien LinkedIn"
</div> outlined
<v-text-field variant="outlined"
variant="outlined" ></v-text-field>
v-model="tikTokUrl" </div>
label="Lien TikTok" </div>
outlined
></v-text-field> <div class="card-entry">
</div> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
<div class="flex flex-row align-center"> <v-text-field
<v-icon class="mb-5 mr-2">mdi-web</v-icon> v-model="redditUrl"
<v-text-field label="Lien Reddit"
variant="outlined" outlined
v-model="websiteUrl" variant="outlined"
label="Lien site web" ></v-text-field>
outlined </div>
></v-text-field> </div>
</div>
<div class="flex flex-row align-center"> <div class="card-entry">
<div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2"> <div class="w-6 h-6 mb-5 mr-2">
<XIcon class="icon"></XIcon> <XIcon></XIcon>
</div>
<v-text-field
v-model="tikTokUrl"
label="Lien TikTok"
outlined
variant="outlined"
></v-text-field>
</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
v-model="websiteUrl"
label="Lien site web"
outlined
variant="outlined"
></v-text-field>
</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
v-model="xUrl"
label="Lien X"
outlined
variant="outlined"
></v-text-field>
</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
v-model="youtubeUrl"
label="Lien Youtube"
outlined
variant="outlined"
></v-text-field>
</div>
</div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div> </div>
<v-text-field
variant="outlined"
v-model="xUrl"
label="Lien X"
outlined
></v-text-field>
</div> </div>
<div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
<v-text-field
variant="outlined"
v-model="youtubeUrl"
label="Lien Youtube"
outlined
></v-text-field>
</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="save">Enregistrer</v-btn>
</div>
</template> </template>