Preview (#504)

Author: Justin-dynamsoft

_includes/samples_index.html

@@ -1042,10 +1042,10 @@
 
       <!-- Featured Section - Quick Start & Official Demo -->
       <div class="featured-container">
-        <a href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html" class="featured-box quick-start">
+        <a href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html" class="featured-box quick-start">
           <span class="label">🚀 Quick Start</span>
-          <div class="title">Hello World - Scan Your First Barcode</div>
-          <div class="description">The simplest example to get started with barcode scanning in under 2 minutes</div>
+          <div class="title">Hello World - Scan Multiple Barcodes</div>
+          <div class="description">The simplest example to get started with barcode scanning. Continuously scans and collects multiple unique barcodes</div>
           <span
             class="guide-badge"
             title="View user guide documentation"
@@ -1061,7 +1061,7 @@
           <span
             class="github-badge"
             title="View source code on GitHub"
-            onclick="event.stopPropagation(); window.open('https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/hello-world.html', '_blank'); return false;"
+            onclick="event.stopPropagation(); window.open('https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/basics/hello-world.html', '_blank'); return false;"
           >
             <svg width="20" height="20" viewBox="0 0 16 16" fill="white">
               <path
@@ -1106,6 +1106,48 @@
         >
       </div>
 
+      <!-- Hello World Samples -->
+      <div class="file">
+        <h3>
+          Hello World Samples <span class="sample-count">(3)</span>
+        </h3>
+      </div>
+      <div class="children">
+        <div class="file">
+          <span data-balloon-length="large" data-balloon-pos="down" aria-label="The simplest example to get started with barcode scanning. Continuously scans and collects multiple unique barcodes."
+            ><a class="button title demo-link" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html" title="View live demo">Hello World (Scan Multiple Barcodes)</a
+            ><a
+              class="button title source-link"
+              href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/basics/hello-world.html"
+              title="View source code on GitHub"
+              >Source</a
+            ></span
+          >
+        </div>
+        <div class="file">
+          <span data-balloon-length="large" data-balloon-pos="down" aria-label="Scan and return only the first barcode detected."
+            ><a class="button title demo-link" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/scan-a-single-barcode.html" title="View live demo">Scan a Single Barcode</a
+            ><a
+              class="button title source-link"
+              href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/basics/scan-a-single-barcode.html"
+              title="View source code on GitHub"
+              >Source</a
+            ></span
+          >
+        </div>
+        <div class="file">
+          <span data-balloon-length="large" data-balloon-pos="down" aria-label="Read barcodes from a static image file by uploading."
+            ><a class="button title demo-link" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/read-an-image.html" title="View live demo">Read an Image</a
+            ><a
+              class="button title source-link"
+              href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/basics/read-an-image.html"
+              title="View source code on GitHub"
+              >Source</a
+            ></span
+          >
+        </div>
+      </div>
+
       <!-- Framework Samples -->
       <div class="file">
         <h3>

programming/javascript/user-guide/index.md

@@ -84,15 +84,15 @@ The complete code of the "Hello World" example is shown below
 ```
 
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.4.20/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.4.20/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
   <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.4.20&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.4.20&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
@@ -137,7 +137,7 @@ The complete code of the "Hello World" example is shown below
 
 ### Run the example
 
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.4.20&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
+You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.4.20&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
 
 You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
 

programming/javascript/user-guide/zip-guide.md

@@ -43,7 +43,7 @@ Dynamsoft provides a complimentary trial license for the SDK. When you download
 
 ## Quick Start
 
-Double-click `samples/hello-world.html` to instantly see a fully functional web application that scans barcodes using your device's camera! You can also try `samples/read-an-image.html` to decode barcodes from an image file.
+Double-click `samples/basics/hello-world.html` to instantly see a fully functional web application that scans barcodes using your device's camera! You can also try `samples/basics/read-an-image.html` to decode barcodes from an image file.
 
 >[!NOTE]
 > These samples load the SDK from a CDN so they can be opened directly as local files without a web server. An internet connection is required. To serve everything from the local `dist/` folder, see [Deploying to Your Server](#deploying-to-your-server).
@@ -57,7 +57,7 @@ Double-click `samples/hello-world.html` to instantly see a fully functional web
 After unzipping, you should see the following structure:
 
 - `dist/` — All Barcode Reader JavaScript SDK resources (`.js`, `.wasm`, worker files, etc.)
-- `samples/` — Sample projects, including standalone examples (`hello-world.html`, `read-an-image.html`), framework integrations, and scenario demos
+- `samples/` — Sample projects, including basic examples, framework integrations, and scenario demos
 - `LICENSE` — Dynamsoft license terms
 - `LEGAL.txt` — Third-party license notices
 
@@ -95,7 +95,9 @@ Here are a couple of easy ways to start a local web server:
 
 ## Sample Folders
 
-The package includes two main sample directories:
+The package includes three main sample directories:
+
+- **`basics/`** - Simple standalone examples to get started quickly, including `hello-world.html` (scan multiple barcodes from a live camera), `scan-a-single-barcode.html`, and `read-an-image.html` (decode barcodes from an image file).
 
 - **`frameworks/`** - Framework-specific examples showing how to integrate the Dynamsoft Barcode Reader into common web and hybrid frameworks. Included frameworks: Angular, Blazor, Capacitor, Electron, ES6, Native TypeScript, Next.js, Nuxt, PWA, React, RequireJS, Svelte, Vue, and WebView.