<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Browser parameters</title>
        
        <link rel="stylesheet" type="text/css" media="all" href="style/browserinfo.css" />
        
        <script type="text/javascript">
            var require = {
                "priority": ['jquery-1.6.1.min']
            };
        </script>
        <script type="text/javascript" data-main="script/browserinfo" src="script/require.js"></script>
        <script type="text/javascript" src="script/modernizr-2.0.4.js"></script>
    </head>
    <body>
        <section class="container">
            <h1>Browser Parameters</h1>
        
            <h2>Measurements</h2>
        
            <p>A list of measurements taken from your browser that will be used by JS, CSS etc.</p>
        
            <table>
                <thead>
                    <tr>
                        <th scope="col">Measurement</th>
                        <th scope="col">Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="useragent-name">User agent</td>
                        <td id="useragent-value"><?= $_SERVER['HTTP_USER_AGENT'] ?></td>
                    </tr>
                    <tr>
                        <td id="viewportwidth-name">Viewport width</td>
                        <td id="viewportwidth-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="viewportmaxwidth-name">Viewport max width</td>
                        <td id="viewportmaxwidth-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="viewportminwidth-name">Viewport min width</td>
                        <td id="viewportminwidth-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="viewportheight-name">Viewport height</td>
                        <td id="viewportheight-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="viewportmaxheight-name">Viewport max height</td>
                        <td id="viewportmaxheight-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="viewportminheight-name">Viewport min height</td>
                        <td id="viewportminheight-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="screenwidth-name">Screen width</td>
                        <td id="screenwidth-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="screenheight-name">Screen height</td>
                        <td id="screenheight-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="aspectratio-name">Aspect ratio</td>
                        <td id="aspectratio-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="pixelratio-name">Pixel ratio</td>
                        <td id="pixelratio-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="colourdepth-name">Colour depth</td>
                        <td id="colourdepth-value">Unavailable</td>
                    </tr>
                    <tr>
                        <td id="orientation-name">Orientation</td>
                        <td id="orientation-value">Unavailable</td>
                    </tr>
                </tbody>
            </table>
        
            <h2>Features</h2>
        
            <p>Here is a list of the features supported by your current browser. It's based on the excellent open source JS library <a href="http://www.modernizr.com">Modernizr</a> and so there are some features that <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">cannot be detected</a> but it should give you a pretty good idea.</p>
        
            <table>
                <thead>
                    <tr>
                        <th scope="col">Feature</th>
                        <th scope="col">Available?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="flexbox-name">flexbox</td>
                        <td id="flexbox-availability"></td>
                    </tr>
                    <tr>
                        <td id="canvas-name">canvas</td>
                        <td id="canvas-availability"></td>
                    </tr>
                    <tr>
                        <td id="canvastext-name">canvastext</td>
                        <td id="canvastext-availability"></td>
                    </tr>
                    <tr>
                        <td id="webgl-name">webgl</td>
                        <td id="webgl-availability"></td>
                    </tr>
                    <tr>
                        <td id="touch-name">touch</td>
                        <td id="touch-availability"></td>
                    </tr>
                    <tr>
                        <td id="geolocation-name">geolocation</td>
                        <td id="geolocation-availability"></td>
                    </tr>
                    <tr>
                        <td id="postmessage-name">postmessage</td>
                        <td id="postmessage-availability"></td>
                    </tr>
                    <tr>
                        <td id="websqldatabase-name">websqldatabase</td>
                        <td id="websqldatabase-availability"></td>
                    </tr>
                    <tr>
                        <td id="indexeddb-name">indexeddb</td>
                        <td id="indexeddb-availability"></td>
                    </tr>
                    <tr>
                        <td id="hashchange-name">hashchange</td>
                        <td id="hashchange-availability"></td>
                    </tr>
                    <tr>
                        <td id="history-name">history</td>
                        <td id="history-availability"></td>
                    </tr>
                    <tr>
                        <td id="draganddrop-name">draganddrop</td>
                        <td id="draganddrop-availability"></td>
                    </tr>
                    <tr>
                        <td id="websockets-name">websockets</td>
                        <td id="websockets-availability"></td>
                    </tr>
                    <tr>
                        <td id="rgba-name">rgba</td>
                        <td id="rgba-availability"></td>
                    </tr>
                    <tr>
                        <td id="hsla-name">hsla</td>
                        <td id="hsla-availability"></td>
                    </tr>
                    <tr>
                        <td id="multiplebgs-name">multiplebgs</td>
                        <td id="multiplebgs-availability"></td>
                    </tr>
                    <tr>
                        <td id="backgroundsize-name">backgroundsize</td>
                        <td id="backgroundsize-availability"></td>
                    </tr>
                    <tr>
                        <td id="borderimage-name">borderimage</td>
                        <td id="borderimage-availability"></td>
                    </tr>
                    <tr>
                        <td id="borderradius-name">borderradius</td>
                        <td id="borderradius-availability"></td>
                    </tr>
                    <tr>
                        <td id="boxshadow-name">boxshadow</td>
                        <td id="boxshadow-availability"></td>
                    </tr>
                    <tr>
                        <td id="textshadow-name">textshadow</td>
                        <td id="textshadow-availability"></td>
                    </tr>
                    <tr>
                        <td id="opacity-name">opacity</td>
                        <td id="opacity-availability"></td>
                    </tr>
                    <tr>
                        <td id="cssanimations-name">cssanimations</td>
                        <td id="cssanimations-availability"></td>
                    </tr>
                    <tr>
                        <td id="csscolumns-name">csscolumns</td>
                        <td id="csscolumns-availability"></td>
                    </tr>
                    <tr>
                        <td id="cssgradients-name">cssgradients</td>
                        <td id="cssgradients-availability"></td>
                    </tr>
                    <tr>
                        <td id="cssreflections-name">cssreflections</td>
                        <td id="cssreflections-availability"></td>
                    </tr>
                    <tr>
                        <td id="csstransforms-name">csstransforms</td>
                        <td id="csstransforms-availability"></td>
                    </tr>
                    <tr>
                        <td id="csstransforms3d-name">csstransforms3d</td>
                        <td id="csstransforms3d-availability"></td>
                    </tr>
                    <tr>
                        <td id="csstransitions-name">csstransitions</td>
                        <td id="csstransitions-availability"></td>
                    </tr>
                    <tr>
                        <td id="fontface-name">fontface</td>
                        <td id="fontface-availability"></td>
                    </tr>
                    <tr>
                        <td id="generatedcontent-name">generatedcontent</td>
                        <td id="generatedcontent-availability"></td>
                    </tr>
                    <tr>
                        <td id="video-name">video</td>
                        <td id="video-availability"></td>
                    </tr>
                    <tr>
                        <td id="audio-name">audio</td>
                        <td id="audio-availability"></td>
                    </tr>
                    <tr>
                        <td id="localstorage-name">localstorage</td>
                        <td id="localstorage-availability"></td>
                    </tr>
                    <tr>
                        <td id="sessionstorage-name">sessionstorage</td>
                        <td id="sessionstorage-availability"></td>
                    </tr>
                    <tr>
                        <td id="webworkers-name">webworkers</td>
                        <td id="webworkers-availability"></td>
                    </tr>
                    <tr>
                        <td id="applicationcache-name">applicationcache</td>
                        <td id="applicationcache-availability"></td>
                    </tr>
                    <tr>
                        <td id="svg-name">svg</td>
                        <td id="svg-availability"></td>
                    </tr>
                    <tr>
                        <td id="inlinesvg-name">inlinesvg</td>
                        <td id="inlinesvg-availability"></td>
                    </tr>
                    <tr>
                        <td id="smil-name">smil</td>
                        <td id="smil-availability"></td>
                    </tr>
                    <tr>
                        <td id="svgclippaths-name">svgclippaths</td>
                        <td id="svgclippaths-availability"></td>
                    </tr>
                </tbody>
            </table>
        </section
        
    </body>
</html>