simple.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script src="jquery.js"></script>
  5. <title>Loading...</title>
  6. <style>
  7. body {
  8. position:absolute;
  9. height:100%;
  10. width:100%;
  11. }
  12. .pass {
  13. background-color:green;
  14. }
  15. .fail {
  16. background-color:red;
  17. }
  18. .connection-error {
  19. background-color:gray;
  20. }
  21. .pass #scaffold {
  22. height:100%;
  23. width:1px;
  24. display:inline-block;
  25. vertical-align:middle;
  26. }
  27. .pass #message {
  28. font-size: 100px;
  29. width:95%;
  30. text-align: center;
  31. display:inline-block;
  32. vertical-align:middle;
  33. }
  34. #message {
  35. opacity: 0.3;
  36. }
  37. #message:hover {
  38. opacity: 0.7;
  39. }
  40. .error-report {
  41. margin-bottom:100px;
  42. }
  43. .error-location {
  44. font-size:20px;
  45. }
  46. .error-detail {
  47. font-size:30px;
  48. margin-top:20px;
  49. margin-bottom:30px;
  50. }
  51. code {
  52. font-size:10px;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div id="scaffold"></div>
  58. <div id="message">
  59. </div>
  60. <script>
  61. var $ = jQuery;
  62. var poll = function(period){
  63. window.setTimeout(function(){
  64. $.ajax({
  65. url: "/json",
  66. dataType: "json",
  67. success: function(json){
  68. var result = json.failed == 0 ? "pass" : "fail";
  69. $('body').attr("class", result);
  70. $('title').html(result.toUpperCase());
  71. var message = $("#message");
  72. message.html("");
  73. if(json.failed == 0){
  74. message.html(":-)");
  75. }else{
  76. for(var k in json.failureDetails){
  77. var detail = json.failureDetails[k];
  78. message.append("<div class='error-report'><span class='error-location'><b>" + detail.group + "</b> <i>" + detail.suite + "</i> " + detail.spec + "</span> <div class='error-detail'>"+detail.trace.message+"</div> <code>"+detail.trace.stack+"</code></div>");
  79. }
  80. }
  81. poll(100);
  82. },
  83. error: function(){
  84. $('body').attr("class","connection-error");
  85. $("#message").html("Connection error");
  86. $('title').html("CONNECTION ERROR");
  87. poll(5000);
  88. }
  89. });
  90. },period);
  91. };
  92. poll(100);
  93. </script>
  94. </body>
  95. </html>