From 4228e2f1ae18d857e1f78228a7a9994b7cadb5cf Mon Sep 17 00:00:00 2001 From: Faisal Salman Date: Sat, 16 Sep 2023 15:12:02 +0700 Subject: [PATCH] Small changes --- css/style.css | 16 +- index.html | 2028 ++++++++++++++++++++------------------ js/script.js | 34 +- semantic-ui/semantic.css | 2 +- 4 files changed, 1132 insertions(+), 948 deletions(-) diff --git a/css/style.css b/css/style.css index c859f43..f5ca19f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,16 @@ html { scroll-behavior: smooth; } +code, +.code { + font-family: 'Source Code Pro', 'Courier New', Courier, monospace; +} +strong.subtle{ + color: rgba(0, 0, 0, 0.7) +} +.hljs-punctuation, .hljs-tag { +color: rgba(255, 255, 255, 0.3); +} .ui.horizontal.divider { margin: 3rem 0 2rem; } @@ -19,10 +29,10 @@ margin-left: 0.5em; } .masthead h2.ui.header { margin-top: 3em; -font-size: 7em; +font-size: 5rem; } .masthead h1 { -font-size: 1.3em; +font-size: 1.8rem; font-weight: normal; margin: 0.5em 0 2em 0; } @@ -99,7 +109,7 @@ display: none; min-height: 300px; } .masthead .ui.massive.label { - font-size: 1rem; + font-size: 3rem; } .masthead h1.ui.header { font-size: 1.5em; diff --git a/index.html b/index.html index d8f0bac..2053e2c 100644 --- a/index.html +++ b/index.html @@ -1,960 +1,1124 @@ + - - - - - UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent & Client-Hints data using JavaScript. Supports browser & node.js environment. Available as jQuery plugin & @types-ready for TypeScript. - - - - - - - - - - + + + + + UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent & Client-Hints data + using JavaScript. Supports browser & node.js environment. Available as jQuery plugin & @types-ready for + TypeScript. + + + + + + + + + + + + + + -
-
-

- What device.type am I using? -

-
-

-

{UAParser.js} is a JavaScript library to detect user's Browser, Engine, OS, CPU, and Device type/model, either in browser (client-side) or node.js (server-side).

-
- Try The Demo -
- Read The Docs -
-
- -
- - -
-
- FROM OUR SPONSORS : -
-
-
-
-
-
-
-
-
-
-
-
-
- - BECOME A SPONSOR -
-
-
-
-
- - -
-
- DEMO : A USER-AGENT PLAYGROUND -
-
-
-

- {UAParser.js} abstracts away the hassle of User-Agent detection by turning them into a set of simple & meaningful data. As an example, this is what we get from your browser's User-Agent information:

-

-
-
-

- {UAParser.js} will transforms it into a well-structured data:

-
-
-
-
-
-
- - Browser -
-
-
-
-
- -
-
-
-
- - Engine -
-
-
-
-
- -
-
-
-
- - OS -
-
-
-
-
- -
-
-
-
-
-
- - Type -
-
- -
-
-
-
-
-
-
- - Model -
-
- -
-
+
+
+

+ What device.type am I using? +

+
+

+

{UAParser.js} is a JavaScript library to detect user's + Browser, Engine, OS, CPU, and Device type/model. Runs either + in browser (client-side) or node.js (server-side).

+

+
+ Try The Demo +
+ Read The + Docs +
+
+ +
+ + +
+
+ FEATURED : OUR SPONSORS +
+
+
+
+ + PUT YOUR LOGO / TEXT HERE +
+
+
+
+ + +
+
+ DEMO : A USER-AGENT PLAYGROUND +
+
+
+

+ {UAParser.js} abstracts away the hassle of User-Agent detection by turning them into a set of + simple & meaningful data. As an example, this is what we get from your browser's User-Agent + information:

+
+

+
+
+
+

+ {UAParser.js} will transforms it into a well-structured format:

+
+
+
+
+
+
+ + Browser +
+
+
+
+
+ +
+
+
+
+ + Engine +
+
+
+
+
+ +
+
+
+
+ + OS +
+
+
+
+
+ +
+
+
+
+
+
+ + Type +
+
+ +
+
+
+
+
+
+
+ + Model +
+
+ +
+
+
+
+
+
+
+ + CPU +
+
+ +
+
+
+
+
+
+
+
+ TRY MORE EXAMPLES +
+
+
+ + +
+
+ +
+ +
+ + CHECK +
+
+
+
+
+
+
+
+ DETECT GPU FROM WEBGL DATA (EXPERIMENTAL FEATURE) +
+
+
+
+
+
+ + GPU +
+ +
+
+
+
+
+
+
+
+ FEATURES: WHEN LESS IS MORE +
+
+
+
+
+
+

+ +
Extract Only What's Valuable
+

+

User-Agent string as of today is a mess. On the other hand, there is no reliable way to identify user details.

+

{UAParser.js} filters the noise away & extracts + only the most meaningful data: Browser, Engine, OS, + CPU, & Device in a well-structured format.

+
+
+
+
+

+ +
Relatively Small Footprint
+

+

{UAParser.js} is optimized to be used within browser. + While it covers a vast range of detection, the size + always kept to be as light as possible.

+

For extra cache performance, {UAParser.js} also + available in popular CDN services: jsDelivr / CDNJS

+
+
+
+
+

+ +
+ Zero-deps Vanilla JS +
+

+

No bloated framework. No transpiler required. No unnecessary boilerplate. No + dependencies.

+

Just a good ol' ES3-compatible syntax that is able to + run on relatively old browsers while also performs + on most modern devices.

+
+
+
+
+
+
+

+ +
+ 100% Free & Open Source +
+

+

Licensed under an extremely permissive MIT license, + {UAParser.js} is free to use & modify at no charge.

+

Contribute back either by submitting a PR or consider to donate if you find it + helpful for your business or company.

+
+
+
+
+

+ +
+ Best Developer Experience +
+

+

For jQuery user, {UAParser.js} automatically detects + and generates a plugin as $.ua

+

Also, for TypeScript user, there is a + community-maintained types: @types/ua-parser-js

+
+
+
+
+

+ +
Client-side & Server-side
+

+

Whether it's a client-side webpage running in a browser, or a server-side node.js app, simply type:

$ npm i ua-parser-js +
+
+
+
+
+
+ TESTIMONIALS : LOVED BY DEVELOPERS +
+
+
+
+
+
+
+
+
+ Great Utility! +
+
+ 5/5 +
+
+

"A great utility library to have when you're + investigating what kind of users are visiting your website and + how you can improve their UX. Supports most browsers out + there."

+

Gabrijel Golubić - Frontend Web Developer

+
+
+
+
+
+
+
+
+
+
+
+ Totally Rocks! +
+

"I've been using your library for a long time and it + totally rocks!".

+

Christian Rich - Web Developer

+
+
+
+
+
+ Very Useful! +
+

"Thank you for putting out this very useful + library!".

+

Anuj Nijhawan - Web Developer

+
+
+
+
+
+
+
+
+
+
+ SHOWCASES : TRUSTED BY TOP COMPANIES WORLDWIDE +
+
+
+

Who's Using {UAParser.js} ?
Showcasing some + companies that are using our library
+

+
+
+
+
+
+ +
+
+ Website + Accessibility + Insights +
+
+
+
+ +
+
+ Kindle for + iOS / Android + Amazon Chime SDK for + JavaScript +
+
+
+
+ +
+
+ Facebook / + FBJS +
+
+
+
+ +
+
+ Web-based Instagram +
+
+
+
+ +
+
+ Web-based WhatsApp +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+
+
+ +
+
+ Tachometer +
+
+
+
+ +
+
+ HTTP Toolkit UI +
+
+
+
+ +
+
+ AliExpress Website +
+
+
+
+ +
+
+ Next.js +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+ +
+
+ Apple Music Website + Apple TV Website +
+
+
+
+
+
+ +
+
+ Web-based App +
+
+
+
+ +
+
+ Add-on Frontend +
+
+
+
+ +
+
+ WP-Calypso +
+
+
+
+ +
+
+ Browser Sniffer + Blockchain + Components +
+
+
+
+ +
+
+ JavaScript SDK +
+
+
+
+ +
+
+ LINE Messenger +
+
+
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Emoji Keyboard +
+
+
+
+ +
+
+ Rocket.Chat +
+
+
+
+ +
+
+ Web AR +
+
+
+
+ +
+
+ CircleCI Enterprise +
+
+
+
+ +
+
+ PWA Kit +
+
+
+
+
+
+ +
+
+ WebClient +
+
+
+
+ +
+
+ Desktop + Platform +
+
+
+
+ +
+
+ Confluent Platform +
+
+
+
+ +
+
+ Cloud + Enterprise +
+
+
+
+ +
+
+ Platform +
+
+
+
+ +
+
+ Website +
+
+
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Support Desk +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Web & Mobile App +
+
+
+
+ +
+
+ Website + Gestalt +
+
+
+
+
+
+ +
+
+ Zoho Mail +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Disney+ Website + National Geographic + Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ GrabFood Web +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+ +
+
+ Seller Center +
+
+
+
+ +
+
+ Web-based App +
+
+
+
+ +
+
+ Ticket & Travel Page +
+
+
+
+
+
+ +
+
+ Hub + Website +
+
+
+
+ +
+
+ Harp.gl +
+
+
+
+ +
+
+ Website +
+
+
+
+ +
+
+ Web & Mobile Platform +
+
+
+
+ +
+
+ Neo4j Bloom +
+
+
+
+ +
+
+ MongoDB + Charts +
+
+
+
+
+
+ +
+
+ EMC + PowerStore +
+
+
+
+ +
+
+ Developer + Console +
+
+
+
+ +
+
+ Oracle + NetSuite +
+
+
+
+ +
+
+ Premium Services +
+
+
+
+ +
+
+ OneView Global Dashboard +
+
+
+
+ +
+
+ Fios TV +
+
+
+
-
-
-
- - CPU -
-
- -
-
-
-
-
-
- TRY MORE EXAMPLES + CONTRIBUTORS : SUPPORTED BY THE AMAZING OPEN-SOURCE COMMUNITIES
-
-
- - -
-
- -
- -
- - CHECK -
+
+
+

Backers & Sponsors
Those who give back and get + the value from using this library
+

+
+ + +
-
-
-
- -
-
- DETECT GPU FROM WEBGL DATA (EXPERIMENTAL FEATURE) -
-
-
-
-
-
- - GPU +
+

Contribute to UAParser.js
It's free to use, but + feel free to contribute if you find it useful
+

+ + ONE-TIME SPONSOR + + MONTHLY SPONSOR + + GITHUB SPONSOR
- -
-
+
+

Contributors
Those who collaborate and + continuosly improve this library to be awesome
+

+
-
-
-
-
- LESS IS MORE -
-
-
-
-
-
-

- -
Extract Only What's Valuable
-

-

It's widely known that User-Agent string as of today is a mess. On the other hand, there is no reliable way to identify browser. {UAParser.js} fills this gap by filtering the noise away and extracts only the most relevant data available: Browser, Engine, OS, CPU, and Device.

-
-
-
-
-

- -
Relatively Small Footprint
-

-

Started from JavaScript approach, {UAParser.js} is optimized to be used with browser. While it covers a vast range of detection, the size always kept to be as light as possible. For extra cache performance, {UAParser.js} also available in popular CDN services (jsDelivr/CDNJS).

-
-
-
-
-

- -
- 100% Free & Open Source -
-

-

Licensed under a permissive MIT license. {UAParser.js} is free to use, free to modify, free of charge. Get as-is, no support or guarantee offered. Use, extend, or replace with your own set of rules. Don't forget to contribute back by submitting a pull request or consider donating if you want.

-
-
-
-
-
-
-

- -
Client-side & Server-side
-

-

Whether it's a client-side webpage running in a browser or a server-side node.js app, simply type:

$ npm i ua-parser-js --save -
-
-
-
-

- -
- 0-dependency Vanilla JS -
-

-

No framework needed. No transpiler required. Just a good ol' ES3-compatible syntax that is able to run on relatively old browsers while also perform on most modern devices. Just insert the code and you're good to go.

-
-
-
-
-

- -
- Made by and for Developer -
-

-

Having large user base, whenever jQuery is present, {UAParser.js} will detect and generate $.ua plugin automatically. Also, for TypeScript user, there is a community-maintained typed: @types/ua-parser-js.

-
-
+ -
-
- LOVED BY DEVELOPERS -
-
-
-
-
-
-
-
-
- Great Utility! -
-
5/5 +
+
+
+
+
+
-
-

"A great utility library to have when you're investigating what kind of users are visiting your website and how you can improve their UX. Supports most browsers out there."

-

Gabrijel Golubić - Frontend Web Developer

+
+
+
+
+ + + + + + + + OpenCollective + Openbase + +
-
-
-
-
-
-
-
-
-
-
- Totally Rocks! -
-

"I've been using your library for a long time and it totally rocks!". Christian Rich - Web Developer

+
+

Licensed under MIT license. Copyright (c) 2012-2023 Faisal Salman.

-
-
-
- Very Useful! -
-

"Thank you for putting out this very useful library!". Anuj Nijhawan - Web Developer

-
-
-
-
-
-
-
- TRUSTED BY COMPANIES
-
-
-

Who's Using {UAParser.js} ?
Showcasing some companies that are using our library

-
-
-
-
-
- -
-
- Website - Accessibility Insights -
-
-
-
- -
-
- Kindle for iOS / Android - Amazon Chime SDK for JavaScript -
-
-
-
- -
-
- Facebook / FBJS -
-
-
-
- -
-
- Web-based Instagram -
-
-
-
- -
-
- Web-based WhatsApp -
-
-
-
- -
-
- Web-based App -
-
-
-
-
-
- -
-
- Tachometer -
-
-
-
- -
-
- HTTP Toolkit UI -
-
-
-
- -
-
- AliExpress Website -
-
-
-
- -
-
- Next.js -
-
-
-
- -
-
- Web-based App -
-
-
-
- -
-
- Apple Music Website - Apple TV Website -
-
-
-
-
-
- -
-
- Web-based App -
-
-
-
- -
-
- Add-on Frontend -
-
-
-
- -
-
- WP-Calypso -
-
-
-
- -
-
- Browser Sniffer - Blockchain Components -
-
-
-
- -
-
- JavaScript SDK -
-
-
-
- -
-
- LINE Messenger -
-
-
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Emoji Keyboard -
-
-
-
- -
-
- Rocket.Chat -
-
-
-
- -
-
- Web AR -
-
-
-
- -
-
- CircleCI Enterprise -
-
-
-
- -
-
- PWA Kit -
-
-
-
-
-
- -
-
- WebClient -
-
-
-
- -
-
- Desktop Platform -
-
-
-
- -
-
- Confluent Platform -
-
-
-
- -
-
- Cloud Enterprise -
-
-
-
- -
-
- Platform -
-
-
-
- -
-
- Website -
-
-
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Support Desk -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Web & Mobile App -
-
-
-
- -
-
- Website - Gestalt -
-
-
-
-
-
- -
-
- Zoho Mail -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Web-based App -
-
-
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Disney+ Website - National Geographic Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Web-based App -
-
-
-
-
-
- -
-
- Website -
-
-
-
- -
-
- GrabFood Web -
-
-
-
- -
-
- Web-based App -
-
-
-
- -
-
- Seller Center -
-
-
-
- -
-
- Web-based App -
-
-
-
- -
-
- Ticket & Travel Page -
-
-
-
-
-
- -
-
- Hub - Website -
-
-
-
- -
-
- Harp.gl -
-
-
-
- -
-
- Website -
-
-
-
- -
-
- Web & Mobile Platform -
-
-
-
- -
-
- Neo4j Bloom -
-
-
-
- -
-
- MongoDB Charts -
-
-
-
-
-
- -
-
- EMC PowerStore -
-
-
-
- -
-
- Developer Console -
-
-
-
- -
-
- Oracle NetSuite -
-
-
-
- -
-
- Premium Services -
-
-
-
- -
-
- OneView Global Dashboard -
-
-
-
- -
-
- Fios TV -
-
-
-
+
+
Success
+
+

Copied!

+

-
-
-
- SUPPORTED BY THE AMAZING OPEN-SOURCE COMMUNITIES -
-
-
-

Backers & Sponsors
Those who give back and get the value from using this library

-
- - +
+
OK
-
-
-

Contribute to UAParser.js
It's free to use, but feel free to contribute if you find it useful

- - ONE-TIME SPONSOR - - MONTHLY SPONSOR - - GITHUB SPONSOR -
-
-

Contributors
Those who collaborate and continuosly improve this library to be awesome

- -
- -
-
-
-
-
-
- -
-
-
-
-
- - - - - - - - OpenCollective - Openbase - -
-
-
-

Licensed under MIT license. Copyright (c) 2012-2023 Faisal Salman.

-
-
-
-
-
-
-
-
Success
-
-

Copied!

-

-
-
-
OK
-
-
- + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index ce87f6b..ef0a48f 100644 --- a/js/script.js +++ b/js/script.js @@ -1,6 +1,5 @@ $(document) .ready(function() { - var uaparser = new UAParser(); 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 () { @@ -16,9 +15,9 @@ $(document) var updateDemo = function (result) { if(!result) return; - $('#ua-txt').transition('flip vertical', function () { + $('#ua-txt').transition('zoom', function () { $(this).text(result.ua); - $(this).transition('flip vertical'); + $(this).transition('zoom'); }); $('#ua-result').text(JSON.stringify(result, null, " ")); $('#demo-result').transition('zoom', function () { @@ -102,9 +101,22 @@ $(document) }); }); } - UAParser().withClientHints().then(function(result) { - updateDemo(result); - }); + + var qs; + if (URLSearchParams) { + qs = new URLSearchParams(window.location.search).get('ua'); + } + if (qs) { + $('#ua-txt-info').text('For a given user-agent:'); + UAParser(qs).then(function(result) { + updateDemo(result); + }); + $('#ua-txt').get(0).scrollIntoView(); + } else { + UAParser().withClientHints().then(function(result) { + updateDemo(result); + }); + } var i; var values = []; @@ -117,20 +129,17 @@ $(document) onChange: function (val) { if (val != prevVal) { - $('#ua-txt-info').text('For a given user-agent:'); - updateDemo(UAParser(val)); prevVal = val; + window.location.search = '?ua=' + val; } } }); $('#demo-btn').click(function() { - $('#ua-txt-info').text('For a given user-agent:'); - updateDemo(UAParser($('input[name=custom-ua]').val())); + window.location.search = '?ua=' + $('input[name=custom-ua]').val(); }); $('input[name=custom-ua]').keypress(function (e) { if (e.which == 13) { - $('#ua-txt-info').text('For a given user-agent:'); - updateDemo(UAParser($(this).val())); + window.location.search = '?ua=' + $(this).val(); return false; } }); @@ -154,4 +163,5 @@ $(document) $('.mini.modal').modal('setting', 'transition', 'vertical flip').modal('show'); e.clearSelection(); }); + hljs.highlightAll(); }); \ No newline at end of file diff --git a/semantic-ui/semantic.css b/semantic-ui/semantic.css index 7713af5..250f700 100644 --- a/semantic-ui/semantic.css +++ b/semantic-ui/semantic.css @@ -8,7 +8,7 @@ * http://opensource.org/licenses/MIT * */ -@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic&subset=latin'); +@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,700,400italic,700italic&subset=latin'); /*! * # Semantic UI 2.4.0 - Reset * http://github.com/semantic-org/semantic-ui/