diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 227 |
1 files changed, 104 insertions, 123 deletions
@@ -1,6 +1,7 @@ +<!DOCTYPE html> <html> <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta charset="utf-8" /> <!--meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"--> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name='HandheldFriendly' content='True'> @@ -104,9 +105,9 @@ </div> </div> - <!-- login screen --> - <div class="container" id="screen-login" style="display: none;"> - <div class="row"> + <div id="content"> + <!-- login screen --> + <div class="container" id="screen-login" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -153,21 +154,15 @@ </div> </div> </div> - </div> - <!-- AAI login --> - <div class="container-fluid" id="screen-aai-login" style="display: none;"> - <div class="row"> - <div class="col-md-12" style="padding: 0;"> - <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button> - <iframe width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="" id="aai-iframe"></iframe> - </div> + <!-- AAI login --> + <div class="container-fluid" id="screen-aai-login" style="display: none;"> + <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button> + <iframe frameborder="0" scrolling="yes" allowtransparency="true" src="" id="aai-iframe"></iframe> </div> - </div> - <!--Sign up screen--> - <div class="container" id="screen-signup" style="display: none;"> - <div class="row"> + <!--Sign up screen--> + <div class="container" id="screen-signup" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -229,11 +224,9 @@ </div> </div> </div> - </div> - <!-- change password screen --> - <div class="container" id="screen-change-password" style="display: none;"> - <div class="row"> + <!-- change password screen --> + <div class="container" id="screen-change-password" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -267,11 +260,9 @@ </div> </div> </div> - </div> - <!-- upgrade account to AAI screen --> - <div class="container" id="screen-upgrade-to-aai" style="display: none;"> - <div class="row"> + <!-- upgrade account to AAI screen --> + <div class="container" id="screen-upgrade-to-aai" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -307,11 +298,9 @@ </div> </div> </div> - </div> - <!-- about screen --> - <div class="container" id="screen-about" style="display: none;"> - <div class="row"> + <!-- about screen --> + <div class="container" id="screen-about" style="display: none;"> <div class="col-md-12"> <h2 data-tkey="about">About</h2> <div class="btn-group"> @@ -323,11 +312,9 @@ </div> </div> </div> - </div> - <!-- main screen: programming language selection, settings, etc. --> - <div class="container" id="screen-language" style="text-align: center; display: none;"> - <div class="row"> + <!-- main screen: programming language selection, settings, etc. --> + <div class="container" id="screen-language" style="text-align: center; display: none;"> <div class="col-lg-4"> <a href="#" id="choose-prolog" style="display: block;" tabindex="100"> <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140"> @@ -347,14 +334,12 @@ </a> </div> </div> - </div> - <!-- problem selection screen for a specific language: groups of problems, with descriptions --> - <div class="container" id="screen-problem-list" style="display: none;"></div> + <!-- problem selection screen for a specific language: groups of problems, with descriptions --> + <div class="container" id="screen-problem-list" style="display: none;"></div> - <!-- screen to display all user solutions for a given langauge --> - <div class="container" id="screen-solutions" style="display: none;"> - <div class="row"> + <!-- screen to display all user solutions for a given langauge --> + <div class="container" id="screen-solutions" style="display: none;"> <div class="col-md-12"> <h2 data-tkey="your_solutions">Your solutions</h2> <div class="btn-group"> @@ -364,106 +349,104 @@ <div class="solutions"></div> </div> </div> - </div> - <!-- problem screen: prolog --> - <div class="container-fluid quadrants" id="screen-prolog" style="display: none;"> - <div class="row"> - <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="description-container"> - <h1 class="title" data-dict="prolog" data-tkey="name"></h1> - <div class="description" data-dict="prolog" data-tkey="description"></div> - </div> - <div class="hints"></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 block-editor"> - <div class="toolbar"> - <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> - <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + <!-- problem screen: prolog --> + <div class="container-fluid quadrants" id="screen-prolog" style="display: none;"> + <div class="row"> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="description-container"> + <h1 class="title" data-dict="prolog" data-tkey="name"></h1> + <div class="description" data-dict="prolog" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + </div> + <div class="code-editor"></div> + <div class="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- problem screen: python --> - <div class="container-fluid quadrants" 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="description-container"> - <h1 class="title" data-dict="python" data-tkey="name"></h1> - <div class="description" data-dict="python" data-tkey="description"></div> - </div> - <div class="hints"></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 block-editor"> - <div class="toolbar"> - <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> - <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> - <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> - <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + <!-- problem screen: python --> + <div class="container-fluid quadrants" 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="description-container"> + <h1 class="title" data-dict="python" data-tkey="name"></h1> + <div class="description" data-dict="python" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> + <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + </div> + <div class="code-editor"></div> + <div class="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- problem screen: robot --> - <div class="container-fluid quadrants" id="screen-robot" style="display: none;"> - <div class="row"> - <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="description-container"> - <h1 class="title" data-dict="robot" data-tkey="name"></h1> - <div class="description" data-dict="robot" data-tkey="description"></div> - </div> - <div class="hints"></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 block-editor"> - <div class="toolbar"> - <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> - <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button> - <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> - <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + <!-- problem screen: robot --> + <div class="container-fluid quadrants" id="screen-robot" style="display: none;"> + <div class="row"> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="description-container"> + <h1 class="title" data-dict="robot" data-tkey="name"></h1> + <div class="description" data-dict="robot" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="status"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button> + <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> + <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + </div> + <div class="code-editor"></div> + <div class="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="status"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- profile screen --> - <div class="container" id="screen-profile" style="display: none;"> - <h2 data-tkey="profile">Profile</h2> - <div class="btn-group"> - <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button> - <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button> - </div> - <hr /> - <div class="row"> + <!-- profile screen --> + <div class="container" id="screen-profile" style="display: none;"> + <h2 data-tkey="profile">Profile</h2> + <div class="btn-group"> + <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button> + <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button> + </div> + <hr /> <div class="col-lg-12 col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> @@ -483,11 +466,9 @@ </div> </div> </div> - </div> - <!-- Settings screen --> - <div class="container" id="screen-settings" style="display: none;"> - <div class="row"> + <!-- Settings screen --> + <div class="container" id="screen-settings" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> |