index.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Benchmarksman Playground</title>
  6. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.all.css" />
  7. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  8. <style type="text/css">
  9. /* github icon */
  10. .octicon {
  11. background: url(GitHub-Mark-64px.png);
  12. display: inline-block;
  13. background-size: 1em 1em;
  14. width: 1em;
  15. height: 1em;
  16. opacity: 0.70;
  17. }
  18. a:hover .octicon {
  19. opacity: 1.0;
  20. }
  21. /* reduce the padding between columns in a row */
  22. .row {
  23. margin-right: 0;
  24. margin-left: 0;
  25. }
  26. .row [class^="col-"],
  27. .row [class*=" col-"] {
  28. padding-right: 5px;
  29. padding-left: 5px;
  30. }
  31. </style>
  32. <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  33. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  34. <script src="//code.angularjs.org/1.3.7/angular.min.js"></script>
  35. <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
  36. <script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
  37. <script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
  38. <script src="//angular-ui.github.io/ui-ace/dist/ui-ace.min.js"></script>
  39. <script src="benchmarksman.web.js"></script>
  40. <script src="index.js"></script>
  41. </head>
  42. <body ng-controller="MainCtrl">
  43. <nav class="navbar navbar-default" role="navigation">
  44. <div class="container-fluid">
  45. <!-- Brand and toggle get grouped for better mobile display -->
  46. <div class="navbar-header">
  47. <a class="navbar-brand" href="#"><strong>Benchmarksman</strong></a>
  48. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  49. <span class="sr-only">Toggle navigation</span>
  50. <span class="icon-bar"></span>
  51. <span class="icon-bar"></span>
  52. <span class="icon-bar"></span>
  53. </button>
  54. </div>
  55. <!-- Collect the nav links, forms, and other content for toggling -->
  56. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  57. <ul class="nav navbar-nav">
  58. <li dropdown>
  59. <a href="#" dropdown-toggle data-toggle="dropdown" role="button" aria-expanded="false">
  60. <span class="glyphicon glyphicon-file"></span>
  61. Examples
  62. <span class="caret"></span>
  63. </a>
  64. <ul class="dropdown-menu" role="menu">
  65. <li ng-repeat="(exName, ex) in examples" ng-class="{active:exName===exampleName}">
  66. <a href ng-click="setExample(exName)">
  67. {{exName}}
  68. </a>
  69. </li>
  70. </ul>
  71. </li>
  72. <li><a href="https://github.com/RiveraGroup/benchmarksman">
  73. <span class="octicon"></span>
  74. GitHub
  75. </a></li>
  76. </ul>
  77. </div><!-- /.navbar-collapse -->
  78. </div><!-- /.container-fluid -->
  79. </nav>
  80. <div class="container-fluid">
  81. <h3>
  82. Playground
  83. <a class="btn btn-xs btn-primary"
  84. ng-class="{disabled:isRunning}"
  85. ng-click="run()"
  86. >
  87. <span class="glyphicon glyphicon-play"></span>
  88. Run
  89. </a>
  90. </h3>
  91. <div class="row">
  92. <div class="col-xs-6">
  93. <h4>
  94. Tests
  95. </h4>
  96. <div class="form-control" style="min-height:40em"
  97. name="tests"
  98. ng-model="tests"
  99. ui-ace="{
  100. mode: 'javascript',
  101. require: ['ace/ext/language_tools'],
  102. onLoad: aceLoaded,
  103. }"
  104. ></div>
  105. </div>
  106. <div class="col-xs-6">
  107. <h4>
  108. Output
  109. <small ng-if="isRunning"> (running ...) </small>
  110. </h4>
  111. <div class="form-control" style="min-height:40em"
  112. name="output"
  113. ng-model="output"
  114. ui-ace="{
  115. require: ['ace/ext/language_tools'],
  116. onLoad: aceLoaded,
  117. }"
  118. ></div>
  119. </div>
  120. </div>
  121. </div>
  122. </body>
  123. </html>