Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

536 lines (490 sloc) 24.692 kB
<!DOCTYPE html>
<!-- Don't hate me for this ugly & non-cross browser code. I mean, seriously, it's ugly. -->
<meta charset=utf-8 />
<title>Web APIs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script>function $(query) { return document.querySelector(query)}</script>
<div id="demos">
<style>
* {-moz-box-sizing:border-box;margin:0;padding:0;box-sizing:border-box;}
#demos { font-size: 0; }
header {
font-size: 25px;
font-weight: bold;
padding-left: 30px;
color: black;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 60%, white), url(img/whitebg.png);
background-size: 100% 100%, auto auto;
background-position: top left;
height: 60px;
line-height: 60px;
vertical-align: middle;
border-bottom: 3px solid rgba(200,0,0,0.5)
}
button {margin: 10px auto; padding: 10px 30px; font-size: 20px; border-radius: 15px; display: block}
.wrapper {
width: 100%;
color: white;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3)), url(img/greybg.png);
border-top: 1px solid rgba(255,255,255,0.2);
padding: 15px;
font-size: 14px;
vertical-align: top;
overflow: hidden;
}
.wrapper.half {
xxwidth: 50%;
xxdisplay: inline-block;
}
</style>
<header>
Web APIs
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- CONNECTION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="connection" class="wrapper">
<span></span>
</div>
<style>
#connection {
height: 90px;
background-image: url(img/blackbg.png);
text-align: center;
}
#connection span {
height: 60px;
display: inline-block;
font-size: 24px; padding-left: 70px;
background-repeat: no-repeat;
vertical-align: middle;
line-height: 60px;
background-image: url(img/online.png), url(img/offline.png);
}
#connection span.online {background-size: 60px 60px, 0 0}
#connection span.offline {background-size: 0 0, 60px 60px}
</style>
<script>
function updateOnlineStatus(online) {
if (online) {
$("#connection span").className = "online";
$("#connection span").textContent = "Online";
$("#mapbutton").style.visibility = "visible";
} else {
$("#connection span").className = "offline";
$("#connection span").textContent = "Offline";
$("#mapbutton").style.visibility = "hidden";
}
}
document.body.addEventListener("offline", function () { updateOnlineStatus(false) }, false);
document.body.addEventListener("online", function () { updateOnlineStatus(true) }, false);
updateOnlineStatus(navigator.onLine);
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- BATTERY -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<style>
#battery .value {font-size: 44px}
#battery svg {
display: inline-block;
width: 150px;
vertical-align: middle;
}
#battery p {
display: inline-block;
width: 130px;
vertical-align: middle;
text-align: left;
}
#time {
display: none;
width: 100%;
font-size: 70px;
text-align: center;
margin: 160px 0 90px;
}
#battery:-moz-full-screen #time {
display: block;
}
#battery:-moz-full-screen {
box-shadow: inset 0 0 20px 5px black;
}
</style>
<div id="battery" class="wrapper">
<div id="time"></div>
<svg version="1.1" width="120px" height="66px" viewBox="0 0 400 220" >
<style>.st0{fill:url(#bottomTrimFront_1_);} .st1{opacity:0.3;fill:url(#glassHilight_1_);} .st2{fill:url(#topTrimFront_1_);} .st3{opacity:0.4;fill:url(#glass_1_);} .st4{fill:url(#top_1_);} .st5{fill:url(#BATTERYLEVEL_1_);} .st6{fill:url(#baseTrimBottom_1_);} .st7{fill:url(#tip_1_);} .st8{fill:url(#topTrim_x5F_Back_1_);} .st9{fill:url(#base_1_);}</style>
<linearGradient id="topTrim_x5F_Back_1_" gradientUnits="userSpaceOnUse" x1="-5475.0386" y1="4334.4043" x2="-5475.0386" y2="4497.5049" gradientTransform="matrix(1 0 0 1 5831.2637 -4298.5059)">
<stop offset="0.0056" style="stop-color:#B9BABC"/> <stop offset="0.2921" style="stop-color:#4D4D4D"/>
<stop offset="0.4598" style="stop-color:#838284"/>
<stop offset="0.6517" style="stop-color:#BDBCC0"/>
<stop offset="0.8652" style="stop-color:#4D4D4D"/>
<stop offset="1" style="stop-color:#A5A7A9"/>
<stop offset="1" style="stop-color:#C2C4C8"/>
</linearGradient>
<path id="topTrim_x5F_Back" class="st8" d="M364.189,35.771C362.52,13.799,360.088-0.02,357.402,0c-5.01,0-9.15,49.238-9.15,110
c0,60.771,4.106,109.99,9.15,110c2.695,0,5.146-13.77,6.797-35.781c-1.479-19.59-2.388-45.605-2.388-74.219
C361.812,81.392,362.72,55.361,364.189,35.771z"/>
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse" x1="-5472.1719" y1="4409.6172" x2="-5457.1304" y2="4406.3267" gradientTransform="matrix(1 0 0 1 5831.2637 -4298.5059)">
<stop offset="0" style="stop-color:#424242"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path id="top" class="st4" d="M364.189,184.219c1.489-19.59,2.412-45.645,2.412-74.219c0-28.579-0.913-54.668-2.402-74.229
c-1.479,19.59-2.388,45.62-2.388,74.229C361.812,138.613,362.72,164.629,364.189,184.219z"/>
<linearGradient id="baseTrimBottom_1_" gradientUnits="userSpaceOnUse" x1="16849.1152" y1="1777.8936" x2="16849.1152" y2="1940.9941" gradientTransform="matrix(-1 0 0 -1 16873.0703 1962.0059)">
<stop offset="0.0056" style="stop-color:#B9BABC"/>
<stop offset="0.2921" style="stop-color:#4D4D4D"/>
<stop offset="0.4598" style="stop-color:#838284"/>
<stop offset="0.6517" style="stop-color:#BDBCC0"/>
<stop offset="0.8652" style="stop-color:#4D4D4D"/>
<stop offset="1" style="stop-color:#A5A7A9"/>
<stop offset="1" style="stop-color:#C2C4C8"/>
</linearGradient>
<path id="baseTrimBottom" class="st6" d="M15.996,184.219C17.695,206.23,20.078,220,22.734,220c5.088-0.02,9.18-49.238,9.199-110
c0-60.762-4.102-110-9.199-110c-2.666,0-5.098,13.779-6.758,35.771c1.475,19.59,2.393,45.62,2.393,74.229
C18.379,138.574,17.461,164.629,15.996,184.219z"/>
<linearGradient id="base_1_" gradientUnits="userSpaceOnUse" x1="16852.3066" y1="1853.0547" x2="16867.3535" y2="1849.764" gradientTransform="matrix(-1 0 0 -1 16873.0703 1962.0059)">
<stop offset="0" style="stop-color:#424242"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path id="base" class="st9" d="M15.996,35.771c-1.494,19.58-2.441,45.62-2.441,74.229c0,28.613,0.898,54.629,2.441,74.219
c1.465-19.59,2.383-45.625,2.383-74.219C18.379,81.392,17.461,55.361,15.996,35.771z"/>
<linearGradient id="glass_1_" gradientUnits="userSpaceOnUse" x1="-5641.4585" y1="4288.3867" x2="-5640.5796" y2="4560.5229" gradientTransform="matrix(1 0 0 1 5831.2637 -4298.5059)">
<stop offset="0" style="stop-color:#D6D7D8"/>
<stop offset="0.1648" style="stop-color:#FFFFFF"/>
<stop offset="0.2708" style="stop-color:#F5F6F7"/>
<stop offset="0.4491" style="stop-color:#DBDDE0"/>
<stop offset="0.6767" style="stop-color:#B1B5BC"/>
<stop offset="0.7143" style="stop-color:#A9AEB5"/>
<stop offset="0.7156" style="stop-color:#AAAFB6"/>
<stop offset="0.7478" style="stop-color:#BBBEC2"/>
<stop offset="0.7877" style="stop-color:#C6C8CB"/>
<stop offset="0.8439" style="stop-color:#CDCED1"/>
<stop offset="1" style="stop-color:#CFD0D2"/>
<stop offset="1" style="stop-color:#A1A3A5"/>
</linearGradient>
<path id="glass" class="st3" d="M356.611,0.449L23.066,0.43c4.902,2.148,8.848,50.552,8.848,109.961
c0,56.074-3.457,102.402-8.047,109.16l332.705,0.039c-4.644-4.971-8.32-53.125-8.32-109.229
C348.252,50.981,352.188,4.521,356.611,0.449z"/>
<linearGradient id="BATTERYLEVEL_1_" gradientUnits="userSpaceOnUse" x1="-747.2979" y1="132.9482" x2="-745.8368" y2="350.5929" gradientTransform="matrix(1 0 0 1 871.7188 -131.8711)">
<stop offset="0" style="stop-color:#92E021"/>
<stop offset="0.15" style="stop-color:#39B54A"/>
<stop offset="0.2945" style="stop-color:#22B573"/>
<stop offset="0.5337" style="stop-color:#009245"/>
<stop offset="0.86" style="stop-color:#099B51"/>
<stop offset="1" style="stop-color:#006A45"/>
</linearGradient>
<rect id="BATTERYLEVEL" x="13.555" y="0.459" class="st5" width="360" height="219.092"/>
<radialGradient id="glassHilight_1_" cx="777.6758" cy="1757.4727" r="40.6776" gradientTransform="matrix(18.178 0 0 17.921 -13909.1602 -31435.916)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1348" style="stop-color:#F5F6F6"/>
<stop offset="0.3618" style="stop-color:#DBDCDE"/>
<stop offset="0.6513" style="stop-color:#B1B3B8"/>
<stop offset="0.8764" style="stop-color:#8B8F96"/>
<stop offset="1" style="stop-color:#CFD0D2"/>
<stop offset="1" style="stop-color:#696A6C"/>
</radialGradient>
<path id="glassHilight" class="st1" d="M29.102,58.74c-0.039-21.23,2.832-39.971,6.875-49.038H344.18
c-0.972,5.63-1.851,13.237-2.7,23.54c-1.011,12.695-1.768,27.847-2.178,44.316L29.102,58.74z"/>
<linearGradient id="bottomTrimFront_1_" gradientUnits="userSpaceOnUse" x1="120.1523" y1="-597.3672" x2="417.2356" y2="-636.2397" gradientTransform="matrix(-4.371139e-08 1 1 4.371139e-08 635 -185.9995)">
<stop offset="0" style="stop-color:#5A5A5A"/>
<stop offset="0.0589" style="stop-color:#4B4B4B"/>
<stop offset="0.1714" style="stop-color:#242424"/>
<stop offset="0.264" style="stop-color:#000000"/>
<stop offset="0.3273" style="stop-color:#454545"/>
<stop offset="0.3938" style="stop-color:#868687"/>
<stop offset="0.4498" style="stop-color:#B6B6B7"/>
<stop offset="0.4924" style="stop-color:#D4D4D5"/>
<stop offset="0.5165" style="stop-color:#DFDFE0"/>
<stop offset="0.5587" style="stop-color:#D5D7D9"/>
<stop offset="0.6299" style="stop-color:#BBC2C7"/>
<stop offset="0.7205" style="stop-color:#919FAA"/>
<stop offset="0.7802" style="stop-color:#718594"/>
<stop offset="0.8901" style="stop-color:#000000"/>
<stop offset="1" style="stop-color:#CFD0D2"/>
<stop offset="1" style="stop-color:#696A6C"/>
</linearGradient>
<path id="bottomTrimFront" class="st0" d="M9.18,220h13.555c-2.666,0-5.039-13.77-6.758-35.781
c-1.523-19.59-2.422-45.605-2.422-74.219c0-28.599,0.938-54.648,2.422-74.229C17.637,13.779,20.078,0,22.734,0H9.219
C4.121,0-0.02,49.238,0,110C0,170.762,4.121,220,9.18,220z"/>
<linearGradient id="tip_1_" gradientUnits="userSpaceOnUse" x1="-5441.4775" y1="4463.6826" x2="-5441.9463" y2="4324.0703" gradientTransform="matrix(1 0 0 1 5831.2637 -4298.5059)">
<stop offset="0" style="stop-color:#5A5A5A"/>
<stop offset="0.0589" style="stop-color:#4B4B4B"/>
<stop offset="0.1714" style="stop-color:#242424"/>
<stop offset="0.264" style="stop-color:#000000"/>
<stop offset="0.3273" style="stop-color:#454545"/>
<stop offset="0.3938" style="stop-color:#868687"/>
<stop offset="0.4498" style="stop-color:#B6B6B7"/>
<stop offset="0.4924" style="stop-color:#D4D4D5"/>
<stop offset="0.5165" style="stop-color:#DFDFE0"/>
<stop offset="0.5587" style="stop-color:#D5D7D9"/>
<stop offset="0.6299" style="stop-color:#BBC2C7"/>
<stop offset="0.7205" style="stop-color:#919FAA"/>
<stop offset="0.7802" style="stop-color:#718594"/>
<stop offset="0.8901" style="stop-color:#000000"/>
<stop offset="1" style="stop-color:#CFD0D2"/>
<stop offset="1" style="stop-color:#696A6C"/>
</linearGradient>
<path id="tip" class="st7" d="M379.238,158.027h14.482c3.457,0,6.279-3.047,6.25-6.797L400,72.749
c-0.02-3.76-2.832-6.787-6.279-6.787H379.39c0.503,13.477,0.771,28.379,0.771,44.038
C380.161,127.227,379.829,143.516,379.238,158.027z"/>
<linearGradient id="topTrimFront_1_" gradientUnits="userSpaceOnUse" x1="409.9277" y1="328.6064" x2="158.6166" y2="323.3555" gradientTransform="matrix(-4.371139e-08 1 -1 -4.371139e-08 694 -185.9995)">
<stop offset="0" style="stop-color:#5A5A5A"/>
<stop offset="0.0589" style="stop-color:#4B4B4B"/>
<stop offset="0.1714" style="stop-color:#242424"/>
<stop offset="0.264" style="stop-color:#000000"/>
<stop offset="0.3273" style="stop-color:#454545"/>
<stop offset="0.3938" style="stop-color:#868687"/>
<stop offset="0.4498" style="stop-color:#B6B6B7"/>
<stop offset="0.4924" style="stop-color:#D4D4D5"/>
<stop offset="0.5165" style="stop-color:#DFDFE0"/>
<stop offset="0.5587" style="stop-color:#D5D7D9"/>
<stop offset="0.6299" style="stop-color:#BBC2C7"/>
<stop offset="0.7205" style="stop-color:#919FAA"/>
<stop offset="0.7802" style="stop-color:#718594"/>
<stop offset="0.8901" style="stop-color:#000000"/>
<stop offset="1" style="stop-color:#CFD0D2"/>
<stop offset="1" style="stop-color:#696A6C"/>
</linearGradient>
<path id="topTrimFront" class="st2" d="M379.238,158.027c0.591-14.512,0.923-30.801,0.923-48.027
c0-15.659-0.269-30.552-0.762-44.038C377.969,27.119,374.741-0.01,370.962,0h-13.56c2.695-0.02,5.117,13.799,6.797,35.771
c1.479,19.551,2.402,45.64,2.402,74.229c0,28.594-0.913,54.629-2.402,74.219c-1.66,22.012-4.111,35.781-6.797,35.781h13.579
C374.619,220,377.749,194.727,379.238,158.027z"/>
</svg>
<p>
<span class="status"></span>
<span class="value"></span>
</p>
</div>
<script>
initBattery();
function initBattery() {
var b = navigator.battery;
if (b === null || b === undefined) { return; }
document.body.classList.add("battery");
b.addEventListener("chargingchange", updateBattery);
b.addEventListener("levelchange", updateBattery);
updateBattery();
}
function updateBattery() {
var b = navigator.battery;
if (!b) { console.log("Battery: Unexpected error!"); return; }
var s = $("#battery .status");
s.textContent = b.charging ? "Battery Charging" : "Battery Discharging";
var rect = $('#BATTERYLEVEL');
rect.setAttribute("width", ~~(b.level * 360));
$("#battery .value").textContent = ~~(b.level * 100) + "%";
}
var date = new Date();
$("#time").textContent = date.getHours() + ":" + date.getMinutes();
setInterval(function() {
var date = new Date();
$("#time").textContent = date.getHours() + ":" + date.getMinutes();
}, 60000);
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- PROXIMITY -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="wrapper">
<p id="proximity" style="font-size: 30px">Far…</p>
<script>
window.addEventListener("userproximity", function(a) {
var d = document.querySelector("#proximity");
if (a.near) d.innerHTML = "Near!"
else d.innerHTML = "Far…"
}, true);
</script>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- GPS -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<style>
#gps p {display: inline-block; vertical-align: top; text-align: left; width: 130px}
#gps span {font-size: 24px}
#map > div {height: 250px; border: 2px solid white}
#map.hidden {display: none}
</style>
<div id="gps" class="wrapper">
<img src="img/map.png" width="150">
<p>GPS Location<br>
<span class="value">connecting…</span><br>
</p>
<button id="mapbutton">View on a map »</button>
</div>
<div id="map" class="wrapper hidden"><div></div></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script><script>
var mapLoaded = false;
function geo_success(position) {
var latAbs = position.coords.latitude * 1000000, lonAbs = position.coords.longitude * 1000000, signlat = 1, signlon = 1;
var deglat = ((~~(latAbs / 1000000) * signlat) + '° ' + ~~( ((latAbs/1000000) - ~~(latAbs/1000000)) * 60) + '\' ' + ~~( ~~(((((latAbs/1000000) - ~~(latAbs/1000000)) * 60) - ~~(((latAbs/1000000) - ~~(latAbs/1000000)) * 60)) * 100000) *60/100000 ) + '"');
var deglon = ((~~(lonAbs / 1000000) * signlon) + '° ' + ~~( ((lonAbs/1000000) - ~~(lonAbs/1000000)) * 60) + '\' ' + ~~( ~~(((((lonAbs/1000000) - ~~(lonAbs/1000000)) * 60) - ~~(((lonAbs/1000000) - ~~(lonAbs/1000000)) * 60)) * 100000) *60/100000 ) + '"');
$("#gps .value").innerHTML = deglat + "<br>" + deglon;
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP };
$("#gps button").onclick = function() {
$("#map").classList.toggle("hidden");
if ($("#map").classList.contains("hidden")) {
$("#gps button").textContent = "Show map »";
} else {
$("#gps button").textContent = "Hide map »";
}
if (mapLoaded) return;
setTimeout(function() {
var map = new google.maps.Map($("#map > div"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here!" });
}, 1000);
}
}
navigator.geolocation.getCurrentPosition(geo_success, function(e) {console.log("geo error: " + e)});
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- NOTIFICATIONS -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="notification" class="half wrapper">
<div id="watch">
<img src="img/watch.png">
<img id="needle" src="img/needle.png">
</div>
</div>
<style>
#watch img { position: absolute; top: 0; left: 50%; margin-left: -70px}
#watch #needle {top:25px}
#watch {position: relative; }
#notification {border-right: 1px solid rgba(255,255,255,0.2);height: 200px;}
</style>
<script>
var time = 4, notification;
if (navigator.mozNotification) {
document.body.classList.add("notification");
notification = navigator.mozNotification.createNotification("Firefox is talking to you...", "IT'S TIME!!!!", null);
}
function setTime(h) {
var hand = $("#needle");
hand.style.MozTransform = "rotate(" + (30 * h) + "deg)";
hand.style.WebkitTransform = "rotate(" + (30 * h) + "deg)";
hand.style.transform = "rotate(" + (30 * h) + "deg)";
}
setTime(time);
var interval;
$("#watch").onclick = function() {
if (notification) {
setTimeout(function() {
if (interval) { clearInterval(interval); interval = null }
setTime(0);
notification.show();
}, 7000);
}
if (interval) { clearInterval(interval); interval = null; return; }
function tick() {
setTime(++time);
navigator.vibrate(50);
if (time == 12) {
time = 4; clearInterval(interval); interval = null;
navigator.vibrate(500);
setTimeout(function() { setTime(time); }, 4000);
}
}
interval = setInterval(tick, 1000); tick();
}
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ORIENTATION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="orientation" class="half wrapper">
<img id="phone" src="img/phone.png">
</div>
<script>
var v = $("#phone"); var scale, angle;
var classSet = false;
window.addEventListener("deviceorientation", function(e) {
if (!classSet) {
document.body.classList.add("orientation");
classSet = true;
}
angle = e.gamma + "deg"; scale = (e.beta + 30) / 60;
}, true);
window.setInterval(function() {
v.style.MozTransform = "rotate(" + angle + ") scale(" + scale + ")";
}, 100);
</script>
<style>
#phone { width: 50px;display:block;margin:50px auto; }
#orientation {height: 200px}
#orientation {border-left: 1px solid rgba(0,0,0,0.2);}
</style>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- VIBRATION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="vibration" class="wrapper">
<div class="button" val="500">vibrate</div>
<div class="button" val="1000" >1s</div>
<div class="button" val="2000">2s</div>
</div>
<script>
if (navigator.vibrate) document.body.classList.add("vibration");
var timeout;
function clear() {
var c = $("#vibration .checked");
if (c) c.classList.remove("checked");
if (timeout) {
clearTimeout(timeout);
timeout = null;
navigator.vibrate(0);
}
}
function vibrate(div) {
var val = div.getAttribute("val");
clear();
div.classList.add("checked");
navigator.vibrate(val);
timeout = setTimeout(clear, val);
}
$("#vibration").addEventListener("click", function(e) {
if (e.target.classList.contains("button")) { vibrate(e.target); }
}, true);
</script>
<style>
#vibration { height: 100px; text-align: center}
#vibration { font-size:0;}
#vibration .button { display: inline-block; width: 73px; height: 70px; color: black; border-top: 1px solid hsla(210,8%,5%,.45); border-bottom: 1px solid hsla(210,8%,5%,.45); border-right: 1px solid hsla(210,8%,5%,.45); background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.7)) padding-box; box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15); font-size: 18px; line-height: 70px; text-align: center; }
#vibration .checked { border-color: hsla(210,8%,5%,.6); color: white; background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); }
#vibration .button:first-of-type { border-left: 1px solid hsla(210,8%,5%,.45); border-radius: 6px 0 0 6px; }
#vibration .button:last-of-type { border-radius: 0 6px 6px 0; }
</style>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- CAMERA PREVIEW -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="wrapper">
<video id="webcam" width="100%"></video>
</div>
<script>
function webcam(stream) {
$("#webcam").src=window.URL.createObjectURL(stream);
$("#webcam").play()
}
navigator.mozGetUserMedia({video:true}, webcam, function(){});
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- FULLSCREEN -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="fullscreen" class="wrapper">
<button onclick="fullScreen()">FullScreen»</button>
</div>
<script>
function freeze(e) {
e.preventDefault();
}
window.addEventListener("mozfullscreenchange", function() {
if (document.mozFullScreenElement) {
$("#battery").addEventListener("touchstart", freeze, true);
$("#battery").addEventListener("touchmove", freeze, true);
} else {
$("#battery").removeEventListener("touchstart", freeze, true);
$("#battery").removeEventListener("touchmove", freeze, true);
}
}, true);
function fullScreen() {
$('#battery').mozRequestFullScreen();
}
</script>
</div>
Jump to Line
Something went wrong with that request. Please try again.