-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (142 loc) · 8.38 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Gauthier STAEHLER">
<title>PZ-5CO</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="img/logo.jpg" rel="icon">
</head>
<body class="bg-light">
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav text-center" style="padding: 32px; padding-top: 18px;">
<li class="sidebar-brand">
<img src="img/logo.jpg" alt="Logo" width="60" height="60" class="rounded">
<!-- Fond vecteur créé par starline - fr.freepik.com -->
</li>
<li><i>version 0.5.3</i></li>
<li>
<small>Entièrement écrit par</small>
<p>Gauthier Staehler</p>
<hr style="margin-top: 8px; margin-bottom: 8px;">
<small>PZ-5CO est un programme JavaScript d'agent conversationnel qui répond et effectue des actions
uniquement grâce à des commandes textuelles. L'intérêt du projet est de pouvoir demander au
programme de faire des opérations malgré la contrainte du texte.</small><br>
<small style="text-decoration: underline;">Technologies utilisées :</small><br>
<i class="fab fa-html5 fa-2x" title="HTML5"></i>
<i class="fab fa-css3-alt fa-2x" title="CSS3"></i>
<i class="fab fa-js fa-2x" title="JavaScript"></i><br>
<small><i>Bootstrap 4.1.1</i></small><br>
<small><i>FontAwesome 5.6.3</i></small><br>
<small><i>jQuery 3.3.1</i></small>
<hr style="margin-top: 8px; margin-bottom: 8px;">
<a href="https://www.linkedin.com/in/gauthier-staehler-735075138/" target="_blank"
title="Gauthier Staehler sur LinkedIn" class="fab fa-linkedin fa-2x"
style="width: 0px; position: relative; left: 72px;"></a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="d-flex justify-content">
<div href="#menu-toggle">
<i class="fas fa-angle-double-left" id="menu-toggle"
style="position: relative; right: 20px; top: 14px; cursor: pointer;"></i>
</div>
<h1>PZ-5CO</h1>
<div>
<i class="far fa-question-circle" data-toggle="modal" data-target="#exampleModalCenter"
style="position: relative; left: 12px; top: 4px; cursor: pointer;"></i>
</div>
<i id="volume" class="fas fa-volume-up fa-2x" style="position: relative; top: 6px; left: 40px; cursor: pointer;" onclick="mute()"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Fonctionnalités :</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<small>
<ul>
<li>Dites <code>"Bonjour"</code>, <code>"Salut"</code> ... et le programme répondra
en prenant en compte l'heure de la journée !
</li>
<li>Répond à <code>"Comment vas-tu?"</code></li>
<li>Répond à <code>"Comment t'appelles-tu?"</code></li>
<li>Fais de l'humour si on lui demande <code>"Raconte-moi une blague !"</code></li>
<li>Répond à un remerciement comme <code>"Merci !"</code></li>
<li>Ouvre une page web .com dans un nouvel onglet. <code>"Ouvre ... "</code></li>
<li>Ouvre un nouvel onglet si on lui demande <code>"Ouvre un nouvel onglet !"</code>
</li>
<li>Actualise la page actuelle en lui demandant <code>"Actualise !"</code></li>
<li>Est capable d'additionner, soustraire, multiplier et diviser: <code>"8 +
2?"</code>, <code>"8 - 2?"</code>, <code>"8 * 2?"</code>, <code>"8 / 2?"</code>
</li>
<li>Peut générer un cercle, un carré ou un triangle en lui demandant <code>"Dessine-moi
un carré !"</code></li>
<li>Peut dire quel jour on est et quelle heure il est: <code>"Quelle heure
est-il?"</code>, <code>"Quel jour sommes-nous?"</code></li>
<li>Peut donner l'adresse IP de l'utilisateur et sa localisation : <code>"Quelle est
mon adresse IP?"</code>, <code>"Où suis-je?"</code></li>
<li>Est capable de rechercher la définition d'un nom commun : <code>"Qu'est-ce qu'un
robot?"</code></li>
<li>Dit si il ne comprend pas ou ne sais pas mais est capable de comprendre des
variantes aux exemples ci-dessus !
</li>
<li>Synthèse vocale !</li>
<li><span style="text-decoration: underline;">Navigateur conseillé</span> : Google
Chrome !
</li>
<li>N'est pas compatible avec Internet Explorer ! <i
class="fas fa-exclamation-triangle"></i></li>
</ul>
</small>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body"
style="padding-top: 4px; padding-bottom: 0px; margin-top: 8px; margin-bottom: 8px;">
<b>Notes de la mise à jour 0.5.3 :</b>
<small>
<ul style="margin-top: 10px;">
<li>Ajout de la synthèse vocale</li>
</ul>
</small>
</div>
</div>
<form id="form" onsubmit="return false;">
<input style="z-index: 10;" class="form-control" type="text" placeholder="Exemple: Que peux tu faire?"
id="userInput" value="" autocomplete="off" autofocus/>
<input style="display: none;" type="submit" onclick="speaking();"/>
</form>
<div id="conversation"></div>
<div id="loader" style="display: none;">
<img src="img/loader.gif" alt="Loader">
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("#menu-toggle").toggleClass("fa-angle-double-right");
});
</script>
</body>
</html>