Improve ZIP package developer experience (#301)

* Improve ZIP package first impression (P0 items)

- Move hello-world/scan-single/read-image into basics/ subdirectory
- Inline favicon (base64) and logo SVG into index.html, remove loose files
- Fix scan-a-single-barcode.html title (was copy-pasted from hello-world)
- Add meta description, keywords, and canonical tags to all basics samples
- Update all links in index.html and README.md to reflect new paths
EOF
)

* Fix remaining P0 issues and add README.html

- Fix canonical URL in read-an-image.html (missing basics/ path)
- Fix canonical URL in read-and-parse-GS1-AI (wrong sub-path)
- Add LICENSE ALERT comment to hello-world.html and scan-a-single-barcode.html for consistency
- Fix documentation link in README.md (point to user-guide)
- Add styled README.html for local/ZIP readability

* Align README.html and README.md content

* Add file:// detection tip to camera-based basics samples

Show a non-blocking yellow banner when opened via file:// suggesting
the user serve the page from a web server for the best experience.

* Add .gitattributes to slim down ZIP downloads

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Justin-dynamsoft <117710848+Justin-dynamsoft@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.gitattributes

@@ -0,0 +1,16 @@
+# Exclude files not needed in the ZIP download (GitHub "Download ZIP" / git archive).
+# These are development or CI artifacts that don't help end users run the samples.
+
+# CI/CD and internal tooling
+.github/**             export-ignore
+
+# Git-only files (not useful without a git repo)
+.gitattributes         export-ignore
+.gitignore             export-ignore
+.gitkeep               export-ignore
+
+# Editor configuration
+.editorconfig          export-ignore
+
+# Root logo file (already inlined in README.html)
+logo-dynamsoft-black.svg  export-ignore

README.html

@@ -58,7 +58,7 @@ git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --d
 
 ## Running the Samples Locally
 
-The standalone samples (`hello-world.html`, `scan-a-single-barcode.html`, `read-an-image.html`) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed).
+The standalone samples in the `basics/` folder (`hello-world.html`, `scan-a-single-barcode.html`, `read-an-image.html`) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed).
 
 To browse all available samples, open `index.html` in your browser — it links to every sample in the repository.
 
@@ -74,17 +74,17 @@ If you need a web server for standalone or scenario samples (for example, to ser
 
 ## Sample Folders
 
-The repository includes two main sample directories:
-
-- **`frameworks/`** - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks.
+- **`basics/`** - Three foundational samples: hello-world, scan-a-single-barcode, and read-an-image.
 
 - **`scenarios/`** - Focused scenario samples that show common real-world uses of Dynamsoft Barcode Reader.
 
+- **`frameworks/`** - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks.
+
 ---
 
 ## Documentation
 
-For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=11.4.2001&utm_source=sampleReadme).
+For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?utm_source=sampleReadme).
 
 - [API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?utm_source=sampleReadme)
 
@@ -100,9 +100,9 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 
 ### Hello World
 
-- [hello-world.html](./hello-world.html) — Demonstrates continuously scanning and collecting multiple unique barcodes via camera.
-- [scan-a-single-barcode.html](./scan-a-single-barcode.html) — Demonstrates single-barcode scanning: stops and returns as soon as the first barcode is detected.
-- [read-an-image.html](./read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files.
+- [hello-world.html](./basics/hello-world.html) — Demonstrates continuously scanning and collecting multiple unique barcodes via camera.
+- [scan-a-single-barcode.html](./basics/scan-a-single-barcode.html) — Demonstrates single-barcode scanning: stops and returns as soon as the first barcode is detected.
+- [read-an-image.html](./basics/read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files.
 
 ### Frameworks
 

README.md

@@ -4,12 +4,15 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Continuously scan and collect multiple unique barcodes via camera with Dynamsoft Barcode Reader." />
+  <meta name="keywords" content="barcode, camera, scanning" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html" />
   <title>Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)</title>
 
   <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2001/dist/dbr.bundle.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="../dist/dbr.bundle.js"></script> -->
+  <!-- <script src="../../dist/dbr.bundle.js"></script> -->
 </head>
 
 <body>
@@ -20,8 +23,25 @@ <h1 class="barcode-scanner-title">
   <div class="barcode-scanner-view" style="width: 100%; height: 70vh;"></div>
   <div class="result-view" style="width: 100%; height: calc(30vh - 80px); padding: 10px;overflow: auto;"></div>
   <script>
+    // Detect file:// protocol and show a helpful tip
+    if (location.protocol === "file:") {
+      const tip = document.createElement("div");
+      tip.style.cssText = "background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:12px 16px;margin:8px;border-radius:6px;font:14px/1.5 sans-serif;text-align:center;";
+      tip.innerHTML = '<strong>Tip:</strong> This page works via <code>file://</code>, but for the best experience, '
+        + 'serve it from a web server (e.g. HTTPS or localhost).';
+      document.body.insertBefore(tip, document.body.firstChild);
+    }
+
     const resultView = document.querySelector(".result-view");
 
+    /** LICENSE ALERT - README
+     * To use the library, you need to first specify a license key.
+     *
+     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.
+     * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
+     * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#license&utm_source=samples or contact support@dynamsoft.com.
+     * LICENSE ALERT - THE END
+     */
     Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
     (async () => {
       const cameraView = await Dynamsoft.DCE.CameraView.createInstance();

hello-world.html basics/hello-world.htmlhello-world.html renamed to basics/hello-world.html

@@ -6,12 +6,12 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <meta name="description" content="Read barcodes from an image with Dynamsoft Barcode Reader." />
   <meta name="keywords" content="barcode, image" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/read-an-image.html" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/read-an-image.html" />
   <title>Dynamsoft Barcode Reader Sample - Hello World (Read an Image)</title>
 
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2001/dist/dbr.bundle.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="../dist/dbr.bundle.js"></script> -->
+  <!-- <script src="../../dist/dbr.bundle.js"></script> -->
 </head>
 
 <body>

read-an-image.html basics/read-an-image.htmlread-an-image.html renamed to basics/read-an-image.html

@@ -4,12 +4,15 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)</title>
+  <meta name="description" content="Scan a single barcode via camera and stop automatically with Dynamsoft Barcode Reader." />
+  <meta name="keywords" content="barcode, camera, single scan" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/scan-a-single-barcode.html" />
+  <title>Dynamsoft Barcode Scanner Sample - Scan a Single Barcode</title>
 
   <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2001/dist/dbr.bundle.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="../dist/dbr.bundle.js"></script> -->
+  <!-- <script src="../../dist/dbr.bundle.js"></script> -->
 </head>
 
 <body>
@@ -20,6 +23,23 @@ <h1 class="barcode-scanner-title">
   <!-- This div will host the barcode scanner's camera view -->
   <div class="barcode-scanner-view"></div>
   <script>
+    // Detect file:// protocol and show a helpful tip
+    if (location.protocol === "file:") {
+      const tip = document.createElement("div");
+      tip.style.cssText = "background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:12px 16px;margin:8px;border-radius:6px;font:14px/1.5 sans-serif;text-align:center;";
+      tip.innerHTML = '<strong>Tip:</strong> This page works via <code>file://</code>, but for the best experience, '
+        + 'serve it from a web server (e.g. HTTPS or localhost).';
+      document.body.insertBefore(tip, document.body.firstChild);
+    }
+
+    /** LICENSE ALERT - README
+     * To use the library, you need to first specify a license key.
+     *
+     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.
+     * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
+     * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#license&utm_source=samples or contact support@dynamsoft.com.
+     * LICENSE ALERT - THE END
+     */
     Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
     const pInit = (async () => {
       const cameraView = await Dynamsoft.DCE.CameraView.createInstance();