更新 index.html 模板，新增進度條與樣式調整

- 將背景顏色改為淺灰色，提升可讀性
- 新增水平與內聯進度條，顯示生成過程
- 調整標題與圖示顏色，增強視覺效果
- 優化響應式設計，確保在不同裝置上顯示良好
- 更新表單變數，移除不必要的變數設定

此次更新旨在改善使用者體驗，提供更清晰的進度顯示與視覺效果。

templates/index.html

@@ -11,7 +11,7 @@
         
         body {
             font-family: 'Noto Sans TC', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #f5f5f5;
             min-height: 100vh;
         }
         
@@ -91,19 +91,404 @@
                 opacity: 1;
             }
         }
+        
+        /* Horizontal Progress Bar in Header */
+        .progress-header {
+            display: none;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e5e7eb;
+            padding: 15px 0;
+            margin-bottom: 10px;
+        }
+        
+        .progress-header.show {
+            display: block;
+        }
+        
+        .progress-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        
+        .progress-title {
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 600;
+            color: #2C6E49;
+            margin-bottom: 15px;
+        }
+        
+        .progress-steps {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            position: relative;
+        }
+        
+        .progress-step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .step-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 14px;
+            margin-bottom: 8px;
+            transition: all 0.3s ease;
+            border: 3px solid #e9ecef;
+            background: white;
+            color: #6c757d;
+        }
+        
+        .progress-step.pending .step-icon {
+            background: white;
+            color: #6c757d;
+            border-color: #e9ecef;
+        }
+        
+        .progress-step.active .step-icon {
+            background: #71DDB1;
+            color: white;
+            border-color: #71DDB1;
+            animation: progressPulse 2s infinite;
+            box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.2);
+        }
+        
+        .progress-step.completed .step-icon {
+            background: #28a745;
+            color: white;
+            border-color: #28a745;
+        }
+        
+        .progress-step.error .step-icon {
+            background: #dc3545;
+            color: white;
+            border-color: #dc3545;
+        }
+        
+        .step-title {
+            font-size: 12px;
+            font-weight: 600;
+            color: #495057;
+            margin-bottom: 3px;
+            line-height: 1.2;
+        }
+        
+        .step-description {
+            font-size: 10px;
+            color: #6c757d;
+            line-height: 1.2;
+            max-width: 100px;
+        }
+        
+        .progress-step.active .step-title {
+            color: #2C6E49;
+        }
+        
+        .progress-step.completed .step-title {
+            color: #155724;
+        }
+        
+        .progress-step.error .step-title {
+            color: #721c24;
+        }
+        
+        /* Progress line connecting steps */
+        .progress-steps::before {
+            content: '';
+            position: absolute;
+            top: 20px;
+            left: 5%;
+            right: 5%;
+            height: 3px;
+            background: #e9ecef;
+            z-index: 1;
+        }
+        
+        .progress-line {
+            position: absolute;
+            top: 20px;
+            left: 5%;
+            height: 3px;
+            background: linear-gradient(90deg, #71DDB1 0%, #5EC99D 100%);
+            z-index: 1;
+            width: 0;
+            transition: width 0.5s ease;
+        }
+        
+        @keyframes progressPulse {
+            0% {
+                box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.2);
+            }
+            50% {
+                box-shadow: 0 0 0 8px rgba(113, 221, 177, 0.1);
+            }
+            100% {
+                box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.2);
+            }
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .step-title {
+                font-size: 10px;
+            }
+            
+            .step-description {
+                font-size: 8px;
+                max-width: 80px;
+            }
+            
+            .step-icon {
+                width: 32px;
+                height: 32px;
+                font-size: 12px;
+            }
+            
+            .progress-steps::before {
+                top: 16px;
+            }
+            
+            .progress-line {
+                top: 16px;
+            }
+        }
+        
+        /* Inline Progress Bar in Header */
+        .progress-inline {
+            display: none;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .progress-inline.show {
+            display: flex;
+        }
+        
+        .progress-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #2C6E49;
+            white-space: nowrap;
+        }
+        
+        .progress-steps {
+            display: flex;
+            align-items: center;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            gap: 8px;
+        }
+        
+        .progress-connector {
+            width: 30px;
+            height: 3px;
+            background: #e9ecef;
+            transition: background-color 0.3s ease;
+        }
+        
+        .progress-connector.completed {
+            background: linear-gradient(90deg, #71DDB1 0%, #5EC99D 100%);
+        }
+        
+        .progress-inline .progress-step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .progress-inline .step-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 10px;
+            transition: all 0.3s ease;
+            border: 2px solid #e9ecef;
+            background: white;
+            color: #6c757d;
+        }
+        
+        .progress-inline .progress-step.pending .step-icon {
+            background: white;
+            color: #6c757d;
+            border-color: #e9ecef;
+        }
+        
+        .progress-inline .progress-step.active .step-icon {
+            background: #71DDB1;
+            color: white;
+            border-color: #71DDB1;
+            animation: progressPulse 2s infinite;
+            box-shadow: 0 0 0 2px rgba(113, 221, 177, 0.2);
+        }
+        
+        .progress-inline .progress-step.completed .step-icon {
+            background: #28a745;
+            color: white;
+            border-color: #28a745;
+        }
+        
+        .progress-inline .progress-step.error .step-icon {
+            background: #dc3545;
+            color: white;
+            border-color: #dc3545;
+        }
+        
+        .step-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 10px;
+            transition: all 0.3s ease;
+            border: 2px solid #e9ecef;
+            background: white;
+            color: #6c757d;
+        }
+        
+        .progress-step.pending .step-icon {
+            background: white;
+            color: #6c757d;
+            border-color: #e9ecef;
+        }
+        
+        .progress-step.active .step-icon {
+            background: #71DDB1;
+            color: white;
+            border-color: #71DDB1;
+            animation: inlineProgressPulse 2s infinite;
+            box-shadow: 0 0 0 2px rgba(113, 221, 177, 0.3);
+        }
+        
+        .progress-step.completed .step-icon {
+            background: #28a745;
+            color: white;
+            border-color: #28a745;
+        }
+        
+        .progress-step.error .step-icon {
+            background: #dc3545;
+            color: white;
+            border-color: #dc3545;
+        }
+        
+        /* Progress connectors */
+        .progress-connector {
+            width: 20px;
+            height: 2px;
+            background: #e9ecef;
+            transition: background 0.3s ease;
+        }
+        
+        .progress-connector.completed {
+            background: #71DDB1;
+        }
+        
+        @keyframes inlineProgressPulse {
+            0% {
+                box-shadow: 0 0 0 2px rgba(113, 221, 177, 0.3);
+            }
+            50% {
+                box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.1);
+            }
+            100% {
+                box-shadow: 0 0 0 2px rgba(113, 221, 177, 0.3);
+            }
+        }
+        
+        /* Responsive design for inline progress */
+        @media (max-width: 768px) {
+            .progress-title {
+                font-size: 12px;
+            }
+            
+            .progress-inline .step-icon {
+                width: 20px;
+                height: 20px;
+                font-size: 9px;
+            }
+            
+            .progress-connector {
+                width: 15px;
+            }
+            
+            .progress-inline {
+                gap: 6px;
+            }
+        }
     </style>
 </head>
 <body>
     <!-- Loading Spinner -->
     <div class="loading-spinner">
         <div class="bg-white rounded-lg p-8 shadow-xl">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto"></div>
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto"></div>
             <p class="mt-4 text-gray-600">處理中...</p>
         </div>
     </div>
 
     <!-- Toast Notification -->
     <div class="toast" id="toast"></div>
+    
+    <!-- Progress Header -->
+    <div class="progress-header" id="progress-header">
+        <div class="progress-container">
+            <h3 class="progress-title">正在生成 HTML</h3>
+            <ul class="progress-steps" id="progress-steps">
+                <div class="progress-line" id="progress-line"></div>
+                <li class="progress-step pending" id="step-1">
+                    <div class="step-icon">1</div>
+                    <div class="step-title">驗證表單</div>
+                    <div class="step-description">檢查資料</div>
+                </li>
+                <li class="progress-step pending" id="step-2">
+                    <div class="step-icon">2</div>
+                    <div class="step-title">準備模板</div>
+                    <div class="step-description">載入內容</div>
+                </li>
+                <li class="progress-step pending" id="step-3">
+                    <div class="step-icon">3</div>
+                    <div class="step-title">發送資料</div>
+                    <div class="step-description">傳送後端</div>
+                </li>
+                <li class="progress-step pending" id="step-4">
+                    <div class="step-icon">4</div>
+                    <div class="step-title">渲染 HTML</div>
+                    <div class="step-description">處理模板</div>
+                </li>
+                <li class="progress-step pending" id="step-5">
+                    <div class="step-icon">5</div>
+                    <div class="step-title">完成生成</div>
+                    <div class="step-description">顯示結果</div>
+                </li>
+            </ul>
+        </div>
+    </div>
 
     <div class="container mx-auto p-6">
         <!-- Header -->
@@ -111,15 +496,41 @@
             <div class="flex items-center justify-between">
                 <div>
                     <h1 class="text-3xl font-bold text-gray-800 flex items-center">
-                        <i class="fas fa-file-code mr-3 text-purple-600"></i>
+                        <i class="fas fa-file-code mr-3 text-green-600"></i>
                         樂寫網徵文比賽 HTML 建立器
                     </h1>
                     <p class="text-gray-600 mt-2">輕鬆建立精美的徵文比賽頁面</p>
                 </div>
-                <div class="text-gray-600">
+                <div class="text-gray-600" id="info-text">
                     <i class="fas fa-info-circle mr-2"></i>
                     填寫變數後點擊「套用變數並生成 HTML」
                 </div>
+                
+                <!-- Inline Progress Bar -->
+                <div class="progress-inline" id="progress-inline" style="display: none;">
+                    <span class="progress-title">正在生成 HTML</span>
+                    <div class="progress-steps" id="progress-steps">
+                        <div class="progress-step pending" id="step-1">
+                            <div class="step-icon">1</div>
+                        </div>
+                        <div class="progress-connector" id="connector-1"></div>
+                        <div class="progress-step pending" id="step-2">
+                            <div class="step-icon">2</div>
+                        </div>
+                        <div class="progress-connector" id="connector-2"></div>
+                        <div class="progress-step pending" id="step-3">
+                            <div class="step-icon">3</div>
+                        </div>
+                        <div class="progress-connector" id="connector-3"></div>
+                        <div class="progress-step pending" id="step-4">
+                            <div class="step-icon">4</div>
+                        </div>
+                        <div class="progress-connector" id="connector-4"></div>
+                        <div class="progress-step pending" id="step-5">
+                            <div class="step-icon">5</div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -353,11 +764,84 @@
         }
 
         .flow-arrow {
-            text-align: center;
-            font-size: 2rem;
-            color: #438951;
-            margin: 15px 0;
-            font-weight: bold;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin: 25px 0;
+            position: relative;
+            height: 80px;
+            width: 100%;
+        }
+        
+        /* Modern geometric arrow design */
+        .flow-arrow::before {
+            content: '';
+            width: 4px;
+            height: 40px;
+            background: linear-gradient(180deg, #71DDB1 0%, #5EC99D 100%);
+            border-radius: 2px;
+            margin-bottom: 5px;
+            box-shadow: 0 4px 15px rgba(113, 221, 177, 0.3);
+            animation: flowLine 2s ease-in-out infinite;
+        }
+        
+        .flow-arrow::after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-left: 12px solid transparent;
+            border-right: 12px solid transparent;
+            border-top: 18px solid #5EC99D;
+            filter: drop-shadow(0 4px 8px rgba(113, 221, 177, 0.4));
+            animation: arrowBounce 2s ease-in-out infinite;
+        }
+        
+        /* Add decorative dots */
+        .flow-arrow {
+            position: relative;
+        }
+        
+        .flow-arrow:hover::before {
+            background: linear-gradient(180deg, #5EC99D 0%, #4CAF86 100%);
+            transform: scaleY(1.1);
+        }
+        
+        .flow-arrow:hover::after {
+            border-top-color: #4CAF86;
+            transform: translateY(-2px);
+        }
+        
+        @keyframes flowLine {
+            0%, 100% {
+                opacity: 0.8;
+                transform: scaleY(1);
+            }
+            50% {
+                opacity: 1;
+                transform: scaleY(1.05);
+            }
+        }
+        
+        @keyframes arrowBounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-3px);
+            }
+        }
+        
+        /* Alternative design with connecting line */
+        .flow-arrow {
+            background: linear-gradient(to bottom, 
+                transparent 0%, 
+                transparent 45%, 
+                rgba(113, 221, 177, 0.1) 45%, 
+                rgba(113, 221, 177, 0.1) 55%, 
+                transparent 55%, 
+                transparent 100%
+            );
         }
 
         .reward-box {
@@ -620,7 +1104,7 @@
         <div class="header">
             <h1>{{ mainTitle }}</h1>
             <h2>{{ theme }}</h2>
-            <p>{{ headerDescription }}</p>
+            <p>{{ headerDescription | safe }}</p>
             
             <div class="buttons">
                 <a href="{{ personalRegUrl }}" class="btn btn-primary">個人報名</a>
@@ -639,7 +1123,7 @@
             
             <div class="method-section">
                 <h3>🚀 進行方式</h3>
-                <p>{{ methodIntro }}</p>
+                <p>本活動分為<span class="highlight">兩關兩獎</span>進行，讓學生循序漸進培養寫作能力</p>
             </div>
             
             <div class="flow-container">
@@ -654,21 +1138,21 @@
                         <div class="flow-details">
                             <div class="detail-item">
                                 <span class="detail-label">活動期間</span>
-                                <span class="detail-value">{{ stage1Period }}</span>
+                                <span class="detail-value">報名至 <span class="highlight">{{ stage1Period }}</span> 截止</span>
                             </div>
                             <div class="detail-item">
                                 <span class="detail-label">任務要求</span>
-                                <span class="detail-value">{{ stage1Requirements }}</span>
+                                <span class="detail-value">於樂寫公益平台發表至少 <span class="highlight">{{ stage1Requirements }}</span>，累積寫作經驗</span>
                             </div>
                         </div>
                         
-                        <div class="flow-arrow">↓</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>
+                                <p>從報名活動到 <span class="highlight">{{ stage1AwardEndDate }}</span> 前，於樂寫公益學習平台 <span class="highlight">積分最高的前{{ stage1AwardQuota }}名</span> 得主，可獲得聯發科技企業參訪活動體驗資格</p>
                             </div>
                         </div>
                     </div>
@@ -690,7 +1174,7 @@
                         <div class="flow-details">
                             <div class="detail-item">
                                 <span class="detail-label">活動期間</span>
-                                <span class="detail-value">{{ stage2Period }}</span>
+                                <span class="detail-value"><span class="highlight">{{ stage2Period }}</span></span>
                             </div>
                             <div class="detail-item">
                                 <span class="detail-label">邀請通知</span>
@@ -698,7 +1182,7 @@
                             </div>
                         </div>
                         
-                        <div class="flow-arrow">↓</div>
+                        <div class="flow-arrow"></div>
                         
                         <div class="reward-box">
                             <div class="reward-icon">🎖️</div>
@@ -839,7 +1323,7 @@
                     <p>活動網頁：<a href="{{ websiteUrl }}" style="color: #fff;">{{ websiteUrl }}</a></p>
                     {% endif %}
                     {% if contactInfo %}
-                    <p>{{ contactInfo }}</p>
+                    <p>{{ contactInfo }}{% if facebookUrl %}：<a href="{{ facebookUrl }}" style="color: #fff;">{{ facebookUrl }}</a>{% endif %}</p>
                     {% endif %}
                 </div>
             </div>
@@ -851,15 +1335,6 @@
                         <!-- Variables Section -->
                         <div id="variables-content">
                             <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">
-                                    變數設定
-                                </label>
-                                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
-                                    <p class="text-sm text-blue-800">
-                                        <i class="fas fa-info-circle mr-2"></i>
-                                        填寫下方表單來設定模板變數，或切換到 JSON 模式進行進階編輯
-                                    </p>
-                                </div>
                                 
                                 <!-- Toggle between Form and JSON mode -->
                                 <div class="flex justify-between mb-4">
@@ -884,23 +1359,23 @@
                                         <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">
+                                                <input type="text" id="var-mainTitle" value="2025聯發科技公益活動" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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">
+                                                <input type="text" id="var-theme" value="世界觀察員計畫" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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>
+                                                <textarea id="var-headerDescription" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">讓孩子透過文字探索自然，成為真正的世界觀察員！樂寫公益學習網誠摯邀請全國國小學生，參加<strong>自然書寫徵文比賽</strong>，展現你獨特的觀察力與創意思維。</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">
+                                                <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-green-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">
+                                                <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-green-500 focus:border-transparent">
                                             </div>
                                         </div>
                                     </div>
@@ -911,12 +1386,9 @@
                                         <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>
+                                                <input type="text" id="var-participants" value="全國公私立國小學生（本屆小六畢業生亦可參加）" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                             </div>
+                                            <!-- Removed methodIntro as it's now hardcoded in template -->
                                         </div>
                                     </div>
                                     
@@ -926,23 +1398,27 @@
                                         <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">
+                                                <input type="text" id="var-stage1Title" value="平台陪練寫作積分" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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">
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">活動截止日期</label>
+                                                <input type="text" id="var-stage1Period" value="2025年8月30日" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">文章數量要求</label>
+                                                <input type="text" id="var-stage1Requirements" value="三篇文章" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                             </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">
+                                                <input type="text" id="var-stage1AwardTitle" value="積分獎：企業參訪體驗" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
+                                            </div>
+                                            <div>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎截止日期</label>
+                                                <input type="text" id="var-stage1AwardEndDate" value="2025年8月31日" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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>
+                                                <label class="block text-sm font-medium text-gray-700 mb-1">積分獎名額</label>
+                                                <input type="text" id="var-stage1AwardQuota" value="三十" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                             </div>
                                         </div>
                                     </div>
@@ -953,23 +1429,23 @@
                                         <div class="space-y-3">
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">第二關標題</label>
-                                                <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">
+                                                <input type="text" id="var-stage2Title" value="徵文比賽" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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">
+                                                <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-green-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>
+                                                <textarea id="var-stage2Notice" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目</textarea>
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">徵文獎標題</label>
-                                                <input type="text" id="var-stage2AwardTitle" value="徵文獎：企業受獎殊榮" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                                                <input type="text" id="var-stage2AwardTitle" value="徵文獎：企業受獎殊榮" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                             </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>
+                                                <textarea id="var-stage2AwardDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">初審入圍前一百名者可獲得電子獎狀一幀，複審前三十名者，榮獲蒞臨聯發科技頒獎，現場公布得獎獎項</textarea>
                                             </div>
                                         </div>
                                     </div>
@@ -980,11 +1456,11 @@
                                         <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>
+                                                <textarea id="var-personalRegDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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>
+                                                <textarea id="var-schoolRegDesc" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">以學校或班級為單位填寫表單報名，樂寫專員將主動與校方聯繫，協助學生集體開通帳號，讓老師能夠更便利帶領全班參與這次有意義的寫作活動。</textarea>
                                             </div>
                                         </div>
                                     </div>
@@ -995,7 +1471,7 @@
                                         <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">[
+                                                <textarea id="var-requirements" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent font-mono text-xs">[
     {"title": "字數與格式要求", "content": "徵文字數至少五百字。電腦打字需使用全形符號；於樂寫公益學習網平台個人帳號上傳。"},
     {"title": "原創性要求", "content": "作品必須未曾在任何形式的平面和網路媒體（樂寫公益平台除外）發表，嚴禁抄襲及代筆（包括AI），違者取消資格。"},
     {"title": "投稿注意事項", "content": "稿件送出前，請確認內容正確性（包含錯字、斷行、特殊字、空格等）。為公平起見，投稿後不可再修改文章。"}
@@ -1003,7 +1479,7 @@
                                             </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">[
+                                                <textarea id="var-scoringCriteria" rows="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent font-mono text-xs">[
     {"item": "內容與結構", "percentage": "25%", "description": "切合題旨，思想積極健康，論點合理，文字生動；結構嚴謹，行文流暢，兼具廣度與深度。"},
     {"item": "邏輯與修辭", "percentage": "25%", "description": "邏輯分明，條理清晰，敘事明白；用字遣詞合宜，修辭靈活優美。"},
     {"item": "創意與觀察", "percentage": "20%", "description": "富含想像力，觀察微小細節，洞悉人性幽微。"},
@@ -1013,14 +1489,14 @@
                                             </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">[
+                                                <textarea id="var-notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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">[
+                                                <textarea id="var-awards" rows="8" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent font-mono text-xs">[
     {
         "title": "勤筆獎勵—企業參訪體驗",
         "description": "從報名活動到8/31前，於樂寫公益學習平台積分最高的前三十名得主，可獲得聯發科技企業參訪活動體驗資格。"
@@ -1041,7 +1517,7 @@
                                             </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">
+                                                <input type="text" id="var-awardNote" value="得獎者將獲頒獎盃一座，並成為聯發科技「世界觀察員」推廣大使！" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                                             </div>
                                         </div>
                                     </div>
@@ -1052,20 +1528,24 @@
                                         <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>
+                                                <textarea id="var-ceremonyDate" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-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">
+                                                <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-green-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>
+                                                <textarea id="var-contactInfo" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們</textarea>
+                                            </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-green-500 focus:border-transparent">
                                             </div>
                                         </div>
                                     </div>
                                     <div>
-                                        <button onclick="addCustomVariable()" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
+                                        <button onclick="addCustomVariable()" class="text-green-600 hover:text-green-800 text-sm font-medium">
                                             <i class="fas fa-plus-circle mr-1"></i>新增自訂變數
                                         </button>
                                     </div>
@@ -1076,7 +1556,7 @@
                                 
                                 <!-- 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": "主題"}'>
+                                    <textarea id="variables" class="w-full h-96 p-4 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent font-mono text-sm" placeholder='{"mainTitle": "主標題", "theme": "主題"}'>
 {
     "mainTitle": "2025聯發科技公益活動",
     "theme": "世界觀察員計畫",
@@ -1084,14 +1564,14 @@
     "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>，累積寫作經驗",
+    "stage1Period": "2025年8月30日",
+    "stage1Requirements": "三篇文章",
     "stage1AwardTitle": "積分獎：企業參訪體驗",
-    "stage1AwardDesc": "從報名活動到 <span class=\"highlight\">2025年8月31日</span> 前，於樂寫公益學習平台 <span class=\"highlight\">積分最高的前三十名</span> 得主，可獲得聯發科技企業參訪活動體驗資格",
+    "stage1AwardEndDate": "2025年8月31日",
+    "stage1AwardQuota": "三十",
     "stage2Title": "徵文比賽",
-    "stage2Period": "<span class='highlight'>2025年9月1日至9月30日</span>",
+    "stage2Period": "2025年9月1日至9月30日",
     "stage2Notice": "通過第一關的學員將於8月31日收到徵文比賽邀請通知及徵文題目",
     "stage2AwardTitle": "徵文獎：企業受獎殊榮",
     "stage2AwardDesc": "初審入圍前一百名者可獲得電子獎狀一幀，複審前三十名者，榮獲蒞臨聯發科技頒獎，現場公布得獎獎項",
@@ -1134,7 +1614,8 @@
     "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>"
+    "contactInfo": "如有任何問題，歡迎透過樂寫公益學習臉書聯繫我們",
+    "facebookUrl": "https://www.facebook.com/CoWrite30"
 }</textarea>
                                 </div>
                             </div>
@@ -1142,25 +1623,37 @@
                     </div>
                 </div>
 
-                <!-- Right Panel - HTML Source Code -->
+                <!-- Right Panel - Preview (Default) -->
                 <div class="space-y-4">
                     <div class="flex items-center justify-between">
-                        <h3 class="text-lg font-medium text-gray-700">
-                            <i class="fas fa-code mr-2"></i>HTML 原始碼
-                        </h3>
+                        <div class="flex items-center gap-4">
+                            <button onclick="toggleView('preview')" id="preview-view-btn" class="text-lg font-medium text-gray-700 px-3 py-1 rounded-lg transition-all duration-200 border-b-2 border-green-600">
+                                <i class="fas fa-eye mr-2"></i>預覽
+                            </button>
+                            <button onclick="toggleView('source')" id="source-view-btn" class="text-lg font-medium text-gray-500 px-3 py-1 rounded-lg transition-all duration-200 border-b-2 border-transparent hover:text-gray-700">
+                                <i class="fas fa-code mr-2"></i>HTML 原始碼
+                            </button>
+                        </div>
                         <div class="flex gap-2">
-                            <button onclick="previewHTML()" class="text-sm text-purple-600 hover:text-purple-800">
-                                <i class="fas fa-eye mr-1"></i>預覽
+                            <button onclick="openPreviewPopup()" class="text-sm text-green-600 hover:text-green-800">
+                                <i class="fas fa-external-link-alt mr-1"></i>彈出視窗
                             </button>
-                            <button onclick="copyToClipboard()" class="text-sm text-purple-600 hover:text-purple-800">
+                            <button onclick="copyToClipboard()" class="text-sm text-green-600 hover:text-green-800">
                                 <i class="fas fa-copy mr-1"></i>複製
                             </button>
-                            <button onclick="downloadHTML()" class="text-sm text-purple-600 hover:text-purple-800">
+                            <button onclick="downloadHTML()" class="text-sm text-green-600 hover:text-green-800">
                                 <i class="fas fa-download mr-1"></i>下載
                             </button>
                         </div>
                     </div>
-                    <div class="bg-gray-900 rounded-lg p-4 split-panel" style="overflow-y: auto; max-height: calc(100vh - 250px);">
+                    
+                    <!-- Preview View (Default) -->
+                    <div id="preview-view" class="bg-white rounded-lg p-4 split-panel" style="overflow-y: auto; max-height: calc(100vh - 250px);">
+                        <iframe id="preview-frame" class="w-full h-full min-h-[600px] border-0" srcdoc="<div style='display: flex; align-items: center; justify-content: center; height: 100vh; color: #999; font-size: 18px;'>點擊「套用變數並生成 HTML」按鈕後，這裡會顯示預覽</div>"></iframe>
+                    </div>
+                    
+                    <!-- Source Code View -->
+                    <div id="source-view" class="bg-gray-900 rounded-lg p-4 split-panel hidden" style="overflow-y: auto; max-height: calc(100vh - 250px);">
                         <pre class="text-green-400 text-sm font-mono" id="source-code"><code><!-- 點擊「套用變數並生成 HTML」按鈕後，這裡會顯示渲染後的 HTML 原始碼 --></code></pre>
                     </div>
                 </div>
@@ -1170,7 +1663,7 @@
 
     <script>
         let currentTab = 'template';
-        const awardsData = {{ awards_data | tojson | safe }};
+        const awardsData = [];
 
         // No more tab switching needed
 
@@ -1295,20 +1788,6 @@
             }
         }
 
-        function previewHTML() {
-            const sourceCode = document.getElementById('source-code').textContent;
-            
-            // Check if HTML has been generated
-            if (sourceCode.includes('<!-- 點擊')) {
-                showToast('請先生成 HTML！', 'error');
-                return;
-            }
-            
-            // Open in new window
-            const previewWindow = window.open('', '_blank', 'width=1200,height=800');
-            previewWindow.document.write(sourceCode);
-            previewWindow.document.close();
-        }
         
         function copyToClipboard() {
             const sourceCode = document.getElementById('source-code').textContent;
@@ -1445,8 +1924,8 @@
             const div = document.createElement('div');
             div.className = 'flex gap-2';
             div.innerHTML = `
-                <input type="text" id="custom-key-${customVarCount}" placeholder="變數名稱" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                <input type="text" id="custom-var-${customVarCount}" placeholder="變數值" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                <input type="text" id="custom-key-${customVarCount}" placeholder="變數名稱" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
+                <input type="text" id="custom-var-${customVarCount}" placeholder="變數值" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                 <button onclick="removeCustomVariable(this)" class="px-3 py-2 text-red-600 hover:text-red-800">
                     <i class="fas fa-trash"></i>
                 </button>
@@ -1480,115 +1959,215 @@
         // 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'
+            'participants', 'stage1Title', 'stage1Period', 'stage1Requirements',
+            'stage1AwardTitle', 'stage1AwardEndDate', 'stage1AwardQuota', 'stage2Title', 
+            'stage2Period', 'stage2Notice', 'stage2AwardTitle', 'stage2AwardDesc', 
+            'personalRegDesc', 'schoolRegDesc', 'awardNote', 'ceremonyDate', 
+            'websiteUrl', 'contactInfo', 'facebookUrl'
         ];
         
         // Remove auto-update listeners - only sync form to JSON when switching modes
         
-        // Add apply variables function
-        async function applyVariables() {
-            console.log('========== 開始生成 HTML ==========');
-            showToast('正在生成 HTML...', 'info');
+        // Progress control functions
+        function showProgress() {
+            const infoText = document.getElementById('info-text');
+            const progressInline = document.getElementById('progress-inline');
             
-            // Step 1: 檢查當前模式並更新 JSON
-            console.log('Step 1: 當前模式:', variableMode);
-            if (variableMode === 'form') {
-                console.log('Step 1.1: 執行 updateJsonFromForm()');
-                updateJsonFromForm();
+            infoText.style.display = 'none';
+            progressInline.style.display = 'flex';
+            
+            // Reset all steps to pending
+            for (let i = 1; i <= 5; i++) {
+                const step = document.getElementById(`step-${i}`);
+                step.className = 'progress-step pending';
+                const icon = step.querySelector('.step-icon');
+                icon.innerHTML = i;
             }
             
-            // Step 2: 取得模板和變數內容
-            const templateContent = document.getElementById('template').value;
-            const variablesContent = document.getElementById('variables').value;
+            // Reset connectors
+            for (let i = 1; i <= 4; i++) {
+                const connector = document.getElementById(`connector-${i}`);
+                connector.classList.remove('completed');
+            }
+        }
+        
+        function hideProgress() {
+            setTimeout(() => {
+                const infoText = document.getElementById('info-text');
+                const progressInline = document.getElementById('progress-inline');
+                
+                progressInline.style.display = 'none';
+                infoText.style.display = 'flex';
+            }, 3000);
+        }
+        
+        function updateProgressConnector(stepNumber) {
+            if (stepNumber > 1) {
+                const connector = document.getElementById(`connector-${stepNumber - 1}`);
+                if (connector) {
+                    connector.classList.add('completed');
+                }
+            }
+        }
+        
+        function updateStep(stepNumber, status, message = '') {
+            const step = document.getElementById(`step-${stepNumber}`);
+            const icon = step.querySelector('.step-icon');
             
-            console.log('Step 2: 準備發送的資料');
-            console.log('Template 長度:', templateContent.length, '字元');
-            console.log('Template 預覽:', templateContent.substring(0, 200) + '...');
-            console.log('Variables 內容:', variablesContent);
+            // Remove all status classes
+            step.classList.remove('pending', 'active', 'completed', 'error');
+            step.classList.add(status);
             
-            // Step 3: 解析並驗證 JSON
-            try {
-                const parsedVariables = JSON.parse(variablesContent);
-                console.log('Step 3: JSON 解析成功');
-                console.log('變數物件:', parsedVariables);
-                console.log('變數 keys:', Object.keys(parsedVariables));
-            } catch (e) {
-                console.error('Step 3: JSON 解析失敗:', e);
+            // Update icon
+            if (status === 'active') {
+                icon.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            } else if (status === 'completed') {
+                icon.innerHTML = '<i class="fas fa-check"></i>';
+                updateProgressConnector(stepNumber);
+            } else if (status === 'error') {
+                icon.innerHTML = '<i class="fas fa-times"></i>';
+            } else {
+                icon.innerHTML = stepNumber;
             }
             
-            // Step 4: 準備 FormData
-            const formData = new FormData();
-            formData.append('template_content', templateContent);
-            formData.append('variables', variablesContent);
-            
-            console.log('Step 4: FormData 準備完成');
-            console.log('FormData entries:');
-            for (let [key, value] of formData.entries()) {
-                console.log(`  ${key}:`, value.substring(0, 100) + '...');
+            // Update description if provided
+            if (message) {
+                const description = step.querySelector('.step-description');
+                if (description) {
+                    description.textContent = message;
+                }
+            }
+        }
+        
+        function completeProgress(success = true) {
+            if (success) {
+                // All connectors should be completed when progress is done
+                for (let i = 1; i <= 4; i++) {
+                    updateProgressConnector(i + 1);
+                }
+                hideProgress();
             }
+        }
+        
+        // Helper function for delays
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+        
+        // Add apply variables function with progress
+        async function applyVariables() {
+            console.log('========== 開始生成 HTML ==========');
+            showProgress();
             
             try {
-                // Step 5: 發送請求
-                console.log('Step 5: 發送 POST 請求到 /api/preview');
+                // Step 1: 驗證表單資料
+                updateStep(1, 'active', '正在檢查表單資料...');
+                await sleep(500);
+                
+                console.log('Step 1: 當前模式:', variableMode);
+                if (variableMode === 'form') {
+                    console.log('Step 1.1: 執行 updateJsonFromForm()');
+                    updateJsonFromForm();
+                }
+                
+                updateStep(1, 'completed', '表單資料驗證完成');
+                
+                // Step 2: 準備模板內容
+                updateStep(2, 'active', '正在載入模板內容...');
+                await sleep(300);
+                
+                const templateContent = document.getElementById('template').value;
+                const variablesContent = document.getElementById('variables').value;
+                
+                console.log('Step 2: 準備發送的資料');
+                console.log('Template 長度:', templateContent.length, '字元');
+                console.log('Variables 內容:', variablesContent);
+                
+                // 驗證 JSON
+                try {
+                    const parsedVariables = JSON.parse(variablesContent);
+                    console.log('JSON 解析成功, 變數 keys:', Object.keys(parsedVariables));
+                } catch (e) {
+                    console.error('JSON 解析失敗:', e);
+                    updateStep(2, 'error', 'JSON 格式錯誤');
+                    throw new Error('變數 JSON 格式不正確');
+                }
+                
+                updateStep(2, 'completed', '模板內容準備完成');
+                
+                // Step 3: 發送到伺服器
+                updateStep(3, 'active', '正在發送資料到伺服器...');
+                await sleep(200);
+                
+                const formData = new FormData();
+                formData.append('template_content', templateContent);
+                formData.append('variables', variablesContent);
+                
+                console.log('FormData 準備完成');
+                updateStep(3, 'completed', '資料發送成功');
+                
+                // Step 4: 渲染 HTML
+                updateStep(4, 'active', '伺服器正在處理模板...');
+                
                 const response = await fetch('/api/preview', {
                     method: 'POST',
                     body: formData
                 });
                 
-                console.log('Step 6: 收到回應');
-                console.log('Response status:', response.status);
-                console.log('Response headers:', response.headers);
+                console.log('收到伺服器回應, status:', response.status);
                 
-                // Step 7: 解析回應
                 const result = await response.json();
-                console.log('Step 7: 解析回應 JSON');
-                console.log('完整回應:', result);
+                console.log('解析回應 JSON 完成');
                 
                 if (result.debug) {
                     console.log('Debug 資訊:', result.debug);
                 }
                 
                 if (result.error) {
-                    console.error('Step 8: 後端回傳錯誤');
-                    console.error('錯誤訊息:', result.error);
-                    if (result.debug && result.debug.traceback) {
-                        console.error('錯誤堆疊:', result.debug.traceback);
-                    }
-                    
+                    console.error('後端回傳錯誤:', result.error);
+                    updateStep(4, 'error', `渲染失敗: ${result.error}`);
                     showToast(`錯誤：${result.error}`, 'error');
                     document.getElementById('source-code').innerHTML = `<code style="color: #ef4444;">錯誤：${result.error}</code>`;
-                } else {
-                    console.log('Step 8: 成功生成 HTML');
-                    console.log('HTML 長度:', result.html.length, '字元');
-                    console.log('HTML 預覽:', result.html.substring(0, 300) + '...');
-                    
-                    // Store the generated HTML
-                    generatedHTML = result.html;
-                    
-                    // Display HTML source code with syntax highlighting
-                    const htmlCode = result.html;
-                    const escapedHtml = htmlCode
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;')
-                        .replace(/'/g, '&#039;');
-                    
-                    document.getElementById('source-code').innerHTML = `<code>${escapedHtml}</code>`;
-                    showToast('HTML 已成功生成！', 'success');
-                    
-                    console.log('Step 9: HTML 已顯示在畫面上');
+                    completeProgress(false);
+                    return;
                 }
-            } catch (error) {
-                console.error('Step X: 發生錯誤');
-                console.error('錯誤類型:', error.name);
-                console.error('錯誤訊息:', error.message);
-                console.error('錯誤堆疊:', error.stack);
                 
+                updateStep(4, 'completed', 'HTML 渲染完成');
+                
+                // Step 5: 完成生成
+                updateStep(5, 'active', '正在顯示結果...');
+                await sleep(300);
+                
+                console.log('HTML 生成成功, 長度:', result.html.length, '字元');
+                
+                // Store the generated HTML
+                generatedHTML = result.html;
+                
+                // Display HTML source code with syntax highlighting
+                const htmlCode = result.html;
+                const escapedHtml = htmlCode
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#039;');
+                
+                document.getElementById('source-code').innerHTML = `<code>${escapedHtml}</code>`;
+                
+                // Always update the preview since it's the default view
+                const iframe = document.getElementById('preview-frame');
+                iframe.srcdoc = generatedHTML;
+                
+                updateStep(5, 'completed', 'HTML 已成功生成並顯示');
+                showToast('HTML 已成功生成！', 'success');
+                
+                console.log('HTML 已顯示在畫面上');
+                completeProgress(true);
+                
+            } catch (error) {
+                console.error('發生錯誤:', error);
                 showToast(`錯誤：${error.message}`, 'error');
+                completeProgress(false);
             }
             
             console.log('========== 結束生成 HTML ==========');
@@ -1596,25 +2175,57 @@
         
         // Store generated HTML globally
         let generatedHTML = '';
+        let currentView = 'preview';
         
-        // Preview HTML in popup window
-        function previewHTML() {
+        // Toggle between source code and preview view
+        function toggleView(view) {
+            currentView = view;
+            
+            if (view === 'source') {
+                // Check if HTML has been generated
+                if (!generatedHTML) {
+                    showToast('請先生成 HTML！', 'error');
+                    return;
+                }
+                
+                document.getElementById('source-view').classList.remove('hidden');
+                document.getElementById('preview-view').classList.add('hidden');
+                document.getElementById('source-view-btn').classList.add('text-gray-700', 'border-green-600');
+                document.getElementById('source-view-btn').classList.remove('text-gray-500', 'border-transparent');
+                document.getElementById('preview-view-btn').classList.add('text-gray-500', 'border-transparent');
+                document.getElementById('preview-view-btn').classList.remove('text-gray-700', 'border-green-600');
+            } else {
+                document.getElementById('source-view').classList.add('hidden');
+                document.getElementById('preview-view').classList.remove('hidden');
+                document.getElementById('preview-view-btn').classList.add('text-gray-700', 'border-green-600');
+                document.getElementById('preview-view-btn').classList.remove('text-gray-500', 'border-transparent');
+                document.getElementById('source-view-btn').classList.add('text-gray-500', 'border-transparent');
+                document.getElementById('source-view-btn').classList.remove('text-gray-700', 'border-green-600');
+                
+                // Update preview iframe if HTML is generated
+                if (generatedHTML) {
+                    const iframe = document.getElementById('preview-frame');
+                    iframe.srcdoc = generatedHTML;
+                }
+            }
+        }
+        
+        // Open preview in popup window
+        function openPreviewPopup() {
             if (!generatedHTML) {
-                showToast('請先生成 HTML', 'error');
+                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`
+                `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
             );
             
             if (previewWindow) {