zoe/index.html at master · nfon/zoe · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <title>Zoé - assitant personnel</title>
  <meta name="description" content="annyang is a JavaScript SpeechRecognition library that makes adding voice commands to your site super-easy. Let your users control your site with their voice." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:image" content="https://www.talater.com/annyang/images/icon_speech.png"/>
  <meta property="og:title" content="annyang! Easily add speech recognition to your site"/>
  <meta property="og:url" content="https://www.talater.com/annyang/"/>
  <meta property="og:site_name" content="annyang"/>
  <meta property="fb:admins" content="568390229" />
  <link rel="icon" type="image/png" href="favicon.ico">
  <style>
	.pulse {
		animation: blinker 2s cubic-bezier(.5, 0, 1, 1) infinite;
	}

  #zoe .face{
    display: none;
  }

  #zoe .face.active{
    display: block;
  }

	@keyframes blinker {
		50% { opacity: 0.0; }
	}
  </style>
  <link rel="stylesheet" href="css/main.min.css" />
  <script>
    var annyangScript = document.createElement('script');
    annyangScript.src = "vendor/js/annyang.min.js";
    document.write(annyangScript.outerHTML);
  </script>
</head>
<body>
<pre id="output"></pre>
  <section id="input">
    <div id="zoe">
      <img id="0" class="c0 face active" src="images/zoe/c0.png" alt='0'>
      <img id="1" class="c1 face" src="images/zoe/c1.png" alt='1'>
      <img id="2" class="c2 face" src="images/zoe/c2.png" alt='2'>
      <img id="3" class="c3 face" src="images/zoe/c3.png" alt='3'>
    </div>
    <img class="bubble" src="images/comment.svg"/>
    <span class="pulse">></span>&nbsp;<code class="input">Dis quelque chose...</code>
  </section>
  <section id="response">
	<span class="pulse2">></span>&nbsp;<code class="response"></code>
  </section>
  <section id="section_hello">
    <p><em>Go ahead, try it&hellip;</em></p>
    <p class="voice_instructions">Say "Hello!" Or "Help!"</p>
    <p id="hello" class="hidden">Bonjour <span class='firstname'></span>&nbsp;!</p>
  </section>
  <section id="unsupported" style="display:none">
    Votre navigateur n'est pas supporté
  </section>
  <div class="panel-body">
		<p style="display:none">Longitude: <input id="location-long" type="text" class="form-control"/></p>
		<p style="display:none">Latitude: <input id="location-lat" type="text" class="form-control"/></p>
		<p style="display:none">Weather: <textarea id="weather" class="form-control"></textarea></p>
		<div id="map-canvas" style="min-height: 400px;"></div>
  </div>
  <section id="youtube" style="display:none; width:1897px; margin-left:auto; margin-right:auto; padding:0">
	 <iframe id='player' type="text/html" width="1897" height="1024" src='https://www.youtube.com/embed/?enablejsapi=1&wmode=transparent&rel=0&controls=1&showinfo=0&autohide=1' frameborder='0'></iframe>
  </section>
  <a href="spotify.php">Spotify</a>
  <section id="list" style="display:none">
    <p><em>Liste des commandes disponibles</em></p>
    <p class="voice_instructions">Bonjour&nbsp;!</p>
    <p class="voice_instructions">Que sais-tu faire&nbsp;?</p>
    <p class="voice_instructions">Répète&nbsp;?</p>
    <p class="voice_instructions">Tais-toi&nbsp;</p>
    <p class="voice_instructions">Quel temps il fait&nbsp;?</p>
  	<p class="voice_instructions">Cherche *requete&nbsp;!</p>
  	<p class="voice_instructions">Ouvre *website&nbsp;!</p>
  	<p class="voice_instructions">Ferme *website&nbsp;!</p>
    <p class="voice_instructions">Lance *video_youtube&nbsp;!</p>
    <p class="voice_instructions">Pause&nbsp;!</p>
    <p class="voice_instructions">Reprend&nbsp;!</p>
    <p class="voice_instructions">Guide moi vers *destination&nbsp;!</p>
    <p class="voice_instructions">Est-ce qu'il y a des Vélibs'&nbsp;?</p>
  	<p class="voice_instructions">Quelle heure est-il&nbsp;?</p>
  	<p class="voice_instructions">Le combien sommes-nous&nbsp;?</p>
    <p class="voice_instructions">Qu'est-ce que j'ai de prévu aujourd'hui/demain&nbsp;?</p>
    <p class="voice_instructions">Tu peux ouvrir mon agenda&nbsp;?</p>
  	<p class="voice_instructions">Est-ce que c'est bientôt le weekend&nbsp;?</p>
  	<p class="voice_instructions">Est-ce que c'est l'heure du goûter&nbsp;?</p>
  	<p class="voice_instructions">Est-ce que c'est l'heure de l'apéro&nbsp;?</p>
  	<p class="voice_instructions">TODO : ça veut dire quoi *mot&nbsp;?</p>
    <div id="flickrLoader"><p></p></div>
    <div id="flickrGallery" class="hidden"></div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="vendor/js/auth.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBNSbi-LVY2bGH7oxAsCl45EQ_p2Qd9sVU"></script>
  <script src="vendor/js/main.js" type="text/javascript"></script>
</body>
</html>