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

Add illustration

Browse Source
This commit is contained in:
Faisal Salman 2023-01-26 22:54:24 +07:00
parent 2eb632f4be
commit 6e454f64e6
4 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@ -15,13 +15,13 @@ padding: 1em 0em;
margin-left: 0.5em; margin-left: 0.5em;
} }
.masthead h1.ui.header { .masthead h1.ui.header {
margin-top: 4.5em; margin-top: 3em;
font-size: 3.5em; font-size: 7em;
} }
.masthead h2 { .masthead h2 {
font-size: 1.2em; font-size: 1.3em;
font-weight: normal; font-weight: normal;
margin: 0.5em 0 1em 0; margin: 0.5em 0 5em 0;
} }
.masthead h2 a { .masthead h2 a {
color: #fff; color: #fff;
@ -37,6 +37,10 @@ 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 {
bottom: -1em;
width:1000px;
}
.ui.vertical.stripe { .ui.vertical.stripe {
padding: 8em 0em; padding: 8em 0em;
} }

BIN
images/illustration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

38
index.html
View File

@ -19,23 +19,13 @@
<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">
<h1 class="ui inverted header">
What <span class="ui massive black label">device.type</span> am I using?
</h1>
<div class="ui text container"> <div class="ui text container">
<h1 class="ui inverted header"> <h2><em><a href="https://faisalman.github.io/ua-parser-js">{UAParser.js}</a> abstracts away the hassle of <u>User-Agent</u> detection by turning them into a set of <u>simple</u> & <u>meaningful</u> data so you can<mark> focus on what really matters.</mark></em></h2>
What <span class="ui massive black label">device.type</span> am I using?
</h1>
<h2><a href="https://faisalman.github.io/ua-parser-js">{UAParser.js}</a> abstracts away the hassle of User-Agent detection by turning them into a set of simple & meaningful data so you can focus on what really matters.</h2>
<div class="ui large buttons">
<a class="ui labeled icon violet button" href="https://github.com/faisalman/ua-parser-js" target="_blank">
<i class="download icon"></i>
Download
</a>
<div class="or"></div>
<a class="ui right labeled icon violet button" href="#demo">
<i class="chevron right icon"></i>
See Demo
</a>
</div>
</div> </div>
<img class="ui centered image illustration" src="images/illustration.png"/>
</div> </div>
<div class="ui text container"> <div class="ui text container">
<div id="demo" class="ui horizontal divider"> <div id="demo" class="ui horizontal divider">
@ -53,36 +43,36 @@
<i class="edge icon"></i> <i class="edge icon"></i>
Browser Browser
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="browser-img" src="">
</div>
<div class="ui center aligned header"> <div class="ui center aligned header">
<div class="header" id="browser-txt"></div> <div class="header" id="browser-txt"></div>
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="browser-img" src="">
</div>
</div> </div>
<div class="column"> <div class="column">
<div class="ui center aligned animated icon"> <div class="ui center aligned animated icon">
<i class="cogs icon"></i> <i class="cogs icon"></i>
Engine Engine
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="engine-img" src="">
</div>
<div class="ui center aligned header"> <div class="ui center aligned header">
<div class="header" id="engine-txt"></div> <div class="header" id="engine-txt"></div>
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="engine-img" src="">
</div>
</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>
OS OS
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="os-img" src="">
</div>
<div class="ui center aligned header"> <div class="ui center aligned header">
<div class="header" id="os-txt"></div> <div class="header" id="os-txt"></div>
</div> </div>
<div class="ui basic segment">
<img class="ui tiny centered image" id="os-img" src="">
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">

14
js/script.js
View File

@ -23,7 +23,7 @@ $(document)
$('#demo-result').transition('fly up', function () { $('#demo-result').transition('fly up', 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 label">' + result.browser.name + '</span><span class="ui large label">' + version + '</span>'); $('#browser-txt').html('<span class="ui large black label">' + result.browser.name + '</span><span class="ui large black 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');
}); });
@ -33,7 +33,7 @@ $(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 label">' + result.engine.name + '</span><span class="ui large label">' + version + '</span>'); $('#engine-txt').html('<span class="ui large black label">' + result.engine.name + '</span><span class="ui large black 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');
}); });
@ -43,7 +43,7 @@ $(document)
} }
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 label">' + result.os.name + '</span><span class="ui large label">' + version + '</span>'); $('#os-txt').html('<span class="ui large black label">' + result.os.name + '</span><span class="ui large black 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');
}); });
@ -52,7 +52,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 label">' + result.cpu.architecture + '</span>'); $('#cpu-txt').html('<span class="ui large black 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');
}); });
@ -61,7 +61,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 label">' + result.device.type + '</span>'); $('#type-txt').html('<span class="ui large black 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');
}); });
@ -72,7 +72,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 label">' + vendor + '</span><span class="ui large label">' + model + '</span>'); $('#device-txt').html('<span class="ui large black label">' + vendor + '</span><span class="ui large black 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');
@ -87,7 +87,7 @@ $(document)
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 label">' + vendor + '</span><span class="ui large label">' + model + '</span>'); $('#gpu-txt').html('<span class="ui large black label">' + vendor + '</span><span class="ui large black 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');
}); });