Update script to latest v2.0.0.beta-3

faisalman · Jun 18, 2024 · 0583464 · 0583464
1 parent 405b451
commit 0583464
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 66 deletions.
diff --git a/css/style.css b/css/style.css
@@ -15,83 +15,97 @@ 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 {
     color: #fff;
 }
 
 .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
@@ -8,12 +8,19 @@
     <meta name="keywords"
         content="browser detection, user-agent, javascript, detect os, mobile, tablet, detect device, cpu, javascript, nodejs, jquery, typescript, client hints, bots, iphone, ipad, android" />
     <meta name="description" content="UAParser.js is the most comprehensive, compact, & up-to-date isomorphic JavaScript library to detect visitor's Browser, Engine, OS, CPU, and Device type/model.">
+    <meta name="application-name" content="UAParser.js">
+    <meta property="og:title" content="UAParser.js">
+    <meta property="og:url" content="https://uaparser.dev/">
+    <meta property="og:image" content="https://uaparser.dev/images/uap-header.png">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Abstract away the hassle of user-agent detection">
+    <meta property="og:locale" content="en_US">
     <title>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.</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/srcery.min.css">
-    <link rel="icon" type="image/png" href="images/logo.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/srcery.min.css">
     <link rel="stylesheet" type="text/css" href="semantic-ui/semantic.css">
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="icon" type="image/png" href="images/uap-logo.png">
     <script src="js/jquery-3.6.0.min.js"></script>
     <script src="semantic-ui/semantic.js"></script>
     <script src="js/clipboard.min.js"></script>
@@ -28,15 +35,15 @@
 <body>
     <div class="pusher">
         <div class="ui inverted instagram vertical masthead center aligned segment">
-            <h2 class="ui inverted header">
-                What <span class="ui massive black label">device.type</span> am I using?
-            </h2>
+            <h3>
+                What is my <a href="#ua-txt-info"><span class="ui massive white label">{ device.type }</span></a> ?
+            </h3>
+            <div class="ui horizontal inverted divider">
+                Introducing
+            </div>
             <div class="ui text container">
-                <h1>
-                    <p><a href="https://uaparser.dev">{UAParser.js}</a> is a JavaScript library to detect user's
-                        <u>Browser</u>, <u>Engine</u>, <u>OS</u>, <u>CPU</u>, and <u>Device</u> type/model. Runs either
-                        in browser (client-side) or node.js (server-side).</p>
-                </h1>
+                    <a href="https://uaparser.dev"><h1>UAParser.js</h1></a>
+                    <h2>Abstract Away The Hassle of User-Agent Detection</h2>
                 <div class="ui massive buttons">
                     <a href="#try" class="ui violet button"><i class="magic icon"></i>Try Demo</a>
                     <a href="https://docs.uaparser.dev" class="ui green button"><i class="book icon"></i>Read Docs</a>
@@ -130,7 +137,7 @@ <h1>
                         <div class="column">
                             <div class="ui center aligned animated icon">
                                 <i class="tv icon"></i>
-                                Type
+                                Device
                             </div>
                             <div class="ui basic segment">
                                 <img alt="detected device type icon" class="ui tiny centered image" id="type-img" src="">
@@ -142,7 +149,7 @@ <h1>
                         <div class="column">
                             <div class="ui center aligned animated icon">
                                 <i class="mobile alternate icon"></i>
-                                Model
+                                Series
                             </div>
                             <div class="ui basic segment">
                                 <img alt="detected device vendor icon" class="ui tiny centered image" id="device-img" src="">

diff --git 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');