-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtuto.html
More file actions
164 lines (150 loc) · 8.53 KB
/
tuto.html
File metadata and controls
164 lines (150 loc) · 8.53 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SeriousGame Nutrition</title>
<!-- Custom fonts for this template-->
<link href="packages\fontawesome-free\css\all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-dark overflow-hidden">
<!-- Modal tuto -->
<div class="modal" id="tutoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-12">
<div class="card o-hidden border-0 shadow-lg my-1">
<div class="card-body p-0">
<div class="row m-5">
<h1 class="mx-auto text-primary"><b>Comment jouer </b><i class="fa fa-question"
aria-hidden="true"></i>
</h1>
</div>
<div class="row">
<div class="col-7 px-5">
<h2 class="mx-auto text-primary"><b>Principes de base :</b></h2>
<div class="text-center">
<div class=" text-gray-900">
<h4 class="m-3">
- Les indications fournies par les deux équipes aident Arthur à faire <b>son
choix.</b></h4>
<h4 class="m-3"> - Les choix d'Arthur ont un impact sur son état de santé et son moral.
</h4>
<h5 class="m-3 alert alert-info">
<i class="fa fa-info" aria-hidden="true"></i>
Les informations sur son état sont disponibles sur la page "profil" disponible à tout
instant du jeu.
</h5>
</div>
</div>
</div>
<div class="col-5">
<div class="card shadow mx-5 mt-n3">
<div class="card-body">
<h5 class="text-gray-900"><i class="fas fa-laugh fa-1x"></i>
Bien-être moral<span id="moralSpan" class="float-right small"></span>
</h5>
<div class="progress progress-sm mb-4">
<div id="moralBar" class="progress-bar bg-danger" role="progressbar" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5 class=" text-gray-900"><i class="fas fa-bolt fa-1x"></i> Énergie<span id="energieSpan"
class="float-right small"></span>
</h5>
<div class="progress progress-sm mb-4">
<div id="energieBar" class="progress-bar bg-warning" role="progressbar" style="width: 40%"
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5 class="text-gray-900"><i class="fas fa-notes-medical fa-1x"></i>
Bien-être physique<span id="santeSpan" class="float-right small"></span></h5>
<div class="progress progress-sm mb-4">
<div id="santeBar" class="progress-bae bg-success" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5 class="text-gray-900"><i class="fas fa-utensils fa-1x"></i> Équilibre alimentaire<span
id="equilibreAlimSpan" class="float-right small"></span>
</h5>
<div class="progress progress-sm mb-4">
<div id="equilibreAlimBar" class="progress-bar bg-success" role="progressbar"
style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-7 text-gray-900">
<div class="card shadow mb-4 mx-5">
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary">Quelques conseils importants</h5>
</div>
<div class="card-body">
<h4>Voilà quelques notions de base qui vous aideront à faire vos choix :</h4>
<h4>
<ul>
<li>Le <b>moral</b> d’Arthur ne peut pas augmenter s'il est en <b>mauvaise santé.</b>
</li>
<li>Si arthur est dans une situation difficile, il n'écoutera que ses pulsions. (ex: si
son moral est trop bas, il ne tiendra plus compte des instructions de l'équipe chargée
de son équilibre alimentaire <b>et inversement</b>)
</li>
<li>Arthur ne gagne pas <b>d'énergie</b> quand son <b>moral diminue.</b></li>
<li>Chaque action nécessitant un effort coûtera à Arthur un peu <b>d'énergie</b></li>
</ul>
</h4>
<h4>Attention aux jauges rouges !</h4>
</div>
</div>
</div>
<div class="col-5 mt-5">
<div class=" row justify-content-center">
<img class="img-fluid img-tuto" src="img\impacts\voiture.png" />
</div>
<h5 class="m-3 alert alert-primary"><i class="fa fa-exclamation-triangle"
aria-hidden="true"></i>
Attention ! Surveillez attentivement le profil de votre personnage, vous y trouverez des
informations précieuses.</h5>
</div>
</div>
<div class="row justify-content-center">
<div class="text-center">
<a href="game.html"><button type="button" class="btn btn-primary m-5 pt-3 pb-2 px-3">
<h3><b>Commencer le jeu !
</b></h3>
</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js\tuto.js">
</script>
</html>