Commit 7391ceb11c49d6d8b41e9f737fbad5fc78cb5efe
1 parent
91cd2b91
Exists in
master
and in
1 other branch
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
| 1 | @import url("articulation.css"); | 1 | @import url("articulation.css"); |
| 2 | +@import url("submit-sign.css"); | ||
| 2 | 3 | ||
| 3 | /* Main */ | 4 | /* Main */ |
| 5 | +body nav.navbar:first-child { | ||
| 6 | + display: none; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +footer { | ||
| 10 | + display: none; | ||
| 11 | +} | ||
| 12 | + | ||
| 4 | @font-face { | 13 | @font-face { |
| 5 | font-family: 'Titillium Web'; | 14 | font-family: 'Titillium Web'; |
| 6 | src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype'); | 15 | src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype'); |
| @@ -18,6 +27,32 @@ body { | @@ -18,6 +27,32 @@ body { | ||
| 18 | background: linear-gradient(to right, #92bbe5, #ddeeff, #92bbe5); | 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 | .col-centered { | 56 | .col-centered { |
| 22 | display: block; | 57 | display: block; |
| 23 | float: none; | 58 | float: none; |
| @@ -50,11 +85,20 @@ body { | @@ -50,11 +85,20 @@ body { | ||
| 50 | } | 85 | } |
| 51 | 86 | ||
| 52 | #main-container { | 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 | #initial-screen { | 99 | #initial-screen { |
| 57 | display: none; | 100 | display: none; |
| 101 | + padding-top: 40px; | ||
| 58 | } | 102 | } |
| 59 | 103 | ||
| 60 | #configuration-screen { | 104 | #configuration-screen { |
view/assets/js/wikilibras.js
| @@ -443,5 +443,25 @@ | @@ -443,5 +443,25 @@ | ||
| 443 | wikilibras.enableIconCheck = function(container, isHover) { | 443 | wikilibras.enableIconCheck = function(container, isHover) { |
| 444 | _enableIconCheck(container, isHover); | 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 | }(window.wikilibras = window.wikilibras || {}, jQuery)); | 467 | }(window.wikilibras = window.wikilibras || {}, jQuery)); |
| @@ -0,0 +1,17 @@ | @@ -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
| 1 | <link rel="stylesheet" href="{{ server }}/assets/css/main.css"> | 1 | <link rel="stylesheet" href="{{ server }}/assets/css/main.css"> |
| 2 | <span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span> | 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 | <div id="main-container" class="container"> | 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 | </div> | 54 | </div> |
| 20 | </div> | 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 | </div> | 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 | </div> | 93 | </div> |
| 42 | </div> | 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 | </div> | 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 | </div> | 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 | </div> | 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 | </div> | 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 | </div> | 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 | </div> | 146 | </div> |
| 75 | </div> | 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 | </div> | 163 | </div> |
| 82 | </div> | 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 | </div> | 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 | </div> | 186 | </div> |
| 99 | - <img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img> | ||
| 100 | </div> | 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 | </div> | 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 | </div> | 192 | </div> |
| 113 | </div> | 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 | </div> | 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 | </div> | 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 | </div> | 207 | </div> |
| 151 | </div> | 208 | </div> |
| 152 | </div> | 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 | </div> | 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 | </div> | 283 | </div> |
| 174 | </div> | 284 | </div> |
| 175 | 285 | ||
| @@ -188,18 +298,19 @@ | @@ -188,18 +298,19 @@ | ||
| 188 | <script src="{{ server }}/assets/js/wikilibras.js"></script> | 298 | <script src="{{ server }}/assets/js/wikilibras.js"></script> |
| 189 | 299 | ||
| 190 | <script type="text/javascript"> | 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 | </script> | 316 | </script> |