更新 index.html 模板，調整樣式與新增 logo

- 將背景顏色改為淺綠色，提升整體視覺效果
- 調整按鈕、標題及文字顏色，增強可讀性
- 新增 logo 圖片以提升品牌識別度
- 優化各區塊的邊框與陰影效果，增強層次感

此次更新旨在改善使用者體驗，提供更清晰的視覺效果與品牌形象。

templates/index.html

@@ -11,15 +11,15 @@
         
         body {
             font-family: 'Noto Sans TC', sans-serif;
-            background: #f5f5f5;
+            background: #A2D5C6;
             min-height: 100vh;
         }
         
         .glass-effect {
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            border: 1px solid rgba(255, 255, 255, 0.18);
+            box-shadow: 0 8px 32px 0 rgba(162, 213, 198, 0.37);
+            border: 1px solid #E0E0E0;
         }
         
         .editor-container {
@@ -39,23 +39,26 @@
         }
         
         .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #A3E0C5;
+            color: #4C4C4C;
+            border: 1px solid #E0E0E0;
             transition: all 0.3s ease;
         }
         
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+            box-shadow: 0 10px 20px rgba(163, 224, 197, 0.4);
+            background: #8FD4B3;
         }
         
         .tab-active {
-            border-bottom: 3px solid #667eea;
-            color: #667eea;
+            border-bottom: 3px solid #A3E0C5;
+            color: #4C4C4C;
         }
         
         .preview-frame {
             background: white;
-            border: 1px solid #e5e7eb;
+            border: 1px solid #E0E0E0;
             border-radius: 8px;
             padding: 20px;
         }
@@ -74,8 +77,9 @@
             bottom: 20px;
             right: 20px;
             padding: 16px 24px;
-            background: #10b981;
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
+            border: 1px solid #E0E0E0;
             border-radius: 8px;
             display: none;
             animation: slideIn 0.3s ease;
@@ -232,13 +236,13 @@
         
         @keyframes progressPulse {
             0% {
-                box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.2);
+                box-shadow: 0 0 0 4px rgba(163, 224, 197, 0.2);
             }
             50% {
-                box-shadow: 0 0 0 8px rgba(113, 221, 177, 0.1);
+                box-shadow: 0 0 0 8px rgba(163, 224, 197, 0.1);
             }
             100% {
-                box-shadow: 0 0 0 4px rgba(113, 221, 177, 0.2);
+                box-shadow: 0 0 0 4px rgba(163, 224, 197, 0.2);
             }
         }
         
@@ -282,7 +286,7 @@
         .progress-title {
             font-size: 14px;
             font-weight: 600;
-            color: #2C6E49;
+            color: #4C4C4C;
             white-space: nowrap;
         }
         
@@ -303,7 +307,7 @@
         }
         
         .progress-connector.completed {
-            background: linear-gradient(90deg, #71DDB1 0%, #5EC99D 100%);
+            background: #A3E0C5;
         }
         
         .progress-inline .progress-step {
@@ -325,7 +329,7 @@
             font-weight: bold;
             font-size: 10px;
             transition: all 0.3s ease;
-            border: 2px solid #e9ecef;
+            border: 2px solid #E0E0E0;
             background: white;
             color: #6c757d;
         }
@@ -337,17 +341,17 @@
         }
         
         .progress-inline .progress-step.active .step-icon {
-            background: #71DDB1;
-            color: white;
-            border-color: #71DDB1;
+            background: #A3E0C5;
+            color: #4C4C4C;
+            border-color: #A3E0C5;
             animation: progressPulse 2s infinite;
-            box-shadow: 0 0 0 2px rgba(113, 221, 177, 0.2);
+            box-shadow: 0 0 0 2px rgba(163, 224, 197, 0.2);
         }
         
         .progress-inline .progress-step.completed .step-icon {
-            background: #28a745;
-            color: white;
-            border-color: #28a745;
+            background: #A3E0C5;
+            color: #4C4C4C;
+            border-color: #A3E0C5;
         }
         
         .progress-inline .progress-step.error .step-icon {
@@ -366,7 +370,7 @@
             font-weight: bold;
             font-size: 10px;
             transition: all 0.3s ease;
-            border: 2px solid #e9ecef;
+            border: 2px solid #E0E0E0;
             background: white;
             color: #6c757d;
         }
@@ -495,14 +499,14 @@
         <div class="glass-effect rounded-xl p-6 mb-6">
             <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-green-600"></i>
+                    <h1 class="text-3xl font-bold flex items-center" style="color: #4C4C4C;">
+                        <i class="fas fa-file-code mr-3" style="color: #A3E0C5;"></i>
                         樂寫網徵文比賽 HTML 建立器
                     </h1>
-                    <p class="text-gray-600 mt-2">輕鬆建立精美的徵文比賽頁面</p>
+                    <p class="mt-2" style="color: #4C4C4C;">輕鬆建立精美的徵文比賽頁面</p>
                 </div>
-                <div class="text-gray-600" id="info-text">
-                    <i class="fas fa-info-circle mr-2"></i>
+                <div id="info-text" style="color: #4C4C4C;">
+                    <i class="fas fa-info-circle mr-2" style="color: #A3E0C5;"></i>
                     填寫變數後點擊「套用變數並生成 HTML」
                 </div>
                 
@@ -540,8 +544,8 @@
                 <!-- Left Panel - Editor -->
                 <div class="space-y-4">
                     <!-- Only Variables Tab -->
-                    <h3 class="text-lg font-medium text-gray-700 mb-4">
-                        <i class="fas fa-cog mr-2"></i>變數設定
+                    <h3 class="text-lg font-medium mb-4" style="color: #4C4C4C;">
+                        <i class="fas fa-cog mr-2" style="color: #A3E0C5;"></i>變數設定
                     </h3>
 
                     <!-- Variables Content -->
@@ -563,8 +567,8 @@
         body {
             font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
             line-height: 1.6;
-            color: #333;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #000000;
+            background: #A2D5C6;
         }
 
         .container {
@@ -574,32 +578,34 @@
         }
 
         .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: white;
+            color: #4C4C4C;
             text-align: center;
             padding: 60px 20px;
             border-radius: 20px;
             margin-bottom: 30px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            box-shadow: 0 20px 40px rgba(162, 213, 198, 0.3);
+            border: 1px solid #E0E0E0;
         }
 
         .header h1 {
             font-size: 2.5rem;
             margin-bottom: 15px;
             font-weight: 700;
+            color: #4C4C4C;
         }
 
         .header h2 {
             font-size: 1.8rem;
             margin-bottom: 20px;
             font-weight: 400;
-            opacity: 0.9;
+            color: #4C4C4C;
         }
 
         .header p {
             font-size: 1.2rem;
             margin-bottom: 30px;
-            opacity: 0.8;
+            color: #4C4C4C;
             line-height: 1.8;
         }
 
@@ -622,19 +628,20 @@
         }
 
         .btn-primary {
-            background: #438951;
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
+            border: 1px solid #E0E0E0;
         }
 
         .btn-secondary {
             background: transparent;
-            color: white;
-            border: 2px solid white;
+            color: #4C4C4C;
+            border: 2px solid #4C4C4C;
         }
 
         .btn:hover {
             transform: translateY(-3px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+            box-shadow: 0 10px 25px rgba(163, 224, 197, 0.4);
         }
 
         .card {
@@ -642,7 +649,8 @@
             border-radius: 20px;
             padding: 40px;
             margin-bottom: 30px;
-            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            box-shadow: 0 15px 35px rgba(162, 213, 198, 0.2);
+            border: 1px solid #E0E0E0;
             transition: transform 0.3s ease;
         }
 
@@ -651,16 +659,19 @@
         }
 
         .card h2 {
-            color: #333;
+            color: #4C4C4C;
             font-size: 2rem;
             margin-bottom: 25px;
-            border-bottom: 3px solid #438951;
+            border-bottom: 3px solid #A3E0C5;
             padding-bottom: 10px;
         }
 
         .highlight {
-            color: #F44444;
+            color: #2E8B57;
             font-weight: bold;
+            background: rgba(163, 224, 197, 0.2);
+            padding: 2px 6px;
+            border-radius: 4px;
         }
 
         /* Flow Design Styles */
@@ -669,11 +680,11 @@
             padding: 20px;
             border-radius: 10px;
             margin-bottom: 25px;
-            border-left: 5px solid #438951;
+            border-left: 5px solid #A3E0C5;
         }
 
         .target-section h3, .method-section h3 {
-            color: #438951;
+            color: #4C4C4C;
             margin: 0 0 10px 0;
             font-size: 1.3rem;
         }
@@ -685,18 +696,18 @@
 
         .flow-section {
             background: white;
-            border: 2px solid #e9ecef;
+            border: 2px solid #E0E0E0;
             border-radius: 20px;
             padding: 30px;
             margin-bottom: 40px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 30px rgba(162, 213, 198, 0.2);
             transition: all 0.3s ease;
             position: relative;
         }
 
         .flow-section:hover {
             transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+            box-shadow: 0 20px 40px rgba(162, 213, 198, 0.3);
         }
 
         .flow-header {
@@ -704,12 +715,12 @@
             align-items: center;
             margin-bottom: 25px;
             padding-bottom: 15px;
-            border-bottom: 2px solid #f1f3f4;
+            border-bottom: 2px solid #E0E0E0;
         }
 
         .stage-number {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
             width: 80px;
             height: 80px;
             border-radius: 50%;
@@ -720,11 +731,12 @@
             font-size: 1rem;
             margin-right: 20px;
             flex-shrink: 0;
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 5px 15px rgba(163, 224, 197, 0.3);
+            border: 1px solid #E0E0E0;
         }
 
         .flow-header h3 {
-            color: #333;
+            color: #4C4C4C;
             margin: 0;
             font-size: 1.8rem;
             font-weight: 600;
@@ -743,7 +755,7 @@
             align-items: flex-start;
             margin-bottom: 15px;
             padding: 10px 0;
-            border-bottom: 1px solid #e9ecef;
+            border-bottom: 1px solid #E0E0E0;
         }
 
         .detail-item:last-child {
@@ -753,7 +765,7 @@
 
         .detail-label {
             font-weight: 600;
-            color: #495057;
+            color: #4C4C4C;
             min-width: 100px;
             margin-right: 15px;
         }
@@ -779,10 +791,10 @@
             content: '';
             width: 4px;
             height: 40px;
-            background: linear-gradient(180deg, #71DDB1 0%, #5EC99D 100%);
+            background: #A3E0C5;
             border-radius: 2px;
             margin-bottom: 5px;
-            box-shadow: 0 4px 15px rgba(113, 221, 177, 0.3);
+            box-shadow: 0 4px 15px rgba(163, 224, 197, 0.3);
             animation: flowLine 2s ease-in-out infinite;
         }
         
@@ -792,8 +804,8 @@
             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));
+            border-top: 18px solid #A3E0C5;
+            filter: drop-shadow(0 4px 8px rgba(163, 224, 197, 0.4));
             animation: arrowBounce 2s ease-in-out infinite;
         }
         
@@ -803,12 +815,12 @@
         }
         
         .flow-arrow:hover::before {
-            background: linear-gradient(180deg, #5EC99D 0%, #4CAF86 100%);
+            background: #8FD4B3;
             transform: scaleY(1.1);
         }
         
         .flow-arrow:hover::after {
-            border-top-color: #4CAF86;
+            border-top-color: #8FD4B3;
             transform: translateY(-2px);
         }
         
@@ -837,21 +849,22 @@
             background: linear-gradient(to bottom, 
                 transparent 0%, 
                 transparent 45%, 
-                rgba(113, 221, 177, 0.1) 45%, 
-                rgba(113, 221, 177, 0.1) 55%, 
+                rgba(163, 224, 197, 0.1) 45%, 
+                rgba(163, 224, 197, 0.1) 55%, 
                 transparent 55%, 
                 transparent 100%
             );
         }
 
         .reward-box {
-            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
             border-radius: 15px;
             padding: 25px;
             display: flex;
             align-items: center;
-            box-shadow: 0 5px 20px rgba(67, 233, 123, 0.3);
+            box-shadow: 0 5px 20px rgba(163, 224, 197, 0.3);
+            border: 1px solid #E0E0E0;
         }
 
         .reward-icon {
@@ -884,7 +897,7 @@
         .connector-line {
             width: 3px;
             height: 40px;
-            background: linear-gradient(to bottom, #438951, #28a745);
+            background: #A3E0C5;
             position: relative;
         }
 
@@ -898,7 +911,7 @@
             height: 0;
             border-left: 8px solid transparent;
             border-right: 8px solid transparent;
-            border-top: 12px solid #28a745;
+            border-top: 12px solid #A3E0C5;
         }
 
         /* Additional sections */
@@ -914,12 +927,12 @@
             padding: 25px;
             border-radius: 15px;
             text-align: center;
-            border: 2px solid #e9ecef;
+            border: 2px solid #E0E0E0;
             transition: all 0.3s ease;
         }
 
         .registration-item:hover {
-            border-color: #438951;
+            border-color: #A3E0C5;
             transform: translateY(-3px);
         }
 
@@ -942,18 +955,18 @@
             background: white;
             border-radius: 10px;
             overflow: hidden;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            box-shadow: 0 5px 15px rgba(162, 213, 198, 0.2);
         }
 
         th, td {
             padding: 15px;
             text-align: left;
-            border-bottom: 1px solid #e9ecef;
+            border-bottom: 1px solid #E0E0E0;
         }
 
         th {
-            background: #438951;
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
             font-weight: 600;
         }
 
@@ -969,10 +982,10 @@
         }
 
         .requirement-item {
-            background: #e8f5e8;
+            background: #f0f9f6;
             padding: 20px;
             border-radius: 10px;
-            border-left: 4px solid #438951;
+            border-left: 4px solid #A3E0C5;
         }
 
         .notes-grid {
@@ -986,7 +999,7 @@
             background: #fff3cd;
             padding: 20px;
             border-radius: 10px;
-            border-left: 4px solid #ffc107;
+            border-left: 4px solid #A3E0C5;
         }
 
         .timeline-item {
@@ -999,8 +1012,8 @@
         .timeline-number {
             width: 50px;
             height: 50px;
-            background: #438951;
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -1009,6 +1022,7 @@
             font-size: 1.2rem;
             margin-right: 25px;
             flex-shrink: 0;
+            border: 1px solid #E0E0E0;
         }
 
         .timeline-content {
@@ -1016,6 +1030,7 @@
             padding: 20px;
             border-radius: 10px;
             flex: 1;
+            border: 1px solid #E0E0E0;
         }
 
         .awards-list {
@@ -1036,11 +1051,12 @@
         }
 
         .important-dates {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            background: #A3E0C5;
+            color: #4C4C4C;
             padding: 40px;
             border-radius: 20px;
             text-align: center;
+            border: 1px solid #E0E0E0;
         }
 
         .dates-grid {
@@ -1051,10 +1067,11 @@
         }
 
         .date-item {
-            background: rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.5);
             padding: 20px;
             border-radius: 15px;
             backdrop-filter: blur(10px);
+            border: 1px solid #E0E0E0;
         }
 
         @media (max-width: 768px) {
@@ -1320,10 +1337,10 @@
                 <div class="date-item">
                     <h4>活動資訊與聯絡方式</h4>
                     {% if websiteUrl %}
-                    <p>活動網頁：<a href="{{ websiteUrl }}" style="color: #fff;">{{ websiteUrl }}</a></p>
+                    <p>活動網頁：<a href="{{ websiteUrl }}" style="color: #4C4C4C; text-decoration: underline;">{{ websiteUrl }}</a></p>
                     {% endif %}
                     {% if contactInfo %}
-                    <p>{{ contactInfo }}{% if facebookUrl %}：<a href="{{ facebookUrl }}" style="color: #fff;">{{ facebookUrl }}</a>{% endif %}</p>
+                    <p>{{ contactInfo }}{% if facebookUrl %}：<a href="{{ facebookUrl }}" style="color: #4C4C4C; text-decoration: underline;">{{ facebookUrl }}</a>{% endif %}</p>
                     {% endif %}
                 </div>
             </div>
@@ -1338,14 +1355,14 @@
                                 
                                 <!-- Toggle between Form and JSON mode -->
                                 <div class="flex justify-between mb-4">
-                                    <button onclick="applyVariables()" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-medium flex items-center">
+                                    <button onclick="applyVariables()" class="px-6 py-2 rounded-lg font-medium flex items-center" style="background: #A3E0C5; color: #4C4C4C; border: 1px solid #E0E0E0;" onmouseover="this.style.background='#8FD4B3'" onmouseout="this.style.background='#A3E0C5'">
                                         <i class="fas fa-sync-alt mr-2"></i>套用變數並生成 HTML
                                     </button>
                                     <div class="bg-gray-100 rounded-lg p-1 inline-flex">
-                                        <button id="form-mode-btn" onclick="switchVariableMode('form')" class="px-4 py-2 bg-white rounded text-sm font-medium text-gray-700 shadow-sm">
+                                        <button id="form-mode-btn" onclick="switchVariableMode('form')" class="px-4 py-2 bg-white rounded text-sm font-medium shadow-sm" style="color: #4C4C4C; border: 1px solid #E0E0E0;">
                                             <i class="fas fa-edit mr-2"></i>表單模式
                                         </button>
-                                        <button id="json-mode-btn" onclick="switchVariableMode('json')" class="px-4 py-2 rounded text-sm font-medium text-gray-700">
+                                        <button id="json-mode-btn" onclick="switchVariableMode('json')" class="px-4 py-2 rounded text-sm font-medium" style="color: #4C4C4C;">
                                             <i class="fas fa-code mr-2"></i>JSON 模式
                                         </button>
                                     </div>
@@ -1355,11 +1372,11 @@
                                 <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>
+                                        <h4 class="text-sm font-semibold mb-3" style="color: #4C4C4C;">標題區塊</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-green-500 focus:border-transparent">
+                                                <label class="block text-sm font-medium mb-1" style="color: #4C4C4C;">主標題</label>
+                                                <input type="text" id="var-mainTitle" value="2025聯發科技公益活動" class="w-full px-4 py-2 rounded-lg" style="border: 1px solid #E0E0E0; color: #000000;" onfocus="this.style.borderColor='#A3E0C5'" onblur="this.style.borderColor='#E0E0E0'">
                                             </div>
                                             <div>
                                                 <label class="block text-sm font-medium text-gray-700 mb-1">活動主題</label>
@@ -1627,21 +1644,21 @@
                 <div class="space-y-4">
                     <div class="flex items-center justify-between">
                         <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">
+                            <button onclick="toggleView('preview')" id="preview-view-btn" class="text-lg font-medium px-3 py-1 rounded-lg transition-all duration-200 border-b-2" style="color: #4C4C4C; border-color: #A3E0C5;">
                                 <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">
+                            <button onclick="toggleView('source')" id="source-view-btn" class="text-lg font-medium px-3 py-1 rounded-lg transition-all duration-200 border-b-2 border-transparent" style="color: #4C4C4C;" onmouseover="this.style.color='#A3E0C5'" onmouseout="this.style.color='#4C4C4C'">
                                 <i class="fas fa-code mr-2"></i>HTML 原始碼
                             </button>
                         </div>
                         <div class="flex gap-2">
-                            <button onclick="openPreviewPopup()" class="text-sm text-green-600 hover:text-green-800">
+                            <button onclick="openPreviewPopup()" class="text-sm" style="color: #A3E0C5;" onmouseover="this.style.color='#8FD4B3'" onmouseout="this.style.color='#A3E0C5'">
                                 <i class="fas fa-external-link-alt mr-1"></i>彈出視窗
                             </button>
-                            <button onclick="copyToClipboard()" class="text-sm text-green-600 hover:text-green-800">
+                            <button onclick="copyToClipboard()" class="text-sm" style="color: #A3E0C5;" onmouseover="this.style.color='#8FD4B3'" onmouseout="this.style.color='#A3E0C5'">
                                 <i class="fas fa-copy mr-1"></i>複製
                             </button>
-                            <button onclick="downloadHTML()" class="text-sm text-green-600 hover:text-green-800">
+                            <button onclick="downloadHTML()" class="text-sm" style="color: #A3E0C5;" onmouseover="this.style.color='#8FD4B3'" onmouseout="this.style.color='#A3E0C5'">
                                 <i class="fas fa-download mr-1"></i>下載
                             </button>
                         </div>
@@ -1671,11 +1688,14 @@
             const toast = document.getElementById('toast');
             toast.textContent = message;
             if (type === 'success') {
-                toast.style.background = '#10b981';
+                toast.style.background = '#A3E0C5';
+                toast.style.color = '#4C4C4C';
             } else if (type === 'error') {
                 toast.style.background = '#ef4444';
+                toast.style.color = 'white';
             } else if (type === 'info') {
-                toast.style.background = '#3b82f6';
+                toast.style.background = '#A3E0C5';
+                toast.style.color = '#4C4C4C';
             }
             toast.style.display = 'block';
             
@@ -2190,17 +2210,17 @@
                 
                 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');
+                document.getElementById('source-view-btn').style.borderColor = '#A3E0C5';
+                document.getElementById('source-view-btn').classList.remove('border-transparent');
+                document.getElementById('preview-view-btn').style.borderColor = 'transparent';
+                document.getElementById('preview-view-btn').classList.add('border-transparent');
             } 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');
+                document.getElementById('preview-view-btn').style.borderColor = '#A3E0C5';
+                document.getElementById('preview-view-btn').classList.remove('border-transparent');
+                document.getElementById('source-view-btn').style.borderColor = 'transparent';
+                document.getElementById('source-view-btn').classList.add('border-transparent');
                 
                 // Update preview iframe if HTML is generated
                 if (generatedHTML) {