브루탈리즘 그레이스케일 인더스트리얼 폼

<div class="min-h-screen bg-neutral-100 dark:bg-neutral-950 p-4 sm:p-8 font-mono text-neutral-900 dark:text-neutral-50 flex items-start justify-center">
  <div class="w-full max-w-6xl border-4 border-neutral-900 dark:border-neutral-50 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] grid md:grid-cols-3 overflow-hidden">

    <!-- Left Section: Header Block -->
    <div class="md:col-span-1 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 sm:p-8 border-b-4 md:border-b-0 md:border-r-4 border-neutral-900 dark:border-neutral-50">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tighter uppercase mb-4 leading-none">MANUFACTURING OPS. DATA INPUT.</h1>
      <p class="text-sm sm:text-base mb-6 border-b-2 border-neutral-50 dark:border-neutral-900 pb-2">RECORD AND MONITOR PRODUCTION FLOW, MACHINE STATUS, AND QUALITY CONTROL METRICS.</p>
      <div class="space-y-4">
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">UTC+00:00 - 15:30:45</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">PLANT_A_UNIT_07 - ZONE 3B</span>
        </div>
      </div>
      <img src="https://picsum.photos/300/200?grayscale&random=1" alt="Industrial machinery" class="w-full h-auto mt-8 border-4 border-neutral-50 dark:border-neutral-900 object-cover" style="image-rendering: pixelated;">
    </div>

    <!-- Right Section: Form Fields -->
    <div class="md:col-span-2 p-6 sm:p-8 bg-neutral-100 dark:bg-neutral-950 ">
      <form class="space-y-6 sm:space-y-8">

        <!-- Production Data Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">PRODUCTION DATA</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
              <label for="batch-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Batch ID:</label>
              <input type="text" id="batch-id" placeholder="BCH-731-X" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="product-code" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Product Code:</label>
              <input type="text" id="product-code" placeholder="PRD-A-04" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="quantity-produced" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Quantity Produced:</label>
              <input type="number" id="quantity-produced" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div class="lg:col-span-3">
              <label for="operator-notes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Operator Notes:</label>
              <textarea id="operator-notes" rows="3" placeholder="Add any relevant observations or incidents..." class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm"></textarea>
            </div>
          </div>
        </div>

        <!-- Machine Status Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">MACHINE STATUS</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="machine-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Machine ID:</label>
              <select id="machine-id" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT MACHINE</option>
                <option value="MCH-001">CNC MILL 001</option>
                <option value="MCH-002">LASER CUTTER 002</option>
                <option value="MCH-003">ROBOTIC ARM 003</option>
              </select>
            </div>
            <div>
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Status:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="operational" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Operational</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="maintenance" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Maintenance</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="error" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Error</span>
                </label>
              </div>
            </div>
            <div>
              <label for="downtime-minutes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Downtime (min):</label>
              <input type="numbeer" id="downtime-minutes" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="last-maintenance" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Last Maintenance:</label>
              <input type="date" id="last-maintenance" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
          </div>
        </div>

        <!-- Quality Control Section -->
        <div>
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">QUALITY CONTROL</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="defects-reported" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Defects Reported:</label>
              <input type="number" id="defects-reported" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="inspection-result" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Inspection Result:</label>
              <select id="inspection-result" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT OUTCOME</option>
                <option value="pass">PASS</option>
                <option value="fail">FAIL</option>
                <option value="review">PENDING REVIEW</option>
              </select>
            </div>
            <div class="md:col-span-2">
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Attached Documents:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm mt-1">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-img" value="img-report" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Image Report</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-spec" value="spec-sheet" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Spec Sheet</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-log" value="test-log" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Test Log</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Submission & Control -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-end pt-4 border-t-2 border-neutral-400 dark:border-neutral-700">
          <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 sm:mb-0">FORM VERSION 2.1.b / ENGAGE PROTOCOL 7-ALPHA</span>
          <button type="submit" class="px-8 py-3 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 font-bold uppercase border-2 border-neutral-900 dark:border-neutral-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-none transition-all duration-150 ease-in-out text-sm sm:text-base tracking-widest">
            SUBMIT DATA
          </button>
        </div>

      </form>
    </div>

  </div>
</div>