Software Público Brasileiro

<link rel="stylesheet" href="{{ server }}/assets/css/main.css">
<span id="server-url" data-url="{{ server }}" class="hidden" hidden>server-url</span>

<a href="{{ homepage_url }}" class="wl-logo"> <img
	src="{{ server }}/img/logo.svg">
</a>
<nav class="navbar navbar-default navbar-wl">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="javascript:void(0);"
					onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
				<li><a href="javascript:void(0);"
					onclick="wikilibras.showSubmitSignContainer()">Enviar sinal</a></li>
				<li><a href="javascript:void(0);"
					onclick="wikilibras.showTeachedSignsContainer()">Sinais
						ensinados</a></li>
				<li><a href="javascript:void(0);"
					onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
				<li id="login-container"></li>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid -->
</nav>

<div id="main-container" class="container">
	<div id="teach-container" class="sub-main-container">
		<div id="initial-screen">
			<div class="col-sm-6 col-centered">
				<div class="col-sm-8 col-centered">
					<video src="" preload="metadata"
						class="ref-video video-body-main video-border" autoplay loop
						controls>
						<source type="video/webm">
					</video>
				</div>
				<h6 class="text-center">
					Ajude a criar o sinal <span class="sign-label"></span>.
				</h6>
				<div class="col-sm-4 col-centered">
					<div id="start-button" class="col-sm-12 btn btn-default">OK</div>
				</div>
			</div>
		</div>
		<div id="configuration-screen">
			<div class="row">
				<div class="col-sm-3">
					<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"
								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"
							name="minimize">
							<img src="{{ server }}/img/minimize-icon.png"></img>
						</div>
						<div id="maximize-icon-container" class="col-sm-2 icon_container"
							name="maximize">
							<img id="maximize-icon" src="{{ server }}/img/maximize-icon.png"></img>
						</div>
					</div>
					<div id="configuration-panel" class="col-sm-8">
						<div class="icon_container config-panel-option" name="facial"
							panel="facial">
							<img src="{{ server }}/img/facial-icon.png"</img> <span
								class="configuration-panel-label">Expressão</span>
						</div>
						<div class="icon_container config-panel-option" name="right-hand"
							panel="right-hand">
							<img src="{{ server }}/img/right-hand-icon.png"></img> <span
								class="configuration-panel-label">Mão direita</span>
						</div>
						<div class="icon_container config-panel-option" name="left-hand"
							panel="left-hand">
							<img src="{{ server }}/img/left-hand-icon.png"></img> <span
								class="configuration-panel-label">Mão esquerda</span>
						</div>
					</div>
				</div>
				<div id="avatar-container"
					class="col-sm-7 avatar-container-zoom-out">
					<div id="facial-edit" class="edit-container">
						<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
						<div class="icon_container config-panel-option" name="edit"
							panel="facial">
							<img src="{{ server }}/img/edit-icon.png"></img>
						</div>
					</div>
					<div id="right-hand-edit" class="edit-container">
						<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
						<div class="icon_container config-panel-option" name="edit"
							panel="right-hand">
							<img src="{{ server }}/img/edit-icon.png"></img>
						</div>
					</div>
					<div id="left-hand-edit" class="edit-container">
						<img class="check-icon" src="{{ server }}/img/check-icon.png"></img>
						<div class="icon_container config-panel-option" name="edit"
							panel="left-hand">
							<img src="{{ server }}/img/edit-icon.png"></img>
						</div>
					</div>
					<div id="avatar-default" class="avatar-img">
						<div id="avatar-body-face"
							class="icon_container config-panel-option" name="avatar-facial"
							panel="facial">
							<img src="{{ server }}/img/avatar-facial-icon.png"></img>
						</div>
						<div id="avatar-body-right-hand"
							class="icon_container config-panel-option"
							name="avatar-right-hand" panel="right-hand">
							<img src="{{ server }}/img/avatar-right-hand-icon.png"></img>
						</div>
						<div id="avatar-body-left-hand"
							class="icon_container config-panel-option"
							name="avatar-left-hand" panel="left-hand">
							<img src="{{ server }}/img/avatar-left-hand-icon.png"></img>
						</div>
						<img class="avatar-img-zoom-out" src="{{ server }}/img/avatar.png"></img>
					</div>
					<img id="avatar-facial" class="avatar-img avatar-img-zoom-out"
						src="{{ server }}/img/avatar-facial.png"></img> <img
						id="avatar-right-hand" class="avatar-img avatar-img-zoom-out"
						src="{{ server }}/img/avatar-right-hand.png"></img> <img
						id="avatar-left-hand" class="avatar-img avatar-img-zoom-out"
						src="{{ server }}/img/avatar-left-hand.png"></img>
				</div>
				<div id="selection-container" class="col-sm-2">
					<div id="selection-panel">
						<div class="x btn-default"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div id="ready-button" class="btn btn-default pull-right disabled">GERAR
					SINAL</div>
			</div>
		</div>
		<div id="render-screen">
			<div id="render-main" class="row">
				<h4 id="approval-msg">
					O sinal "<span class="sign-label"></span>" feito pelo avatar está
					correto?
				</h4>
				<div id="render-ref" class="col-sm-6">
					<h6>Vídeo de referência</h6>
					<div class="col-sm-12">
						<video src="" preload="metadata"
							class="ref-video video-body-main video-border" loop controls>
							<source type="video/webm">
						</video>
					</div>
				</div>
				<div class="col-sm-6">
					<div id="render-avatar" class="col-sm-12">
						<h6>
							Sinal "<span class="sign-label"></span>" construído
						</h6>
						<video src="" 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"
								src="{{ server }}/img/big-edit-icon.png"></img>
						</div>
					</div>
					<div id="render-loading">
						<h6>
							Gerando o sinal "<span class="sign-label"></span>"
						</h6>
						<div id="loading-container" class="video-border">
							<img src="{{ server }}/img/loading.gif">
						</div>
					</div>
				</div>
			</div>
			<div id="render-button-container" class="row">
				<div id="finish-button" class="btn btn-default pull-right disabled">ENVIAR
					SINAL</div>
				<div id="approval-button" class="btn btn-default pull-right">CONFIRMAR
					SINAL</div>
			</div>
		</div>
		<div id="thanks-screen">
			<div class="col-sm-6 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">
					<h3 class="text-center">Parabéns,</h3>
					<h6 class="text-center">você configurou todos os sinais
						disponíveis!</h6>
				</div>
				<div class="col-sm-11 col-centered">
					<img src="{{ server }}/img/avatar-thanks.png"></img>
				</div>
			</div>
		</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
			sinais ao Ícaro.</h4>
		<h4 class="teached-signs-msg" type="one">Você já ensinou ao Ícaro
			1 sinal de LIBRAS.</h4>
		<h4 class="teached-signs-msg" type="more">
			Você já ensinou ao Ícaro <span>x</span> sinais de LIBRAS.
		</h4>
		<div id="signs-list-container" class="row"></div>
		<div id="teached-sign-modal" class="modal fade" tabindex="-1"
			role="dialog" aria-labelledby="modalUserSignal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<div id="teached-sign-video-container"></div>
						<p id="teached-sign-name" class="text-center"></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="tutorial-container" class="sub-main-container">
		<h4>Veja como ensinar o Ícaro uma expressão.</h4>
		<iframe width="560" height="315"
			src="http://www.youtube.com/embed/AFRxTpNJc4I?controls=2&showinfo=0">
		</iframe>
		<h4>Veja como ensinar o Ícaro uma configuração de mão.</h4>
		<iframe width="560" height="315"
			src="http://www.youtube.com/embed/JJV2DX8s1rg?controls=2&showinfo=0">
		</iframe>
	</div>
</div>

<script src="{{ server }}/assets/js/jquery.scrollTo.js"></script>
<script src="{{ server }}/assets/js/js.cookie.js"></script>
<script src="{{ server }}/assets/js/jquery.ui.widget.js"></script>
<script src="{{ server }}/assets/js/jquery.iframe-transport.js"></script>
<script src="{{ server }}/assets/js/jquery.fileupload.js"></script>

<script src="{{ server }}/assets/js/teached-signs.js"></script>
<script src="{{ server }}/assets/js/submit-sign.js"></script>
<script src="{{ server }}/assets/js/facial.js"></script>
<script src="{{ server }}/assets/js/movement.js"></script>
<script src="{{ server }}/assets/js/articulation.js"></script>
<script src="{{ server }}/assets/js/configuration.js"></script>
<script src="{{ server }}/assets/js/orientation.js"></script>
<script src="{{ server }}/assets/js/defaultConfigurationHandler.js"></script>
<script src="{{ server }}/assets/js/dynamic-loading-engine.js"></script>
<script src="{{ server }}/assets/js/dynamic-selection-workflow.js"></script>
<script src="{{ server }}/assets/js/tmpJSONParser.js"></script>
<script src="{{ server }}/assets/js/wikilibras.js"></script>

<script type="text/javascript">
	wikilibras.run("{{ server }}", "{{ server_backend }}",
			"{{ app_shortname }}", "{{ api_host }}", "{{ upload_sign_host }}");
</script>