Some changes
This commit is contained in:
Jonathan Bourdon
36
src/views/main/Browse.vue
Normal file
36
src/views/main/Browse.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<v-img max-height="375"
|
||||
src="images/usersmedia/HutopyProfile/banners/banner01.png"
|
||||
cover>
|
||||
</v-img>
|
||||
|
||||
<div class="text-5xl font-semibold text-center py-10">
|
||||
CRÉATEURS
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
<RouterLink v-for="(creator, index) in creators"
|
||||
:key="index"
|
||||
:to="creator.routerLink">
|
||||
<CreatorCard :creator="creator"
|
||||
class="m-2">
|
||||
</CreatorCard>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import CreatorCard from "@/views/main/CreatorCard.vue";
|
||||
import creators from "@/views/main/creators.json"; // Import the JSON file
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
37
src/views/main/Creator.vue
Normal file
37
src/views/main/Creator.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<v-img cover
|
||||
max-height="375"
|
||||
:src="imageSrc">
|
||||
</v-img>
|
||||
|
||||
<PostContentMenu></PostContentMenu>
|
||||
|
||||
<div class="flex">
|
||||
<RouterLink v-for="(post, index) in posts"
|
||||
:key="index"
|
||||
:to="post.routerLink"
|
||||
class="bg-amber flex grow">
|
||||
<PostCard :post="post"
|
||||
class="m-2 bg-red w-full">
|
||||
</PostCard>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import PostContentMenu from '@/views/main/PostContentMenu.vue'
|
||||
import PostCard from "@/views/main/PostCard.vue"
|
||||
import posts from "@/views/main/posts.json"
|
||||
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
src/views/main/CreatorCard.vue
Normal file
22
src/views/main/CreatorCard.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
|
||||
<v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
|
||||
<v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
|
||||
<v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
|
||||
<v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
defineProps({
|
||||
creator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (profile) => {
|
||||
return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,951 +0,0 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<!-- "Mobile -->
|
||||
<v-row class="fluid hidden-md-and-up social-mobile-container"
|
||||
style="margin-top: -10px; 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="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons">
|
||||
|
||||
<!-- Facebook -->
|
||||
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||||
<a href="https://www.facebook.com/GuillaumeMousseau222">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Facebook"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Instagram -->
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||||
<a href="https://www.instagram.com/guillaumeaime/">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!-- TikTok -->
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||||
<a href="https://www.tiktok.com/@guillaumeaime">
|
||||
<v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
|
||||
alt="TikTok"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<v-spacer class="hidden-xs"> </v-spacer>
|
||||
</v-row>
|
||||
|
||||
<!-- User informations Name title and description -->
|
||||
<v-row class="social-container-mobile">
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ name }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer xs="12" sm="4"></v-spacer>
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
|
||||
class="social-icon-group-mobile">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;"
|
||||
text="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 : Ma mission est claire :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Bannière Pc -->
|
||||
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; 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="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col">
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- Nav-Btn -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
|
||||
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item v-for="item in navigationItems" :key="item.link">
|
||||
<router-link :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background" elevation="0">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 3000px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<v-container class="profile-container hidden-sm-and-down">
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/GuillaumeMousseau222">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
|
||||
<a href="https://www.tiktok.com/@guillaumeaime">
|
||||
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;"
|
||||
text="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 : Ma mission est claire :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Example carte dynamique avec expension -->
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-col xl="10" xxl="8">
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">POST DYNAMIQUE</h1>
|
||||
</v-col>
|
||||
<v-col class="text-right">
|
||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
||||
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-img :src="imageSrc" title="Guillaumem"></v-img>
|
||||
<p class="text-justify pa-10" style="margin-bottom: -10px; font-size: 1em">
|
||||
C’est un honneur de vous présenter mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement.
|
||||
</p>
|
||||
<div v-if="showMore">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="6" class="text-center pa-0">
|
||||
<v-img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png" @click="openCarousel(0)" class="image-full"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="6" class="text-center pa-0">
|
||||
<v-img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png" @click="openCarousel(1)" class="image-full"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<p class="text-justify pa-10" style="font-size: 1em; margin-bottom: -25px">
|
||||
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p class="text-justify pa-10" style="font-size: 1em;">
|
||||
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
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="font-size: 1em;">
|
||||
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire"></v-text-field>
|
||||
<v-row>
|
||||
<v-col class="text-right" style="margin-right: 25px">
|
||||
<v-btn variant="plain" @click="toggleShowMore" class="text-body-2" style="margin-bottom: 10px; font-weight: bold">
|
||||
{{ showMore ? 'AFFICHER MOINS' : 'AFFICHER PLUS' }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="carouselVisible" max-width="600px">
|
||||
<v-carousel v-model="currentImage">
|
||||
<v-carousel-item v-for="(image, index) in images" :key="index">
|
||||
<v-img :src="image"></v-img>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
|
||||
<!-- Card youtube balado -->
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<v-card style="border-radius: 20px;">
|
||||
<v-container>
|
||||
<v-row class="mb-0"
|
||||
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<StripePayment></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 3000px;">
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile" Donation -->
|
||||
<v-col class="hidden-md-and-up sticky-bottom-label"
|
||||
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
|
||||
<!-- Barre cliquable pour ouvrir le drawer -->
|
||||
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
|
||||
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
|
||||
JE SOUTIENS
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<StripePayment></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import PostContentMenu from '@/layouts/PostContentMenu.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
|
||||
let name = 'Guillaume Mousseau';
|
||||
let title = 'Créateur de contenus';
|
||||
let drawerbottom = ref(false);
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
|
||||
// Ajouter la variable réactive pour gérer l'état d'affichage du contenu
|
||||
let showMore = ref(false);
|
||||
|
||||
// Ajouter les variables et méthodes pour gérer le carrousel
|
||||
let carouselVisible = ref(false);
|
||||
let currentImage = ref(0);
|
||||
let images = [
|
||||
'/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
|
||||
'/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg',
|
||||
// Ajoutez ici toutes les images que vous souhaitez afficher dans le carrousel
|
||||
];
|
||||
|
||||
const toggleShowMore = () => {
|
||||
showMore.value = !showMore.value;
|
||||
};
|
||||
|
||||
const openCarousel = (index) => {
|
||||
currentImage.value = index;
|
||||
carouselVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
right: 10%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.main-background {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #cc6f91;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-weight: 400;
|
||||
margin-left: 3%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin-top: -15%;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #006d77;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #0baab2;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #006d77;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #0baab2;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.btn-card-options {
|
||||
background-color: #f4f4f4;
|
||||
width: 50px;
|
||||
margin-left: -12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
margin-left: -13%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.h1-navigation {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
height: 40px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<default-layout></default-layout>
|
||||
<banner></banner>
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import Banner from '@/views/main/CreatorViewComponents/Banner.vue';
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Bannière Pc -->
|
||||
<v-row style="margin-top: -15px; position: relative; z-index: 0; width: 100vw;">
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-img class="profile-banner" max-height="375" max-width="100%" :src="imageSrc" cover
|
||||
style="width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
|
||||
</v-col>
|
||||
</v-row >
|
||||
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
|
||||
</script>
|
||||
20
src/views/main/Footer.vue
Normal file
20
src/views/main/Footer.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
|
||||
<footer>
|
||||
|
||||
<div class="text-black text-center ">
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
footer {
|
||||
@apply flex justify-center pt-10
|
||||
}
|
||||
|
||||
</style>
|
||||
127
src/views/main/Header.vue
Normal file
127
src/views/main/Header.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
|
||||
<header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">
|
||||
|
||||
<div v-if="showPopup"
|
||||
ref="popupRef"
|
||||
class="bg-white shadow-md shadow-gray-700 top-16 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@mouseenter="handleMouseEnter">
|
||||
<SiteMenu></SiteMenu>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer">
|
||||
</v-app-bar-nav-icon>
|
||||
|
||||
<RouterLink to="/">
|
||||
<v-img src="/medias/hutopy.png"
|
||||
ref="popupButtonRef"
|
||||
alt="Hutopy Logo"
|
||||
class="mr-2 h-10 w-20"
|
||||
@mouseenter="togglePopup(true)">
|
||||
</v-img>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center">
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
placeholder="Search"
|
||||
hide-details
|
||||
clearable
|
||||
class="rounded-full mx-2 w-80"
|
||||
append-inner-icon="mdi-magnify"
|
||||
@click:append-inner="onSearch">
|
||||
</v-text-field>
|
||||
|
||||
<v-icon class="mx-2">mdi-bell-outline</v-icon>
|
||||
|
||||
<span class="flex items-center mx-2">
|
||||
|
||||
<span class="text-black text-base font-sans font-medium mr-3">
|
||||
{{ currentUserName }}
|
||||
</span>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
class="rounded-circle h-10 w-10"
|
||||
alt="Logo"/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, onUnmounted} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import SiteMenu from "@/views/main/SiteMenu.vue";
|
||||
|
||||
|
||||
const showPopup = ref(false);
|
||||
const popupRef = ref(null);
|
||||
const popupButtonRef = ref(null);
|
||||
let mouseLeaveTimeout = null;
|
||||
|
||||
const togglePopup = (state) => {
|
||||
clearTimeout(mouseLeaveTimeout)
|
||||
showPopup.value = state
|
||||
};
|
||||
|
||||
// Function to handle mouse enter event
|
||||
const handleMouseEnter = () => {
|
||||
clearTimeout(mouseLeaveTimeout);
|
||||
};
|
||||
|
||||
// Function to handle mouse leave event
|
||||
const handleMouseLeave = () => {
|
||||
mouseLeaveTimeout = setTimeout(() => {
|
||||
showPopup.value = false;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Add event listener for clicks outside the popup when component is mounted
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
// Remove event listener when component is unmounted
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
// Function to handle clicks outside the popup
|
||||
const handleClickOutside = (event) => {
|
||||
if (popupRef.value
|
||||
&& !popupRef.value.contains(event.target)
|
||||
&& popupButtonRef.value
|
||||
&& !popupButtonRef.value.contains(event.target)) {
|
||||
showPopup.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const currentUserName = 'Jo Bumble'
|
||||
const searchQuery = ref('');
|
||||
const router = useRouter();
|
||||
|
||||
const onSearch = () => {
|
||||
const query = searchQuery.value.trim();
|
||||
|
||||
if (!query) {
|
||||
router.push('/browse');
|
||||
} else {
|
||||
const words = query.split(' ');
|
||||
|
||||
if (words.length === 1) {
|
||||
router.push(`/@${words[0]}`);
|
||||
} else {
|
||||
router.push({name: 'browse', query: {q: query}});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
164
src/views/main/Home.vue
Normal file
164
src/views/main/Home.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="px-40 flex flex-column items-center border-4 border-amber-700 ">
|
||||
|
||||
<div class="py-20 w-1/2">
|
||||
<img src="/images/hutopymedia/banners/hutopy.png"
|
||||
alt="Hutopy Logo">
|
||||
</div>
|
||||
|
||||
<div class="py-2 w-full ">
|
||||
<img src="/images/hutopymedia/homepage/bannierehomepage.png"
|
||||
alt="Hutopy Banner"
|
||||
class="rounded-xl">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center h-40 w-full bg-red overflow-auto ">
|
||||
|
||||
<img src="/images/hutopymedia/homepage/creer.png"
|
||||
alt="Create CallToAction"
|
||||
class="rounded-xl">
|
||||
|
||||
<img src="/images/hutopymedia/homepage/partager.png"
|
||||
alt="Share CallToAction"
|
||||
class="rounded-xl">
|
||||
|
||||
<img src="/images/hutopymedia/homepage/inspirer.png"
|
||||
alt="Inspire CallToAction"
|
||||
class="rounded-xl">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<img src="/images/hutopymedia/homepage/votrehutopy.png"
|
||||
alt="YourHutopy">
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
|
||||
<div>
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 space-x-2 space-y-2">
|
||||
|
||||
<v-img src="/images/hutopymedia/homepage/grinding.png"
|
||||
class="rounded-lg">
|
||||
</v-img>
|
||||
|
||||
<v-img src="/images/hutopymedia/homepage/microphone.png"
|
||||
class="rounded-lg">
|
||||
</v-img>
|
||||
|
||||
<v-img src="/images/hutopymedia/homepage/girlarmy.png"
|
||||
class="rounded-lg">
|
||||
</v-img>
|
||||
|
||||
<v-img src="/images/hutopymedia/homepage/girlvr.png"
|
||||
class="rounded-lg skew-x-12">
|
||||
</v-img>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- They are on the Hutopy section -->
|
||||
<v-row style="margin-top: 20px; margin-bottom: 10px;">
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- Subtitle :Ils sont sur Hutopy -->
|
||||
<v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
|
||||
<h1 style=" margin-bottom: 20px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
|
||||
<!-- Account links -->
|
||||
<v-row justify="center" class="profile-images">
|
||||
<v-col>
|
||||
<RouterLink to="/">
|
||||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
|
||||
alt="Profile Image" class="profile-image ">
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<RouterLink to="/@guillaumeaime">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<RouterLink to="@chloebeaugrand">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-row justify='center'>
|
||||
<RouterLink to="/browse">
|
||||
<v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
<v-spacer></v-spacer>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
p {
|
||||
@apply my-4 font-semibold font-sans
|
||||
}
|
||||
|
||||
.container-spacer {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: auto;
|
||||
border-radius: 35px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.overlay p {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,672 +0,0 @@
|
||||
<template>
|
||||
<div style="background-color: #F4F4F4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<!--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 container-spacer header-container">
|
||||
<v-row justify="center" align="center">
|
||||
<v-col></v-col>
|
||||
<v-col cols="5" xl="4" xxl="4">
|
||||
<v-img class="profile-banner" src="/images/hutopymedia/banners/hutopy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!--Header -->
|
||||
<v-container class="container-spacer">
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||||
<v-img class="profile-banner banner-homepage" src="/images/hutopymedia/homepage/bannierehomepage.png"
|
||||
style="border-radius: 20px;"></v-img>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
<v-container class="container-spacer">
|
||||
<v-row class="d-flex justify-center creer-profiter-inspirer-row">
|
||||
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||||
<v-row justify="center" align="center" class="créer-profiter-inspirer-row">
|
||||
<v-col cols="4" sm="4" md="4">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
|
||||
<v-img src="/images/hutopymedia/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>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="4" sm="4" md="4">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
|
||||
<v-img src="/images/hutopymedia/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;">
|
||||
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>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="4" sm="4" md="4">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
|
||||
<v-img src="/images/hutopymedia/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;">
|
||||
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-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Votre Hutopy -->
|
||||
<v-container class="container-spacer">
|
||||
<v-row justify="center">
|
||||
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
|
||||
<v-row justify="center">
|
||||
<v-col cols="6" md="7" lg="6">
|
||||
|
||||
<!-- Subtitle : Votre Hutopy -->
|
||||
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
|
||||
src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
|
||||
|
||||
<!-- Your Hutopy text-->
|
||||
<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="12" class="text-center">
|
||||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- 4 pictures -->
|
||||
<v-col cols="6" md="5" lg="6">
|
||||
<v-row justify="center" class="votre-hutopy-img">
|
||||
<v-col cols="6" sm="12" md="12" lg="6">
|
||||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/grinding.png"
|
||||
class="hidden-md-and-down" hidden-and-down></v-img>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="12" md="12" lg="6">
|
||||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="12" md="6" lg="6">
|
||||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" md="6" lg="6">
|
||||
<v-img style="border-radius: 30px;" class="d-none d-md-block"
|
||||
src="/images/hutopymedia/homepage/girlvr.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- They are on the Hutopy section -->
|
||||
<v-row style="margin-top: 20px; margin-bottom: 10px;">
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- Subtitle :Ils sont sur Hutopy -->
|
||||
<v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
|
||||
<h1 style=" margin-bottom: 20px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
|
||||
<!-- Account links -->
|
||||
<v-row justify="center" class="profile-images">
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'Hutopy' }">
|
||||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
|
||||
alt="Profile Image" class="profile-image ">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'guillaumeaime' }">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'chloebeaugrand' }">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-row justify='center'>
|
||||
<router-link :to="{ name: 'userbrowser' }">
|
||||
<v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-row>
|
||||
<v-spacer></v-spacer>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- Mobile ---------------------------------------------------------------------------------------->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<div>
|
||||
<!--Banner -->
|
||||
<img src="/images/hutopymedia/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
|
||||
|
||||
<!-- Créer -->
|
||||
<v-row style="margin-top: 30px;" align="center">
|
||||
<v-col cols="6">
|
||||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||||
src="/images/hutopymedia/homepage/creer.png"></v-img>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Partager -->
|
||||
<v-row align="center">
|
||||
<v-col>
|
||||
<p style=" margin: 20px; text-align: justify;" class="center-vertical">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-col>
|
||||
<v-col cols="6">
|
||||
<v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
|
||||
src="/images/hutopymedia/homepage/partager.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Inspirer -->
|
||||
<v-row align="center">
|
||||
<v-col cols="6">
|
||||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||||
src="/images/hutopymedia/homepage/inspirer.png"></v-img>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Votre Hutopy : Title -->
|
||||
<v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
|
||||
src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
|
||||
|
||||
<!-- Votre Hutopy : Text -->
|
||||
<v-row align="center">
|
||||
<v-col cols="11" style="margin: 4%;">
|
||||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||||
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 style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||||
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>
|
||||
</v-row>
|
||||
|
||||
<!-- 4 pictures -->
|
||||
<v-row style="margin-left: 15px; margin-right: 15px;">
|
||||
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
|
||||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
|
||||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/grinding.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="margin-left: 15px; margin-right: 15px;">
|
||||
<v-col style="padding-left: 15px; padding-right: 15px;">
|
||||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col style="padding-left: 15px; padding-right: 15px;">
|
||||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlvr.png"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Inscription Btn -->
|
||||
<v-container align="center">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="4">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- They are on the Hutopy section -->
|
||||
<h1
|
||||
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
|
||||
<v-col>
|
||||
<v-row justify="center" class="profile-images">
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'Hutopy' }">
|
||||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
|
||||
alt="Profile Image" class="profile-image ">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'guillaumeaime' }">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'chloebeaugrand' }">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-row justify='center'>
|
||||
<router-link :to="{ name: 'userbrowser' }">
|
||||
<v-btn style="margin-top:30px; border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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.firstName"
|
||||
:subtitle="item.lastName"></v-list-item>
|
||||
</v-list>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script async setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
let itemList = ref([]);
|
||||
let errorNoAccessSnackBar = ref(false);
|
||||
|
||||
const goToLoginPage = () => {
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.center-vertical {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layer1-backgroundmobile {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layer2-backgroundmobile {
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.container-spacer {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: auto;
|
||||
border-radius: 35px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(163, 14, 121, 0.80);
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.image-container:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay p {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-container {
|
||||
position: relative;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.v-card-imagecontainerpos {
|
||||
margin-top: 55px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 601px) and (max-width: 889px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.06em;
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-left: -120px;
|
||||
margin-top: -120px
|
||||
}
|
||||
|
||||
.card-size {
|
||||
transform: scale(.7);
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(1.19)
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 890px) and (max-width: 960px) {
|
||||
|
||||
.header-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.card-size {
|
||||
transform: scale(.75);
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-left: -80px;
|
||||
margin-top: -130px
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(1.07)
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 961px) and (max-width: 1280px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(1.06)
|
||||
}
|
||||
|
||||
.card-size {
|
||||
transform: scale(.90);
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-left: -55px;
|
||||
margin-top: -90px
|
||||
}
|
||||
|
||||
.in-between-image {
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.72);
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1281px) and (max-width: 1920px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.card-size {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(1.03)
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-left: -25px;
|
||||
margin-top: -70px
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.64);
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(1.0)
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.90);
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2561px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.créer-profiter-inspirer-row {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.card-size {
|
||||
transform: scale(.98);
|
||||
}
|
||||
|
||||
.banner-homepage {
|
||||
transform: scale(.98)
|
||||
}
|
||||
|
||||
.profile-images {
|
||||
gap: 15px;
|
||||
transform: scale(.978);
|
||||
}
|
||||
|
||||
.votre-hutopy-img {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,12 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<!--PC -->
|
||||
<div class="hutopy-backgroud-color">
|
||||
<div class="hidden-xs flex-col items-center page-margin">
|
||||
<v-container>
|
||||
|
||||
<div class="flex hidden-xs flex-col items-center page-margin">
|
||||
|
||||
<!-- 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/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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<img class="h-20"
|
||||
src="/images/hutopymedia/banners/hutopy.png" />
|
||||
|
||||
<!-- Home btn -->
|
||||
<v-container class="row-between-logo-text">
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
@@ -152,10 +140,6 @@
|
||||
dans le ciel de notre utopie partagée.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -185,8 +169,6 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
import { ref } from 'vue';
|
||||
|
||||
46
src/views/main/PostCard.vue
Normal file
46
src/views/main/PostCard.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class=" shadow-lg rounded-lg max-w-sm">
|
||||
|
||||
<div class="h-48 object-cover bg-purple">
|
||||
|
||||
<v-img :src="props.post.banner"
|
||||
v-if="!isHttpUrl">
|
||||
</v-img>
|
||||
|
||||
<iframe v-if="isHttpUrl"
|
||||
:src="props.post.banner"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-bold">{{ props.post.title }}</div>
|
||||
<div class="text-sm text-gray-500">{{ props.post.title }}</div>
|
||||
<div class="text-base text-gray-700">{{ props.post.content }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineProps, computed} from 'vue';
|
||||
|
||||
const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
|
||||
|
||||
const props = defineProps({
|
||||
post: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (post) => {
|
||||
return 'banner' in post && 'image' in post && 'name' in post && 'title' in post && 'description' in post;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
160
src/views/main/PostContentMenu.vue
Normal file
160
src/views/main/PostContentMenu.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<v-col cols="12">
|
||||
<v-container>
|
||||
<v-card style="border-radius: 30px" elevation="10">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Boutons de sélection -->
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('title')">
|
||||
<v-icon>mdi-format-title</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('text')">
|
||||
<v-icon>mdi-text</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('image')">
|
||||
<v-icon>mdi-image</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('video')">
|
||||
<v-icon>mdi-video</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('audio')">
|
||||
<v-icon>mdi-volume-high</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
||||
<v-btn elevation="0" icon @click="selectType('comments')">
|
||||
<v-icon>mdi-comment</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Affichage du contenu en fonction du type sélectionné -->
|
||||
<v-card-text>
|
||||
<v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
|
||||
@dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
|
||||
<v-col cols="10">
|
||||
<template v-if="content.type === 'title'">
|
||||
<v-text-field v-model="content.value" label="Titre"></v-text-field>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'text'">
|
||||
<v-textarea v-model="content.value" label="Texte"></v-textarea>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'image'">
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-file-input v-model="content.value" label="Image"></v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'video'">
|
||||
<v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'audio'">
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-icon>mdi-volume-high</v-icon>
|
||||
</v-col>
|
||||
<v-col cols="10">
|
||||
<v-file-input v-model="content.value" label="Audio"></v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else-if="content.type === 'comments'">
|
||||
<v-text-field v-model="content.value" label="Commentaires"></v-text-field>
|
||||
</template>
|
||||
</v-col>
|
||||
<v-col cols="2" class="d-flex justify-center align-center">
|
||||
<v-btn icon @click="removeContent(index)" class="remove-button">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Boutons Post, Preview et Cancel -->
|
||||
<v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
|
||||
<v-col class="d-flex justify-end" style="margin-right: 4%;">
|
||||
<v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
|
||||
elevation="4">Post</v-btn>
|
||||
<v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
|
||||
elevation="5">Preview</v-btn>
|
||||
<v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const contents = ref([]);
|
||||
let dragIndex = null;
|
||||
|
||||
const selectType = (type) => {
|
||||
console.log("Type sélectionné:", type);
|
||||
contents.value.push({ type: type, value: '' });
|
||||
};
|
||||
|
||||
const removeContent = (index) => {
|
||||
contents.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const postContent = () => {
|
||||
// Implémenter la logique pour poster le contenu
|
||||
};
|
||||
|
||||
const previewContent = () => {
|
||||
// Implémenter la logique pour prévisualiser le contenu
|
||||
};
|
||||
|
||||
const cancelPost = () => {
|
||||
if (contents.value.length > 0) {
|
||||
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
||||
contents.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const dragStart = (index) => {
|
||||
dragIndex = index;
|
||||
};
|
||||
|
||||
const drop = (index) => {
|
||||
if (dragIndex !== null && index !== null) {
|
||||
const draggedItem = contents.value[dragIndex];
|
||||
contents.value.splice(dragIndex, 1);
|
||||
contents.value.splice(index, 0, draggedItem);
|
||||
dragIndex = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -20%;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.draggable-row {
|
||||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
78
src/views/main/SideBar.vue
Normal file
78
src/views/main/SideBar.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
|
||||
<aside>
|
||||
|
||||
<nav>
|
||||
|
||||
<h2>Subscriptions</h2>
|
||||
|
||||
<ul class="space-y-32">
|
||||
<li>
|
||||
<RouterLink to="/@hutopy">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Hutopy
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@leffet">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
L'Effet
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@chloebeaugrand">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Chloe Beaugrand
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@guillaumeaime">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Guillaume Aime
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@mathieucaron">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Mathieu Caron
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@arps">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
ARPS
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.nav-button {
|
||||
@apply bg-purple-800 rounded p-1 m-2
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply bg-purple-400
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply font-sans font-bold ml-2
|
||||
}
|
||||
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
81
src/views/main/SiteMenu.vue
Normal file
81
src/views/main/SiteMenu.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
|
||||
<div class="flex flex-column py-4 px-8">
|
||||
|
||||
<div class="flex flex-row self-center pb-4 pt-2">
|
||||
|
||||
<!-- Facebook -->
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img src="/images/hutopymedia/icons/pink/facebookpink.png"
|
||||
alt="Facebook Logo">
|
||||
</a>
|
||||
|
||||
<!-- Instagram -->
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<img src="/images/hutopymedia/icons/pink/instagrampink.png"
|
||||
alt="Instagram Logo">
|
||||
</a>
|
||||
|
||||
<!-- X / Twitter -->
|
||||
<a href="https://twitter.com/Hutopyinc">
|
||||
<img src="/images/hutopymedia/icons/pink/xpink.png"
|
||||
alt="X Logo">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1">
|
||||
|
||||
<RouterLink class="nav-button" to="/join">
|
||||
Aidez-nous
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/helpandcontact">
|
||||
Aide & Contact
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/faq">
|
||||
FAQ
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/guideforcreators">
|
||||
Guide pour les créateurs
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/termsandconditions">
|
||||
Conditions générales
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/contentpolicy">
|
||||
Politique de Contenu
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/about">
|
||||
À Propos
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/pricing">
|
||||
Frais
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.nav-button {
|
||||
@apply rounded m-1 flex justify-center font-sans
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply text-purple-800 bg-gray-50
|
||||
}
|
||||
|
||||
img {
|
||||
@apply m-2 w-10 h-10
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,883 +0,0 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<!-- "Mobile -->
|
||||
<v-row class="fluid hidden-md-and-up social-mobile-container"
|
||||
style="margin-top: -10px; 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="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
|
||||
hidden-md-and-down>
|
||||
|
||||
<!-- Facebook -->
|
||||
<v-row no-gutters class="d-flex justify-space-between align-center"
|
||||
style="margin-left: 3%; margin-right: 3%;">
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
|
||||
class="d-flex justify-center align-center">
|
||||
<a href="https://www.facebook.com/Hutopy">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Facebook"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Instagram -->
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
|
||||
class="d-flex justify-center align-center">
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
|
||||
class="d-flex justify-center align-center">
|
||||
<a href="https://twitter.com/Hutopyinc">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png"
|
||||
alt="X"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<v-spacer class="hidden-xs"> </v-spacer>
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
<!-- User informations Name title and description -->
|
||||
<v-row class="social-container-mobile">
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ name }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer xs="12" sm="4"></v-spacer>
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
|
||||
class="social-icon-group-mobile">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;"
|
||||
text="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
||||
title="À propos d'Hutopy :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Bannière Pc -->
|
||||
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
|
||||
hidden-sm-and-up>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="hidden-sm-and-down"
|
||||
style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up>
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- Nav-Btn -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
|
||||
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item v-for="item in navigationItems" :key="item.link">
|
||||
<router-link :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background"
|
||||
elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 400px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- creators -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||
<v-container fluid style="margin-bottom: -40px; font-size: 3rem;">
|
||||
<v-row justify="center" class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" class="text-left d-flex justify-center ">
|
||||
<div class="headline font-weight-bold">CRÉATEURS</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
<v-container class="mt-10">
|
||||
<v-row justify="center">
|
||||
<router-link v-for="(profile, index) in profiles" :key="index"
|
||||
:to="profile.routerLink" class="text-decoration-none">
|
||||
<v-col>
|
||||
<v-card class="mb-4 card-equal-width"
|
||||
style="max-width: 250px; height: 300px;">
|
||||
<v-img :src="profile.imageUrl" height="200px" width="300px"
|
||||
style="margin-top: 10px;"></v-img>
|
||||
<v-card-title style="font-weight: 600;" class="text-center">{{
|
||||
profile.name
|
||||
}}</v-card-title>
|
||||
<v-card-text class="text-center">{{ profile.description }}</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container"
|
||||
style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<v-card style="border-radius: 20px;">
|
||||
<v-container>
|
||||
<v-row class="mb-0"
|
||||
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 400px;">
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile" Donation -->
|
||||
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
|
||||
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
|
||||
|
||||
<!-- Barre cliquable pour ouvrir le drawer -->
|
||||
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
|
||||
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
|
||||
JE SOUTIENS
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
||||
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
||||
let name = 'Hutopy'
|
||||
let title = 'Page officiel'
|
||||
let drawerbottom = ref(false)
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
|
||||
const profiles = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "Hutopy",
|
||||
description: "Page officielle",
|
||||
imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
||||
routerLink: 'Hutopy'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "L'effet",
|
||||
description: "Fondation",
|
||||
imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
|
||||
routerLink: 'leffet'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Guillaume M",
|
||||
description: "Créateur de contenus",
|
||||
imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
|
||||
routerLink: 'guillaumeaime'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Chloé Beaugrand",
|
||||
description: "Spécialiste en médias sociaux",
|
||||
imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
|
||||
routerLink: 'chloebeaugrand'
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
name: "Mathieu Caron",
|
||||
description: "Entrevue Atypique",
|
||||
imageUrl: '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png',
|
||||
routerLink: 'mathieuCaron'
|
||||
},
|
||||
|
||||
{
|
||||
id: 6,
|
||||
name: "ARPS",
|
||||
description: "Agence créative",
|
||||
imageUrl: '/images/usersmedia/ARPS/profilepictures/profileARPS.png',
|
||||
routerLink: 'ARPS'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
right: 10%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.main-background {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #23393b;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-weight: 400;
|
||||
margin-left: 3%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin-top: -15%;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #6b0065;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #a30e79;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #a30e79;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #6b0065;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.btn-card-options {
|
||||
background-color: #f4f4f4;
|
||||
width: 50px;
|
||||
margin-left: -12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
margin-left: -13%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.h1-navigation {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
height: 40px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -150px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,5 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color:#f4f4f4">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
|
||||
</v-row>
|
||||
|
||||
@@ -47,9 +44,9 @@
|
||||
:readonly="!isEditing"></v-text-field>
|
||||
</v-form>
|
||||
<v-col class="text-right">
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="">
|
||||
<RouterLink :to="{ name: 'creatorfolio' }" class="">
|
||||
<v-btn style="margin-right: 20px;">Retour</v-btn>
|
||||
</router-link>
|
||||
</RouterLink>
|
||||
<v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
|
||||
</v-col>
|
||||
</v-col>
|
||||
@@ -57,13 +54,9 @@
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script async setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import MyUserModel from "@/models/myUserModel.js";
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
|
||||
51
src/views/main/creators.json
Normal file
51
src/views/main/creators.json
Normal file
@@ -0,0 +1,51 @@
|
||||
[
|
||||
{
|
||||
"ìd": 1,
|
||||
"name": "Hutopy",
|
||||
"title": "Page officielle",
|
||||
"description": "Site officiel pour Hutopy. Venez-nous-y retrouver avec tous vos fans!",
|
||||
"imageUrl": "/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png",
|
||||
"routerLink": "@hutopy",
|
||||
"about": "Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur.",
|
||||
"contacts": {
|
||||
"twitter": "https://twitter.com/Hutopyinc",
|
||||
"facebook": "https://www.facebook.com/Hutopy",
|
||||
"instagram": "https://www.instagram.com/hutopy.inc/"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "L'effet",
|
||||
"description": "Fondation",
|
||||
"imageUrl": "/images/usersmedia/leffet/profilepictures/leffetProfile01.png",
|
||||
"routerLink": "@leffet"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Guillaume M",
|
||||
"description": "Créateur de contenus",
|
||||
"imageUrl": "/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png",
|
||||
"routerLink": "@guillaumeaime"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Chloé Beaugrand",
|
||||
"description": "Spécialiste en médias sociaux",
|
||||
"imageUrl": "/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png",
|
||||
"routerLink": "@chloebeaugrand"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Mathieu Caron",
|
||||
"description": "Entrevue Atypique",
|
||||
"imageUrl": "/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png",
|
||||
"routerLink": "@mathieuCaron"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "ARPS",
|
||||
"description": "Agence créative",
|
||||
"imageUrl": "/images/usersmedia/ARPS/profilepictures/profileARPS.png",
|
||||
"routerLink": "@ARPS"
|
||||
}
|
||||
]
|
||||
26
src/views/main/posts.json
Normal file
26
src/views/main/posts.json
Normal file
@@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"creatorId": 1,
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"date": "24-04-2024",
|
||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user