<template>

  <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>

  <!-- "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-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>
  </v-row>
  
</template>

<script setup>
let imageSrc = '/images/usersmedia/leffet/banners/banner02.png';
let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
let name = 'L\'EFFET'
let title = 'Page officiel'
</script>

<style scoped>

.name-info {
  margin-top: -10px;
  margin-left: 15%;
}

.occupation-info {
  margin-left: 15%;
  font-size: large;
}

.profile-container {
  margin-top: -16%;
}

.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: #c9017d;
  color: white;
  font-weight: 400;
}

.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;
}

.social-container {
  background-color: #79cc02;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  font-size: 1.7rem;
  font-weight: 600;
  color: white;
}

.social-container2 {
  background-color: #fbc702;
  border-bottom-right-radius: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  color: white;
}

.social-container-mobile {
  background-color: #9add03;
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  z-index: 1000;
  margin: auto;
  text-align: center;
}

.social-icon-group-mobile {
  background-color: #588801;
}

.mobile-profile-picture-creator {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  max-width: 150px;
  border: 6px solid white;
  z-index: 1000;
}

.profile-banner {
  margin-top: 25px;
  min-height: 200px
}

@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%);
  }

  .occupation-info {
    font-size: 1rem;
  }

  .card-youtube {
    min-height: 250px;
  }
}

@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%;
  }

  .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%;
  }

  .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;
  }

  .profile-container {
    margin-top: -185px;
    min-width: 480px
  }

  .card-youtube {
    min-height: 270px;
  }

  .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) {

  .mobile-profile-picture-creator {
    transform: scale(1.3) translateY(25%) translateX(-50px);
  }

  .profile-container {
    margin-top: -180px;
  }

  .card-youtube {
    min-height: 290px;
  }

  .name-info {
    font-size: 1.2rem;
    margin-left: 20px;
    margin-top: -6px
  }

  .social-container {
    margin-left: 90px;
    min-width: 350px;
    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) {
  .mobile-profile-picture-creator {
    transform: scale(1.4) translateY(25%) translateX(-40px);
  }

  .profile-container {
    margin-top: -171px;
  }

  .card-youtube {
    min-height: 355px;
  }

  .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) {

  .profile-container {
    margin-top: -160px;
  }

  .card-youtube {
    min-height: 380px;
  }

  .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
  }

  .card-youtube {
    min-height: 380px;
  }

  .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>