Download as
Browse Code »

Commit 7391ceb11c49d6d8b41e9f737fbad5fc78cb5efe

Authored by Adabriand Furtado
1 parent 91cd2b91
Exists in master and in 1 other branch dynamic

Versão inicial da tela de envio de sinais.

Showing 5 changed files with 360 additions and 157 deletions   Show diff stats
view/assets/css/main.css
  Diff comments   View file @7391ceb
1 1 @import url("articulation.css");
  2 +@import url("submit-sign.css");
2 3  
3 4 /* Main */
  5 +body nav.navbar:first-child {
  6 + display: none;
  7 +}
  8 +
  9 +footer {
  10 + display: none;
  11 +}
  12 +
4 13 @font-face {
5 14 font-family: 'Titillium Web';
6 15 src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
... ... @@ -18,6 +27,32 @@ body {
18 27 background: linear-gradient(to right, #92bbe5, #ddeeff, #92bbe5);
19 28 }
20 29  
  30 +/* Nav-bar */
  31 +.wl-logo {
  32 + position: fixed;
  33 + top: 8px;
  34 + z-index: 9999;
  35 +}
  36 +
  37 +.wl-logo img {
  38 + width: 80px;
  39 + height: 80px;
  40 +}
  41 +
  42 +.navbar-wl {
  43 + z-index: 9998;
  44 + position: fixed;
  45 + top: 0;
  46 + width: 100%;
  47 + margin: 0;
  48 + left: 0;
  49 + background-color: #6958b4;
  50 + opacity: 0.95;
  51 +}
  52 +.navbar-default .navbar-nav>li>a {
  53 + color: #FFFFFF;
  54 +}
  55 +
21 56 .col-centered {
22 57 display: block;
23 58 float: none;
... ... @@ -50,11 +85,20 @@ body {
50 85 }
51 86  
52 87 #main-container {
53   - padding-top: 20px;
  88 + padding-top: 40px;
  89 +}
  90 +
  91 +.sub-main-container {
  92 + display: none;
  93 +}
  94 +
  95 +#teach-container {
  96 + display: block;
54 97 }
55 98  
56 99 #initial-screen {
57 100 display: none;
  101 + padding-top: 40px;
58 102 }
59 103  
60 104 #configuration-screen {
... ...
view/assets/css/submit-sign.css 0 → 100644
  Diff comments   View file @7391ceb
... ... @@ -0,0 +1,11 @@
  1 +.submit-sign-form {
  2 + background-color: #556575;
  3 + color: #FFFFFF;
  4 + padding: 30px;
  5 + border-radius: 6px;
  6 + margin-bottom: 20px;
  7 +}
  8 +
  9 +.submit-sign-form .btn {
  10 + margin-left: 7px;
  11 +}
... ...
view/assets/js/wikilibras.js
  Diff comments   View file @7391ceb
... ... @@ -443,5 +443,25 @@
443 443 wikilibras.enableIconCheck = function(container, isHover) {
444 444 _enableIconCheck(container, isHover);
445 445 }
  446 +
  447 + wikilibras.showTeachContainer = function() {
  448 + $(".sub-main-container").hide();
  449 + $("#teach-container").show();
  450 + }
  451 +
  452 + wikilibras.showSubmitSignContainer = function() {
  453 + $(".sub-main-container").hide();
  454 + $("#submit-sign-container").show();
  455 + }
  456 +
  457 + wikilibras.showTeachedSignsContainer = function() {
  458 + $(".sub-main-container").hide();
  459 + $("#teached-signs-container").show();
  460 + }
  461 +
  462 + wikilibras.showTutorialContainer = function() {
  463 + $(".sub-main-container").hide();
  464 + $("#tutorial-container").show();
  465 + }
446 466  
447 467 }(window.wikilibras = window.wikilibras || {}, jQuery));
... ...
view/img/logo.svg 0 → 100644
  Diff comments   View file @7391ceb
... ... @@ -0,0 +1,17 @@
  1 +<?xml version="1.0" encoding="utf-8"?>
  2 +<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 + viewBox="0 0 82 82" style="enable-background:new 0 0 82 82;" xml:space="preserve">
  5 +<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#221F20;" d="M82,41c0,22.6-18.4,41-41,41C18.4,82,0,63.7,0,41
  6 + C0,18.4,18.4,0,41,0C63.7,0,82,18.4,82,41L82,41z"/>
  7 +<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#5AC0CC;" d="M40,27.7L40,27.7L40,27.7L40,27.7z M42,27.7L42,27.7L42,27.7
  8 + L42,27.7z M44.5,32.6l2.9,5.7l0,0l0,0c0.1,0.2,0.2,0.3,0.4,0.4c0.5,0.3,1.2,0.1,1.5-0.4c0,0,0,0,0,0l0,0l0,0l0,0l0,0c0,0,0,0,0,0
  9 + l1.8-3.6l2.4-4.9l0,0c0.2-0.4,0.6-0.6,1-0.6c0.6,0,1.1,0.5,1.1,1.1v13.4v0v0c0,2.5-0.8,4.8-2.2,6.7c-2,2.7-5.3,4.5-8.9,4.5H41h-3.4
  10 + c-3.6,0-6.9-1.8-8.9-4.5c-1.4-1.8-2.2-4.2-2.2-6.7v0v0V30.4c0-0.6,0.5-1.1,1.1-1.1c0.4,0,0.8,0.2,1,0.6l0,0l2.5,4.9l1.8,3.6
  11 + c0,0,0,0,0,0l0,0l0,0l0,0l0,0c0,0,0,0,0,0c0.3,0.5,1,0.7,1.5,0.4c0.2-0.1,0.3-0.3,0.4-0.4l0,0c0,0,0,0,0,0l2.9-5.7l2.5-4.9l0,0l0,0
  12 + l0,0c0,0,0,0,0,0c0.2-0.4,0.6-0.5,0.9-0.5s0.7,0.2,0.9,0.5c0,0,0,0,0,0l0,0l0,0l0,0L44.5,32.6z"/>
  13 +<path style="opacity:0.8;fill-rule:evenodd;clip-rule:evenodd;fill:#A64888;" d="M42.1,54.7c0,0,0.1,0.1,0.2,0.1
  14 + c0.2,0.1,0.3,0.1,0.5,0.1h0c8.7,0,17.4,0,26.1,0c0.6,0,1.1-0.5,1.1-1.1c0-0.4-0.2-0.8-0.6-1L62,49.1l0,0c-0.1-0.1-0.3-0.1-0.4-0.2
  15 + C58,47,55.6,43.3,55.6,39v-8.6c0-0.6-0.5-1.1-1.1-1.1c-0.4,0-0.8,0.2-1,0.6c-3.9,7.8-7.8,15.6-11.7,23.4l0,0l0,0l0,0
  16 + c0,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.3,0,0.4c0,0,0,0,0,0C41.8,54.3,41.9,54.5,42.1,54.7L42.1,54.7z"/>
  17 +</svg>
... ...
view/template.html
  Diff comments   View file @7391ceb
1 1 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
2 2 <span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>
3 3  
  4 +<a href="#" class="wl-logo"> <img src="{{ server }}/img/logo.svg">
  5 +</a>
  6 +<nav class="navbar navbar-default navbar-wl">
  7 + <div class="container">
  8 + <!-- Brand and toggle get grouped for better mobile display -->
  9 + <div class="navbar-header">
  10 + <button type="button" class="navbar-toggle collapsed"
  11 + data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
  12 + aria-expanded="false">
  13 + <span class="sr-only">Toggle navigation</span> <span
  14 + class="icon-bar"></span> <span class="icon-bar"></span> <span
  15 + class="icon-bar"></span>
  16 + </button>
  17 + </div>
  18 +
  19 + <!-- Collect the nav links, forms, and other content for toggling -->
  20 + <div class="collapse navbar-collapse"
  21 + id="bs-example-navbar-collapse-1">
  22 + <ul class="nav navbar-nav navbar-right">
  23 + <li><a href="#" onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
  24 + <li><a href="#" onclick="wikilibras.showSubmitSignContainer()">Enviar
  25 + sinal</a></li>
  26 + <li><a href="#"
  27 + onclick="wikilibras.showTeachedSignsContainer()">Sinais
  28 + ensinados</a></li>
  29 + <li><a href="#" onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
  30 + </ul>
  31 + </div>
  32 + <!-- /.navbar-collapse -->
  33 + </div>
  34 + <!-- /.container-fluid -->
  35 +</nav>
  36 +
4 37 <div id="main-container" class="container">
5   - <div id="initial-screen">
6   - <div class="col-sm-6 col-centered">
7   - <div class="col-sm-8 col-centered">
8   - <video src="" preload="metadata"
9   - class="ref-video video-body-main video-border" autoplay loop
10   - controls>
11   - <source type="video/webm">
12   - </video>
13   - </div>
14   - <h6 class="text-center">
15   - Ajude a criar o sinal <span class="sign-label"></span>.
16   - </h6>
17   - <div class="col-sm-4 col-centered">
18   - <div id="start-button" class="col-sm-12 btn btn-default">OK</div>
  38 + <div id="teach-container" class="sub-main-container">
  39 + <div id="initial-screen">
  40 + <div class="col-sm-6 col-centered">
  41 + <div class="col-sm-8 col-centered">
  42 + <video src="" preload="metadata"
  43 + class="ref-video video-body-main video-border" autoplay loop
  44 + controls>
  45 + <source type="video/webm">
  46 + </video>
  47 + </div>
  48 + <h6 class="text-center">
  49 + Ajude a criar o sinal <span class="sign-label"></span>.
  50 + </h6>
  51 + <div class="col-sm-4 col-centered">
  52 + <div id="start-button" class="col-sm-12 btn btn-default">OK</div>
  53 + </div>
19 54 </div>
20 55 </div>
21   - </div>
22   - <div id="configuration-screen">
23   - <div class="row">
24   - <div class="col-sm-3">
25   - <h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
26   - <div id="ref-video-panel" class="col-sm-12">
27   - <div id="ref-video-container" class="col-sm-10">
28   - <video src="" preload="metadata"
29   - class="ref-video video-body-main video-border" autoplay loop
30   - controls>
31   - <source type="video/webm">
32   - </video>
  56 + <div id="configuration-screen">
  57 + <div class="row">
  58 + <div class="col-sm-3">
  59 + <h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
  60 + <div id="ref-video-panel" class="col-sm-12">
  61 + <div id="ref-video-container" class="col-sm-10">
  62 + <video src="" preload="metadata"
  63 + class="ref-video video-body-main video-border" autoplay loop
  64 + controls>
  65 + <source type="video/webm">
  66 + </video>
  67 + </div>
  68 + <div id="minimize-icon-container" class="col-sm-2 icon_container"
  69 + name="minimize">
  70 + <img src="{{ server }}/img/minimize-icon.png"></img>
  71 + </div>
  72 + <div id="maximize-icon-container" class="col-sm-2 icon_container"
  73 + name="maximize">
  74 + <img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img>
  75 + </div>
33 76 </div>
34   - <div id="minimize-icon-container" class="col-sm-2 icon_container"
35   - name="minimize">
36   - <img src="{{ server }}/img/minimize-icon.png"></img>
37   - </div>
38   - <div id="maximize-icon-container" class="col-sm-2 icon_container"
39   - name="maximize">
40   - <img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img>
  77 + <div id="configuration-panel" class="col-sm-8">
  78 + <div class="icon_container config-panel-option" name="facial"
  79 + panel="facial">
  80 + <img src="{{ server }}/img/facial-icon.png"</img> <span
  81 + class="configuration-panel-label">Expressão</span>
  82 + </div>
  83 + <div class="icon_container config-panel-option" name="right-hand"
  84 + panel="right-hand">
  85 + <img src="{{ server }}/img/right-hand-icon.png"></img> <span
  86 + class="configuration-panel-label">Mão direita</span>
  87 + </div>
  88 + <div class="icon_container config-panel-option" name="left-hand"
  89 + panel="left-hand">
  90 + <img src="{{ server }}/img/left-hand-icon.png"></img> <span
  91 + class="configuration-panel-label">Mão esquerda</span>
  92 + </div>
41 93 </div>
42 94 </div>
43   - <div id="configuration-panel" class="col-sm-8">
44   - <div class="icon_container config-panel-option" name="facial"
45   - panel="facial">
46   - <img src="{{ server }}/img/facial-icon.png"</img> <span
47   - class="configuration-panel-label">Expressão</span>
  95 + <div id="avatar-container"
  96 + class="col-sm-7 avatar-container-zoom-out">
  97 + <div id="facial-edit" class="edit-container">
  98 + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
  99 + <div class="icon_container config-panel-option" name="edit"
  100 + panel="facial">
  101 + <img src="{{ server }}/img/edit-icon.png"></img>
  102 + </div>
48 103 </div>
49   - <div class="icon_container config-panel-option" name="right-hand"
50   - panel="right-hand">
51   - <img src="{{ server }}/img/right-hand-icon.png"></img> <span
52   - class="configuration-panel-label">Mão direita</span>
  104 + <div id="right-hand-edit" class="edit-container">
  105 + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
  106 + <div class="icon_container config-panel-option" name="edit"
  107 + panel="right-hand">
  108 + <img src="{{ server }}/img/edit-icon.png"></img>
  109 + </div>
53 110 </div>
54   - <div class="icon_container config-panel-option" name="left-hand"
55   - panel="left-hand">
56   - <img src="{{ server }}/img/left-hand-icon.png"></img> <span
57   - class="configuration-panel-label">Mão esquerda</span>
  111 + <div id="left-hand-edit" class="edit-container">
  112 + <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
  113 + <div class="icon_container config-panel-option" name="edit"
  114 + panel="left-hand">
  115 + <img src="{{ server }}/img/edit-icon.png"></img>
  116 + </div>
58 117 </div>
59   - </div>
60   - </div>
61   - <div id="avatar-container" class="col-sm-7 avatar-container-zoom-out">
62   - <div id="facial-edit" class="edit-container">
63   - <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
64   - <div class="icon_container config-panel-option" name="edit"
65   - panel="facial">
66   - <img src="{{ server }}/img/edit-icon.png"></img>
  118 + <div id="avatar-default" class="avatar-img">
  119 + <div id="avatar-body-face"
  120 + class="icon_container config-panel-option" name="avatar-facial"
  121 + panel="facial">
  122 + <img src="{{ server }}/img/avatar-facial-icon.png"></img>
  123 + </div>
  124 + <div id="avatar-body-right-hand"
  125 + class="icon_container config-panel-option"
  126 + name="avatar-right-hand" panel="right-hand">
  127 + <img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
  128 + </div>
  129 + <div id="avatar-body-left-hand"
  130 + class="icon_container config-panel-option"
  131 + name="avatar-left-hand" panel="left-hand">
  132 + <img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
  133 + </div>
  134 + <img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
67 135 </div>
  136 + <img id="avatar-facial" class="avatar-img avatar-img-zoom-out"
  137 + src="{{ server }}/img/avatar-facial.png"></img> <img
  138 + id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
  139 + src="{{ server }}/img/avatar-right-hand.png"></img> <img
  140 + id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
  141 + src="{{ server }}/img/avatar-left-hand.png"></img>
68 142 </div>
69   - <div id="right-hand-edit" class="edit-container">
70   - <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
71   - <div class="icon_container config-panel-option" name="edit"
72   - panel="right-hand">
73   - <img src="{{ server }}/img/edit-icon.png"></img>
  143 + <div id="selection-container" class="col-sm-2">
  144 + <div id="selection-panel">
  145 + <div class="x btn-default"></div>
74 146 </div>
75 147 </div>
76   - <div id="left-hand-edit" class="edit-container">
77   - <img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
78   - <div class="icon_container config-panel-option" name="edit"
79   - panel="left-hand">
80   - <img src="{{ server }}/img/edit-icon.png"></img>
  148 + </div>
  149 + <div class="row">
  150 + <div id="ready-button" class="btn btn-default pull-right disabled">GERAR
  151 + SINAL</div>
  152 + </div>
  153 + </div>
  154 + <div id="render-screen">
  155 + <div id="render-main" class="row">
  156 + <div id="render-ref" class="col-sm-6">
  157 + <h6>Vídeo de referência</h6>
  158 + <div class="col-sm-12">
  159 + <video src="" preload="metadata"
  160 + class="ref-video video-body-main video-border" loop controls>
  161 + <source type="video/webm">
  162 + </video>
81 163 </div>
82 164 </div>
83   - <div id="avatar-default" class="avatar-img">
84   - <div id="avatar-body-face"
85   - class="icon_container config-panel-option" name="avatar-facial"
86   - panel="facial">
87   - <img src="{{ server }}/img/avatar-facial-icon.png"></img>
88   - </div>
89   - <div id="avatar-body-right-hand"
90   - class="icon_container config-panel-option"
91   - name="avatar-right-hand" panel="right-hand">
92   - <img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
  165 + <div class="col-sm-6">
  166 + <div id="render-avatar" class="col-sm-12">
  167 + <h6>
  168 + Sinal "<span class="sign-label"></span>" construído
  169 + </h6>
  170 + <video src="" preload="metadata"
  171 + class="video-body-main video-border" autoplay loop controls>
  172 + <source type="video/webm">
  173 + </video>
  174 + <div id="render-edit" class="icon_container" name="big-edit">
  175 + <img class="col-centered"
  176 + src="{{ server }}/img/big-edit-icon.png"></img>
  177 + </div>
93 178 </div>
94   - <div id="avatar-body-left-hand"
95   - class="icon_container config-panel-option" name="avatar-left-hand"
96   - panel="left-hand">
97   - <img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
  179 + <div id="render-loading">
  180 + <h6>
  181 + Gerando o sinal "<span class="sign-label"></span>"
  182 + </h6>
  183 + <div id="loading-container" class="video-border">
  184 + <img src="{{ server }}/img/loading.gif">
  185 + </div>
98 186 </div>
99   - <img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
100 187 </div>
101   - <img id="avatar-facial" class="avatar-img avatar-img-zoom-out"
102   - src="{{ server }}/img/avatar-facial.png"></img> <img
103   - id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
104   - src="{{ server }}/img/avatar-right-hand.png"></img> <img
105   - id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
106   - src="{{ server }}/img/avatar-left-hand.png"></img>
107 188 </div>
108   - <div id="selection-container" class="col-sm-2">
109   - <div id="selection-panel">
110   - <div class="x btn-default"></div>
111   - </div>
  189 + <div class="row">
  190 + <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
  191 + SINAL</div>
112 192 </div>
113 193 </div>
114   - <div class="row">
115   - <div id="ready-button" class="btn btn-default pull-right disabled">GERAR
116   - SINAL</div>
117   - </div>
118   - </div>
119   - <div id="render-screen">
120   - <div id="render-main" class="row">
121   - <div id="render-ref" class="col-sm-6">
122   - <h6>Vídeo de referência</h6>
123   - <div class="col-sm-12">
124   - <video src="" preload="metadata"
125   - class="ref-video video-body-main video-border" loop controls>
126   - <source type="video/webm">
127   - </video>
  194 + <div id="thanks-screen">
  195 + <div class="col-sm-6 col-centered">
  196 + <div id="completed-task-msg">
  197 + <h3 class="text-center">Obrigado,</h3>
  198 + <h6 class="text-center">você configurou o sinal com sucesso!</h6>
128 199 </div>
129   - </div>
130   - <div class="col-sm-6">
131   - <div id="render-avatar" class="col-sm-12">
132   - <h6>
133   - Sinal "<span class="sign-label"></span>" construído
134   - </h6>
135   - <video src="" preload="metadata"
136   - class="video-body-main video-border" autoplay loop controls>
137   - <source type="video/webm">
138   - </video>
139   - <div id="render-edit" class="icon_container" name="big-edit">
140   - <img class="col-centered" src="{{ server }}/img/big-edit-icon.png"></img>
141   - </div>
  200 + <div id="completed-all-task-msg">
  201 + <h3 class="text-center">Parabéns,</h3>
  202 + <h6 class="text-center">você configurou todos os sinais
  203 + disponíveis!</h6>
142 204 </div>
143   - <div id="render-loading">
144   - <h6>
145   - Gerando o sinal "<span class="sign-label"></span>"
146   - </h6>
147   - <div id="loading-container" class="video-border">
148   - <img src="{{ server }}/img/loading.gif">
149   - </div>
  205 + <div class="col-sm-11 col-centered">
  206 + <img src="{{ server }}/img/avatar-thanks.png"></img>
150 207 </div>
151 208 </div>
152 209 </div>
153   - <div class="row">
154   - <div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
155   - SINAL</div>
156   - </div>
157 210 </div>
158   - <div id="thanks-screen">
159   - <div class="col-sm-6 col-centered">
160   - <div id="completed-task-msg">
161   - <h3 class="text-center">Obrigado,</h3>
162   - <h6 class="text-center">você configurou o sinal com sucesso!</h6>
163   - </div>
164   - <div id="completed-all-task-msg">
165   - <h3 class="text-center">Parabéns,</h3>
166   - <h6 class="text-center">você configurou todos os sinais
167   - disponíveis!</h6>
168   - </div>
169   - <div class="col-sm-11 col-centered">
170   - <img src="{{ server }}/img/avatar-thanks.png"></img>
171   - </div>
172   - </div>
  211 + <div id="submit-sign-container" class="sub-main-container">
  212 + <form class="form-horizontal">
  213 + <fieldset>
  214 + <h2>Preencha os campos para enviar seu sinal</h2>
  215 + <div class="submit-sign-form col-sm-8">
  216 + <div class="form-group">
  217 + <label class="control-label col-sm-3">Nome do sinal:</label>
  218 + <div class="col-sm-5">
  219 + <input class="form-control" placeholder="Nome do sinal"
  220 + type="text">
  221 + </div>
  222 + </div>
  223 + <div class="form-group">
  224 + <label class="control-label col-sm-3">Estado:</label>
  225 + <div class="col-sm-5">
  226 + <select class="form-control">
  227 + <option value="0">Selecione um Estado</option>
  228 + <option value="ac">Acre</option>
  229 + <option value="al">Alagoas</option>
  230 + <option value="ap">Amapá</option>
  231 + <option value="am">Amazonas</option>
  232 + <option value="ba">Bahia</option>
  233 + <option value="ce">Ceará</option>
  234 + <option value="df">Distrito Federal</option>
  235 + <option value="es">Espirito Santo</option>
  236 + <option value="go">Goiás</option>
  237 + <option value="ma">Maranhão</option>
  238 + <option value="ms">Mato Grosso do Sul</option>
  239 + <option value="mt">Mato Grosso</option>
  240 + <option value="mg">Minas Gerais</option>
  241 + <option value="pa">Pará</option>
  242 + <option value="pb">Paraíba</option>
  243 + <option value="pr">Paraná</option>
  244 + <option value="pe">Pernambuco</option>
  245 + <option value="pi">Piauí</option>
  246 + <option value="rj">Rio de Janeiro</option>
  247 + <option value="rn">Rio Grande do Norte</option>
  248 + <option value="rs">Rio Grande do Sul</option>
  249 + <option value="ro">Rondônia</option>
  250 + <option value="rr">Roraima</option>
  251 + <option value="sc">Santa Catarina</option>
  252 + <option value="sp">São Paulo</option>
  253 + <option value="se">Sergipe</option>
  254 + <option value="to">Tocantins</option>
  255 + </select>
  256 + </div>
  257 + </div>
  258 + <div class="form-group">
  259 + <label class="control-label col-sm-3">Cidade:</label>
  260 + <div class="col-sm-5">
  261 + <input class="form-control" placeholder="Nome da sua cidade"
  262 + type="text">
  263 + </div>
  264 + </div>
  265 + <div class="form-group">
  266 + <label class="control-label col-sm-3">Arquivo do sinal:</label>
  267 + <div class="col-sm-5">
  268 + <input id="file-upload" type="file" name="file" />
  269 + </div>
  270 + </div>
  271 + <div class="form-actions">
  272 + <label class="control-label col-sm-3"></label>
  273 + <button name="btn" class="btn btn-primary btn-lg">Enviar</button>
  274 + </div>
  275 + </fieldset>
  276 + </form>
  277 + </div>
  278 + <div id="teached-signs-container" class="sub-main-container">
  279 + <span>Sinais ensinados</span>
  280 + </div>
  281 + <div id="tutorial-container" class="sub-main-container">
  282 + <span>Tutorial</span>
173 283 </div>
174 284 </div>
175 285  
... ... @@ -188,18 +298,19 @@
188 298 <script src="{{ server }}/assets/js/wikilibras.js"></script>
189 299  
190 300 <script type="text/javascript">
191   - wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
192   - $( document ).ready(function() {
193   - // Make it possible the elements trigger the show or hide event
194   - (function ($) {
195   - $.each(['show', 'hide'], function (i, ev) {
196   - var el = $.fn[ev];
197   - $.fn[ev] = function () {
198   - this.trigger(ev);
199   - el.apply(this, arguments);
200   - return el;
201   - };
202   - });
203   - })(jQuery);
204   - });
  301 + wikilibras.run("{{ server }}", "{{ server_backend }}",
  302 + "{{ app_shortname }}", "{{ api_host }}");
  303 + $(document).ready(function() {
  304 + // Make it possible the elements trigger the show or hide event
  305 + (function($) {
  306 + $.each([ 'show', 'hide' ], function(i, ev) {
  307 + var el = $.fn[ev];
  308 + $.fn[ev] = function() {
  309 + this.trigger(ev);
  310 + el.apply(this, arguments);
  311 + return el;
  312 + };
  313 + });
  314 + })(jQuery);
  315 + });
205 316 </script>
... ...