| |
| import re |
|
|
| html_path = 'public/ai-tools.html' |
| with open(html_path, 'r', encoding='utf-8') as f: |
| html = f.read() |
|
|
| |
| part2_start = html.find('<!-- Part 2:') |
| if part2_start == -1: |
| print("Could not find Part 2 comment.") |
| else: |
| main_end = html.find('</main>', part2_start) |
| |
| new_part2 = """ |
| <!-- Part 2: 族語教學 30 款評量與遊戲提示詞百寶箱 (Prompt Library) --> |
| <div class="tool-card" id="prompt-library-section" style="margin-top: 32px; border: none; padding: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden;"> |
| <div class="tool-card-header" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%); padding: 24px; border-bottom: none;"> |
| <span class="tool-badge" style="background: rgba(255,255,255,0.25); color: white; margin-bottom: 12px; display: inline-block;">✨ 零門檻 AI 備課</span> |
| <h3 style="color: white; margin: 0; font-size: 24px; font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">族語教學 20-30 款評量與遊戲「提示詞百寶箱」</h3> |
| </div> |
| <div style="padding: 24px;"> |
| <div style="background: #f0fdf4; border: 1px solid #bbf7d0; padding: 20px; border-radius: 12px; margin-bottom: 24px;"> |
| <p style="font-size: 16px; color: #166534; margin: 0; font-weight: 600; line-height: 1.6;"> |
| 💡 <strong>免學寫程式！零技術門檻！</strong> <br> |
| 只要找到喜歡的評量或遊戲，點擊下方的 <strong>「📋 一鍵複製提示詞」</strong>，然後貼到 Gemini 或是 ChatGPT，再附上您的課文內容，AI 就會瞬間為您產出可以直接印給學生玩的考卷、表格或桌遊卡牌！ |
| </p> |
| </div> |
| |
| <!-- Category Filter Tabs --> |
| <div class="prompt-tabs" id="prompt-tabs"> |
| <button class="prompt-tab-btn active" data-category="all">🌟 全部</button> |
| <button class="prompt-tab-btn" data-category="聽力評量 (Listening)">🎧 聽力</button> |
| <button class="prompt-tab-btn" data-category="口說評量 (Speaking)">🗣️ 口說</button> |
| <button class="prompt-tab-btn" data-category="閱讀評量 (Reading)">📖 閱讀</button> |
| <button class="prompt-tab-btn" data-category="寫作/語法評量 (Writing)">✍️ 寫作</button> |
| <button class="prompt-tab-btn" data-category="綜合互動與遊戲 (Games)">🎲 遊戲</button> |
| </div> |
| |
| <!-- Prompt Grid Container --> |
| <div class="prompt-grid" id="prompt-grid"> |
| <div style="text-align: center; padding: 40px; color: #6b7280; font-size: 16px;"> |
| <span class="step-icon" style="display:inline-block; margin-bottom: 10px; animation: spin 2s linear infinite;">🔄</span><br> |
| 載入提示詞百寶箱中... |
| </div> |
| </div> |
| </div> |
| </div> |
| """ |
| 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 = '<div style="color:#ef4444; padding:20px; font-weight:bold;">載入提示詞失敗，請檢查網路連線。</div>'; |
| } |
| } |
| |
| 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 = ` |
| <div class="prompt-card-header"> |
| <div class="prompt-icon">${prompt.icon}</div> |
| <div class="prompt-title-wrap"> |
| <div class="prompt-id">${prompt.id}</div> |
| <h4 class="prompt-title">${prompt.title}</h4> |
| </div> |
| </div> |
| <div class="prompt-tags"> |
| <span class="prompt-tag">${prompt.category.split(' ')[0]}</span> |
| </div> |
| <div class="prompt-desc">${prompt.purpose}</div> |
| <div class="prompt-target"><strong>🎯 訓練能力：</strong><br>${prompt.targetSkill}</div> |
| <button class="btn-copy-prompt" onclick="copyPromptText(this, '${prompt.id}')"> |
| 📋 一鍵複製提示詞 |
| </button> |
| `; |
| 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.") |
|
|
