Update troubleshooting steps and FAQ table for UI improvements

barcode-reader/index.md

@@ -11,79 +11,204 @@ noTitleIndex: true
 
 Choose a category to get started.
 
-<!-- Responsive 2x2-style grid (wraps to 1xN on small screens) -->
 <style>
   .faq-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+
+    /*
+     * Automatically switches between one and multiple columns according
+     * to the available container width, not the browser viewport width.
+     */
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 280px), 1fr)
+    );
+
     gap: 20px;
-    margin: 24px 0 8px 0;
+    margin: 24px 0 8px;
+    align-items: stretch;
   }
+
   .faq-tile {
-    display: block;
+    /*
+     * Prevent long headings from forcing a grid column to become wider.
+     */
+    min-width: 0;
+    min-height: 180px;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: 24px;
+
+    color: inherit;
     text-decoration: none;
-    padding: 28px 24px;
-    border-radius: 16px;
-    border: 1px solid rgba(0,0,0,0.06);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
-    transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
+
     background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 14px;
+
+    box-shadow:
+      0 4px 8px rgba(0, 0, 0, 0.03),
+      0 8px 20px rgba(0, 0, 0, 0.04);
+
+    transition:
+      transform 0.15s ease,
+      box-shadow 0.15s ease,
+      border-color 0.15s ease;
   }
-  .faq-tile:hover,
-  .faq-tile:focus {
+
+  .faq-tile:hover {
+    color: inherit;
+    text-decoration: none;
+
     transform: translateY(-2px);
-    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
-    border-color: rgba(0,0,0,0.12);
-    outline: none;
+    border-color: #4a9af5;
+
+    box-shadow:
+      0 6px 12px rgba(0, 0, 0, 0.05),
+      0 12px 28px rgba(0, 0, 0, 0.08);
   }
+
+  .faq-tile:focus-visible {
+    outline: 3px solid rgba(74, 154, 245, 0.35);
+    outline-offset: 3px;
+  }
+
   .faq-tile h2 {
-    margin: 0 0 8px 0;
-    font-size: 2.5rem;
-    line-height: 1.2;
+    min-width: 0;
+
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+
+    margin: 0 0 12px;
+
+    font-size: clamp(1.75rem, 1.1rem + 1.2vw, 2.5rem);
+    line-height: 1.25;
+    font-weight: 600;
+
+    /*
+     * Allows long titles to wrap instead of changing the grid width.
+     */
+    overflow-wrap: anywhere;
+    word-break: normal;
   }
+
+  .faq-icon {
+    flex: 0 0 auto;
+
+    font-size: 1em;
+    line-height: 1.3;
+  }
+
+  .faq-title {
+    min-width: 0;
+  }
+
   .faq-tile p {
     margin: 0;
-    color: #444;
+
+    color: #4b5563;
+    line-height: 1.55;
   }
 
-  /* Prefer 2 columns on wider viewports for a "2x2" feel; auto-fit handles wrapping with 3 tiles */
-  @media (min-width: 720px) {
-    .faq-grid {
-      grid-template-columns: repeat(2, 1fr);
+  /*
+   * Disable animation for visitors who prefer reduced motion.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .faq-tile {
+      transition: none;
+    }
+
+    .faq-tile:hover {
+      transform: none;
     }
   }
 </style>
 
 <div class="faq-grid">
 
   <!-- General -->
-  <a class="faq-tile" href="/faq/barcode-reader/general/index.html" aria-label="General Barcode Reader FAQs">
-    <h2>📚 General</h2>
-    <p>Common questions, requirements, and core features of the Barcode Reader.</p>
+  <a
+    class="faq-tile"
+    href="/faq/barcode-reader/general/index.html"
+    aria-label="General Barcode Reader FAQs"
+  >
+    <h2>
+      <span class="faq-icon" aria-hidden="true">📚</span>
+      <span class="faq-title">General</span>
+    </h2>
+
+    <p>
+      Common questions, requirements, and core features of the Barcode Reader.
+    </p>
   </a>
 
   <!-- License -->
-  <a class="faq-tile" href="/faq/barcode-reader/license/index.html" aria-label="License FAQs">
-    <h2>🔑 License</h2>
-    <p>Licensing details, trial vs. production, activation, and deployment guidance.</p>
+  <a
+    class="faq-tile"
+    href="/faq/barcode-reader/license/index.html"
+    aria-label="Barcode Reader License FAQs"
+  >
+    <h2>
+      <span class="faq-icon" aria-hidden="true">🔑</span>
+      <span class="faq-title">License</span>
+    </h2>
+
+    <p>
+      Licensing details, trial versus production, activation, and deployment
+      guidance.
+    </p>
   </a>
 
   <!-- Mobile -->
-  <a class="faq-tile" href="/faq/barcode-reader/mobile/index.html" aria-label="Barcode Reader Mobile FAQs">
-    <h2>📱 Mobile</h2>
-    <p>Mobile SDK usage, platform-specific setup, and optimization tips.</p>
+  <a
+    class="faq-tile"
+    href="/faq/barcode-reader/mobile/index.html"
+    aria-label="Barcode Reader Mobile FAQs"
+  >
+    <h2>
+      <span class="faq-icon" aria-hidden="true">📱</span>
+      <span class="faq-title">Mobile</span>
+    </h2>
+
+    <p>
+      Mobile SDK usage, platform-specific setup, and optimization tips.
+    </p>
   </a>
 
-  <!-- Server -->
-  <a class="faq-tile" href="/faq/barcode-reader/server/index.html" aria-label="Barcode Reader Server FAQs">
-    <h2>🖥️ Server/Desktop/Embedded</h2>
-    <p>Server/Desktop/Embedded SDK usage, platform-specific setup, and optimization tips.</p>
+  <!-- Server, Desktop, and Embedded -->
+  <a
+    class="faq-tile"
+    href="/faq/barcode-reader/server/index.html"
+    aria-label="Barcode Reader Server, Desktop, and Embedded FAQs"
+  >
+    <h2>
+      <span class="faq-icon" aria-hidden="true">🖥️</span>
+      <span class="faq-title">Server / Desktop / Embedded</span>
+    </h2>
+
+    <p>
+      Server, desktop, and embedded SDK usage, platform-specific setup, and
+      optimization tips.
+    </p>
   </a>
 
   <!-- Web -->
-  <a class="faq-tile" href="/faq/barcode-reader/web/index.html" aria-label="Barcode Reader Web FAQs">
-    <h2>🌐 Web</h2>
-    <p>Web SDK setup, browser compatibility, configuration, and UI customization.</p>
+  <a
+    class="faq-tile"
+    href="/faq/barcode-reader/web/index.html"
+    aria-label="Barcode Reader Web FAQs"
+  >
+    <h2>
+      <span class="faq-icon" aria-hidden="true">🌐</span>
+      <span class="faq-title">Web</span>
+    </h2>
+
+    <p>
+      Web SDK setup, browser compatibility, configuration, and UI customization.
+    </p>
   </a>
 
 </div>

barcode-reader/web/capabilities/what-is-in-the-dist-folder-of-dbr.md

@@ -60,5 +60,4 @@ These folders collectively compose the runtime environment for a JavaScript-base
 | `models/` | Contains pre-trained machine learning models used for barcode detection and recognition. These models enable the scanner to identify and decode various barcode formats from images and video streams in real-time. |
 | `parser-resources/` | Stores resources required for data parsing and interpretation. |
 | `templates/` | Contains preset CaptureVisionTemplates used for different barcode scanning scenarios. |
-
 | `ui/` | Preset UI in `.html` files. |

barcode-reader/web/configuration/change-domain-binding-of-product-key.md

@@ -14,5 +14,5 @@ This guide explains how to protect your software product key by properly managin
   3. Find the project that you want to change the domain binding.
   4. Click on the "Configure" button.
   5. Scroll down and find "Optional Settings" -> edit "Bind Website Domain" field to change your domain binding.
-  <img src="{{site.dbr_web_assets}}domain_binding.jpg" alt="domain_binding" />
+  <img src="{{site.dbr_web_assets}}domain-binding.jpg" alt="domain_binding" />
  > Please note that a single project can contain multiple license items. If you wish to bind a single license item to a certain domain, then you will need to make sure that license item is the only item in the associated project. First, remove the license item from its current project. Afterwards, create a new project and then open its configuration page. Then, move the license item to the new project and finally edit the binding info of the new project.

barcode-reader/web/configuration/pop-up-window-during-trial-process.md

@@ -0,0 +1,33 @@
+---
+layout: default-layout
+title: How do I remove the license warning or expiration pop-up in Dynamsoft Barcode Reader?
+keywords: Dynamsoft Barcode Reader, FAQ, tech basic, barcodeReader, barcodeScanner, pop-up window
+description: How do I remove the license warning or expiration pop-up in Dynamsoft Barcode Reader?
+needAutoGenerateSidebar: false
+---
+
+# How do I remove the license warning or expiration pop-up in Dynamsoft Barcode Reader?
+
+When using Dynamsoft Barcode Reader SDK without a valid license or with a temporary license, a warning pop-up appears at startup to notify you of the licensing status.
+
+**Temporary License Warning**
+
+With a temporary license, the SDK provides 24 hours of usage for testing purposes and displays the following warning:
+
+![warning_info]({{site.dbr_web_assets}}warning-information.png)
+
+**Expired License Warning**
+
+After the 24-hour period expires, the warning changes to indicate the license has expired, and scanning functionality is disabled:
+
+![expired_info]({{site.dbr_web_assets}}expired-information.png)
+
+**Solution**
+
+To remove these warnings and restore full functionality, initialize the SDK with either:
+
+- A **purchased license**, or
+- A **30-day trial license**
+
+Once a valid license is applied, the temporary license warnings will no longer appear. You can refer [here](https://www.dynamsoft.com/barcode-reader/downloads/#javascript) to apply for a 30 day trial license. 
+

barcode-reader/web/debug/general-troubleshooting-steps-for-decode-failure.md

@@ -14,20 +14,20 @@ Generally, with some setting changes via our APIs, Dynamsoft Barcode Reader Java
 
 
 ## Step 1 - try different scan settings with our standard online demo
-1. The first thing is to try the [JavaScript online demo](https://demo.dynamsoft.com/barcode-reader-js/). If the barcode is not being picked up under normal settings, let's try out some different settings in the demo. By default, the demo runs on the Best Speed mode, which you can see under the "Scan Settings" on the left-hand side. To potentially improve the performance, we recommend trying out the two other available modes in the demo: Balance or Best Coverage. Best Coverage will prioritize read rate over speed, while Best Speed will prioritize speed over accuracy or read rate. Balance offers the perfect mixture between the two.
+1. The first thing is to try the [JavaScript online demo](https://demo.dynamsoft.com/barcode-reader-js/). If the barcode is not being picked up under normal settings, let's try out some different settings in the demo. By default, the demo runs on the Best Speed mode, which you can see under the "Scan Settings" on the left-hand side. To potentially improve the performance, we recommend trying out the other available mode in the demo: Read rate first. This  will prioritize read rate over speed, while Speed first will prioritize speed over accuracy or read rate. 
 
-      <img src="{{site.dbr_web_assets}}best_coverage.jpg" alt="Best coverage"  width="50%" height="50%">
+      <img src="{{site.dbr_web_assets}}read-rate.png" alt="Best coverage"  width="50%" height="50%">
 
 
-2. Enable Full HD resolution in the demo
-      <img src="{{site.dbr_web_assets}}full_hd.jpg" alt="Full HD"  width="50%" height="50%">
+2. Enable Full HD resolution in the demo <Br>
+      <img src="{{site.dbr_web_assets}}full-hd.jpg" alt="Full HD"  width="50%" height="50%">
 
 
 ## Step 2 - capture image frames and send to Dynamsoft for analysis
 
-1.  Go to [JavaScript online demo debug mode](https://demo.dynamsoft.com/barcode-reader-js?debug=true) -> Click "START SCAN" -> Click the "Scan Settings" button. -> Place the barcode inside the scan region -> Click the "Capture" button on the top right corner -> A zip file that contains 8 frames will be downloaded. 
+1.  Go to [JavaScript online demo debug mode](https://demo.dynamsoft.com/barcode-reader-js?debug=true) -> Click "START SCAN" with any desired option -> Click the "Scan Settings" button. -> Place the barcode inside the scan region -> Click the "Capture" button on the top right corner -> A zip file that contains 8 frames will be downloaded. 
 
-      <img src="{{site.dbr_web_assets}}Cropped Img.png" alt="Frames crop"  width="50%" height="50%">
+      <img src="{{site.dbr_web_assets}}captured-frame.png" alt="Frames crop"  width="50%" height="50%">
 
 2. Share the video frames set with [Dynamsoft Support team](https://www.dynamsoft.com/contact/). Our support team will investigate the video frames and get back to you with a solution as soon as possible.
 

barcode-reader/web/index.md

@@ -41,7 +41,7 @@ Welcome! Browse the sections below for answers to common questions, configuratio
 - [How do I create a NodeJS application using the SDK?](configuration/nodejs-implementation.html)
 - [Offline mode usage for JavaScript SDK](configuration/javascript-sdk-offline-mode-use.html)
 - [Newline character not being rendered](configuration/newline-character-not-being-rendered.html)
-- [Pop-up window during trial process](configuration/pop-up-window-during-trail-process.html)
+- [Pop-up window during trial process](configuration/pop-up-window-during-trial-process.html)
 - [Read from existing files](configuration/read-from-existing-files.html)
 - [Scan US driver's license](configuration/scan-US-drivers-license.html)
 - [Upgrade old to new version](configuration/upgrade-old-to-new.html)