-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (101 loc) · 5.26 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
<html lang="en"><head>
<meta charset="utf-8">
<!-- include js -->
<script src="js/gest.js"></script>
<script src="js/howler.js"></script>
<body>
<script type="text/javascript">
//create message container
var ativo = true;
var cont = 0;
var PAGINA_INICIAL = 0;
var PAGINA_ESCOLHA = 1;
var INSTRUCOES = 2;
var INFORMACOES = 3;
var HQ = 4;
var messageContainer = document.createElement('div');
messageContainer.className = 'gest-message';
document.body.appendChild(messageContainer);
var styles = {
positioning: 'margin: 22% auto; min-width: 100px; max-width: 400px; width: 80%; padding: 15px;',
copy: 'font: normal 35px/1.1 \"Helvetica Neue\", Helvetica, Arial, sans-serif; color: #fff; font-size: 45px; text-align: center;',
general: 'display: block; background-color: #000; z-index: 100; border-radius: 10px;'
}, messageContainerStyle = styles.positioning + styles.copy + styles.general;
var stylesHQ = {
copy: 'text-align: center;'
};
messageContainer.innerHTML = '<img width=50% height=50% src="img/logo.png" alt="" />'
messageContainer.innerHTML += '<h3> IMPORTANTE: Para usar a aplicação é preciso que você tenha dado acesso a sua webcam.</h3><br>'
messageContainer.innerHTML += '<h3> Mova sua mão para esquerda, direita, cima e/ou baxo para dar comandos à aplicação</3><br><br><br>'
messageContainer.innerHTML += '<img width="900" height="250" id="left-T1" src="img/cover-T.png" alt="" /><br>'
messageContainer.innerHTML += '<h3> </3><br><br><br>'
messageContainer.innerHTML += '<h3> <a href="http://hadi.io/gest.js/">gest.js</a></3><br><br><br>'
messageContainer.innerHTML += '<h3> <a href="http://jaukia.github.io/zoomooz/">zoomoz.js</a></3><br><br><br>'
messageContainer.innerHTML += '<h3> <a href="http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library">howler.js</a> </3><br><br><br>'
messageContainer.setAttribute('style', stylesHQ.copy);
gest.options.subscribeWithCallback(function(gesture) {
var message = '';
if((gesture.direction == 'Up' || gesture.direction == 'Long up') && cont != PAGINA_INICIAL && cont != PAGINA_ESCOLHA){
ativo = true;
cont = PAGINA_ESCOLHA;
}
if(ativo){
if (cont == PAGINA_INICIAL){
ativo = false;
cont = PAGINA_ESCOLHA;
if (gesture.direction) {
message = "Bixim, é assim mermo visse!? =D"
} else {
message = gesture.error.message;
}
messageContainer.innerHTML = '<p style=\"margin:0\">' + message + '</p>';
messageContainer.setAttribute('style', messageContainerStyle);
window.setTimeout(function() {
ativo = true;
messageContainer.innerHTML = '<h1>Menu Inicial</h1>';
messageContainer.innerHTML += '<br><br><br><br><img width="900" height="400" id="left-T1" src="img/menu.png" alt="" />'
messageContainer.setAttribute('style', stylesHQ.copy);
}, 3000);
}
else if (cont == PAGINA_ESCOLHA){
messageContainer.innerHTML = '<h1>Menu Inicial</h1>'
messageContainer.innerHTML += '<br><br><br><br><img width="900" height="400" id="left-T1" src="img/menu.png" alt="" />'
messageContainer.setAttribute('style', stylesHQ.copy);
if(gesture.direction == 'Down' || gesture.direction == 'Long down'){
cont = HQ
} else if(gesture.direction == 'Left'){
cont = INFORMACOES;
} else if(gesture.direction == 'Right'){
cont = INSTRUCOES;
}
}
if (cont == INSTRUCOES){
ativo = false;
messageContainer.innerHTML = '<br><br><h1>Instruções:</h1>'
messageContainer.innerHTML += '<h3> * Na HQ você poderá escolher 3 ângulos da historia!</h3>'
messageContainer.innerHTML += '<h3> * Para a ESQUERDA você irá pelo primeiro ângulo</h3>'
messageContainer.innerHTML += '<h3> * Para BAIXO você irá pelo segundo ângulo</h3>'
messageContainer.innerHTML += '<h3> * Para a DIREITA você irá pelo terceiro ângulo</h3>'
messageContainer.innerHTML += '<h3> * Para CIMA você volta a visão geral do quadrinho</h3>'
messageContainer.innerHTML += '<br><br><br><h2>Para sair dessa pagina você tem que gesticular para cima!</h2>'
} else if (cont == INFORMACOES){
ativo = false;
messageContainer.innerHTML = '<br><br><h1>Desenvolvedores</h1>'
messageContainer.innerHTML += '<h3> Arthur Holanda</h3>'
messageContainer.innerHTML += '<h3> Bernado Barbosa</h3>'
messageContainer.innerHTML += '<h3> Daniela Ferreira</h3>'
messageContainer.innerHTML += '<h3> João Paulo Targino</h3>'
messageContainer.innerHTML += '<h3> Juca Gonzaga</h3>'
messageContainer.innerHTML += '<h3> Isabelle Cardoso</h3>'
messageContainer.innerHTML += '<h3> Werton Guimarães</h3>'
messageContainer.innerHTML += '<br><br><br><h2>Para voltar a pagina anterior você tem que gesticular para cima!</h2>'
messageContainer.setAttribute('style', stylesHQ.copy);
} else if (cont == HQ){
ativo = false;
var win = window.open("hq.html", "_self");
win.focus();
}
}
});
gest.start();
</script>