Commit 1e4e59ca authored by Elouan Le Bars's avatar Elouan Le Bars

[ADD] About component

parent a2040834
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="stylesheets/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<title>Impactomètre</title>
</head>
<body>
......@@ -16,6 +16,7 @@
<p>Comparaison d'impact environnemental des réunions.</p>
</div>
<div class="header-about">
<a href="#" onclick="showAbout()">A propos</a>
</div>
</header>
<main>
......@@ -24,5 +25,11 @@
</noscript>
<div id="app"></div>
</main>
<script>
function showAbout() {
document.getElementById("about").style.display = "block";
}
</script>
</body>
</html>
......@@ -22,7 +22,6 @@ header {
flex-basis: 60px;
width: 100%;
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
background-color: #3C3C3C;
color: #FFFFFF;
}
......@@ -38,22 +37,24 @@ header .header-logo p {
font-size: 12px;
line-height: 20px;
}
header .header-about a {
color: white;
position: absolute;
top: 20px;
left: 92%;
}
main {
height:100%
}
.results {
flex-basis: 25%;
/* background-color: #BCBCBC; */
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
/*
* RESULTS
*/
.results {
flex-basis: 25%;
/* background-color: #BCBCBC; */
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
.results-header {
}
<template>
<div id="app">
<About></About>
<div class="scenarios" v-show="display_scenarios">
<Scenario title="Scenario A"></Scenario>
<Scenario title="Scenario B"></Scenario>
......@@ -16,16 +17,18 @@
</template>
<script>
import Scenario from "./components/Scenario.vue";
import About from "./components/About.vue";
import Results from "./components/Results.vue";
import ResultsDetailledView from "./components/ResultsDetailledView.vue";
import Scenario from "./components/Scenario.vue";
export default {
name: "App",
components: {
Scenario,
Results,
About,
ResultsDetailledView,
Results,
Scenario,
},
data() {
return {
......
<template>
<div id="about">
<div class="about-body">
<div class="about-text">
<button class="close-btn" @click.prevent="hideAbout">
&#10006;
</button>
<p>
L’impactomètre 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 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 réunion afin que
l’utilisateur puisse optimiser au mieux sa réunion dans une démarche
écologique. Cette évaluation est réalisée selon une méthode très inspirée
de la méthode ACV (Analyse Cycle de Vie d’un produit).
</p>
<p>
En effet ici
l’impact environnemental d’une réunion est calculé comme étant la somme
des impacts environnementaux dues aux matériels utilisés, transports
engendrés et le logiciel de visioconférence. L’utilisateur doit donc juste
renseigner les informations de ces différents critères pour que
l’Impactomètre puisse évaluer l’impact environnemental de la réunion selon
4 catégories : l’impact sur la santé humaine, l’impact sur la qualité de
l’écosystème, l’impact sur le changement climatique et l’impact sur les
ressources.
</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
hideAbout: () => {
document.getElementById("about").style.display = "none";
},
},
};
</script>
<style>
#about {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(255, 255, 255, 0.6);
}
.about-body {
position: absolute;
padding: 8%;
color: black;
font-size: 120%;
}
.about-text {
padding: 4% 2% 4% 2%;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 53px -18px rgba(0,0,0,0.75);
border-radius: 8px;
}
.about-text p {
margin-bottom: 20px;
}
.about-text .close-btn {
top: -25px;
margin: 5px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment