diff --git a/balloon.min.css b/balloon.min.css
deleted file mode 100644
index 41920a5d..00000000
--- a/balloon.min.css
+++ /dev/null
@@ -1 +0,0 @@
-:root{--balloon-border-radius: 2px;--balloon-color: rgba(16,16,16,0.95);--balloon-text-color: #fff;--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:2px;color:var(--balloon-text-color);border-radius:var(--balloon-border-radius);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%;transform-origin:top;transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%;transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after,[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{width:100%}
diff --git a/foundational-api-samples/hello-world/angular/README.md b/foundational-api-samples/hello-world/angular/README.md
index 91b50b42..96e9a14c 100644
--- a/foundational-api-samples/hello-world/angular/README.md
+++ b/foundational-api-samples/hello-world/angular/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000`](ht
 
 ## Official sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/angular">Hello World in Angular - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular">Hello World in Angular - Source Code</a>
 
 ## Preparation
 Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. 
diff --git a/foundational-api-samples/hello-world/angular/src/index.html b/foundational-api-samples/hello-world/angular/src/index.html
index 4a1660de..7513197d 100644
--- a/foundational-api-samples/hello-world/angular/src/index.html
+++ b/foundational-api-samples/hello-world/angular/src/index.html
@@ -13,7 +13,7 @@
     <meta name="keywords" content="barcodes, camera, images, angular" />
     <link
       rel="canonical"
-      href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/"
+      href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/angular/dist/dbrjs-sample-angular/browser/"
     />
   </head>
   <body>
diff --git a/foundational-api-samples/hello-world/blazor/README.md b/foundational-api-samples/hello-world/blazor/README.md
index 2625f08e..b91e77a1 100644
--- a/foundational-api-samples/hello-world/blazor/README.md
+++ b/foundational-api-samples/hello-world/blazor/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000`](ht
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/blazor">Hello World in Blazor - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor">Hello World in Blazor - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html b/foundational-api-samples/hello-world/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html
index 9415c937..e3fcaf49 100644
--- a/foundational-api-samples/hello-world/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html
+++ b/foundational-api-samples/hello-world/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html
@@ -29,8 +29,6 @@
   <script src="_framework/blazor.webassembly.js"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.min.js"></script>
-  <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
 
   <script>
     /** LICENSE ALERT - README
@@ -48,7 +46,6 @@
 
     // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-
     // Defined globally for easy debugging.
     let cameraEnhancer, cvRouter;
     let videoModuleLoaded = false;
diff --git a/foundational-api-samples/hello-world/electron/README.md b/foundational-api-samples/hello-world/electron/README.md
index e4a08e2a..c3df4767 100644
--- a/foundational-api-samples/hello-world/electron/README.md
+++ b/foundational-api-samples/hello-world/electron/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000`](ht
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/electron">Hello World in Electron - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron">Hello World in Electron - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/es6.html b/foundational-api-samples/hello-world/es6.html
index 0f88987d..d4329311 100644
--- a/foundational-api-samples/hello-world/es6.html
+++ b/foundational-api-samples/hello-world/es6.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
     <meta name="keywords" content="barcode, camera, es6" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/es6.html" />
     <title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
   </head>
 
diff --git a/foundational-api-samples/hello-world/hello-world.html b/foundational-api-samples/hello-world/hello-world.html
index 16650e98..151f7b6f 100644
--- a/foundational-api-samples/hello-world/hello-world.html
+++ b/foundational-api-samples/hello-world/hello-world.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
   <meta name="keywords" content="barcode, camera" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html" />
   <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
 </head>
 
@@ -35,6 +35,8 @@ <h1>Hello World (Decode via Camera)</h1>
 
     // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../distributables/";
     // Defined globally for easy debugging.
     let cameraEnhancer, cvRouter;
 
diff --git a/foundational-api-samples/hello-world/native-ts/index.html b/foundational-api-samples/hello-world/native-ts/index.html
index 7367623a..50571ccb 100644
--- a/foundational-api-samples/hello-world/native-ts/index.html
+++ b/foundational-api-samples/hello-world/native-ts/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
   <meta name="keywords" content="barcode, camera" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html" />
   <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
 </head>
 
diff --git a/foundational-api-samples/hello-world/next/README.md b/foundational-api-samples/hello-world/next/README.md
index a4f0ff4a..9f22f00f 100644
--- a/foundational-api-samples/hello-world/next/README.md
+++ b/foundational-api-samples/hello-world/next/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000`](ht
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/next">Hello World in Next.js - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next">Hello World in Next.js - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/nuxt/README.md b/foundational-api-samples/hello-world/nuxt/README.md
index c70b07d9..e7ed94d8 100644
--- a/foundational-api-samples/hello-world/nuxt/README.md
+++ b/foundational-api-samples/hello-world/nuxt/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000`](ht
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/nuxt">Hello World in Nuxt - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt">Hello World in Nuxt - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/pwa/README.md b/foundational-api-samples/hello-world/pwa/README.md
index 6b178038..63f20bc2 100644
--- a/foundational-api-samples/hello-world/pwa/README.md
+++ b/foundational-api-samples/hello-world/pwa/README.md
@@ -12,8 +12,8 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000](htt
 
 ## Official Sample
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html">Hello World in PWA - Demo</a>
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/pwa">Hello World in PWA - Source Code</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html">Hello World in PWA - Demo</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa">Hello World in PWA - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/pwa/helloworld-pwa.html b/foundational-api-samples/hello-world/pwa/helloworld-pwa.html
index 890812f7..67a61296 100644
--- a/foundational-api-samples/hello-world/pwa/helloworld-pwa.html
+++ b/foundational-api-samples/hello-world/pwa/helloworld-pwa.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in a PWA application." />
     <meta name="keywords" content="barcode, camera, PWA" />
     <title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera)</title>
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html" />
     <link rel="manifest" href="./helloworld-pwa.json" />
     <meta name="theme-color" content="#B12A34" />
     <meta name="mobile-web-app-capable" content="yes" />
diff --git a/foundational-api-samples/hello-world/react-hooks/README.md b/foundational-api-samples/hello-world/react-hooks/README.md
index 60febd18..e43be0ea 100644
--- a/foundational-api-samples/hello-world/react-hooks/README.md
+++ b/foundational-api-samples/hello-world/react-hooks/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000](htt
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react-hooks">Hello World in React with Hooks - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks">Hello World in React with Hooks - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/react-hooks/public/index.html b/foundational-api-samples/hello-world/react-hooks/public/index.html
index f358c3c6..6628cd75 100644
--- a/foundational-api-samples/hello-world/react-hooks/public/index.html
+++ b/foundational-api-samples/hello-world/react-hooks/public/index.html
@@ -10,7 +10,7 @@
       content="Dynamsoft Barcode Reader in a React Application, helps read barcodes from camera or images."
     />
     <meta name="keywords" content="barcodes, camera, images, React" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/hello-world/react-hooks/build/" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/DBR/JS/foundational-api-samples/hello-world/react-hooks/build/" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/foundational-api-samples/hello-world/react/README.md b/foundational-api-samples/hello-world/react/README.md
index 271b83ef..94325cda 100644
--- a/foundational-api-samples/hello-world/react/README.md
+++ b/foundational-api-samples/hello-world/react/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000](htt
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/react">Hello World in React - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react">Hello World in React - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/react/public/index.html b/foundational-api-samples/hello-world/react/public/index.html
index 4f81c0fb..a88f5d4d 100644
--- a/foundational-api-samples/hello-world/react/public/index.html
+++ b/foundational-api-samples/hello-world/react/public/index.html
@@ -10,7 +10,7 @@
       content="Dynamsoft Barcode Reader in a React Application, helps read barcodes from camera or images."
     />
     <meta name="keywords" content="barcodes, camera, images, React" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/hello-world/react/build/" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/DBR/JS/foundational-api-samples/hello-world/react/build/" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/foundational-api-samples/hello-world/read-an-image.html b/foundational-api-samples/hello-world/read-an-image.html
index 3d0d0ff6..99a21b22 100644
--- a/foundational-api-samples/hello-world/read-an-image.html
+++ b/foundational-api-samples/hello-world/read-an-image.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <meta name="description" content="Read barcodes from an image in no time with Dynamsoft Barcode Reader." />
   <meta name="keywords" content="barcode, image" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-an-image.html" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/read-an-image.html" />
   <title>Dynamsoft Barcode Reader Sample - Hello World (Read an Image)</title>
 </head>
 
@@ -35,7 +35,8 @@ <h1>Hello World (Read an Image)</h1>
 
     // Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../distributables/";
     const resultsContainer = document.querySelector("#results");
 
     let cvRouter; // an instance of CaptureVisionRouter
diff --git a/foundational-api-samples/hello-world/requirejs.html b/foundational-api-samples/hello-world/requirejs.html
index 11c18d93..51d40a95 100644
--- a/foundational-api-samples/hello-world/requirejs.html
+++ b/foundational-api-samples/hello-world/requirejs.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
     <meta name="keywords" content="barcode, camera, RequireJS" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/requirejs.html" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/requirejs.html" />
     <title>Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera)</title>
     <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
   </head>
diff --git a/foundational-api-samples/hello-world/svelte/README.md b/foundational-api-samples/hello-world/svelte/README.md
index e4ed899b..25f6a363 100644
--- a/foundational-api-samples/hello-world/svelte/README.md
+++ b/foundational-api-samples/hello-world/svelte/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000](htt
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/svelte">Hello World for Vite + Svelte + TS - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/svelte">Hello World for Vite + Svelte + TS - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/vue/README.md b/foundational-api-samples/hello-world/vue/README.md
index de0e918b..62acb9fc 100644
--- a/foundational-api-samples/hello-world/vue/README.md
+++ b/foundational-api-samples/hello-world/vue/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.5.3000](htt
 
 ## Official Sample
 
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/vue3">Hello World in Vue 3 - Source Code</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue3">Hello World in Vue 3 - Source Code</a>
 
 ## Preparation
 
diff --git a/foundational-api-samples/hello-world/vue/index.html b/foundational-api-samples/hello-world/vue/index.html
index e9c29d99..1072379a 100644
--- a/foundational-api-samples/hello-world/vue/index.html
+++ b/foundational-api-samples/hello-world/vue/index.html
@@ -9,7 +9,7 @@
       content="Dynamsoft Barcode Reader in a Vue 3 Application, helps read barcodes from camera or images."
     />
     <meta name="keywords" content="barcodes, camera, images, vue, vue3" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/hello-world/vue/dist/" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/DBR/JS/foundational-api-samples/hello-world/vue/dist/" />
     <title>Hello World for Vue 3 - Dynamsoft Barcode Reader Sample</title>
   </head>
   <body>
diff --git a/foundational-api-samples/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/foundational-api-samples/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html
index 0594b2ad..f1684406 100644
--- a/foundational-api-samples/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html
+++ b/foundational-api-samples/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
     <meta name="keywords" content="camera based barcode reading" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html" />
     <title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
   </head>
 
diff --git a/foundational-api-samples/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html b/foundational-api-samples/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html
index bec989b7..63672593 100644
--- a/foundational-api-samples/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html
+++ b/foundational-api-samples/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
     <meta name="keywords" content="camera based barcode reading" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html" />
     <title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
   </head>
 
diff --git a/foundational-api-samples/others/debug/README.md b/foundational-api-samples/others/debug/README.md
index 29c7e025..0bc80664 100644
--- a/foundational-api-samples/others/debug/README.md
+++ b/foundational-api-samples/others/debug/README.md
@@ -6,7 +6,7 @@ This sample is designed to:
 2. Check if your device and browser are compatible with the camera and to what extent.
 3. Collect video frames for analysis. (Require to host the sample locally)
 
-You can directly debug 1 and 2 in this link: [https://demo.dynamsoft.com/Samples/DBR/JS/others/debug/public/index.html](https://demo.dynamsoft.com/Samples/DBR/JS/others/debug/public/index.html)
+You can directly debug 1 and 2 in this link: [https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/others/debug/public/index.html](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/others/debug/public/index.html)
 
 Item 3 we will introduce in detail.
 
@@ -20,7 +20,7 @@ The following shows how to host the sample and collect frames.
 
 The sample can be downloaded from
 
-<a target_="blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug" alt="Debug Sample on GitHub">Debug Sample on GitHub</a>
+<a target_="blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug" alt="Debug Sample on GitHub">Debug Sample on GitHub</a>
 
 Note that the entire folder is required. To download only the files in this folder, try using "https://downgit.github.io/#/home".
 
diff --git a/foundational-api-samples/others/debug/public/index.html b/foundational-api-samples/others/debug/public/index.html
index 3294d3c0..c0f335a3 100644
--- a/foundational-api-samples/others/debug/public/index.html
+++ b/foundational-api-samples/others/debug/public/index.html
@@ -47,7 +47,8 @@ <h1 style="font-size: 1.5em">Read Barcodes from Camera - Debug</h1>
 
     // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../distributables/";
     const init = async () => {
       try {
         // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
diff --git a/foundational-api-samples/use-case/README.md b/foundational-api-samples/use-case/README.md
index 0f98c3e5..354c3234 100644
--- a/foundational-api-samples/use-case/README.md
+++ b/foundational-api-samples/use-case/README.md
@@ -4,8 +4,8 @@ It's difficult to type long text on mobile devices, but if that text is encoded
 
 The following sample demonstrates how to utilize the SDK to fill out form fields.
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Demo</a>
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Source Code</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Demo</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Source Code</a>
 
 ## Read the PDF417 Barcode on the Driver's License
 
@@ -13,8 +13,8 @@ The PDF417 barcode on an AAMVA-compatible driver's license contains information
 
 The following official sample shows how to use the SDK to read and extract driver's license information.
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html">Read the PDF417 Barcode on the Driver&apos;s License - Demo</a>
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/read-a-drivers-license/index.html">Read the PDF417 Barcode on the Driver&apos;s License - Source Code</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html">Read the PDF417 Barcode on the Driver&apos;s License - Demo</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-a-drivers-license/index.html">Read the PDF417 Barcode on the Driver&apos;s License - Source Code</a>
 
 Also, see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/).
 
@@ -24,8 +24,8 @@ When the SDK picks up a barcode in a video stream, it will automatically highlig
 
 The following official sample shows how to show the result texts on the video.
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Demo</a>
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Source Code</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Demo</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Source Code</a>
 
 ## Locate an Item via Barcode
 
@@ -35,8 +35,8 @@ The following sample demonstrates how to utilize the SDK to find an item using a
 
 Additionally, this sample demonstrates how to utilize the SDK to fill out form fields, creating a custom UI with [Dynamsoft Camera Enhancer (DCE)](https://www.dynamsoft.com/camera-enhancer/docs/core/introduction/index.html), and using DCE to draw shapes/images on the CameraView to create indicators for each barcode that has been detected!
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/locate-an-item-with-barcode/index.html">Locate an Item with Barcode - Demo</a>
-* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/locate-an-item-with-barcode/index.html">Locate an Item with Barcode - Source Code</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Locate an Item with Barcode - Demo</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Locate an Item with Barcode - Source Code</a>
 
 
 ## Support
diff --git a/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html b/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html
index c8af07e3..d2b0b64d 100644
--- a/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html
+++ b/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html
@@ -83,7 +83,8 @@ <h3>Click each input box to fill in!</h3>
 
     // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../distributables/";
     const inputsContainer = document.getElementById("inputs-container");
     const loadingIndicator = document.getElementById("lib-load");
     const cameraViewContainer = document.getElementById("camera-view-container");
diff --git a/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html b/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html
index 1b0a2033..0e1518e3 100644
--- a/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html
+++ b/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html
@@ -308,7 +308,7 @@ <h6 id="camera-switch-notification"></h6>
   <img hidden id="cross-icon" src="icons/cross-icon.svg" />
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.min.js"></script>
   <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
+  <!-- <script src="../../../../distributables/dbr.bundle.js"></script> -->
 
   <script>
     /** LICENSE ALERT - README
@@ -324,6 +324,8 @@ <h6 id="camera-switch-notification"></h6>
 
     // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
     Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../../distributables/";
 
     const cameraViewContainer = document.getElementById("camera-view-container");
     const cameraViewTitle = document.getElementById("camera-view-title");
diff --git a/foundational-api-samples/use-case/read-a-drivers-license/index.html b/foundational-api-samples/use-case/read-a-drivers-license/index.html
index 186ce37e..39558978 100644
--- a/foundational-api-samples/use-case/read-a-drivers-license/index.html
+++ b/foundational-api-samples/use-case/read-a-drivers-license/index.html
@@ -51,7 +51,7 @@ <h1>Read a Driver's License</h1>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.min.js"></script>
   <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
+  <!-- <script src="../../../../distributables/dbr.bundle.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.4.32/dist/dcp.js"></script>
   <script>
     /** LICENSE ALERT - README
@@ -69,6 +69,8 @@ <h1>Read a Driver's License</h1>
 
     // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR", "DCP"]);
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../../distributables/";
     Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID");
     Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID_WITH_MAG_STRIPE");
     Dynamsoft.DCP.CodeParserModule.loadSpec("SOUTH_AFRICA_DL");
diff --git a/foundational-api-samples/use-case/show-result-texts-on-the-video.html b/foundational-api-samples/use-case/show-result-texts-on-the-video.html
index 4b175b4c..481db3b0 100644
--- a/foundational-api-samples/use-case/show-result-texts-on-the-video.html
+++ b/foundational-api-samples/use-case/show-result-texts-on-the-video.html
@@ -64,7 +64,8 @@ <h3>Scan barcodes to display results as overlays on video</h3>
 
     // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
     Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-
+    // // If the network is unstable or you prefer to self-host the SDK, uncomment the line below to define the root path of the engine files
+    // Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "../../../distributables/";
     const resultsContainer = document.querySelector("#results");
 
     (async () => {
diff --git a/index.html b/index.html
index 3d187520..27b1ed63 100644
--- a/index.html
+++ b/index.html
@@ -6,122 +6,216 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico" type="image/x-icon" />
     <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/index.html">
-    <link rel="stylesheet" href="balloon.min.css">
-    <!-- Used for tooltip styling -->
     <title>Dynamsoft Barcode Reader Samples</title>
 </head>
 
 <body>
+    <!-- This is a sample routing page. SDK users are not necessary to study this html. -->
+    <style>
+        body {
+            text-align: center;
+            font-family: "Open Sans", sans-serif;
+        }
+    </style>
+    <!--
+        For document, copy start from here
+        search `href="barcode-scanner-api-samples` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples`
+        search `href="foundational-api-samples` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples`
+    -->
+    <style>
+        /* balloon.min.css Used for tooltip styling */
+        :root{--balloon-border-radius: 2px;--balloon-color: rgba(16,16,16,0.95);--balloon-text-color: #fff;--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:2px;color:var(--balloon-text-color);border-radius:var(--balloon-border-radius);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%;transform-origin:top;transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%;transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after,[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{width:100%}
+    </style>
+    <style>
+        .filetree {
+            text-align: left;
+            background-color: #fafafa;
+            border: 4px solid #dbdbdb;
+            border-radius: 4px;
+            margin: 0 auto;
+            max-width: 800px;
+            padding: 16px 32px;
+        }
+        
+        .filetree .ds-logo {
+            height: 3vh;
+            background: url(logo-dynamsoft-black.svg) no-repeat 0;
+        }
+        
+        .filetree h3 {
+            margin: 1vh auto;
+        }
+        
+        .filetree .file {
+            display: block;
+            font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+            letter-spacing: 0.3px;
+            line-height: 32px;
+            color: #333;
+        }
+        
+        .filetree .children {
+            padding-left: 24px;
+            position: relative;
+        }
+        
+        .filetree .children .file {
+            position: relative;
+        }
+        
+        .filetree .children .file::before {
+            content: '';
+            left: -18px;
+            bottom: 16px;
+            width: 16px;
+            height: 20px;
+            position: absolute;
+            border-width: 0 0 1px 1px;
+            border-style: solid;
+            border-color: #dbdbdb;
+            border-radius: 0 0 0 3px;
+        }
+        
+        .filetree .button.title {
+            line-height: 15px;
+        }
+        
+        .filetree .title img,
+        .filetree .title svg {
+            height: 17px;
+            vertical-align: middle;
+        }
+        
+        .filetree .tooltipIcon {
+            display: inline-block;
+            width: 17px;
+            height: 17px;
+            vertical-align: middle;
+            background-size: 100%;
+            margin-left: 5px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat;
+        }
+        
+        .filetree .github {
+            display: inline-block;
+            width: 17px;
+            height: 17px;
+            vertical-align: middle;
+            background-size: 100%;
+            margin-left: 5px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALISURBVDhPhZNrSNNRGMafzamVW8s0nWbetSw0wWtFIQlBoFTohzKioqK+VEJBhbm+BVnQByPICgksy+blgxeqeQntoqikhppadjG1i7Q5t0Ur38553QaG0A/Ozt7nvOc577n8QQtQUvaQ0rPySBkST1CHcp+WtYdulFU4M+Yzz8RQ+5jgHcQTao0tZLPbWbfbf1Jd41NKz84jeAVRZd0T1l24TfSXiwnaCOobGHIqC9M3OCzywklfVOxUnCaGOlHB0gj65XCw+D8cjt+8YGX9XEVsIrfQ0/+GhUvXb1NGzgGa/DZF3X39VPOoibp6++nL9ynKyD1IRWJc0ivy4R3M/1Uldw1IztyChLhYSIZHP6KluRW6mBRAqRBNCczOikYcx0SGcl68yE/J3Iyb9wxQlj6oRuGJozwgGRoZhadGDU2APzT+ftAs953rRSz1oZH3zkzgfP4xlN6vhkJen2ngBTRqH3ye/IqQ6CSog4OgUIgq/kFUjpnxCYyNdGGlLgCWGSt8126EctY0zQYSKUKlWtBAwrqHCharjWM574/JLHbsuxQms4XF1VERIslDHIE4gwVgXSyyJiqc4x9mMzyWaaFMTYyHse0li3KhwnMnYf00DqvNxuVLZG+12VkvOHOcNUljWzvSxHzIJ564LUfeFJ29eJX7552v6PBpPflEJ3NbEp1E+/MLqPlZB4+7SMjcReJ2nO/ES8fvxDxtoZDkrZwgY+jiSB2TQlgRS2MTk6y76Oju5fclYRP58uSHJrlTUUMIjCPPsPW0ODKJNLGpBL9oamhq5XGJ2BrBZxVVNRg5ZhPJhSvX2Gjw7SjHckuygjmTGGpt72a9s+c1G+hFvgu3iaSq3khYFEybdu6jQ6f0hOB1c9sRvYw3ZO8leAa6vxkXCvnjPGw3t8orUV5Tj+F3H/j6tVoNYiPDsHvHdhzJy3VmuQD+AtcedHvcbgpyAAAAAElFTkSuQmCC);
+        }
+    </style>
     <div class="filetree">
         <a href="https://www.dynamsoft.com/" target="_blank">
             <div class="ds-logo"></div>
         </a>
-    <div class="file">
-        <h3>BarcodeScanner API Samples</h3>
-    </div>
-    <div class="children">
-        <div class="file">Scan Single Barcode</div>
-        <div class="children">
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to scan a barcode from camera." class="button title" href="barcode-scanner-api-samples/scan-single-barcode/hello-world.html">Hello World</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Check code on GitHub"></a>
-            </div>
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                Application." class="button title" onclick="linkRedirect('angular')" href="javascript:void(0);">Hello World in
-                    Angular (<img alt="Angular logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
-                <span id="icon003" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular" title="Check code on GitHub"></a>
-            </div>
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                Application." class="button title" onclick="linkRedirect('react')" href="javascript:void(0);">
-                    Hello World in
-                    React (<img alt="React logo"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
-                <span id="icon004" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react" title="Check code on GitHub"></a>
-            </div>
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                Application." class="button title" onclick="linkRedirect('vue')" href="javascript:void(0);">
-                    Hello World in
-                    Vue (<img alt="Vue logo"
-                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" />)</a>
-                <span id="icon006" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue" title="Check code on GitHub"></a>
-            </div>
+        <div class="file">
+            <h3>BarcodeScanner API Samples</h3>
         </div>
-        <div class="file">Scan Multiple Barcodes</div>
         <div class="children">
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Minimum necessary 
-                JavaScript code to read barcodes from camera." class="button title" href="barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html">Hello World
-            </a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html" title="Check code on GitHub"></a>
+            <div class="file">Scan Single Barcode</div>
+            <div class="children">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
+                    JavaScript code to scan a barcode from camera."><a class="button title" href="barcode-scanner-api-samples/scan-single-barcode/hello-world.html">Hello World</a><span id="icon001" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Check code on GitHub"></a></span>
+                </div>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular">Hello World in
+                        Angular (<img alt="Angular logo"
+                            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
+                    <span id="icon003" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular" title="Check code on GitHub"></a></span>
+                </div>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react">
+                        Hello World in
+                        React (<img alt="React logo"
+                            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
+                    <span id="icon004" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react" title="Check code on GitHub"></a></span>
+                </div>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
+                                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue">
+                        Hello World in
+                        Vue (<img alt="Vue logo"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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" />)</a>
+                    <span id="icon006" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue" title="Check code on GitHub"></a></span>
+                </div>
             </div>
-            <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Simulates a shopping 
-                experience where users scan barcodes to add items to a dynamic cart. " class="button title" href="barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html">Scan 
-                to Cart Simulation</a><span id="icon001" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html" title="Check code on GitHub"></a>
+            <div class="file">Scan Multiple Barcodes</div>
+            <div class="children">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
+                    JavaScript code to read barcodes from camera."><a class="button title" href="barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html">Hello World
+                </a><span id="icon001" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html" title="Check code on GitHub"></a></span>
+                </div>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Simulates a shopping 
+                    experience where users scan barcodes to add items to a dynamic cart. "><a class="button title" href="barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html">Scan 
+                    to Cart Simulation</a><span id="icon001" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html" title="Check code on GitHub"></a></span>
+                </div>
             </div>
         </div>
-        </div>
         <div class="file">
             <h3>Foundational API Samples</h3>
         </div>
         <div class="children">
             <div class="file">Hello World</div>
             <div class="children">
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Minimum necessary 
-                    JavaScript code to read barcodes from camera." class="button title" href="foundational-api-samples/hello-world/hello-world.html">Hello 
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Minimum necessary 
+                    JavaScript code to read barcodes from camera."><a class="button title" href="foundational-api-samples/hello-world/hello-world.html">Hello 
                     World</a><span id="icon001" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/hello-world.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/hello-world.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode barcodes
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Decode barcodes
                     using images that are stored locally,
-                    whether on mobile or desktop." class="button title" href="foundational-api-samples/hello-world/read-an-image.html">Read
+                    whether on mobile or desktop."><a class="button title" href="foundational-api-samples/hello-world/read-an-image.html">Read
                         an Existing
                         Image</a><span id="icon002" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/read-an-image.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/read-an-image.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
-                    Application." class="button title" onclick="linkRedirect('angular')" href="javascript:void(0);">Hello World in
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in an Angular
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular">Hello World in
                         Angular (<img alt="Angular logo"
                             src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />)</a>
                     <span id="icon003" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Blazor
-                    Application." class="button title" onclick="linkRedirect('blazor')" href="javascript:void(0);">Hello World in
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Blazor
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor">Hello World in
                         Blazor (<img alt="Blazor logo"
                             src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjIyNDgiIHZpZXdCb3g9Ii0xMC4xMjAyMTg3NSAtNTMuNjA5NTEwMzYgMzM5Ljk1Mzk3NTI5IDM0My4wMjIzNTA5MyIgd2lkdGg9IjI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMwMy45MzUgODguNDc5Yy02LjU5OCA0MS4zNjItMjcuNjUzIDc5LjA0MS01OS40MiAxMDYuMzM1cy03Mi4xODUgNDIuNDMzLTExNC4wNjQgNDIuNzIzYy04LjQ4My4zMjYtMTYuOTc3LS4xOS0yNS4zNTgtMS41MzlhNzcuNzIzIDc3LjcyMyAwIDAgMSAtNjQuNjMtNzMuMjY2IDc1LjQ3OSA3NS40NzkgMCAwIDEgMjIuMTQtNTIuNzYyIDc1LjQ2IDc1LjQ2IDAgMCAxIDEwNS44ODUtLjc0OCA3NS40NzggNzUuNDc4IDAgMCAxIDIyLjg4NCA1Mi40NDNjLjMxNyAxMi41MS01LjEwMiAyMy40ODMtMTYuMjM5IDIzLjgtMTEuODk5IDAtMTcuNDc3LTguNDkxLTE3LjQ3Ny0xOS45MzR2LTMxLjc5N2ExOS40NzggMTkuNDc4IDAgMCAwIC0xOS4zMjMtMTkuNDk0aC0yNi42NTNhNDYuMzg2IDQ2LjM4NiAwIDAgMCAtMzkuMTE5IDIwLjk2MSA0Ni4zOTkgNDYuMzk5IDAgMCAwIDMxLjU4NyA3MS4yNjggNDYuMzkyIDQ2LjM5MiAwIDAgMCA0MS44LTE0LjkxMWwuOTMyLTEuMzkuOTMzIDEuNTQzYTMyLjgyIDMyLjgyIDAgMCAwIDI3Ljk4NiAxMy4zMjggMzYuOTkyIDM2Ljk5MiAwIDAgMCAzNC4yNjgtMzguNjcxIDEwMC42NCAxMDAuNjQgMCAwIDAgLTIuNzYxLTI0LjU3N2MtNC45NDMtMjIuNzM0LTE4LjEyNi00Mi44MzQtMzcuMDA4LTU2LjQyM2E5NC4xNTMgOTQuMTUzIDAgMCAwIC0xMjUuMjM2IDEzLjcxOCA5NC4xNzUgOTQuMTc1IDAgMCAwIC0yMy45MiA2My4wOTcgOTUuMzUyIDk1LjM1MiAwIDAgMCAyNy40NzMgNjUuODI0IDk1LjMzMSA5NS4zMzEgMCAwIDAgNjUuNDQ4IDI4LjM0NHM2Ljk4LjYzNSAxNC44NDkuNDU0YTIwMC45NCAyMDAuOTQgMCAwIDAgMTA3Ljc2OS0zMi4xNTVjLjQ1Ny0uMzE4LjkxNC4zMTcuNjEuNzhhMTU4LjE3NyAxNTguMTc3IDAgMCAxIC0xMjMuMjI1IDUwLjM5NiAxMTEuMTg1IDExMS4xODUgMCAwIDEgLTgwLjk2MS0zMi44NzEgMTExLjIxNSAxMTEuMjE1IDAgMCAxIC0zMi4yMTUtODEuMjMyIDExNS4wOTkgMTE1LjA5OSAwIDAgMSA0Ni4yMjMtOTIuMTcgMTEyLjcwNCAxMTIuNzA0IDAgMCAxIDY2LjQ5Ny0yMS45NTNoMzUuNzcyYTEwMC42MzcgMTAwLjYzNyAwIDAgMCA3NC4yNDctMzIuNzg0IDEuMzkgMS4zOSAwIDAgMSAuNzU1LS40MzEgMS40MTggMS40MTggMCAwIDEgMS41Mi42NjNjLjE1My4yNTcuMjIyLjU1NS4xOTcuODU0YTEwMC45MyAxMDAuOTMgMCAwIDEgLTE1LjYwOCA0NS4xNCAxLjM4NiAxLjM4NiAwIDAgMCAuMTE1IDEuNTExIDEuMzg3IDEuMzg3IDAgMCAwIDEuNDI0LjUwNyAxMDguMTU4IDEwOC4xNTggMCAwIDAgNzUuMTk4LTYyLjAxM2MuMTczLS4yNzcuNDExLS41MDcuNjk1LS42N2ExLjkwMiAxLjkwMiAwIDAgMSAxLjg2OSAwYy4yODQuMTYyLjUyMy4zOTIuNjk0LjY3YTEzNy4wOTggMTM3LjA5OCAwIDAgMSAxMy40NDcgODcuNDMyem0tMTg5Ljk2NCA0NC44NThhMjcuODIzIDI3LjgyMyAwIDAgMCAtMjcuMjkzIDMzLjI1NSAyNy44MyAyNy44MyAwIDAgMCAyMS44NjIgMjEuODY1IDI3LjgyNCAyNy44MjQgMCAwIDAgMzMuMjUxLTI3LjI5NnYtMjUuOTc3YTIuMDA3IDIuMDA3IDAgMCAwIC0xLjkwNC0xLjkwNHoiIGZpbGw9IiM3MDJhZjciLz48L3N2Zz4=" />)</a>
                     <span id="icon003" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/Blazor" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                    Application." class="button title" onclick="linkRedirect('react')" href="javascript:void(0);">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react">
                         Hello World in
                         React (<img alt="React logo"
                             src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
                     <span id="icon004" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
-                    Application." class="button title" onclick="linkRedirect('react_hooks')" href="javascript:void(0);">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a React
+                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks">
                     Hello World in
                         React(using Hooks)(<img alt="React logo"
                             src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NDEuOSA1OTUuMyI+PGcgZmlsbD0iIzYxREFGQiI+PHBhdGggZD0iTTY2Ni4zIDI5Ni41YzAtMzIuNS00MC43LTYzLjMtMTAzLjEtODIuNCAxNC40LTYzLjYgOC0xMTQuMi0yMC4yLTEzMC40LTYuNS0zLjgtMTQuMS01LjYtMjIuNC01LjZ2MjIuM2M0LjYgMCA4LjMuOSAxMS40IDIuNiAxMy42IDcuOCAxOS41IDM3LjUgMTQuOSA3NS43LTEuMSA5LjQtMi45IDE5LjMtNS4xIDI5LjQtMTkuNi00LjgtNDEtOC41LTYzLjUtMTAuOS0xMy41LTE4LjUtMjcuNS0zNS4zLTQxLjYtNTAgMzIuNi0zMC4zIDYzLjItNDYuOSA4NC00Ni45Vjc4Yy0yNy41IDAtNjMuNSAxOS42LTk5LjkgNTMuNi0zNi40LTMzLjgtNzIuNC01My4yLTk5LjktNTMuMnYyMi4zYzIwLjcgMCA1MS40IDE2LjUgODQgNDYuNi0xNCAxNC43LTI4IDMxLjQtNDEuMyA0OS45LTIyLjYgMi40LTQ0IDYuMS02My42IDExLTIuMy0xMC00LTE5LjctNS4yLTI5LTQuNy0zOC4yIDEuMS02Ny45IDE0LjYtNzUuOCAzLTEuOCA2LjktMi42IDExLjUtMi42Vjc4LjVjLTguNCAwLTE2IDEuOC0yMi42IDUuNi0yOC4xIDE2LjItMzQuNCA2Ni43LTE5LjkgMTMwLjEtNjIuMiAxOS4yLTEwMi43IDQ5LjktMTAyLjcgODIuMyAwIDMyLjUgNDAuNyA2My4zIDEwMy4xIDgyLjQtMTQuNCA2My42LTggMTE0LjIgMjAuMiAxMzAuNCA2LjUgMy44IDE0LjEgNS42IDIyLjUgNS42IDI3LjUgMCA2My41LTE5LjYgOTkuOS01My42IDM2LjQgMzMuOCA3Mi40IDUzLjIgOTkuOSA1My4yIDguNCAwIDE2LTEuOCAyMi42LTUuNiAyOC4xLTE2LjIgMzQuNC02Ni43IDE5LjktMTMwLjEgNjItMTkuMSAxMDIuNS00OS45IDEwMi41LTgyLjN6bS0xMzAuMi02Ni43Yy0zLjcgMTIuOS04LjMgMjYuMi0xMy41IDM5LjUtNC4xLTgtOC40LTE2LTEzLjEtMjQtNC42LTgtOS41LTE1LjgtMTQuNC0yMy40IDE0LjIgMi4xIDI3LjkgNC43IDQxIDcuOXptLTQ1LjggMTA2LjVjLTcuOCAxMy41LTE1LjggMjYuMy0yNC4xIDM4LjItMTQuOSAxLjMtMzAgMi00NS4yIDItMTUuMSAwLTMwLjItLjctNDUtMS45LTguMy0xMS45LTE2LjQtMjQuNi0yNC4yLTM4LTcuNi0xMy4xLTE0LjUtMjYuNC0yMC44LTM5LjggNi4yLTEzLjQgMTMuMi0yNi44IDIwLjctMzkuOSA3LjgtMTMuNSAxNS44LTI2LjMgMjQuMS0zOC4yIDE0LjktMS4zIDMwLTIgNDUuMi0yIDE1LjEgMCAzMC4yLjcgNDUgMS45IDguMyAxMS45IDE2LjQgMjQuNiAyNC4yIDM4IDcuNiAxMy4xIDE0LjUgMjYuNCAyMC44IDM5LjgtNi4zIDEzLjQtMTMuMiAyNi44LTIwLjcgMzkuOXptMzIuMy0xM2M1LjQgMTMuNCAxMCAyNi44IDEzLjggMzkuOC0xMy4xIDMuMi0yNi45IDUuOS00MS4yIDggNC45LTcuNyA5LjgtMTUuNiAxNC40LTIzLjcgNC42LTggOC45LTE2LjEgMTMtMjQuMXpNNDIxLjIgNDMwYy05LjMtOS42LTE4LjYtMjAuMy0yNy44LTMyIDkgLjQgMTguMi43IDI3LjUuNyA5LjQgMCAxOC43LS4yIDI3LjgtLjctOSAxMS43LTE4LjMgMjIuNC0yNy41IDMyem0tNzQuNC01OC45Yy0xNC4yLTIuMS0yNy45LTQuNy00MS03LjkgMy43LTEyLjkgOC4zLTI2LjIgMTMuNS0zOS41IDQuMSA4IDguNCAxNiAxMy4xIDI0IDQuNyA4IDkuNSAxNS44IDE0LjQgMjMuNHpNNDIwLjcgMTYzYzkuMyA5LjYgMTguNiAyMC4zIDI3LjggMzItOS0uNC0xOC4yLS43LTI3LjUtLjctOS40IDAtMTguNy4yLTI3LjguNyA5LTExLjcgMTguMy0yMi40IDI3LjUtMzJ6bS03NCA1OC45Yy00LjkgNy43LTkuOCAxNS42LTE0LjQgMjMuNy00LjYgOC04LjkgMTYtMTMgMjQtNS40LTEzLjQtMTAtMjYuOC0xMy44LTM5LjggMTMuMS0zLjEgMjYuOS01LjggNDEuMi03Ljl6bS05MC41IDEyNS4yYy0zNS40LTE1LjEtNTguMy0zNC45LTU4LjMtNTAuNiAwLTE1LjcgMjIuOS0zNS42IDU4LjMtNTAuNiA4LjYtMy43IDE4LTcgMjcuNy0xMC4xIDUuNyAxOS42IDEzLjIgNDAgMjIuNSA2MC45LTkuMiAyMC44LTE2LjYgNDEuMS0yMi4yIDYwLjYtOS45LTMuMS0xOS4zLTYuNS0yOC0xMC4yek0zMTAgNDkwYy0xMy42LTcuOC0xOS41LTM3LjUtMTQuOS03NS43IDEuMS05LjQgMi45LTE5LjMgNS4xLTI5LjQgMTkuNiA0LjggNDEgOC41IDYzLjUgMTAuOSAxMy41IDE4LjUgMjcuNSAzNS4zIDQxLjYgNTAtMzIuNiAzMC4zLTYzLjIgNDYuOS04NCA0Ni45LTQuNS0uMS04LjMtMS0xMS4zLTIuN3ptMjM3LjItNzYuMmM0LjcgMzguMi0xLjEgNjcuOS0xNC42IDc1LjgtMyAxLjgtNi45IDIuNi0xMS41IDIuNi0yMC43IDAtNTEuNC0xNi41LTg0LTQ2LjYgMTQtMTQuNyAyOC0zMS40IDQxLjMtNDkuOSAyMi42LTIuNCA0NC02LjEgNjMuNi0xMSAyLjMgMTAuMSA0LjEgMTkuOCA1LjIgMjkuMXptMzguNS02Ni43Yy04LjYgMy43LTE4IDctMjcuNyAxMC4xLTUuNy0xOS42LTEzLjItNDAtMjIuNS02MC45IDkuMi0yMC44IDE2LjYtNDEuMSAyMi4yLTYwLjYgOS45IDMuMSAxOS4zIDYuNSAyOC4xIDEwLjIgMzUuNCAxNS4xIDU4LjMgMzQuOSA1OC4zIDUwLjYtLjEgMTUuNy0yMyAzNS42LTU4LjQgNTAuNnpNMzIwLjggNzguNHoiLz48Y2lyY2xlIGN4PSI0MjAuOSIgY3k9IjI5Ni41IiByPSI0NS43Ii8+PHBhdGggZD0iTTUyMC41IDc4LjF6Ii8+PC9nPjwvc3ZnPg==" />)</a>
                     <span id="icon013" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
-                                    Application." class="button title" onclick="linkRedirect('vue')" href="javascript:void(0);">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Vue 3
+                                    Application."><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue">
                         Hello World in
                         Vue (<img alt="Vue logo"
                             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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" />)</a>
                     <span id="icon006" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Next.js
-                            Application." target="_blank" class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next#readme">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Next.js
+                            Application." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next#readme">
                         Hello World in
                         Next.js (<svg width="30px" height="17px" viewBox="0 0 207 124" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -144,10 +238,10 @@ <h3>Foundational API Samples</h3>
                                 </g>
                             </g>
                         </svg>)</a><span id="icon007" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a NuxtJS
-                            Application." class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a NuxtJS
+                            Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme">
                         Hello World in
                         NuxtJS (<svg width="20px" height="17px" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 400 400">
@@ -163,241 +257,68 @@ <h3>Foundational API Samples</h3>
                                     fill="#108775" />
                             </g>
                         </svg>)</a><span id="icon008" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Electron
-                            Application." class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera and images in a Electron
+                            Application."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme">
                         Hello World in
                         Electron (<img alt="Electron logo"
                             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAABmJLR0QA/wD/AP+gvaeTAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTAzLTMxVDIzOjUxOjI3KzAwOjAwzwUHXwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wMy0zMVQyMzo1MToyNyswMDowML5Yv+MAAANzSURBVDhPdZRtTFtlFMd/vbe0aymUQh1gmakjE4GhLkt0i1OBbUxXkYFbzAzGaNTEMP1gMrfMTDGonzf3kmX4zbcP7sXBkL2AG27OGESNcYVukGVAHUIUWgT6Xs9zByEz8dzcPDfPec7/+Z9z/uea0mL8x46faKej8xx+f4BQKIzTmU1ZaQm+zTU821A7f2rR7gC5cPES2xtfQ9c07HYbpFJY7XZis7OkNZ1ZWZOy98WnR6muemw+CrT5lYOHW6mrbyTXlYNLXl32VtZs4uHntlPy+BOQiBv7yr+loZEDh1pvB4oZTBQDBbBsmYdkPE46lVQuHG43q7bUk4hEuPFTL7f6/Wi6GT0jg5GRIKdOfk5V5brbIAWeUrnFKbRnKN+4CZfHw1/Dw/R3d5GIRVnicFDz1k6unj2D3eWi/9suLJlZTE1OcSvYj17xwOrms+e60SXXuvdbGOju5vql75gMjlK2fgMPPl0roEXc7OsTciamJyaobnpDznWh+Hq996BnZuU1j46MUvzIGoZ/6WMsMEB2fj7rd7zJ4JXv+f1MJ+OD1w1QBfhbZ4dgmbDY7ETCYWKxOJpqo9VqZWJokIL77sezsoLVDVs51fwufw/fJJVMYha/ZjYb9TLJk+e91wC1WC34+wNo4elpKZbOzOQk0Zl/8FRU0HVgP/acHCNwV89lEtEoiBKUGDJsNhy5ucTm5tBECuGwxGdnZ4kzTSqRYOmKFaTkNgWq9tTNfcePGW1U9VBdW1pcTM/RI5KOzTij4rWyshKikShur1dq8jO/trdR3/KhkYICuXDkkPEtVNCF2VggYDBLxGLExa/iNd9TNUyHQixfs1ZEVWkcPrb7bR6qfYZ1L70slHWDejqZEr3FjRo9uXMX5Rs2Ep4KGaNg6MR913Ie3baNovJyzu/fh7OwEEeem7EBP2tfeFHSUKnJzcIgU3Riczq50dvLj21tTIwPLSj2Mj7fVjyFBVhkVqIzM/h27+Hr9/ZitlgkOMKqunqGfrgirGSOhFVwbJyOjq8WFavqdvDwJ+x5p4WioruNTqjCVb7eRKDnIqVV1XR9vM+ogxqH0eAffPTBXnY0vaJCF0GUKUbPN75qtM62xEpaOpYvHfvz2jVMGRbmZIbUFH/5WavBYMHuAFmwEyfbOf3NefxXB5iS4uXIXP3//wT+Bb4xmi8orIo3AAAAAElFTkSuQmCC">)</a>
                     <span id="icon009" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera in a progressive web application." class="button title" href="foundational-api-samples/hello-world/pwa/helloworld-pwa.html">Hello World in
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a progressive web application."><a class="button title" href="foundational-api-samples/hello-world/pwa/helloworld-pwa.html">Hello World in
                         PWA</a><span id="icon010" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses RequireJS." class="button title" href="foundational-api-samples/hello-world/requirejs.html">Hello
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses RequireJS."><a class="button title" href="foundational-api-samples/hello-world/requirejs.html">Hello
                         World with
                         RequireJS</a><span id="icon011" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/requirejs.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/hello-world/requirejs.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses ES6." class="button title" href="foundational-api-samples/hello-world/es6.html">Hello
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in a web application that uses ES6."><a class="button title" href="foundational-api-samples/hello-world/es6.html">Hello
                         World with
                         ES6</a><span id="icon012" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Read barcodes from camera in WebView." target="_blank" class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview">
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from camera in WebView." target="_blank"><a class="button title" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview">
                     Hello World in
                     WebView </a><span id="icon007" class="tooltipIcon"></span>
-                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview" title="Check code on GitHub"></a>
+                <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview" title="Check code on GitHub"></a></span>
             </div>
             </div>
             <div class="file">Use Case</div>
             <div class="children">
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Read barcodes to fill a form." class="button title" href="foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Video and
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes to fill a form."><a class="button title" href="foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html">Read Video and
                         Fill a
                         Form</a><span id="icon041" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
-                    license (AAMVA compliant) and parse it." class="button title" href="foundational-api-samples/use-case/read-a-drivers-license/index.html">Read a
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read the PDF417 barcode on a driver's
+                    license (AAMVA compliant) and parse it."><a class="button title" href="foundational-api-samples/use-case/read-a-drivers-license/index.html">Read a
                         Driver's License</a><span id="icon042" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-a-drivers-license/index.html" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/read-a-drivers-license/index.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Read barcodes from camera and show result texts on the video." class="button title" href="foundational-api-samples/use-case/show-result-texts-on-the-video.html">Show Result Texts on the Video</a><span id="icon042" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html" title="Check code on GitHub"></a>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Read barcodes from camera and show result texts on the video."><a class="button title" href="foundational-api-samples/use-case/show-result-texts-on-the-video.html">Show Result Texts on the Video</a><span id="icon042" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html" title="Check code on GitHub"></a></span>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Locate an item quickly by scanning barcodes." class="button title" href="foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Find Item via Barcode</a><span id="icon042" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html" title="Check code on GitHub"></a>
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Locate an item quickly by scanning barcodes."><a class="button title" href="foundational-api-samples/use-case/locate-an-item-with-barcode/index.html">Find Item via Barcode</a><span id="icon042" class="tooltipIcon"></span>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html" title="Check code on GitHub"></a></span>
                 </div>
             </div>
             <div class="file">Others</div>
             <div class="children">
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Collect image frames which failed to be read for debugging purposes." class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug">Collect
+                <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Collect image frames which failed to be read for debugging purposes."><a class="button title" target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug">Collect
                         Images for Debugging</a><span id="icon051" class="tooltipIcon"></span>
-                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug" title="Check code on GitHub"></a>
+                    <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug" title="Check code on GitHub"></a></span>
                 </div>
             </div>
         </div>
-        <div class="file"><a data-balloon-length="fit" data-balloon-pos="up" aria-label="Official demo for Dynamsoft Barcode Reader JavaScript Edition" class="button title" href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official Online Demo</a>
+        <div class="file"><span data-balloon-length="large" data-balloon-pos="up" aria-label="Official demo for Dynamsoft Barcode Reader JavaScript Edition"><a class="button title" href="https://demo.dynamsoft.com/barcode-reader-js/" target="_blank">Official Online Demo</a>
             <span id="icon051" class="tooltipIcon"></span>
-            <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-demo" title="Check code on GitHub"></a>
+            <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-demo" title="Check code on GitHub"></a></span>
         </div>
     </div>
 </body>
-<style>
-    body {
-        text-align: center;
-        font-family: "Open Sans", sans-serif;
-    }
-    
-    .ds-logo {
-        height: 3vh;
-        background: url(logo-dynamsoft-black.svg) no-repeat 0;
-    }
-    
-    h3 {
-        margin: 1vh auto;
-    }
-    
-    .description {
-        border: dashed 1px gray;
-        padding: 1vmin;
-    }
-    
-    .filetree {
-        text-align: left;
-        background-color: #fafafa;
-        border: 4px solid #dbdbdb;
-        border-radius: 4px;
-        margin: 0 auto;
-        max-width: 800px;
-        padding: 16px 32px;
-    }
-    
-    .filetree .file {
-        display: block;
-        font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-        letter-spacing: 0.3px;
-        line-height: 32px;
-        color: #333;
-    }
-    
-    .filetree .children {
-        padding-left: 24px;
-        position: relative;
-    }
-    
-    .filetree .children .file {
-        position: relative;
-    }
-    
-    .filetree .children .file::before {
-        content: '';
-        left: -18px;
-        bottom: 16px;
-        width: 16px;
-        height: 20px;
-        position: absolute;
-        border-width: 0 0 1px 1px;
-        border-style: solid;
-        border-color: #dbdbdb;
-        border-radius: 0 0 0 3px;
-    }
-    
-    [aria-label] {
-        line-height: 15px;
-    }
-    
-    .title img,
-    .title svg {
-        height: 17px;
-        vertical-align: middle;
-    }
-    
-    .tooltipIcon {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAg5JREFUOBGVkktrE2EUhjuTSUJwExCColSwFAIFaZFSwaZ0abx110rugf4Ef0Drr3AxaTKJZNFSNwYDJbgxblQQN22xFFpF0J07Dbn1OaFnGMciZOCb833vec/9GBMXfNlstmCa5n3DMBKoDznx4XDYBmuUy2XHb2J4gWKxuAB5h2Nj0EbuVyqVH4VC4UogEJjpdruL4Nl+v/+kVqt9VFvXSSqVuhEKhXYty3pg2/ZPJfhlJpO5isPXBFipVqtfXb1kkM/nXc+u4j8X+J84t4ViyU9KCAaD83L3ful0+jqZvaQ3S5T1x6vD5iH4W7CbxnkTJx3HeeYl6V3KrNfrp/r2Snq1wfvYkikMBoPnXqXcISSIttTr9f6ZhnKl+diumzJGGrWvCpXgQQiXKPOFYn5JgAMCLZooDmWMfgL78CYajW6C3/Hr9M10vhPsSJzEZQ9UMY7M5XLXyGTa5NeWRRrHWLlMboZMZJPNhmyiKsaRbO5d+vJqtLEszREZLUuNXifJZDIci8VanU5nLRKJBOjTN9VTyiQJ7NHPuPRkgscKabWUoLLZbHbQPQ2Hww6TshUXCd4Ceyz3USZywfNlHH0go3tk9EWwiz6GEAff49wii1/CcZ3Ig7KmEFuc9zj7TLQ2zftN3RGwBJFnCTQHViyVSqdgo+8vJwoS7RFOVnlPYbSAfMc5wck2WTaUp/IMAjTZicjWFTcAAAAASUVORK5CYII=) right center no-repeat;
-    }
-    
-    .github {
-        display: inline-block;
-        width: 17px;
-        height: 17px;
-        vertical-align: middle;
-        background-size: 100%;
-        margin-left: 5px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAALISURBVDhPhZNrSNNRGMafzamVW8s0nWbetSw0wWtFIQlBoFTohzKioqK+VEJBhbm+BVnQByPICgksy+blgxeqeQntoqikhppadjG1i7Q5t0Ur38553QaG0A/Ozt7nvOc577n8QQtQUvaQ0rPySBkST1CHcp+WtYdulFU4M+Yzz8RQ+5jgHcQTao0tZLPbWbfbf1Jd41NKz84jeAVRZd0T1l24TfSXiwnaCOobGHIqC9M3OCzywklfVOxUnCaGOlHB0gj65XCw+D8cjt+8YGX9XEVsIrfQ0/+GhUvXb1NGzgGa/DZF3X39VPOoibp6++nL9ynKyD1IRWJc0ivy4R3M/1Uldw1IztyChLhYSIZHP6KluRW6mBRAqRBNCczOikYcx0SGcl68yE/J3Iyb9wxQlj6oRuGJozwgGRoZhadGDU2APzT+ftAs953rRSz1oZH3zkzgfP4xlN6vhkJen2ngBTRqH3ye/IqQ6CSog4OgUIgq/kFUjpnxCYyNdGGlLgCWGSt8126EctY0zQYSKUKlWtBAwrqHCharjWM574/JLHbsuxQms4XF1VERIslDHIE4gwVgXSyyJiqc4x9mMzyWaaFMTYyHse0li3KhwnMnYf00DqvNxuVLZG+12VkvOHOcNUljWzvSxHzIJ564LUfeFJ29eJX7552v6PBpPflEJ3NbEp1E+/MLqPlZB4+7SMjcReJ2nO/ES8fvxDxtoZDkrZwgY+jiSB2TQlgRS2MTk6y76Oju5fclYRP58uSHJrlTUUMIjCPPsPW0ODKJNLGpBL9oamhq5XGJ2BrBZxVVNRg5ZhPJhSvX2Gjw7SjHckuygjmTGGpt72a9s+c1G+hFvgu3iaSq3khYFEybdu6jQ6f0hOB1c9sRvYw3ZO8leAa6vxkXCvnjPGw3t8orUV5Tj+F3H/j6tVoNYiPDsHvHdhzJy3VmuQD+AtcedHvcbgpyAAAAAElFTkSuQmCC);
-    }
-</style>
-<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
-<script>
-    const tipIcons = document.getElementsByClassName("tooltipIcon");
-    let clicked = false;
-    let clickedIconId = "";
-    const showNode = function(evt) {
-        hideNode('all');
-        if (evt.target.nodeName === "SPAN" && evt.type === "click") {
-            clicked = true;
-            clickedIconId = evt.target.id;
-            setTimeout(function() {
-                clicked = false;
-                hideNode(evt);
-            }, 1000);
-        }
-        const titleNode = evt.target.previousElementSibling;
-        if (titleNode) {
-            titleNode.setAttribute('data-balloon-visible', '');
-        }
-    };
-    const hideNode = function(evt) {
-        if (evt === 'all') {
-            const allTitleNodes = document.getElementsByTagName('a');
-            for (let node of allTitleNodes) {
-                node.removeAttribute('data-balloon-visible');
-            }
-            return;
-        }
-        let timeOut = 0;
-        if (clicked && clickedIconId === evt.target.id) timeOut = 1000;
-        setTimeout(function() {
-            const titleNode = evt.target.previousElementSibling;
-            if (titleNode) {
-                titleNode.removeAttribute('data-balloon-visible');
-            }
-        }, timeOut);
-    };
-
-    for (tipIcon of tipIcons) {
-        tipIcon.addEventListener('mouseover', showNode, false);
-        tipIcon.addEventListener('mouseout', hideNode, false);
-        tipIcon.addEventListener('click', showNode, false);
-    }
-
-    function linkRedirect(sampleName) {
-        let localPath = "";
-        let onlineGuidePath = "";
-        switch (sampleName) {
-            case "angular":
-                localPath = "foundational-api-samples/hello-world/angular/dist/angular/";
-                onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular#readme";
-                break;
-            case "blazor":
-                localPath = "foundational-api-samples/hello-world/blazor/";
-                onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor#readme";
-                break;
-            case "react":
-                localPath = "foundational-api-samples/hello-world/react/build/";
-                onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react#readme";
-                break;
-            case "vue":
-                localPath = "foundational-api-samples/hello-world/vue/dist/";
-                onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue#readme";
-                break;
-            case "react_hooks":
-                localPath = "foundational-api-samples/hello-world/react-hooks/build/";
-                onlineGuidePath = "https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks#readme";
-                break;
-        }
-        if (window.location.protocol === 'file:') {
-            window.open(onlineGuidePath, '_blank');
-        } else {
-            fetch(localPath)
-                .then(response => {
-                    if (response.status === 200)
-                        window.location.href = localPath;
-                    else {
-                        window.open(onlineGuidePath, '_blank');
-                    }
-                });
-        }
-    }
-</script>
 
 </html>