tp-link poptávkový form

by Petr Haluza

HTML

<div class="container">
    <h2>Poptávkový formulář</h2>
    <form id="demandForm">
      <label>Identifikace zákazníka</label>
      <div class="two-col">
        <input type="text" name="firma" placeholder="Název firmy" required>
        <input type="text" name="ico" placeholder="IČO" required>
      </div>
      <div class="two-col">
        <input type="text" name="dic" placeholder="DIČ" required>
        <input type="email" name="email" placeholder="E-mail" required>
      </div>

      <label>Informace o místě instalace</label>
      <div class="two-col">
        <input type="text" name="end_customer" placeholder="Jméno koncového zákazníka" required>
        <input type="text" name="end_customer_ico" placeholder="IČO koncového zákazníka" required>
      </div>

      <label>Produkty</label>
      <div id="products-list">
        <div class="product-row">
          <input type="text" name="productName[]" placeholder="Název / PN produktu" required>
          <input type="number" name="productCount[]" placeholder="Počet ks" required pattern="\d+">
        </div>
      </div>
      <button type="button" class="add-btn" id="addProductBtn">+ Přidat další produkt</button>

      <div class="two-col" style="margin-bottom: 18px;">
        <div>
          <label for="delivery">Požadovaný termín dodání</label>
          <input type="date" id="delivery" name="delivery" required>
        </div>
        <div></div>
      </div>

      <label for="note">Poznámka</label>
      <textarea name="note" id="note" placeholder="Vaše poznámka..."></textarea>
      
      <button type="submit">Odeslat poptávku</button>
    </form>
  </div>
  <script>
    const productsList = document.getElementById('products-list');
    const addProductBtn = document.getElementById('addProductBtn');

    addProductBtn.addEventListener('click', () => {
      const row = document.createElement('div');
      row.className = 'product-row';
     ...

CSS

body {
      background: #f3f4f6;
      font-family: 'Inter', Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 550px;
      margin: 40px auto;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.09);
      padding: 36px;
    }
    h2 {
      text-align: center;
      margin-bottom: 24px;
      color: #374151;
      font-weight: 700;
    }
    label {
      display: block;
      margin-bottom: 8px;
      color: #374151;
      font-size: 1rem;
      font-weight: 500;
    }

    .two-col {
      display: flex;
      gap: 16px;
      margin-bottom: 18px;
    }
    .two-col > * {
      flex: 1 1 0;
    }
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"] {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      background: #f9fafb;
      font-size: 1rem;
      color: #374151;
      margin-bottom: 0;
      transition: border 0.2s;
      box-sizing: border-box;
    }
        input:focus,
    textarea:focus { border-color: #2563eb; outline: none; }
    textarea {
      width: 100%;
      min-height: 66px;
      resize: vertical;
      background: #f9fafb;
      padding: 10px 12px;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      font-size: 1rem;
      color: #374151;
      margin-bottom: 18px;
      transition: border 0.2s;
      box-sizing: border-box;
    }
    .product-row {
      display: flex;
      gap: 12px;
      margin-bottom: 10px;
    }
    .product-row input {
      flex: 1 1 0%;
      margin-bottom: 0;
    }
    input[type="number"] { width: 105px; flex: 0}
    .product-row .remove-btn {
      background: #f87171;
      border: none;
      color: #fff;
      padding: 0 10px;
      border-radius: 6px;
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
 ...