jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some changes

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-06-25 00:50:49 -04:00
parent 0a9ae00867
commit 5d3429afb2
50 changed files with 3555 additions and 10927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1097
src/views/manualusers/ARPS.vue
View File

File diff suppressed because it is too large Load Diff

1043
src/views/manualusers/ChloeProfile.vue
View File

File diff suppressed because it is too large Load Diff

1162
src/views/manualusers/GuillaumeAime.vue
View File

File diff suppressed because it is too large Load Diff

936
src/views/manualusers/HutopyProfile.vue
View File

@@ -1,936 +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="4" xl="4" xxl="4" 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: 1000px;"></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="5" xl="4" xxl="4">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
<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/Hutopy">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://www.instagram.com/hutopy.inc/">
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2">
</a>
<a href="https://twitter.com/Hutopyinc">
<img class="socialicons" src="/images/hutopymedia/icons/black/xblack.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="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>
</v-container>
</v-container>
<!-- <PostContentMenu style="margin-top: -30px;"></PostContentMenu> Post -->
<!-- Release v0.1 -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
Déploiement de la version 0.10 d'Hutopy</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> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
<v-container>
<v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Release v0.1"></v-img>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
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.</p>
<!-- 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-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
</v-col>
<!-- "Large-Monitor-RightCol" Donation -->
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" 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: 1000px;">
</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' },
];
</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>

846
src/views/manualusers/LeffetProfile.vue
View File

@@ -1,478 +1,264 @@
<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="6" 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>
<!-- 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>
<!-- L'effet -->
<v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://fondationleffet.ca/">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/leffetblack.png"
alt="Instagram"></v-img>
</a>
</v-col>
</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" style="font-size: 2rem">
{{ 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="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
title="Notre mission">
</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="4" xl="4" xxl="4" 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: 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="5" xl="4" xxl="4">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
<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/Hutopy">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://fondationleffet.ca/">
<img class="socialicons" src="/images/hutopymedia/icons/black/leffetblack.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="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
title="Notre mission">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
</v-container>
</v-container>
</v-container>
<v-container>
</v-container>
<v-container style="margin-top: -30px"> <v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
DOCU-PODCAST</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> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
<v-container>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px">
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
C’est un honneur de vous
En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
de la
Fondation l'Effet, Marc-Olivier Hébert. Cette homme est un Ange sur 2 pattes et un Master de
l'Introspection :
'' Quand j'ai Compris que Mon Seul Obstacle Était Moi-même '' ! Merci de continuer à faire partie de
cette
AVENTURE et à être les PIONNIERS de mon Docu-Podcast. Seuls vous, Fidèles PIADINS avez le DROIT à
l'ENTIÈRETÉ
de ces images !!!
Marc-Olivier
Marc-Olivier Hébert
Le nom de la Fondation vient de l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette
théorie
implique que le battement d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
un
paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long terme,
des
changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également aux
sciences humaines et à l’environnement. <br><br>
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
le
précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
arriver à
une chose gigantesque.
<br><br>
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
soit
toujours positif.
<br><br>
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
participants
et des
bénéficiaires.
</p>
<!-- 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-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card></v-container>
<!-- Le nom -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
C'EST PARTI POUR 2024!</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> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
<v-container>
<v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px">
22-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
un paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long
terme,
des changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également
aux
sciences humaines et à l’environnement.<br>
<br>
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
le précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
arriver à une chose gigantesque.<br>
<br>
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
soit toujours positif.
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
participants et
des bénéficiaires.
</p>
<!-- 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-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
</v-col>
<!-- "Large-Monitor-RightCol" Donation -->
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" 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="1578f5ee-6cd0-42ac-9959-249cd10b6bfb"></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" 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-row class="fluid" 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 style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
<!-- 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="1578f5ee-6cd0-42ac-9959-249cd10b6bfb"></StripePayment>
<!-- "Core (Menu / Center / Donation)" -->
<v-row>
<!-- Profile Info Picture name title & description -->
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
<v-container class="profile-container">
<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/Hutopy">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
</a>
<a href="https://fondationleffet.ca/">
<img class="socialicons" src="/images/hutopymedia/icons/black/leffetblack.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="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
title="Notre mission">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-container>
</v-row>
</v-container>
</v-bottom-sheet>
</v-container>
</v-container>
<v-container>
</v-container>
</div>
</template>
<v-container style="margin-top: -30px">
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
DOCU-PODCAST</h1>
</v-col>
<FooterLayout></FooterLayout>
</div>
<!--<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> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
<v-container>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px">
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
C’est un honneur de vous
En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
de la
Fondation l'Effet, Marc-Olivier Hébert. Cette homme est un Ange sur 2 pattes et un Master de
l'Introspection :
'' Quand j'ai Compris que Mon Seul Obstacle Était Moi-même '' ! Merci de continuer à faire partie de
cette
AVENTURE et à être les PIONNIERS de mon Docu-Podcast. Seuls vous, Fidèles PIADINS avez le DROIT à
l'ENTIÈRETÉ
de ces images !!!
Marc-Olivier
Marc-Olivier Hébert
Le nom de la Fondation vient de l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette
théorie
implique que le battement d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
un
paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long terme,
des
changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également aux
sciences humaines et à l’environnement. <br><br>
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
le
précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
arriver à
une chose gigantesque.
<br><br>
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
soit
toujours positif.
<br><br>
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
participants
et des
bénéficiaires.
</p>
<!-- 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-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
<!-- Le nom -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
C'EST PARTI POUR 2024!</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> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
<v-container>
<v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px">
22-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
un paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long
terme,
des changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également
aux
sciences humaines et à l’environnement.<br>
<br>
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
le précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
arriver à une chose gigantesque.<br>
<br>
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
soit toujours positif.
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
participants et
des bénéficiaires.
</p>
<!-- 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-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div>
</v-card>
</v-container>
</v-col>
</v-row>
</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/leffet/banners/banner02.png';
let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
let name = 'L\'EFFET'
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' },
];
</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;
@@ -484,24 +270,10 @@ let navigationItems = [
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;
@@ -519,16 +291,6 @@ let navigationItems = [
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;
@@ -556,13 +318,6 @@ let navigationItems = [
margin-top: 10px;
}
.card-date {
margin-left: 10px;
margin-top: -18px;
margin-bottom: -20px;
font-size: .8rem;
}
.social-container {
background-color: #79cc02;
border-top-right-radius: 30px;
@@ -590,29 +345,10 @@ let navigationItems = [
text-align: center;
}
.social-container2-mobile {
background-color: #fcc602;
z-index: 1000;
font-size: 1.2rem;
font-weight: 500;
color: white;
}
.social-icon-group-mobile {
background-color: #588801;
}
.mini-profile-picture {
border-radius: 100px;
}
.btn-card-options {
background-color: #f4f4f4;
width: 50px;
margin-left: -12px;
margin-top: 10px;
}
.mobile-profile-picture-creator {
height: 150px;
width: 150px;
@@ -622,34 +358,11 @@ let navigationItems = [
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%);
@@ -676,12 +389,6 @@ let navigationItems = [
transform: scale(1.5) translateY(-30%) translateX(0%);
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -112px;
}
.occupation-info {
font-size: 1rem;
}
@@ -689,10 +396,6 @@ let navigationItems = [
.card-youtube {
min-height: 250px;
}
.name-info-mobile {
font-size: 1.6rem;
}
}
@media (min-width: 599px) and (max-width: 749px) {
@@ -706,13 +409,6 @@ let navigationItems = [
margin-left: -3%;
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -110px;
}
.name-info {
font-size: 1.2rem;
}
@@ -736,12 +432,6 @@ let navigationItems = [
margin-left: -3%;
}
.profile-container-mobile {
width: 110%;
margin-left: -3%;
margin-top: -110px;
}
.name-info {
font-size: 1.2rem;
}
@@ -760,11 +450,6 @@ let navigationItems = [
margin-left: -30px;
}
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container {
margin-top: -185px;
min-width: 480px
@@ -774,11 +459,6 @@ let navigationItems = [
min-height: 270px;
}
.Je-soutien-container {
min-width: 325px;
margin-left: -35px;
}
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(25%) translateX(-50px);
}
@@ -815,10 +495,6 @@ let navigationItems = [
}
@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);
@@ -832,14 +508,6 @@ let navigationItems = [
min-height: 290px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 350px;
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
@@ -848,7 +516,7 @@ let navigationItems = [
.social-container {
margin-left: 90px;
min-width: 350;
min-width: 350px;
max-height: 40px
}
@@ -873,11 +541,6 @@ let navigationItems = [
}
@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);
}
@@ -890,14 +553,6 @@ let navigationItems = [
min-height: 355px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 400px;
}
.name-info {
font-size: 1.5rem;
margin-top: -4px;
@@ -917,9 +572,6 @@ let navigationItems = [
}
@media (min-width: 1920px) and (max-width: 2559px) {
.text-soutiens {
font-size: 1.3rem;
}
.profile-container {
margin-top: -160px;
@@ -929,10 +581,6 @@ let navigationItems = [
min-height: 380px;
}
.Je-soutien-container {
min-width: 400px;
}
.mobile-profile-picture-creator {
transform: scale(1.4) translateY(25%) translateX(-40px);
}
@@ -979,10 +627,6 @@ let navigationItems = [
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
.name-info {
font-size: 2rem;

1263
src/views/manualusers/MathieuCaron.vue
View File

File diff suppressed because it is too large Load Diff