Durchsatz-Test-3

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>Durchsatzmessung</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.16/jspdf.plugin.autotable.min.js"></script>
    <style>
      body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 20px; }
      h1 { text-align: center; font-size: 2em; color: #0066cc; margin-bottom: 20px; }
      label, .btn { font-size: 1em; background: white; }
      .table-container { 
        display: flex; 
        flex-direction: column; 
        background: lightgrey; 
        border-radius: 8px; 
        padding: 15px; 
        max-width: 100vw; 
        margin-bottom: 20px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        animation: fadeIn 0.5s ease; 
      }
      table { 
        width: 100%; 
        table-layout: fixed; 
        border-collapse: collapse; 
        margin-top: 5px; 
      }
      th, td { height: 3vh; text-align: center; overflow: hidden; }
      th { background-color: #007bff; color: white; }
      input[type="number"] { 
        width: 99%; 
        padding: 10px; 
        box-sizing: border-box; 
        border: 1px solid #ccc; 
        border-radius: 4px; 
        text-align: center; 
      }
      .btn { padding: 5px 15px; cursor: pointer; margin: 1px; border: none; border-radius: 40px; color: white; }
      .remove-btn { background-color: #dc3545; }
      #generateTables { background-color: #28a745; }
      #exportData { background-color: #17a2b8; }
      #submitBtn { background-color: #007bff; }
      #printBtn { background-color: #6c757d; }
      #btnAddRow { background-color: #6c757d; }
      .btn:hover { opacity: 0.9; }
    </style>
  </head>
  
  <body>
    <h1>Durchsatzmessung</h1>

    <div id="controls">
        <button...