diff --git a/css/style.css b/css/style.css index 7c32c2c7..e9acf52c 100644 --- a/css/style.css +++ b/css/style.css @@ -15,75 +15,89 @@ color: rgba(255, 255, 255, 0.3); margin: 3rem 0 2rem; } .hidden.menu { -display: none; + display: none; +} +.masthead.segment { + min-height: 300px; +} +.masthead a h1 { + color: #fff; + font-weight: bold; + font-size: 5rem; +} +.masthead h2 { + font-weight: normal; + margin: 0 0 2em 0; } .masthead.inverted.segment { background-color: #6435c9; + padding: 0; } .masthead.segment { -min-height: 600px; -padding: 1em 0em; + min-height: 600px; + padding: 1em 0em; } .masthead .ui.menu .ui.button { -margin-left: 0.5em; + margin-left: 0.5em; } -.masthead h2.ui.header { -margin-top: 3em; -font-size: 5rem; +.masthead h3 { + background-color: black; + padding: 5em 0; + font-size: 5rem; } -.masthead h1 { -font-size: 1.8rem; -font-weight: normal; -margin: 0.5em 0 2em 0; + +.masthead .divider { + padding: 3em; + margin: 0; } -.masthead h1 a { - color: #fff; - font-weight: bold; + +.masthead .ui.massive.buttons { + margin: 2rem 0 5rem; } + .instagram.masthead.inverted.segment { -background: #6435c9; -background-image: linear-gradient(to left top, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3); -box-shadow: 0px 3px 10px rgba(0,0,0,.25); + background: #6435c9; + background-image: linear-gradient(to left top, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3); + box-shadow: 0px 3px 10px rgba(0,0,0,.25); } .instagram.footer.inverted.segment { -background: #6435c9; -background-image: linear-gradient(to right bottom, #6435c9, #7143d0, #7e51d6, #8a5edd, #966ce3); -box-shadow: 0px 3px 10px rgba(0,0,0,.25); + 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; + width:1000px; } .ui.vertical.stripe { -padding: 8em 0em; + padding: 8em 0em; } .ui.vertical.stripe h3 { -font-size: 2em; + font-size: 2em; } .ui.vertical.stripe .button + h3, .ui.vertical.stripe p + h3 { -margin-top: 3em; + margin-top: 3em; } .ui.vertical.stripe .floated.image { -clear: both; + clear: both; } .ui.vertical.stripe p { -font-size: 1.33em; + font-size: 1.33em; } .ui.vertical.stripe .horizontal.divider { -margin: 3em 0em; + margin: 3em 0em; } .quote.stripe.segment { -padding: 0em; + padding: 0em; } .quote.stripe.segment .grid .column { -padding-top: 5em; -padding-bottom: 5em; + padding-top: 5em; + padding-bottom: 5em; } .footer.segment { -padding: 5em 0em; + padding: 5em 0em; } .footer p { @@ -91,7 +105,7 @@ padding: 5em 0em; } .secondary.pointing.menu .toc.item { -display: none; + display: none; } @media only screen and (max-width: 700px) { @@ -105,21 +119,6 @@ display: none; .secondary.pointing.menu .toc.item { display: block; } -.masthead.segment { - min-height: 300px; -} -.masthead .ui.massive.label { - font-size: 3rem; -} -.masthead h1.ui.header { - font-size: 1.5em; - margin-top: 3em; -} -.masthead h2 { - margin-top: 1em; - font-size: 0.75em; - font-weight: normal; -} #demo-result > .row > .column, #showcase .ui.stackable.grid > .row > .column { width: 33.3% !important; diff --git a/index.html b/index.html index 342ec336..d674a222 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,19 @@ + + + + + + + UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent & Client Hints data using JavaScript. Supports browser & node.js environment. Also available as jQuery plugin & TypeScript-ready development. - - - + + + @@ -28,15 +35,15 @@
-

- What device.type am I using? -

+

+ What is my { device.type } ? +

+
+ Introducing +
-

-

{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).

-

+

UAParser.js

+

Abstract Away The Hassle of User-Agent Detection

Try Demo Read Docs @@ -130,7 +137,7 @@

- Type + Device
detected device type icon @@ -142,7 +149,7 @@

- Model + Series
detected device vendor icon diff --git a/js/script.js b/js/script.js index e735ca2d..b0ecfcbf 100644 --- a/js/script.js +++ b/js/script.js @@ -1,9 +1,9 @@ $(document) .ready(function() { - var labels = ['browser.name', 'os.version', 'device.type', 'cpu.arch', 'device.model', 'browser.version', 'device.vendor', 'engine.name', 'engine.version']; + 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 () { - $('h2 .label').transition('fly down', function () { + $('.masthead h3 .label').transition('fly down', function () { $(this).text(labels[counter++]).transition('fade up', 100, function (){ if(counter>=labels.length)counter=0; $(this).transition('jiggle'); diff --git a/js/ua-parser.js b/js/ua-parser.js index 8013a069..5b538966 100644 --- a/js/ua-parser.js +++ b/js/ua-parser.js @@ -1,4 +1,4 @@ -/* UAParser.js v2.0.0-beta.1 - Copyright © 2012-2023 Faisal Salman +/* UAParser.js v2.0.0-beta.3 + Copyright © 2012-2024 Faisal Salman AGPLv3 License */ -!function(i,c){"use strict";function e(i){for(var e={},t=0;t_?yi(i,_):i),this}]]).setUA(o),this}Pi.VERSION="2.0.0-beta.1",Pi.BROWSER=e([f,g,p]),Pi.CPU=e([v]),Pi.DEVICE=e([h,t,m,o,x,a,r,l,k]),Pi.ENGINE=Pi.OS=e([f,g]),typeof exports!==b?(typeof module!==b&&module.exports&&(exports=module.exports=Pi),exports.UAParser=Pi):typeof define===u&&define.amd?define(function(){return Pi}):typeof i!==b&&(i.UAParser=Pi);var Ui,Hi=typeof i!==b&&(i.jQuery||i.Zepto);Hi&&!Hi.ua&&(Ui=new Pi,Hi.ua=Ui.getResult(),Hi.ua.get=function(){return Ui.getUA()},Hi.ua.set=function(i){Ui.setUA(i);var e,t=Ui.getResult();for(e in t)Hi.ua[e]=t[e]})}("object"==typeof window?window:this); \ No newline at end of file +!function(i,c){"use strict";function e(i){for(var e={},t=0;t_?Si(i,_):i),this}]]).setUA(o),this}Ui.VERSION="2.0.0-beta.3",Ui.BROWSER=e([f,v,p,m]),Ui.CPU=e([x]),Ui.DEVICE=e([h,g,m,k,y,t,r,o,a]),Ui.ENGINE=Ui.OS=e([f,v]),typeof exports!==b?(typeof module!==b&&module.exports&&(exports=module.exports=Ui),exports.UAParser=Ui):typeof define===u&&define.amd?define(function(){return Ui}):ui&&(i.UAParser=Ui);var Hi,Ei=ui&&(i.jQuery||i.Zepto);Ei&&!Ei.ua&&(Hi=new Ui,Ei.ua=Hi.getResult(),Ei.ua.get=function(){return Hi.getUA()},Ei.ua.set=function(i){Hi.setUA(i);var e,t=Hi.getResult();for(e in t)Ei.ua[e]=t[e]})}("object"==typeof window?window:this); \ No newline at end of file