Merged PR 13: Update RouterView, update ui (contact view, footer, default)
Modifié contactview version mobile, le defualtLayout afin d'ajouter le menu mobile sur toutes les pages, index j'ai modifier quand non change de page pour remonter dans le haut de la page. Contact vie
This commit is contained in:
Pascal Marchesseault
@@ -1 +1 @@
|
||||
VITE_API_URL=http://localhost:5001/api/v1
|
||||
VITE_API_URL=https://localhost:5001/
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 18 KiB |
BIN
images/xicon.png
BIN
images/xicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 46 KiB |
@@ -2,112 +2,61 @@
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<!-- Version pour ordinateur -->
|
||||
<v-container style="z-index: 2000; margin-bottom: 1.4%">
|
||||
<!-- Version pour ordinateur -->
|
||||
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
|
||||
<v-container style="z-index: 2000; margin-bottom: .5%; margin-top: -.6%; margin-right: 1%;">
|
||||
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
||||
|
||||
<v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
|
||||
<v-text-field append-inner-icon="mdi-magnify" density="compact"
|
||||
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
|
||||
single-line></v-text-field>
|
||||
</v-card-text>
|
||||
|
||||
<v-col cols="auto" class="d-flex align-center">
|
||||
<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="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
<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>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
<!-- Version pour mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container style="margin-top: -20px;">
|
||||
<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="auto">
|
||||
<!-- Logo -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
|
||||
</router-link>
|
||||
<v-col cols="11" class="d-flex align-center justify-center">
|
||||
<img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
|
||||
</v-col>
|
||||
<v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
|
||||
<v-col cols="auto">
|
||||
<!-- Photo de profil -->
|
||||
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-center" style="margin-top: -30px;">
|
||||
<v-row class="justify-center">
|
||||
|
||||
<!-- Premier lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Deuxième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Troisième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
<div v-if="user">
|
||||
Hello, {{ user.email }}
|
||||
</div>
|
||||
<v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
|
||||
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
<v-navigation-drawer v-model="drawer" temporary>
|
||||
<v-list>
|
||||
<v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
|
||||
<template v-slot:prepend>
|
||||
<img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
|
||||
</template>
|
||||
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list density="compact" nav>
|
||||
<h1 class="h1-navigation">Navigation</h1>
|
||||
<router-link :to="{ name: 'home' }" class="">
|
||||
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
|
||||
</router-link>
|
||||
<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-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</v-card>
|
||||
|
||||
|
||||
<main class="px-8 py-3 ">
|
||||
@@ -122,7 +71,7 @@ import { auth } from '@/stores/auth.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const store = auth();
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const logout = () => {
|
||||
store.logout();
|
||||
@@ -130,6 +79,78 @@ const logout = () => {
|
||||
}
|
||||
|
||||
const user = store.user;
|
||||
|
||||
</script>
|
||||
|
||||
<style src="../cssstyle/index.css"></style>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageSrc: '../../../images/guillaimeaime3x.png',
|
||||
drawer: false,
|
||||
items: [
|
||||
{ title: 'Item 1' },
|
||||
{ title: 'Item 2' },
|
||||
{ title: 'Item 3' },
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.header-profile-icon {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 50px;
|
||||
border: 2px solid #a30e79;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
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
|
||||
}
|
||||
|
||||
.header-banner {
|
||||
border-top: 5px solid rgba(107, 0, 101, 1);
|
||||
margin-top: 15%;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #006d77;
|
||||
margin-top: -20%;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #0baab2;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
min-width: 400px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,57 @@
|
||||
<!--lg="8" md="10" sm="10" xs="10" -->
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
|
||||
class="footer-align">
|
||||
<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">
|
||||
</router-link>
|
||||
</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">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-container class="text-center" style="flex-grow: 1;">
|
||||
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
|
||||
{{ link }}
|
||||
</v-btn>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-center" style="flex-grow: 1;">
|
||||
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
|
||||
{{ link }}
|
||||
</v-btn>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-black text-center ">
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||
</v-container>
|
||||
<v-container class="text-black text-center ">
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-container>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/main/HomeView.vue'
|
||||
import SignupView from '../views/SignupView.vue'
|
||||
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 HomeView from '../views/main/HomeView.vue'
|
||||
import YourProfile from '../views/main/YourProfile.vue'
|
||||
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
name: 'main',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
@@ -44,9 +45,15 @@ const router = createRouter({
|
||||
name: 'roadmap',
|
||||
component: ProjectRoadmap
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return { top: 0 };
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<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/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
|
||||
<!-- Connexion-objects -->
|
||||
@@ -58,7 +58,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/loginpage/loginhutopy.png">
|
||||
|
||||
<h1 class="h1-connexion">Connexion</h1>
|
||||
<h2 class="h2-connexion">Comment souhaitez-vous
|
||||
@@ -112,12 +112,13 @@ let errorSnackBar = ref(false);
|
||||
|
||||
async function login() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -199,17 +200,11 @@ async function login() {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
|
||||
.h2pasinscrit {
|
||||
margin-bottom: 5%;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -3%;
|
||||
width: 425px;
|
||||
@@ -217,7 +212,6 @@ async function login() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btnhome {
|
||||
|
||||
font-size: 1em;
|
||||
@@ -237,12 +231,6 @@ async function login() {
|
||||
.inscriptionbtn {
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1280px) {
|
||||
@@ -267,11 +255,6 @@ async function login() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
|
||||
.inscriptionbtn {
|
||||
transform: scale(.8);
|
||||
}
|
||||
@@ -290,10 +273,6 @@ async function login() {
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1279px) and (max-width: 1920px) {
|
||||
@@ -314,29 +293,17 @@ async function login() {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
.h2-pasinscrit {
|
||||
margin-bottom: -10%;
|
||||
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -10%;
|
||||
margin-top: -4%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.inscriptionbtn {
|
||||
transform: scale(.6);
|
||||
margin-top: -5%;
|
||||
}
|
||||
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.login-picture {
|
||||
width: auto;
|
||||
border-radius: 30px;
|
||||
@@ -344,12 +311,6 @@ async function login() {
|
||||
margin-left: -5%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
@@ -375,22 +336,11 @@ async function login() {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.insriptionbutton {
|
||||
font-size: 1.2em;
|
||||
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
|
||||
}
|
||||
|
||||
.connexion-container {
|
||||
margin-left: -7%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.login-picture {
|
||||
width: auto;
|
||||
border-radius: 30px;
|
||||
@@ -420,15 +370,6 @@ async function login() {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.insriptionbutton {
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 1%;
|
||||
|
||||
}
|
||||
|
||||
.inscriptionbtn {
|
||||
transform: scale(1);
|
||||
}
|
||||
@@ -444,7 +385,5 @@ async function login() {
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||
margin-left: -5%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<!--PC -->
|
||||
<div class="hutopy-backgroud-color">
|
||||
<div class="hidden-xs flex-col items-center page-margin">
|
||||
@@ -6,9 +7,9 @@
|
||||
<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>
|
||||
|
||||
<v-col cols="auto">
|
||||
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||
</v-col>
|
||||
|
||||
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||
|
||||
|
||||
<v-col class="ml-0 text-left ">
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
@@ -24,6 +25,7 @@
|
||||
|
||||
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||
<v-row>
|
||||
|
||||
<v-col>
|
||||
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||
</v-col>
|
||||
@@ -85,22 +87,14 @@
|
||||
</div>
|
||||
|
||||
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
||||
<v-spacer style="margin-bottom: 25px;"></v-spacer>
|
||||
<v-img src="../../../images/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>
|
||||
|
||||
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||
|
||||
<v-row>
|
||||
<v-col cols="7">
|
||||
<v-row class="labelgroup">
|
||||
<v-col cols="12">
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Accueil
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
@@ -154,28 +148,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
message: '',
|
||||
social_media: '',
|
||||
phone_number: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*submit() {
|
||||
this.$emit('submit', this.email)
|
||||
}*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
</script>
|
||||
|
||||
@@ -185,7 +160,16 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.Scale-80 {
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 598px) {
|
||||
|
||||
.labelgroup {
|
||||
margin-top: -50%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
|
||||
width: auto;
|
||||
@@ -204,10 +188,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 3%;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 6%;
|
||||
margin-left: 5%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
@@ -243,20 +228,22 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
max-width: 100%;
|
||||
margin-top: 4%;
|
||||
height: 103%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-top: 20%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 70%;
|
||||
width: 140px;
|
||||
|
||||
min-width: 140px;
|
||||
margin-left: 55%;
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 2rem;
|
||||
margin-top: -3%;
|
||||
font-size: 1.6rem;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
@@ -270,6 +257,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
}
|
||||
|
||||
|
||||
.hutopy-header-image {
|
||||
margin-top: 6%;
|
||||
width: 400px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -284,17 +276,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-top: 35%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 74%;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
max-width: 180px;
|
||||
margin-left: 40%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 2rem;
|
||||
margin-top: -3%;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
@@ -307,7 +302,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
|
||||
.hutopy-header-image {
|
||||
margin-top: 6%;
|
||||
width: 500px;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -316,7 +315,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 120px;
|
||||
margin-left: -0%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
|
||||
@@ -326,7 +325,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 22%;
|
||||
margin-left: 30%;
|
||||
margin-top: 37%;
|
||||
|
||||
|
||||
@@ -370,7 +369,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 165px;
|
||||
margin-left: -4%;
|
||||
margin-left: -2.8%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
@@ -379,7 +378,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 50%;
|
||||
margin-left: 53%;
|
||||
margin-top: 45%;
|
||||
|
||||
|
||||
@@ -436,7 +435,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 165px;
|
||||
margin-left: -5%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
@@ -445,7 +444,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 75%;
|
||||
margin-left: 82%;
|
||||
margin-top: 40%;
|
||||
|
||||
|
||||
@@ -501,7 +500,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 160px;
|
||||
margin-left: -8%;
|
||||
margin-left: -4.6%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
@@ -512,7 +511,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-left: 47%;
|
||||
margin-left: 53%;
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
@@ -571,7 +570,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 180px;
|
||||
margin-left: 7%;
|
||||
margin-left: 3.5%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
@@ -583,7 +582,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-left: 33%;
|
||||
margin-left: 30%;
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
|
||||
776
src/views/main/CreatorFolio copy.vue
Normal file
776
src/views/main/CreatorFolio copy.vue
Normal file
@@ -0,0 +1,776 @@
|
||||
<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,142 +1,140 @@
|
||||
<template>
|
||||
<v-app style="background-color: #F4F4F4;">
|
||||
<div style="background-color: #F4F4F4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<!--PC -->
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
||||
|
||||
<div style="background-color: #F4F4F4;">
|
||||
|
||||
<!--PC -->
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
||||
|
||||
<!--Logo & bouttons -->
|
||||
<v-container class="d-flex justify-center align-center">
|
||||
<div style="margin-left: 20%;">
|
||||
<v-row>
|
||||
|
||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
||||
<RouterLink :to="{ name: 'login' }">
|
||||
<v-btn size="large"
|
||||
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
|
||||
light elevation="0">
|
||||
Connexion
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="large"
|
||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
<div>
|
||||
<v-container style="margin: 0; padding: 0;">
|
||||
<v-row style="justify-content: center;">
|
||||
<img src="../../../images/homepage/bannierehomepage.png"
|
||||
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Colonnes Créer Partager Inspirer-->
|
||||
<v-container>
|
||||
<!--Logo & bouttons -->
|
||||
<v-container class="d-flex justify-center align-center">
|
||||
<div style="margin-left: 20%;">
|
||||
<v-row>
|
||||
<!-- vide de gauche -->
|
||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
||||
</v-col>
|
||||
<!-- Colonne Centre -->
|
||||
<v-col cols="9" style="margin-left: 4%;">
|
||||
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
||||
<RouterLink :to="{ name: 'login' }">
|
||||
<v-btn size="large"
|
||||
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
|
||||
light elevation="0">
|
||||
Connexion
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="large"
|
||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div style="margin-top: 40px;">
|
||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/creer.png"
|
||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||
CRÉER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
|
||||
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
|
||||
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
|
||||
réalité.
|
||||
</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-hover>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
<div>
|
||||
<v-container style="margin: 0; padding: 0;">
|
||||
<v-row style="justify-content: center;">
|
||||
<img src="../../../images/homepage/bannierehomepage.png"
|
||||
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/partager.png"
|
||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text"
|
||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
PROFITER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
||||
Plongez dans l'univers Hutopy et
|
||||
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
|
||||
des
|
||||
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
|
||||
sens
|
||||
et enrichir votre quotidien.</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
<!-- Colonnes Créer Partager Inspirer-->
|
||||
<v-container>
|
||||
<v-row>
|
||||
<!-- vide de gauche -->
|
||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
||||
</v-col>
|
||||
<!-- Colonne Centre -->
|
||||
<v-col cols="9" style="margin-left: 4%;">
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/inspirer.png"
|
||||
style="border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text"
|
||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
INSPIRER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
||||
Devenez une source d'inspiration
|
||||
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
|
||||
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
|
||||
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-container>
|
||||
</div>
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div style="margin-top: 40px;">
|
||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/creer.png"
|
||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||
CRÉER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
|
||||
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
|
||||
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
|
||||
réalité.
|
||||
</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
|
||||
|
||||
</v-hover>
|
||||
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/partager.png"
|
||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text"
|
||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
PROFITER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
||||
Plongez dans l'univers Hutopy et
|
||||
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
|
||||
des
|
||||
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
|
||||
sens
|
||||
et enrichir votre quotidien.</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/inspirer.png"
|
||||
style="border-radius: 20px; width: 80vw;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text"
|
||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
INSPIRER</h3>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
||||
Devenez une source d'inspiration
|
||||
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
|
||||
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
|
||||
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-overlay>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -144,277 +142,285 @@
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
<!-- vide de droite -->
|
||||
<v-col cols="2" class="mr-4 mr-sm-0">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Description D'hutopy -->
|
||||
|
||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="6">
|
||||
<v-col cols="11" class="d-flex justify-center align-center">
|
||||
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||
</v-col>
|
||||
<!-- vide de droite -->
|
||||
<v-col cols="2" class="mr-4 mr-sm-0">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Description D'hutopy -->
|
||||
|
||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="6">
|
||||
<v-col cols="11" class="d-flex justify-center align-center">
|
||||
<v-img style="margin-top: -5%; min-width: 350px;"
|
||||
src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="auto" md="10">
|
||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
|
||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||||
la créativité.
|
||||
</p>
|
||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
||||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||||
prendre vie.
|
||||
</p>
|
||||
<v-col cols="auto" class="d-flex justify-center align-center">
|
||||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
<v-col cols="auto" md="10">
|
||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
|
||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||||
la créativité.
|
||||
</p>
|
||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
||||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||||
prendre vie.
|
||||
</p>
|
||||
<v-col cols="auto" class="d-flex justify-center align-center">
|
||||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne de droite -->
|
||||
<v-col cols="3">
|
||||
<v-img src="../../../images/homepage/grinding.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; width: 80vw;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="3" style>
|
||||
<v-img src="../../../images/homepage/microphone.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlvr.png"
|
||||
style="border-radius: 30px; min-width: 250px; max-height: 350px;"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<!-- Colonne de droite -->
|
||||
<v-col cols="3">
|
||||
<v-img src="../../../images/homepage/grinding.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="3" style>
|
||||
<v-img src="../../../images/homepage/microphone.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlvr.png"
|
||||
style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- ILS SONT SUR HUTOPY -->
|
||||
<v-container style="max-width: 1500px;">
|
||||
<!-- ILS SONT SUR HUTOPY -->
|
||||
<v-container style="max-width: 1500px;">
|
||||
<v-card-text>
|
||||
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
|
||||
|
||||
|
||||
<v-row justify="center" class="profile-images">
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Fin Description D'hutopy -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<div>
|
||||
|
||||
|
||||
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
|
||||
|
||||
<div>
|
||||
<v-card-text>
|
||||
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
<div>
|
||||
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
||||
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
||||
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
||||
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
||||
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
||||
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
|
||||
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
|
||||
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
|
||||
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
|
||||
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
|
||||
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
|
||||
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
|
||||
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
|
||||
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
||||
</div>
|
||||
|
||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
|
||||
CONNECTEZ-VOUS
|
||||
</v-btn>
|
||||
</router-link>
|
||||
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
|
||||
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||||
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
||||
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
|
||||
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
|
||||
une
|
||||
expérience
|
||||
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
|
||||
partageant votre vision,
|
||||
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
|
||||
les
|
||||
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
|
||||
d'inspiration.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-card-text>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
|
||||
</div>
|
||||
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
|
||||
</h1>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center"
|
||||
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
|
||||
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<v-row justify="center" class="profile-images">
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Fin Description D'hutopy -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<div>
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
|
||||
|
||||
<div>
|
||||
<v-card-text>
|
||||
<div>
|
||||
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
||||
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
||||
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
||||
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
||||
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
||||
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
|
||||
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
|
||||
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
|
||||
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
|
||||
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
|
||||
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
|
||||
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
|
||||
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
|
||||
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
||||
</div>
|
||||
|
||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
|
||||
CONNECTEZ-VOUS
|
||||
</v-btn>
|
||||
</router-link>
|
||||
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
|
||||
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||||
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
||||
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
|
||||
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
|
||||
une
|
||||
expérience
|
||||
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
|
||||
partageant votre vision,
|
||||
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
|
||||
les
|
||||
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
|
||||
d'inspiration.</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-card-text>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
|
||||
</div>
|
||||
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
|
||||
</h1>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center"
|
||||
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
|
||||
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn variant="outlined" @click="callBackend()">
|
||||
Get items
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
<v-snackbar v-model="errorNoAccessSnackBar">
|
||||
Vous n'etes pas connecter !
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
|
||||
Fermer
|
||||
</v-btn>
|
||||
<v-btn color="green" variant="text" @click="goToLoginPage()">
|
||||
Se connecter
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
|
||||
<v-list style="background-color: #F4F4F4;" lines="one">
|
||||
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
|
||||
</v-list>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
</v-app>
|
||||
<v-btn variant="outlined" @click="callBackend()">
|
||||
Get items
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
<v-snackbar v-model="errorNoAccessSnackBar">
|
||||
Vous n'etes pas connecter !
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
|
||||
Fermer
|
||||
</v-btn>
|
||||
<v-btn color="green" variant="text" @click="goToLoginPage()">
|
||||
Se connecter
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
|
||||
<v-list style="background-color: #F4F4F4;" lines="one">
|
||||
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
|
||||
</v-list>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
s
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script async setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import {ref} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
const api = useClient()
|
||||
const router = useRouter()
|
||||
const itemList = ref([]);
|
||||
const errorNoAccessSnackBar = ref(false);
|
||||
const client = useClient();
|
||||
|
||||
const callBackend = async () => {
|
||||
let itemList = ref([]);
|
||||
let errorNoAccessSnackBar = ref(false);
|
||||
|
||||
async function callBackend() {
|
||||
try {
|
||||
const response = await api.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
|
||||
itemList.value = response.data.items;
|
||||
const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
|
||||
const responseItems = response.data.items;
|
||||
const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
|
||||
itemList.value = orderedResponseItems
|
||||
|
||||
} catch (error) {
|
||||
errorNoAccessSnackBar.value = true;
|
||||
}
|
||||
@@ -423,6 +429,8 @@ const callBackend = async () => {
|
||||
const goToLoginPage = () => {
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style src="../../cssstyle/index.css"></style>
|
||||
@@ -640,8 +648,6 @@ body {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
||||
|
||||
Reference in New Issue
Block a user