webcompiler.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <HTML>
  2. <head>
  3. <meta charset="UTF-8">
  4. <Title>Pas2JS web compiler demo</Title>
  5. <script SRC="demowebcompiler.js" type="application/javascript"></script>
  6. <!-- We use bootstrap for the GUI -->
  7. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <div class="panel panel-default">
  14. <div class="panel-heading">Enter your program here</div>
  15. <div class="panel-body">
  16. <ul class="nav nav-tabs">
  17. <li class="active"><a data-toggle="tab" id="act-source" href="#source">Program Source</a></li>
  18. <li><a data-toggle="tab" id="act-load" href="#load">Load units</a></li>
  19. <li><a data-toggle="tab" id="act-output" href="#output">Compiler output</a></li>
  20. </ul>
  21. <div class="tab-content">
  22. <div id="source" class="tab-pane fade in active">
  23. <textarea id="memo-program-src" rows="15" cols="80">
  24. program main;
  25. uses browserconsole; // For output in correct console panel...
  26. begin
  27. // Your code here
  28. Writeln('Hello, world!');
  29. end.
  30. </textarea>
  31. </div>
  32. <div id="load" class="tab-pane fade">
  33. <div class="panel panel-default">
  34. <div class="panel-body">
  35. <textarea id="memo-loaded-units" rows="15~5" cols="80">
  36. </textarea>
  37. </div>
  38. <form class="form-inline">
  39. <div class="form-group">
  40. <button id="btn-load-defaults" class="btn btn-defaults">Load default units</button>
  41. <button id="btn-load-unit" class="btn btn-defaults">Load this unit:</button>
  42. <input type="text" class="form-control" id="edt-load-unit-name">
  43. </div>
  44. </form>
  45. </div>
  46. </div>
  47. <div id="output" class="tab-pane fade">
  48. <textarea id="memo-compiler-output" rows="15" cols="80">
  49. </textarea>
  50. <div id="compile-result"></div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="panel-footer">
  55. <button id="btn-compile" class="btn btn-primary">Compile</button>
  56. <button id="btn-run" class="btn btn-success" disabled="disabled">Run</button>
  57. </div>
  58. </div>
  59. <iframe id="runarea" src="run.html" height=320 width=800></iframe>
  60. </div> <!-- container -->
  61. <script>
  62. rtl.run();
  63. </script>
  64. </body>
  65. </HTML>