Spaces:

shiue2000
/

sparkAnalysis

Sleeping

App Files Files Community

shiue2000 commited on Sep 25, 2025

Commit

f0a3e75

verified ·

1 Parent(s): 28d89bb

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +36 -41

templates/index.html CHANGED Viewed

@@ -6,102 +6,97 @@
     <title>高雄市長選戰輿情分析</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        body {{
             background-color: #f3f4f6;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }}
-        .card {{
             background-color: white;
             border-radius: 0.5rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             padding: 1.5rem;
             margin-bottom: 1.5rem;
-        }}
-        .chart-container {{
             max-width: 100%;
             overflow-x: auto;
-        }}
     </style>
 </head>
-<body class="p-6">
     <header class="bg-blue-600 text-white p-4 rounded-lg mb-6">
-        <h1 class="text-3xl font-bold">高雄市長選戰輿情分析</h1>
         <p class="text-sm">更新時間: {report_date}</p>
     </header>
-    <main class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <!-- 當日社群貼文情緒 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">1. 當日社群貼文情緒</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_b64_today}" alt="當日社群情緒比例" class="w-full">
             </div>
         </div>
-        <!-- 歷史情緒趨勢 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">2. 歷史情緒趨勢</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_b64_trend}" alt="歷史情緒趨勢" class="w-full">
             </div>
         </div>
-        <!-- 社群媒體參與概況 -->
         <div class="card md:col-span-2">
-            <h2 class="text-xl font-semibold mb-4">3. 社群媒體參與概況</h2>
             {engagement_table}
         </div>
-        <!-- 社群情感趨勢圖 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">4. 社群情感趨勢圖</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_social_sentiment}" alt="社群情感趨勢" class="w-full">
             </div>
         </div>
-        <!-- 各平台表現 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">5. 各平台表現</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_platform_performance}" alt="各平台表現" class="w-full">
             </div>
         </div>
-        <!-- 候選人社群量趨勢 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">6. 候選人社群量趨勢</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_candidate_volume}" alt="候選人社群量趨勢" class="w-full">
             </div>
         </div>
-        <!-- 候選人社群量分析 -->
         <div class="card">
-            <h2 class="text-xl font-semibold mb-4">7. 候選人社群量分析（正/負面情緒）</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_candidate_sentiment}" alt="候選人社群情緒分析" class="w-full">
             </div>
         </div>
-        <!-- 知識圖譜 -->
         <div class="card md:col-span-2">
-            <h2 class="text-xl font-semibold mb-4">8. 知識圖譜</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_knowledge_graph}" alt="知識圖譜" class="w-full">
             </div>
         </div>
-        <!-- 新聞議題統計 -->
         <div class="card md:col-span-2">
-            <h2 class="text-xl font-semibold mb-4">9. 新聞議題統計</h2>
             <p>各類別新聞數量: {news_summary}</p>
             {news_table}
         </div>
     </main>
-    <footer class="mt-6 text-center text-gray-500">
-        <p>© 2025 高雄市長選戰輿情分析系統 | 由 xAI 技術支持</p>
     </footer>
 </body>
-</html>

     <title>高雄市長選戰輿情分析</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        body {
             background-color: #f3f4f6;
+            font-family: 'Microsoft JhengHei', 'Arial Unicode MS', 'SimHei', 'DejaVu Sans', sans-serif;
+        }
+        .card {
             background-color: white;
             border-radius: 0.5rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             padding: 1.5rem;
             margin-bottom: 1.5rem;
+        }
+        .chart-container {
             max-width: 100%;
             overflow-x: auto;
+        }
+        table {
+            border-collapse: collapse;
+        }
+        th, td {
+            text-align: left;
+        }
+        @media (max-width: 640px) {
+            .card {
+                padding: 1rem;
+            }
+            h2 {
+                font-size: 1.25rem;
+            }
+        }
     </style>
 </head>
+<body class="p-4 sm:p-6">
     <header class="bg-blue-600 text-white p-4 rounded-lg mb-6">
+        <h1 class="text-2xl sm:text-3xl font-bold">高雄市長選戰輿情分析</h1>
         <p class="text-sm">更新時間: {report_date}</p>
     </header>
+    <main class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">1. 當日社群貼文情緒</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_b64_today}" alt="當日社群情緒比例" class="w-full">
             </div>
         </div>
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">2. 歷史情緒趨勢</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_b64_trend}" alt="歷史情緒趨勢" class="w-full">
             </div>
         </div>
         <div class="card md:col-span-2">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">3. 社群媒體參與概況</h2>
             {engagement_table}
         </div>
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">4. 社群情感趨勢圖</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_social_sentiment}" alt="社群情感趨勢" class="w-full">
             </div>
         </div>
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">5. 各平台表現</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_platform_performance}" alt="各平台表現" class="w-full">
             </div>
         </div>
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">6. 候選人社群量趨勢</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_candidate_volume}" alt="候選人社群量趨勢" class="w-full">
             </div>
         </div>
         <div class="card">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">7. 候選人社群量分析（正/負面情緒）</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_candidate_sentiment}" alt="候選人社群情緒分析" class="w-full">
             </div>
         </div>
         <div class="card md:col-span-2">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">8. 知識圖譜</h2>
             <div class="chart-container">
                 <img src="data:image/png;base64,{img_knowledge_graph}" alt="知識圖譜" class="w-full">
             </div>
         </div>
         <div class="card md:col-span-2">
+            <h2 class="text-lg sm:text-xl font-semibold mb-4">9. 新聞議題統計</h2>
             <p>各類別新聞數量: {news_summary}</p>
             {news_table}
         </div>
     </main>
+    <footer class="mt-6 text-center text-gray-500 text-sm">
+        <p>© 2025 高雄市長選戰輿情分析系統</p>
     </footer>
 </body>
+</html>