From f9e6f691d06b05746c68249037e2cd182a09d755 Mon Sep 17 00:00:00 2001
From: Ifeora Okechukwu <isocroft@users.noreply.github.com>
Date: Mon, 15 Jul 2024 19:06:02 +0100
Subject: [PATCH] Update index.html

---
 example/index.html | 103 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 74 insertions(+), 29 deletions(-)
diff --git a/example/index.html b/example/index.html
index 88b69fd..c3b720c 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,18 +1,17 @@
-<!DOCTYPE html>
+  <!DOCTYPE html>
   <html lang="en">
-     <head>
-	      <meta charest="utf-8">
-		  <title>Browsengine - Example</title>
+    <head>
+	 <meta charest="utf-8">
+	<title>Browsengine v0.2.3 - Example</title>
 		  
-		  <script type="text/javascript" src="../dist/browsengine.min.js"></script>
-	 </head>
-	 <body id="webpage"> 
-
-	      <script type="text/javascript">
-		        document.body.innerHTML += "\r\n\n " + document.body.className + "\r\n\n ";
-		    </script>
+	<!-- Modernizr is optional -->
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
+	<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/isocroft/browsengine@0.2.3/dist/browsengine.min.js"></script>
+    </head>
+    <body class="page"> <!-- the class attribute of the {body} tag gets filled up after page load -->
 
         <script type="text/javascript">
+
             if(window.webpage.engine.webkit){
                 alert("webkit rendering engine");
             }else if(window.webpage.engine.blink){
@@ -27,23 +26,69 @@
                 alert("gecko rendering engine");
             }
 
-                // the console object is never available when dev tools is not open
-                if(!window.console && window.webpage.old.ie){
-                    console = {
-                        hlog:function(msg){
-                            document.body.innerHTML += msg + "\r\n\n\n";
-                        }
-                    }
-                }else{
-		    console.hlog = function(msg){
-                            document.body.innerHTML += msg + "\r\n\n\n";
-                    }	
-		}
-
-            console.hlog(window.webpage.device.os);
-            console.hlog(window.webpage.device.screen.type);
-            console.hlog(window.webpage.device.screen.dpi);
-            console.hlog(window.webpage.device.type);
+	    if (window.webpage.engine.old_impl && window.webpage.engine.blink) {
+		alert("This is a very old implementation of the blink rendering engine");
+            } else if (window.webpage.engine.webkit && window.webpage.engine.old_impl) {
+		alert("This is a very old implementation of the webkit rendering engine");
+	    }
+
+            
+ 	    if (window.webpage.old.ie) {
+	    	alert("This is a very old version of internet explorer browser");
+	    }
+                    
+	    if (window.webpage.old.firefox) {
+	    	alert("This is a very old version of firefox browser");
+	    }
+
+	    if (window.webpage.old.microsoftedge) {
+	    	alert("This is a very old version of edge browser");
+	    }
+
+	    if (window.webpage.old.chrome) {
+	    	alert("This is a very old version of chrome browser");
+	    }
+
+	    if (window.webpage.old.brave) {
+	    	alert("This is a very old version of brave browser");
+	    }
+
+	    if (window.webpage.old.safari) {
+	    	alert("This is a very old version of safari browser");
+	    }
+
+	    if (window.webpage.newer.chrome) {
+	    	alert("This is a much newer version of chrome browser");
+	    }
+
+	    if (window.webpage.newer.opera) {
+	    	alert("This is a much newer version of opera browser");
+	    }
+
+            /* Browsengine exposes an object {webpage} on the global window object */
+
+            console.log(document.body.className); //
+            console.log(window.webpage.device.os); // operating system for the device e.g. "Windows"
+	    console.log(window.webpage.device.zoom_level); // zoom level for the device e.g. 100%
+	    console.log(window.webpage.standards); // document is rendered in standards mode e.g. true
+            console.log(window.webpage.device.touch_capable); // screen touch capability e.g. false
+            console.log(window.webpage.device.screen.type); // screen type e.g. "retina" or "normal"
+            console.log(window.webpage.device.screen.dpi); // the pixel depth e.g. 24
+	    console.log(window.webpage.device.screen.pixel_density); // device pixel ratio e.g. 2
+	    console.log(window.webpage.device.browser_build); // the engine and browser name e.g. "chromium-blink-opera", "webkit-chrome", "chromium-edgehtml-edge"
+            console.log(window.webpage.device.type); // the device type e.g. "mobile", "tablet", "desktop" or "tv"
+
+	    console.log(w.webpage.device.agent.safari_mac);
+	    console.log(w.webpage.device.agent.safari_ios);
+	    console.log(w.webpage.device.agent.chrome_android);
+	    console.log(w.webpage.device.agent.opera_mobile);
+	    console.log(w.webpage.device.agent.opera_mini);
+	
+	   /* The `navigator` object now supports `navigator.oscpu` non-standard properties - polyfilled (Firefox is the only browser that support `navigator.oscpu` natively */
+           /* Unfortunately, `navigator.oscpu` has been deprecated on Firefox and will be removed from this library soon */
+	   console.log(window.navigator.oscpu); // operating system cpu info e.g. "Windows NT 6.1"
+	     
+	   console.log(window.navigator.isSWCapable()); // determine if the browser can run a service worker natively
         </script>
-	 </body>
+     </body>
   </html>
