github_mirrors/ua-parser-js
3
0
Fork 1
mirror of https://github.com/faisalman/ua-parser-js.git synced 2025-09-27 16:08:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

prettify

Browse Source
This commit is contained in:
Faisalman 2012-08-30 03:26:28 +07:00
parent 81036132f4
commit be7e60a0b1
1 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -1,19 +1,18 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>UA-Parser.js - JavaScript-based User-Agent Parser</title> <title>UA-Parser.js - Lightweight JavaScript-based User Agent String Parser</title>
<meta name="author" content="Faisalman" /> <meta name="author" content="Faisalman" />
<meta name="description" content="Lightweight JavaScript-based user-agent parser" /> <meta name="description" content="UA-Parser.js is a lightweight JavaScript-based user-agent string parser library" />
<meta name="keywords" content="user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" /> <meta name="keywords" content="user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Varela|Varela+Round' rel='stylesheet' type='text/css'>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, input, select { html, input, select {
font: 14px/20px Georgia, Helvetica, Ubuntu, Arial, sans-serif; font: 14px/20px Varela, Georgia, Helvetica, Ubuntu, Arial, sans-serif;
background: #f0f0f0;
color: #333; color: #333;
} }
body { body {
@ -27,12 +26,16 @@
padding: 20px 0 0; padding: 20px 0 0;
position: relative; position: relative;
} }
h1 a {
text-decoration: none;
color: #333;
}
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 4em; font-size: 4em;
} }
h1, h2, th, .ua { h1, h2, th, .ua {
font-family: 'Dancing Script', Helvetica, Ubuntu, Arial, sans-serif; font-family: 'Varela Round', Helvetica, Ubuntu, Arial, sans-serif;
} }
.share { .share {
position: absolute; position: absolute;
@ -44,7 +47,7 @@
pre { pre {
margin: 0 0 20px; margin: 0 0 20px;
padding: 10px; padding: 10px;
background: #ccc; background: #f0f0f0;
white-space: pre-wrap; white-space: pre-wrap;
overflow: auto; overflow: auto;
} }
@ -57,8 +60,8 @@
font-size: 2em; font-size: 2em;
} }
th, td { th, td {
border-left: 1px solid #ccc; border-left: 1px solid #fff;
border-top: 1px solid #ccc; border-top: 1px solid #fff;
min-width: 100px; min-width: 100px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@ -67,7 +70,7 @@
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
th:last-child, td:last-child { th:last-child, td:last-child {
border-right: 1px solid #ccc; border-right: 1px solid #fff;
} }
td { td {
color: red; color: red;
@ -76,17 +79,21 @@
color: #777; color: #777;
width: 100%; width: 100%;
} }
input { select, input {
border: 1px solid #ccc; border: 1px solid #ccc;
height: 30px; height: 30px;
box-shadow: inset 0 0 10px #ccc; box-shadow: inset 0 0 10px #ccc;
} }
hr { hr {
border: 0;
margin: 20px 0; margin: 20px 0;
} }
p { p {
margin: 10px 0; margin: 10px 0;
} }
pre, code {
font-family: 'Ubuntu Mono', monospace;
}
.ua { .ua {
font-size: 1.5em; font-size: 1.5em;
} }
@ -96,8 +103,8 @@
</head> </head>
<body> <body>
<header> <header>
<h1>UA-Parser.js</h1> <h1><a href="">UA-Parser.js</a></h1>
<h2>JavaScript-based User-Agent Parser</h2> <h2>Lightweight JavaScript-based User-Agent String Parser</h2>
<hr /> <hr />
<p class="share"> <p class="share">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="fyzlman">Tweet</a> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="fyzlman">Tweet</a>
@ -128,18 +135,20 @@
</table> </table>
</section> </section>
<section> <section>
<p><span class="ua">Select</span> a user-agent string to be tested:</p> <p>Wanna test other UA string? Select a user-agent string to be tested:</p>
<select> <select>
<option>Pick one</option> <option>Pick one</option>
</select> </select>
<p>or <span class="ua">Enter</span> any user-agent string you want to test here:</p> <p>Wanna test more? Enter any user-agent string you want to test here:</p>
<input type="text" /> <input type="text" />
</section> </section>
<footer> <footer>
<hr /> <hr />
<p> <p>
<span class="ua">UA-Parser.js</span> &copy; 2012 Faisalman. Licensed under GPLv2 & MIT. Download & Fork @ <span class="ua">UA-Parser.js</span> &copy; 2012 Faisalman. <br/>
<a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a> Dual licensed under GPLv2 & MIT license<br/>
Source: <a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a><br/>
Node.js package: <a href="https://npmjs.org/package/ua-parser-js">https://npmjs.org/package/ua-parser-js</a>
</p> </p>
</footer> </footer>
<script> <script>
@ -147,9 +156,18 @@
var sel = document.getElementsByTagName('select')[0]; var sel = document.getElementsByTagName('select')[0];
var txt = document.getElementsByTagName('input')[0]; var txt = document.getElementsByTagName('input')[0];
var parser = new UAParser(); var parser = new UAParser();
var fill = function(el, prop){
if(prop !== undefined){
el.innerHTML = prop;
el.style.color = "red";
} else {
el.innerHTML = "No data";
el.style.color = "#aaa";
}
}
for(var i = 0; i < uaExampleList.length; i++){ for(var i = 0; i < uaExampleList.length; i++){
var opt = document.createElement('option'); var opt = document.createElement('option');
opt.innerText = uaExampleList[i]; opt.innerHTML = uaExampleList[i];
sel.appendChild(opt); sel.appendChild(opt);
} }
var fillTable = function(uastring){ var fillTable = function(uastring){
@ -159,15 +177,15 @@
var os = parser.getOS(); var os = parser.getOS();
var device = parser.getDevice(); var device = parser.getDevice();
var tbl = document.getElementsByTagName('td'); var tbl = document.getElementsByTagName('td');
tbl[0].innerText = browser.name; fill(tbl[0], browser.name);
tbl[1].innerText = engine.name; fill(tbl[1], engine.name);
tbl[2].innerText = os.name; fill(tbl[2], os.name);
tbl[3].innerText = device.name; fill(tbl[3], device.name);
tbl[4].innerText = browser.version; fill(tbl[4], browser.version);
tbl[5].innerText = engine.version; fill(tbl[5], engine.version);
tbl[6].innerText = os.version; fill(tbl[6], os.version);
tbl[7].innerText = device.version; fill(tbl[7], device.version);
pre.innerHTML = 'Result for <strong>' + (uastring ? uastring.replace(/</g,'&lt;') : 'your browser\'s user-agent string') + ' :</strong>'; pre.innerHTML = 'Result for <span style="color:red">' + (uastring ? uastring.replace(/</g,'&lt;') : 'your browser\'s user-agent string') + ' :</span>';
} }
fillTable(); fillTable();
sel.addEventListener('change', function(){ sel.addEventListener('change', function(){