alrra/index.html

## index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Feature detection test for the Proximity API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .no-js .content,
        .feature .no,
        .no-feature .yes,
        .no-feature .example {
            display: none;
        }
    </style>
    <script>
        (function (window, undefined) {

            var docElement = document.documentElement;
            var timeout;
            var timeoutTime = 300;

            function addClass(className) {
                docElement.className = docElement.className + ' ' + className;
            }

            function advertiseSupport(event) {
                addClass('feature');
                clearTimeout(timeout);
                window.removeEventListener('deviceproximity', xyz);
            }

            docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');

            if ( 'ondeviceproximity' in window
                    && 'onuserproximity' in window ) {

                window.addEventListener('deviceproximity', advertiseSupport);

                timeout = setTimeout(function() {
                    addClass('no-feature');
                    window.removeEventListener('deviceproximity', advertiseSupport);
                }, timeoutTime);

            } else {
                addClass('no-feature');
            }

        })(window);
    </script>
</head>
<body>
    <noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
    <div class="content">
        <h1 class="yes">yap, it has support :D</h1>
        <h1 class="no">nope, it doesn't have support :(</h1>
        <div class="example">
            e.g.:

            <ul>
                <li>The hosting device has sensed a nearby object: <strong id="near">undefined</strong></li>
                <li>
                    <div>The distance between the hosting device and a nearby object is: <strong id="value">undefined</strong> cm</div>
                    <div>(value can range between: <strong id="min">undefined</strong> - <strong id="max">undefined</strong> cm)</div>
                </li>
            </ul>

        </div>
    </div>
    <script>
        (function (window, undefined) {

            function updateValue(id, value) {
                document.getElementById(id).innerHTML = value;
            }

            if ( 'ondeviceproximity' in window
                    && 'onuserproximity' in window ) {

                window.addEventListener('deviceproximity', function (event) {
                    updateValue('value', event.value);
                    updateValue('max', event.max);
                    updateValue('min', event.min);
                });

                window.addEventListener('userproximity', function (event) {
                    updateValue('near', event.near);
                });

            }

         })(window);
    </script>
</body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>Feature detection test for the Proximity API</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.no-js .content,
	.feature .no,
	.no-feature .yes,
	.no-feature .example {
	display: none;
	}
	</style>
	<script>
	(function (window, undefined) {

	var docElement = document.documentElement;
	var timeout;
	var timeoutTime = 300;

	function addClass(className) {
	docElement.className = docElement.className + ' ' + className;
	}

	function advertiseSupport(event) {
	addClass('feature');
	clearTimeout(timeout);
	window.removeEventListener('deviceproximity', xyz);
	}

	docElement.className = docElement.className.replace(/(^\|\s)no-js(\s\|$)/, '$1js$2');

	if ( 'ondeviceproximity' in window
	&& 'onuserproximity' in window ) {

	window.addEventListener('deviceproximity', advertiseSupport);

	timeout = setTimeout(function() {
	addClass('no-feature');
	window.removeEventListener('deviceproximity', advertiseSupport);
	}, timeoutTime);

	} else {
	addClass('no-feature');
	}

	})(window);
	</script>
	</head>
	<body>
	<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
	<div class="content">
	<h1 class="yes">yap, it has support :D</h1>
	<h1 class="no">nope, it doesn't have support :(</h1>
	<div class="example">
	e.g.:

	<ul>
	<li>The hosting device has sensed a nearby object: <strong id="near">undefined</strong></li>
	<li>
	<div>The distance between the hosting device and a nearby object is: <strong id="value">undefined</strong> cm</div>
	<div>(value can range between: <strong id="min">undefined</strong> - <strong id="max">undefined</strong> cm)</div>
	</li>
	</ul>

	</div>
	</div>
	<script>
	(function (window, undefined) {

	function updateValue(id, value) {
	document.getElementById(id).innerHTML = value;
	}

	if ( 'ondeviceproximity' in window
	&& 'onuserproximity' in window ) {

	window.addEventListener('deviceproximity', function (event) {
	updateValue('value', event.value);
	updateValue('max', event.max);
	updateValue('min', event.min);
	});

	window.addEventListener('userproximity', function (event) {
	updateValue('near', event.near);
	});

	}

	})(window);
	</script>
	</body>
	</html>