<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速單字例句庫</title>
    <style>
        body { font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif; max-width: 800px; margin: 30px auto; padding: 20px; background-color: #f8f9fa; }
        .container { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        h2 { color: #333; margin-top: 0; }
        textarea { width: 100%; height: 150px; padding: 12px; border: 2px solid #eee; border-radius: 8px; font-size: 16px; margin-bottom: 10px; box-sizing: border-box; transition: 0.3s; }
        textarea:focus { border-color: #4A90E2; outline: none; }
        .status { font-size: 14px; color: #666; margin-bottom: 15px; }
        button { background-color: #4A90E2; color: white; padding: 10px 25px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; width: 100%; }
        button:disabled { background-color: #ccc; }
        #results { margin-top: 25px; }
        .item-card { border-bottom: 1px solid #eee; padding: 15px 0; animation: fadeIn 0.5s ease; }
        .item-word { font-size: 1.2em; font-weight: bold; color: #d0021b; }
        .item-pos { color: #888; font-style: italic; margin-left: 8px; font-size: 0.9em; }
        .item-sentence { margin: 8px 0; color: #222; line-height: 1.5; background: #f0f7ff; padding: 10px; border-radius: 6px; }
        .item-trans { color: #666; font-size: 0.95em; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body>

<div class="container">
    <h2>單字例句自動生成器 (免費版)</h2>
    <div class="status">請輸入單字（每行一個），系統將自動從字典抓取例句並翻譯。</div>
    <textarea id="wordInput" placeholder="例如：
Adventure
Strive
Innovation"></textarea>
    
    <div class="status">單字數：<span id="count">0</span> / 50</div>
    <button id="startBtn" onclick="processWords()">開始抓取例句</button>

    <div id="results"></div>
</div>

<script>
    const wordInput = document.getElementById('wordInput');
    const countDisplay = document.getElementById('count');
    const startBtn = document.getElementById('startBtn');
    const resultsDiv = document.getElementById('results');

    // 監聽輸入字數
    wordInput.addEventListener('input', () => {
        const words = getWordList();
        countDisplay.innerText = words.length;
        startBtn.disabled = words.length === 0 || words.length > 50;
    });

    function getWordList() {
        return wordInput.value.split('\n').map(w => w.trim()).filter(w => w !== '');
    }

    async function processWords() {
        const words = getWordList();
        resultsDiv.innerHTML = '<p style="color:#4A90E2">正在查詢字典中，請稍候...</p>';
        startBtn.disabled = true;

        let finalHtml = '';

        for (const word of words) {
            try {
                // 1. 呼叫免費字典 API
                const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
                if (!response.ok) throw new Error('找不到單字');
                const data = await response.json();
                
                // 提取第一個含有例句的定義
                let foundSentence = "未找到相關例句。";
                let pos = "";
                
                for (let meaning of data[0].meanings) {
                    pos = meaning.partOfSpeech;
                    const definitionWithExample = meaning.definitions.find(d => d.example);
                    if (definitionWithExample) {
                        foundSentence = definitionWithExample.example;
                        break;
                    }
                }

                // 2. 呼叫翻譯 API (使用 MyMemory 免費接口)
                const transRes = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(foundSentence)}&langpair=en|zh-TW`);
                const transData = await transRes.json();
                const translatedText = transData.responseData.translatedText;

                finalHtml += `
                    <div class="item-card">
                        <div><span class="item-word">${word}</span><span class="item-pos">[${pos}]</span></div>
                        <div class="item-sentence">“ ${foundSentence} ”</div>
                        <div class="item-trans">翻譯：${translatedText}</div>
                    </div>
                `;
            } catch (err) {
                finalHtml += `<div class="item-card" style="color:#999">【${word}】無法查詢到例句或翻譯。</div>`;
            }
        }

        resultsDiv.innerHTML = finalHtml;
        startBtn.disabled = false;
    }
</script>

</body>
</html>