HEX

File: /var/www/clients/client2/web716/web/nasobilka/nasobilka.html
<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Násobilka 1–10 (fialová)</title>
  <style>
    :root{
      --purple-1:#f5f0ff;
      --purple-2:#e9dcff;
      --purple-3:#d7c4ff;
      --purple-4:#c3a8ff;
      --purple-5:#ae8bff;
      --purple-6:#8f6cff;
      --purple-7:#7a59ef;
      --purple-8:#5a3ccf;
      --purple-9:#452aa8;
      --purple-10:#341f83;
      --bg:#ffffff;
      --text:#1a1a1a;
    }

    html,body{height:100%; margin:0; padding:0;}
    body{
      background:var(--bg); color:var(--text);
      font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }
    .wrap{max-width: 100%; margin: 0 auto; padding: 12px;}    
    h1{font-size:clamp(18px,4vw,28px); margin:0 0 8px; letter-spacing:.3px}
    p.lead{margin:0 0 12px; font-size:clamp(12px,2.5vw,16px); color:#4b4b4b}

    .card{
      background:#fff; border-radius:12px; box-shadow:0 6px 16px rgba(76,45,136,.12), 0 2px 6px rgba(0,0,0,.06);
      padding: 8px;
    }

    table{ border-collapse: collapse; width:100%; table-layout: fixed; }
    caption{ caption-side: top; text-align:left; padding:.5rem 0 0.5rem; font-weight:600; color:#5a3ccf;}

    th, td{
      text-align:center; 
      padding: 6px;
      font-size: clamp(10px, 2.2vw, 16px);
      border: 1px solid #e9e6f7;
      word-wrap: break-word;
    }

    thead th{ background:var(--purple-7); color:#fff; }
    tbody th{ background:var(--purple-7); color:#fff; }

    td{ font-weight:600; }

    .btn{
      border:0; cursor:pointer; padding:6px 10px; border-radius:8px; font-weight:700;
      background: linear-gradient(135deg, var(--purple-6), var(--purple-8)); color:#fff;
      font-size: clamp(10px,2vw,14px);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Násobilka 1–10</h1>
    <p class="lead">Tabulka násobení, která se vždy vejde na obrazovku.</p>

    <div class="card">
      <div style="margin: 8px 0;">
        <button class="btn" id="toggleColors">Zapnout / vypnout barvy</button>
      </div>
      <table id="multTable" aria-label="Tabulka násobilky 1 až 10">
        <caption>Výsledky násobení (1×1 až 10×10)</caption>
        <thead>
          <tr id="headRow"></tr>
        </thead>
        <tbody id="body"></tbody>
      </table>
    </div>
  </div>

  <script>
    const size = 10; // 10×10
    const headRow = document.getElementById('headRow');
    const body = document.getElementById('body');

    const corner = document.createElement('th');
    corner.textContent = '×';
    headRow.appendChild(corner);
    for (let j=1; j<=size; j++){
      const th = document.createElement('th');
      th.textContent = j;
      headRow.appendChild(th);
    }

    function valueToPurple(v){
      const t = (v-1)/99;
      const light = 96 - 20*t;
      const sat = 80 - 10*t;
      return `hsl(265 ${sat}% ${light}%)`;
    }

    let colorsOn = true;

    for (let i=1; i<=size; i++){
      const tr = document.createElement('tr');
      const rowHead = document.createElement('th');
      rowHead.textContent = i;
      tr.appendChild(rowHead);
      for (let j=1; j<=size; j++){
        const td = document.createElement('td');
        const v = i*j;
        td.textContent = v;
        td.style.background = valueToPurple(v);
        tr.appendChild(td);
      }
      body.appendChild(tr);
    }

    document.getElementById('toggleColors').addEventListener('click', () => {
      colorsOn = !colorsOn;
      const cells = document.querySelectorAll('#multTable td');
      cells.forEach(td => {
        if(colorsOn){
          td.style.background = valueToPurple(parseInt(td.textContent));
        } else {
          td.style.background = 'white';
        }
      });
    });
  </script>
</body>
</html>