<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>語彙カード印刷ツール</title>

  <style>

.row::before,

    .row::after,

    .row::marker {

      content: "";

      position: absolute;

      top: 0;

      bottom: 0;

      width: 0.3mm;

      background-color: #999;

      z-index: 1;

    }


    .row::before { left: 148.5mm; }     /* 中央線 */

    .row::after { left: 80.25mm; }      /* 左中間線 */

    .row::marker { left: 216.75mm; }    /* 右中間線 */


    @page { size: A4 landscape; margin: 0; }

    body { margin: 0; font-family: sans-serif; }

    .controls { padding: 10px; }

    input, button { margin: 5px 0; font-size: 14px; }

    .word-list { margin-top: 10px; max-height: 300px; overflow-y: auto; }

    .word-item {

      padding: 6px 12px;

      margin: 4px 0;

      border: 1px solid #ccc;

      border-radius: 4px;

      background-color: #f9f9f9;

      cursor: pointer;

    }

    .word-item.selected {

      background-color: #cce5ff;

      border-color: #3399ff;

    }

    .row {

      display: flex;

      height: 52mm;

      border-bottom: 0.5mm dashed #999;

      page-break-inside: avoid;

      position: relative;

    }

    .row.even { transform: rotate(180deg); }

    .row::before {

      content: "";

      position: absolute;

      top: 0; bottom: 0; left: 50%;

      width: 0.3mm;

      background-color: #999;

      z-index: 1;

    }

    .rotate-btn {

      position: absolute;

      top: 5px;

      right: 10px;

      font-size: 12pt;

      z-index: 2;

      background-color: #eee;

      border: 1px solid #aaa;

      padding: 4px 8px;

      cursor: pointer;

    }

    .divider-line {

      height: 1mm;

      background-color: #333;

      margin: 0;

    }

    .card-block {

      flex: 1;

      display: flex;

      padding: 5mm;

      box-sizing: border-box;

      border-right: 0.5mm dashed #ccc;

    }

    .card-block.remove-border { border-right: none !important; }

    .card-left, .card-right {

      flex: 1;

      padding: 0 5mm;

    }

.card-right {

  /* border-left: 0.3mm solid #aaa; */

}

    
    .card-left small {

      display: block;

      margin-top: 6px;

      color: #666;

      font-size: 10pt;

    }

    @media print {

      .controls, .word-list, .rotate-btn { display: none; }

      .divider-line { display: block !important; height: 1mm; background-color: #333 !important; }

    }

  </style>

</head>

<body>

  <div class="controls">

    <input type="file" id="csvFile" accept=".csv"><br>

    <button onclick="loadWords()">単語一覧を表示</button>

    <p>選択された単語数：<span id="selectedCount">0</span></p>

    <button onclick="generatePreview()">プレビューを表示</button><br>

    <label>空白用紙の枚数：</label>

    <input type="number" id="blankCount" value="1" min="1" max="20">

    <button onclick="generateBlank()">空白用紙を表示</button>

    <button onclick="window.print()">印刷</button>

  </div>


  <div class="word-list" id="wordList"></div>

  <div id="preview"></div>


  <script>

    let allWords = [];


    function getToday() {

      const d = new Date();

      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

    }


    function loadWords() {

      const fileInput = document.getElementById('csvFile');

      const wordList = document.getElementById('wordList');

      wordList.innerHTML = '';

      allWords = [];


      if (!fileInput.files.length) {

        alert('CSVファイルを選択してください');

        return;

      }


      const reader = new FileReader();

      reader.onload = function(e) {

        const lines = e.target.result.trim().split('\n');

        lines.forEach((line) => {

          const columns = line.split(',');

          if (columns.length < 4) return;

          allWords.push({

            word: columns[0].trim(),

            pron: columns[1].trim(),

            translation: columns[2].trim(),

            definition: columns[3].trim(),

            selected: false

          });

        });

        renderWordList();

      };

      reader.readAsText(fileInput.files[0], 'UTF-8');

    }


    function renderWordList() {

      const wordList = document.getElementById('wordList');

      wordList.innerHTML = '';

      allWords.forEach((wordObj, index) => {

        const item = document.createElement('div');

        item.className = 'word-item';

        item.textContent = `${wordObj.word} (${wordObj.translation})`;

        if (wordObj.selected) item.classList.add('selected');

        item.onclick = () => toggleSelection(index);

        wordList.appendChild(item);

      });

      updateSelectedCount();

    }


    function toggleSelection(index) {

      allWords[index].selected = !allWords[index].selected;

      renderWordList();

    }


    function updateSelectedCount() {

      document.getElementById('selectedCount').textContent = allWords.filter(w => w.selected).length;

    }


    function generatePreview() {

      const preview = document.getElementById('preview');

      preview.innerHTML = '';

      const selectedWords = allWords.filter(w => w.selected);

      const blocksPerRow = 2;

      const totalRows = 4;


      for (let i = 0; i < totalRows; i++) {

        const row = document.createElement('div');

        row.className = 'row';


        const rotateBtn = document.createElement('button');

        rotateBtn.className = 'rotate-btn';

        rotateBtn.textContent = '🔄 回転';

        rotateBtn.onclick = () => {

          row.classList.toggle('even');

        };

        row.appendChild(rotateBtn);


        for (let j = 0; j < blocksPerRow; j++) {

          const wordIndex = i * blocksPerRow + j;

          const wordObj = selectedWords[wordIndex];


          const block = document.createElement('div');

          block.className = 'card-block';


          if ((i % 2 === 1 && j === 0) || (i % 2 === 0 && j === blocksPerRow - 1) || wordIndex === selectedWords.length - 1) {

            block.classList.add('remove-border');

          }


          block.innerHTML = wordObj ? `

            <div class="card-left">

              <strong>問題：</strong> ${wordObj.word}<br>

              <strong>発音：</strong> ${wordObj.pron}<br>

              <small>印刷日：${getToday()}</small>

            </div>

            <div class="card-right">

              <strong>訳：</strong> ${wordObj.translation}<br>

              <strong>定義：</strong> ${wordObj.definition}

            </div>

          ` : `

            <div class="card-left"></div>

            <div class="card-right"></div>

          `;

          row.appendChild(block);

        }


        preview.appendChild(row);

        if (i === 1) {

          const divider = document.createElement('div');

          divider.className = 'divider-line';

          preview.appendChild(divider);

        }

      }

    }


    function generateBlank() {

  const preview = document.getElementById('preview');

  preview.innerHTML = '';

  const blocksPerRow = 2;

  const rowsPerPage = 4;

  const pageCount = parseInt(document.getElementById('blankCount').value) || 1;


  for (let p = 0; p < pageCount; p++) {

    for (let i = 0; i < rowsPerPage; i++) {

      const row = document.createElement('div');

      row.className = 'row';


      const rotateBtn = document.createElement('button');

      rotateBtn.className = 'rotate-btn';

      rotateBtn.textContent = '🔄 回転';

      rotateBtn.onclick = () => {

        row.classList.toggle('even');

      };

      row.appendChild(rotateBtn);


      for (let j = 0; j < blocksPerRow; j++) {

        const block = document.createElement('div');

        block.className = 'card-block';


        if ((i % 2 === 1 && j === 0) || (i % 2 === 0 && j === blocksPerRow - 1)) {

          block.classList.add('remove-border');

        }


        block.innerHTML = `

          <div class="card-left"></div>

          <div class="card-right"></div>

        `;

        row.appendChild(block);

      }


      preview.appendChild(row);


      // 2段目の後に仕切り線を入れる

      if (i === 1) {

        const divider = document.createElement('div');

        divider.className = 'divider-line';

        preview.appendChild(divider);

      }

    }

  }

}

  </script>

</body>

</html>