client.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <!--
  3. The entry point for client. This file is loaded just once when the client is captured.
  4. It contains socket.io and all the communication logic.
  5. -->
  6. <html>
  7. <head>
  8. %X_UA_COMPATIBLE%
  9. <title>Karma</title>
  10. <link href="favicon.ico" rel="icon" type="image/x-icon">
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  13. <style type="text/css">
  14. iframe {
  15. height: 100%;
  16. width: 100%;
  17. border: 0;
  18. }
  19. html, body {
  20. height: 100%;
  21. padding: 0;
  22. margin: 0;
  23. font-family: sans-serif;
  24. }
  25. .offline {
  26. background: #DDD;
  27. }
  28. .online {
  29. background: #6C4;
  30. }
  31. .idle {
  32. }
  33. .executing {
  34. background: #F99;
  35. }
  36. #banner {
  37. padding: 5px 10px;
  38. }
  39. h1 {
  40. font-size: 1.8em;
  41. margin: 0;
  42. padding: 0;
  43. }
  44. ul {
  45. margin: 0;
  46. padding: 0;
  47. list-style: none;
  48. }
  49. li {
  50. padding: 5px 12px;
  51. }
  52. .btn-debug {
  53. float: right;
  54. }
  55. .offline .btn-debug {
  56. display: none;
  57. }
  58. .btn-debug {
  59. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  60. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  61. box-shadow:inset 0px 1px 0px 0px #ffffff;
  62. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
  63. background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
  64. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
  65. background-color:#ffffff;
  66. -moz-border-radius:6px;
  67. -webkit-border-radius:6px;
  68. border-radius:6px;
  69. border:1px solid #dcdcdc;
  70. display:inline-block;
  71. color:#666666;
  72. font-family:arial;
  73. font-size:15px;
  74. font-weight:bold;
  75. padding:6px 24px;
  76. text-decoration:none;
  77. text-shadow:1px 1px 0px #ffffff;
  78. }
  79. .btn-debug:hover {
  80. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff) );
  81. background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
  82. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
  83. background-color:#f6f6f6;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div id="banner" class="offline">
  89. <a href="#" onclick="window.open('debug.html%X_UA_COMPATIBLE_URL%')" class="btn-debug">DEBUG</a>
  90. <h1 id="title">Karma - starting</h1>
  91. </div>
  92. <ul id="browsers"></ul>
  93. <iframe id="context" src="about:blank" width="100%" height="100%"></iframe>
  94. <script src="socket.io/socket.io.js"></script>
  95. <script src="karma.js"></script>
  96. </body>
  97. </html>