| Wiki Markup |
|---|
<p><style type="text/css"> |
...
.centre{ |
...
margin:0 auto; |
...
text-align:center; |
...
} .left{ |
...
text-align:left; |
...
} table#matrix{ /*border:1px solid #000; |
...
-moz-box-shadow: 3px 3px 5px 6px #ccc; |
...
-webkit-box-shadow: 3px 3px 5px 6px #ccc; |
...
box-shadow: 3px 3px 5px 6px #ccc;*/ |
...
border-collapse:collapse; |
...
margin:0 auto; |
...
} table#matrix tr td{ padding:15px 15px 0 15px; |
...
border-bottom:1px solid #005480; |
...
} table#matrix tr:nth-child(odd) td{ |
...
padding:0 15px 15px 15px; |
...
} table#matrix tr:nth-child(even) td{ |
...
border:none; |
...
vertical-align:bottom; |
...
} table#matrix tr td div{ margin:0 auto; |
...
} table#matrix .headingRow td{ min-width:70px; |
...
font-weight:bold; |
...
} table#matrix tr td p{ font-size:xx-small; |
...
text-align:center; |
...
margin:0; |
...
padding:2px 0 0 0; /* bit of padding to separate dot from text */ |
...
} .circle |
...
{ width: 15px; |
...
height: 15px; |
...
-moz-border-radius: 50px; |
...
-webkit-border-radius: 50px; |
...
border-radius: 50px; |
...
-moz-box-shadow: 0px 0px 15px 1px #ccc; |
...
-webkit-box-shadow: 0px 0px 15px 1px #ccc; |
...
box-shadow: 0px 0px 15x 1px #ccc; |
...
} .green{ |
...
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, green 0%, green 100%, green 95%); |
...
background-image: -webkit-radial-gradient(45px 45px, circle cover, green, green); |
...
background-image: radial-gradient(45px 45px 45deg, circle cover, green 0%, green 100%, green 95%); |
...
background-color:green; |
...
} .orange{ background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); |
...
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); |
...
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); |
...
background-color:orange; |
...
} .red{ |
...
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, orange 0%, red 100%, red 95%); |
...
background-image: -webkit-radial-gradient(45px 45px, circle cover, orange, red); |
...
background-image: radial-gradient(45px 45px 45deg, circle cover, orange 0%, red 100%, red 95%); |
...
background-color:red; |
...
} </style></p> |
...
<h1>Device Compatibility</h1> |
...
<p>There are 3 ways you might access the Blink Mobility Platform: using a Mobile App, Mobile Browser or Desktop Browser. See below for compatibility information for each method.</p> |
...
<p> </p> |
...
<p style="font-weight:bold;">Legend:</p> |
...
<div class="circle green"> |
...
<p style="padding-left:30px; width:200px;">Green - Full Support</p> |
...
</div> |
...
<div class="circle orange"> |
...
<p style="padding-left:30px; width:200px;">Orange - Partial Support</p> |
...
</div> |
...
<div class="circle red"> |
...
<p style="padding-left:30px; width:200px;">Red - No Support</p> |
...
</div> |
...
<table id="matrix" border="0"> |
...
<tbody> <tr> <td colspan="3" class="centre"> |
...
<h1>Mobile App Compatibility</h1> </td> </tr> <tr class="headingRow centre"> |
...
<td class="left">Top Features</td> |
...
<td class="centre">IOS Native App</td> |
...
<td class="centre">Android Native App</td> |
...
</tr> |
...
<tr> <td><!-- Top Features --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>HTML5 / CSS3</td> <td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- HTML5 / CSS3 --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>jQuery Mobile</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- jQuery Mobile --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Offline Data Storage</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> </tr> <tr> <td><!-- Offline Data Storage --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Forms</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Forms --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Location Services</td> <td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Location Services --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> <tr> <td>Signature Capture</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> </tr> <tr> <td><!-- Sig Capture --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Camera Access</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Camera Access --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Image Library / File Upload</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Image Lib / File Upload --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Image Annotation</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- IMage Annotation --></td> |
...
<td> <p>IOS 7+</p> |
...
</td> <td> <p> </p> |
...
</td> |
...
</tr> |
...
<tr> <td>Barcode Scanning</td> <td> <div class="circle orange"> </div> |
...
</td> <td> <div class="circle orange"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Barcode Scanning --></td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
</tbody> |
...
</table> |
...
<p> </p> |
...
<table id="matrix" border="0"> |
...
<tbody> <tr> <td colspan="7" class="centre"> |
...
<h1>Mobile Browser Compatibility</h1> </td> </tr> <tr class="headingRow centre"> <td class="left">Top Features</td> |
...
<td class="centre">Safari</td> |
...
<td class="centre">Chrome</td> |
...
<td>Android Browser</td> |
...
<td>Blackberry Browser</td> |
...
<td>Windows Phone 8 Browser</td> <td>Opera</td> </tr> <tr> <td><!-- top Features --></td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> <td> </td> |
...
</tr> |
...
<tr> <td>HTML5 / CSS3</td> <td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- HTML5 / CSS3 --></td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>jQuery Mobile</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- jQuery Mobile --></td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> <tr> <td>Offline Data Storage</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle red"> </div> |
...
</td> |
...
<td> <div class="circle red"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- Offline Data Storage --></td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </td> |
...
</tr> |
...
<tr> <td>Forms</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle green"> </div> </td> </tr> <tr> <td><!-- Forms --></td> <td> </td> |
...
<td> </td> |
...
<td> </td> |
...
<td> </ |
...
td> <td> </td> <td> </ |
...
td> </tr> <tr> <td>Location Services</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle |
...
green"> </div> |
...
</td> <td> <div class="circle green"> </div> |
...
</td> <td> <div class="circle orange"> </div> </td> <td> <div class="circle green"> </div> |
...
</td> </tr> <tr> <td><!-- Location Services --></td> <td> </ |
...
td> <td> </ |
...
td> <td> </ |
...
td> <td> </td> <td> </td> <td> </td> |
...
</tr> <tr> <td>Signature Capture</td> <td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle |
...
green"> </div> |
...
</td> |
...
<td> <div class="circle |
...
green"> </div> |
...
</td> <td> <div class="circle |
...
green"> </div> |
...
</td> |
...
<td> <div class="circle |
...
green"> </div> |
...
</td> </tr> <tr> <td><!-- Signature Capture --></td> |
...
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Camera Access</td> <td> <div class="circle orange"> </div> |
...
</td> |
...
<td> <div class="circle green"> </div> |
...
</td> |
...
<td> <div class="circle |
...
orange"> </div> |
...
</td> |
...
<td> <div class="circle |
...
orange"> </div> |
...
</td> |
...
<td> <div class="circle |
...
orange"> </div> |
...
</td> <td> <div class="circle |
...
orange"> </div> |
...
</td> |
...
</tr> |
...
<tr> <td><!-- |
...
Camera Access --></td> |
...
<td> <p>If supported by device</p> </td> <td> <p>If supported by device</p> </td> <td> <p>If supported by device</p> </td> <td> <p>Partial support</p> </td> <td> <p>If supported by device</p> </td> <td> <p>If supported by device</p> </td> </tr> <tr> <td>Image Library / File Upload</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> </tr> <tr> <td><!-- Image Lib / File Upload --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Image Annotation</td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!-- Image Annotation --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Barcode Scanning</td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!-- Barcode Scanning --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <p> </p> <!-- START Desktop Browser Compatibility Table --> <table id="matrix" border="0"> <tbody> <tr> <td colspan="9" class="centre"> <h1>Desktop Browser Compatibility</h1> </td> </tr> <tr class="headingRow centre"> <td class="left">Top Features</td> <td>Safari</td> <td>Chrome</td> <td>Firefox</td> <td>Opera</td> <td>IE10,11</td> <td>IE9</td> <td>IE8</td> <td>IE7</td> </tr> <tr> <td><!-- top Features --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>HTML5 / CSS3</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle orange"> </div> </td> <td> <div class="circle orange"> </div> </td> <td> <div class="circle orange"> </div> </td> </tr> <tr> <td><!-- HTML5 / CSS3 --> <p style="text-align:left;">As supported by each browser. <br /> Refer to <a href="http://html5test.com/">http://html5test.com/</a></p> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <p>As supported by browser</p> <p> </p> </td> <td> <p>As supported by browser</p> <p> </p> </td> <td> <p>As supported by browser</p> <p> </p> </td> </tr> <tr> <td>jQuery Mobile</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> </tr> <tr> <td><!--jQuery Mobile --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Offline Data Storage</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Offline Data Storage--></td> <td> <p>BICv2</p> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Forms</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Forms--></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Location Services</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Location Services --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Signature Capture</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Signature Capture--></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Camera Access</td> <td> <div class="circle red"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Camera Access--></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Image Library / File Upload</td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> <td> <div class="circle green"> </div> </td> </tr> <tr> <td><!--Image Lib / File Upload--></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Image Annotation</td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!--Image Annotation--></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>Barcode Scanning</td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> <td> <div class="circle red"> </div> </td> </tr> <tr> <td><!-- Barcode Scanning --></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> <p> </p> |