index.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>NoBall: Live cricket scores, news, and more!</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-aspect-ratio: 1/1)" />
  7. <link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-aspect-ratio: 2147483646/2147483647)" />
  8. <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
  9. <style>body { margin: 0; border: 0; padding: 0; background-color: #b2df8a; line-height: 1.325 } a { color: inherit; text-decoration: inherit } *.matchEntry:hover { text-decoration: underline; }</style>
  10. <script>
  11. /*
  12. @licstart The following is the entire license notice for the
  13. JavaScript code in this page.
  14. Copyright (C) 2018 Muhammad M. Imtiaz
  15. This program is free software: you can redistribute it and/or modify it
  16. under the terms of the GNU Affero General Public License as published by
  17. the Free Software Foundation, either version 3 of the License, or (at
  18. your option) any later version.
  19. This program is distributed in the hope that it will be useful, but
  20. WITHOUT ANY WARRANTY; without even the implied warranty of
  21. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
  22. General Public License for more details.
  23. You should have received a copy of the GNU Affero General Public License
  24. along with this program. If not, see https://www.gnu.org/licenses/.
  25. @licend The above is the entire license notice
  26. for the JavaScript code in this page.
  27. */
  28. </script>
  29. </head>
  30. <body style="font-family: 'PT Sans', sans-serif">
  31. <div id="topbar" style="width: 100%; height: 9.375vh; background-color: #009900; font-size: 7.0754716975vh; color: #fff"><img src="logo.png" style="max-height: 6.191037735vh; vertical-align: middle; display: inline-block" /><b>NoBall</b></div>
  32. <div id="topbar_bg"></div>
  33. <div class="scoreinfo">
  34. <div style="background-color: #a6cee3; color: #fff; font-size: 5.4759375vh; text-align: center"><b>MATCHES</b></div>
  35. <div id="scoreinfo" style="font-size: 2.73796875vh; background-color: #f7f7f7">
  36. <div id="noMatches" style="background-color: #f7f7f7">No matches at this time.</div>
  37. </div>
  38. </div>
  39. <div id="switch_view" style="font-size: 3.080214843vh; text-align: center; margin: auto;vertical-align: middle"><br /><b><span style="color: #404040" id="news_view">NEWS</span> | <a href="#" id="features_view" style="color: rgb(31, 120, 180)" onclick="document.getElementById('newsdiv').style.display = 'none'; document.getElementById('magazine').style.display = 'initial'; featuresView.parentNode.replaceChild(newsView, newsView_clicked); this.parentNode.replaceChild(featuresView_clicked, featuresView)">FEATURES</a></b></div>
  40. <div id="magazine"></div>
  41. <div id="newsdiv" style="background-color: #fff; height: 100%"></div>
  42. <script>
  43. newsView_clicked = document.getElementById('news_view');
  44. featuresView = document.getElementById('features_view');
  45. newsView = featuresView.cloneNode(false);
  46. newsView.id = "newsView";
  47. newsView.onclick = function() {
  48. document.getElementById('magazine').style.display = 'none';
  49. document.getElementById('newsdiv').style.display = 'block';
  50. newsView.parentNode.replaceChild(featuresView, featuresView_clicked);
  51. newsView.parentNode.replaceChild(newsView_clicked, newsView);
  52. }
  53. newsView.innerHTML = newsView_clicked.innerHTML;
  54. featuresView_clicked = newsView_clicked.cloneNode(false);
  55. featuresView_clicked.id = "featuresView";
  56. featuresView_clicked.innerHTML = featuresView.innerHTML;
  57. noMatches = document.getElementById('noMatches').cloneNode(true);
  58. matchSep = document.createElement("hr");
  59. matchSep.style.margin = "0";
  60. var newsRequest = new XMLHttpRequest();
  61. newsRequest.onload = function() {
  62. var jsonData = JSON.parse(newsRequest.responseText);
  63. var line = document.createElement('hr');
  64. line.className = 'news_separator';
  65. for(i = 0; i < jsonData.length; i++) {
  66. if(i > 0)
  67. document.getElementById('newsdiv').appendChild(line.cloneNode(false));
  68. var table = document.createElement('table');
  69. table.style.display = 'inline-block';
  70. table.style.margin = '0';
  71. table.style.padding = '2px';
  72. table.className = "newsitem";
  73. if(i == 0) {
  74. table.id = "first_news_item";
  75. }
  76. var link = document.createElement('a');
  77. link.href = jsonData[i].url;
  78. var imgLink = link.cloneNode(false);
  79. link.style.fontWeight = '700';
  80. link.appendChild(document.createTextNode(jsonData[i].title));
  81. table.appendChild(link);
  82. if(jsonData[i].image) {
  83. var imgLink = link.cloneNode(false);
  84. var img = document.createElement('img');
  85. img.src = jsonData[i].image;
  86. img.style.width = "100%";
  87. imgLink.appendChild(img);
  88. table.appendChild(imgLink);
  89. }
  90. document.getElementById('newsdiv').appendChild(table);
  91. }
  92. }
  93. newsRequest.open("GET", "news.json");
  94. newsRequest.send();
  95. var magRequest = new XMLHttpRequest();
  96. magRequest.onload = function() {
  97. var jsonData = JSON.parse(magRequest.responseText);
  98. for(i = 0; i < jsonData.length; i++) {
  99. var link = document.createElement('a');
  100. link.href = jsonData[i].url;
  101. link.onmouseover = function() { link.style.color = '#000'; }
  102. var div = document.createElement('div');
  103. if (i % 2 == 0) {
  104. div.style.backgroundColor = '#1f78b4';
  105. div.style.color = '#f7f7f7';
  106. }
  107. else {
  108. div.style.color = '#1f78b4';
  109. div.style.backgroundColor = '#f7f7f7';
  110. }
  111. div.style.width = '100%';
  112. if(jsonData[i].image) {
  113. var imgLink = link.cloneNode(false);
  114. var img = document.createElement('img');
  115. img.src = jsonData[i].image;
  116. img.style.width = '100%';
  117. img.style.margin = 'auto'
  118. img.style.display = 'inline-block';
  119. imgLink.appendChild(img);
  120. div.appendChild(imgLink);
  121. }
  122. titleLink = link.cloneNode(false);
  123. titleLink.style.display = 'block';
  124. titleLink.style.marginLeft = 'auto';
  125. titleLink.style.marginRight = 'auto';
  126. titleLink.style.width = '87.5%';
  127. titleLink.style.textAlign = 'center';
  128. titleLink.style.fontSize = '3.080214843vh';
  129. titleLink.style.fontWeight = '700';
  130. titleLink.appendChild(document.createTextNode(jsonData[i].title));
  131. div.appendChild(titleLink);
  132. descriptionLink = link.cloneNode(false);
  133. descriptionLink.style.fontSize = '2.310161133vh';
  134. descriptionLink.style.display = 'block';
  135. descriptionLink.style.marginLeft = '6.25%';
  136. descriptionLink.style.marginRight = '6.25%';
  137. descriptionLink.appendChild(document.createTextNode(jsonData[i].description));
  138. if(jsonData[i].author != "ESPNcricinfo staff") {
  139. descriptionLink.innerHTML += ". By ";
  140. authorName = document.createElement('b');
  141. authorName.appendChild(document.createTextNode(jsonData[i].author));
  142. descriptionLink.appendChild(authorName);
  143. }
  144. div.appendChild(descriptionLink);
  145. document.getElementById('magazine').appendChild(div);
  146. }
  147. }
  148. magRequest.open("GET", "magazine.json");
  149. magRequest.send();
  150. scoreInfoTable = document.getElementById('scoreinfo');
  151. var scoresRequest = new XMLHttpRequest();
  152. scoresRequest.onload = function() {
  153. children = null;
  154. while((children = scoreInfoTable.children).length > 0)
  155. scoreInfoTable.removeChild(children[0]);
  156. var jsonData = JSON.parse(scoresRequest.responseText);
  157. var line = document.createElement('hr');
  158. line.style.margin = '0';
  159. for(i = 0; i < jsonData.length; i++) {
  160. match = jsonData[i];
  161. if(match.status == '')
  162. continue;
  163. if(document.getElementsByClassName('matchEntry').length > 0)
  164. scoreInfoTable.appendChild(line.cloneNode(true));
  165. row = document.createElement("span");
  166. row.className = "matchEntry";
  167. row.style.display = 'block';
  168. entry = document.createElement("a");
  169. entry.href = match.url;
  170. entry.appendChild(document.createTextNode(match.status));
  171. row.appendChild(entry);
  172. scoreInfoTable.appendChild(row);
  173. }
  174. if(document.getElementsByClassName("matchEntry").length == 0)
  175. scoreInfoTable.appendChild(noMatches.cloneNode(true));
  176. }
  177. scoresRequest.open("GET", "scores.json?timestamp=" + new Date().getTime());
  178. scoresRequest.send();
  179. setInterval(function() { scoresRequest.open("GET", "scores.json?timestamp=" + new Date().getTime()); scoresRequest.send(); }, 20000);
  180. </script>
  181. </body>
  182. </html>