-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
254 lines (253 loc) · 16.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Careot</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link href="css/mycss.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">
<object data="assets/img/logo.svg" width="150"> </object>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Fonctionnalités</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 h-100">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 col-sm-12 main-title">
<div class="">
<h1 class="text-white font-weight-bold">Suivi Diététique Personnalisé</h1>
<hr class="divider" />
</div>
<div class="">
<p class="text-white-75 mb-5">Careot assure un suivi nutritionnel par des diététiciens professionnels</p>
<a class="btn btn-primary btn-xl" href="#about">Découvrir l'application</a>
</div>
</div>
<div class="col-lg-4 app-showcase">
<img class="app-showcase" src="assets/img/app.png" alt="..." />
</div>
<div class="col-lg-1"></div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-4 text-center">
<div>
<h2 class="text-white mt-0">Digitalisation du suivi</h2>
<hr class="divider divider-light" />
<p class="text-gray-75 mb-4">Le journal alimentaire papier utilisé en nutrition est digitalisé afin de faciliter et d'augmenter la qualité des données et simplifiant ainsi leur analyse par le diététicien. Cela permet un meilleur diagnostic nutritionnel et, par conséquent, une prise en charge adéquate.</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div>
<h2 class="text-white mt-0">Proximité avec le patient</h2>
<hr class="divider divider-light" />
<p class="text-gray-75 mb-4">L'espace de discussion ainsi que le partage de document offrent une meilleure communication entre le soignant et son patient entre les consultations et instaure ainsi une proximité.</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div>
<h2 class="text-white mt-0">Centralisation</h2>
<hr class="divider divider-light" />
<p class="text-gray-75 mb-4">Les données du patient sont centralisées sur Careot, via le dossier du patient, le canal de discussion, les carnets alimentaires et l'espace de partage de fichiers.</p>
</div>
</div>
<div class="col-lg-12 text-center mt-5">
<a class="btn btn-light btn-xl" href="#services">Fonctionnalités</a>
</div>
</div>
</div>
</section>
<!-- Description -->
<section id="description">
<div class="container px-4 px-lg-5">
<div class="col-lg-12 text-center mt-5">
<p class="display-6">Avec Careot🥕, les sensations alimentaires sont placées au coeur du processus.</p>
<br/><br/>
<hr class="divider divider-dark" />
<br/><br/>
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-4 text-center">
<div>
<h2 class="text-black mt-0">Motivation</h2>
<hr class="divider" />
<p class="text-gray-75 mb-4">Le journal alimentaire papier utilisé en nutrition est digitalisé afin de faciliter et d'augmenter la qualité des données et simplifiant ainsi leur analyse par le diététicien. Cela permet un meilleur diagnostic nutritionnel et, par conséquent, une prise en charge adéquate.</p>
<p>Nous souhaitons proposer un service adapté aux spécialistes permettant un encadrement médical spécialisé et personnalisé, via un journal d'alimentation que le patient peut remplir à chaque prise de repas.</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div>
<h2 class="text-black mt-0">Pour le client</h2>
<hr class="divider" />
<p class="text-gray-75 mb-4">L'espace de discussion ainsi que le partage de document offrent une meilleure communication entre le soignant et son patient entre les consultations et instaure ainsi une proximité.</p>
<p>La confiance qu'un patient accorde à son soignant est primordiale. C'est pourquoi Careot garantit la communication entre le soignant et ses patients grâce à un chat intégré. L'application fournit également un espace de partage de fichiers afin de centraliser les données échangées.</p>
</div>
</div>
<div class="col-lg-4 text-center">
<div>
<h2 class="text-black mt-0">Pour vous</h2>
<hr class="divider" />
<p class="text-gray-75 mb-4">
L'utilisation d'un journal d'alimentation favorise l'éducation thérapeutique, l'auto-observation et l'autonomie du patient. Le processus traditionnel est ainsi simplifié et consiste en la complétion d'un formulaire par les clients, renseignant la nature du repas, un photo ainsi que des informations concernant les sentations alimentaires de ces derniers (satiété, environnement, etc).
</p>
<p>Le suivi de ce journal nutritionnel par le spécialiste permet un meilleur diagnostic et une prise de mesures adaptées.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fonctionnalités -->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">Fonctionnalités</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-chat-left-dots fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Discussion instantanée</h3>
<p class="text-muted mb-0">Posez vos questions directement au patient.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-file-earmark fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Espace Document</h3>
<p class="text-muted mb-0">Partagez & recevez des ressources avec votre patient.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-calendar2-week fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Calendrier des repas</h3>
<p class="text-muted mb-0">Gardez une vue globale sur le suivi.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-image fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Journal Alimentaire</h3>
<p class="text-muted mb-0">Suivez au quotidien les journaux de repas.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio-->
<div id="portfolio">
<section class="showcase">
<div class="container-fluid px-4 px-lg-5">
<div class="row g-0">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('assets/img/portfolio/thumbnails/message.png')"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
<h2>Discussion instantanée</h2>
<p class="lead mb-0">Cette interface permet au patient de poser des questions à la diététicienne et elle pourra lui répondre ainsi que lui partager des ressources tout au long de son périple alimentaire</p>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 text-white showcase-img" style="background-image: url('assets/img/portfolio/thumbnails/document.png')"></div>
<div class="col-lg-6 my-auto showcase-text">
<h2>Espace Document</h2>
<p class="lead mb-0">L'espace document permet d'échanger des vidéos, des images, des documents et des enregistrements audio directement entre le patient et diététitien.</p>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('assets/img/portfolio/thumbnails/calendar.png')"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
<h2>Calendrier des repas</h2>
<p class="lead mb-0">Le calendrier répertorie les journaux alimentaires au quotidien et permet ainsi d'avoir une vue globale sur le suivi. Lorsqu'un jour est sélectionné, les repas de ce jour ci s'afficheront sous forme d'une carte consultable.</p>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 text-white showcase-img" style="background-image: url('assets/img/portfolio/thumbnails/meal.png')"></div>
<div class="col-lg-6 my-auto showcase-text">
<h2>Journal Alimentaire</h2>
<p class="lead mb-0">Le patient renseignera durant 4-5 jours ses repas dans l'application pendant que la diététicienne pourra observer le remplissage du carnet.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Call to action-->
<section class="page-section bg-dark text-white">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-4">Télécharger notre dernière version !</h2>
<a class="btn btn-light btn-xl" href="https://github.com/les-crepes/CAREOT_APP/releases" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span style="margin-right: 6px;"></span>
Téléchargement
</a>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 col-xl-6 text-center">
<h2 class="mt-0">Prenez contact avec nous</h2>
<hr class="divider" />
<p class="text-muted mb-5">Nous sommes une équipe motivée de 4 étudiants en dernière année de Bachelor en Informatique. Nous avons réalisé ce projet dans le cadre de la HES d'été à la HEIG-VD d'Yverdon en 2022. Le but étant de développer une application complète en suivant un processus DevOps en moins de 3 semaines </p>
</div>
</div>
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-4 mb-5 mb-lg-0 text-center">
<i class="bi-envelope fs-2 mb-3 text-muted"></i>
<div class="align-content-center">
<div>chloe.fontaine@heig-vd.ch</div>
<div>luca.coduri@heig-vd.ch</div>
<div>nelson.jeanrenaud@heig-vd.ch</div>
<div>olivier.dancona@heig-vd.ch</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright © 2022 - HEIG-VD</div></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>