Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Data Viz 2024-2025</title>
<meta content="" name="description">
<meta content="" name="keywords">
<link href="../static/img/logo.png" rel="icon">
<link href="../static/img/logo.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../static/vendor/aos/aos.css" rel="stylesheet">
<link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="../static/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="../static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../static/css/style.css" rel="stylesheet">
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!-- =======================================================
* Template Name: Bootslander
* Template URL: https://bootstrapmade.com/bootslander-free-bootstrap-landing-page-template/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
<div class="container d-flex align-items-center justify-content-between">
<div class=" logo d-flex align-items-center">
<!-- Logo Image -->
<a href="/" class="logo me-3">
<img src="../static/img/logo.png" alt="Green Impact logo" class="img-fluid">
</a>
<!-- Titre -->
<h1><a href="/"><span>Health Insight</span></a></h1>
</div>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Accueil</a></li>
<li><a class="nav-link scrollto" href="#about">Informations</a></li>
<li><a class="nav-link scrollto" href="#team">Équipe</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 pt-5 pt-lg-0 order-2 order-lg-1 d-flex align-items-center">
<div data-aos="zoom-out">
<h1>Nos données santé racontent une histoire : découvrez comment nos habitudes façonnent notre bien-être !</h1>
</div>
</div>
<div class="col-lg-4 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="300">
<img src="../static/img/Fitness tracker-rafiki.png" class="img-fluid animated" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<section id="steps-analysis" class="details">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse des Pas des Utilisateurs</h3>
<p>
Cette visualisation illustre les données sur le nombre de pas effectués par les utilisateurs
chaque mois au cours des années. Utilisez le slider ci-dessous pour explorer les données
par année et découvrir les tendances individuelles de chaque utilisateur.
</p>
<ul>
<li><i class="bi bi-check"></i> Analyse par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des pas entre utilisateurs.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec un slider.</li>
</ul>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div id="visualization" style="position: relative;"></div>
<div id="slider-container" style="margin-top: 20px;"></div>
</div>
</div>
<section id="distance-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation à gauche -->
<div class="col-md-6">
<div id="distance-visualization" style="position: relative;"></div>
<div id="distance-slider-container" style="margin-top: 20px;"></div>
<!-- Texte à droite -->
<div class="col-md-6" data-aos="fade-left">
<h3>Analyse de la Distance Parcourue</h3>
<p>
Découvrez comment la distance parcourue est liée aux calories brûlées pour chaque utilisateur.
Utilisez le slider pour explorer les données par année et comparez les performances des différents membres.
<li><i class="bi bi-check"></i> Relation distance-calories par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des membres.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec bulles et tooltip.</li>
</div>
</section>
<section id="calories-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse des Calories Brûlées</h3>
<p>
Cette visualisation explore les calories brûlées par chaque utilisateur au fil des mois.
Utilisez le slider pour naviguer entre les années et analyser les tendances des différents membres.
<li><i class="bi bi-check"></i> Analyse des calories par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des utilisateurs.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec des aires.</li>
</ul>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div id="calories-visualization" style="position: relative;"></div>
<div id="calories-slider-container" style="margin-top: 20px;"></div>
<section id="sleep-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse des Heures de Sommeil</h3>
<p>
Cette visualisation met en évidence les heures de sommeil moyennes par mois pour chaque utilisateur.
Utilisez le slider pour explorer les données par année et visualiser les tendances individuelles.
</p>
<ul>
<li><i class="bi bi-check"></i> Analyse des heures de sommeil moyen par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison entre utilisateurs.</li>
<li><i class="bi bi-check"></i> Détails interactifs par jour pour un mois donné.</li>
</ul>
</div>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div id="sleep-visualization" style="position: relative;"></div>
<div id="slider-container" style="margin-top: 20px;"></div>
</div>
</div>
</div>
</section>
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<div class="container">
<div class="copyright">
© Copyright <strong><span>Health Inseight</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/bootslander-free-bootstrap-landing-page-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="../static/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="../static/vendor/aos/aos.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../static/vendor/glightbox/js/glightbox.min.js"></script>
<script src="../static/vendor/swiper/swiper-bundle.min.js"></script>
<script src="../static/vendor/php-email-form/validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Template Main JS File -->
<script src="../static/js/main.js"></script>
</body>
</html>