Mold-Params-1.0

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mold Regulation Parameters</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    .movement-row, .delay-row { 
      display: flex; 
      align-items: center; 
      height: 48px; /* Fixed height for alignment */
      margin-bottom: 8px; 
      padding: 8px; 
      border-radius: 6px; 
      transition: background-color 0.2s;
    }
    .closing-row, .closing-delay-row { background-color: rgba(34, 197, 94, 0.05); }
    .opening-row, .opening-delay-row { background-color: rgba(59, 130, 246, 0.05); }
    .venting-row, .venting-delay-row { background-color: rgba(234, 179, 8, 0.05); }
    .movement-row:hover, .delay-row:hover { background-color: rgba(0, 0, 0, 0.02); }
    @media (max-width: 1024px) { 
      .movement-row, .delay-row { 
        flex-direction: column; 
        height: auto; 
        gap: 6px;
      }
      .movement-row .speed-pair, .delay-row .delay-pair { margin-bottom: 6px; }
    }
    .speed-pair, .delay-pair { padding: 0 6px; flex: 1; }
    .section-container { 
      border: 1px solid #e5e7eb; 
      border-radius: 6px; 
      background-color: #f9fafb; 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    .sticky-header { 
      position: sticky; 
      top: 0; 
      z-index: 10; 
      background: linear-gradient(to bottom, #e5e7eb, #f9fafb); 
      border-top-left-radius: 6px; 
      border-top-right-radius: 6px;
    }
    .input-container { position: relative; }
    .input-container input:focus + .tooltip, 
    .input-container input:hover + .tooltip { 
      opacity: 1; 
      visibility: visible; 
    }
    .tooltip { 
      position: absolute; 
      top: -30px; 
     ...