Merge pull request #9 from CCU-Class/new_frontend

as6325400 · web-flow · commit 722fa8c0841c · 2025-04-09T01:03:34.000+08:00
new version frontend 1
diff --git a/src/css/input.css b/src/css/input.css
@@ -1 +1,21 @@
 @import "tailwindcss";
+
+@keyframes dots {
+  0% {
+    content: "";
+  }
+  33% {
+    content: ".";
+  }
+  66% {
+    content: "..";
+  }
+  100% {
+    content: "...";
+  }
+}
+.loading-dots::after {
+  display: inline-block;
+  animation: dots 1.2s steps(3, end) infinite;
+  content: "";
+}
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -42,6 +42,23 @@ function getDate() {
   return { year, month, day };
 }
 
+function updateResult(status, message) {
+  const el = document.getElementById("result");
+
+  el.className =
+    "text-sm whitespace-pre-wrap text-left w-full px-3 py-2 rounded-md border transition";
+
+  if (status === "success") {
+    el.classList.add("bg-green-50", "text-green-700", "border-green-300");
+  } else if (status === "error") {
+    el.classList.add("bg-red-50", "text-red-700", "border-red-300");
+  } else if (status === "loading") {
+    el.classList.add("bg-orange-50", "text-orange-700", "border-orange-300", "loading-dots");
+  }
+
+  el.textContent = message;
+}
+
 function setupEventListeners() {
   document.getElementById("exportBtn").addEventListener("click", async () => {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
@@ -76,22 +93,27 @@ function setupEventListeners() {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       chrome.tabs.sendMessage(tabs[0].id, { action: "get_sesskey" }, async (res) => {
         const sesskey = res?.sesskey;
+        const resultEl = document.getElementById("result");
+
         if (!sesskey) {
           console.log("no touch sesskey");
-          document.getElementById("result").textContent =
-            "無法獲取 sesskey，請先登入 Moodle 或者重新整理頁面";
+          updateResult("error", "無法獲取 sesskey，請先登入 Moodle 或重新整理頁面");
           return;
         }
+
         console.log("import");
-        document.getElementById("result").textContent = "匯入作業進入行事曆中...";
+        updateResult("loading", "匯入作業進入行事曆中");
+
         const { year, month, day } = getDate();
+
         chrome.runtime.sendMessage(
           { action: "import_events", sesskey, year, month, day },
           (res) => {
+            resultEl.classList.remove("loading-dots");
             if (res?.ok) {
-              document.getElementById("result").textContent = `成功匯入 ${res.count} 個作業事件`;
+              updateResult("success", `成功匯入 ${res.count} 個作業事件`);
             } else {
-              document.getElementById("result").textContent = res?.error || "發生錯誤，請稍後再試";
+              updateResult("error", res?.error || "發生錯誤，請稍後再試");
             }
           }
         );
diff --git a/src/popup.html b/src/popup.html
@@ -1,18 +1,23 @@
 <!doctype html>
-<html>
+<html lang="zh-TW">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="./css/output.css" rel="stylesheet" />
+    <title>CCU Calendar Helper</title>
   </head>
-  <body class="p-4 w-60 flex items-center justify-center flex-col bg-white shadow-md rounded-lg">
-    <h1 class="text-xl font-bold">CCU Calendar Helper</h1>
-    <div class="my-2 flex items-center space-x-2">
+  <body
+    class="p-6 w-80 bg-white text-gray-800 shadow-lg rounded-xl flex flex-col items-center font-sans"
+  >
+    <h1 class="text-xl font-semibold text-[#e88842] mb-2 whitespace-nowrap">CCU Calendar Helper</h1>
+    <div class="w-full border-b border-[#e8b68d] my-2"></div>
+
+    <div class="my-3 w-full flex justify-center items-center space-x-2">
       <input
         type="number"
         id="yearInput"
         min="1992"
-        class="w-20 px-2 py-1 text-center border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+        class="w-20 px-2 py-1 text-center border border-[#e8b68d] rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-[#e88842]"
         placeholder="年"
       />
       <span class="text-gray-700">年</span>
@@ -21,38 +26,60 @@ <h1 class="text-xl font-bold">CCU Calendar Helper</h1>
         id="monthInput"
         min="1"
         max="12"
-        class="w-16 px-2 py-1 text-center border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+        class="w-16 px-2 py-1 text-center border border-[#e8b68d] rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-[#e88842]"
         placeholder="月"
       />
       <span class="text-gray-700">月</span>
     </div>
+
     <button
       id="exportBtn"
-      class="bg-violet-400 text-white px-4 py-2 my-2 rounded-md shadow-md cursor-pointer hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
+      class="w-full bg-[#f4a261] text-white px-4 py-2 my-2 rounded-full hover:bg-[#e07628] transition"
     >
       匯出作業行事曆檔案
     </button>
     <button
       id="importBtn"
-      class="bg-gray-400 text-white px-4 py-2 my-2 rounded cursor-pointer hover:bg-gray-700"
+      class="w-full bg-[#b0b0b0] text-white px-4 py-2 my-2 rounded-full hover:bg-[#8c8c8c] transition"
     >
       更新事件至行事曆
     </button>
-    <div class="flex items-center my-2 invisible" id="autoImportContainer">
+
+    <div class="flex items-center my-2" id="autoImportContainer">
       <label for="autoImportToggle" class="mr-2 text-sm text-gray-700">自動匯入</label>
       <input
         type="checkbox"
         id="autoImportToggle"
-        class="w-5 h-5 text-violet-500 border-gray-300 rounded focus:ring-violet-500"
+        class="w-5 h-5 accent-[#e88842] rounded focus:ring-[#e88842]"
         checked
       />
     </div>
-    <pre id="result" class="text-sm my-2 whitespace-pre-wrap"></pre>
-    <div class="text-gray-600 text-sm text-center">
+
+    <pre
+      id="result"
+      class="text-sm whitespace-pre-wrap text-left w-full px-3 py-2 rounded-md border transition hidden"
+    ></pre>
+    <p class="text-gray-700 text-sm text-center my-2 leading-relaxed">
       將 ECourse2 的行事曆匯出為 iCalendar 檔案，並匯入到 Google 行事曆中。
-    </div>
+    </p>
+
+    <div class="w-full border-t border-[#e8b68d] my-3"></div>
+
+    <footer class="text-center text-xs text-gray-500 w-full">
+      <div class="flex justify-center gap-x-4">
+        <a href="mailto:PineappleSchedule2023@gmail.com" class="text-[#e88842] hover:underline"
+          >聯絡我們</a
+        >
+        <a
+          href="https://forms.gle/your-google-form-link"
+          target="_blank"
+          class="text-[#e88842] hover:underline"
+        >
+          提供回饋
+        </a>
+      </div>
+    </footer>
 
-    <!-- Use type="module" for ES module support -->
     <script type="module" src="./js/popup.js"></script>
   </body>
 </html>
