1
0

ui.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="shortcut icon" href="favicon.ico">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
  6. <meta charset="UTF-8" />
  7. <script type="text/javascript" src="speedtest.js"></script>
  8. <script type="text/javascript">
  9. function I(i){return document.getElementById(i);}
  10. //LIST OF TEST SERVERS. See documentation for details if needed
  11. <?php
  12. $mode=getenv("MODE");
  13. if($mode=="standalone" || $mode=="backend"){ ?>
  14. var SPEEDTEST_SERVERS=[];
  15. <?php } elseif ($mode=="dual") {
  16. $jsonContent = @file_get_contents('/servers.json');
  17. if ($jsonContent === false) {
  18. $servers = [];
  19. } else {
  20. $servers = json_decode($jsonContent, true) ?: [];
  21. }
  22. // find out my own URL
  23. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
  24. // Retrieve the host (e.g., www.example.com)
  25. $host = $_SERVER['HTTP_HOST'];
  26. // Retrieve the URI (path and query string)
  27. $uri = $_SERVER['REQUEST_URI'];
  28. // Combine them to get the full URL
  29. $url = $protocol . $host . $uri;
  30. array_unshift($servers,
  31. [
  32. "name"=> "This Server",
  33. "server"=> $url."backend/",
  34. "id"=> 1,
  35. "dlURL"=> "garbage.php",
  36. "ulURL"=> "empty.php",
  37. "pingURL"=> "empty.php",
  38. "getIpURL"=> "getIP.php"
  39. ]
  40. );
  41. ?>
  42. var SPEEDTEST_SERVERS= <?= json_encode($servers, JSON_PRETTY_PRINT) ?: '[]' ?>;
  43. <?php } else { ?>
  44. var SPEEDTEST_SERVERS= <?= file_get_contents('/servers.json') ?: '[]' ?>;
  45. <?php } ?>
  46. //INITIALIZE SPEED TEST
  47. var s=new Speedtest(); //create speed test object
  48. <?php if(getenv("TELEMETRY")=="true"){ ?>
  49. s.setParameter("telemetry_level","basic");
  50. <?php } ?>
  51. <?php if(getenv("DISABLE_IPINFO")=="true"){ ?>
  52. s.setParameter("getIp_ispInfo",false);
  53. <?php } ?>
  54. <?php if(getenv("DISTANCE")){ ?>
  55. s.setParameter("getIp_ispInfo_distance","<?=getenv("DISTANCE") ?>");
  56. <?php } ?>
  57. //SERVER AUTO SELECTION
  58. function initServers(){
  59. if(SPEEDTEST_SERVERS.length==0){ //standalone installation
  60. //just make the UI visible
  61. I("loading").className="hidden";
  62. I("serverArea").style.display="none";
  63. I("testWrapper").className="visible";
  64. initUI();
  65. }else{ //multiple servers
  66. var noServersAvailable=function(){
  67. I("message").innerHTML="No servers available";
  68. }
  69. var runServerSelect=function(){
  70. s.selectServer(function(server){
  71. if(server!=null){ //at least 1 server is available
  72. I("loading").className="hidden"; //hide loading message
  73. //populate server list for manual selection
  74. for(var i=0;i<SPEEDTEST_SERVERS.length;i++){
  75. if(SPEEDTEST_SERVERS[i].pingT==-1) continue;
  76. var option=document.createElement("option");
  77. option.value=i;
  78. option.textContent=SPEEDTEST_SERVERS[i].name;
  79. if(SPEEDTEST_SERVERS[i]===server) option.selected=true;
  80. I("server").appendChild(option);
  81. }
  82. //show test UI
  83. I("testWrapper").className="visible";
  84. initUI();
  85. }else{ //no servers are available, the test cannot proceed
  86. noServersAvailable();
  87. }
  88. });
  89. }
  90. if(typeof SPEEDTEST_SERVERS === "string"){
  91. //need to fetch list of servers from specified URL
  92. s.loadServerList(SPEEDTEST_SERVERS,function(servers){
  93. if(servers==null){ //failed to load server list
  94. noServersAvailable();
  95. }else{ //server list loaded
  96. SPEEDTEST_SERVERS=servers;
  97. runServerSelect();
  98. }
  99. });
  100. }else{
  101. //hardcoded server list
  102. s.addTestPoints(SPEEDTEST_SERVERS);
  103. runServerSelect();
  104. }
  105. }
  106. }
  107. var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
  108. var dlColor="#6060AA",
  109. ulColor="#616161";
  110. var progColor=meterBk;
  111. //CODE FOR GAUGES
  112. function drawMeter(c,amount,bk,fg,progress,prog){
  113. var ctx=c.getContext("2d");
  114. var dp=window.devicePixelRatio||1;
  115. var cw=c.clientWidth*dp, ch=c.clientHeight*dp;
  116. var sizScale=ch*0.0055;
  117. if(c.width==cw&&c.height==ch){
  118. ctx.clearRect(0,0,cw,ch);
  119. }else{
  120. c.width=cw;
  121. c.height=ch;
  122. }
  123. ctx.beginPath();
  124. ctx.strokeStyle=bk;
  125. ctx.lineWidth=12*sizScale;
  126. ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,Math.PI*0.1);
  127. ctx.stroke();
  128. ctx.beginPath();
  129. ctx.strokeStyle=fg;
  130. ctx.lineWidth=12*sizScale;
  131. ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,amount*Math.PI*1.2-Math.PI*1.1);
  132. ctx.stroke();
  133. if(typeof progress !== "undefined"){
  134. ctx.fillStyle=prog;
  135. ctx.fillRect(c.width*0.3,c.height-16*sizScale,c.width*0.4*progress,4*sizScale);
  136. }
  137. }
  138. function mbpsToAmount(s){
  139. return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
  140. }
  141. function format(d){
  142. d=Number(d);
  143. if(d<10) return d.toFixed(2);
  144. if(d<100) return d.toFixed(1);
  145. return d.toFixed(0);
  146. }
  147. //UI CODE
  148. var uiData=null;
  149. function startStop(){
  150. if(s.getState()==3){
  151. //speed test is running, abort
  152. s.abort();
  153. data=null;
  154. I("startStopBtn").className="";
  155. I("server").disabled=false;
  156. initUI();
  157. }else{
  158. //test is not running, begin
  159. I("startStopBtn").className="running";
  160. I("shareArea").style.display="none";
  161. I("server").disabled=true;
  162. s.onupdate=function(data){
  163. uiData=data;
  164. };
  165. s.onend=function(aborted){
  166. I("startStopBtn").className="";
  167. I("server").disabled=false;
  168. updateUI(true);
  169. if(!aborted){
  170. //if testId is present, show sharing panel, otherwise do nothing
  171. try{
  172. var testId=uiData.testId;
  173. if(testId!=null){
  174. var shareURL=window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/results/?id="+testId;
  175. I("resultsImg").src=shareURL;
  176. I("resultsURL").value=shareURL;
  177. I("testId").innerHTML=testId;
  178. I("shareArea").style.display="";
  179. }
  180. }catch(e){}
  181. }
  182. };
  183. s.start();
  184. }
  185. }
  186. //this function reads the data sent back by the test and updates the UI
  187. function updateUI(forced){
  188. if(!forced&&s.getState()!=3) return;
  189. if(uiData==null) return;
  190. var status=uiData.testState;
  191. I("ip").textContent=uiData.clientIp;
  192. I("dlText").textContent=(status==1&&uiData.dlStatus==0)?"...":format(uiData.dlStatus);
  193. drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
  194. I("ulText").textContent=(status==3&&uiData.ulStatus==0)?"...":format(uiData.ulStatus);
  195. drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
  196. I("pingText").textContent=format(uiData.pingStatus);
  197. I("jitText").textContent=format(uiData.jitterStatus);
  198. }
  199. function oscillate(){
  200. return 1+0.02*Math.sin(Date.now()/100);
  201. }
  202. //update the UI every frame
  203. window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||(function(callback,element){setTimeout(callback,1000/60);});
  204. function frame(){
  205. requestAnimationFrame(frame);
  206. updateUI();
  207. }
  208. frame(); //start frame loop
  209. //function to (re)initialize UI
  210. function initUI(){
  211. drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
  212. drawMeter(I("ulMeter"),0,meterBk,ulColor,0);
  213. I("dlText").textContent="";
  214. I("ulText").textContent="";
  215. I("pingText").textContent="";
  216. I("jitText").textContent="";
  217. I("ip").textContent="";
  218. }
  219. </script>
  220. <style type="text/css">
  221. html,body{
  222. border:none; padding:0; margin:0;
  223. background:#FFFFFF;
  224. color:#202020;
  225. }
  226. body{
  227. text-align:center;
  228. font-family:"Roboto",sans-serif;
  229. }
  230. h1{
  231. color:#404040;
  232. }
  233. #loading{
  234. background-color:#FFFFFF;
  235. color:#404040;
  236. text-align:center;
  237. }
  238. span.loadCircle{
  239. display:inline-block;
  240. width:2em;
  241. height:2em;
  242. vertical-align:middle;
  243. background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAP1BMVEUAAAB2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZyFzwnAAAAFHRSTlMAEvRFvX406baecwbf0casimhSHyiwmqgAAADpSURBVHja7dbJbQMxAENRahnN5lkc//5rDRAkDeRgHszXgACJoKiIiIiIiIiIiIiIiIiIiIj4HHspsrpAVhdVVguzrA4OWc10WcEqpwKbnBo0OU1Q5NSpsoJFTgOecrrdEag85DRgktNqfoEdTjnd7hrEHMEJvmRUYJbTYk5Agy6nau6Abp5Cm7mDBtRdPi9gyKdU7w4p1fsLvyqs8hl4z9/w3n/Hmr9WoQ65lAU4d7lMYOz//QboRR5jBZibLMZdAR6O/Vfa1PlxNr3XdS3HzK/HVPRu/KnLs8iAOh993VpRRERERMT/fAN60wwWaVyWwAAAAABJRU5ErkJggg==');
  244. background-size:2em 2em;
  245. margin-right:0.5em;
  246. animation: spin 0.6s linear infinite;
  247. }
  248. @keyframes spin{
  249. 0%{transform:rotate(0deg);}
  250. 100%{transform:rotate(359deg);}
  251. }
  252. #startStopBtn{
  253. display:inline-block;
  254. margin:0 auto;
  255. color:#6060AA;
  256. background-color:rgba(0,0,0,0);
  257. border:0.15em solid #6060FF;
  258. border-radius:0.3em;
  259. transition:all 0.3s;
  260. box-sizing:border-box;
  261. width:8em; height:3em;
  262. line-height:2.7em;
  263. cursor:pointer;
  264. box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
  265. }
  266. #startStopBtn:hover{
  267. box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
  268. }
  269. #startStopBtn.running{
  270. background-color:#FF3030;
  271. border-color:#FF6060;
  272. color:#FFFFFF;
  273. }
  274. #startStopBtn:before{
  275. content:"Start";
  276. }
  277. #startStopBtn.running:before{
  278. content:"Abort";
  279. }
  280. #serverArea{
  281. margin-top:1em;
  282. }
  283. #server{
  284. font-size:1em;
  285. padding:0.2em;
  286. }
  287. #test{
  288. margin-top:2em;
  289. margin-bottom:12em;
  290. }
  291. div.testArea{
  292. display:inline-block;
  293. width:16em;
  294. height:12.5em;
  295. position:relative;
  296. box-sizing:border-box;
  297. }
  298. div.testArea2{
  299. display:inline-block;
  300. width:14em;
  301. height:7em;
  302. position:relative;
  303. box-sizing:border-box;
  304. text-align:center;
  305. }
  306. div.testArea div.testName{
  307. position:absolute;
  308. top:0.1em; left:0;
  309. width:100%;
  310. font-size:1.4em;
  311. z-index:9;
  312. }
  313. div.testArea2 div.testName{
  314. display:block;
  315. text-align:center;
  316. font-size:1.4em;
  317. }
  318. div.testArea div.meterText{
  319. position:absolute;
  320. bottom:1.55em; left:0;
  321. width:100%;
  322. font-size:2.5em;
  323. z-index:9;
  324. }
  325. div.testArea2 div.meterText{
  326. display:inline-block;
  327. font-size:2.5em;
  328. }
  329. div.meterText:empty:before{
  330. content:"0.00";
  331. }
  332. div.testArea div.unit{
  333. position:absolute;
  334. bottom:2em; left:0;
  335. width:100%;
  336. z-index:9;
  337. }
  338. div.testArea2 div.unit{
  339. display:inline-block;
  340. }
  341. div.testArea canvas{
  342. position:absolute;
  343. top:0; left:0; width:100%; height:100%;
  344. z-index:1;
  345. }
  346. div.testGroup{
  347. display:block;
  348. margin: 0 auto;
  349. }
  350. #shareArea{
  351. width:95%;
  352. max-width:40em;
  353. margin:0 auto;
  354. margin-top:2em;
  355. }
  356. #shareArea > *{
  357. display:block;
  358. width:100%;
  359. height:auto;
  360. margin: 0.25em 0;
  361. }
  362. #privacyPolicy{
  363. position:fixed;
  364. top:2em;
  365. bottom:2em;
  366. left:2em;
  367. right:2em;
  368. overflow-y:auto;
  369. width:auto;
  370. height:auto;
  371. box-shadow:0 0 3em 1em #000000;
  372. z-index:999999;
  373. text-align:left;
  374. background-color:#FFFFFF;
  375. padding:1em;
  376. }
  377. a.privacy{
  378. text-align:center;
  379. font-size:0.8em;
  380. color:#808080;
  381. padding: 0 3em;
  382. }
  383. div.closePrivacyPolicy {
  384. width: 100%;
  385. text-align: center;
  386. }
  387. div.closePrivacyPolicy a.privacy {
  388. padding: 1em 3em;
  389. }
  390. @media all and (max-width:40em){
  391. body{
  392. font-size:0.8em;
  393. }
  394. }
  395. div.visible{
  396. animation: fadeIn 0.4s;
  397. display:block;
  398. }
  399. div.hidden{
  400. animation: fadeOut 0.4s;
  401. display:none;
  402. }
  403. @keyframes fadeIn{
  404. 0%{
  405. opacity:0;
  406. }
  407. 100%{
  408. opacity:1;
  409. }
  410. }
  411. @keyframes fadeOut{
  412. 0%{
  413. display:block;
  414. opacity:1;
  415. }
  416. 100%{
  417. display:block;
  418. opacity:0;
  419. }
  420. }
  421. @media all and (prefers-color-scheme: dark){
  422. html,body,#loading{
  423. background:#202020;
  424. color:#F4F4F4;
  425. color-scheme:dark;
  426. }
  427. h1{
  428. color:#E0E0E0;
  429. }
  430. a{
  431. color:#9090FF;
  432. }
  433. #privacyPolicy{
  434. background:#000000;
  435. }
  436. #resultsImg{
  437. filter: invert(1);
  438. }
  439. }
  440. </style>
  441. <title><?= getenv('TITLE') ?: 'LibreSpeed' ?></title>
  442. </head>
  443. <body onload="initServers()">
  444. <h1><?= getenv('TITLE') ?: 'LibreSpeed' ?></h1>
  445. <div id="loading" class="visible">
  446. <p id="message"><span class="loadCircle"></span>Selecting a server...</p>
  447. </div>
  448. <div id="testWrapper" class="hidden">
  449. <div id="startStopBtn" onclick="startStop()"></div><br/>
  450. <?php if(getenv("TELEMETRY")=="true"){ ?>
  451. <a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
  452. <?php } ?>
  453. <div id="serverArea">
  454. Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
  455. </div>
  456. <div id="test">
  457. <div class="testGroup">
  458. <div class="testArea2">
  459. <div class="testName">Ping</div>
  460. <div id="pingText" class="meterText" style="color:#AA6060"></div>
  461. <div class="unit">ms</div>
  462. </div>
  463. <div class="testArea2">
  464. <div class="testName">Jitter</div>
  465. <div id="jitText" class="meterText" style="color:#AA6060"></div>
  466. <div class="unit">ms</div>
  467. </div>
  468. </div>
  469. <div class="testGroup">
  470. <div class="testArea">
  471. <div class="testName">Download</div>
  472. <canvas id="dlMeter" class="meter"></canvas>
  473. <div id="dlText" class="meterText"></div>
  474. <div class="unit">Mbit/s</div>
  475. </div>
  476. <div class="testArea">
  477. <div class="testName">Upload</div>
  478. <canvas id="ulMeter" class="meter"></canvas>
  479. <div id="ulText" class="meterText"></div>
  480. <div class="unit">Mbit/s</div>
  481. </div>
  482. </div>
  483. <div id="ipArea">
  484. <span id="ip"></span>
  485. </div>
  486. <div id="shareArea" style="display:none">
  487. <h3>Share results</h3>
  488. <p>Test ID: <span id="testId"></span></p>
  489. <input type="text" value="" id="resultsURL" readonly="readonly" onclick="this.select();this.focus();this.select();document.execCommand('copy');alert('Link copied')"/>
  490. <img src="" id="resultsImg" />
  491. </div>
  492. </div>
  493. <a href="https://github.com/librespeed/speedtest">Source code</a>
  494. </div>
  495. <div id="privacyPolicy" style="display:none">
  496. <h2>Privacy Policy</h2>
  497. <p>This HTML5 speed test server is configured with telemetry enabled.</p>
  498. <h4>What data we collect</h4>
  499. <p>
  500. At the end of the test, the following data is collected and stored:
  501. <ul>
  502. <li>Test ID</li>
  503. <li>Time of testing</li>
  504. <li>Test results (download and upload speed, ping and jitter)</li>
  505. <li>IP address</li>
  506. <li>ISP information</li>
  507. <li>Approximate location (inferred from IP address, not GPS)</li>
  508. <li>User agent and browser locale</li>
  509. <li>Test log (contains no personal information)</li>
  510. </ul>
  511. </p>
  512. <h4>How we use the data</h4>
  513. <p>
  514. Data collected through this service is used to:
  515. <ul>
  516. <li>Allow sharing of test results (sharable image for forums, etc.)</li>
  517. <li>To improve the service offered to you (for instance, to detect problems on our side)</li>
  518. </ul>
  519. No personal information is disclosed to third parties.
  520. </p>
  521. <h4>Your consent</h4>
  522. <p>
  523. By starting the test, you consent to the terms of this privacy policy.
  524. </p>
  525. <h4>Data removal</h4>
  526. <p>
  527. If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
  528. Contact this email address for all deletion requests: <a href="mailto:<?=getenv("EMAIL") ?>"><?=getenv("EMAIL") ?></a>.
  529. </p>
  530. <br/><br/>
  531. <div class="closePrivacyPolicy">
  532. <a class="privacy" href="#" onclick="I('privacyPolicy').style.display='none'">Close</a>
  533. </div>
  534. <br/>
  535. </div>
  536. </body>
  537. </html>