優化header及部分程式碼

static/index.html

@@ -30,13 +30,13 @@
         ▶️
       </button>
       <button class="buttonClearCards">
-        🧹
+        <i class="ti ti-brush"></i>Clear All
       </button>
       <button class="buttonSeedCards">
-        🌱
+        <i class="ti ti-seeding"></i>Seeding
       </button>
       <button class="buttonAddImage">
-        Add Image
+        <i class="ti ti-photo-plus"></i>Add Image
       </button>
     </div>
   </header>

static/spa.js

@@ -11,6 +11,7 @@ function init() {
     document.querySelector('.buttonCancelAdd').addEventListener('click', hideAddImageForm);
     document.querySelector('.buttonApproveAdd').addEventListener('click', addImage);
     document.querySelector('.buttonApproveAddMore').addEventListener('click', addMoreImage);
+
     document.querySelector('.buttonClearCards').addEventListener('click', clearAllCards);
     document.querySelector('.buttonAddMeme').addEventListener('click', addMeme);
     document.querySelector('.buttonSeedCards').addEventListener('click', seedCards);
@@ -124,39 +125,29 @@ function hideAddImageForm() {
 }
 
 function addImage(event) {
-    event.preventDefault();
-    let  imageUrl = document.getElementById('newPicUrl').value.trim();
-    if (!imageUrl) {
-        // 如果 URL 是空的，直接返回並且不進行任何操作
-        console.log('URL is empty. No action taken.');
-        return;
-    }
-    if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
-        // 如果不是，則默默地為用戶添加 http://
-        imageUrl = 'https://' + imageUrl;
-        console.log('URL corrected to: ', imageUrl);
-    }
-    // 添加圖片
-    addImageWithUrl(imageUrl);
-
-    // 清空輸入欄位並隱藏添加圖片表單
-    document.getElementById('newPicUrl').value = '';
-    hideAddImageForm();
+    handleAddImage(event, true);
 }
 
 function addMoreImage(event) {
+    handleAddImage(event, false);
+}
+
+function handleAddImage(event, closeModal) {
     event.preventDefault();
-    let  imageUrl = document.getElementById('newPicUrl').value.trim();
+    let imageUrl = document.getElementById('newPicUrl').value.trim();
     if (!imageUrl) {
         console.log('URL is empty. No action taken.');
         return;
     }
     if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
-        imageUrl = 'http://' + imageUrl;
+        imageUrl = 'https://' + imageUrl;
         console.log('URL corrected to: ', imageUrl);
     }
     addImageWithUrl(imageUrl);
     document.getElementById('newPicUrl').value = '';
+    if (closeModal) {
+        hideAddImageForm()
+    }
 }
 
 

static/style.css

@@ -20,6 +20,7 @@ body {
   /* 為文字顏色添加一個變量 */
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   /* 選擇一個基本字體 */
+  padding-top: 40px;
 }
 
 header {
@@ -29,6 +30,11 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: fixed; /* 固定頭部的位置 */
+  top: 0; /* 距離視口頂部的距離 */
+  left: 0; /* 距離視口左邊的距離 */
+  width: 100%; /* 頭部寬度 */
+  z-index: 1000; /* 確保頭部在其他內容之上 */
   /* 垂直居中對齊 */
 }