Spaces:

OuiMCB
/

Time

Running

App Files Files Community

OuiMCB commited on 7 days ago

Commit

6cfe470

verified ·

1 Parent(s): 9a11314

Update index.html

Browse files

Files changed (1) hide show

index.html +330 -19

index.html CHANGED Viewed

@@ -1,19 +1,330 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>7人共同空檔協調行事曆</title>
+  <style>
+    :root {
+      --primary-color: #4a90e2;
+      --success-color: #2ecc71;
+      --bg-color: #f4f7f6;
+      --card-bg: #ffffff;
+      --border-color: #e0e0e0;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background-color: var(--bg-color);
+      color: #333;
+      margin: 0;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    h1 {
+      text-align: center;
+      color: #2c3e50;
+      margin-bottom: 20px;
+    }
+    /* 頂部交集結果區塊 */
+    .intersection-card {
+      background-color: #e8f8f5;
+      border: 2px solid var(--success-color);
+      border-radius: 8px;
+      padding: 15px 20px;
+      margin-bottom: 25px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    }
+    .intersection-card h2 {
+      margin-top: 0;
+      color: #27ae60;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .available-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 10px;
+    }
+    .tag {
+      background-color: var(--success-color);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-weight: bold;
+      font-size: 0.95rem;
+    }
+    .no-match {
+      color: #7f8c8d;
+      font-style: italic;
+    }
+    /* 行事曆列表 */
+    .calendar-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    .date-card {
+      background: var(--card-bg);
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+      padding: 15px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+      transition: all 0.3s ease;
+    }
+    .date-card.all-available {
+      border: 2px solid var(--success-color);
+      background-color: #f9fffb;
+    }
+    .date-header {
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #34495e;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .status-badge {
+      font-size: 0.85rem;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background-color: #eee;
+      color: #666;
+    }
+    .date-card.all-available .status-badge {
+      background-color: var(--success-color);
+      color: white;
+    }
+    /* 七小欄 Grid Layout */
+    .members-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+      gap: 10px;
+    }
+    .member-col {
+      background: #f8f9fa;
+      border: 1px solid #e9ecef;
+      border-radius: 6px;
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .member-name-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: bold;
+      color: #495057;
+      font-size: 0.95rem;
+    }
+    .member-col label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 0.8rem;
+      color: #6c757d;
+      cursor: pointer;
+    }
+    .member-col input[type="text"] {
+      width: 100%;
+      padding: 6px;
+      border: 1px solid #ced4da;
+      border-radius: 4px;
+      font-size: 0.85rem;
+      box-sizing: border-box;
+    }
+    .member-col input[type="text"]:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+    }
+    /* 響應式微調 */
+    @media (max-width: 768px) {
+      .members-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  </style>
+  <!-- Firebase 9 SDK (Compat 模式，方便單一檔案整合) -->
+  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>📅 7人空檔時間協調行事曆 (8/14 - 9/2)</h1>
+    <!-- 共同有空交集區塊 -->
+    <div class="intersection-card">
+      <h2>🎉 全員皆有空的日期（交集）：</h2>
+      <div id="intersection-results" class="available-tags">
+        <span class="no-match">計算中或目前尚無所有人都有空的日期...</span>
+      </div>
+    </div>
+    <!-- 日期清單區塊 -->
+    <div id="calendar" class="calendar-grid"></div>
+  </div>
+  <script>
+    // 1. 初始化 Firebase Realtime Database
+    const firebaseConfig = {
+      databaseURL: "https://bolobolobolomi-66014-default-rtdb.asia-southeast1.firebasedatabase.app/"
+    };
+    firebase.initializeApp(firebaseConfig);
+    const db = firebase.database();
+    const scheduleRef = db.ref("schedule_2026");
+    // 2. 設定參數
+    const members = ["桑", "吳", "張", "趙", "謝", "黃", "康"];
+    const startDate = new Date("2026-08-14");
+    const endDate = new Date("2026-09-02");
+    // 生成日期陣列 YYYY-MM-DD
+    const dateList = [];
+    let curr = new Date(startDate);
+    while (curr <= endDate) {
+      const year = curr.getFullYear();
+      const month = String(curr.getMonth() + 1).padStart(2, '0');
+      const day = String(curr.getDate()).padStart(2, '0');
+      const dateStr = `${year}-${month}-${day}`;
+      const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
+      const dayOfWeek = weekDays[curr.getDay()];
+      dateList.push({ dateStr, displayStr: `${month}/${day} (${dayOfWeek})` });
+      curr.setDate(curr.getDate() + 1);
+    }
+    // 3. 渲染 HTML 結構
+    const calendarContainer = document.getElementById("calendar");
+    dateList.forEach(({ dateStr, displayStr }) => {
+      const dateCard = document.createElement("div");
+      dateCard.className = "date-card";
+      dateCard.id = `card-${dateStr}`;
+      let membersHTML = "";
+      members.forEach(name => {
+        membersHTML += `
+          <div class="member-col">
+            <div class="member-name-row">
+              <span>${name}</span>
+              <label>
+                <input type="checkbox" id="chk-${dateStr}-${name}" onchange="updateData('${dateStr}', '${name}')">
+                有空
+              </label>
+            </div>
+            <input type="text" id="txt-${dateStr}-${name}" placeholder="標註時間/備註..." onchange="updateData('${dateStr}', '${name}')" onkeydown="if(event.key==='Enter') this.blur()">
+          </div>
+        `;
+      });
+      dateCard.innerHTML = `
+        <div class="date-header">
+          <span>${displayStr}</span>
+          <span class="status-badge" id="badge-${dateStr}">填寫中</span>
+        </div>
+        <div class="members-grid">
+          ${membersHTML}
+        </div>
+      `;
+      calendarContainer.appendChild(dateCard);
+    });
+    // 4. 更新 Firebase 資料
+    function updateData(dateStr, memberName) {
+      const isAvailable = document.getElementById(`chk-${dateStr}-${memberName}`).checked;
+      const textNote = document.getElementById(`txt-${dateStr}-${memberName}`).value;
+      scheduleRef.child(dateStr).child(memberName).set({
+        available: isAvailable,
+        note: textNote
+      });
+    }
+    // 5. 監聽 Firebase 資料庫變更並更新 UI
+    scheduleRef.on("value", (snapshot) => {
+      const data = snapshot.val() || {};
+      const fullAvailableDates = [];
+      dateList.forEach(({ dateStr, displayStr }) => {
+        const dateData = data[dateStr] || {};
+        let availableCount = 0;
+        members.forEach(name => {
+          const memberData = dateData[name] || { available: false, note: "" };
+          const chkEl = document.getElementById(`chk-${dateStr}-${name}`);
+          const txtEl = document.getElementById(`txt-${dateStr}-${name}`);
+          // 避免覆蓋正在輸入中的 input content
+          if (document.activeElement !== txtEl) {
+            txtEl.value = memberData.note || "";
+          }
+          chkEl.checked = !!memberData.available;
+          if (memberData.available) {
+            availableCount++;
+          }
+        });
+        const cardEl = document.getElementById(`card-${dateStr}`);
+        const badgeEl = document.getElementById(`badge-${dateStr}`);
+        // 比對交集：7 個人都勾選有空
+        if (availableCount === members.length) {
+          cardEl.classList.add("all-available");
+          badgeEl.innerText = "全員皆有空！";
+          fullAvailableDates.push(displayStr);
+        } else {
+          cardEl.classList.remove("all-available");
+          badgeEl.innerText = `有空人數：${availableCount}/${members.length}`;
+        }
+      });
+      // 更新頂部交集結果
+      const resultsContainer = document.getElementById("intersection-results");
+      if (fullAvailableDates.length > 0) {
+        resultsContainer.innerHTML = fullAvailableDates
+          .map(d => `<span class="tag">${d}</span>`)
+          .join("");
+      } else {
+        resultsContainer.innerHTML = `<span class="no-match">目前尚無所有人都有空的日期，大家快來勾選！</span>`;
+      }
+    });
+  </script>
+</body>
+</html>