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

Display Bot detection in user-agent playground demo

Browse Source
This commit is contained in:
Faisal Salman 2025-09-06 20:42:52 +07:00
parent e803eb98bd
commit 94b49a4134
4 changed files with 102 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,5 +1,6 @@
node_modules/ node_modules/
npm-debug.log npm-debug.log
test-results/
.vscode .vscode

84
index.html
View File

@ -107,18 +107,6 @@
<img alt="detected browser icon" class="ui tiny centered image" id="browser-img" src=""> <img alt="detected browser icon" class="ui tiny centered image" id="browser-img" src="">
</div> </div>
</div> </div>
<div class="column">
<div class="ui center aligned animated icon">
<i class="cogs icon"></i>
Engine
</div>
<div class="ui center aligned header">
<div class="header" id="engine-txt"></div>
</div>
<div class="ui basic segment">
<img alt="detected engine icon" class="ui tiny centered image" id="engine-img" src="">
</div>
</div>
<div class="column"> <div class="column">
<div class="ui center aligned animated icon"> <div class="ui center aligned animated icon">
<i class="windows icon"></i> <i class="windows icon"></i>
@ -131,12 +119,24 @@
<img alt="detected os icon" class="ui tiny centered image" id="os-img" src=""> <img alt="detected os icon" class="ui tiny centered image" id="os-img" src="">
</div> </div>
</div> </div>
<div class="column">
<div class="ui center aligned animated icon">
<i class="microchip icon"></i>
CPU Architecture
</div>
<div class="ui center aligned header">
<div id="cpu-txt"></div>
</div>
<div class="ui basic segment">
<img alt="detected cpu icon" class="ui tiny centered image" id="cpu-img" src="">
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<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>
Device Device Type
</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="">
@ -148,7 +148,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>
Series Vendor & Model
</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="">
@ -157,15 +157,53 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="column"> <div class="column">
<div class="ui center aligned animated icon"> <div class="ui center aligned animated icon">
<i class="microchip icon"></i> <i class="globe icon"></i>
CPU Category
</div> </div>
<div class="ui basic segment"> <div class="ui basic segment">
<img alt="detected cpu icon" class="ui tiny centered image" id="cpu-img" src="">
<div class="ui center aligned header"> <div class="ui center aligned header">
<div id="cpu-txt"></div> <div class="header" id="category-txt">
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui center aligned animated icon">
<i class="cog icon"></i>
Engine
</div>
<div class="ui center aligned header">
<div class="header" id="engine-txt"></div>
</div>
<!--div class="ui basic segment">
<img alt="detected engine icon" class="ui tiny centered image" id="engine-img" src="">
</div-->
</div>
<div class="column">
<div class="ui center aligned animated icon">
<i class="user secret icon"></i>
Bot
</div>
<div class="ui basic segment">
<div class="ui center aligned header">
<div class="header" id="isbot-txt">
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui center aligned animated icon">
<i class="bug icon"></i>
AI Crawler
</div>
<div class="ui basic segment">
<div class="ui center aligned header">
<div class="header" id="isaibot-txt">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1382,13 +1420,13 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<div class="meta">$29 <span class="subtle">(one-time)</span></div> <div class="meta">$29 <span class="subtle">(one-time)</span></div>
</div> </div>
<div class="content"> <div class="content">
<div class="ui sub header">1 License Per Project</div> <div class="ui sub header">1 End-Product per 1 License</div>
<div class="description"> <div class="description">
<ul class="ui list"> <ul class="ui list">
<li>Full detection features</li> <li>Full detection features</li>
<li>npm & downloadable</li> <li>npm & downloadable</li>
<li>Commercial usage rights</li> <li>Commercial usage rights</li>
<li>Limited deployment</li> <li><span data-tooltip="This license allows you to deliver the end-product as 1 client work, or to host the end-product on 1 top-level domain">1 TLD per 1 license</span></li>
<li>1 year support</li> <li>1 year support</li>
<li>Lifetime updates</li> <li>Lifetime updates</li>
</ul> </ul>
@ -1594,11 +1632,11 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
</tr> </tr>
<tr> <tr>
<td class="left aligned">Unlimited projects</td> <td class="left aligned">Unlimited end-products</td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="negative" data-tooltip="1 project per 1 license" data-inverted=""><i class="large red minus circle icon"></i></td> <td class="negative" data-tooltip="1 product per 1 license" data-inverted=""><i class="large red minus circle icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
</tr> </tr>
<tr> <tr>
@ -1606,7 +1644,7 @@ $ npx ua-parser-js "Flock/2.16 (Zenwalk 7.3; es_PR;)" >> log.txt
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
<td class="negative" data-tooltip="1 project per 1 license" data-inverted=""><i class="large red minus circle icon"></i></td> <td class="warning" data-tooltip="Host on 1 top-level domain per 1 license" data-inverted=""><i class="large yellow circle exclamation icon"></i></td>
<td class="positive"><i class="large green checkmark icon"></i></td> <td class="positive"><i class="large green checkmark icon"></i></td>
</tr> </tr>
<tr> <tr>

41
js/script.js
View File

@ -11,7 +11,7 @@ $(document)
$('#demo-result').transition('zoom', function () { $('#demo-result').transition('zoom', function () {
if (result.browser.name) { if (result.browser.name) {
var version = result.browser.version!==undefined?result.browser.version:'-'; var version = result.browser.version!==undefined?result.browser.version:'-';
$('#browser-txt').html('<span class="ui large black label">' + result.browser.name + '</span><span class="ui large black label">' + version + '</span>'); $('#browser-txt').html('<span class="ui large green label">' + result.browser.name + '</span><span class="ui large blue label">' + version + '</span>');
$('#browser-img').attr('src', 'images/browsers/' + result.browser.name.toLowerCase() + '.png').on('error', function () { $('#browser-img').attr('src', 'images/browsers/' + result.browser.name.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/browsers/default.png'); $(this).attr('src', 'images/browsers/default.png');
}); });
@ -21,17 +21,17 @@ $(document)
} }
if (result.engine.name) { if (result.engine.name) {
var version = result.engine.version!==undefined?result.engine.version:'-'; var version = result.engine.version!==undefined?result.engine.version:'-';
$('#engine-txt').html('<span class="ui large black label">' + result.engine.name + '</span><span class="ui large black label">' + version + '</span>'); $('#engine-txt').html('<span class="ui large green label">' + result.engine.name + '</span><span class="ui large blue label">' + version + '</span>');/*
$('#engine-img').attr('src', 'images/engines/' + result.engine.name.toLowerCase() + '.png').on('error', function () { $('#engine-img').attr('src', 'images/engines/' + result.engine.name.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/engines/default.png'); $(this).attr('src', 'images/engines/default.png');
}); });*/
} else { } else {
$('#engine-txt').text('-'); $('#engine-txt').text('-');
$('#engine-img').attr('src', 'images/engines/default.png'); //$('#engine-img').attr('src', 'images/engines/default.png');
} }
if (result.os.name) { if (result.os.name) {
var version = result.os.version!==undefined?result.os.version:'-'; var version = result.os.version!==undefined?result.os.version:'-';
$('#os-txt').html('<span class="ui large black label">' + result.os.name + '</span><span class="ui large black label">' + version + '</span>'); $('#os-txt').html('<span class="ui large green label">' + result.os.name + '</span><span class="ui large blue label">' + version + '</span>');
$('#os-img').attr('src', 'images/os/' + result.os.name.toLowerCase() + '.png').on('error', function () { $('#os-img').attr('src', 'images/os/' + result.os.name.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/os/default.png'); $(this).attr('src', 'images/os/default.png');
}); });
@ -40,7 +40,7 @@ $(document)
$('#os-img').attr('src', 'images/os/default.png'); $('#os-img').attr('src', 'images/os/default.png');
} }
if (result.cpu.architecture) { if (result.cpu.architecture) {
$('#cpu-txt').html('<span class="ui large black label">' + result.cpu.architecture + '</span>'); $('#cpu-txt').html('<span class="ui large green label">' + result.cpu.architecture + '</span>');
$('#cpu-img').attr('src', 'images/cpu/' + result.cpu.architecture.toLowerCase() + '.png').on('error', function () { $('#cpu-img').attr('src', 'images/cpu/' + result.cpu.architecture.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/cpu/default.png'); $(this).attr('src', 'images/cpu/default.png');
}); });
@ -49,7 +49,7 @@ $(document)
$('#cpu-img').attr('src', 'images/cpu/default.png'); $('#cpu-img').attr('src', 'images/cpu/default.png');
} }
if (result.device.type) { if (result.device.type) {
$('#type-txt').html('<span class="ui large black label">' + result.device.type + '</span>'); $('#type-txt').html('<span class="ui large green label">' + result.device.type + '</span>');
$('#type-img').attr('src', 'images/types/' + result.device.type.toLowerCase() + '.png').on('error', function () { $('#type-img').attr('src', 'images/types/' + result.device.type.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/types/default.png'); $(this).attr('src', 'images/types/default.png');
}); });
@ -60,7 +60,7 @@ $(document)
if (result.device.vendor || result.device.model) { if (result.device.vendor || result.device.model) {
var vendor = result.device.vendor!=undefined?result.device.vendor:'-'; var vendor = result.device.vendor!=undefined?result.device.vendor:'-';
var model = result.device.model!==undefined?result.device.model:'-'; var model = result.device.model!==undefined?result.device.model:'-';
$('#device-txt').html('<span class="ui large black label">' + vendor + '</span><span class="ui large black label">' + model + '</span>'); $('#device-txt').html('<span class="ui large green label">' + vendor + '</span><span class="ui large blue label">' + model + '</span>');
if (result.device.vendor) { if (result.device.vendor) {
$('#device-img').attr('src', 'images/companies/' + result.device.vendor.toLowerCase() + '.png').on('error', function () { $('#device-img').attr('src', 'images/companies/' + result.device.vendor.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/companies/default.png'); $(this).attr('src', 'images/companies/default.png');
@ -72,10 +72,29 @@ $(document)
$('#device-txt').text('-'); $('#device-txt').text('-');
$('#device-img').attr('src', 'images/companies/default.png'); $('#device-img').attr('src', 'images/companies/default.png');
} }
if(result.browser.type) {
$('#category-txt').html('<span class="ui large green label">' + result.browser.type + '</span>');
} else {
if (result.engine.name) {
$('#category-txt').html('<span class="ui large green label">browser</span>');
} else {
$('#category-txt').text('-');
}
}
if (isBot(result)) {
$('#isbot-txt').text('✅');
} else {
$('#isbot-txt').text('-')
}
if (isAIBot(result)) {
$('#isaibot-txt').text('✅');
} else {
$('#isaibot-txt').text('-');
}
/* if (result.gpu.vendor) { /* if (result.gpu.vendor) {
var vendor = result.gpu.vendor!=undefined?result.gpu.vendor:'-'; var vendor = result.gpu.vendor!=undefined?result.gpu.vendor:'-';
var model = result.gpu.model!==undefined?result.gpu.model:'-'; var model = result.gpu.model!==undefined?result.gpu.model:'-';
$('#gpu-txt').html('<span class="ui large black label">' + vendor + '</span><span class="ui large black label">' + model + '</span>'); $('#gpu-txt').html('<span class="ui large green label">' + vendor + '</span><span class="ui large green label">' + model + '</span>');
$('#gpu-img').attr('src', 'images/companies/' + result.gpu.vendor.toLowerCase() + '.png').on('error', function () { $('#gpu-img').attr('src', 'images/companies/' + result.gpu.vendor.toLowerCase() + '.png').on('error', function () {
$(this).attr('src', 'images/companies/default.png'); $(this).attr('src', 'images/companies/default.png');
}); });
@ -97,9 +116,9 @@ $(document)
if (qs) { if (qs) {
$('#ua-txt-info').html('What your browser tells you = 😵‍💫💢 😭💸 <span class="ui mini red label">Complex</span> <span class="ui mini red label">Costly</span> <span class="ui mini red label">Expensive</span>'); $('#ua-txt-info').html('What your browser tells you = 😵‍💫💢 😭💸 <span class="ui mini red label">Complex</span> <span class="ui mini red label">Costly</span> <span class="ui mini red label">Expensive</span>');
$('#demo-result').get(0).scrollIntoView(); $('#demo-result').get(0).scrollIntoView();
updateDemo(UAParser(qs)); updateDemo(UAParser(qs, [CLIs, Crawlers, Fetchers, Libraries, InApps]));
} else { } else {
(UAParser().withFeatureCheck()).withClientHints().then(function(result) { (UAParser([CLIs, Crawlers, Fetchers, Libraries, InApps]).withFeatureCheck()).withClientHints().then(function(result) {
updateDemo(result); updateDemo(result);
}); });
} }

12
js/ua-parser.js
View File

File diff suppressed because one or more lines are too long