# -*- coding: utf-8 -*- import re html_path = 'public/ai-tools.html' with open(html_path, 'r', encoding='utf-8') as f: html = f.read() # We want to replace everything from to the end of
part2_start = html.find('
✨ 零門檻 AI 備課

族語教學 20-30 款評量與遊戲「提示詞百寶箱」

💡 免學寫程式!零技術門檻!
只要找到喜歡的評量或遊戲,點擊下方的 「📋 一鍵複製提示詞」,然後貼到 Gemini 或是 ChatGPT,再附上您的課文內容,AI 就會瞬間為您產出可以直接印給學生玩的考卷、表格或桌遊卡牌!

🔄
載入提示詞百寶箱中...
""" new_html = html[:part2_start] + new_part2 + "\n " + html[main_end:] with open(html_path, 'w', encoding='utf-8') as f: f.write(new_html) print("Replaced ai-tools.html Part 2 successfully.") css_path = 'public/css/app.css' with open(css_path, 'a', encoding='utf-8') as f: f.write(""" /* --- Prompt Library Styles --- */ .prompt-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .prompt-tab-btn { padding: 10px 20px; border-radius: 24px; border: 2px solid #e5e7eb; background: white; color: #4b5563; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s ease; } .prompt-tab-btn:hover { background: #f3f4f6; border-color: #d1d5db; } .prompt-tab-btn.active { background: #047857; color: white; border-color: #047857; box-shadow: 0 4px 10px rgba(4,120,87,0.3); } .prompt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .prompt-card { background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .prompt-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); border-color: #10b981; } .prompt-card-header { display: flex; align-items: flex-start; margin-bottom: 16px; } .prompt-icon { font-size: 28px; margin-right: 14px; background: #ecfdf5; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; } .prompt-title-wrap { flex: 1; } .prompt-id { font-size: 13px; color: #10b981; font-weight: 900; margin-bottom: 4px; letter-spacing: 0.5px; } .prompt-title { font-size: 18px; font-weight: 800; color: #111827; margin: 0; line-height: 1.3; } .prompt-tags { margin-bottom: 12px; } .prompt-tag { display: inline-block; background: #f3f4f6; color: #374151; font-size: 12px; padding: 4px 10px; border-radius: 12px; margin-right: 6px; font-weight: 600; } .prompt-desc { font-size: 14px; color: #4b5563; margin-bottom: 16px; flex: 1; line-height: 1.6; } .prompt-target { font-size: 13px; color: #374151; background: #f9fafb; padding: 12px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #10b981; line-height: 1.5; } .btn-copy-prompt { background: #047857; color: white; border: none; border-radius: 10px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; width: 100%; } .btn-copy-prompt:hover { background: #065f46; box-shadow: 0 4px 12px rgba(4,120,87,0.3); } .btn-copy-prompt.copied { background: #111827; pointer-events: none; } """) print("Appended CSS successfully.") js_path = 'public/js/app.js' with open(js_path, 'a', encoding='utf-8') as f: f.write(""" // --- Prompt Library Logic --- let allPrompts = []; async function loadPrompts() { const grid = document.getElementById('prompt-grid'); if (!grid) return; try { const res = await fetch('/data/prompts.json'); allPrompts = await res.json(); renderPrompts('all'); setupPromptTabs(); } catch (error) { console.error('Failed to load prompts:', error); grid.innerHTML = '
載入提示詞失敗,請檢查網路連線。
'; } } function renderPrompts(category) { const grid = document.getElementById('prompt-grid'); if (!grid) return; grid.innerHTML = ''; const filtered = category === 'all' ? allPrompts : allPrompts.filter(p => p.category === category); filtered.forEach(prompt => { const card = document.createElement('div'); card.className = 'prompt-card'; card.innerHTML = `
${prompt.icon}
${prompt.id}

${prompt.title}

${prompt.category.split(' ')[0]}
${prompt.purpose}
🎯 訓練能力:
${prompt.targetSkill}
`; grid.appendChild(card); }); } function setupPromptTabs() { const tabs = document.querySelectorAll('.prompt-tab-btn'); tabs.forEach(tab => { tab.addEventListener('click', (e) => { // Remove active class from all tabs.forEach(t => t.classList.remove('active')); // Add active to clicked e.target.classList.add('active'); const cat = e.target.getAttribute('data-category'); renderPrompts(cat); }); }); } window.copyPromptText = function(btn, promptId) { const promptData = allPrompts.find(p => p.id === promptId); if (!promptData) return; const textToCopy = promptData.promptTemplate; navigator.clipboard.writeText(textToCopy).then(() => { const originalText = btn.innerHTML; btn.innerHTML = '✅ 已複製!請貼到 Gemini'; btn.classList.add('copied'); setTimeout(() => { btn.innerHTML = originalText; btn.classList.remove('copied'); }, 3000); }).catch(err => { alert('複製失敗,請手動選取複製'); console.error(err); }); }; // Initialize if on ai-tools page document.addEventListener('DOMContentLoaded', () => { if (document.getElementById('prompt-library-section')) { loadPrompts(); } }); """) print("Appended JS logic successfully.")