mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-26 23:48:46 +03:00
Display Bot detection in user-agent playground demo
This commit is contained in:
Faisal Salman
parent
e803eb98bd
commit
94b49a4134
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
test-results/
|
||||
|
||||
.vscode
|
||||
|
||||
|
||||
84
index.html
84
index.html
@ -107,18 +107,6 @@
|
||||
<img alt="detected browser icon" class="ui tiny centered image" id="browser-img" src="">
|
||||
</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="ui center aligned animated icon">
|
||||
<i class="windows icon"></i>
|
||||
@ -131,12 +119,24 @@
|
||||
<img alt="detected os icon" class="ui tiny centered image" id="os-img" src="">
|
||||
</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 class="row">
|
||||
<div class="column">
|
||||
<div class="ui center aligned animated icon">
|
||||
<i class="tv icon"></i>
|
||||
Device
|
||||
Device Type
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img alt="detected device type icon" class="ui tiny centered image" id="type-img" src="">
|
||||
@ -148,7 +148,7 @@
|
||||
<div class="column">
|
||||
<div class="ui center aligned animated icon">
|
||||
<i class="mobile alternate icon"></i>
|
||||
Series
|
||||
Vendor & Model
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img alt="detected device vendor icon" class="ui tiny centered image" id="device-img" src="">
|
||||
@ -157,15 +157,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="ui center aligned animated icon">
|
||||
<i class="microchip icon"></i>
|
||||
CPU
|
||||
<i class="globe icon"></i>
|
||||
Category
|
||||
</div>
|
||||
<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 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>
|
||||
@ -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>
|
||||
<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">
|
||||
<ul class="ui list">
|
||||
<li>Full detection features</li>
|
||||
<li>npm & downloadable</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>Lifetime updates</li>
|
||||
</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>
|
||||
</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="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>
|
||||
</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="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>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
41
js/script.js
41
js/script.js
@ -11,7 +11,7 @@ $(document)
|
||||
$('#demo-result').transition('zoom', function () {
|
||||
if (result.browser.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/browsers/default.png');
|
||||
});
|
||||
@ -21,17 +21,17 @@ $(document)
|
||||
}
|
||||
if (result.engine.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/engines/default.png');
|
||||
});
|
||||
});*/
|
||||
} else {
|
||||
$('#engine-txt').text('-');
|
||||
$('#engine-img').attr('src', 'images/engines/default.png');
|
||||
//$('#engine-img').attr('src', 'images/engines/default.png');
|
||||
}
|
||||
if (result.os.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/os/default.png');
|
||||
});
|
||||
@ -40,7 +40,7 @@ $(document)
|
||||
$('#os-img').attr('src', 'images/os/default.png');
|
||||
}
|
||||
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 () {
|
||||
$(this).attr('src', 'images/cpu/default.png');
|
||||
});
|
||||
@ -49,7 +49,7 @@ $(document)
|
||||
$('#cpu-img').attr('src', 'images/cpu/default.png');
|
||||
}
|
||||
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 () {
|
||||
$(this).attr('src', 'images/types/default.png');
|
||||
});
|
||||
@ -60,7 +60,7 @@ $(document)
|
||||
if (result.device.vendor || result.device.model) {
|
||||
var vendor = result.device.vendor!=undefined?result.device.vendor:'-';
|
||||
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) {
|
||||
$('#device-img').attr('src', 'images/companies/' + result.device.vendor.toLowerCase() + '.png').on('error', function () {
|
||||
$(this).attr('src', 'images/companies/default.png');
|
||||
@ -72,10 +72,29 @@ $(document)
|
||||
$('#device-txt').text('-');
|
||||
$('#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) {
|
||||
var vendor = result.gpu.vendor!=undefined?result.gpu.vendor:'-';
|
||||
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 () {
|
||||
$(this).attr('src', 'images/companies/default.png');
|
||||
});
|
||||
@ -97,9 +116,9 @@ $(document)
|
||||
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>');
|
||||
$('#demo-result').get(0).scrollIntoView();
|
||||
updateDemo(UAParser(qs));
|
||||
updateDemo(UAParser(qs, [CLIs, Crawlers, Fetchers, Libraries, InApps]));
|
||||
} else {
|
||||
(UAParser().withFeatureCheck()).withClientHints().then(function(result) {
|
||||
(UAParser([CLIs, Crawlers, Fetchers, Libraries, InApps]).withFeatureCheck()).withClientHints().then(function(result) {
|
||||
updateDemo(result);
|
||||
});
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user