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

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

@@ -6,7 +6,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
<template>
<footer class="py-8 flex flex-col gap-8 bg-hBackground">
<footer class="py-8 flex flex-col gap-8">
<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]">
@@ -58,7 +58,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
</router-link>
</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') }}
</div>

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

@@ -4,124 +4,135 @@ import Footer from "@/views/main/Footer.vue";
<template>
<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 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 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 class="pa-4 flex flex-col justify-center md:flex-row">
<div class="py-6">
<div>
<img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"
src="/images/hutopymedia/banners/hutopy.png">
</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 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>
<Footer class="mt-10"></Footer>
</template>
<style scoped>
.box-text{
.box-text {
color: #6A0164;
font-size: 30px;
font-weight: bold;
}
.inscription-btn-header{
.inscription-btn-header {
color: white;
background-color: #6A0164;
font-size: 18px;
@@ -132,7 +143,7 @@ import Footer from "@/views/main/Footer.vue";
}
.inscription-btn-header-outlined{
.inscription-btn-header-outlined {
color: #6A0164;
font-size: 18px;
height: 40px;
@@ -142,7 +153,7 @@ import Footer from "@/views/main/Footer.vue";
}
.inscription-btn{
.inscription-btn {
color: white;
background-color: #6A0164;
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 {
margin-left: auto;
}
@media (min-width: 640px) {
.header-btn{
.header-btn {
margin-top: 25px;
margin-bottom: 25px;
}
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.support-text {
font-size: 3.0rem; /* Ajustez la taille du texte */
@@ -231,35 +227,20 @@ body {
}
@media (min-width: 768px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 768px */
}
.header-btn{
.header-btn {
margin-top: 60px;
}
.logo-image {
margin-right: 20px;
margin-left: 0;
}
}
@media (min-width: 1024px) {
.responsive-banner {
height: 750px; /* Pour les écrans >= 1024px */
}
}
@media (min-width: 1280px) {
.responsive-banner {
height: 600px; /* Pour les écrans >= 1280px */
}
}
.homepagetext{
.homepagetext {
color: white;
font-family: "Roboto", sans-serif;
}
</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>
<nav class="container">
<div class="mt-4 px-4">
<div class="m-4">
<router-link to="/@hutopy">
<img src="/images/hutopy-logo.png"
alt="hutopy logo">
@@ -98,7 +98,7 @@ function toggleLanguage() {
<button @click="authStore.logout"
class="action">
<i class="mdi mdi-logout"></i>
{{ t.signOut }}
<span class="text-no-wrap">{{ t.signOut }}</span>
</button>
</div>
@@ -110,19 +110,17 @@ function toggleLanguage() {
<style scoped>
.container {
@apply fixed flex flex-col h-full max-w-64;
@apply border-r;
@apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
@apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
}
.profile {
@apply ml-4 text-lg font-sans capitalize;
@apply font-sans font-semibold;
@apply font-semibold;
}
.action {
@apply capitalize;
@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 */
}