mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-27 16:08:47 +03:00
Update script to latest v2.0.0.beta-3
This commit is contained in:
Faisal Salman
parent
405b45183f
commit
0583464041
@ -17,8 +17,21 @@ color: rgba(255, 255, 255, 0.3);
|
||||
.hidden.menu {
|
||||
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 {
|
||||
background-color: #6435c9;
|
||||
padding: 0;
|
||||
}
|
||||
.masthead.segment {
|
||||
min-height: 600px;
|
||||
@ -27,19 +40,21 @@ padding: 1em 0em;
|
||||
.masthead .ui.menu .ui.button {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.masthead h2.ui.header {
|
||||
margin-top: 3em;
|
||||
.masthead h3 {
|
||||
background-color: black;
|
||||
padding: 5em 0;
|
||||
font-size: 5rem;
|
||||
}
|
||||
.masthead h1 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
margin: 0.5em 0 2em 0;
|
||||
|
||||
.masthead .divider {
|
||||
padding: 3em;
|
||||
margin: 0;
|
||||
}
|
||||
.masthead h1 a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
||||
.masthead .ui.massive.buttons {
|
||||
margin: 2rem 0 5rem;
|
||||
}
|
||||
|
||||
.instagram.masthead.inverted.segment {
|
||||
background: #6435c9;
|
||||
background-image: linear-gradient(to left top, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3);
|
||||
@ -51,7 +66,6 @@ background-image: linear-gradient(to right bottom, #6435c9, #7143d0, #7e51d6, #8
|
||||
box-shadow: 0px 3px 10px rgba(0,0,0,.25);
|
||||
}
|
||||
.ui.image.illustration {
|
||||
bottom: -1em;
|
||||
width:1000px;
|
||||
}
|
||||
.ui.vertical.stripe {
|
||||
@ -105,21 +119,6 @@ display: none;
|
||||
.secondary.pointing.menu .toc.item {
|
||||
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,
|
||||
#showcase .ui.stackable.grid > .row > .column {
|
||||
width: 33.3% !important;
|
||||
|
||||
29
index.html
29
index.html
@ -8,12 +8,19 @@
|
||||
<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" />
|
||||
<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>
|
||||
<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="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="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="semantic-ui/semantic.js"></script>
|
||||
<script src="js/clipboard.min.js"></script>
|
||||
@ -28,15 +35,15 @@
|
||||
<body>
|
||||
<div class="pusher">
|
||||
<div class="ui inverted instagram vertical masthead center aligned segment">
|
||||
<h2 class="ui inverted header">
|
||||
What <span class="ui massive black label">device.type</span> am I using?
|
||||
</h2>
|
||||
<h3>
|
||||
What is my <a href="#ua-txt-info"><span class="ui massive white label">{ device.type }</span></a> ?
|
||||
</h3>
|
||||
<div class="ui horizontal inverted divider">
|
||||
Introducing
|
||||
</div>
|
||||
<div class="ui text container">
|
||||
<h1>
|
||||
<p><a href="https://uaparser.dev">{UAParser.js}</a> is a JavaScript library to detect user's
|
||||
<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>
|
||||
<a href="https://uaparser.dev"><h1>UAParser.js</h1></a>
|
||||
<h2>Abstract Away The Hassle of User-Agent Detection</h2>
|
||||
<div class="ui massive buttons">
|
||||
<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>
|
||||
@ -130,7 +137,7 @@
|
||||
<div class="column">
|
||||
<div class="ui center aligned animated icon">
|
||||
<i class="tv icon"></i>
|
||||
Type
|
||||
Device
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img alt="detected device type icon" class="ui tiny centered image" id="type-img" src="">
|
||||
@ -142,7 +149,7 @@
|
||||
<div class="column">
|
||||
<div class="ui center aligned animated icon">
|
||||
<i class="mobile alternate icon"></i>
|
||||
Model
|
||||
Series
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img alt="detected device vendor icon" class="ui tiny centered image" id="device-img" src="">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
$(document)
|
||||
.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 rotateLabel = function () {
|
||||
$('h2 .label').transition('fly down', function () {
|
||||
$('.masthead h3 .label').transition('fly down', function () {
|
||||
$(this).text(labels[counter++]).transition('fade up', 100, function (){
|
||||
if(counter>=labels.length)counter=0;
|
||||
$(this).transition('jiggle');
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user