Software Público Brasileiro

<link rel="stylesheet" href="{{ server }}/css/main.css">

<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"
				data-toggle="collapse" data-target="#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 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()">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);"
					onclick="wikilibras.showTutorialContainer()">Tutorial</a></li>
				<li><a href="javascript:void(0);" onclick="ranking.show()">Ranking</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 preload="metadata"
						class="ref-video video-body-main video-border" autoplay loop
						controls>
					</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 preload="metadata"
								class="ref-video video-body-main video-border" loop controls>
							</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-menu" class="col-sm-8">
						<div class="icon_container config-menu-option" name="facial"
							panel="facial">
							<img src="{{ server }}/img/facial-icon.png"</img> <span
								class="configuration-menu-label">Expressão</span>
						</div>
						<div class="icon_container config-menu-option" name="right-hand"
							panel="right-hand">
							<img src="{{ server }}/img/right-hand-icon.png"></img> <span
								class="configuration-menu-label">Mão direita</span>
						</div>
						<div class="icon_container config-menu-option" name="left-hand"
							panel="left-hand">
							<img src="{{ server }}/img/left-hand-icon.png"></img> <span
								class="configuration-menu-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-menu-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-menu-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-menu-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-menu-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-menu-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-menu-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 preload="metadata"
							class="ref-video video-body-main video-border" loop controls>
						</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 preload="metadata"
							class="video-body-main video-border" autoplay loop controls>
						</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-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á sinais disponíveis no momento!
						</h6>
						<h6>
							Ajude a expandir o dicionário <a href="javascript:void(0);"
								onclick="submitSign.show()">gravando e enviando um vídeo</a>, ou
						</h6>
						<h6>
							experimente <a href="javascript:void(0);"
								onclick="wikilibras.showDemoTask()">uma tarefa de
								demonstração.</a>
						</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">
	</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="navbar-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 id="ranking-container" class="sub-main-container container">
	</div>
	<div id="tutorial-container">
	</div>
</div>

<!-- External Libs -->
<script src="{{ server }}/js/external-libs/jquery.scrollTo.js"></script>
<script src="{{ server }}/js/external-libs/js.cookie.js"></script>
<script src="{{ server }}/js/external-libs/jquery.ui.widget.js"></script>
<script src="{{ server }}/js/external-libs/jquery.iframe-transport.js"></script>
<script src="{{ server }}/js/external-libs/jquery.fileupload.js"></script>

<!-- Selection Panel -->
<script src="{{ server }}/js/selection-panel/facial.js"></script>
<script src="{{ server }}/js/selection-panel/movement.js"></script>
<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/selection-panel.js"></script>

<!-- Helpers -->
<script src="{{ server }}/js/helpers/pybossa-api-helper.js"></script>
<script src="{{ server }}/js/helpers/load-html-helper.js"></script>
<script src="{{ server }}/js/helpers/video-helper.js"></script>
<script src="{{ server }}/js/helpers/icon-helper.js"></script>
<script src="{{ server }}/js/helpers/tmpJSONParser.js"></script>

<script src="{{ server }}/js/tutorial.js"></script>
<script src="{{ server }}/js/ranking.js"></script>
<script src="{{ server }}/js/teached-signs.js"></script>
<script src="{{ server }}/js/submit-sign.js"></script>
<script src="{{ server }}/js/configuration-screen.js"></script>
<script src="{{ server }}/js/render-sign.js"></script>
<script src="{{ server }}/js/wikilibras.js"></script>

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