Last active
August 29, 2015 14:16
-
-
Save tomhodgins/e1fe630628d0e03cad45 to your computer and use it in GitHub Desktop.
Responsive Speed Testing (optimized, with cross-origin header set via PHP)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php header('X-Frame-Options: GOFORIT'); ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SpeedTester</title> | |
| <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui"> | |
| <style type="text/css"> | |
| * { box-sizing: border-box; -moz-box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: default; } | |
| html { font-size: 10pt; background: #ccc; -webkit-text-size-adjust: 100%; } | |
| body { margin: 0; padding: 15px; } | |
| iframe { overflow: auto; resize: both; min-height: 300px; width: auto; margin: 15px 15px 0 0; border: 1px solid rgba(0,0,0,.3); box-shadow: rgba(0,0,0,.1) 0 5px 15px; background: #fff; } | |
| #output { position: absolute; right: 15px; padding: .25em 0 0 0; font-size: 125%; font-weight: lighter; opacity: .7; transition: opacity .1s ease-in-out; } | |
| #output:hover, | |
| #output:focus { opacity: 1; } | |
| input[type=url], input[type=submit], input[type=button] { appearance: none; -webkit-appearance: none; padding: .25em .6em; margin: 0; background: #eaeaea; border: 1px solid #ccc; border-radius: .15em; color: #333; font-size: 125%; font-weight: bold; box-shadow: rgba(0,0,0,.2) 0 1px 2px; transition: all .2 ease-in-out; cursor: pointer; outline: none; text-decoration: none; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; -o-user-select: auto; user-select: default; cursor: pointer; } | |
| input + input { margin-left: .25em !important; } | |
| input:focus, input:hover { background: #fff; border-color: #eee; } | |
| input[type=url] { font-weight: normal; background: #fff; min-width: 220px; cursor: text; } | |
| input[type=url]:focus, | |
| input[type=url]:hover { border-color: #9cf; } | |
| input[type=button]:active { background: #ccc; border-color: #aaa; box-shadow: rgba(0,0,0,.2) 0 0 0; } | |
| @media (max-width: 760px) { | |
| input[type=url] { display: block; width: calc(100% - 140px); min-width: 0; float: left; } | |
| input[type=submit] { margin-right: 70px; } | |
| input[type=button] { margin-top: .5em; } | |
| input:nth-child(4) { margin-left: 0 !important; } | |
| } | |
| @media (max-width: 500px) { | |
| input[type=url] { min-width: 0; } | |
| input[type=button]:nth-child(n+4) { margin: .5em 0 0 0 !important; width: 10%; border-radius: 0; float: left; padding: .25em 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <span id="output" onclick="updateOutput()"></span> | |
| <input id="urlInput" type="url" autocapitalize="off" placeholder="http://" tabindex="1" autofocus> | |
| <input type="submit" value="Go" onclick="loadURL()"> | |
| <input type="button" value="1" onclick="resizeIframe('100px')"> | |
| <input type="button" value="2" onclick="resizeIframe('200px')"> | |
| <input type="button" value="3" onclick="resizeIframe('300px')"> | |
| <input type="button" value="4" onclick="resizeIframe('400px')"> | |
| <input type="button" value="5" onclick="resizeIframe('500px')"> | |
| <input type="button" value="6" onclick="resizeIframe('600px')"> | |
| <input type="button" value="7" onclick="resizeIframe('700px')"> | |
| <input type="button" value="8" onclick="resizeIframe('800px')"> | |
| <input type="button" value="9" onclick="resizeIframe('900px')"> | |
| <input type="button" value="∞" onclick="resizeIframe('100%')"> | |
| </nav> | |
| <iframe id="site"></iframe> | |
| <script type="text/javascript"> | |
| onload = function() { resizeIframe('100%'); } | |
| document.onkeypress = function(e) { e = e || window.event; | |
| var charCode = (typeof e.which == "number") ? e.which : e.keyCode; | |
| if (charCode >= 48 && charCode <= 58) { resizeIframe(String.fromCharCode(charCode) + '00px'); } /* keys 1-9 resize the iframe */ | |
| if (charCode == 48) { resizeIframe('100%'); } /* 0 key resizes the iframe */ | |
| if (charCode == 13) { loadURL(); } /* enter key loads url */ | |
| } | |
| var iframe = document.getElementById('site'); | |
| function resizeIframe(value) { iframe.style.width = value; updateOutput(); } | |
| function loadURL() { iframe.setAttribute('src', document.getElementById('urlInput').value); document.getElementById('urlInput').blur(); updateOutput(); } | |
| function updateOutput() { document.getElementById('output').innerHTML = iframe.offsetWidth + ' x ' + iframe.offsetHeight; } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can use this at http://staticresource.com/speedtest.php