index.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <title>Editor</title>
  7. <style link rel="stylesheet" href="css/bootstrap.min.css">
  8. <style type="text/css" media="screen">
  9. body {
  10. overflow: hidden;
  11. }
  12. #editor {
  13. height: 300px;
  14. width: 45%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="container-fluid">
  20. <div class="row">
  21. <div class="col-xs-6 col-md-6">
  22. <!-- <div class="panel panel-default">
  23. <div class="panel-heading">
  24. <h3 class="panel-title">Editor</h3>
  25. </div>
  26. <div class="panel-body"> -->
  27. <div id="editor"></div>
  28. <!-- </div>
  29. </div>
  30. <div class="text-center">---End of editor---</div> -->
  31. </div>
  32. <div class="col-xs-6 col-md-6">
  33. <p> snippets </p>
  34. </div>
  35. </div>
  36. <div class="row">
  37. <div class="col-md-4">
  38. <button id="run" type="button" class="btn btn-success btn-lg">Run</button>
  39. </div>
  40. <div class="col-md-4">
  41. </div>
  42. <div class="col-md-4">
  43. </div>
  44. </div>
  45. </div>
  46. <script src="js/jquery-3.3.1.min.js"></script>
  47. <script src="js/bootstrap.bundle.min.js"></script>
  48. <script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
  49. <script src="js/ext-language_tools.js"></script>
  50. <script>
  51. // trigger extension
  52. ace.require("ace/ext/language_tools");
  53. var editor = ace.edit("editor");
  54. editor.session.setMode("ace/mode/python");
  55. editor.setTheme("ace/theme/dracula");
  56. // enable autocompletion and snippets
  57. editor.setOptions({
  58. enableBasicAutocompletion: true,
  59. enableSnippets: true,
  60. enableLiveAutocompletion: false
  61. });
  62. var ws = new WebSocket('ws://'+window.location.host+':8080/');
  63. // ws.onopen = function() {
  64. // };
  65. // ws.onclose = function() {
  66. // document.body.style.backgroundColor = null;
  67. // };
  68. // ws.onmessage = function(event) {
  69. // document.getElementById('count').textContent = event.data;
  70. // };
  71. $("#run").click(function(){
  72. ws.send(editor.session.getValue())
  73. ws.send('go')
  74. })
  75. </script>
  76. </body>
  77. </html>