cn template chatgpt

body { font-family: Arial, sans-serif; background-color: #fdfdfd; margin: 0; padding: 0; } .container { max-width: 900px; margin: 20px auto; padding: 0 15px; } .tab-group { margin: 25px 0; } .tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-around; margin-bottom: 10px; } .tab-buttons button { padding: 10px 18px; background-color: #ffe082; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } .tab-buttons button.active { background-color: #ffca28; } .tab-content { display: none; background-color: #fff8e1; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .tab-content.active { display: block; } h2 { color: #2e7d32; margin-top: 0; } strong { color: #2e7d32; } textarea { width: 100%; padding: 10px; } /* Tooltip styles */ .vocab-tooltip { border-bottom: 1px dotted #2e7d32; cursor: help; color: #2e7d32; font-weight: bold; } .non-vocab-tooltip { border-bottom: 1px dotted #000; cursor: help; color: #000; font-weight: bold; } .vocab-tooltip:hover::after, .non-vocab-tooltip:hover::after { content: attr(data-tooltip); position: absolute; background: #333; color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10; } .answer-tooltip { border-bottom: 1px dotted #1976d2; cursor: help; color: #1976d2; font-weight: bold; } .answer-tooltip:hover::after { content: attr(data-answer); position: absolute; background: #1976d2; color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; } /* Chinese story font bigger */ #story-a p { font-size: 20pt; line-height: 1.6; }

Summary (25 words):

document.querySelectorAll(‘.tab-group’).forEach(group => { const buttons = group.querySelectorAll(‘.tab-btn’); const contents = group.querySelectorAll(‘.tab-content’); buttons.forEach(button => { button.addEventListener(‘click’, () => { buttons.forEach(btn => btn.classList.remove(‘active’)); contents.forEach(content => content.classList.remove(‘active’)); button.classList.add(‘active’); document.getElementById(button.dataset.tab).classList.add(‘active’); }); }); });