diff options
| author | Aleš Smodiš <aless@guru.si> | 2015-09-14 14:52:30 +0200 |
|---|---|---|
| committer | Aleš Smodiš <aless@guru.si> | 2015-09-14 14:52:30 +0200 |
| commit | 18a575e02816622706f740e9938515869b58a375 (patch) | |
| tree | 0b3522830859896d389c6c44090085c27081a437 /index.html | |
| parent | 517fb5cec0dab7672cd6ce97fe72906f09125435 (diff) | |
Reimplemented communication with the server.
* Using engine.io to use web sockets or long polling.
* Changed to a single-page app.
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 162 |
1 files changed, 132 insertions, 30 deletions
@@ -1,38 +1,140 @@ <html> <head> - <title>CodeQ Login</title> + <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"> + <link rel="stylesheet" href="css/jquery/jquery.terminal.css" type="text/css"> + <!-- 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"> + <title>CodeQ</title> </head> <body style="text-align: center;"> - <h1>CodeQ Login</h1> - <hr> - <table style="margin: 0 auto;"> - <tbody> - <tr> - <td style="text-align: right;">Username:</td> - <td><input type="text" name="username" id="username"></td> - </tr> - <tr> - <td style="text-align: right;">Password:</td> - <td><input type="password" name="password" id="password"></td> - </tr> - <tr> - <td style="text-align: right;">Problem:</td> - <td> - <select name="problem_group" id="problem_group" style="min-width: 10em;"> - </select> - <select name="problem" id="problems" style="min-width: 10em;"> - </select> - </td> - </tr> - <tr> - <td colspan="2" style="text-align: center;"> - <button type="button" id="submit">Login</button> - </td> - </tr> - </tbody> - </table> + <div class="navbar navbar-inverse navbar-fixed-top" id="topbar"> + <div class="container-fluid"> + <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> + <div class="collapse navbar-collapse"> + <ul class="nav navbar-nav navbar-right"> + <p class="navbar-text">Signed in as Franc Jožef</p> + <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><a href="#">Profile</a></li> + <li><a href="#">Login or Signup</a></li> + <li><a href="#">Logout</a></li> + </ul> + </li> + <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li> + </ul> + </div><!--/.nav-collapse --> + + </div> + </div> + + <div id="screen_login"> + <h1>CodeQ Login</h1> + <hr> + <table style="margin: 0 auto;"> + <tbody> + <tr> + <td style="text-align: right;">Username:</td> + <td><input type="text" name="username" id="username"></td> + </tr> + <tr> + <td style="text-align: right;">Password:</td> + <td><input type="password" name="password" id="password"></td> + </tr> + <tr> + <td style="text-align: right;">Problem:</td> + <td> + <select name="problem_group" id="problem_group" style="min-width: 10em;"> + </select> + <select name="problem" id="problems" style="min-width: 10em;"> + </select> + </td> + </tr> + <tr> + <td colspan="2" style="text-align: center;"> + <button type="button" id="submit">Login</button> + </td> + </tr> + </tbody> + </table> + </div> + + <div class="container-fluid" id="screen_prolog" style="display: none;"> + <div class="row"> + <div class="col-lg-3 col-md-6 col-sm-12 block"> + <div id="description"></div> + <div class="block-label">Instructions</div> + </div> + <div class="col-lg-3 col-md-6 col-sm-12 block"> + <nav class="navbar navbar-default" id="block-toolbar"> + <div class="container-fluid"> + <button type="button" class="btn btn-default navbar-btn" id="btn_code_run">Run</button> + <button type="button" class="btn btn-default navbar-btn" id="btn_code_break">Break</button> + <button type="button" class="btn btn-default navbar-btn" id="btn_code_hint">Hint</button> + <button type="button" class="btn btn-default navbar-btn" id="btn_code_test">Test</button> + </div> + </nav> + <div id="code_editor"></div> + <div class="block-label">Code</div> + </div> + <div class="col-lg-3 col-md-6 col-sm-12 block"> + <div id="console"></div> + <div class="block-label">Console</div> + </div> + <div class="col-lg-3 col-md-6 col-sm-12 block"> + <div id="info"></div> + <div class="block-label">Hints</div> + </div> + </div><!--/row--> + </div><!--container--> + + <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/codeq/login.js"></script> + <script src="js/engine.io.js"></script> + <script src="js/jquery/jquery.terminal-0.8.8.js"></script> + <!--script src="js/jquery/jquery.console.js"></script> + <!-- Q promise library --> + <script src="js/q.js"></script> + <!-- Bootstrap --> + <script src="js/bootstrap/bootstrap.min.js"></script> + <!-- Cordova/PhoneGap --> + <script type="text/javascript" src="cordova.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/show-hint.js"></script> + <!-- codeq app --> + <script src="js/codeq.js"></script> + <script src="js/codeq/comms.js"></script> + <script src="js/codeq/console.js"></script> + <script src="js/def_parser.js"></script> + <script src="js/prolog.js"></script> + <script src="js/python.js"></script> + <script src="js/codeq/startup.js"></script> </body> </html> |