mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-27 16:08:47 +03:00
Add illustration
This commit is contained in:
Faisal Salman
parent
2eb632f4be
commit
6e454f64e6
@ -15,13 +15,13 @@ padding: 1em 0em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.masthead h1.ui.header {
|
||||
margin-top: 4.5em;
|
||||
font-size: 3.5em;
|
||||
margin-top: 3em;
|
||||
font-size: 7em;
|
||||
}
|
||||
.masthead h2 {
|
||||
font-size: 1.2em;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
margin: 0.5em 0 1em 0;
|
||||
margin: 0.5em 0 5em 0;
|
||||
}
|
||||
.masthead h2 a {
|
||||
color: #fff;
|
||||
@ -37,6 +37,10 @@ background: #6435c9;
|
||||
background-image: linear-gradient(to right bottom, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3);
|
||||
box-shadow: 0px 3px 10px rgba(0,0,0,.25);
|
||||
}
|
||||
.ui.image.illustration {
|
||||
bottom: -1em;
|
||||
width:1000px;
|
||||
}
|
||||
.ui.vertical.stripe {
|
||||
padding: 8em 0em;
|
||||
}
|
||||
|
||||
BIN
images/illustration.png
Normal file
BIN
images/illustration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
38
index.html
38
index.html
@ -19,23 +19,13 @@
|
||||
<body>
|
||||
<div class="pusher">
|
||||
<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">
|
||||
<h1 class="ui inverted header">
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
<img class="ui centered image illustration" src="images/illustration.png"/>
|
||||
</div>
|
||||
<div class="ui text container">
|
||||
<div id="demo" class="ui horizontal divider">
|
||||
@ -53,36 +43,36 @@
|
||||
<i class="edge icon"></i>
|
||||
Browser
|
||||
</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="header" id="browser-txt"></div>
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img 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 basic segment">
|
||||
<img class="ui tiny centered image" id="engine-img" src="">
|
||||
</div>
|
||||
<div class="ui center aligned header">
|
||||
<div class="header" id="engine-txt"></div>
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img 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>
|
||||
OS
|
||||
</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="header" id="os-txt"></div>
|
||||
</div>
|
||||
<div class="ui basic segment">
|
||||
<img class="ui tiny centered image" id="os-img" src="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
14
js/script.js
14
js/script.js
@ -23,7 +23,7 @@ $(document)
|
||||
$('#demo-result').transition('fly up', function () {
|
||||
if (result.browser.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/browsers/default.png');
|
||||
});
|
||||
@ -33,7 +33,7 @@ $(document)
|
||||
}
|
||||
if (result.engine.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/engines/default.png');
|
||||
});
|
||||
@ -43,7 +43,7 @@ $(document)
|
||||
}
|
||||
if (result.os.name) {
|
||||
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 () {
|
||||
$(this).attr('src', 'images/os/default.png');
|
||||
});
|
||||
@ -52,7 +52,7 @@ $(document)
|
||||
$('#os-img').attr('src', 'images/os/default.png');
|
||||
}
|
||||
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 () {
|
||||
$(this).attr('src', 'images/cpu/default.png');
|
||||
});
|
||||
@ -61,7 +61,7 @@ $(document)
|
||||
$('#cpu-img').attr('src', 'images/cpu/default.png');
|
||||
}
|
||||
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 () {
|
||||
$(this).attr('src', 'images/types/default.png');
|
||||
});
|
||||
@ -72,7 +72,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 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) {
|
||||
$('#device-img').attr('src', 'images/companies/' + result.device.vendor.toLowerCase() + '.png').on('error', function () {
|
||||
$(this).attr('src', 'images/companies/default.png');
|
||||
@ -87,7 +87,7 @@ $(document)
|
||||
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 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 () {
|
||||
$(this).attr('src', 'images/companies/default.png');
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user