Spaces:

vlcsolutions
/

barcode-blitz-logistics-manager

Running

App Files Files Community

vlcsolutions commited on Oct 31, 2025

Commit

8badc9a

verified ·

1 Parent(s): 75e32d9

All Features apply close and open pattern

Browse files

Files changed (1) hide show

index.html +183 -121

index.html CHANGED Viewed

@@ -826,21 +826,42 @@
 <div class="max-w-4xl mx-auto px-6 md:px-8">
     <h3 class="text-2xl md:text-3xl font-bold text-[#002060] mb-6">All Features</h3>
     <!-- Simple groups with subtle card styling -->
-    <div class="space-y-8 text-gray-800">
       <style>
-        #all-features ul {
           background: rgba(255,255,255,.7);
           border-radius: 8px;
-          padding: 16px;
           box-shadow: 0 2px 8px rgba(0,32,96,.05);
           border: 1px solid rgba(0,32,96,.08);
         }
-        #all-features li {
           padding: 4px 0;
           position: relative;
           padding-left: 16px;
         }
-        #all-features li:before {
           content: '';
           position: absolute;
           left: 0;
@@ -850,131 +871,172 @@
           background: var(--vlc-leaf);
           border-radius: 50%;
         }
       </style>
-      <div data-aos="fade-up">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="shopping-cart" class="w-5 h-5"></i>
-          Manage Orders
-        </h4>
-<ul class="space-y-1">
-          <li>Filter Orders</li>
-          <li>View, Search, and Sort Orders</li>
-          <li>Set a Ship By Date</li>
-          <li>Split Orders Into Multiple Shipments</li>
-          <li>Order Tags</li>
-          <li>Edit Order Details</li>
-          <li>Configure Checkout Rates</li>
-          <li>Address Validation</li>
-          <li>Order Alerts</li>
-        </ul>
-      </div>
-      <div data-aos="fade-up" data-aos-delay="50">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="truck" class="w-5 h-5"></i>
-          Ship Orders
-        </h4>
-<ul class="space-y-1">
-          <li>Connect a Postage Provider</li>
-          <li>Add Funds and Auto-fund Postal Accounts</li>
-          <li>Edit Services &amp; Package Types</li>
-          <li>Set Ship From &amp; Return Address</li>
-          <li>Configure Shipping</li>
-          <li>Use Shipping Presets</li>
-          <li>Calculate Rates</li>
-          <li>Create Single Labels</li>
-          <li>Create Multi-Package Labels</li>
-          <li>Reship an Order</li>
-          <li>Print Labels</li>
-          <li>Introduction to Batch Shipping</li>
-          <li>Working with Batches</li>
-          <li>Create a Batch</li>
-          <li>Print Labels with a Batch</li>
-          <li>Using Quickship</li>
-          <li>The Label Queue</li>
-        </ul>
-      </div>
-      <div data-aos="fade-up" data-aos-delay="100">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="file-text" class="w-5 h-5"></i>
-          Shipment Records &amp; Details
-        </h4>
-<ul class="space-y-1">
-          <li>Drop-shipping with VLC</li>
-          <li>Add Insurance to Shipments</li>
-          <li>Manage Shipments</li>
-          <li>Order &amp; Shipment Records</li>
-          <li>Track Shipments</li>
-          <li>End of Day Forms</li>
-          <li>Void Labels</li>
-          <li>Return Labels</li>
-          <li>Search and Sort Shipments or Fulfillments</li>
-          <li>Filter Shipment or Fulfillment Records</li>
-          <li>Reprint a Label</li>
-          <li>Schedule a Pickup</li>
-          <li>Create Multi-Package Labels</li>
-        </ul>
       </div>
-      <div data-aos="fade-up" data-aos-delay="150">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="printer" class="w-5 h-5"></i>
-          Printer and Scale Integration
-        </h4>
-<ul class="space-y-1">
-          <li>Printing Overview</li>
-          <li>Set Up Printers in Windows</li>
-          <li>Print a Document</li>
-          <li>Print a Test Label</li>
-          <li>Use a USB Scale</li>
-        </ul>
       </div>
-      <div data-aos="fade-up" data-aos-delay="200">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="bell" class="w-5 h-5"></i>
-          Notification and Documents
-        </h4>
-<ul class="space-y-1">
-          <li>Print Packing Slips</li>
-        </ul>
       </div>
-      <div data-aos="fade-up" data-aos-delay="250">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="bar-chart-2" class="w-5 h-5"></i>
-          Advanced Analytics
-        </h4>
-<div class="mt-2">
-          <p class="font-medium">a) Warehouse</p>
-          <ul class="mt-1 space-y-1">
-            <li>Orders to Pick</li>
-            <li>Orders Picked</li>
-            <li>Daily/Monthly Picked Orders</li>
-            <li>Order Analysis</li>
-            <li>Orders Shipped</li>
-            <li>Daily/Monthly Shipped Orders</li>
-            <li>Orders to Ship</li>
-            <li>Employee Analysis</li>
-            <li>Monthly Expenses Breakdown</li>
-            <li>Pick Performance</li>
-            <li>Pack Performance</li>
           </ul>
-          <p class="font-medium mt-4">b) Non-Warehouse</p>
-          <ul class="mt-1 space-y-1">
-            <li>Orders To Ship</li>
-            <li>Orders To Ship v/s Shipped Orders</li>
-            <li>Orders to Ship By Carrier</li>
           </ul>
         </div>
       </div>
-      <div data-aos="fade-up" data-aos-delay="300">
-        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
-          <i data-feather="users" class="w-5 h-5"></i>
-          Account Management
-        </h4>
-<ul class="space-y-1">
-          <li>Add &amp; Edit Users</li>
-          <li>Set User Permissions and Restrictions</li>
-        </ul>
       </div>
-      <div data-aos="fade-up" data-aos-delay="350">
         <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
           <i data-feather="globe" class="w-5 h-5"></i>
           International Shipments

 <div class="max-w-4xl mx-auto px-6 md:px-8">
     <h3 class="text-2xl md:text-3xl font-bold text-[#002060] mb-6">All Features</h3>
     <!-- Simple groups with subtle card styling -->
+    <div class="space-y-4 text-gray-800">
       <style>
+        .feature-group {
           background: rgba(255,255,255,.7);
           border-radius: 8px;
           box-shadow: 0 2px 8px rgba(0,32,96,.05);
           border: 1px solid rgba(0,32,96,.08);
+          overflow: hidden;
+        }
+        .feature-group-header {
+          padding: 16px;
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          transition: background-color 0.2s;
+        }
+        .feature-group-header:hover {
+          background-color: rgba(0,160,233,.05);
         }
+        .feature-group-content {
+          padding: 0 16px;
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+        }
+        .feature-group.active .feature-group-content {
+          padding: 0 16px 16px;
+          max-height: 1000px;
+        }
+        .feature-group li {
           padding: 4px 0;
           position: relative;
           padding-left: 16px;
         }
+        .feature-group li:before {
           content: '';
           position: absolute;
           left: 0;
           background: var(--vlc-leaf);
           border-radius: 50%;
         }
+        .feature-group-toggle {
+          transition: transform 0.3s;
+        }
+        .feature-group.active .feature-group-toggle {
+          transform: rotate(180deg);
+        }
       </style>
+      <div class="feature-group" data-aos="fade-up">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="shopping-cart" class="w-5 h-5"></i>
+            Manage Orders
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Filter Orders</li>
+            <li>View, Search, and Sort Orders</li>
+            <li>Set a Ship By Date</li>
+            <li>Split Orders Into Multiple Shipments</li>
+            <li>Order Tags</li>
+            <li>Edit Order Details</li>
+            <li>Configure Checkout Rates</li>
+            <li>Address Validation</li>
+            <li>Order Alerts</li>
+          </ul>
+        </div>
       </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="50">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="truck" class="w-5 h-5"></i>
+            Ship Orders
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Connect a Postage Provider</li>
+            <li>Add Funds and Auto-fund Postal Accounts</li>
+            <li>Edit Services &amp; Package Types</li>
+            <li>Set Ship From &amp; Return Address</li>
+            <li>Configure Shipping</li>
+            <li>Use Shipping Presets</li>
+            <li>Calculate Rates</li>
+            <li>Create Single Labels</li>
+            <li>Create Multi-Package Labels</li>
+            <li>Reship an Order</li>
+            <li>Print Labels</li>
+            <li>Introduction to Batch Shipping</li>
+            <li>Working with Batches</li>
+            <li>Create a Batch</li>
+            <li>Print Labels with a Batch</li>
+            <li>Using Quickship</li>
+            <li>The Label Queue</li>
+          </ul>
+        </div>
       </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="100">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="file-text" class="w-5 h-5"></i>
+            Shipment Records &amp; Details
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Drop-shipping with VLC</li>
+            <li>Add Insurance to Shipments</li>
+            <li>Manage Shipments</li>
+            <li>Order &amp; Shipment Records</li>
+            <li>Track Shipments</li>
+            <li>End of Day Forms</li>
+            <li>Void Labels</li>
+            <li>Return Labels</li>
+            <li>Search and Sort Shipments or Fulfillments</li>
+            <li>Filter Shipment or Fulfillment Records</li>
+            <li>Reprint a Label</li>
+            <li>Schedule a Pickup</li>
+            <li>Create Multi-Package Labels</li>
+          </ul>
+        </div>
       </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="150">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="printer" class="w-5 h-5"></i>
+            Printer and Scale Integration
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Printing Overview</li>
+            <li>Set Up Printers in Windows</li>
+            <li>Print a Document</li>
+            <li>Print a Test Label</li>
+            <li>Use a USB Scale</li>
           </ul>
+        </div>
+      </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="200">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="bell" class="w-5 h-5"></i>
+            Notification and Documents
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Print Packing Slips</li>
           </ul>
         </div>
       </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="250">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="bar-chart-2" class="w-5 h-5"></i>
+            Advanced Analytics
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <div class="mt-2">
+            <p class="font-medium">a) Warehouse</p>
+            <ul class="mt-1 space-y-1">
+              <li>Orders to Pick</li>
+              <li>Orders Picked</li>
+              <li>Daily/Monthly Picked Orders</li>
+              <li>Order Analysis</li>
+              <li>Orders Shipped</li>
+              <li>Daily/Monthly Shipped Orders</li>
+              <li>Orders to Ship</li>
+              <li>Employee Analysis</li>
+              <li>Monthly Expenses Breakdown</li>
+              <li>Pick Performance</li>
+              <li>Pack Performance</li>
+            </ul>
+            <p class="font-medium mt-4">b) Non-Warehouse</p>
+            <ul class="mt-1 space-y-1">
+              <li>Orders To Ship</li>
+              <li>Orders To Ship v/s Shipped Orders</li>
+              <li>Orders to Ship By Carrier</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="feature-group" data-aos="fade-up" data-aos-delay="300">
+        <div class="feature-group-header" onclick="toggleFeatureGroup(this)">
+          <h4 class="font-semibold text-[#002060] flex items-center gap-2">
+            <i data-feather="users" class="w-5 h-5"></i>
+            Account Management
+          </h4>
+          <i data-feather="chevron-down" class="w-5 h-5 feature-group-toggle"></i>
+        </div>
+        <div class="feature-group-content">
+          <ul class="space-y-1">
+            <li>Add &amp; Edit Users</li>
+            <li>Set User Permissions and Restrictions</li>
+          </ul>
+        </div>
       </div>
+<div data-aos="fade-up" data-aos-delay="350">
         <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
           <i data-feather="globe" class="w-5 h-5"></i>
           International Shipments