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

Update script to latest v2.0.0.beta-3

Browse Source
This commit is contained in:
Faisal Salman 2024-06-18 15:12:57 +07:00
parent 405b45183f
commit 0583464041
4 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
css/style.css
View File

@ -15,75 +15,89 @@ color: rgba(255, 255, 255, 0.3);
margin: 3rem 0 2rem; margin: 3rem 0 2rem;
} }
.hidden.menu { .hidden.menu {
display: none; display: none;
}
.masthead.segment {
min-height: 300px;
}
.masthead a h1 {
color: #fff;
font-weight: bold;
font-size: 5rem;
}
.masthead h2 {
font-weight: normal;
margin: 0 0 2em 0;
} }
.masthead.inverted.segment { .masthead.inverted.segment {
background-color: #6435c9; background-color: #6435c9;
padding: 0;
} }
.masthead.segment { .masthead.segment {
min-height: 600px; min-height: 600px;
padding: 1em 0em; padding: 1em 0em;
} }
.masthead .ui.menu .ui.button { .masthead .ui.menu .ui.button {
margin-left: 0.5em; margin-left: 0.5em;
} }
.masthead h2.ui.header { .masthead h3 {
margin-top: 3em; background-color: black;
font-size: 5rem; padding: 5em 0;
font-size: 5rem;
} }
.masthead h1 {
font-size: 1.8rem; .masthead .divider {
font-weight: normal; padding: 3em;
margin: 0.5em 0 2em 0; margin: 0;
} }
.masthead h1 a {
color: #fff; .masthead .ui.massive.buttons {
font-weight: bold; margin: 2rem 0 5rem;
} }
.instagram.masthead.inverted.segment { .instagram.masthead.inverted.segment {
background: #6435c9; background: #6435c9;
background-image: linear-gradient(to left top, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3); background-image: linear-gradient(to left top, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3);
box-shadow: 0px 3px 10px rgba(0,0,0,.25); box-shadow: 0px 3px 10px rgba(0,0,0,.25);
} }
.instagram.footer.inverted.segment { .instagram.footer.inverted.segment {
background: #6435c9; background: #6435c9;
background-image: linear-gradient(to right bottom, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3); background-image: linear-gradient(to right bottom, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3);
box-shadow: 0px 3px 10px rgba(0,0,0,.25); box-shadow: 0px 3px 10px rgba(0,0,0,.25);
} }
.ui.image.illustration { .ui.image.illustration {
bottom: -1em; width:1000px;
width:1000px;
} }
.ui.vertical.stripe { .ui.vertical.stripe {
padding: 8em 0em; padding: 8em 0em;
} }
.ui.vertical.stripe h3 { .ui.vertical.stripe h3 {
font-size: 2em; font-size: 2em;
} }
.ui.vertical.stripe .button + h3, .ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 { .ui.vertical.stripe p + h3 {
margin-top: 3em; margin-top: 3em;
} }
.ui.vertical.stripe .floated.image { .ui.vertical.stripe .floated.image {
clear: both; clear: both;
} }
.ui.vertical.stripe p { .ui.vertical.stripe p {
font-size: 1.33em; font-size: 1.33em;
} }
.ui.vertical.stripe .horizontal.divider { .ui.vertical.stripe .horizontal.divider {
margin: 3em 0em; margin: 3em 0em;
} }
.quote.stripe.segment { .quote.stripe.segment {
padding: 0em; padding: 0em;
} }
.quote.stripe.segment .grid .column { .quote.stripe.segment .grid .column {
padding-top: 5em; padding-top: 5em;
padding-bottom: 5em; padding-bottom: 5em;
} }
.footer.segment { .footer.segment {
padding: 5em 0em; padding: 5em 0em;
} }
.footer p { .footer p {
@ -91,7 +105,7 @@ padding: 5em 0em;
} }
.secondary.pointing.menu .toc.item { .secondary.pointing.menu .toc.item {
display: none; display: none;
} }
@media only screen and (max-width: 700px) { @media only screen and (max-width: 700px) {
@ -105,21 +119,6 @@ display: none;
.secondary.pointing.menu .toc.item { .secondary.pointing.menu .toc.item {
display: block; display: block;
} }
.masthead.segment {
min-height: 300px;
}
.masthead .ui.massive.label {
font-size: 3rem;
}
.masthead h1.ui.header {
font-size: 1.5em;
margin-top: 3em;
}
.masthead h2 {
margin-top: 1em;
font-size: 0.75em;
font-weight: normal;
}
#demo-result > .row > .column, #demo-result > .row > .column,
#showcase .ui.stackable.grid > .row > .column { #showcase .ui.stackable.grid > .row > .column {
width: 33.3% !important; width: 33.3% !important;

33
index.html
View File

@ -8,12 +8,19 @@
<meta name="keywords" <meta name="keywords"
content="browser detection, user-agent, javascript, detect os, mobile, tablet, detect device, cpu, javascript, nodejs, jquery, typescript, client hints, bots, iphone, ipad, android" /> content="browser detection, user-agent, javascript, detect os, mobile, tablet, detect device, cpu, javascript, nodejs, jquery, typescript, client hints, bots, iphone, ipad, android" />
<meta name="description" content="UAParser.js is the most comprehensive, compact, & up-to-date isomorphic JavaScript library to detect visitor's Browser, Engine, OS, CPU, and Device type/model."> <meta name="description" content="UAParser.js is the most comprehensive, compact, & up-to-date isomorphic JavaScript library to detect visitor's Browser, Engine, OS, CPU, and Device type/model.">
<meta name="application-name" content="UAParser.js">
<meta property="og:title" content="UAParser.js">
<meta property="og:url" content="https://uaparser.dev/">
<meta property="og:image" content="https://uaparser.dev/images/uap-header.png">
<meta property="og:type" content="website">
<meta property="og:description" content="Abstract away the hassle of user-agent detection">
<meta property="og:locale" content="en_US">
<title>UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent & Client Hints data using JavaScript. Supports browser & node.js environment. Also available as jQuery plugin & TypeScript-ready development.</title> <title>UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent & Client Hints data using JavaScript. Supports browser & node.js environment. Also available as jQuery plugin & TypeScript-ready development.</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/srcery.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/srcery.min.css">
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="stylesheet" type="text/css" href="semantic-ui/semantic.css"> <link rel="stylesheet" type="text/css" href="semantic-ui/semantic.css">
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="images/uap-logo.png">
<script src="js/jquery-3.6.0.min.js"></script> <script src="js/jquery-3.6.0.min.js"></script>
<script src="semantic-ui/semantic.js"></script> <script src="semantic-ui/semantic.js"></script>
<script src="js/clipboard.min.js"></script> <script src="js/clipboard.min.js"></script>
@ -28,15 +35,15 @@
<body> <body>
<div class="pusher"> <div class="pusher">
<div class="ui inverted instagram vertical masthead center aligned segment"> <div class="ui inverted instagram vertical masthead center aligned segment">
<h2 class="ui inverted header"> <h3>
What <span class="ui massive black label">device.type</span> am I using? What is my <a href="#ua-txt-info"><span class="ui massive white label">{ device.type }</span></a> ?
</h2> </h3>
<div class="ui horizontal inverted divider">
Introducing
</div>
<div class="ui text container"> <div class="ui text container">
<h1> <a href="https://uaparser.dev"><h1>UAParser.js</h1></a>
<p><a href="https://uaparser.dev">{UAParser.js}</a> is a JavaScript library to detect user's <h2>Abstract Away The Hassle of User-Agent Detection</h2>
<u>Browser</u>, <u>Engine</u>, <u>OS</u>, <u>CPU</u>, and <u>Device</u> type/model. Runs either
in browser (client-side) or node.js (server-side).</p>
</h1>
<div class="ui massive buttons"> <div class="ui massive buttons">
<a href="#try" class="ui violet button"><i class="magic icon"></i>Try Demo</a> <a href="#try" class="ui violet button"><i class="magic icon"></i>Try Demo</a>
<a href="https://docs.uaparser.dev" class="ui green button"><i class="book icon"></i>Read Docs</a> <a href="https://docs.uaparser.dev" class="ui green button"><i class="book icon"></i>Read Docs</a>
@ -130,7 +137,7 @@
<div class="column"> <div class="column">
<div class="ui center aligned animated icon"> <div class="ui center aligned animated icon">
<i class="tv icon"></i> <i class="tv icon"></i>
Type Device
</div> </div>
<div class="ui basic segment"> <div class="ui basic segment">
<img alt="detected device type icon" class="ui tiny centered image" id="type-img" src=""> <img alt="detected device type icon" class="ui tiny centered image" id="type-img" src="">
@ -142,7 +149,7 @@
<div class="column"> <div class="column">
<div class="ui center aligned animated icon"> <div class="ui center aligned animated icon">
<i class="mobile alternate icon"></i> <i class="mobile alternate icon"></i>
Model Series
</div> </div>
<div class="ui basic segment"> <div class="ui basic segment">
<img alt="detected device vendor icon" class="ui tiny centered image" id="device-img" src=""> <img alt="detected device vendor icon" class="ui tiny centered image" id="device-img" src="">

4
js/script.js
View File

@ -1,9 +1,9 @@
$(document) $(document)
.ready(function() { .ready(function() {
var labels = ['browser.name', 'os.version', 'device.type', 'cpu.arch', 'device.model', 'browser.version', 'device.vendor', 'engine.name', 'engine.version']; var labels = ['{ browser.name }', '{ os.version }', '{ device.type }', '{ cpu.arch }', '{ device.model }', '{ browser.version }', '{ device.vendor }', '{ engine.name }', '{ engine.version }'];
var counter = 0; var counter = 0;
var rotateLabel = function () { var rotateLabel = function () {
$('h2 .label').transition('fly down', function () { $('.masthead h3 .label').transition('fly down', function () {
$(this).text(labels[counter++]).transition('fade up', 100, function (){ $(this).text(labels[counter++]).transition('fade up', 100, function (){
if(counter>=labels.length)counter=0; if(counter>=labels.length)counter=0;
$(this).transition('jiggle'); $(this).transition('jiggle');

6
js/ua-parser.js
View File

File diff suppressed because one or more lines are too long