Adicionado suporte ao Safari e novos campos no Enviar Sinal.

Adabriand Furtado
1 parent e3569528
Showing 105 changed files with 414 additions and 251 deletions Show diff stats
view/css/main.css
view/img/circular/md/plano-baixo-esquerda.mp4
view/img/circular/md/plano-baixo-tras.mp4
view/img/circular/md/plano-cima-direita.mp4
view/img/circular/md/plano-cima-frente.mp4
view/img/circular/md/plano-direita-baixo.mp4
view/img/circular/md/plano-direita-tras.mp4
view/img/circular/md/plano-esquerda-cima.mp4
view/img/circular/md/plano-esquerda-frente.mp4
view/img/circular/md/plano-frente-baixo.mp4
view/img/circular/md/plano-frente-direita.mp4
view/img/circular/md/plano-tras-cima.mp4
view/img/circular/md/plano-tras-esquerda.mp4
view/img/circular/md/raio-grande.mp4
view/img/circular/md/raio-normal.mp4
view/img/circular/md/raio-pequeno.mp4
view/img/circular/md/sentido-anti-horario.mp4
view/img/circular/md/sentido-horario.mp4
view/img/circular/md/velocidade-lento.mp4
view/img/circular/md/velocidade-normal.mp4
@@ -8,6 +8,10 @@ body nav.navbar:first-child {
 	display: none;
 }
+.navbar-wl .navbar-nav {
+	padding-left: 60px;
+}
+
 footer {
 	display: none;
 }
@@ -534,6 +538,10 @@ ul.rig.columns-4 li {
 	width: 100%;
 }
+#thanks-screen a {
+	text-decoration: underline;
+}
+
 #completed-all-task-msg {
 	display: none;
 }
 (function(videoHelper, $, undefined) {
-	
+
+	function _getSource(videoBaseUrl) {
+		return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
+				+ '<source src="' + videoBaseUrl
+				+ '.mp4" type="video/mp4">Sem suporte a vídeos';
+	}
+
 	function _controlVideo(elId, toPlay) {
-		var videoSrc = $(elId).attr("src");
-		if (typeof videoSrc == "undefined" ||
-				(typeof videoSrc != "undefined" && videoSrc === ""))
+		if ($(elId).length === 0)
 			return;
 		if (toPlay) {
 			$(elId).get(0).play();
@@ -11,13 +15,17 @@
 			$(elId).get(0).pause();
 		}
 	}
-	
+
 	videoHelper.play = function(elId) {
 		_controlVideo(elId, true);
-	}
-	
-	 videoHelper.pause = function(elId) {
+	};
+
+	videoHelper.pause = function(elId) {
 		_controlVideo(elId, false);
-	}
+	};
+
+	videoHelper.getSource = function(videoBaseUrl) {
+		return _getSource(videoBaseUrl);
+	};
 }(window.videoHelper = window.videoHelper || {}, jQuery));
 (function(renderSign, $, undefined) {
-	
+
 	var api_url = '';
-	
+
 	function _submitParameterJSON(parsedParameterJSON, callback) {
 		console.log(parsedParameterJSON);
 		$.ajax({
@@ -18,14 +18,15 @@
 			}
 		});
 	}
-	
+
 	function _showRenderedAvatar(parameterJSON) {
 		var userId = parameterJSON['userId'];
 		var signName = parameterJSON['sinal'];
-		$("#render-avatar video").attr("src",
-				_getRenderedAvatarUrl(userId, signName));
+
+		var avatarBaseUrl = _getRenderedAvatarBaseUrl(userId, signName);
+		$('#render-avatar video').html(videoHelper.getSource(avatarBaseUrl));
 		$("#render-avatar").fadeIn(300);
-	}	
+	}
 	function _showRenderScreen(toShow) {
 		if (toShow) {
@@ -38,22 +39,22 @@
 			videoHelper.pause("#render-avatar video");
 		}
 	}
-	
-	function _getRenderedAvatarUrl(userId, signName) {
-		return api_url + '/public/' + userId + '/' + signName + ".webm";
+
+	function _getRenderedAvatarBaseUrl(userId, signName) {
+		return api_url + '/public/' + userId + '/' + signName;
 	}
-	
+
 	renderSign.showRenderedAvatar = function(parameterJSON) {
 		_showRenderedAvatar(parameterJSON);
 		_showRenderScreen(true);
 	}
-	
+
 	renderSign.showRenderScreen = function(toShow) {
 		_showRenderScreen(toShow);
 	}
-	
-	renderSign.getRenderedAvatarUrl = function(userId, signName) {
-		return _getRenderedAvatarUrl(userId, signName);
+
+	renderSign.getRenderedAvatarBaseUrl = function(userId, signName) {
+		return _getRenderedAvatarBaseUrl(userId, signName);
 	}
 	renderSign.submit = function(parsedParameterJSON) {
@@ -65,13 +66,14 @@
 		$("#finish-button").addClass("disabled");
 		$("#finish-button").show();
-		_submitParameterJSON(parsedParameterJSON, function(parsedParameterJSON) {
-			$("#render-loading").fadeOut(300);
-			$("#finish-button").removeClass("disabled");
-			_showRenderedAvatar(parsedParameterJSON);
-		});
+		_submitParameterJSON(parsedParameterJSON,
+				function(parsedParameterJSON) {
+					$("#render-loading").fadeOut(300);
+					$("#finish-button").removeClass("disabled");
+					_showRenderedAvatar(parsedParameterJSON);
+				});
 	};
-	
+
 	renderSign.setup = function(apiUrl) {
 		api_url = apiUrl;
 		$("#render-edit").off("click").on("click", function() {
 (function(submitSign, $, undefined) {
 	var submitUrl = '';
-	
+	var MIN_PHRASES_LENGTH = 3;
+	var MAX_PHRASES_LENGTH = 20;
+
 	function _isEmpty(str) {
 		return (!str || 0 === str.length);
 	}
-	function _validadeInputFields() {
+	function _alertSignName() {
+		$('#upload-warning-msg').hide();
 		var signName = $('#input-sign-name').val();
+		if (_isEmpty(signName)) {
+			$('#upload-warning-msg').html('Por favor indique o nome do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertWordClass() {
+		$('#upload-warning-msg').hide();
+		var wordClass = $('#input-word-class').val();
+		if (_isEmpty(wordClass)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione a classe gramatical do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _areValidPhrases(phrases) {
+		var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
+		var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
+		return splitPhrasesLength >= MIN_PHRASES_LENGTH
+				&& splitPhrasesLength <= MAX_PHRASES_LENGTH;
+	}
+
+	function _alertPhrase() {
+		$('#upload-warning-msg').hide();
+		var phrases = $('#input-phrases').val();
+		if (!_areValidPhrases(phrases)) {
+			$('#upload-warning-msg').html(
+					'As frases de exemplo devem possuir no minímo '
+							+ MIN_PHRASES_LENGTH + ' e no máximo '
+							+ MAX_PHRASES_LENGTH + ' palavras.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertState() {
+		$('#upload-warning-msg').hide();
 		var state = $('#input-state').val();
+		if (_isEmpty(state)) {
+			$('#upload-warning-msg').html('Por favor selecione seu estado.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertCity() {
+		$('#upload-warning-msg').hide();
 		var city = $('#input-city').val();
+		if (_isEmpty(city)) {
+			$('#upload-warning-msg').html(
+					'Por favor indique o nome da sua cidade.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertSignUpload() {
+		$('#upload-warning-msg').hide();
 		var signUpload = $('#input-sign-upload').val();
-		return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
-				&& !_isEmpty(signUpload);
+		if (_isEmpty(signUpload)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione o arquivo do vídeo do seu sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _validadeAllFields() {
+		var signName = $('#input-sign-name').val();
+		var wordClass = $('#input-word-class').val();
+		var phrases = $('#input-phrases').val();
+		var state = $('#input-state').val();
+		var city = $('#input-city').val();
+		var signUpload = $('#input-sign-upload').val();
+		return !_isEmpty(signName) && !_isEmpty(wordClass)
+				&& _areValidPhrases(phrases) && !_isEmpty(state)
+				&& !_isEmpty(city) && !_isEmpty(signUpload);
 	}
 	function _updateSubmitButton() {
-		if (_validadeInputFields()) {
-			$('#submit-sign-container button').removeClass('disabled');
+		if (_validadeAllFields()) {
+			_enableSubmitButton();
 		} else {
-			$('#submit-sign-container button').addClass('disabled');
+			_disableSubmitButton();
 		}
 	}
-	
+
+	function _enableSubmitButton() {
+		$('#submit-sign-container button').removeClass('disabled');
+		$('#submit-sign-container button').off('click');
+	}
+
+	function _disableSubmitButton() {
+		$('#submit-sign-container button').addClass('disabled');
+		$('#submit-sign-container button').on('click', function(event) {
+			event.preventDefault();
+		});
+	}
+
 	function _resetFormFields() {
 		$('#input-sign-name').val('');
 		$('#input-state').val('');
 		$('#input-city').val('');
 		$('#input-sign-upload').val('');
 		$("#upload-progress .progress-bar").css("width", "0px");
-    	$('#upload-progress-container').hide();
+		$('#upload-progress-container').hide();
 		$('#input-sign-upload').show();
 	}
-	
-	submitSign.show = function() {
-		$(".sub-main-container").hide();
-		$("#submit-sign-container").show();
-		$("#submit-sign-anchor").focus();
-	}
-	submitSign.setup = function(uploadSignHost) {
-		submitUrl = uploadSignHost;
+	function _setupSubmitSignForm() {
+		_disableSubmitButton();
 		$('#submit-sign-container form').fileupload(
 				{
 					url : submitUrl,
-				    add: function (e, data) {            
-				        $('#submit-sign-container button').off('click').on('click', function (event) {
-				        	event.preventDefault();
-				        	
-				        	$('#submit-sign-container button').addClass('disabled');
-				        	$('#input-sign-upload').hide();
-				        	$('#upload-progress-container').show();
-				        	data.submit();
-				        });
-				    },
+					add : function(e, data) {
+						$('#submit-sign-container button').off('click').on(
+								'click',
+								function(event) {
+									event.preventDefault();
+
+									$('#submit-sign-container button')
+											.addClass('disabled');
+									$('#input-sign-upload').hide();
+									$('#upload-progress-container').show();
+									data.submit();
+								});
+					},
 					done : function(e, data) {
 						$('#upload-success-msg').fadeIn(500);
 						setTimeout(function() {
@@ -64,27 +145,52 @@
 					progressall : function(e, data) {
 						var progress = parseInt(data.loaded / data.total * 100,
 								10);
-						$("#upload-progress .progress-bar").attr('aria-valuenow', progress).
-							css("width", progress + "%");
+						$("#upload-progress .progress-bar").attr(
+								'aria-valuenow', progress).css("width",
+								progress + "%");
 					},
 					error : function(error) {
 						alert(error.responseText);
 					},
-					replaceFileInput: false
+					replaceFileInput : false
 				});
 		$('#input-sign-name').on('input', function() {
+			_alertSignName();
+			_updateSubmitButton();
+		});
+		$('#input-word-class').on('input', function() {
+			_alertWordClass();
+			_updateSubmitButton();
+		});
+		$('#input-phrases').on('input', function() {
+			_alertPhrase();
 			_updateSubmitButton();
 		});
 		$('#input-state').on('input', function() {
+			_alertState();
 			_updateSubmitButton();
 		});
 		$('#input-city').on('input', function() {
+			_alertCity();
 			_updateSubmitButton();
 		});
 		$('#input-sign-upload').on('change', function() {
+			_alertSignUpload();
 			_updateSubmitButton();
 		});
+	}
+
+	submitSign.show = function() {
+		$(".sub-main-container").hide();
+		$("#submit-sign-container").show();
+		$("#submit-sign-anchor").focus();
+	};
+
+	submitSign.setup = function(uploadSignHost) {
+		submitUrl = uploadSignHost;
+		loadHtmlHelper.load('/submit-sign/submit-sign.html',
+				'#submit-sign-container', _setupSubmitSignForm);
 	};
 }(window.submitSign = window.submitSign || {}, jQuery));
@@ -6,20 +6,20 @@
 	var projectId = -1;
 	function _updateTeachedSignsMessage() {
-		$(".teached-signs-msg").hide();
+		$('.teached-signs-msg').hide();
 		if (doneTasks == 0) {
-			$(".teached-signs-msg[type=none]").show();
+			$('.teached-signs-msg[type=none]').show();
 		} else if (doneTasks == 1) {
-			$(".teached-signs-msg[type=one]").show();
+			$('.teached-signs-msg[type=one]').show();
 		} else {
-			$(".teached-signs-msg[type=more] span").text(doneTasks);
-			$(".teached-signs-msg[type=more]").show();
+			$('.teached-signs-msg[type=more] span').text(doneTasks);
+			$('.teached-signs-msg[type=more]').show();
 		}
 	}
 	function _createSigns(answers) {
 		_updateTeachedSignsMessage();
-		$("#signs-list-container").html("");
+		$('#signs-list-container').html('');
 		for (i = 0; i < answers.length; i++) {
 			_addSign(answers[i].info);
 		}
@@ -28,25 +28,24 @@
 	function _addSign(answer) {
 		var signName = answer.parameter_json.sinal;
 		var apiUserId = answer.parameter_json.userId;
-		var videoUrl = renderSign.getRenderedAvatarUrl(apiUserId, signName);
-		$("#signs-list-container").append(
+		var videoBaseUrl = renderSign.getRenderedAvatarBaseUrl(apiUserId,
+				signName);
+		$('#signs-list-container').append(
 				'<div class="col-btn col-xs-6 col-sm-3 col-md-2" sign-name="'
 						+ signName
 						+ '"><button class="btn btn-danger btn-block">'
 						+ signName + '</button></div>');
-		$("#signs-list-container .col-btn[sign-name=" + signName + "]")
-				.off("click")
-				.on(
-						"click",
-						function() {
-							$('#teached-sign-video-container')
-									.html(
-											"<video autoplay loop><source src='"
-													+ videoUrl
-													+ "' type='video/webm'>Sem suporte a vídeos</video>");
-							$('#teached-sign-name').html(signName);
-							$('#teached-sign-modal').modal('show');
-						});
+		$('#signs-list-container .col-btn[sign-name=' + signName + ']').off(
+				'click').on(
+				'click',
+				function() {
+					$('#teached-sign-video-container').html(
+							'<video autoplay loop>'
+									+ videoHelper.getSource(videoBaseUrl)
+									+ '</video>');
+					$('#teached-sign-name').html(signName);
+					$('#teached-sign-modal').modal('show');
+				});
 	}
 	function _updateTeachedSignsContainer() {
@@ -56,13 +55,13 @@
 	}
 	teachedSigns.show = function() {
-		$(".sub-main-container").hide();
-		$("#teached-signs-container").show();
+		$('.sub-main-container').hide();
+		$('#teached-signs-container').show();
 	}
 	teachedSigns.setup = function() {
 		pybossaApiHelper.getProjectId().done(function(response) {
-			if (typeof response == "undefined" || response.length < 1) {
+			if (typeof response == 'undefined' || response.length < 1) {
 				return;
 			}
 			projectId = response[0].id;
@@ -33,10 +33,9 @@
 	function _loadTaskInfo(task) {
 		currentTaskId = task.id;
 		var signName = task.info.sign_name;
-		var refVidLink = videosUrl + signName + '_REF.webm';
+		var baseRefVidUrl = videosUrl + signName + '_REF';
 		$('.sign-label').text(signName);
-		$('.ref-video').attr('src', refVidLink);
-
+		$('.ref-video').html(videoHelper.getSource(baseRefVidUrl));
 		_setupTmpParameterJSON(task.info.sign_name);
 	}
@@ -4,30 +4,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/long-duration-icon.png" /> Longa
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-duration-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/short-duration-icon.png" /> Breve
@@ -5,30 +5,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/slow-velocity-icon.png" /> Lento
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-velocity-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/fast-velocity-icon.png" /> Rápido
@@ -5,36 +5,30 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/mov/PONTUAL.webm"
+			<li><video 
 					preload="metadata" value="pontual"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.mp4" type="video/mp4">
 				</video> Pontual</li>
-			<li><video src="{{ server }}/img/mov/RETILINEO.webm"
+			<li><video
 					preload="metadata" value="retilineo"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.mp4" type="video/mp4">
 				</video> Retilíneo</li>
-			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+			<li><video
 					preload="metadata" value="circular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.mp4" type="video/mp4">					
 				</video> Circular</li>
-			<li><video src="{{ server }}/img/mov/SEMICIRCULAR.webm"
+			<li><video
 					preload="metadata" value="semicircular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.mp4" type="video/mp4">
 				</video> Semi-Circular</li>
-			<!--
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
-         -->
 		</ul>
 	</div>
 </div>
@@ -6,76 +6,76 @@
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm"
 					preload="metadata" value="baixo-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.mp4" type="video/mp4">
 				</video>Baixo - Direita</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm"
 					preload="metadata" value="cima-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.mp4" type="video/mp4">
 				</video>Cima - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm"
 					preload="metadata" value="direita-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.mp4" type="video/mp4">
 				</video>Esquerda - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm"
 					preload="metadata" value="esquerda-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.mp4" type="video/mp4">
 				</video>Direita - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm"
 					preload="metadata" value="baixo-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.mp4" type="video/mp4">
 				</video>Baixo - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm"
 					preload="metadata" value="cima-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.mp4" type="video/mp4">
 				</video>Cima - Frente</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm"
 					preload="metadata" value="frente-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.mp4" type="video/mp4">
 				</video>Frente - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm"
 					preload="metadata" value="tras-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.mp4" type="video/mp4">
 				</video>Trás - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm"
 					preload="metadata" value="frente-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.mp4" type="video/mp4">
 				</video>Frente - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm"
 					preload="metadata" value="tras-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.mp4" type="video/mp4">
 				</video>Trás - Direita</li>	
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm"
 					preload="metadata" value="direita-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.mp4" type="video/mp4">
 				</video>Esquerda - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm"
 					preload="metadata" value="esquerda-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.mp4" type="video/mp4">
 				</video>Direita - Frente</li>
 		</ul>
 	</div>
@@ -5,20 +5,23 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.webm"
+			<li><video
 					preload="metadata" value="pequeno"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.mp4" type="video/mp4">
 				</video>Pequeno</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.webm"
+			<li><video
 					preload="metadata" value="normal"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.mp4" type="video/mp4">
 				</video>Médio</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.webm"
+			<li><video
 					preload="metadata" value="grande"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.mp4" type="video/mp4">
 				</video>Grande</li>
 		</ul>
 	</div>
@@ -5,15 +5,17 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.webm"
+			<li><video
 					preload="metadata" value="true"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.mp4" type="video/mp4">
 				</video>Horário</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.webm"
+			<li><video
 					preload="metadata" value="false"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.mp4" type="video/mp4">
 				</video>Anti-horário</li>
 		</ul>
 	</div>
@@ -5,20 +5,23 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.webm"
+			<li><video
 					preload="metadata" value="lento"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.mp4" type="video/mp4">
 				</video>Lento</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.webm"
+			<li><video
 					preload="metadata" value="normal"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.mp4" type="video/mp4">
 				</video>Normal</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.webm"
+			<li><video
 					preload="metadata" value="rapido"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.mp4" type="video/mp4">
 				</video>Rápido</li>
 		</ul>
 	</div>
 <link rel="stylesheet" href="{{ server }}/css/main.css">
-<a href="{{ homepage_url }}" class="wl-logo"> <img
-	src="{{ server }}/img/logo.svg">
-</a>
 <nav class="navbar navbar-default navbar-wl">
 	<div class="container">
+		<a href="{{ homepage_url }}" class="wl-logo"> <img
+			src="{{ server }}/img/logo.svg">
+		</a>
 		<!-- Brand and toggle get grouped for better mobile display -->
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle collapsed"
@@ -16,12 +16,14 @@
 			</button>
 		</div>
 		<!-- Collect the nav links, forms, and other content for toggling -->
-		<div class="collapse navbar-collapse" id="navbar-collapse-1">
+		<div id="navbar-collapse-1" class="collapse navbar-collapse">
 			<ul class="nav navbar-nav navbar-right">
+				<li><a href="/pybossa/project"
+					target="_blank">Início</a></li>
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
 				<li><a id="submit-sign-anchor" href="javascript:void(0);"
-					onclick="submitSign.show()">Enviar sinal</a></li>
+					onclick="submitSign.show()">Gravar e enviar vídeo</a></li>
 				<li><a href="javascript:void(0);" onclick="teachedSigns.show()">Sinais
 						ensinados</a></li>
 				<li><a href="javascript:void(0);"
@@ -40,10 +42,9 @@
 		<div id="initial-screen">
 			<div class="col-sm-6 col-centered">
 				<div class="col-sm-8 col-centered">
-					<video src="" preload="metadata"
+					<video preload="metadata"
 						class="ref-video video-body-main video-border" autoplay loop
 						controls>
-						<source type="video/webm">
 					</video>
 				</div>
 				<h6 class="text-center">
@@ -60,9 +61,8 @@
 					<h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
 					<div id="ref-video-panel" class="col-sm-12">
 						<div id="ref-video-container" class="col-sm-10">
-							<video src="" preload="metadata"
+							<video preload="metadata"
 								class="ref-video video-body-main video-border" loop controls>
-								<source type="video/webm">
 							</video>
 						</div>
 						<div id="minimize-icon-container" class="col-sm-2 icon_container"
@@ -160,9 +160,8 @@
 				<div id="render-ref" class="col-sm-6">
 					<h6>Vídeo de referência</h6>
 					<div class="col-sm-12">
-						<video src="" preload="metadata"
+						<video preload="metadata"
 							class="ref-video video-body-main video-border" loop controls>
-							<source type="video/webm">
 						</video>
 					</div>
 				</div>
@@ -171,9 +170,8 @@
 						<h6>
 							Sinal "<span class="sign-label"></span>" construído
 						</h6>
-						<video src="" preload="metadata"
+						<video preload="metadata"
 							class="video-body-main video-border" autoplay loop controls>
-							<source type="video/webm">
 						</video>
 						<div id="render-edit" class="icon_container" name="big-edit">
 							<img class="col-centered"
@@ -198,18 +196,18 @@
 			</div>
 		</div>
 		<div id="thanks-screen">
-			<div class="col-sm-7 col-centered">
+			<div class="col-sm-8 col-centered">
 				<div id="completed-task-msg">
 					<h3 class="text-center">Obrigado,</h3>
 					<h6 class="text-center">você configurou o sinal com sucesso!</h6>
 				</div>
 				<div id="completed-all-task-msg" class="text-center">
 					<h4>
-						Que pena, não há disponíveis sinais no momento!
+						Que pena, não há sinais disponíveis no momento!
 						</h6>
 						<h6>
 							Ajude a expandir o dicionário <a href="javascript:void(0);"
-								onclick="submitSign.show()">enviando um novo sinal</a>, ou
+								onclick="submitSign.show()">gravando e enviando um vídeo</a>, ou
 						</h6>
 						<h6>
 							experimente <a href="javascript:void(0);"
@@ -224,83 +222,6 @@
 		</div>
 	</div>
 	<div id="submit-sign-container" class="sub-main-container">
-		<form class="form-horizontal" method="post"
-			enctype="multipart/form-data">
-			<div id="upload-success-msg" class="alert alert-success">
-				<strong>Envio concluído, muito obrigado! Em breve o seu
-					sinal estará no dicionário WikiLibras.</strong>
-			</div>
-			<fieldset>
-				<h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
-					vídeo do seu sinal aqui!</h2>
-				<div class="submit-sign-form col-sm-8">
-					<div class="form-group">
-						<label class="control-label col-sm-3">Nome do sinal:</label>
-						<div class="col-sm-5">
-							<input id="input-sign-name" name="nome" class="form-control"
-								placeholder="Nome do sinal" type="text">
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Estado:</label>
-						<div class="col-sm-5">
-							<select id="input-state" name="estado" class="form-control">
-								<option value="">Selecione seu Estado</option>
-								<option value="Acre">Acre</option>
-								<option value="Alagoas">Alagoas</option>
-								<option value="Amapá">Amapá</option>
-								<option value="Amazonas">Amazonas</option>
-								<option value="Bahia">Bahia</option>
-								<option value="Ceará">Ceará</option>
-								<option value="Distrito Federal">Distrito Federal</option>
-								<option value="Espirito Santo">Espirito Santo</option>
-								<option value="Goiás">Goiás</option>
-								<option value="Maranhão">Maranhão</option>
-								<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
-								<option value="Mato Grosso">Mato Grosso</option>
-								<option value="Minas Gerais">Minas Gerais</option>
-								<option value="Pará">Pará</option>
-								<option value="Paraíba">Paraíba</option>
-								<option value="Paraná">Paraná</option>
-								<option value="Pernambuco">Pernambuco</option>
-								<option value="Piauí">Piauí</option>
-								<option value="Rio de Janeiro">Rio de Janeiro</option>
-								<option value="Rio Grande do Norte">Rio Grande do Norte</option>
-								<option value="Rio Grande do Sul">Rio Grande do Sul</option>
-								<option value="Rondônia">Rondônia</option>
-								<option value="Roraima">Roraima</option>
-								<option value="Santa Catarina">Santa Catarina</option>
-								<option value="São Paulo">São Paulo</option>
-								<option value="Sergipe">Sergipe</option>
-								<option value="Tocantins">Tocantins</option>
-							</select>
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Cidade:</label>
-						<div class="col-sm-5">
-							<input id="input-city" name="cidade" class="form-control"
-								placeholder="Nome da sua cidade" type="text">
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Arquivo do sinal:</label>
-						<div class="col-sm-5">
-							<input id="input-sign-upload" type="file" name="video" />
-						</div>
-						<div id="upload-progress-container" class="col-sm-5">
-							<div id="upload-progress" class="progress">
-								<div class="progress-bar" role="progressbar" aria-valuenow="0"
-									aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
-							</div>
-						</div>
-					</div>
-					<div class="form-actions">
-						<label class="control-label col-sm-3"></label>
-						<button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
-					</div>
-			</fieldset>
-		</form>
 	</div>
 	<div id="teached-signs-container" class="sub-main-container">
 		<h4 class="teached-signs-msg" type="none">Você ainda não ensinou
@@ -350,8 +271,10 @@
 <script src="{{ server }}/js/selection-panel/articulation.js"></script>
 <script src="{{ server }}/js/selection-panel/configuration.js"></script>
 <script src="{{ server }}/js/selection-panel/orientation.js"></script>
-<script src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
-<script src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>
+<script
+	src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
+<script
+	src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>
 <script src="{{ server }}/js/selection-panel/selection-panel.js"></script>
 <!-- Helpers -->
@@ -0,0 +1,110 @@
+<div class="container">
+	<div class="row">
+		<div id="upload-warning-msg" class="alert alert-warning"
+			style="display: none;"></div>
+		<div id="upload-success-msg" class="alert alert-success">
+			<strong>Envio concluído, muito obrigado! Em breve o seu
+				sinal estará no dicionário WikiLibras.</strong>
+		</div>
+	</div>
+</div>
+<form class="form-horizontal" method="post"
+	enctype="multipart/form-data">
+	<fieldset>
+		<h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
+			vídeo do seu sinal aqui!</h2>
+		<div class="submit-sign-form col-sm-8">
+			<div class="form-group">
+				<label class="control-label col-sm-3">Nome do sinal:</label>
+				<div class="col-sm-5">
+					<input id="input-sign-name" name="nome" class="form-control"
+						placeholder="Nome do sinal" type="text">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Classe gramatical:</label>
+				<div class="col-sm-5">
+					<select id="input-word-class" name="classe-gramatical"
+						class="form-control">
+						<option value="">Selecione a classe gramatical</option>
+						<option value="Verbo">Verbo</option>
+						<option value="Substantivo">Substantivo</option>
+						<option value="Adjetivo">Adjetivo</option>
+						<option value="Advérbio">Advérbio</option>
+						<option value="Pronome">Pronome</option>
+						<option value="Preposição">Preposição</option>
+						<option value="Conjunção">Conjunção</option>
+						<option value="Artigo">Artigo</option>
+						<option value="Numeral">Numeral</option>
+						<option value="Interjeição">Interjeição</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Frases de exemplo:</label>
+				<div class="col-sm-5">
+					<textarea id="input-phrases" name="frases" class="form-control"
+						rows="2">
+					</textarea>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Estado:</label>
+				<div class="col-sm-5">
+					<select id="input-state" name="estado" class="form-control">
+						<option value="">Selecione seu Estado</option>
+						<option value="Acre">Acre</option>
+						<option value="Alagoas">Alagoas</option>
+						<option value="Amapá">Amapá</option>
+						<option value="Amazonas">Amazonas</option>
+						<option value="Bahia">Bahia</option>
+						<option value="Ceará">Ceará</option>
+						<option value="Distrito Federal">Distrito Federal</option>
+						<option value="Espirito Santo">Espirito Santo</option>
+						<option value="Goiás">Goiás</option>
+						<option value="Maranhão">Maranhão</option>
+						<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
+						<option value="Mato Grosso">Mato Grosso</option>
+						<option value="Minas Gerais">Minas Gerais</option>
+						<option value="Pará">Pará</option>
+						<option value="Paraíba">Paraíba</option>
+						<option value="Paraná">Paraná</option>
+						<option value="Pernambuco">Pernambuco</option>
+						<option value="Piauí">Piauí</option>
+						<option value="Rio de Janeiro">Rio de Janeiro</option>
+						<option value="Rio Grande do Norte">Rio Grande do Norte</option>
+						<option value="Rio Grande do Sul">Rio Grande do Sul</option>
+						<option value="Rondônia">Rondônia</option>
+						<option value="Roraima">Roraima</option>
+						<option value="Santa Catarina">Santa Catarina</option>
+						<option value="São Paulo">São Paulo</option>
+						<option value="Sergipe">Sergipe</option>
+						<option value="Tocantins">Tocantins</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Cidade:</label>
+				<div class="col-sm-5">
+					<input id="input-city" name="cidade" class="form-control"
+						placeholder="Nome da sua cidade" type="text">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Arquivo do sinal:</label>
+				<div class="col-sm-5">
+					<input id="input-sign-upload" type="file" name="video" />
+				</div>
+				<div id="upload-progress-container" class="col-sm-5">
+					<div id="upload-progress" class="progress">
+						<div class="progress-bar" role="progressbar" aria-valuenow="0"
+							aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
+					</div>
+				</div>
+			</div>
+			<div class="form-actions">
+				<label class="control-label col-sm-3"></label>
+				<button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
+			</div>
+	</fieldset>
+</form>
1	(function(submitSign, $, undefined) {	1	(function(submitSign, $, undefined) {
2		2
3	var submitUrl = '';	3	var submitUrl = '';
4	-	4	+ var MIN_PHRASES_LENGTH = 3;
		5	+ var MAX_PHRASES_LENGTH = 20;
		6	+
5	function _isEmpty(str) {	7	function _isEmpty(str) {
6	return (!str \|\| 0 === str.length);	8	return (!str \|\| 0 === str.length);
7	}	9	}
8		10
9	- function _validadeInputFields() {	11	+ function _alertSignName() {
		12	+ $('#upload-warning-msg').hide();
10	var signName = $('#input-sign-name').val();	13	var signName = $('#input-sign-name').val();
		14	+ if (_isEmpty(signName)) {
		15	+ $('#upload-warning-msg').html('Por favor indique o nome do sinal.');
		16	+ $('#upload-warning-msg').show();
		17	+ }
		18	+ }
		19	+
		20	+ function _alertWordClass() {
		21	+ $('#upload-warning-msg').hide();
		22	+ var wordClass = $('#input-word-class').val();
		23	+ if (_isEmpty(wordClass)) {
		24	+ $('#upload-warning-msg').html(
		25	+ 'Por favor selecione a classe gramatical do sinal.');
		26	+ $('#upload-warning-msg').show();
		27	+ }
		28	+ }
		29	+
		30	+ function _areValidPhrases(phrases) {
		31	+ var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
		32	+ var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
		33	+ return splitPhrasesLength >= MIN_PHRASES_LENGTH
		34	+ && splitPhrasesLength <= MAX_PHRASES_LENGTH;
		35	+ }
		36	+
		37	+ function _alertPhrase() {
		38	+ $('#upload-warning-msg').hide();
		39	+ var phrases = $('#input-phrases').val();
		40	+ if (!_areValidPhrases(phrases)) {
		41	+ $('#upload-warning-msg').html(
		42	+ 'As frases de exemplo devem possuir no minímo '
		43	+ + MIN_PHRASES_LENGTH + ' e no máximo '
		44	+ + MAX_PHRASES_LENGTH + ' palavras.');
		45	+ $('#upload-warning-msg').show();
		46	+ }
		47	+ }
		48	+
		49	+ function _alertState() {
		50	+ $('#upload-warning-msg').hide();
11	var state = $('#input-state').val();	51	var state = $('#input-state').val();
		52	+ if (_isEmpty(state)) {
		53	+ $('#upload-warning-msg').html('Por favor selecione seu estado.');
		54	+ $('#upload-warning-msg').show();
		55	+ }
		56	+ }
		57	+
		58	+ function _alertCity() {
		59	+ $('#upload-warning-msg').hide();
12	var city = $('#input-city').val();	60	var city = $('#input-city').val();
		61	+ if (_isEmpty(city)) {
		62	+ $('#upload-warning-msg').html(
		63	+ 'Por favor indique o nome da sua cidade.');
		64	+ $('#upload-warning-msg').show();
		65	+ }
		66	+ }
		67	+
		68	+ function _alertSignUpload() {
		69	+ $('#upload-warning-msg').hide();
13	var signUpload = $('#input-sign-upload').val();	70	var signUpload = $('#input-sign-upload').val();
14	- return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
15	- && !_isEmpty(signUpload);	71	+ if (_isEmpty(signUpload)) {
		72	+ $('#upload-warning-msg').html(
		73	+ 'Por favor selecione o arquivo do vídeo do seu sinal.');
		74	+ $('#upload-warning-msg').show();
		75	+ }
		76	+ }
		77	+
		78	+ function _validadeAllFields() {
		79	+ var signName = $('#input-sign-name').val();
		80	+ var wordClass = $('#input-word-class').val();
		81	+ var phrases = $('#input-phrases').val();
		82	+ var state = $('#input-state').val();
		83	+ var city = $('#input-city').val();
		84	+ var signUpload = $('#input-sign-upload').val();
		85	+ return !_isEmpty(signName) && !_isEmpty(wordClass)
		86	+ && _areValidPhrases(phrases) && !_isEmpty(state)
		87	+ && !_isEmpty(city) && !_isEmpty(signUpload);
16	}	88	}
17		89
18	function _updateSubmitButton() {	90	function _updateSubmitButton() {
19	- if (_validadeInputFields()) {
20	- $('#submit-sign-container button').removeClass('disabled');	91	+ if (_validadeAllFields()) {
		92	+ _enableSubmitButton();
21	} else {	93	} else {
22	- $('#submit-sign-container button').addClass('disabled');	94	+ _disableSubmitButton();
23	}	95	}
24	}	96	}
25	-	97	+
		98	+ function _enableSubmitButton() {
		99	+ $('#submit-sign-container button').removeClass('disabled');
		100	+ $('#submit-sign-container button').off('click');
		101	+ }
		102	+
		103	+ function _disableSubmitButton() {
		104	+ $('#submit-sign-container button').addClass('disabled');
		105	+ $('#submit-sign-container button').on('click', function(event) {
		106	+ event.preventDefault();
		107	+ });
		108	+ }
		109	+
26	function _resetFormFields() {	110	function _resetFormFields() {
27	$('#input-sign-name').val('');	111	$('#input-sign-name').val('');
28	$('#input-state').val('');	112	$('#input-state').val('');
29	$('#input-city').val('');	113	$('#input-city').val('');
30	$('#input-sign-upload').val('');	114	$('#input-sign-upload').val('');
31	$("#upload-progress .progress-bar").css("width", "0px");	115	$("#upload-progress .progress-bar").css("width", "0px");
32	- $('#upload-progress-container').hide();	116	+ $('#upload-progress-container').hide();
33	$('#input-sign-upload').show();	117	$('#input-sign-upload').show();
34	}	118	}
35	-
36	- submitSign.show = function() {
37	- $(".sub-main-container").hide();
38	- $("#submit-sign-container").show();
39	- $("#submit-sign-anchor").focus();
40	- }
41		119
42	- submitSign.setup = function(uploadSignHost) {
43	- submitUrl = uploadSignHost;	120	+ function _setupSubmitSignForm() {
		121	+ _disableSubmitButton();
44	$('#submit-sign-container form').fileupload(	122	$('#submit-sign-container form').fileupload(
45	{	123	{
46	url : submitUrl,	124	url : submitUrl,
47	- add: function (e, data) {
48	- $('#submit-sign-container button').off('click').on('click', function (event) {
49	- event.preventDefault();
50	-
51	- $('#submit-sign-container button').addClass('disabled');
52	- $('#input-sign-upload').hide();
53	- $('#upload-progress-container').show();
54	- data.submit();
55	- });
56	- },	125	+ add : function(e, data) {
		126	+ $('#submit-sign-container button').off('click').on(
		127	+ 'click',
		128	+ function(event) {
		129	+ event.preventDefault();
		130	+
		131	+ $('#submit-sign-container button')
		132	+ .addClass('disabled');
		133	+ $('#input-sign-upload').hide();
		134	+ $('#upload-progress-container').show();
		135	+ data.submit();
		136	+ });
		137	+ },
57	done : function(e, data) {	138	done : function(e, data) {
58	$('#upload-success-msg').fadeIn(500);	139	$('#upload-success-msg').fadeIn(500);
59	setTimeout(function() {	140	setTimeout(function() {
	@@ -64,27 +145,52 @@		@@ -64,27 +145,52 @@
64	progressall : function(e, data) {	145	progressall : function(e, data) {
65	var progress = parseInt(data.loaded / data.total * 100,	146	var progress = parseInt(data.loaded / data.total * 100,
66	10);	147	10);
67	- $("#upload-progress .progress-bar").attr('aria-valuenow', progress).
68	- css("width", progress + "%");	148	+ $("#upload-progress .progress-bar").attr(
		149	+ 'aria-valuenow', progress).css("width",
		150	+ progress + "%");
69	},	151	},
70	error : function(error) {	152	error : function(error) {
71	alert(error.responseText);	153	alert(error.responseText);
72	},	154	},
73	- replaceFileInput: false	155	+ replaceFileInput : false
74	});	156	});
75		157
76	$('#input-sign-name').on('input', function() {	158	$('#input-sign-name').on('input', function() {
		159	+ _alertSignName();
		160	+ _updateSubmitButton();
		161	+ });
		162	+ $('#input-word-class').on('input', function() {
		163	+ _alertWordClass();
		164	+ _updateSubmitButton();
		165	+ });
		166	+ $('#input-phrases').on('input', function() {
		167	+ _alertPhrase();
77	_updateSubmitButton();	168	_updateSubmitButton();
78	});	169	});
79	$('#input-state').on('input', function() {	170	$('#input-state').on('input', function() {
		171	+ _alertState();
80	_updateSubmitButton();	172	_updateSubmitButton();
81	});	173	});
82	$('#input-city').on('input', function() {	174	$('#input-city').on('input', function() {
		175	+ _alertCity();
83	_updateSubmitButton();	176	_updateSubmitButton();
84	});	177	});
85	$('#input-sign-upload').on('change', function() {	178	$('#input-sign-upload').on('change', function() {
		179	+ _alertSignUpload();
86	_updateSubmitButton();	180	_updateSubmitButton();
87	});	181	});
		182	+ }
		183	+
		184	+ submitSign.show = function() {
		185	+ $(".sub-main-container").hide();
		186	+ $("#submit-sign-container").show();
		187	+ $("#submit-sign-anchor").focus();
		188	+ };
		189	+
		190	+ submitSign.setup = function(uploadSignHost) {
		191	+ submitUrl = uploadSignHost;
		192	+ loadHtmlHelper.load('/submit-sign/submit-sign.html',
		193	+ '#submit-sign-container', _setupSubmitSignForm);
88	};	194	};
89		195
90	}(window.submitSign = window.submitSign \|\| {}, jQuery));	196	}(window.submitSign = window.submitSign \|\| {}, jQuery));
1	<link rel="stylesheet" href="{{ server }}/css/main.css">	1	<link rel="stylesheet" href="{{ server }}/css/main.css">
2		2
3	-<a href="{{ homepage_url }}" class="wl-logo"> <img
4	- src="{{ server }}/img/logo.svg">
5	-</a>
6	<nav class="navbar navbar-default navbar-wl">	3	<nav class="navbar navbar-default navbar-wl">
7	<div class="container">	4	<div class="container">
		5	+ <a href="{{ homepage_url }}" class="wl-logo"> <img
		6	+ src="{{ server }}/img/logo.svg">
		7	+ </a>
8	<!-- Brand and toggle get grouped for better mobile display -->	8	<!-- Brand and toggle get grouped for better mobile display -->
9	<div class="navbar-header">	9	<div class="navbar-header">
10	<button type="button" class="navbar-toggle collapsed"	10	<button type="button" class="navbar-toggle collapsed"
	@@ -16,12 +16,14 @@		@@ -16,12 +16,14 @@
16	</button>	16	</button>
17	</div>	17	</div>
18	<!-- Collect the nav links, forms, and other content for toggling -->	18	<!-- Collect the nav links, forms, and other content for toggling -->
19	- <div class="collapse navbar-collapse" id="navbar-collapse-1">	19	+ <div id="navbar-collapse-1" class="collapse navbar-collapse">
20	<ul class="nav navbar-nav navbar-right">	20	<ul class="nav navbar-nav navbar-right">
		21	+ <li><a href="/pybossa/project"
		22	+ target="_blank">Início</a></li>
21	<li><a href="javascript:void(0);"	23	<li><a href="javascript:void(0);"
22	onclick="wikilibras.showTeachContainer()">Ensinar</a></li>	24	onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
23	<li><a id="submit-sign-anchor" href="javascript:void(0);"	25	<li><a id="submit-sign-anchor" href="javascript:void(0);"
24	- onclick="submitSign.show()">Enviar sinal</a></li>	26	+ onclick="submitSign.show()">Gravar e enviar vídeo</a></li>
25	<li><a href="javascript:void(0);" onclick="teachedSigns.show()">Sinais	27	<li><a href="javascript:void(0);" onclick="teachedSigns.show()">Sinais
26	ensinados</a></li>	28	ensinados</a></li>
27	<li><a href="javascript:void(0);"	29	<li><a href="javascript:void(0);"
	@@ -40,10 +42,9 @@		@@ -40,10 +42,9 @@
40	<div id="initial-screen">	42	<div id="initial-screen">
41	<div class="col-sm-6 col-centered">	43	<div class="col-sm-6 col-centered">
42	<div class="col-sm-8 col-centered">	44	<div class="col-sm-8 col-centered">
43	- <video src="" preload="metadata"	45	+ <video preload="metadata"
44	class="ref-video video-body-main video-border" autoplay loop	46	class="ref-video video-body-main video-border" autoplay loop
45	controls>	47	controls>
46	- <source type="video/webm">
47	</video>	48	</video>
48	</div>	49	</div>
49	<h6 class="text-center">	50	<h6 class="text-center">
	@@ -60,9 +61,8 @@		@@ -60,9 +61,8 @@
60	<h8>Vídeo de referência "<span class="sign-label"></span>"</h8>	61	<h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
61	<div id="ref-video-panel" class="col-sm-12">	62	<div id="ref-video-panel" class="col-sm-12">
62	<div id="ref-video-container" class="col-sm-10">	63	<div id="ref-video-container" class="col-sm-10">
63	- <video src="" preload="metadata"	64	+ <video preload="metadata"
64	class="ref-video video-body-main video-border" loop controls>	65	class="ref-video video-body-main video-border" loop controls>
65	- <source type="video/webm">
66	</video>	66	</video>
67	</div>	67	</div>
68	<div id="minimize-icon-container" class="col-sm-2 icon_container"	68	<div id="minimize-icon-container" class="col-sm-2 icon_container"
	@@ -160,9 +160,8 @@		@@ -160,9 +160,8 @@
160	<div id="render-ref" class="col-sm-6">	160	<div id="render-ref" class="col-sm-6">
161	<h6>Vídeo de referência</h6>	161	<h6>Vídeo de referência</h6>
162	<div class="col-sm-12">	162	<div class="col-sm-12">
163	- <video src="" preload="metadata"	163	+ <video preload="metadata"
164	class="ref-video video-body-main video-border" loop controls>	164	class="ref-video video-body-main video-border" loop controls>
165	- <source type="video/webm">
166	</video>	165	</video>
167	</div>	166	</div>
168	</div>	167	</div>
	@@ -171,9 +170,8 @@		@@ -171,9 +170,8 @@
171	<h6>	170	<h6>
172	Sinal "<span class="sign-label"></span>" construído	171	Sinal "<span class="sign-label"></span>" construído
173	</h6>	172	</h6>
174	- <video src="" preload="metadata"	173	+ <video preload="metadata"
175	class="video-body-main video-border" autoplay loop controls>	174	class="video-body-main video-border" autoplay loop controls>
176	- <source type="video/webm">
177	</video>	175	</video>
178	<div id="render-edit" class="icon_container" name="big-edit">	176	<div id="render-edit" class="icon_container" name="big-edit">
179	<img class="col-centered"	177	<img class="col-centered"
	@@ -198,18 +196,18 @@		@@ -198,18 +196,18 @@
198	</div>	196	</div>
199	</div>	197	</div>
200	<div id="thanks-screen">	198	<div id="thanks-screen">
201	- <div class="col-sm-7 col-centered">	199	+ <div class="col-sm-8 col-centered">
202	<div id="completed-task-msg">	200	<div id="completed-task-msg">
203	<h3 class="text-center">Obrigado,</h3>	201	<h3 class="text-center">Obrigado,</h3>
204	<h6 class="text-center">você configurou o sinal com sucesso!</h6>	202	<h6 class="text-center">você configurou o sinal com sucesso!</h6>
205	</div>	203	</div>
206	<div id="completed-all-task-msg" class="text-center">	204	<div id="completed-all-task-msg" class="text-center">
207	<h4>	205	<h4>
208	- Que pena, não há disponíveis sinais no momento!	206	+ Que pena, não há sinais disponíveis no momento!
209	</h6>	207	</h6>
210	<h6>	208	<h6>
211	Ajude a expandir o dicionário <a href="javascript:void(0);"	209	Ajude a expandir o dicionário <a href="javascript:void(0);"
212	- onclick="submitSign.show()">enviando um novo sinal</a>, ou	210	+ onclick="submitSign.show()">gravando e enviando um vídeo</a>, ou
213	</h6>	211	</h6>
214	<h6>	212	<h6>
215	experimente <a href="javascript:void(0);"	213	experimente <a href="javascript:void(0);"
	@@ -224,83 +222,6 @@		@@ -224,83 +222,6 @@
224	</div>	222	</div>
225	</div>	223	</div>
226	<div id="submit-sign-container" class="sub-main-container">	224	<div id="submit-sign-container" class="sub-main-container">
227	- <form class="form-horizontal" method="post"
228	- enctype="multipart/form-data">
229	- <div id="upload-success-msg" class="alert alert-success">
230	- <strong>Envio concluído, muito obrigado! Em breve o seu
231	- sinal estará no dicionário WikiLibras.</strong>
232	- </div>
233	- <fieldset>
234	- <h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
235	- vídeo do seu sinal aqui!</h2>
236	- <div class="submit-sign-form col-sm-8">
237	- <div class="form-group">
238	- <label class="control-label col-sm-3">Nome do sinal:</label>
239	- <div class="col-sm-5">
240	- <input id="input-sign-name" name="nome" class="form-control"
241	- placeholder="Nome do sinal" type="text">
242	- </div>
243	- </div>
244	- <div class="form-group">
245	- <label class="control-label col-sm-3">Estado:</label>
246	- <div class="col-sm-5">
247	- <select id="input-state" name="estado" class="form-control">
248	- <option value="">Selecione seu Estado</option>
249	- <option value="Acre">Acre</option>
250	- <option value="Alagoas">Alagoas</option>
251	- <option value="Amapá">Amapá</option>
252	- <option value="Amazonas">Amazonas</option>
253	- <option value="Bahia">Bahia</option>
254	- <option value="Ceará">Ceará</option>
255	- <option value="Distrito Federal">Distrito Federal</option>
256	- <option value="Espirito Santo">Espirito Santo</option>
257	- <option value="Goiás">Goiás</option>
258	- <option value="Maranhão">Maranhão</option>
259	- <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
260	- <option value="Mato Grosso">Mato Grosso</option>
261	- <option value="Minas Gerais">Minas Gerais</option>
262	- <option value="Pará">Pará</option>
263	- <option value="Paraíba">Paraíba</option>
264	- <option value="Paraná">Paraná</option>
265	- <option value="Pernambuco">Pernambuco</option>
266	- <option value="Piauí">Piauí</option>
267	- <option value="Rio de Janeiro">Rio de Janeiro</option>
268	- <option value="Rio Grande do Norte">Rio Grande do Norte</option>
269	- <option value="Rio Grande do Sul">Rio Grande do Sul</option>
270	- <option value="Rondônia">Rondônia</option>
271	- <option value="Roraima">Roraima</option>
272	- <option value="Santa Catarina">Santa Catarina</option>
273	- <option value="São Paulo">São Paulo</option>
274	- <option value="Sergipe">Sergipe</option>
275	- <option value="Tocantins">Tocantins</option>
276	- </select>
277	- </div>
278	- </div>
279	- <div class="form-group">
280	- <label class="control-label col-sm-3">Cidade:</label>
281	- <div class="col-sm-5">
282	- <input id="input-city" name="cidade" class="form-control"
283	- placeholder="Nome da sua cidade" type="text">
284	- </div>
285	- </div>
286	- <div class="form-group">
287	- <label class="control-label col-sm-3">Arquivo do sinal:</label>
288	- <div class="col-sm-5">
289	- <input id="input-sign-upload" type="file" name="video" />
290	- </div>
291	- <div id="upload-progress-container" class="col-sm-5">
292	- <div id="upload-progress" class="progress">
293	- <div class="progress-bar" role="progressbar" aria-valuenow="0"
294	- aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
295	- </div>
296	- </div>
297	- </div>
298	- <div class="form-actions">
299	- <label class="control-label col-sm-3"></label>
300	- <button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
301	- </div>
302	- </fieldset>
303	- </form>
304	</div>	225	</div>
305	<div id="teached-signs-container" class="sub-main-container">	226	<div id="teached-signs-container" class="sub-main-container">
306	<h4 class="teached-signs-msg" type="none">Você ainda não ensinou	227	<h4 class="teached-signs-msg" type="none">Você ainda não ensinou
	@@ -350,8 +271,10 @@		@@ -350,8 +271,10 @@
350	<script src="{{ server }}/js/selection-panel/articulation.js"></script>	271	<script src="{{ server }}/js/selection-panel/articulation.js"></script>
351	<script src="{{ server }}/js/selection-panel/configuration.js"></script>	272	<script src="{{ server }}/js/selection-panel/configuration.js"></script>
352	<script src="{{ server }}/js/selection-panel/orientation.js"></script>	273	<script src="{{ server }}/js/selection-panel/orientation.js"></script>
353	-<script src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
354	-<script src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>	274	+<script
		275	+ src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
		276	+<script
		277	+ src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>
355	<script src="{{ server }}/js/selection-panel/selection-panel.js"></script>	278	<script src="{{ server }}/js/selection-panel/selection-panel.js"></script>
356		279
357	<!-- Helpers -->	280	<!-- Helpers -->
@@ -0,0 +1,110 @@		@@ -0,0 +1,110 @@
	1	+<div class="container">
	2	+ <div class="row">
	3	+ <div id="upload-warning-msg" class="alert alert-warning"
	4	+ style="display: none;"></div>
	5	+ <div id="upload-success-msg" class="alert alert-success">
	6	+ <strong>Envio concluído, muito obrigado! Em breve o seu
	7	+ sinal estará no dicionário WikiLibras.</strong>
	8	+ </div>
	9	+ </div>
	10	+</div>
	11	+<form class="form-horizontal" method="post"
	12	+ enctype="multipart/form-data">
	13	+ <fieldset>
	14	+ <h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
	15	+ vídeo do seu sinal aqui!</h2>
	16	+ <div class="submit-sign-form col-sm-8">
	17	+ <div class="form-group">
	18	+ <label class="control-label col-sm-3">Nome do sinal:</label>
	19	+ <div class="col-sm-5">
	20	+ <input id="input-sign-name" name="nome" class="form-control"
	21	+ placeholder="Nome do sinal" type="text">
	22	+ </div>
	23	+ </div>
	24	+ <div class="form-group">
	25	+ <label class="control-label col-sm-3">Classe gramatical:</label>
	26	+ <div class="col-sm-5">
	27	+ <select id="input-word-class" name="classe-gramatical"
	28	+ class="form-control">
	29	+ <option value="">Selecione a classe gramatical</option>
	30	+ <option value="Verbo">Verbo</option>
	31	+ <option value="Substantivo">Substantivo</option>
	32	+ <option value="Adjetivo">Adjetivo</option>
	33	+ <option value="Advérbio">Advérbio</option>
	34	+ <option value="Pronome">Pronome</option>
	35	+ <option value="Preposição">Preposição</option>
	36	+ <option value="Conjunção">Conjunção</option>
	37	+ <option value="Artigo">Artigo</option>
	38	+ <option value="Numeral">Numeral</option>
	39	+ <option value="Interjeição">Interjeição</option>
	40	+ </select>
	41	+ </div>
	42	+ </div>
	43	+ <div class="form-group">
	44	+ <label class="control-label col-sm-3">Frases de exemplo:</label>
	45	+ <div class="col-sm-5">
	46	+ <textarea id="input-phrases" name="frases" class="form-control"
	47	+ rows="2">
	48	+ </textarea>
	49	+ </div>
	50	+ </div>
	51	+ <div class="form-group">
	52	+ <label class="control-label col-sm-3">Estado:</label>
	53	+ <div class="col-sm-5">
	54	+ <select id="input-state" name="estado" class="form-control">
	55	+ <option value="">Selecione seu Estado</option>
	56	+ <option value="Acre">Acre</option>
	57	+ <option value="Alagoas">Alagoas</option>
	58	+ <option value="Amapá">Amapá</option>
	59	+ <option value="Amazonas">Amazonas</option>
	60	+ <option value="Bahia">Bahia</option>
	61	+ <option value="Ceará">Ceará</option>
	62	+ <option value="Distrito Federal">Distrito Federal</option>
	63	+ <option value="Espirito Santo">Espirito Santo</option>
	64	+ <option value="Goiás">Goiás</option>
	65	+ <option value="Maranhão">Maranhão</option>
	66	+ <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
	67	+ <option value="Mato Grosso">Mato Grosso</option>
	68	+ <option value="Minas Gerais">Minas Gerais</option>
	69	+ <option value="Pará">Pará</option>
	70	+ <option value="Paraíba">Paraíba</option>
	71	+ <option value="Paraná">Paraná</option>
	72	+ <option value="Pernambuco">Pernambuco</option>
	73	+ <option value="Piauí">Piauí</option>
	74	+ <option value="Rio de Janeiro">Rio de Janeiro</option>
	75	+ <option value="Rio Grande do Norte">Rio Grande do Norte</option>
	76	+ <option value="Rio Grande do Sul">Rio Grande do Sul</option>
	77	+ <option value="Rondônia">Rondônia</option>
	78	+ <option value="Roraima">Roraima</option>
	79	+ <option value="Santa Catarina">Santa Catarina</option>
	80	+ <option value="São Paulo">São Paulo</option>
	81	+ <option value="Sergipe">Sergipe</option>
	82	+ <option value="Tocantins">Tocantins</option>
	83	+ </select>
	84	+ </div>
	85	+ </div>
	86	+ <div class="form-group">
	87	+ <label class="control-label col-sm-3">Cidade:</label>
	88	+ <div class="col-sm-5">
	89	+ <input id="input-city" name="cidade" class="form-control"
	90	+ placeholder="Nome da sua cidade" type="text">
	91	+ </div>
	92	+ </div>
	93	+ <div class="form-group">
	94	+ <label class="control-label col-sm-3">Arquivo do sinal:</label>
	95	+ <div class="col-sm-5">
	96	+ <input id="input-sign-upload" type="file" name="video" />
	97	+ </div>
	98	+ <div id="upload-progress-container" class="col-sm-5">
	99	+ <div id="upload-progress" class="progress">
	100	+ <div class="progress-bar" role="progressbar" aria-valuenow="0"
	101	+ aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
	102	+ </div>
	103	+ </div>
	104	+ </div>
	105	+ <div class="form-actions">
	106	+ <label class="control-label col-sm-3"></label>
	107	+ <button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
	108	+ </div>
	109	+ </fieldset>
	110	+</form>