<!DOCTYPE html><!--
//
// Copyright 2016 New Zealand Institute of Language, Brain and Behaviour,
// University of Canterbury
// Written by Robert Fromont - robert.fromont@canterbury.ac.nz
//
// This file is part of ElicitSpeech Web.
//
// ElicitSpeech Web is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// ElicitSpeech Web is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with ElicitSpeech Web; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
//-->
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.external-png.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-png.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-svg.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css?20241212">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Elicit Speech</title>
</head>
<body id="body">
<div id="splash" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999; background: white; background-image: url('img/icon.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 50%;"></div>
<div id="page_content" data-role="page" class="step">
<div id="task" role="main" class="task" >
<div id="status"> </div>
</div>
</div>
<div id="footer">
<div id="uploadermessage"></div>
<div id="overall"><progress id="overallProgress" max="100" value="0" title="Overall Progress"></div>
<div id="indicator"><canvas id="countdown" width="32" height="32"></canvas><img id="recording" title="Recording" src="img/record.png" class="inactive"></div>
</div>
<div data-role="panel" id="controlPanel" data-display="overlay" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-page-theme-a ui-panel-animate ui-panel-open" data-position="left">
<div id="taskMenu">
<ul data-role="listview" id="taskList" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true">
</ul>
</div>
<div id="scheduleMenu">
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true">
<li><a class="ui-btn ui-icon-clock ui-btn-icon-left" data-rel="close" href="#taskSchedulePage" data-transition="flip">Reminders</a></li><!-- TODO i18n -->
</ul>
</div>
<div id="finishedTasks">
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" id="finishedTasksList">
</ul>
</div>
<div id="aboutMenu">
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true">
<a href="#aboutPage" data-rel="close" class="ui-btn ui-icon-info ui-btn-icon-left" data-transition="slidedown">About</a><!-- TODO i18n -->
</ul>
</div>
</div>
<div data-role="page" id="aboutPage" data-dialog="true">
<div data-role="header">
<!--a href="#" data-rel="back" data-transition="slideup" data-iconpos="notext" class="controlPanelButton ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-carat-l"></a-->
<h1>About</h1><!-- TODO i18n -->
</div>
<div role="main" class="ui-content">
<div id="about">
<h2>
<span id="aboutAppName">Elicit Speech</span>
<span id="aboutAppVersion"></span>
</h2>
<p>is free software distributed under the terms of the <!-- TODO i18n -->
<a href="https://github.com/nzilbb/elicitspeechweb/blob/master/LICENSE">
GNU General Public Licence
</a>
</p>
<p>The source code is available <!-- TODO i18n -->
<a href="https://github.com/nzilbb/elicitspeechweb">here</a></p><!-- TODO i18n -->
<div id="aboutPrivacyPolicy"></div>
</div>
</div>
</div>
<div id="login" data-role="page" class="login">
<div data-role="header">
<a href="#aboutPage" data-iconpos="notext" data-transition="slidedown" class="controlPanelButton ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info"></a>
<h1>Login</h1><!-- TODO i18n -->
</div>
<div id="loginForm" role="main" class="task" ><!-- TODO i18n -->
<div id="loginPrompt">Please enter your Participant ID and Access Code </div>
<label for="username">Participant ID</label>
<input id="username" type="text" autocomplete="off" autocapitalize="none" data-clear-btn="true" placeholder="Participant ID" autofocus/>
<label for="password">Access Code</label>
<input id="password" type="password" autocomplete="off" data-clear-btn="true" placeholder="Access Code"/>
</div>
<div id="loginControls">
<button title="Start" id="loginButton" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-icon-right ui-corner-all">Start</button>
</div>
</div>
<div id="timeout" data-role="page" class="timeout">
<div data-role="header"><h1>Configuration not loaded.</h1></div>
<div id="timeoutPage" role="main" class="task" ><!-- TODO i18n -->
<div id="timeoutMessage" class="prompt">
<p>The first time the app runs, it must be connected to the internet.</p>
<p>Please connect to the internet and try again,<br/> or try again later</p>
</div>
</div>
<div id="tryAgainControls" class="controls">
<button title="Try Again" id="tryAgainButton" class="ui-btn ui-btn-inline ui-icon-refresh ui-btn-icon-right ui-corner-all">Try Again</button>
</div>
</div>
<div id="testAudioPromptPage" data-role="page" class="step">
<div data-role="header" id="testAudioPromptHeader"><h2>Check Your Microphone</h2></div>
<div role="main" class="task">
<div id="testAudioPromptMessage" class="prompt">
</div>
</div>
<div id="testAudioPromptControls" class="controls">
<button id="testAudioPromptPreviousButton" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-left ui-corner-all">Back</button>
</div>
</div>
<div id="testAudioErrorPage" data-role="page" class="step">
<div data-role="header" id="testAudioErrorHeader"><h2>Check Your Microphone</h2></div>
<div role="main" class="task">
<div id="testAudioErrorMessage" class="prompt">
</div>
</div>
<div id="testAudioErrorControls" class="controls">
<button id="testAudioErrorPreviousButton" class="ui-btn ui-btn-inline ui-icon-arrow-l ui-btn-icon-left ui-corner-all">Back</button>
</div>
</div>
<div id="taskSchedulePage" data-role="page">
<div data-role="header"><h1>Reminders</h1></div>
<div id="scheduleForm" role="main" class="task" >
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" id="taskSchedule">
</ul>
</div>
<div class="controls">
<a title="Save" id="saveSchedule" class="ui-btn ui-btn-inline ui-icon-check ui-btn-icon-right ui-corner-all" href="#page_content" data-transition="flip">Save</a>
</div>
</div>
<!-- for digit-span step -->
<div id="digitsShow" data-role="page" class="step">
<div data-role="header" id="digitsShowHeader"></div>
<div role="main" class="digitSpanDiv">
<div id="digitsShowPromptDiv" class="form_row"><p style="text-align: center;">Please memorize the digits below</p></div> <!-- i18n -->
<div id="digits" class="form_row"></div>
</div>
<div id="digitsShowControls" class="controls">
<button id="digitsShowNextButton" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-icon-right ui-corner-all">Next</button>
</div>
</div>
<div id="digitsElicit" data-role="page" class="step">
<div data-role="header" id="digitsElicitHeader"></div>
<div role="main" class="digitSpanDiv">
<div id="digitsElicitPromptDiv" class="form_row"><p style="text-align: center;">Please enter the digits you saw</p></div> <!-- i18n -->
<div id="digitsElicitDiv" class="form_row">
<input id="digitsInput" type="number" autofocus />
</div>
</div>
<div id="digitsElicitControls" class="controls">
<button id="digitsElicitNextButton" class="ui-btn ui-btn-inline ui-icon-arrow-r ui-btn-icon-right ui-corner-all">Next</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/recorder.js"></script>
<script type="text/javascript" src="js/uploader.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/config.js?1.3.2"></script>
<script type="text/javascript" src="js/index.js?20241017"></script>
<script type="text/javascript" src="js/jquery.mobile.min.js"></script>
<script id="panel-init">
$(function() {
$( "body>[data-role='panel']" ).panel();
});
</script>
</body>
</html>