Ретро Компонент Корпоративной Корзины Покупок

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
    <!-- Retro Header Bar -->
    <div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
      <div class="flex space-x-2">
        <span>[FILE]</span>
        <span>[EDIT]</span>
        <span>[VIEW]</span>
        <span>[HELP]</span>
      </div>
    </div>
    <div class="pt-10 pb-4">
      <!-- Main Content Area -->
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items Section -->
        <div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>

          <!-- Cart Item 1 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <!-- Cart Item 2 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
            <button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
              \u003c\u003c ADD MORE ITEMS
            </button>
            <button class="text-red-600 hover:underline">
              CLEAR ALL ITEMS
            </button>
          </div>
        </div>

        <!-- Order Summary Section -->
        <div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>

          <div class="mb-4">
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
              <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
            </div>
          </div>

          <div class="mb-6">
            <label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
            <div class="flex">
              <input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
              <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
                APPLY
              </button>
            </div>
          </div>

          <p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
            <strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
          </p>

          <button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
            \u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
          </button>
        </div>
      </div>
    </div>
    <!-- Retro Footer Bar -->
    <div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
      <div class="flex space-x-4">
        <span>[F1-Help]</span>
        <span>[F5-Refresh]</span>
        <span>[F12-Exit]</span>
      </div>
    </div>
  </div>
</div>