Merge branch 'main' into feature/oauth
This commit is contained in:
Kamigen
@@ -1,2 +1,2 @@
|
||||
VITE_API_URL=todo
|
||||
VITE_API_URL=https://hutopy.azurewebsites.net/
|
||||
VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 931 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 640 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
|
||||
<image x="4" y="6" width="92" height="84" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABUCAYAAAAPvFA1AAAF/UlEQVR4nO2dW0gjVxjHk3hh1ULt1rQv3qrVgFC0Col5MYIiGi8PhaQJBvEeLG0KsVraLn0oxZdSWCi0bEzqlVLSJxFEsA9KBaMLKVJ9iGBTjRi7rhUvUdFcygk7YZNMaozfzJxOzg+yyC755js/3PCfb05mBIFAAOvX4ODgtMvlCtBxdnYWWFxcvB4eHv4F93VQL+wbjCU7kpmZmQuNRlNIhN//FTeLi4s3Wq32TZzXIxLwCIVCkarT6f5Sq9XpuK6KV8IRSqXyQWVl5VMMWqGHTx8pFB6PJ9DT09NNPlJYIjMzU6DVan/AsTdeCkfU1dWlGwyGbzFoJQzeCke0tbV9iEEbYfBaeH19fXpvb28vBq2E4LVwREVFxSMM2gjBe+FKpTJfrVanYNBKEN4LLyoqEmZnZ+sxaCUI74UjcnNzdRi0ESQphJeWlpZh0EaQpBBeXFz8CgZtBEkK4WKxGJt1Yi28vb29CKKOWCwWQtSBAGvhEolkGqKO1+uFKAMC1sIbGxulEHX29vYCEHUgwFa4Xq83SKVSkBOW/f39G4g6EGArXCaTfQFVy+l0/gNV675gKVytVj9sbW19A6qe0+nE5goQlsJLSkp+EovFYPXcbvcTsGL3RIgu++AG2mtSW1ubBtHW3t4eOrUnsTAW3d3d79fU1IDIRiwvL5+CN3kPsBNeVVX1jUgE19b6+vpvYMUAwEo42k/S1taWB1UPnfC4XK7PoOpBgJXwgoKCsbw8MN+C1dVV7/T09B9gBQHASnhtbe17kPVWV1f/hKwHATbCOzo6FA0NDQ8gazocDhNkPQiwEV5eXv4kLQ0snATj4PHx8WOwglAYjcaxnZ2dRHaU3Qm07XhwcHCSbvuXSqVK2dra8jPeBAucn58HNjc3/RaL5Vl/f78hcq2C3d1d1pp5cawo4QaD4TF3ipjD6/UGxsbGnqtUqoch4WjjI8tECbdarWd8FE6Bzpwp6SL0X53LjzSdTvdOS0sLNtccmUChUKQ1NTU5UGkknNNZcVlZ2VhGRgaXLbBCR0dHTn9//0cit9vt4bKR5ubmd7k8PlukpKQIpFLpI9Hh4eEhl42Ul5cnxc4BhFwuF4uOjo6cGPSSFOTn5wtFJycn9mQXwRZomCY6PT39NTmWyz1Op9Mvurq6Wrq8vEx2F6xgt9sPRVar1YfOAJNgvZyCTnpsNtvnwYTAdRZPBsxm899ms/nHoHCuszjfWVpaullYWJCgZaaiP15k8deSXQwTTE1NHc/Ozr5ltVpPBNQ8nGRx5ri5ufFSsgWUcJLFmaOrq0uMZijUAYLCSRZnDqFQiE7pv6QOEBROsjizyGSy16kDhLa6ORwOv0QiYWNLWOQxeH8O4PF4BFlZWcF1hyZ1JIszx/X1dah2SDjJ4syBZihU8ZBwrufifAbNUKjlhYSTLM4M1AyFKh4STrI4M1AzFKp4SDjJ4vC8PEOhSKV+oLJ4MlxBZ4PIGQpF6DeczMVhiZyhUIRdMSdZHI7IGQpFmHCSxeGInKFQhAknWRyWl2coFGHCSRaHpaCgIGo2FSacZHFY6L4DGyacZHFY6FJfmHAyF4fFZrMdRRYME06yOBx+vx8J/yqyYNTOVZLFYZicnDwymUzfRRaLEk6y+P1Bj0aYm5srpSuUGvkXZI9K4qCPEfSbjWRbrVbam+JE/YaTLJ4Y29vbgYGBgY87OztzYskW0AknWTwxCgsLhX6//+q2N0cJJ1k8MdB3eORy+de3vTlKOMniiVNdXZ1z25tpb8HE8B4V3u5Lubi4QA/8+E9vtN8gI1k8MeK5AyitcJLFEyOeb3XTCidz8cRYWVl5dtsbaYWTLH53fD6fYG1tLWp2EgmtcDaz+MrKio+tYzHJxMTEc5PJ9P1th6AVzmYWHx8f//TkJOri9v8KNDuZn59/O66eY92h5+DgAPy+IbFuUKPX6z+J90GlOIFuQGOxWA5VKtWr8T78LuY/DA0N/Yzuuw0p22g0TsQ6nkajyRsZGfndbrf7OLhpTtygxwJvbGz4R0dHD/r6+j6409MGAwHBv2b/H8RKg2wvAAAAAElFTkSuQmCC"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 53 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 741 KiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 852 KiB After Width: | Height: | Size: 852 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 724 KiB After Width: | Height: | Size: 724 KiB |
|
Before Width: | Height: | Size: 975 KiB After Width: | Height: | Size: 975 KiB |
|
Before Width: | Height: | Size: 791 KiB After Width: | Height: | Size: 791 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 143 KiB |
|
Before Width: | Height: | Size: 224 KiB After Width: | Height: | Size: 224 KiB |
|
Before Width: | Height: | Size: 893 KiB After Width: | Height: | Size: 893 KiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 192 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container class=" footer-donate-container">
|
||||
|
||||
<h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
|
||||
|
||||
|
||||
<v-text-field label="Montant"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-text-field label="Message"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
|
||||
size="x-large" block>Faire un don</v-btn>
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -2,45 +2,64 @@
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
|
||||
<!-- Version pour ordinateur -->
|
||||
<v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
|
||||
<!-- PC Version -->
|
||||
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
|
||||
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
|
||||
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<div class="d-flex align-center">
|
||||
|
||||
<!-- Profile picture in the top right corner -->
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
class="header-profile-icon mr-2" alt="Logo">
|
||||
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
|
||||
ANONYME
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<v-col cols="auto" class="d-flex align-end justify-end">
|
||||
<router-link :to="{ name: 'yourprofile' }">
|
||||
<v-row class="d-flex align-center">
|
||||
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
|
||||
<h1 class="mb-0 text-h5">ANONYME</h1>
|
||||
</v-row>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Dropdown Menu Profile/Connection -->
|
||||
<v-list style="padding: 0;">
|
||||
<v-list-item>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn class="full-width-btn" flat>Inscription</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
<!-- <v-list-item>
|
||||
<v-btn class="full-width-btn" flat>Mon profil</v-btn>
|
||||
</v-list-item>-->
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
|
||||
<!-- Version pour mobile -->
|
||||
<!-- Mobile version -->
|
||||
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
|
||||
<v-app-bar app>
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-row>
|
||||
<v-col cols="11" class="d-flex align-center justify-center">
|
||||
<img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
|
||||
</v-col>
|
||||
|
||||
<!-- Logo Top bar -->
|
||||
<img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Left-side Menu -->
|
||||
<v-navigation-drawer v-model="drawer" temporary>
|
||||
<v-list>
|
||||
<v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
|
||||
<v-list-item subtitle="email" title="ANONYME">
|
||||
<template v-slot:prepend>
|
||||
<img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
class="mobile-profile-picture mini-profile-picture " alt="Avatar">
|
||||
</template>
|
||||
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<!-- Left-side Button -->
|
||||
<v-divider></v-divider>
|
||||
<v-list density="compact" nav>
|
||||
<h1 class="h1-navigation">Navigation</h1>
|
||||
@@ -50,64 +69,31 @@
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
|
||||
</RouterLink>
|
||||
<v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
|
||||
<v-divider style="margin-top: 20%;"></v-divider>
|
||||
<h1 class="h1-navigation">Outils</h1>
|
||||
<v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
|
||||
<v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
|
||||
value="logout"></v-list-item>
|
||||
|
||||
<!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
|
||||
<!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
|
||||
<!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
|
||||
value="logout"></v-list-item>-->
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
|
||||
|
||||
<main class="px-8 py-3 ">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { auth } from '@/stores/auth.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const store = auth();
|
||||
const router = useRouter();
|
||||
|
||||
const logout = () => {
|
||||
store.logout();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
const user = store.user;
|
||||
|
||||
import { ref } from 'vue';
|
||||
const drawer = ref(false);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageSrc: '../../../images/guillaimeaime3x.png',
|
||||
drawer: false,
|
||||
items: [
|
||||
{ title: 'Item 1' },
|
||||
{ title: 'Item 2' },
|
||||
{ title: 'Item 3' },
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.full-width-btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
@@ -123,7 +109,6 @@ export default {
|
||||
height: 40px;
|
||||
border-radius: px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
/* Ajouter une ombre à la photo */
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
@@ -151,7 +136,6 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
|
||||
|
||||
@@ -1,41 +1,48 @@
|
||||
<!--lg="8" md="10" sm="10" xs="10" -->
|
||||
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<v-container style="background-color: #f4f4f4;">
|
||||
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
|
||||
class="footer-align">
|
||||
|
||||
<!-- Hutopy footer logo -->
|
||||
<v-container style="background-color: #f4f4f4">
|
||||
<v-row justify="center" style="margin-top: 30px;">
|
||||
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
|
||||
<v-row>
|
||||
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="auto">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="icons" src="../../images/facebookiconblackpink.png" alt="Description image 2">
|
||||
</a>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<img src="../../images/instagramblackpink.png" alt="Description image 3" class="icons">
|
||||
</a>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="../../images/xblackpink.png" alt="Description image 1" class="icons">
|
||||
<v-img src="/images/hutopymedia/banners/hutopy.png" class="hutopy-footer-picture"></v-img>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Hutopy Social network links -->
|
||||
<v-container>
|
||||
<!-- Facebook link -->
|
||||
<v-row justify="center">
|
||||
<v-col cols="auto">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="icons" src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Description image 2">
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<!-- Instagram link -->
|
||||
<v-col cols="auto">
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Description image 3" class="icons">
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<!-- Need X Account -->
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/hutopymedia/icons/pink/xpink.png" alt="Description image 1" class="icons">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Loop for social network links -->
|
||||
<v-container class="text-center" style="flex-grow: 1;">
|
||||
<router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
|
||||
class="mx-2 text-decoration-none text-black">
|
||||
@@ -47,9 +54,6 @@
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</v-container>
|
||||
</body>
|
||||
@@ -57,33 +61,30 @@
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
'Aide & Contact',
|
||||
'Conditions générales',
|
||||
'Politique des contenus',
|
||||
'conditions utilisation',
|
||||
'anti-exploitation',
|
||||
],
|
||||
linkRoutes: {
|
||||
'Aide & Contact': { name: 'helpandcontact' },
|
||||
'Conditions générales': { name: 'termsandconditions' },
|
||||
'Politique des contenus': { name: 'contentpolicy' },
|
||||
'Programme Ambassadeurs': { name: 'ambassadorprogram' },
|
||||
'conditions utilisation': { name: 'conditionofuse' },
|
||||
'anti-exploitation': { name: 'antiexploitation' },
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
getLinkUrl(link) {
|
||||
return this.linkRoutes[link] || { name: 'home' };
|
||||
},
|
||||
},
|
||||
<script setup>
|
||||
const links = [
|
||||
'Aide & Contact',
|
||||
'FAQ',
|
||||
'Guide pour les créateurs',
|
||||
'Conditions générales',
|
||||
'Politique de Contenu',
|
||||
'À Propos'
|
||||
];
|
||||
|
||||
const linkRoutes = {
|
||||
'Aide & Contact': { name: 'helpandcontact' },
|
||||
'FAQ': { name: 'FAQ' },
|
||||
'Guide pour les créateurs': { name: 'guideforcreators' },
|
||||
'Conditions générales': { name: 'termsandconditions' },
|
||||
'Politique de Contenu': { name: 'contentpolicy' },
|
||||
'À Propos': { name: 'about' }
|
||||
};
|
||||
|
||||
// If broken link, redirect to home page.
|
||||
const getLinkUrl = (link) => linkRoutes[link] || { name: 'home' };
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
width: 50px;
|
||||
@@ -98,16 +99,11 @@ export default {
|
||||
}
|
||||
|
||||
.custom-footer {
|
||||
|
||||
padding: 10px;
|
||||
/* Ajoute un rembourrage intérieur de 10px autour du contenu du footer * 107, 0, 101, 1/
|
||||
margin: 0;
|
||||
/* Réinitialise les marges à zéro */
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
/* Annule la marge de v-app */
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -115,13 +111,11 @@ footer {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* Pour aligner le contenu verticalement */
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
}
|
||||
|
||||
footer a:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
/* Ajoute de l'espace entre les images et les liens */
|
||||
}
|
||||
|
||||
.footertextcolor {
|
||||
@@ -136,9 +130,8 @@ footer a:not(:last-child) {
|
||||
|
||||
.custom-color-button {
|
||||
background-color: rgb(255, 0, 0);
|
||||
/* Your custom color */
|
||||
color: white;
|
||||
/* Text color */
|
||||
|
||||
font-size: 1.5rem;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
@@ -148,25 +141,12 @@ footer a:not(:last-child) {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 150px) and (max-width: 598px) {
|
||||
|
||||
.hutopy-footer-picture {
|
||||
|
||||
|
||||
min-width: 200px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 999px) {}
|
||||
|
||||
@media (min-width: 1000px) and (max-width: 1279px) {}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {}
|
||||
|
||||
@media (min-width: 2559px) {}
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.h1-inscription-beta-Inscrivez-vous {
|
||||
font-size: 20px;
|
||||
/* Taille de la police de 20 pixels */
|
||||
font-weight: bold;
|
||||
/* Texte en gras */
|
||||
text-align: center;
|
||||
/* Centrer le texte */
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
|
||||
|
||||
<h1 class="h1profilemobile">Podcast #01</h1>
|
||||
|
||||
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
<iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
|
||||
</iframe>
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">
|
||||
Voici mon nouveau podcast!
|
||||
|
||||
</p>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.vcard-descriptions-mobile {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.h1profilemobile {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-date {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@ export default function(app) {
|
||||
// depending on the environment, the correct file will be used
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
timeout: 2000,
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
const requestInterceptor = (config) => {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
|
||||
import AmbassadorProgram from '@/views/tos/AmbassadorProgram.vue'
|
||||
import AntiExploitation from '@/views/tos/AntiExploitation.vue'
|
||||
import ConditionsOfUse from '@/views/tos/ConditionsOfUse.vue'
|
||||
import About from '@/views/tos/About.vue'
|
||||
import ContentPolicy from '@/views/tos/ContentPolicy.vue'
|
||||
import FAQ from '@/views/tos/FAQ.vue'
|
||||
import GuideForCreators from '@/views/tos/GuideForCreators.vue'
|
||||
import HelpAndContact from '@/views/tos/HelpAndContact.vue'
|
||||
import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
@@ -10,9 +9,11 @@ import LoginView from '../views/LoginView.vue'
|
||||
import SignupView from '../views/SignupView.vue'
|
||||
import ContactView from '../views/main/ContactView.vue'
|
||||
import CreatorFolio from '../views/main/CreatorFolio.vue'
|
||||
import PaymentCompleted from '../views/PayementCompleted.vue'
|
||||
import HomeView from '../views/main/HomeView.vue'
|
||||
import YourProfile from '../views/main/YourProfile.vue'
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@@ -22,10 +23,16 @@ const router = createRouter({
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/creatorfolio',
|
||||
path: '/guillaumeaime',
|
||||
name: 'creatorfolio',
|
||||
component: CreatorFolio
|
||||
},
|
||||
|
||||
{
|
||||
path: '/paymentcompleted',
|
||||
name: 'PayementCompleted',
|
||||
component: PaymentCompleted
|
||||
},
|
||||
{
|
||||
path: '/yourprofile',
|
||||
name: 'yourprofile',
|
||||
@@ -46,11 +53,6 @@ const router = createRouter({
|
||||
name: 'login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/roadmap',
|
||||
name: 'roadmap',
|
||||
component: ProjectRoadmap
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
@@ -72,19 +74,20 @@ const router = createRouter({
|
||||
component: ContentPolicy
|
||||
},
|
||||
{
|
||||
path: '/ambassadorprogram',
|
||||
name: 'ambassadorprogram',
|
||||
component: AmbassadorProgram
|
||||
path: '/faq',
|
||||
name: 'FAQ',
|
||||
component: FAQ
|
||||
},
|
||||
{
|
||||
path: '/conditionofuse',
|
||||
name: 'conditionofuse',
|
||||
component: ConditionsOfUse
|
||||
path: '/guideforcreators',
|
||||
name: 'guideforcreators',
|
||||
component: GuideForCreators
|
||||
},
|
||||
|
||||
{
|
||||
path: '/antiexploitation',
|
||||
name: 'antiexploitation',
|
||||
component: AntiExploitation
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: About
|
||||
},
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
<v-row align="center" justify="center">
|
||||
<!-- Header -->
|
||||
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
|
||||
<img class="login-picture" src="../../images/loginpage/loginhutopy.png">
|
||||
<img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
|
||||
<!-- Connexion-objects -->
|
||||
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
|
||||
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
|
||||
vous connecter à votre compte?</h2>
|
||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
|
||||
compte?</h2>
|
||||
<v-card-text>
|
||||
<v-form class="label-mail-password">
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
||||
@@ -43,9 +43,7 @@
|
||||
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<h2 class="text-center display-3 h2pasinscrit">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065" class="inscriptionbtn"
|
||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
@@ -63,7 +61,7 @@
|
||||
<div class="sm:hidden flex flex-col items-center justify-start"
|
||||
style="background-color: #f4f4f4; height: 100vh;">
|
||||
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
|
||||
src="../../images/loginpage/loginhutopy.png">
|
||||
src="/images/hutopymedia/loginpage/loginhutopy.png">
|
||||
|
||||
<h1 class="h1-connexion">Connexion</h1>
|
||||
<h2 class="h2-connexion">Comment souhaitez-vous
|
||||
@@ -93,10 +91,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
@@ -119,8 +114,8 @@ let errorSnackBar = ref(false);
|
||||
async function login() {
|
||||
// TODO: Make the store handle errors
|
||||
try {
|
||||
await store.login(api, user.value.email, user.value.password)
|
||||
router.push('/');
|
||||
await store.login(api, user.value.email, user.value.password)
|
||||
router.push('/');
|
||||
} catch (error) {
|
||||
errorSnackBar.value = true;
|
||||
}
|
||||
@@ -146,7 +141,6 @@ const googleCallback = (response) => {
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 300px) {
|
||||
.h1-connexion {
|
||||
font-size: 2em;
|
||||
|
||||
44
src/views/PayementCompleted.vue
Normal file
44
src/views/PayementCompleted.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<!-- Icon Check -->
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Informations -->
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
<v-card-text style="font-weight: 600;">
|
||||
Paiement complété
|
||||
</v-card-text>
|
||||
<v-card-text style="margin-top: -24px;">
|
||||
Transaction : #
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text style="font-size: 1.2rem; text-align: center;">
|
||||
Merci de supporter
|
||||
</v-card-text>
|
||||
<v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
|
||||
Guillaume Mousseau
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Ok btn -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn @click="this.$router.push({path: '/guillaumeaime'})">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -1,65 +1,73 @@
|
||||
<template>
|
||||
<div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
|
||||
<div class="main-left">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
||||
<v-app style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
|
||||
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
|
||||
|
||||
<p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click
|
||||
here</RouterLink> to log in! </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-right">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg">
|
||||
<form class="space-y-6">
|
||||
|
||||
<div>
|
||||
<label>Name</label> <br>
|
||||
<input type="text" placeholder="Your full name"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>E-mail</label> <br>
|
||||
<input type="email" placeholder="Your e-mail adress"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Password</label> <br>
|
||||
<input type="password" placeholder="Your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Repeat Password</label> <br>
|
||||
<input type="password" placeholder="Repeat your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Sign up</button>
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols=6 align="center">
|
||||
<v-img class="login-picture" max-width="500" src="/images/hutopymedia/loginpage/loginhutopy.png"
|
||||
style="margin-top: 100px; margin-bottom: 50px"></v-img>
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||
<h1 class="mb-6 text-2xl font-bold">Sign up</h1>
|
||||
<p class="mb-6 texte-gray-500">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
|
||||
unknown printer
|
||||
took a galley of type and scrambled it to make a type specimen book. It has survived not
|
||||
only
|
||||
five centuries, but also the leap into electronic typesetting, remaining essentially
|
||||
unchanged. It
|
||||
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
|
||||
passages,
|
||||
and more recently with desktop publishing software like Aldus PageMaker including versions
|
||||
of Lorem
|
||||
Ipsum.
|
||||
</p>
|
||||
<p class="font-bold">
|
||||
Already have an account?
|
||||
<RouterLink :to="{ 'name': 'login' }" class="underline">Click here</RouterLink> to log in!
|
||||
</p>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" md="6" lg="6">
|
||||
<div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
|
||||
<form class="space-y-6">
|
||||
<div>
|
||||
<label>Name</label> <br>
|
||||
<input type="text" placeholder="Your full name"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>E-mail</label> <br>
|
||||
<input type="email" placeholder="Your e-mail adress"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label> <br>
|
||||
<input type="password" placeholder="Your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label>Repeat Password</label> <br>
|
||||
<input type="password" placeholder="Repeat your password"
|
||||
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg">Sign up</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { RouterLink } from "vue-router";
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div></template>
|
||||
<style></style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<v-container>
|
||||
|
||||
<v-row>
|
||||
<v-text-field label="Message"
|
||||
<v-text-field label="Message" v-model="tipMessage"
|
||||
style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
|
||||
</v-text-field>
|
||||
</v-row>
|
||||
@@ -54,6 +54,7 @@ import { onMounted, ref } from "vue";
|
||||
let stripe = null;
|
||||
const client = useClient();
|
||||
const price = ref(0);
|
||||
const tipMessage = ref("");
|
||||
const isPaymentDialogActive = ref(false);
|
||||
var checkout;
|
||||
|
||||
@@ -69,7 +70,9 @@ const fetchClientSecret = async () => {
|
||||
|
||||
async function createCheckoutSession() {
|
||||
let clientSecret = await client.post('/api/Stripe', {
|
||||
price: price.value * 100
|
||||
amount: (price.value * 100),
|
||||
tipMessage: tipMessage.value,
|
||||
creatorId: "5b122430-442a-4967-98b6-6c7787c70c91"
|
||||
});
|
||||
|
||||
let secret = clientSecret["data"];
|
||||
|
||||
@@ -4,14 +4,13 @@
|
||||
<div class="hutopy-backgroud-color">
|
||||
<div class="hidden-xs flex-col items-center page-margin">
|
||||
<v-container>
|
||||
|
||||
<!-- Banner -->
|
||||
<v-row class="text-center align-center row-between-logo-text home-row">
|
||||
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
|
||||
|
||||
|
||||
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||
|
||||
|
||||
<img class="hutopy-header-image" src="/images/hutopymedia/banners/hutopy.png">
|
||||
<v-col class="ml-0 text-left ">
|
||||
<!-- Home btn -->
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
|
||||
</RouterLink>
|
||||
@@ -19,34 +18,32 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Home btn -->
|
||||
<v-container class="row-between-logo-text">
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||
<v-row>
|
||||
|
||||
<!-- Contact image -->
|
||||
<v-col>
|
||||
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||
<img class="contact-image" src="/images/hutopymedia/contactpage/contactpicture.png">
|
||||
</v-col>
|
||||
<!-- Form Information -->
|
||||
<v-col class="row-joinus">
|
||||
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
|
||||
<v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
||||
<v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
||||
<v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>Envoyez </v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>Envoyez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<v-row>
|
||||
<v-container>
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
@@ -80,38 +77,46 @@
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!-- Offset -->
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile low dimensions -->
|
||||
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
||||
|
||||
<!-- Offset -->
|
||||
<v-spacer style="margin-bottom: 25px;"></v-spacer>
|
||||
<v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
||||
|
||||
<!-- Contact image -->
|
||||
<v-img src="/images/hutopymedia/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
||||
style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
|
||||
|
||||
<!-- Title -->
|
||||
<v-row class="labelgroup">
|
||||
<v-col cols="12">
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
|
||||
<!-- Form Information -->+
|
||||
<v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux ?" placeholder="Écrivez votre message ici" rows="3"
|
||||
<v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>
|
||||
Envoyez
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>
|
||||
Envoyez
|
||||
</v-btn>
|
||||
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
@@ -143,15 +148,72 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-dialog v-model="showModal" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
|
||||
<p style="font-size: 2rem; font-weight: 600">INFORMATIONS REÇU</p>
|
||||
</v-card-title>
|
||||
<v-icon class="mx-auto" style="font-size: 10em; color: #a30e79;">mdi-emoticon-happy</v-icon>
|
||||
<v-card-text style="margin-top: 40px; font-size: 1.3rem; margin-bottom: 50px;" class="text-justify">
|
||||
Merci de vous intéresser à notre projet. Lorsque nous serons prêts, nous vous contacterons afin que vous
|
||||
puissiez vous inscrire en primeur sur la plateforme pour nous aider à la développer. Chaque étape du
|
||||
développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end" style="margin-right: 20px;">
|
||||
<v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
|
||||
const client = useClient();
|
||||
|
||||
const showModal = ref(false);
|
||||
const name = ref("");
|
||||
const emailAddress = ref("");
|
||||
const reasonToJoin = ref("");
|
||||
const socialNetworkAccount = ref("");
|
||||
|
||||
//const firstName = name.value.split(" ")[0];
|
||||
//const lastName = name.value.split(" ")[1];
|
||||
|
||||
async function sendForm() {
|
||||
try {
|
||||
const requestBody = {
|
||||
FirstName: name.value,
|
||||
LastName: name.value,
|
||||
EmailAddress: emailAddress.value,
|
||||
PhoneNumber: "",
|
||||
SocialNetworkAccount: socialNetworkAccount.value,
|
||||
ReasonToJoin: reasonToJoin.value
|
||||
};
|
||||
|
||||
await client.post('/api/JoinUs', requestBody);
|
||||
showModal.value = true;
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<v-container>
|
||||
<v-container>
|
||||
<div>
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator "
|
||||
style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
|
||||
</div>
|
||||
|
||||
<v-countainer >
|
||||
<v-card style="width: 100%; height: 600px;">
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
</v-countainer>
|
||||
</v-container>
|
||||
</v-container>
|
||||
@@ -1,776 +0,0 @@
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
|
||||
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
|
||||
|
||||
<!-- Banner + Profile-->
|
||||
<div style="margin-top: -1.6%;">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
|
||||
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-container class="pa-0" style="margin-left: 1%; margin: 0;">
|
||||
<v-row no-gutters class="justify-center">
|
||||
<!-- Left menu -->
|
||||
<v-col cols="2" class="mx-0" style="min-width: 300px;">
|
||||
|
||||
|
||||
<v-container style="position: sticky; top: 0;">
|
||||
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
|
||||
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-account-plus</v-icon>
|
||||
<div>Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%; ">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card style="border-radius: 30px;">
|
||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||||
<v-icon left size="48">mdi-wallet</v-icon>
|
||||
<v-toolbar title="PORTEFEUILLE"
|
||||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
||||
</div>
|
||||
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="7">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
||||
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
||||
|
||||
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-card style="border-radius: 25pxo; margin-top: 3%; height: 30px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">T#</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
||||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25pxo; margin-top: .5%; max-height: 450px;">
|
||||
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
|
||||
|
||||
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</v-card>
|
||||
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- center menu -->
|
||||
|
||||
<v-col cols="7" class="mx-0">
|
||||
|
||||
|
||||
<v-container style="min-width: 800px ;">
|
||||
|
||||
<v-col>
|
||||
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
|
||||
style="margin-left: 0%; width: 25%;"></v-img>
|
||||
</v-col>
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-top: -18%;">
|
||||
<v-container
|
||||
style="border-top: 4px solid #a40e79; border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #cc6f91;border-top-right-radius: 25px;">
|
||||
<v-row>
|
||||
<v-col cols="0">
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<h1 style="margin-bottom: -1%; font-size: 2rem; color: white;">Guillaume Mousseau </h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3">
|
||||
<v-row>
|
||||
|
||||
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/facebookicon.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/instawhite.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/xicon.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/tiktok.png"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container
|
||||
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; margin-bottom: -2%; background-color: #aedcde;">
|
||||
<v-row>
|
||||
<v-col cols="0">
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<h1 style="margin-bottom: -5%; font-size: 2rem; color: white;">Créateur de contenus</h1>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-row>
|
||||
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/icons/messenger.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/bookmark.png"></v-img>
|
||||
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/share.png"></v-img>
|
||||
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container
|
||||
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #aedcde;border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;">
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="10">
|
||||
<v-expansion-panels>
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel
|
||||
style=" margin-left: 2%; font-size: 1.2rem; background-color: #0baab2; color: white;"
|
||||
:key="i"
|
||||
text="Ma mission est claire : mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
|
||||
title="À propos"></v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
PODCAST #01</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2">
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
|
||||
<iframe style="margin-left: 2.1%;" width=96% height="650px"
|
||||
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
|
||||
mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
|
||||
histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
|
||||
créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
|
||||
derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
|
||||
comprises. Et toi, quel est ton objectif pour cette année?</p>
|
||||
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<v-row style="z-index: 200;">
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
J'aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
|
||||
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2">
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
|
||||
<v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
|
||||
mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
|
||||
histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
|
||||
créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
|
||||
derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
|
||||
comprises. Et toi, quel est ton objectif pour cette année?</p>
|
||||
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<v-row style="z-index: 200;">
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
J'aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Right menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
|
||||
<!-- tips menu -->
|
||||
<v-card
|
||||
style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
|
||||
<v-container class="text-center d-flex align-center justify-center"
|
||||
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
|
||||
<h1 style="font-size: 2rem; color: white; margin: 0; text-orientation: upright;">
|
||||
Je soutiens!
|
||||
</h1>
|
||||
</v-container>
|
||||
|
||||
<v-row style=" margin-top: 30px; ">
|
||||
<v-col cols="6" style="background-color: #f4f4f4">
|
||||
<v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field label="Montant ($)"
|
||||
style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="6" class="d-flex align-center">
|
||||
<v-btn
|
||||
style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
|
||||
label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- DonateMobile-->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
|
||||
<v-container style="width: 105%;">
|
||||
<v-card class="vcard-descriptions-mobile">
|
||||
<h1 class="h1profilemobile">Ma mission</h1>
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
|
||||
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le côté humain
|
||||
des entrepreneurs. Chaque
|
||||
service,
|
||||
chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif
|
||||
est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs
|
||||
et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui
|
||||
méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?</p>
|
||||
|
||||
</v-card>
|
||||
|
||||
<SimpleVideoCard> </SimpleVideoCard>
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
|
||||
|
||||
<h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
|
||||
|
||||
|
||||
|
||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
|
||||
don</v-btn>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
|
||||
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayMenu: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*Banner */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-banner {
|
||||
|
||||
width: 90%;
|
||||
/* 100% de la largeur de la fenêtre visible */
|
||||
margin: 0;
|
||||
/* Enlève les marges par défaut */
|
||||
z-index: -1000;
|
||||
/* Met l'image en arrière-plan */
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Profile */
|
||||
|
||||
.image-profile {
|
||||
border-radius: 50%;
|
||||
|
||||
margin-left: 15%;
|
||||
margin-top: -7%;
|
||||
border: 4px solid white;
|
||||
z-index: 200;
|
||||
|
||||
}
|
||||
|
||||
.description-text {
|
||||
font-size: 1.3rem;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
||||
/*LeftMenu */
|
||||
.icon-size {
|
||||
font-size: 30px;
|
||||
/* ou toute autre taille de votre choix */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sticky-column {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.profile-picture-position {
|
||||
margin-top: 25;
|
||||
}
|
||||
|
||||
.label-paiement-color {
|
||||
color: rgba(163, 14, 121, 0.5);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
/* Couleur de fond */
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
/* Ombre */
|
||||
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
/* Couleur de l'en-tête */
|
||||
padding: 10px;
|
||||
/* Marge intérieure */
|
||||
display: flex;
|
||||
/* Utilisation de flexbox */
|
||||
justify-content: space-between;
|
||||
/* Alignement des éléments sur l'en-tête */
|
||||
margin: 0 -24px 0;
|
||||
|
||||
}
|
||||
|
||||
.tips-h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.test-color {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.label-tips {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.menu-creator-position {
|
||||
margin-top: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.flow-menu {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.column-creatorFolio {
|
||||
flex-grow: 1.2;
|
||||
/* La colonne centrale peut agrandir de 20% */
|
||||
flex-shrink: 0;
|
||||
/* Empêche la colonne centrale de rétrécir */
|
||||
flex-basis: auto;
|
||||
/* La colonne centrale prend sa taille de base */
|
||||
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-creatorFolio-side {
|
||||
flex-grow: 0;
|
||||
/* Les colonnes latérales ne peuvent pas agrandir */
|
||||
flex-shrink: 0;
|
||||
/* Empêche les colonnes latérales de rétrécir */
|
||||
flex-basis: 200px;
|
||||
/* Largeur fixe pour les colonnes latérales */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rgb-background {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.top-aligned-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
width="256"
|
||||
>
|
||||
<v-layout>
|
||||
<v-navigation-drawer absolute permanent>
|
||||
<h1>Test</h1>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list
|
||||
:lines="false"
|
||||
density="compact"
|
||||
nav
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
:value="item"
|
||||
color="primary"
|
||||
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon :icon="item.icon"></v-icon>
|
||||
</template>
|
||||
|
||||
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main style="height: 354px;"></v-main>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [
|
||||
{ text: 'My Files', icon: 'mdi-folder' },
|
||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
||||
{ text: 'Starred', icon: 'mdi-star' },
|
||||
{ text: 'Recent', icon: 'mdi-history' },
|
||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
items: [
|
||||
{ text: 'My Files', icon: 'mdi-folder' },
|
||||
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
|
||||
{ text: 'Starred', icon: 'mdi-star' },
|
||||
{ text: 'Recent', icon: 'mdi-history' },
|
||||
{ text: 'Offline', icon: 'mdi-check-circle' },
|
||||
{ text: 'Uploads', icon: 'mdi-upload' },
|
||||
{ text: 'Backups', icon: 'mdi-cloud-upload' },
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<v-container>
|
||||
<v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
|
||||
|
||||
</v-container>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
|
||||
.roadmap-image {
|
||||
border-radius: 35px;
|
||||
width: 50%;
|
||||
/* reduces width by 50% */
|
||||
height: auto;
|
||||
/* maintains aspect ratio */
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,99 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<main class="top-aligned-column">
|
||||
|
||||
<body style="background-color:#f4f4f4">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
|
||||
<v-col cols="12" class="text-right">
|
||||
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center">
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
<div class="column">
|
||||
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
|
||||
<v-row style="margin-bottom: 20px;">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col style="margin-top: -70px;">
|
||||
<v-row>
|
||||
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
|
||||
</v-row>
|
||||
<v-col>
|
||||
<v-btn style="margin-top: -30px;">
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
</div>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
|
||||
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
|
||||
|
||||
<div class="center-column column">
|
||||
<p>YourProfile</p>
|
||||
</div>
|
||||
<v-form>
|
||||
<v-text-field v-model="firstName" label="Prénom"></v-text-field>
|
||||
<v-text-field v-model="lastName" label="Nom"></v-text-field>
|
||||
<v-text-field v-model="titre" label="Titre"></v-text-field>
|
||||
<v-text-field v-model="description" label="Description"></v-text-field>
|
||||
|
||||
<div class="column">
|
||||
</v-form>
|
||||
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="">
|
||||
<v-btn style="margin-right: 20px;">Retour</v-btn>
|
||||
</router-link>
|
||||
<v-btn>Éditer</v-btn>
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
<FooterLayout></FooterLayout>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
||||
|
||||
const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
|
||||
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.your-profile-picture {
|
||||
width: 300px;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.row-shadow {
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.col-shadow {
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
208
src/views/tos/About.vue
Normal file
208
src/views/tos/About.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">À propos</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
À propos
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Bienvenue sur la page "À Propos" d’Hutopy, où nous partageons notre histoire, notre mission,
|
||||
notre vision, et vous présentons l'équipe passionnée qui rend tout cela possible. Hutopy
|
||||
n'est pas seulement une plateforme ; c'est une communauté, un mouvement, un lieu où la
|
||||
créativité rencontre la technologie pour créer des expériences inoubliables.
|
||||
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Notre Histoire
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy a été fondée en 2024, née de l'idée simple mais puissante que chaque créateur qu'il
|
||||
soit grand ou petit, novice ou expérimenté, devrait avoir accès aux outils et au soutien
|
||||
nécessaires pour partager sa passion avec le monde.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Notre Mission
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Notre mission est de démocratiser la création de contenu numérique, en offrant une
|
||||
plateforme accessible, intuitive et puissante qui permet aux créateurs de tout horizon de
|
||||
s'exprimer, d'innover et de connecter avec une audience mondiale. Nous nous engageons à
|
||||
fournir les outils, les ressources et le soutien nécessaires pour que chaque voix puisse
|
||||
être entendue.
|
||||
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Notre Vision
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Nous envisageons un monde où la barrière entre les créateurs et leur audience est réduite au
|
||||
minimum, où les idées, l'expertise et les histoires peuvent circuler librement et sans
|
||||
entrave. Hutopy aspire à être au cœur de cet écosystème créatif et professionnel, en étant
|
||||
une source d'inspiration, une plateforme de lancement et un foyer pour tous.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Notre Équipe
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Derrière Hutopy, il y a une équipe de penseurs innovants, de créatifs passionnés et de
|
||||
technologues dévoués, tous unis par le désir de soutenir la communauté des créateurs de
|
||||
contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
|
||||
unique et une perspective fraîche à notre mission commune.
|
||||
</p>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
alt="Marc-Olivier Hébert">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
|
||||
</v-typography><br> <v-typography class="name"
|
||||
style="font-size: 1.5rem; font-weight: bold;">
|
||||
Hébert</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Fondateur</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Avec une
|
||||
vision claire et un engagement sans faille, il a lancé Hutopy pour changer la
|
||||
manière dont le contenu est créé et partagé.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
alt="Dominic Villemure">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Villemure</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Technique</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">À la tête de
|
||||
notre équipe de développement, il assure qu’Hutopy reste à la pointe de la
|
||||
technologie.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
alt="Parcal Marchesseault">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Marchesseault</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Expérience
|
||||
utilisateur</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Le champion
|
||||
de l'expérience utilisateur, il veille à ce que chaque interaction avec Hutopy soit
|
||||
positive et enrichissante pour tous les utilisateurs.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
alt="Chloé Beaugrand">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Beaugrand</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Marketing</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Elle façonne
|
||||
l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes et
|
||||
impactantes.</v-typography>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Chez Hutopy, nous sommes plus qu'une plateforme ; nous sommes une famille dédiée à la
|
||||
réussite de nos créateurs. Nous vous invitons à nous joindre dans cette aventure
|
||||
passionnante, à partager votre créativité et votre expertise avec le monde et à faire
|
||||
d’Hutopy votre utopie. Merci de faire partie de notre histoire.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Programme ambassadeurs</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p class="text-start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Anti-exploitation</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p class="text-start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Conditions d'utilisation</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p class="text-start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -5,15 +5,16 @@
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Politiques des contenus</v-typography>
|
||||
<v-typography class="headline text-center">Politique de Contenu</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
@@ -22,19 +23,281 @@
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p class="text-start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Politique de Contenu d’Hutopy
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Introduction
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy vise à offrir une plateforme sécurisée, inclusive et respectueuse où les créateurs
|
||||
peuvent partager leur travail et interagir avec une communauté engagée. Pour maintenir cet
|
||||
environnement, nous avons établi des lignes directrices claires concernant le type de
|
||||
contenu autorisé sur notre plateforme. En utilisant Hutopy, vous acceptez de respecter cette
|
||||
politique de contenu.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Contenu Autorisé
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy encourage la publication de contenu créatif, éducatif et inspirant dans divers
|
||||
formats, y compris :<br>
|
||||
<br>
|
||||
<li>Arts visuels et design : Illustrations, photographies, designs graphiques respectant le
|
||||
droit d'auteur.</li>
|
||||
<br>
|
||||
<li>Éducation et apprentissage : Tutoriels, cours en ligne, webinaires qui favorisent
|
||||
l'apprentissage et le développement personnel.</li>
|
||||
<br>
|
||||
<li>Contenu écrit : Articles, blogs, poésies qui enrichissent les discussions et partagent
|
||||
des connaissances.</li>
|
||||
<br>
|
||||
<li>Multimédia : Vidéos, podcasts et musique originales qui respectent les droits d'auteur
|
||||
et encouragent l'expression créative.</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Contenu Interdit
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy,
|
||||
incluant mais non limité à : <br>
|
||||
<br>
|
||||
<li>Contenu illégal : Tout contenu promouvant des activités illégales ou fournissant des
|
||||
instructions pour commettre des actes illégaux.</li>
|
||||
<br>
|
||||
<li>Harcèlement et discours de haine : Contenu visant à harceler, menacer, ou promouvoir la
|
||||
haine contre des individus ou des groupes basés sur la race, l'ethnie, la religion, le
|
||||
genre, l'orientation sexuelle, l'identité de genre ou tout autre caractéristique
|
||||
distinctive.
|
||||
</li>
|
||||
<br>
|
||||
<li>Contenu pour adultes : Matériel pornographique ou explicitement sexuel.
|
||||
</li>
|
||||
<br>
|
||||
<li>Violence et contenu graphique : Images ou descriptions de violence excessive, gore ou
|
||||
choquantes.</li>
|
||||
<br>
|
||||
<li>Publicité mensongère et spam : Contenu trompeur, frauduleux ou spammy.
|
||||
</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Droits d'Auteur et Propriété Intellectuelle
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Respect des Droits : Vous devez posséder les droits sur le contenu que vous publiez sur
|
||||
Hutopy ou avoir l'autorisation expresse du détenteur des droits pour utiliser ce contenu.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Attribution : Lorsque vous utilisez ou adaptez le contenu protégé par des droits d'auteur
|
||||
appartenant à autrui, une attribution claire et correcte doit être fournie.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Modération et Signalement
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour
|
||||
surveiller et évaluer le contenu publié, garantissant le respect de cette politique.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Signalement : Les utilisateurs de Hutopy sont encouragés à signaler tout contenu qu'ils
|
||||
considèrent comme enfreignant notre politique de contenu via les outils de signalement
|
||||
disponibles sur la plateforme.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Conséquences des Violations
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
La violation de notre politique de contenu peut entraîner des actions allant de
|
||||
l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du
|
||||
compte utilisateur.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Révisions de la Politique
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour
|
||||
refléter les changements dans nos pratiques ou pour se conformer à de nouvelles
|
||||
réglementations légales.
|
||||
</p>
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Dans le cas d’une non conformité aux politiques de contenus :
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
1. Suspension des Fonds : Les montants accumulés sur le compte de l'utilisateur en question
|
||||
seront suspendus temporairement le temps de l'évaluation.<br>
|
||||
<br>
|
||||
2. Redistribution à des Œuvres de Charité : Si, après évaluation, le contenu est
|
||||
définitivement jugé non conforme à nos clauses de conformité, les fonds suspendus seront
|
||||
redistribués à des œuvres de charité choisies par Hutopy. L'utilisateur concerné sera
|
||||
informé de cette décision et des raisons de la non-conformité de son contenu.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Cette mesure vise à renforcer la responsabilité des créateurs quant au type de contenu
|
||||
partagé sur Hutopy, tout en soutenant des causes bénéfiques en cas de violation de nos
|
||||
directives.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Section Anti-Exploitation d’Hutopy
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Engagement d’Hutopy
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy s'engage fermement à maintenir une plateforme sûre et respectueuse pour tous ses
|
||||
utilisateurs. Nous prenons une position intransigeante contre toute forme d'exploitation
|
||||
humaine et nous travaillons activement pour prévenir, identifier et combattre les
|
||||
comportements et contenus exploitants. Notre mission est de créer un environnement où la
|
||||
créativité et l'expression personnelle peuvent s'épanouir sans crainte d'exploitation ou
|
||||
d'abus.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Politique de Tolérance Zéro
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Nous appliquons une politique de tolérance zéro à l'égard de :<br>
|
||||
<br>
|
||||
<li>Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile,
|
||||
le trafic sexuel, et le harcèlement sexuel.
|
||||
</li>
|
||||
<br>
|
||||
<li>Travail forcé : Nous nous opposons à toute forme de travail forcé ou de servitude, y
|
||||
compris le travail des enfants.
|
||||
</li>
|
||||
<br>
|
||||
<li>Exploitation financière : Cela comprend les arnaques, la fraude et tout autre type
|
||||
d'exploitation financière.</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Politique de Tolérance Zéro
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Signalement et Actions<br>
|
||||
<br>
|
||||
<li>Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler
|
||||
rapidement tout contenu ou comportement suspect d'exploitation. Nous encourageons
|
||||
vivement les utilisateurs à utiliser ces outils s'ils rencontrent ou soupçonnent des cas
|
||||
d'exploitation.
|
||||
</li>
|
||||
<br>
|
||||
<li>Réponse Rapide : Notre équipe dédiée examine tous les signalements avec la plus grande
|
||||
attention et prend des mesures immédiates pour adresser les problèmes signalés. Cela
|
||||
peut inclure la suppression de contenu, la suspension de comptes, et, si nécessaire, le
|
||||
signalement aux autorités compétentes.
|
||||
</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Collaboration avec les Autorités
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Nous collaborons étroitement avec les autorités et les organisations spécialisées pour
|
||||
combattre l'exploitation sous toutes ses formes. Hutopy est déterminé à respecter toutes les
|
||||
lois applicables et à coopérer avec les autorités dans leurs efforts de lutte contre
|
||||
l'exploitation et l'abus.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Engagements des Utilisateurs
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
En rejoignant Hutopy, les utilisateurs s'engagent à respecter nos principes
|
||||
anti-exploitation et à contribuer à la création d'un espace sûr pour tous. Tout manquement à
|
||||
ces engagements entraînera des conséquences sérieuses, conformément à notre politique de
|
||||
tolérance zéro.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Modération et Signalement
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<li>Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés
|
||||
pour surveiller et évaluer le contenu publié, garantissant le respect de cette
|
||||
politique.</li>
|
||||
<br>
|
||||
<li>Signalement : Les utilisateurs d’Hutopy sont encouragés à signaler tout contenu qu'ils
|
||||
considèrent comme enfreignant notre politique de contenu via les outils de signalement
|
||||
disponibles sur la plateforme.</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Conséquences des Violations
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
La violation de notre politique de contenu peut entraîner des actions allant de
|
||||
l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du
|
||||
compte utilisateur.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Révisions de la Politique
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour
|
||||
refléter les changements dans nos pratiques ou pour se conformer à de nouvelles
|
||||
réglementations légales.
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Contact
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Si vous avez des questions sur cette politique de contenu ou sur la manière dont nous
|
||||
l'appliquons, veuillez contacter notre équipe d'assistance à <a
|
||||
href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
|
||||
244
src/views/tos/FAQ.vue
Normal file
244
src/views/tos/FAQ.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" style="color:white;">
|
||||
<h1 class="header-text-size text-center">FAQ
|
||||
</h1>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p style="font-weight: 600; font-size: 1rem; margin-bottom: 25px; color: red;">
|
||||
Certaines fonctionnalités ne sont pas encore implémentées, donc certains libellés sont
|
||||
prévus pour la v1.0.
|
||||
|
||||
</p>
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Foire Aux Questions
|
||||
</p>
|
||||
|
||||
<p class="text-start text-left" style="margin-bottom: 25px;">
|
||||
La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides
|
||||
aux questions les plus fréquemment posées sur notre plateforme. Explorez nos réponses
|
||||
détaillées pour optimiser votre utilisation de Hutopy et résoudre vos problèmes en un
|
||||
instant. Consultez régulièrement notre FAQ pour rester informé des dernières
|
||||
fonctionnalités.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
1. Comment puis-je créer un compte sur Hutopy ?
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Créer un compte est
|
||||
simple !
|
||||
Visitez notre page
|
||||
d'inscription, remplissez les
|
||||
informations requises, et suivez les instructions pour confirmer votre adresse e-mail ou
|
||||
vous connecter via les partenaires de connexion. Vous pourrez commencer à explorer et à
|
||||
interagir avec la communauté Hutopy immédiatement après.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
2. Quels types de contenu puis-je publier sur Hutopy ?
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Hutopy accueille une
|
||||
large
|
||||
variété de contenus créatifs, incluant mais non limité à des vidéos, articles, podcasts, et
|
||||
illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte
|
||||
nos valeurs.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
3. Comment Hutopy rémunère-t-il les créateurs de contenu ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Les créateurs peuvent monétiser leur
|
||||
contenu de plusieurs façons, notamment via des abonnements payants et des dons de la part
|
||||
des utilisateurs.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
4. Comment puis-je modifier mon profil ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Connectez-vous à votre compte, accédez à
|
||||
votre profil, puis cliquez sur "Éditer le profil" pour modifier vos informations, ajouter
|
||||
une bio, changer votre photo de profil, et plus encore.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
5. Est-il possible de supprimer mon compte ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Oui, vous pouvez faire la suppression de
|
||||
votre compte sur votre profil dans la section plus. Notez que cette action est irréversible.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
6. Que faire si j'oublie mon mot de passe ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Sur la page de connexion, cliquez sur "Mot
|
||||
de passe oublié ?" et suivez les instructions pour réinitialiser votre mot de passe via
|
||||
votre adresse courriel.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
7. Comment signaler un contenu inapproprié ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Si vous rencontrez du contenu qui viole nos
|
||||
directives, cliquer sur les trois petits points en haut de la publication et cliqué sur le
|
||||
bouton "Signaler" associé au contenu en question pour alerter notre équipe de modération.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
8. Comment puis-je contacter le support Hutopy ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Pour toute assistance, vous pouvez nous
|
||||
contacter via notre formulaire en ligne ou par e-mail à support@hutopy.com, ou via nos
|
||||
réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les demandes.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
9. Quels sont les frais pour les créateurs sur Hutopy ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Hutopy prélève une commission de 12% +
|
||||
0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour les abonnements,
|
||||
les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir
|
||||
les coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur,
|
||||
des frais de transaction de Stripe et le développement continu pour améliorer votre
|
||||
expérience sur Hutopy.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Non, l'inscription sur Hutopy est gratuite,
|
||||
et il n'y a pas de frais mensuels ou annuels pour maintenir votre compte. Vous pouvez
|
||||
commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Hutopy offre à la fois du contenu gratuit
|
||||
et du contenu premium. Les utilisateurs peuvent accéder gratuitement à une partie du contenu
|
||||
sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
|
||||
accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur
|
||||
travail.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
12. Existe-t-il des frais pour retirer mes gains de la plateforme ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Les créateurs peuvent retirer leurs gains
|
||||
sans frais supplémentaires de la part d’Hutopy. Cependant, les transactions bancaires ou les
|
||||
transferts vers des portefeuilles électroniques peuvent être soumis aux frais standards
|
||||
imposés par ces services ou institutions financières, mais pas par Hutopy.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<span style="font-weight: 600;">Réponse :</span> Oui, les frais de commission d’Hutopy sont
|
||||
uniformément appliqués à tous les types de contenu et de transactions sur la plateforme pour
|
||||
maintenir la simplicité et la transparence et ce peut importe le montant.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 650px) and (max-width: 960px) {
|
||||
.header-text-size {
|
||||
margin-top: -200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 100px) and (max-width: 649px) {
|
||||
.header-text-size {
|
||||
margin-top: -155px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
141
src/views/tos/GuideForCreators.vue
Normal file
141
src/views/tos/GuideForCreators.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" style="color:white;">
|
||||
<h1 class="header-text-size text-center">Guide pour les Créateurs</h1>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Guide pour les Créateurs sur Hutopy
|
||||
</p>
|
||||
<p class="text-start text-left" style="margin-bottom: 25px;">
|
||||
Bienvenue dans la Communauté de Créateurs d’Hutopy
|
||||
</p>
|
||||
<p style="margin-bottom: 25px;">
|
||||
Félicitations pour avoir choisi Hutopy pour partager votre créativité et votre savoir ! Ce
|
||||
guide est conçu pour vous aider à maximiser votre présence sur la plateforme, à engager
|
||||
votre audience et à tirer le meilleur parti des outils à votre disposition.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
1. Création de Votre Profil de Créateur :
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<li>Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio
|
||||
qui
|
||||
reflète votre personnalité et votre marque de créateur.</li> <br>
|
||||
<li> Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
2. Publication de Contenu :
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; ">
|
||||
<li>Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts –
|
||||
pour captiver divers segments d'audience.
|
||||
</li> <br>
|
||||
<li> Planification et Consistance : Publiez régulièrement pour garder votre audience
|
||||
engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à
|
||||
l'avance.</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
3. Engagement avec Votre Audience :
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<li>Interagissez : Répondez aux commentaires, participez à des discussions et créez des
|
||||
sondages pour encourager l'interaction.
|
||||
</li> <br>
|
||||
<li> Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour comprendre ce
|
||||
qui résonne avec votre audience et ajustez votre stratégie en conséquence.</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
4. Monétisation :
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<li>Explorez les Options : Hutopy offre plusieurs voies de monétisation, y compris les
|
||||
abonnements payants, les dons et le programme d'ambassadeur. Choisissez ce qui convient
|
||||
le mieux à votre contenu et à votre audience.
|
||||
</li>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
5. Croissance et Développement :
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
<li>Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour
|
||||
améliorer vos compétences et rester à jour sur les tendances du secteur. ( À venir )
|
||||
</li> <br>
|
||||
</p>
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 650px) and (max-width: 960px) {
|
||||
.header-text-size {
|
||||
margin-top: -200px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 100px) and (max-width: 649px) {
|
||||
.header-text-size {
|
||||
margin-top: -135px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -5,18 +5,19 @@
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Aide et Contact</v-typography>
|
||||
<v-row justify="center" style="color:white;">
|
||||
<h1 class="header-text-size text-center">Aide et Contact</h1>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
@@ -33,6 +34,10 @@
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Aide et contact
|
||||
</p>
|
||||
|
||||
<p class="text-start text-left" style="margin-bottom: 25px;">
|
||||
Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de
|
||||
conseils pour optimiser votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre
|
||||
@@ -41,26 +46,47 @@
|
||||
agréable que possible.
|
||||
</p>
|
||||
|
||||
<v-typography>
|
||||
<p style="font-weight: 600; font-size: 1.4rem;">
|
||||
FAQ (Foire Aux Questions)
|
||||
</v-typography>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px;">
|
||||
<p style="margin-top: 25px; ">
|
||||
Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation
|
||||
d’Hutopy, les fonctionnalités de la plateforme, les options de monétisation, et plus encore.
|
||||
Consulter la FAQ
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Contactez-Nous</p>
|
||||
|
||||
<p style="margin-top: 25px;">Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce
|
||||
soit pour partager vos retours, poser une question spécifique, ou demander des
|
||||
renseignements sur des partenariats, n'hésitez pas à nous contacter.</p>
|
||||
<p style="margin-top: 25px; color: black;">
|
||||
- Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">info@hutopy.com</a>
|
||||
<br>
|
||||
- Réseaux Sociaux : Nous sommes actifs sur <a href="https://www.facebook.com/Hutopy"
|
||||
style="color: #a30e79;">Facebook</a>, et <a href="https://www.instagram.com/hutopy.inc"
|
||||
style="color: #a30e79;">Instagram</a> <br>
|
||||
- Suivez-nous pour rester informé et interagir avec notre communauté.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Assistance Technique</p>
|
||||
|
||||
<p style="margin-top: 25px; color: black;">
|
||||
Rencontrez-vous un problème technique ? <br>
|
||||
Notre équipe d'assistance est là pour vous aider :
|
||||
<a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
|
||||
</p>
|
||||
|
||||
|
||||
<p style="margin-top: 25px;">Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide
|
||||
et positive que possible. N'hésitez pas à nous contacter pour toute aide supplémentaire !
|
||||
</p>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
@@ -72,8 +98,25 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 650px) and (max-width: 960px) {
|
||||
.header-text-size {
|
||||
margin-top: -200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 100px) and (max-width: 649px) {
|
||||
.header-text-size {
|
||||
margin-top: -155px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,8 +5,9 @@
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
|
||||
cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -22,19 +23,132 @@
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p class="text-start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Conditions Générales d'Utilisation d’Hutopy
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Bienvenue sur Hutopy
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
En accédant à la plateforme Hutopy et en l'utilisant, vous acceptez de vous conformer aux
|
||||
conditions générales d'utilisation suivantes, qui sont conçues pour assurer une expérience
|
||||
sûre, respectueuse et positive pour tous les utilisateurs. Ces conditions s'appliquent à
|
||||
tous les visiteurs, utilisateurs et autres personnes qui accèdent ou utilisent le
|
||||
service.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Utilisation Acceptable
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
1. Contenu : Vous vous engagez à ne pas publier de contenu illégal, diffamatoire,
|
||||
abusif, pornographique, haineux, raciste ou de toute autre nature susceptible de causer
|
||||
du tort. Tout contenu publié reste sous votre responsabilité.
|
||||
<br>
|
||||
<br>
|
||||
2. Comportement : Tout comportement visant à nuire à d'autres utilisateurs, à la
|
||||
plateforme ou à ses opérations est strictement interdit. Cela inclut le piratage, la
|
||||
diffusion de logiciels malveillants et les tentatives d'hameçonnage.
|
||||
<br>
|
||||
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Droits de Propriété Intellectuelle
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Le contenu publié sur Hutopy par les utilisateurs reste la propriété de leurs créateurs
|
||||
respectifs. En publiant du contenu sur Hutopy, vous accordez à la plateforme une licence non
|
||||
exclusive, transférable, libre de droits et mondiale pour utiliser, reproduire, modifier,
|
||||
publier, traduire et distribuer ce contenu dans tout média.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Confidentialité
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
La protection de vos données personnelles est de la plus haute importance pour Hutopy. Votre
|
||||
information est collectée et utilisée conformément à notre politique de confidentialité.
|
||||
</p>
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Limitation de Responsabilité
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy et ses affiliés ne seront pas responsables des dommages indirects, accidentels,
|
||||
spéciaux, consécutifs ou punitifs, y compris sans limitation, la perte de profits, de
|
||||
données ou d'usage, que ce soit dans une action contractuelle, délictuelle y compris la
|
||||
négligence ou autre, découlant de ou en relation avec l'accès ou l'utilisation de la
|
||||
plateforme Hutopy.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Clause de Non-Poursuite
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
En acceptant ces conditions générales d'utilisation, vous convenez qu'en aucun cas Hutopy,
|
||||
ses dirigeants, employés, partenaires, agents, fournisseurs ou affiliés ne pourront être
|
||||
tenus responsables de dommages directs, indirects, accidentels, spéciaux, consécutifs ou
|
||||
exemplaires résultant de votre utilisation de la plateforme Hutopy. Par conséquent, vous
|
||||
renoncez expressément à tout droit de poursuivre Hutopy et ses affiliés pour toute
|
||||
réclamation liée à votre utilisation de la plateforme.
|
||||
</p>
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Gestion du Contenu Inapproprié et Sanctions Financières
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy s'engage à maintenir un environnement sûr et respectueux pour tous ses utilisateurs.
|
||||
Ainsi, tout contenu publié sur la plateforme est sujet à une évaluation de conformité avec
|
||||
nos directives et nos standards éthiques. Dans l'éventualité où le contenu d'un utilisateur
|
||||
est jugé inapproprié, offensant ou en violation avec nos Acceptation des Conditions<br>
|
||||
<br>
|
||||
Votre accès et votre utilisation continue de la plateforme Hutopy constituent votre
|
||||
acceptation des présentes conditions générales et de toutes les modifications futures. Il
|
||||
est de votre responsabilité de vous tenir informé des mises à jour de ces conditions. <br>
|
||||
<br>
|
||||
Nous vous encourageons à utiliser Hutopy de manière responsable et conforme à nos
|
||||
directives, afin de contribuer à une communauté positive et enrichissante pour tous.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Modifications des Conditions
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy se réserve le droit de modifier ou de remplacer ces conditions à tout moment. Il est
|
||||
de votre responsabilité de revoir régulièrement ces conditions pour vous tenir informé des
|
||||
mises à jour.
|
||||
</p>
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Résiliation
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy peut résilier ou suspendre votre accès à la plateforme immédiatement, sans préavis ni
|
||||
responsabilité, pour quelque raison que ce soit, y compris, sans limitation, si vous violez
|
||||
les conditions.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
|
||||
Loi Applicable
|
||||
</p>
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Ces conditions seront régies et interprétées conformément aux lois du pays/juridiction où
|
||||
est basée la plateforme, sans égard à ses conflits de dispositions légales.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
|
||||
13
swa-cli.config.json
Normal file
13
swa-cli.config.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
|
||||
"configurations": {
|
||||
"taim-ui": {
|
||||
"appLocation": ".",
|
||||
"outputLocation": "dist",
|
||||
"appBuildCommand": "npm run build",
|
||||
"run": "npm run dev",
|
||||
"appDevserverUrl": "https://hutopy.azurewebsites.net",
|
||||
"apiDevserverUrl": "https://hutopy.azurewebsites.net"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,24 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
export default defineConfig(({ mode }) => {
|
||||
// Load environment variables based on the mode
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
return {
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
define: {
|
||||
// Define a global constant __APP_ENV__ based on loaded environment variables
|
||||
VITE_API_URL: JSON.stringify(env.VITE_API_URL)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user