Big cleanup for styling
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 13 KiB |
@@ -1,26 +1,15 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<div class="flex flex-row">
|
||||
<!-- Side Bar for larger screens -->
|
||||
<div v-if="!smAndDown" class="border-r-1 z-30">
|
||||
<div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
|
||||
|
||||
<div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
|
||||
<side-bar></side-bar>
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<div v-if="smAndDown" class="mobile-container">
|
||||
<div v-if="!brandingStore.loading"
|
||||
class="min-h-screen justify-center items-center bg-hBackground">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="ml-64 w-full flex justify-center items-center ">
|
||||
<router-view></router-view>
|
||||
</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>
|
||||
|
||||
</v-app>
|
||||
@@ -28,20 +17,9 @@
|
||||
|
||||
<script async setup>
|
||||
import SideBar from "@/views/main/SideBar.vue";
|
||||
import { useBrandingStore } from "@/stores/brandingStore.js";
|
||||
import { useDisplay } from "vuetify";
|
||||
|
||||
const { smAndDown } = useDisplay();
|
||||
const brandingStore = useBrandingStore();
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -3,16 +3,59 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--h-background: #1C1C1D;
|
||||
/* Branding Colors */
|
||||
--hutopy-primary: #6B0065;
|
||||
--hutopy-secondary: #A30E79;
|
||||
|
||||
/* UI COLORS */
|
||||
--h-background: #201b20;
|
||||
--h-on-background: #e2e5e9;
|
||||
--h-surface: #252728;
|
||||
--h-surface: #252829;
|
||||
--h-on-surface: #e2e5e9;
|
||||
--h-primary: #231F20;
|
||||
--h-on-primary: #d9e1e1;
|
||||
--h-secondary: #683B1E;
|
||||
--h-on-secondary: #b0b3b8;
|
||||
--h-primary: #1B1B1F;
|
||||
--h-on-primary: #c5c8c8;
|
||||
--h-secondary: #e7e5ea;
|
||||
--h-on-secondary: #000000;
|
||||
--h-tertiary: #272A44;
|
||||
--h-on-tertiary: #bdb6b6;
|
||||
--h-error: #bc2f2f;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,48 @@
|
||||
<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="text-lg text-gray-700 mt-8">
|
||||
<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>
|
||||
<p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
|
||||
<div class="flex min-h-screen items-center">
|
||||
<div class="card justify-items-center">
|
||||
|
||||
<img alt="hutopy login"
|
||||
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 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>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LoginForm from "@/views/main/LoginForm.vue";
|
||||
import { useDisplay } from "vuetify";
|
||||
import {ref, watch} from "vue";
|
||||
import {ref} from 'vue';
|
||||
import {GoogleLogin} from "vue3-google-login";
|
||||
import {useAuthStore} from '@/stores/authStore.js';
|
||||
|
||||
const { smAndDown } = useDisplay();
|
||||
const isMobileView = ref(smAndDown.value);
|
||||
const authStore = useAuthStore();
|
||||
|
||||
watch(smAndDown, (newVal) => {
|
||||
isMobileView.value = newVal;
|
||||
});
|
||||
const errorSnackBar = ref(false);
|
||||
|
||||
async function googleCallback(token) {
|
||||
const response = await authStore.loginWithGoogle(JSON.stringify(token));
|
||||
if (response !== true) {
|
||||
errorSnackBar.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -47,48 +47,55 @@ async function createAccount() {
|
||||
</script>
|
||||
|
||||
<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">
|
||||
Créez votre Hutopy.
|
||||
</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
|
||||
<div class="card-actions">
|
||||
<button
|
||||
:disabled="!canSave"
|
||||
variant="outlined"
|
||||
@click="createAccount"
|
||||
:style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
|
||||
>
|
||||
class="secondary"
|
||||
@click="createAccount">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="primary"
|
||||
:disabled="!canSave"
|
||||
@click="createAccount">
|
||||
Créer
|
||||
</v-btn>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-alert
|
||||
v-if="!!errorMessage"
|
||||
outlined
|
||||
type="error"
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</v-alert>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<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>
|
||||
@@ -7,7 +7,7 @@
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
@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' }}
|
||||
</button>
|
||||
@@ -15,14 +15,14 @@
|
||||
<button
|
||||
v-if="isEditMode && isLoggedIn"
|
||||
@click="cancelEdit"
|
||||
class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
|
||||
class="secondary"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -55,7 +55,8 @@
|
||||
alt="Image principale"
|
||||
class=" max-w-full h-auto cursor-pointer max-h-96"/>
|
||||
</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">
|
||||
X
|
||||
</button>
|
||||
@@ -301,12 +302,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted} from "vue";
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
||||
import {useDisplay} from "vuetify";
|
||||
import {watch} from "vue";
|
||||
import FullscreenImage from "@/views/creators/FullscreenImage.vue";
|
||||
|
||||
const {smAndDown} = useDisplay();
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<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">
|
||||
<v-progress-linear indeterminate></v-progress-linear>
|
||||
</div>
|
||||
<div v-else>
|
||||
<banner></banner>
|
||||
</div>
|
||||
<div class="py-8 flex-grow">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Footer></Footer>
|
||||
<div>
|
||||
<banner></banner>
|
||||
</div>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -23,5 +25,6 @@
|
||||
import Banner from "@/views/creators/Banner.vue";
|
||||
import Footer from "@/views/main/Footer.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
</script>
|
||||
|
||||
@@ -3,22 +3,12 @@ import Footer from "@/views/main/Footer.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
|
||||
|
||||
<!-- <div class="flex justify-center">-->
|
||||
<!-- <img src="/images/hutopy.png"-->
|
||||
<!-- class="rounded-2xl"-->
|
||||
<!-- alt="logo hutopy"-->
|
||||
<!-- width="600">-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="p-4">
|
||||
<div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<Footer></Footer>
|
||||
|
||||
<div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -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 ©{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 */
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 -->
|
||||
<v-dialog v-model="dialogEditFullnameShown" max-width="800px">
|
||||
<fullname-dialog
|
||||
@@ -20,21 +20,19 @@
|
||||
</v-dialog>
|
||||
|
||||
<!-- Creator Section (integrated directly) -->
|
||||
<v-dialog v-model="dialog" max-width="800px">
|
||||
<div class="card">
|
||||
<v-dialog v-model="dialogShown" max-width="800px">
|
||||
<component
|
||||
:is="currentComponent"
|
||||
:creator="creatorProfileStore.creator"
|
||||
@closeRequested="closeDialog"
|
||||
></component>
|
||||
</div>
|
||||
</v-dialog>
|
||||
|
||||
<div class="space-y-6 p-4">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
<div class="card-title">
|
||||
{{ $t('personnalinformation.informations') }}
|
||||
</div>
|
||||
|
||||
@@ -61,7 +59,7 @@
|
||||
<!-- Phone & email -->
|
||||
<div class="card">
|
||||
|
||||
<div class="title">
|
||||
<div class="card-title">
|
||||
{{ $t('personnalinformation.contactdetails') }}
|
||||
</div>
|
||||
|
||||
@@ -77,7 +75,7 @@
|
||||
|
||||
<template v-if="creatorProfileStore.creator !== undefined">
|
||||
<div class="card">
|
||||
<div class="title">
|
||||
<div class="card-title">
|
||||
{{ $t('creatorinfopage.informations') }}
|
||||
</div>
|
||||
<div class="content">
|
||||
@@ -107,7 +105,7 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="title">
|
||||
<div class="card-title">
|
||||
{{ $t('creatorinfopage.socialnetwork') }}
|
||||
</div>
|
||||
<div class="content">
|
||||
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
|
||||
const dialog = ref(false);
|
||||
const dialogShown = ref(false);
|
||||
const currentComponent = ref('');
|
||||
|
||||
const componentsMap = {
|
||||
@@ -245,34 +243,22 @@ const componentsMap = {
|
||||
|
||||
function requestCancel() {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
dialogShown.value = false;
|
||||
}
|
||||
|
||||
const openDialog = (component) => {
|
||||
currentComponent.value = componentsMap[component];
|
||||
dialog.value = true;
|
||||
dialogShown.value = true;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
currentComponent.value = null;
|
||||
dialog.value = false;
|
||||
dialogShown.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<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
|
||||
variant="outlined"
|
||||
v-model="alias"
|
||||
@@ -12,15 +14,22 @@
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn variant="plain" @click="requestClose">
|
||||
<div class="card-actions">
|
||||
|
||||
<button class="secondary"
|
||||
@click="requestClose">
|
||||
Annuler
|
||||
</v-btn>
|
||||
<v-btn color="#A6147D" @click="requestSave">
|
||||
</button>
|
||||
|
||||
<button class="primary"
|
||||
@click="requestSave">
|
||||
Enregistrer
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Courriel</div>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
Courriel
|
||||
</div>
|
||||
|
||||
<div class="m-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="email"
|
||||
label="Votre courriel"
|
||||
></v-text-field>
|
||||
<div class="card-entry">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
label="Votre courriel"
|
||||
variant="outlined"
|
||||
></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 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>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
<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
|
||||
variant="outlined"
|
||||
v-model="firstname"
|
||||
:label="$t('personnalinformation.firstname')"
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="lastname"
|
||||
@@ -18,15 +21,21 @@
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn variant="plain" @click="requestClose">
|
||||
<div class="card-actions">
|
||||
|
||||
<button class="secondary"
|
||||
@click="requestClose">
|
||||
Annuler
|
||||
</v-btn>
|
||||
<v-btn color="#A6147D" @click="requestSave">
|
||||
</button>
|
||||
|
||||
<button class="primary"
|
||||
@click="requestSave">
|
||||
Enregistrer
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { ref } from 'vue';
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {ref} from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
@@ -33,27 +33,33 @@ const cancel = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Modifier le Stripe ID</div>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="stripeId"
|
||||
label="Stripe Id"
|
||||
outlined
|
||||
></v-text-field>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
Modifier le Stripe ID
|
||||
</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 class="card-entry">
|
||||
<v-text-field
|
||||
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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.space-y-4 > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -36,28 +36,34 @@ const cancel = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Modifier le Titre</div>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="title"
|
||||
label="Titre"
|
||||
outlined
|
||||
></v-text-field>
|
||||
<div class="card">
|
||||
|
||||
<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 class="card-title">
|
||||
Modifier le Titre
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.space-y-4 > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,7 +59,7 @@ const cancel = () => {
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
|
||||
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
fill: #000000;
|
||||
@@ -67,96 +67,127 @@ const cancel = () => {
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<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">
|
||||
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="instagramUrl"
|
||||
label="Lien Instagram"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="linkedInUrl"
|
||||
label="Lien LinkedIn"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="redditUrl"
|
||||
label="Lien Reddit"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<div class="w-6 h-6 mb-5 mr-2">
|
||||
<XIcon></XIcon>
|
||||
</div>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="tikTokUrl"
|
||||
label="Lien TikTok"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-web</v-icon>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="websiteUrl"
|
||||
label="Lien site web"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
<div class="flex flex-row align-center">
|
||||
|
||||
<div class="w-6 h-6 mb-5 mr-2">
|
||||
<XIcon class="icon"></XIcon>
|
||||
<div class="card-title">
|
||||
Reseaux Sociaux
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
|
||||
<v-text-field
|
||||
v-model="facebookUrl"
|
||||
label="Lien Facebook"
|
||||
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-instagram</v-icon>
|
||||
<v-text-field
|
||||
v-model="instagramUrl"
|
||||
label="Lien Instagram"
|
||||
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-linkedin</v-icon>
|
||||
<v-text-field
|
||||
v-model="linkedInUrl"
|
||||
label="Lien LinkedIn"
|
||||
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-reddit</v-icon>
|
||||
<v-text-field
|
||||
v-model="redditUrl"
|
||||
label="Lien Reddit"
|
||||
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></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>
|
||||
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="xUrl"
|
||||
label="Lien X"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user