SinglePage.vue 3.94 KB
Newer Older
Elouan Le Bars's avatar
Elouan Le Bars committed
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div id="single-page">
    <div class="single-page-body">
      <div class="single-page-text">
        <button class="close-btn" @click.prevent="hidePage">
          &#10006;
        </button>
        <div v-if="page == 'about'">
          <h2>A propos</h2>
          <br />
          <p>
Elouan Le Bars's avatar
Elouan Le Bars committed
12
13
            <b>L’Impactomètre</b> est un outil ayant été produit dans le cadre
            d’un projet de l’UTC encadré par Yacine Baouch. Il est le fruit d’un
Elouan Le Bars's avatar
Elouan Le Bars committed
14
15
16
17
18
19
20
            travail réalisé par plusieurs groupes d’étudiants que sont Jules
            Farjas, William Boffy, Aurélien Béranger, Clément Brizard, Valentin
            Le Gauche, Maria Idrissi, Elouan Le Bars, Matthieu Glorion et Edmond
            Giraud.
          </p>
          <p>
            Cet outil a pour vocation d’évaluer l’impact environnemental d’une
Elouan Le Bars's avatar
Elouan Le Bars committed
21
22
23
24
25
26
27
            réunion afin que l’utilisateur puisse l’optimiser au mieux, dans une
            démarche écologique. L’évaluation de cet impact est réalisée selon
            une méthode fortement inspirée de la méthode ACV (Analyse Cycle de
            Vie d’un produit). L’impact environnemental d’une réunion est en
            effet calculé comme la somme des impacts environnementaux des
            matériels utilisés, des transports réalisés et du logiciel de
            visioconférence.
Elouan Le Bars's avatar
Elouan Le Bars committed
28
29
          </p>
          <p>
Elouan Le Bars's avatar
Elouan Le Bars committed
30
31
32
33
34
35
36
37
            L’utilisateur doit renseigner ces différents critères pour que
            l’application puisse évaluer l’impact environnemental de la réunion,
            selon quatre catégories : l’impact sur la santé humaine, sur la
            qualité de l’écosystème, sur le changement climatique et sur les
            ressources. Le résultat est calculé dans une unité adaptée pour
            chacune de ces catégories et affiché en pourcentages. Il est
            normalisé sur le scénario ayant le plus d’impact, celui-ci étant à
            100%.
Elouan Le Bars's avatar
Elouan Le Bars committed
38
39
40
          </p>
          <p>
            Vous pouvez retrouver l'article sur lequel se basent les calculs
Elouan Le Bars's avatar
Elouan Le Bars committed
41
            réalisés dans le code
Elouan Le Bars's avatar
Elouan Le Bars committed
42
43
44
45
46
47
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="/uploads/article_impact_environnemental_reunions.pdf"
              >à cette adresse.</a
            >
Elouan Le Bars's avatar
Elouan Le Bars committed
48
          </p>
Elouan Le Bars's avatar
Elouan Le Bars committed
49
50
51
52
53
54
          <p id="licence">
            Licence libre GNU GPL V3 -
            <a href="https://gitlab.utc.fr/tx-techno-num/impactometre"
              >Dépôt gitlab</a
            >
          </p>
Elouan Le Bars's avatar
Elouan Le Bars committed
55
        </div>
Elouan Le Bars's avatar
Elouan Le Bars committed
56

Elouan Le Bars's avatar
Elouan Le Bars committed
57
58
59
60
61
        <div v-if="page == 'howto'" class="howto">
          <h2>Utilisation</h2>
          <br />
          <div class="video">
            <iframe
Elouan Le Bars's avatar
Elouan Le Bars committed
62
              src="https://player.vimeo.com/video/436047872"
Elouan Le Bars's avatar
Elouan Le Bars committed
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              "
              frameborder="0"
              allow="autoplay; fullscreen"
              allowfullscreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["page"],
  methods: {
    hidePage() {
      this.$root.$emit("hide_single_page");
    },
  },
};
</script>

<style>
#single-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

.single-page-body {
  padding: 6%;
  color: black;
  font-size: 16px;
}
.single-page-text {
  padding: 2%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 53px -18px rgba(0, 0, 0, 0.75);
  border-radius: 8px;
}
.single-page-text p {
  margin-bottom: 20px;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
116
117
118
119
120
121
122
123
.single-page-text a {
  text-decoration: none;
  color: #262626;
  font-weight: bold;
}
.single-page-text a:hover {
  color: black;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
124
125
126
127
128
.single-page-text .close-btn {
  top: -15px;
  left: 5px;
  margin: 5px;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
129
130
131
132
#licence {
  color: gray;
  text-align: right;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
133
134
135
136
/*
 * HOWTO
 */
.video {
Elouan Le Bars's avatar
Elouan Le Bars committed
137
  padding: 30% 0 0 0;
Elouan Le Bars's avatar
Elouan Le Bars committed
138
139
140
  position: relative;
}
</style>