Spaces:

youngtsai
/

lsw-html-creator

Running

Youngger9765 commited on Jul 1

Commit

0a1821d

1 Parent(s): 698390e

更新 index.html 模板，重構頁面結構與樣式

- 修改標題顯示為主標題與主題的組合
- 調整頁面樣式，改善排版與顏色搭配
- 新增活動辦法、報名說明、評選條件等區塊，並優化內容呈現
- 更新 JSON 配置，增加獎勵辦法與注意事項的設定
- 改善響應式設計，確保在不同裝置上顯示良好

這次更新旨在提升使用者體驗與視覺效果，並確保內容的清晰易讀。

Files changed (1) hide show

templates/index.html +749 -464

templates/index.html CHANGED Viewed

@@ -141,491 +141,709 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }}</title>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
-            font-family: 'Noto Sans TC', sans-serif;
-            background: #f0f4f3;
-            color: #333;
             line-height: 1.6;
         }
         .container {
-            max-width: 1400px;
             margin: 0 auto;
-            background: white;
-            box-shadow: 0 0 20px rgba(0,0,0,0.1);
-        }
-        /* Hero Section */
-        .hero {
-            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-            padding: 60px 40px;
-            position: relative;
-            overflow: hidden;
         }
-        .hero::after {
-            content: '';
-            position: absolute;
-            right: -100px;
-            top: -100px;
-            width: 300px;
-            height: 300px;
-            background: rgba(255,255,255,0.3);
-            border-radius: 50%;
         }
-        .hero-content {
-            position: relative;
-            z-index: 1;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 40px;
         }
-        .hero-text h1 {
-            font-size: 48px;
-            color: #2e7d32;
             margin-bottom: 20px;
-            font-weight: 700;
         }
-        .hero-text h2 {
-            font-size: 36px;
-            color: #388e3c;
             margin-bottom: 30px;
-            font-weight: 500;
-        }
-        .hero-description {
-            font-size: 18px;
-            color: #555;
             line-height: 1.8;
-            margin-bottom: 30px;
         }
-        .hero-buttons {
             display: flex;
             gap: 20px;
         }
         .btn {
             padding: 15px 30px;
-            border-radius: 30px;
             text-decoration: none;
-            font-weight: 500;
             transition: all 0.3s ease;
-            display: inline-block;
         }
         .btn-primary {
-            background: #4caf50;
             color: white;
         }
-        .btn-primary:hover {
-            background: #45a049;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(76,175,80,0.3);
-        }
         .btn-secondary {
-            background: white;
-            color: #4caf50;
-            border: 2px solid #4caf50;
-        }
-        .btn-secondary:hover {
-            background: #4caf50;
             color: white;
         }
-        .hero-image {
-            flex-shrink: 0;
         }
-        .hero-image img {
-            max-width: 500px;
-            width: 100%;
-            height: auto;
             border-radius: 20px;
         }
-        /* Info Cards Section */
-        .info-section {
-            padding: 60px 40px;
         }
-        .section-title {
-            font-size: 32px;
-            color: #2e7d32;
-            text-align: center;
-            margin-bottom: 50px;
-            font-weight: 600;
         }
-        .info-cards {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            margin-bottom: 60px;
         }
-        .info-card {
             background: #f8f9fa;
             padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
-            transition: transform 0.3s ease;
         }
-        .info-card:hover {
             transform: translateY(-5px);
         }
-        .info-card h3 {
-            color: #4caf50;
-            font-size: 24px;
-            margin-bottom: 15px;
             display: flex;
             align-items: center;
-            gap: 10px;
         }
-        .info-card .icon {
-            width: 30px;
-            height: 30px;
-            background: #4caf50;
             border-radius: 50%;
-            display: inline-flex;
             align-items: center;
             justify-content: center;
-            color: white;
-            font-size: 16px;
         }
-        .highlight-box {
-            background: #fff3cd;
-            border-left: 4px solid #ffc107;
-            padding: 20px;
-            margin: 20px 0;
-            border-radius: 5px;
         }
-        .highlight-box strong {
-            color: #ff9800;
         }
-        /* Categories Section */
-        .categories-section {
-            background: #f5f5f5;
-            padding: 60px 40px;
         }
-        .category-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 40px;
-            max-width: 1000px;
-            margin: 0 auto;
         }
-        .category-card {
-            background: white;
-            padding: 40px;
-            border-radius: 15px;
             text-align: center;
-            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
-            transition: all 0.3s ease;
         }
-        .category-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
         }
-        .category-icon {
-            width: 80px;
-            height: 80px;
-            margin: 0 auto 20px;
-            background: #e8f5e9;
-            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 40px;
         }
-        .category-card h3 {
-            color: #2e7d32;
-            font-size: 28px;
-            margin-bottom: 20px;
         }
-        /* Scoring Table */
-        .scoring-section {
-            padding: 60px 40px;
         }
-        .scoring-table {
             width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
             border-collapse: collapse;
             background: white;
-            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
             border-radius: 10px;
             overflow: hidden;
         }
-        .scoring-table th,
-        .scoring-table td {
-            padding: 20px;
             text-align: left;
-            border-bottom: 1px solid #e0e0e0;
         }
-        .scoring-table th {
-            background: #4caf50;
             color: white;
-            font-weight: 500;
         }
-        .scoring-table tr:hover {
-            background: #f5f5f5;
         }
-        .scoring-table td:first-child {
-            font-weight: 500;
-            color: #2e7d32;
         }
-        /* Timeline Section */
-        .timeline-section {
-            background: #e8f5e9;
-            padding: 60px 40px;
         }
-        .timeline {
-            max-width: 800px;
-            margin: 0 auto;
         }
         .timeline-item {
-            background: white;
-            padding: 30px;
             border-radius: 10px;
-            margin-bottom: 20px;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
-            border-left: 4px solid #4caf50;
         }
-        .timeline-date {
-            color: #4caf50;
-            font-weight: 600;
-            font-size: 18px;
-            margin-bottom: 10px;
         }
-        /* Footer */
-        .footer {
-            background: #2e7d32;
             color: white;
             padding: 40px;
             text-align: center;
         }
-        .footer a {
-            color: #81c784;
-            text-decoration: none;
         }
-        .footer a:hover {
-            color: #a5d6a7;
-            text-decoration: underline;
         }
-        /* Responsive */
         @media (max-width: 768px) {
-            .hero-content {
                 flex-direction: column;
             }
-            .hero-text h1 {
-                font-size: 36px;
             }
-            .hero-text h2 {
-                font-size: 28px;
             }
-            .category-grid {
-                grid-template-columns: 1fr;
             }
-            .info-cards {
-                grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- Hero Section -->
-        <section class="hero">
-            <div class="hero-content">
-                <div class="hero-text">
-                    <h1>{{ year }}{{ eventType }}</h1>
-                    <h2>{{ theme }}</h2>
-                    <p class="hero-description">
-                        {{ description }}
-                    </p>
-                    <div class="hero-buttons">
-                        <a href="#register" class="btn btn-primary">個人報名</a>
-                        <a href="#register" class="btn btn-secondary">學校報名</a>
-                    </div>
-                </div>
-                {% if heroImage %}
-                <div class="hero-image">
-                    <img src="{{ heroImage }}" alt="活動主視覺">
-                </div>
-                {% endif %}
             </div>
-        </section>
-        <!-- Activity Info Section -->
-        <section class="info-section">
-            <h2 class="section-title">活動辦法</h2>
-            <div class="info-cards">
-                <div class="info-card">
-                    <h3><span class="icon">👥</span> 參加對象</h3>
-                    <p>{{ participants }}</p>
                 </div>
-                <div class="info-card">
-                    <h3><span class="icon">📝</span> 進行方式</h3>
-                    <p>{{ method }}</p>
-                    {% if methodHighlight %}
-                    <div class="highlight-box">
-                        <strong>第一關：</strong>{{ methodStep1 }}<br>
-                        <strong>活動期間：</strong>{{ activityPeriod }}
-                    </div>
-                    {% endif %}
                 </div>
-                <div class="info-card">
-                    <h3><span class="icon">🏆</span> 積分獎</h3>
-                    <p>{{ scoringInfo }}</p>
-                    {% if scoringHighlight %}
-                    <div class="highlight-box">
-                        {{ scoringHighlight }}
                     </div>
-                    {% endif %}
                 </div>
             </div>
-            {% if stage2Info %}
-            <div class="info-cards">
-                <div class="info-card">
-                    <h3><span class="icon">✍️</span> 第二關：{{ stage2Title }}</h3>
-                    <p><strong>活動期間：</strong>{{ stage2Period }}</p>
-                    <p>{{ stage2Description }}</p>
                 </div>
-                <div class="info-card">
-                    <h3><span class="icon">🎁</span> {{ stage2AwardTitle }}</h3>
-                    <p>{{ stage2AwardInfo }}</p>
                 </div>
             </div>
-            {% endif %}
-        </section>
-        <!-- Categories Section -->
-        {% if hasCategories %}
-        <section class="categories-section">
-            <h2 class="section-title">報名說明</h2>
-            <div class="category-grid">
-                <div class="category-card">
-                    <div class="category-icon">👤</div>
-                    <h3>個人報名</h3>
-                    <p>{{ individualSignup }}</p>
-                </div>
-                <div class="category-card">
-                    <div class="category-icon">🏫</div>
-                    <h3>學校報名</h3>
-                    <p>{{ schoolSignup }}</p>
                 </div>
             </div>
-        </section>
         {% endif %}
-        <!-- Scoring Table -->
         {% if scoringCriteria %}
-        <section class="scoring-section">
-            <h2 class="section-title">評分標準</h2>
-            <table class="scoring-table">
-                <thead>
-                    <tr>
-                        <th>評分項目</th>
-                        <th>評分占比</th>
-                        <th>內容說明</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for criteria in scoringCriteria %}
-                    <tr>
-                        <td>{{ criteria.item }}</td>
-                        <td>{{ criteria.percentage }}</td>
-                        <td>{{ criteria.description }}</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        </section>
         {% endif %}
-        <!-- Timeline Section -->
-        {% if timeline %}
-        <section class="timeline-section">
-            <h2 class="section-title">重要日期與聯絡方式</h2>
-            <div class="timeline">
-                {% for event in timeline %}
-                <div class="timeline-item">
-                    <div class="timeline-date">{{ event.date }}</div>
-                    <div class="timeline-content">{{ event.description }}</div>
                 </div>
                 {% endfor %}
             </div>
-        </section>
         {% endif %}
-        <!-- Footer -->
-        <footer class="footer">
-            <h3>{{ footerTitle }}</h3>
-            {% if websiteUrl %}
-            <p>活動網頁：<a href="{{ websiteUrl }}" target="_blank">{{ websiteUrl }}</a></p>
-            {% endif %}
-            {% if facebookUrl %}
-            <p>Facebook：<a href="{{ facebookUrl }}" target="_blank">{{ facebookUrl }}</a></p>
-            {% endif %}
-            {% if contactInfo %}
-            <p class="contact-info">{{ contactInfo }}</p>
             {% endif %}
-        </footer>
     </div>
 </body>
 </html>{% endraw %}</textarea>
@@ -660,60 +878,71 @@
                                 <!-- Form Mode -->
                                 <div id="variables-form" class="space-y-4">
-                                    <!-- 基本資訊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">基本資訊</h4>
                                         <div class="space-y-3">
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">網頁標題</label>
-                                                <input type="text" id="var-title" value="2025聯發科技公益活動" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">年份</label>
-                                                <input type="text" id="var-year" value="2025" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動類型</label>
-                                                <input type="text" id="var-eventType" value="聯發科技公益活動" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動主題</label>
-                                                <input type="text" id="var-theme" value="世界觀察員計畫" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動描述</label>
-                                                <textarea id="var-description" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">讓孩子透過文字探索自然，成為真正的世界觀察員！樂寫公益學習網誠摯邀請全國國小學生，參加『自然書寫徵文比賽』，展現你獨特的觀察力與創意思維。</textarea>
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- 活動資訊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">活動資訊</h4>
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">參加對象</label>
-                                                <input type="text" id="var-participants" value="全國公私立國小學生（本屆小六畢業生亦可參加）。" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">進行方式</label>
-                                                <textarea id="var-method" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">本活動分為兩關兩獎進行，讓學生循序漸進培養寫作能力</textarea>
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">第一關說明</label>
-                                                <input type="text" id="var-methodStep1" value="平台陪練寫作積分" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">活動期間</label>
-                                                <textarea id="var-activityPeriod" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">報名至2025年8月30日截止，於樂寫公益平台發表至少三篇文章，累積寫作經驗。</textarea>
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎說明</label>
-                                                <input type="text" id="var-scoringInfo" value="企業參訪體驗" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎重點</label>
-                                                <textarea id="var-scoringHighlight" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">從報名活動到2025年8月31日前，於樂寫公益學習平台積分最高的前三十名得主，可獲得聯發科技企業參訪活動體驗資格</textarea>
                                             </div>
                                         </div>
                                     </div>
@@ -727,12 +956,12 @@
                                                 <input type="text" id="var-stage2Title" value="徵文比賽" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">第二關期間</label>
-                                                <input type="text" id="var-stage2Period" value="2025年9月1日至9月30日" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">第二關說明</label>
-                                                <textarea id="var-stage2Description" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目。</textarea>
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">徵文獎標題</label>
@@ -740,68 +969,98 @@
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">徵文獎說明</label>
-                                                <textarea id="var-stage2AwardInfo" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">初審入圍前一百名者可獲得電子獎狀一幅，複審前三十名者：榮獲流臨聯發科技頒獎，現場公布得獎獎項。</textarea>
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- 報名資訊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">報名資訊</h4>
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">個人報名說明</label>
-                                                <textarea id="var-individualSignup" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">請先填寫線上表單進行報名，平台會寄送確認信件開通您的帳號。完成報名後，即可開始在樂寫公益平台發表文章，累積寫作積分。</textarea>
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">學校報名說明</label>
-                                                <textarea id="var-schoolSignup" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">以學校或班級為單位填寫表單報名，樂寫專員將主動與校方聯繫，協助學生集體開通帳號，讓老師能夠更便利帶領全班參與這次有意義的寫作活動。</textarea>
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- 評分與時程 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">評分與時程</h4>
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">評分標準 (JSON 格式)</label>
                                                 <textarea id="var-scoringCriteria" rows="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
     {"item": "內容與結構", "percentage": "25%", "description": "切合題旨，思想積極健康，論點合理，文字生動；結構嚴謹，行文流暢，兼具廣度與深度。"},
     {"item": "邏輯與修辭", "percentage": "25%", "description": "邏輯分明，條理清晰，敘事明白；用字遣詞合宜，修辭靈活優美。"},
     {"item": "創意與觀察", "percentage": "20%", "description": "富含想像力，觀察微小細節，洞悉人性幽微。"},
-    {"item": "平台練習積分", "percentage": "20%", "description": "2025.5.1~2025.8.30期間，練習篇數與教練評分會影響最終積分。"},
     {"item": "標點符號與字詞正確", "percentage": "10%", "description": "標點符號運用得宜，詞能達義，無錯別字。"}
 ]</textarea>
                                             </div>
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">時間線 (JSON 格式)</label>
-                                                <textarea id="var-timeline" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
-    {"date": "2025年11月17日(星期一)", "description": "於聯發科技總部舉行盛大頒獎典禮，並於當日公告最終得獎名單。得獎者將獲邀參加，一同分享寫作的喜悅與成果！"}
 ]</textarea>
                                             </div>
                                         </div>
                                     </div>
                                     <!-- 聯絡資訊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">聯絡資訊</h4>
                                         <div class="space-y-3">
                                             <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">頁尾標題</label>
-                                                <input type="text" id="var-footerTitle" value="活動資訊與聯絡方式" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">活動網頁</label>
                                                 <input type="url" id="var-websiteUrl" value="https://www.colearn30.com/" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
-                                            <div>
-                                                <label class="block text-sm font-medium text-gray-700 mb-1">Facebook 頁面</label>
-                                                <input type="url" id="var-facebookUrl" value="https://www.facebook.com/CoWrite30" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                                            </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">聯絡說明</label>
-                                                <textarea id="var-contactInfo" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們</textarea>
                                             </div>
                                         </div>
                                     </div>
@@ -817,43 +1076,65 @@
                                 <!-- JSON Mode -->
                                 <div id="variables-json" class="hidden">
-                                    <textarea id="variables" class="w-full h-96 p-4 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm" placeholder='{"title": "標題", "subtitle": "副標題"}'>
 {
-    "title": "2025聯發科技公益活動",
-    "year": "2025",
-    "eventType": "聯發科技公益活動",
     "theme": "世界觀察員計畫",
-    "description": "讓孩子透過文字探索自然，成為真正的世界觀察員！樂寫公益學習網誠摯邀請全國國小學生，參加『自然書寫徵文比賽』，展現你獨特的觀察力與創意思維。",
-    "participants": "全國公私立國小學生（本屆小六畢業生亦可參加）。",
-    "method": "本活動分為兩關兩獎進行，讓學生循序漸進培養寫作能力",
-    "methodStep1": "平台陪練寫作積分",
-    "activityPeriod": "報名至2025年8月30日截止，於樂寫公益平台發表至少三篇文章，累積寫作經驗。",
-    "scoringInfo": "企業參訪體驗",
-    "scoringHighlight": "從報名活動到2025年8月31日前，於樂寫公益學習平台積分最高的前三十名得主，可獲得聯發科技企業參訪活動體驗資格",
-    "methodHighlight": true,
-    "stage2Info": true,
     "stage2Title": "徵文比賽",
-    "stage2Period": "2025年9月1日至9月30日",
-    "stage2Description": "通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目。",
     "stage2AwardTitle": "徵文獎：企業受獎殊榮",
-    "stage2AwardInfo": "初審入圍前一百名者可獲得電子獎狀一幅，複審前三十名者：榮獲流臨聯發科技頒獎，現場公布得獎獎項。",
-    "hasCategories": true,
-    "individualSignup": "請先填寫線上表單進行報名，平台會寄送確認信件開通您的帳號。完成報名後，即可開始在樂寫公益平台發表文章，累積寫作積分。",
-    "schoolSignup": "以學校或班級為單位填寫表單報名，樂寫專員將主動與校方聯繫，協助學生集體開通帳號，讓老師能夠更便利帶領全班參與這次有意義的寫作活動。",
     "scoringCriteria": [
         {"item": "內容與結構", "percentage": "25%", "description": "切合題旨，思想積極健康，��點合理，文字生動；結構嚴謹，行文流暢，兼具廣度與深度。"},
         {"item": "邏輯與修辭", "percentage": "25%", "description": "邏輯分明，條理清晰，敘事明白；用字遣詞合宜，修辭靈活優美。"},
         {"item": "創意與觀察", "percentage": "20%", "description": "富含想像力，觀察微小細節，洞悉人性幽微。"},
-        {"item": "平台練習積分", "percentage": "20%", "description": "2025.5.1~2025.8.30期間，練習篇數與教練評分會影響最終積分。"},
         {"item": "標點符號與字詞正確", "percentage": "10%", "description": "標點符號運用得宜，詞能達義，無錯別字。"}
     ],
-    "timeline": [
-        {"date": "2025年11月17日(星期一)", "description": "於聯發科技總部舉行盛大頒獎典禮，並於當日公告最終得獎名單。得獎者將獲邀參加，一同分享寫作的喜悅與成果！"}
     ],
-    "footerTitle": "活動資訊與聯絡方式",
     "websiteUrl": "https://www.colearn30.com/",
-    "facebookUrl": "https://www.facebook.com/CoWrite30",
-    "contactInfo": "如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們"
 }</textarea>
                                 </div>
                             </div>
@@ -1133,30 +1414,18 @@
                 }
             });
-            // Add boolean flags
-            variables.methodHighlight = true;
-            variables.stage2Info = true;
-            variables.hasCategories = true;
-            // Parse scoring criteria from JSON if exists
-            try {
-                const scoringElement = document.getElementById('var-scoringCriteria');
-                if (scoringElement && scoringElement.value) {
-                    variables.scoringCriteria = JSON.parse(scoringElement.value);
-                }
-            } catch (e) {
-                console.error('Error parsing scoring criteria:', e);
-            }
-            // Parse timeline from JSON if exists
-            try {
-                const timelineElement = document.getElementById('var-timeline');
-                if (timelineElement && timelineElement.value) {
-                    variables.timeline = JSON.parse(timelineElement.value);
                 }
-            } catch (e) {
-                console.error('Error parsing timeline:', e);
-            }
             // Add custom variables
             const customVars = document.querySelectorAll('[id^="custom-var-"]');
@@ -1210,12 +1479,11 @@
         // Add event listeners for form inputs
         const formFields = [
-            'title', 'year', 'eventType', 'theme', 'description',
-            'participants', 'method', 'methodStep1', 'activityPeriod',
-            'scoringInfo', 'scoringHighlight', 'stage2Title', 'stage2Period',
-            'stage2Description', 'stage2AwardTitle', 'stage2AwardInfo',
-            'individualSignup', 'schoolSignup', 'footerTitle',
-            'websiteUrl', 'facebookUrl', 'contactInfo'
         ];
         // Remove auto-update listeners - only sync form to JSON when switching modes
@@ -1329,16 +1597,33 @@
         // Store generated HTML globally
         let generatedHTML = '';
-        // Preview HTML in new window
         function previewHTML() {
             if (!generatedHTML) {
                 showToast('請先生成 HTML', 'error');
                 return;
             }
-            const previewWindow = window.open('', '_blank');
-            previewWindow.document.write(generatedHTML);
-            previewWindow.document.close();
         }
         // Copy HTML to clipboard

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ mainTitle }} - {{ theme }}</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
             line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
         .container {
+            max-width: 1200px;
             margin: 0 auto;
+            padding: 20px;
         }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            text-align: center;
+            padding: 60px 20px;
+            border-radius: 20px;
+            margin-bottom: 30px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
         }
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 15px;
+            font-weight: 700;
         }
+        .header h2 {
+            font-size: 1.8rem;
             margin-bottom: 20px;
+            font-weight: 400;
+            opacity: 0.9;
         }
+        .header p {
+            font-size: 1.2rem;
             margin-bottom: 30px;
+            opacity: 0.8;
             line-height: 1.8;
         }
+        .buttons {
             display: flex;
             gap: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
         }
         .btn {
             padding: 15px 30px;
+            border: none;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            font-weight: 600;
             text-decoration: none;
             transition: all 0.3s ease;
+            cursor: pointer;
         }
         .btn-primary {
+            background: #438951;
             color: white;
         }
         .btn-secondary {
+            background: transparent;
             color: white;
+            border: 2px solid white;
         }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
         }
+        .card {
+            background: white;
             border-radius: 20px;
+            padding: 40px;
+            margin-bottom: 30px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
         }
+        .card:hover {
+            transform: translateY(-5px);
         }
+        .card h2 {
+            color: #333;
+            font-size: 2rem;
+            margin-bottom: 25px;
+            border-bottom: 3px solid #438951;
+            padding-bottom: 10px;
         }
+        .highlight {
+            color: #F44444;
+            font-weight: bold;
         }
+        /* Flow Design Styles */
+        .target-section, .method-section {
             background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 25px;
+            border-left: 5px solid #438951;
+        }
+        .target-section h3, .method-section h3 {
+            color: #438951;
+            margin: 0 0 10px 0;
+            font-size: 1.3rem;
+        }
+        .flow-container {
+            margin-top: 30px;
+            position: relative;
+        }
+        .flow-section {
+            background: white;
+            border: 2px solid #e9ecef;
+            border-radius: 20px;
             padding: 30px;
+            margin-bottom: 40px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            position: relative;
         }
+        .flow-section:hover {
             transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
         }
+        .flow-header {
             display: flex;
             align-items: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #f1f3f4;
         }
+        .stage-number {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            width: 80px;
+            height: 80px;
             border-radius: 50%;
+            display: flex;
             align-items: center;
             justify-content: center;
+            font-weight: bold;
+            font-size: 1rem;
+            margin-right: 20px;
+            flex-shrink: 0;
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
         }
+        .flow-header h3 {
+            color: #333;
+            margin: 0;
+            font-size: 1.8rem;
+            font-weight: 600;
         }
+        .flow-details {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
         }
+        .detail-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 15px;
+            padding: 10px 0;
+            border-bottom: 1px solid #e9ecef;
         }
+        .detail-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
         }
+        .detail-label {
+            font-weight: 600;
+            color: #495057;
+            min-width: 100px;
+            margin-right: 15px;
+        }
+        .detail-value {
+            flex: 1;
+            text-align: right;
+        }
+        .flow-arrow {
             text-align: center;
+            font-size: 2rem;
+            color: #438951;
+            margin: 15px 0;
+            font-weight: bold;
         }
+        .reward-box {
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            color: white;
+            border-radius: 15px;
+            padding: 25px;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 5px 20px rgba(67, 233, 123, 0.3);
         }
+        .reward-icon {
+            font-size: 3rem;
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+        .reward-content h4 {
+            margin: 0 0 10px 0;
+            font-size: 1.4rem;
+            font-weight: 600;
+        }
+        .reward-content p {
+            margin: 0;
+            opacity: 0.95;
+            line-height: 1.5;
+        }
+        .stage-connector {
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: -20px 0;
+            position: relative;
+            z-index: 10;
         }
+        .connector-line {
+            width: 3px;
+            height: 40px;
+            background: linear-gradient(to bottom, #438951, #28a745);
+            position: relative;
         }
+        .connector-line::after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-top: 12px solid #28a745;
         }
+        /* Additional sections */
+        .registration-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 25px;
+            margin: 30px 0;
+        }
+        .registration-item {
+            background: #f8f9fa;
+            padding: 25px;
+            border-radius: 15px;
+            text-align: center;
+            border: 2px solid #e9ecef;
+            transition: all 0.3s ease;
+        }
+        .registration-item:hover {
+            border-color: #438951;
+            transform: translateY(-3px);
+        }
+        .registration-item img {
+            width: 100%;
+            max-width: 200px;
+            height: auto;
+            border-radius: 10px;
+            margin-bottom: 15px;
+        }
+        .evaluation-table {
+            overflow-x: auto;
+            margin: 25px 0;
+        }
+        table {
             width: 100%;
             border-collapse: collapse;
             background: white;
             border-radius: 10px;
             overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
+        th, td {
+            padding: 15px;
             text-align: left;
+            border-bottom: 1px solid #e9ecef;
         }
+        th {
+            background: #438951;
             color: white;
+            font-weight: 600;
         }
+        tr:hover {
+            background: #f8f9fa;
         }
+        .requirements-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin: 25px 0;
         }
+        .requirement-item {
+            background: #e8f5e8;
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid #438951;
         }
+        .notes-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 25px 0;
         }
+        .note-item {
+            background: #fff3cd;
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid #ffc107;
+        }
         .timeline-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        .timeline-number {
+            width: 50px;
+            height: 50px;
+            background: #438951;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.2rem;
+            margin-right: 25px;
+            flex-shrink: 0;
+        }
+        .timeline-content {
+            background: #f8f9fa;
+            padding: 20px;
             border-radius: 10px;
+            flex: 1;
         }
+        .awards-list {
+            list-style: none;
+            margin: 15px 0;
         }
+        .awards-list li {
+            padding: 8px 0;
+            padding-left: 20px;
+            position: relative;
+        }
+        .awards-list li:before {
+            content: "🏆";
+            position: absolute;
+            left: 0;
+        }
+        .important-dates {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             padding: 40px;
+            border-radius: 20px;
             text-align: center;
         }
+        .dates-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 25px;
+            margin-top: 25px;
         }
+        .date-item {
+            background: rgba(255,255,255,0.1);
+            padding: 20px;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
         }
         @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            .header h2 {
+                font-size: 1.4rem;
+            }
+            .flow-header {
                 flex-direction: column;
+                text-align: center;
             }
+            .stage-number {
+                margin-right: 0;
+                margin-bottom: 15px;
             }
+            .detail-item {
+                flex-direction: column;
+                align-items: flex-start;
             }
+            .detail-value {
+                text-align: left;
+                margin-top: 5px;
             }
+            .reward-box {
+                flex-direction: column;
+                text-align: center;
+            }
+            .reward-icon {
+                margin-right: 0;
+                margin-bottom: 15px;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- Header -->
+        <div class="header">
+            <h1>{{ mainTitle }}</h1>
+            <h2>{{ theme }}</h2>
+            <p>{{ headerDescription }}</p>
+            <div class="buttons">
+                <a href="{{ personalRegUrl }}" class="btn btn-primary">個人報名</a>
+                <a href="{{ schoolRegUrl }}" class="btn btn-secondary">學校報名</a>
             </div>
+        </div>
+        <!-- 活動辦法 -->
+        <div class="card">
+            <h2>活動辦法</h2>
+            <div class="target-section">
+                <h3>🎯 參加對象</h3>
+                <p>{{ participants }}</p>
+            </div>
+            <div class="method-section">
+                <h3>🚀 進行方式</h3>
+                <p>{{ methodIntro }}</p>
+            </div>
+            <div class="flow-container">
+                <!-- 第一階段 -->
+                <div class="flow-section">
+                    <div class="flow-header">
+                        <div class="stage-number">第一關</div>
+                        <h3>{{ stage1Title }}</h3>
+                    </div>
+                    <div class="flow-content">
+                        <div class="flow-details">
+                            <div class="detail-item">
+                                <span class="detail-label">活動期間</span>
+                                <span class="detail-value">{{ stage1Period }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">任務要求</span>
+                                <span class="detail-value">{{ stage1Requirements }}</span>
+                            </div>
+                        </div>
+                        <div class="flow-arrow">↓</div>
+                        <div class="reward-box">
+                            <div class="reward-icon">🏆</div>
+                            <div class="reward-content">
+                                <h4>{{ stage1AwardTitle }}</h4>
+                                <p>{{ stage1AwardDesc }}</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+                <!-- 連接線 -->
+                <div class="stage-connector">
+                    <div class="connector-line"></div>
                 </div>
+                <!-- 第二階段 -->
+                <div class="flow-section">
+                    <div class="flow-header">
+                        <div class="stage-number">第二關</div>
+                        <h3>{{ stage2Title }}</h3>
+                    </div>
+                    <div class="flow-content">
+                        <div class="flow-details">
+                            <div class="detail-item">
+                                <span class="detail-label">活動期間</span>
+                                <span class="detail-value">{{ stage2Period }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">邀請通知</span>
+                                <span class="detail-value">{{ stage2Notice }}</span>
+                            </div>
+                        </div>
+                        <div class="flow-arrow">↓</div>
+                        <div class="reward-box">
+                            <div class="reward-icon">🎖️</div>
+                            <div class="reward-content">
+                                <h4>{{ stage2AwardTitle }}</h4>
+                                <p>{{ stage2AwardDesc }}</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
+        </div>
+        <!-- 報名說明 -->
+        <div class="card">
+            <h2>報名說明</h2>
+            <div class="registration-grid">
+                <div class="registration-item">
+                    <h4>個人報名</h4>
+                    <p>{{ personalRegDesc }}</p>
                 </div>
+                <div class="registration-item">
+                    <h4>團體報名</h4>
+                    <p>{{ schoolRegDesc }}</p>
                 </div>
             </div>
+        </div>
+        {% if requirements %}
+        <!-- 評選條件 -->
+        <div class="card">
+            <h2>評選條件</h2>
+            <div class="requirements-grid">
+                {% for req in requirements %}
+                <div class="requirement-item">
+                    <h4>{{ req.title }}</h4>
+                    <p>{{ req.content }}</p>
                 </div>
+                {% endfor %}
             </div>
+        </div>
         {% endif %}
         {% if scoringCriteria %}
+        <!-- 評分標準 -->
+        <div class="card">
+            <h2>評分標準</h2>
+            <div class="evaluation-table">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>評分項目</th>
+                            <th>評分占比</th>
+                            <th>內容說明</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for criteria in scoringCriteria %}
+                        <tr>
+                            <td>{{ criteria.item }}</td>
+                            <td>{{ criteria.percentage }}</td>
+                            <td>{{ criteria.description }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
         {% endif %}
+        {% if notes %}
+        <!-- 注意事項與評審辦法 -->
+        <div class="card">
+            <h2>注意事項與評審辦法</h2>
+            <div class="notes-grid">
+                {% for note in notes %}
+                <div class="note-item">
+                    <h4>{{ note.title }}</h4>
+                    <p>{{ note.content }}</p>
                 </div>
                 {% endfor %}
             </div>
+        </div>
         {% endif %}
+        {% if awards %}
+        <!-- 獎勵辦法 -->
+        <div class="card">
+            <h2>獎勵辦法</h2>
+            <div class="awards-timeline">
+                {% for award in awards %}
+                <div class="timeline-item">
+                    <div class="timeline-number">{{ loop.index }}</div>
+                    <div class="timeline-content">
+                        <h4>{{ award.title }}</h4>
+                        <p>{{ award.description }}</p>
+                        {% if 'items' in award %}
+                        <ul class="awards-list">
+                            {% for item in award['items'] %}
+                            <li>{{ item }}</li>
+                            {% endfor %}
+                        </ul>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% if awardNote %}
+            <div style="text-align: center; margin-top: 30px; padding: 20px; background: #e8f5e8; border-radius: 10px;">
+                <h3 style="color: #438951;">{{ awardNote }}</h3>
+            </div>
             {% endif %}
+        </div>
+        {% endif %}
+        <!-- 重要日期與聯絡方式 -->
+        <div class="important-dates">
+            <h2>重要日期與聯絡方式</h2>
+            <div class="dates-grid">
+                {% if ceremonyDate %}
+                <div class="date-item">
+                    <h4>頒獎典禮</h4>
+                    <p>{{ ceremonyDate }}</p>
+                </div>
+                {% endif %}
+                <div class="date-item">
+                    <h4>活動資訊與聯絡方式</h4>
+                    {% if websiteUrl %}
+                    <p>活動網頁：<a href="{{ websiteUrl }}" style="color: #fff;">{{ websiteUrl }}</a></p>
+                    {% endif %}
+                    {% if contactInfo %}
+                    <p>{{ contactInfo }}</p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 </html>{% endraw %}</textarea>
                                 <!-- Form Mode -->
                                 <div id="variables-form" class="space-y-4">
+                                    <!-- 標題區塊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">標題區塊</h4>
                                         <div class="space-y-3">
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">主標題</label>
+                                                <input type="text" id="var-mainTitle" value="2025聯發科技公益活動" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動主題</label>
+                                                <input type="text" id="var-theme" value="世界觀察員計畫" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">標題描述</label>
+                                                <textarea id="var-headerDescription" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">讓孩子透過文字探索自然，成為真正的世界觀察員！樂寫公益學習網誠摯邀請全國國小學生，參加&lt;strong&gt;自然書寫徵文比賽&lt;/strong&gt;，展現你獨特的觀察力與創意思維。</textarea>
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">個人報名連結</label>
+                                                <input type="url" id="var-personalRegUrl" value="https://www.colearn30.com/" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">學校報名連結</label>
+                                                <input type="url" id="var-schoolRegUrl" value="https://www.facebook.com/CoWrite30" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                         </div>
                                     </div>
+                                    <!-- 活動辦法 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">活動辦法</h4>
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">參加對象</label>
+                                                <input type="text" id="var-participants" value="全國公私立國小學生（本屆小六畢業生亦可參加）" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">進行方式說明</label>
+                                                <textarea id="var-methodIntro" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">本活動分為&lt;span class="highlight"&gt;兩關兩獎&lt;/span&gt;進行，讓學生循序漸進培養寫作能力</textarea>
                                             </div>
+                                        </div>
+                                    </div>
+                                    <!-- 第一關資訊 -->
+                                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">第一關：平台陪練寫作積分</h4>
+                                        <div class="space-y-3">
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">第一關標題</label>
+                                                <input type="text" id="var-stage1Title" value="平台陪練寫作積分" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">活動期間</label>
+                                                <input type="text" id="var-stage1Period" value="報名至 &lt;span class='highlight'&gt;2025年8月30日&lt;/span&gt; 截止" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">任務要求</label>
+                                                <textarea id="var-stage1Requirements" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">於樂寫公益平台發表至少 &lt;span class="highlight"&gt;三篇文章&lt;/span&gt;，累積寫作經驗</textarea>
+                                            </div>
+                                            <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎標題</label>
+                                                <input type="text" id="var-stage1AwardTitle" value="積分獎：企業參訪體驗" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎說明</label>
+                                                <textarea id="var-stage1AwardDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">從報名活動到 &lt;span class="highlight"&gt;2025年8月31日&lt;/span&gt; 前，於樂寫公益學習平台 &lt;span class="highlight"&gt;積分最高的前三十名&lt;/span&gt; 得主，可獲得聯發科技企業參訪活動體驗資格</textarea>
                                             </div>
                                         </div>
                                     </div>
                                                 <input type="text" id="var-stage2Title" value="徵文比賽" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動期間</label>
+                                                <input type="text" id="var-stage2Period" value="&lt;span class='highlight'&gt;2025年9月1日至9月30日&lt;/span&gt;" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">邀請通知</label>
+                                                <textarea id="var-stage2Notice" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目</textarea>
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">徵文獎標題</label>
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">徵文獎說明</label>
+                                                <textarea id="var-stage2AwardDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">初審入圍前一百名者可獲得電子獎狀一幀，複審前三十名者，榮獲蒞臨聯發科技頒獎，現場公布得獎獎項</textarea>
                                             </div>
                                         </div>
                                     </div>
+                                    <!-- 報名說明 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">報名說明</h4>
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">個人報名說明</label>
+                                                <textarea id="var-personalRegDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">請先填寫線上表單進行報名，平台會寄送確認信件開通您的帳號。完成報名後，即可開始在樂寫公益平台發表文章，累積寫作積分。</textarea>
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">團體報名說明</label>
+                                                <textarea id="var-schoolRegDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">以學校或班級為單位填寫表單報名，樂寫專員將主動與校方聯繫，協助學生集體開通帳號，讓老師能夠更便利帶領全班參與這次有意義的寫作活動。</textarea>
                                             </div>
                                         </div>
                                     </div>
+                                    <!-- 進階設定 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">進階設定</h4>
                                         <div class="space-y-3">
+                                            <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">評選條件 (JSON 格式)</label>
+                                                <textarea id="var-requirements" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
+    {"title": "字數與格式要求", "content": "徵文字數至少五百字。電腦打字需使用全形符號；於樂寫公益學習網平台個人帳號上傳。"},
+    {"title": "原創性要求", "content": "作品必須未曾在任何形式的平面和網路媒體（樂寫公益平台除外）發表，嚴禁抄襲及代筆（包括AI），違者取消資格。"},
+    {"title": "投稿注意事項", "content": "稿件送出前，請確認內容正確性（包含錯字、斷行、特殊字、空格等）。為公平起見，投稿後不可再修改文章。"}
+]</textarea>
+                                            </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">評分標準 (JSON 格式)</label>
                                                 <textarea id="var-scoringCriteria" rows="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
     {"item": "內容與結構", "percentage": "25%", "description": "切合題旨，思想積極健康，論點合理，文字生動；結構嚴謹，行文流暢，兼具廣度與深度。"},
     {"item": "邏輯與修辭", "percentage": "25%", "description": "邏輯分明，條理清晰，敘事明白；用字遣詞合宜，修辭靈活優美。"},
     {"item": "創意與觀察", "percentage": "20%", "description": "富含想像力，觀察微小細節，洞悉人性幽微。"},
+    {"item": "平台練習積分", "percentage": "20%", "description": "2025.5.1-2025.8.30期間，練習篇數與教練評分會影響最終積分。"},
     {"item": "標點符號與字詞正確", "percentage": "10%", "description": "標點符號運用得宜，詞能達義，無錯別字。"}
 ]</textarea>
                                             </div>
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">注意事項 (JSON 格式)</label>
+                                                <textarea id="var-notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
+    {"title": "創作注意事項", "content": "作文以白話文寫作，不得使用文言文、詩歌、韻文寫作；使用標準字體，並詳加全形標點符號；內文不得書寫姓名、校名等個人資訊"},
+    {"title": "評審辦法", "content": "本比賽採初審、複審、決審三輪制，聘請樂寫平台資深志工教練群、知名作家、專家學者、與聯發科技長官共同參與評比，確保評選過程公平公正。"}
+]</textarea>
+                                            </div>
+                                            <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">獎勵辦法 (JSON 格式)</label>
+                                                <textarea id="var-awards" rows="8" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-xs">[
+    {
+        "title": "勤筆獎勵—企業參訪體驗",
+        "description": "從報名活動到8/31前，於樂寫公益學習平台積分最高的前三十名得主，可獲得聯發科技��業參訪活動體驗資格。"
+    },
+    {
+        "title": "徵文比賽大獎",
+        "description": "本屆徵文比賽前三十名表現優異者獲「大使獎」殊榮",
+        "items": [
+            "世界觀察大使獎：本屆文學獎總表現第一名",
+            "觀察善思大使獎：善於觀察，描寫人事物具體詳細，能在平凡中見不凡",
+            "永續發展大使獎：關懷社會議題，對於弱勢富有同理心，對於土地願意思考如何更好",
+            "勤筆精修大使獎：在樂寫平台願意多次修改文章，志工教練認可勤寫精修的作者",
+            "真誠感動大使獎：表達真實情感，運用富有感情的文字打動人",
+            "創意巧思大使獎：展現創造力，勇於發表個人獨特見解"
+        ]
+    }
 ]</textarea>
                                             </div>
+                                            <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">獎勵備註</label>
+                                                <input type="text" id="var-awardNote" value="得獎者將獲頒獎盃一座，並成為聯發科技「世界觀察員」推廣大使！" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                                            </div>
                                         </div>
                                     </div>
                                     <!-- 聯絡資訊 -->
                                     <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">重要日期與聯絡方式</h4>
                                         <div class="space-y-3">
                                             <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">頒獎典禮</label>
+                                                <textarea id="var-ceremonyDate" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">2025年11月17日(星期一)於聯發科技總部舉行盛大頒獎典禮，並於當日公告最終得獎名單。得獎者將獲邀參加，一同分享寫作的喜悅與成果！</textarea>
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">活動網頁</label>
                                                 <input type="url" id="var-websiteUrl" value="https://www.colearn30.com/" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">聯絡說明</label>
+                                                <textarea id="var-contactInfo" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們：&lt;a href="https://www.facebook.com/CoWrite30" style="color: #fff;"&gt;https://www.facebook.com/CoWrite30&lt;/a&gt;</textarea>
                                             </div>
                                         </div>
                                     </div>
                                 <!-- JSON Mode -->
                                 <div id="variables-json" class="hidden">
+                                    <textarea id="variables" class="w-full h-96 p-4 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm" placeholder='{"mainTitle": "主標題", "theme": "主題"}'>
 {
+    "mainTitle": "2025聯發科技公益活動",
     "theme": "世界觀察員計畫",
+    "headerDescription": "讓孩子透過文字探索自然，成為真正的世界觀察員！樂寫公益學習網誠摯邀請全國國小學生，參加<strong>自然書寫徵文比賽</strong>，展現你獨特的觀察力與創意思維。",
+    "personalRegUrl": "https://www.colearn30.com/",
+    "schoolRegUrl": "https://www.facebook.com/CoWrite30",
+    "participants": "全國公私立國小學生（本屆小六畢業生亦可參加）",
+    "methodIntro": "本活動分為<span class=\"highlight\">兩關兩獎</span>進行，讓學生循序漸進培養寫作能力",
+    "stage1Title": "平台陪練寫作積分",
+    "stage1Period": "報名至 <span class='highlight'>2025年8月30日</span> 截止",
+    "stage1Requirements": "於樂寫公益平台發表至少 <span class=\"highlight\">三篇文章</span>，累積寫作經驗",
+    "stage1AwardTitle": "積分獎：企業參訪體驗",
+    "stage1AwardDesc": "從報名活動到 <span class=\"highlight\">2025年8月31日</span> 前，於樂寫公益學習平台 <span class=\"highlight\">積分最高的前三十名</span> 得主，可獲得聯發科技企業參訪活動體驗資格",
     "stage2Title": "徵文比賽",
+    "stage2Period": "<span class='highlight'>2025年9月1日至9月30日</span>",
+    "stage2Notice": "通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目",
     "stage2AwardTitle": "徵文獎：企業受獎殊榮",
+    "stage2AwardDesc": "初審入圍前一百名者可獲得電子獎狀一幀，複審前三十名者，榮獲蒞臨聯發科技頒獎，現場公布得獎獎項",
+    "personalRegDesc": "請先填寫線上表單進行報名，平台會寄送確認信件開通您的帳號。完成報名後，即可開始在樂寫公益平台發表文章，累積寫作積分。",
+    "schoolRegDesc": "以學校或班級為單位填寫表單報名，樂寫專員將主動與校方聯繫，協助學生集體開通帳號，讓老師能夠更便利帶領全班參與這次有意義的寫作活動。",
+    "requirements": [
+        {"title": "字數與格式要求", "content": "徵文字數至少五百字。電腦打字需使用全形符號；於樂寫公益學習網平台個人帳號上傳。"},
+        {"title": "原創性要求", "content": "作品必須未曾在任何形式的平面和網路媒體（樂寫公益平台除外）發表，嚴禁抄襲及代筆（包括AI），違者取消資格。"},
+        {"title": "投稿注意事項", "content": "稿件送出前，請確認內容正確性（包含錯字、斷行、特殊字、空格等）。為公平起見，投稿後不可再修改文章。"}
+    ],
     "scoringCriteria": [
         {"item": "內容與結構", "percentage": "25%", "description": "切合題旨，思想積極健康，��點合理，文字生動；結構嚴謹，行文流暢，兼具廣度與深度。"},
         {"item": "邏輯與修辭", "percentage": "25%", "description": "邏輯分明，條理清晰，敘事明白；用字遣詞合宜，修辭靈活優美。"},
         {"item": "創意與觀察", "percentage": "20%", "description": "富含想像力，觀察微小細節，洞悉人性幽微。"},
+        {"item": "平台練習積分", "percentage": "20%", "description": "2025.5.1-2025.8.30期間，練習篇數與教練評分會影響最終積分。"},
         {"item": "標點符號與字詞正確", "percentage": "10%", "description": "標點符號運用得宜，詞能達義，無錯別字。"}
     ],
+    "notes": [
+        {"title": "創作注意事項", "content": "作文以白話文寫作，不得使用文言文、詩歌、韻文寫作；使用標準字體，並詳加全形標點符號；內文不得書寫姓名、校名等個人資訊"},
+        {"title": "評審辦法", "content": "本比賽採初審、複審、決審三輪制，聘請樂寫平台資深志工教練群、知名作家、專家學者、與聯發科技長官共同參與評比，確保評選過程公平公正。"}
+    ],
+    "awards": [
+        {
+            "title": "勤筆獎勵—企業參訪體驗",
+            "description": "從報名活動到8/31前，於樂寫公益學習平台積分最高的前三十名得主，可獲得聯發科技企業參訪活動體驗資格。"
+        },
+        {
+            "title": "徵文比賽大獎",
+            "description": "本屆徵文比賽前三十名表現優異者獲「大使獎」殊榮",
+            "items": [
+                "世界觀察大使獎：本屆文學獎總表現第一名",
+                "觀察善思大使獎：善於觀察，描寫人事物具體詳細，能在平凡中見不凡",
+                "永續發展大使獎：關懷社會議題，對於弱勢富有同理心，對於土地願意思考如何更好",
+                "勤筆精修大使獎：在樂寫平台願意多次修改文章，志工教練認可勤寫精修的作者",
+                "真誠感動大使獎：表達真實情感，運用富有感情的文字打動人",
+                "創意巧思大使獎：展現創造力，勇於發表個人獨特見解"
+            ]
+        }
     ],
+    "awardNote": "得獎者將獲頒獎盃一座，並成為聯發科技「世界觀察員」推廣大使！",
+    "ceremonyDate": "2025年11月17日(星期一)於聯發科技總部舉行盛大頒獎典禮，並於當日公告最終得獎名單。得獎者將獲邀參加，一同分享寫作的喜悅與成果！",
     "websiteUrl": "https://www.colearn30.com/",
+    "contactInfo": "如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們：<a href=\"https://www.facebook.com/CoWrite30\" style=\"color: #fff;\">https://www.facebook.com/CoWrite30</a>"
 }</textarea>
                                 </div>
                             </div>
                 }
             });
+            // Parse JSON arrays
+            const jsonArrayFields = ['requirements', 'scoringCriteria', 'notes', 'awards'];
+            jsonArrayFields.forEach(field => {
+                try {
+                    const element = document.getElementById(`var-${field}`);
+                    if (element && element.value) {
+                        variables[field] = JSON.parse(element.value);
+                    }
+                } catch (e) {
+                    console.error(`Error parsing ${field}:`, e);
                 }
+            });
             // Add custom variables
             const customVars = document.querySelectorAll('[id^="custom-var-"]');
         // Add event listeners for form inputs
         const formFields = [
+            'mainTitle', 'theme', 'headerDescription', 'personalRegUrl', 'schoolRegUrl',
+            'participants', 'methodIntro', 'stage1Title', 'stage1Period', 'stage1Requirements',
+            'stage1AwardTitle', 'stage1AwardDesc', 'stage2Title', 'stage2Period', 'stage2Notice',
+            'stage2AwardTitle', 'stage2AwardDesc', 'personalRegDesc', 'schoolRegDesc',
+            'awardNote', 'ceremonyDate', 'websiteUrl', 'contactInfo'
         ];
         // Remove auto-update listeners - only sync form to JSON when switching modes
         // Store generated HTML globally
         let generatedHTML = '';
+        // Preview HTML in popup window
         function previewHTML() {
             if (!generatedHTML) {
                 showToast('請先生成 HTML', 'error');
                 return;
             }
+            // Calculate center position
+            const width = 1200;
+            const height = 800;
+            const left = (window.screen.width - width) / 2;
+            const top = (window.screen.height - height) / 2;
+            // Open popup window
+            const previewWindow = window.open(
+                '',
+                'preview_popup',
+                `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes`
+            );
+            if (previewWindow) {
+                previewWindow.document.write(generatedHTML);
+                previewWindow.document.close();
+                previewWindow.document.title = '預覽 - 樂寫網徵文比賽';
+            } else {
+                showToast('無法開啟預覽視窗，請檢查瀏覽器的彈出視窗設定', 'error');
+            }
         }
         // Copy HTML to clipboard