<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<!-- CodeMirror -->
<link rel="stylesheet" href="css/codemirror/codemirror.css" type="text/css">
<link rel="stylesheet" href="css/codemirror/show-hint.css" type="text/css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- App -->
<link rel="stylesheet" href="css/codeq.css" type="text/css">
<link rel="stylesheet" href="css/codeq/console.css" type="text/css">
<link rel="stylesheet" href="css/codeq/hint.css" type="text/css">
<title>CodeQ</title>
</head>
<body>
<!-- the status bar at the top of each page -->
<div class="navbar navbar-inverse navbar-fixed-top" id="topbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" title="Intelligent tutor system">CodeQ</a>
<!--a class="navbar-brand" id="title"></a-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li style="display: none;" id="navigation-language"><a href="" data-tkey="language">Language</a></li>
<li style="display: none;" id="navigation-problem"><a href="" data-tkey="problem">Problem</a></li>
<li style="display: none;" id="navigation-python"><a href="" data-tkey="python">Python</a></li>
<li style="display: none;" id="navigation-prolog"><a href="" data-tkey="prolog">Prolog</a></li>
<li style="display: none;" id="navigation-robot"><a href="" data-tkey="robot">Robot</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text" id="signed-in-title"></p>
<!--<li class="dropdown lang-selection">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="lang-choice"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span class="glyphicon glyphicon glyphicon-user"></span>
</a>
<ul class="dropdown-menu">
<li id="navigation-logout"><a href="#" data-tkey="logout">Logout</a></li>
<li id="navigation-profile"><a href="#" data-tkey="profile">Profile</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass">Change password</a></li>
</ul>
</li>
<li class="dropdown" id="settings_dropdown_menu">
<a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
<div class="dropdown-menu" style="background-color: #fff">
<form class="form col-sm-12">
<div class="form-group">
<span class="small" data-tkey="language">Language</span>
<a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
<select class="form-control" id="gui_lang_select">
<option value="sl">Slovensko</option>
<option value="en">English</option>
<!--<option value="d">Dolgooooooooooooooooooooooooooooooooooooooooooooooo</option>-->
</select>
</div>
<!--<div class="form-group">
<span class="small" data-tkey="language">
Language
</span>
<a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
<div>
<div class="radio">
<label>
<input name="lang" value="en" type="radio">English
</label>
</div>
<div class="radio">
<label>
<input name="lang" value="sl" type="radio">Slovensko
</label>
</div>
<div class="radio">
<label>
<input name="lang" value="d" type="radio">Dolgooooooooooooooooooooooooooooooooooooooooooooooo
</label>
</div>
</div>
</div>-->
<div class="form-group">
<div class="text-right">
<button type="button" class="btn btn-default" data-target="settingsDropdown" data-toggle="dropdown" id="settings_cancel_btn">Close</button>
<button type="button" class="btn btn-primary" data-target="settingsDropdown" data-toggle="dropdown" id="settings_save_btn">Save</button>
</div>
</div>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- login screen -->
<!--div class="container" id="screen_login">
<form class="form-signin">
<h2 class="form-signin-heading">Please login</h2>
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus="">
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button>
</div>
<div class="form-group">
<a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp">New User? Sign-up..</a>
</div>
</form>
</div-->
<!-- main screen: programming language selection, settings, etc. -->
<div class="container" id="screen_language" style="text-align: center; display: none;">
<div class="row">
<div class="col-lg-4" id="choose-prolog">
<img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
<h2>Prolog</h2>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4" id="choose-python">
<img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
<h2>Python</h2>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4" id="choose-robot">
<img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
<h2>Robot</h2>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
<!-- problem selection screen for a specific language: groups of problems, with descriptions -->
<div class="container" id="screen_problem" style="display: none;"></div>
<!-- problem screen: prolog -->
<div class="container-fluid quadrants block1" id="screen_prolog" style="display: none;">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 block block1">
<div class="description-container">
<h2 class="title" data-dict="prolog" data-tkey="slug"></h2>
<div class="description" data-dict="prolog" data-tkey="description"></div>
</div>
<div class="block-label">Instructions</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block2">
<nav class="navbar navbar-default block-toolbar">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
<button type="button" class="btn btn-default navbar-btn btn-hint" data-tkey="btn_hint">Hint</button>
<button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</button>
</div>
</nav>
<div class="code_editor"></div>
<div class="block-statusbar"></div>
<div class="block-label">Code</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block3">
<div class="console"></div>
<div class="block-label">Console</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block4">
<div class="scrollable-content-container">
<div class="hints"></div>
</div>
<div class="block-label">Hints</div>
</div>
</div><!--/row-->
</div><!--container-->
<!-- problem screen: python -->
<div class="container-fluid quadrants block1" id="screen_python" style="display: none;">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 block block-left">
<div class="col-lg-12 col-md-12 col-sm-12 block block1">
<div class="scrollable-content-container">
<div class="description-container">
<h2 class="title" data-dict="python" data-tkey="slug"></h2>
<div class="description" data-dict="python" data-tkey="description"></div>
</div>
</div>
<div class="block-label">Instructions</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 block block4">
<div class="scrollable-content-container">
<div class="hints"></div>
</div>
<div class="block-label">Hints</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
<div class="col-lg-6 col-md-12 col-sm-12 block block2">
<nav class="navbar navbar-default block-toolbar">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
<button type="button" class="btn btn-default navbar-btn btn-hint" data-tkey="btn_hint">Hint</button>
<button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</button>
<button type="button" class="btn btn-default navbar-btn btn-run" data-tkey="btn_run">Run</button>
<button type="button" class="btn btn-default navbar-btn btn-stop" data-tkey="btn_stop">Stop</button>
</div>
</nav>
<div class="code_editor"></div>
<div class="block-statusbar"></div>
<div class="block-label">Code</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 block block3">
<div class="console"></div>
<div class="block-label">Console</div>
</div>
</div>
</div><!--/row-->
</div><!--container-->
<!-- problem screen: robot -->
<div class="container-fluid quadrants block1" id="screen_robot" style="display: none;">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 block block1">
<div class="description-container">
<h2 class="title" data-dict="robot" data-tkey="slug"></h2>
<div class="description" data-dict="robot" data-tkey="description"></div>
</div>
<div class="block-label">Instructions</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block2">
<nav class="navbar navbar-default block-toolbar">
<div class="container-fluid">
<button type="button" class="btn btn-default navbar-btn btn-plan">Plan</button>
<button type="button" class="btn btn-default navbar-btn btn-hint">Hint</button>
<button type="button" class="btn btn-default navbar-btn btn-run">Run</button>
<input type="text" id="robot_ip" placeholder="Robot's IP"></input>
<button type="button" class="btn btn-default navbar-btn btn-stop">Stop</button>
</div>
</nav>
<div class="code_editor"></div>
<div class="block-statusbar"></div>
<div class="block-label">Code</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block3">
<div class="console"></div>
<div class="block-label">Console</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 block block4">
<div class="scrollable-content-container">
<div class="hints"></div>
</div>
<div class="block-label">Hints</div>
</div>
</div><!--/row-->
</div><!--container-->
<!-- profile screen -->
<div class="container" id="screen_profile" style="display: none;">
<h2>
Profile
<div class="btn-group btn-group-xs hidden-md pull-right">
<a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default" data-tkey="change_pass">Change Password</a>
<a href="#" class="btn btn-default" id="btnProfileGoBack">Go back</a>
</div>
</h2>
<hr>
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Overview
</div>
<ul class="list-group small">
<li class="list-group-item text-right"><span class="pull-left"><strong>Username</strong></span>markopusnik</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Real name</strong></span>Marko Pušnik</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Joined</strong></span>Sep 29, 2015</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Last seen</strong></span>1 hour ago</li>
</ul>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Statistics
</div>
<ul class="list-group small">
<li class="list-group-item"><strong>Points</strong> <span class="label label-default pull-right">87</span></li>
<li class="list-group-item"><strong>Prolog</strong> <span class="label label-default pull-right">10</span></li>
<li class="list-group-item"><strong>Python</strong> <span class="label label-default pull-right">10</span></li>
<li class="list-group-item"><strong>Robot</strong> <span class="label label-default pull-right">10</span></li>
</ul>
</div>
</div><!--/col-3-->
<div class="col-lg-9 col-md-8">
<ul class="nav nav-tabs" id="profileTab">
<li class="active"><a href="#" class="text-primary" data-target="#profileSettings" data-toggle="tab">Edit Profile</a></li>
<li><a href="#" class="text-primary" data-target="#profile2" data-toggle="tab">Neki</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="profileSettings">
<br>
<form class="form">
<div class="col-lg-6">
<div class="form-group">
<label><h4>Username</h4></label>
<input type="text" class="form-control input-lg disabled" disabled="disabled" name="username" value="markopusnik">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label><h4>Real name</h4></label>
<input type="text" class="form-control input-lg" name="realName" placeholder="First & last name" maxlength="50">
</div>
</div><!--/col-->
<div class="col-lg-12">
<div class="form-group">
<label><h4>Email</h4></label>
<input type="email" class="form-control input-lg disabled" disabled="disabled" name="email" placeholder="Email address (private)" required="required">
</div>
</div><!--/col-->
<div class="col-lg-12">
<div class="form-group">
<button class="btn btn-lg btn-primary pull-right" type="button">Save</button>
</div>
</div><!--/col-->
</form>
</div><!--/tab-pane-->
<div class="tab-pane" id="profile2">
<h2 class="text-center">Todo...</h2>
</div><!--/tab-pane-->
</div><!--/tab-content-->
</div><!--/col-9-->
</div><!--row-->
</div><!--container-->
<!-- Modals -->
<div id="modalLogIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h3 class="text-center">Please sign in</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
Login via
<div class="ssa-buttons">
<img src="res/gumb_aaiprijava.png" style="width: 49%">
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username" required>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
<div class="help-block text-right"><a href="#">Forgot the password?</a></div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" data-dismiss="modal" type="button" id="submit">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
</div>
</div><!--/modal-body-->
<div class="modal-footer">
<div class="text-center">
New here ? <a href="#" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp"><b>Sign Up</b></a>
</div>
</div><!--/modal-footer-->
</div>
</div>
</div>
<div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">×</button>
<h3 class="text-center">Sign up</h3>
</div>
<div class="modal-body">
<form class="form" method="post">
<div class="form-group" bs-has-error="">
<label class="control-label small">Username</label>
<input class="form-control" name="username" id="modalSignUpUsername" type="text" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required="">
</div>
<div class="form-group">
<label class="control-label small">Password</label>
<input class="form-control" name="password" id="modalSignUpPassword" type="password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
</div>
<div class="form-group">
<label class="control-label small">Verify (repeat password)</label>
<input class="form-control" name="verify" id="modalSignUpVerify" type="password" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
</div>
</form><!--/row-->
</div><!--/modal-body-->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">Cancel</button>
<button class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modalLogIn" id="btnSignUp" type="submit">Sign up</button>
</div><!--/modal-footer-->
</div>
</div>
</div>
<div id="modalChangePassword" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="text-center">Change password </h3>
</div>
<div class="modal-body">
<form class="form" method="post">
<div class="form-group">
<label class="control-label small">New Password</label>
<input class="form-control" placeholder="Enter a new password" name="new" type="password">
</div>
<div class="form-group">
<label class="control-label small">Verify Password</label>
<input class="form-control" placeholder="Repeat the password again" name="verify" type="password">
</div>
</form><!--/row-->
</div><!--/modal-body-->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" id="btnPasswdChange" type="submit">Change</button>
</div><!--/modal-footer-->
</div>
</div>
</div>
<!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
Used as a wait screen; must be the last element in the DOM.
It is active after load, javascript turns it off after initialization. -->
<div id="disabled" style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; cursor: wait; background-color: rgba(0, 0, 0, 0.7);"></div>
<!-- jQuery stuff -->
<script src="js/jquery/jquery-1.11.3.js"></script>
<script src="js/engine.io.js"></script>
<script src="js/jquery/jquery.history.js"></script>
<!-- Q promise library -->
<script src="js/q.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- CodeMirror stuff -->
<script src="js/codemirror/codemirror.js"></script>
<script src="js/codemirror/matchbrackets.js"></script>
<script src="js/codemirror/prolog.js"></script>
<script src="js/codemirror/python.js"></script>
<script src="js/codemirror/show-hint.js"></script>
<!-- codeq app -->
<script src="js/codeq/core.js"></script>
<!-- Cordova/PhoneGap -->
<script type="text/javascript" src="cordova.js"></script>
<!-- codeq app cont. -->
<script src="js/codeq/init.js"></script>
<script src="js/codeq/translation.js"></script>
<script src="js/codeq/statusbar.js"></script>
<script src="js/codeq/navigation.js"></script>
<script src="js/codeq/comms.js"></script>
<script src="js/codeq/console.js"></script>
<script src="js/codeq/editor.js"></script>
<script src="js/codeq/hint.js"></script>
<script src="js/codeq/prolog.js"></script>
<script src="js/codeq/python.js"></script>
<script src="js/codeq/robot.js"></script>
<script src="js/codeq/login.js"></script>
<script src="js/codeq/profile.js"></script>
<script src="js/codeq/language.js"></script>
<script src="js/codeq/problem.js"></script>
<script src="js/codeq/settings.js"></script>
</body>
</html>