s6663296/pet-lost-found
0
1<!DOCTYPE html>2<html lang="zh-Hant">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>寵物遺失通報</title>8 <link rel="stylesheet" href="styles3.css">9</head>10 11<body>12 <header class="header">13 <div class="logo">14 <!-- 將 LOGO 和標題包裹在<a>中，增加回首頁的功能 -->15 <a href="admin.html" style="text-decoration: none; color: inherit; display: flex; align-items: center;">16 <img src="https://imgur.com/dRBCHsj.jpg" alt="寵物遺失通報">17 <h1>寵物遺失通報</h1>18 </a>19 </div>20 <nav class="nav">21 <a href="admincase.html">管理案件</a>22 <a href="adminreport.html">查看問題回報</a>23 <div class="profile">24 <!-- 頭像圖片 -->25 <img src="https://imgur.com/hqEAw93.jpg" alt="Profile">26 <!-- 浮窗下拉選單 -->27 <div class="dropdown-content">28 <a href="visitor.html" onclick="signOut()">登出</a>29 </div>30 </div>31 </div>32 </nav>33 </header>34 35 <main>36 <section class="cards-section">37 <h3>⭐ 按最新發佈時間排序</h3>38 <!-- 顯示首頁案件數量 -->39 <p id="case-count">目前有 <span id="case-count-number">0</span> 個案件</p> <!-- 顯示案件總數 -->40 <div class="cards-container" id="cards-container">41 <!-- 動態生成的案件卡片會在這裡顯示 -->42 </div>43 </section>44 </main>45 <!-- 底部區 -->46 <footer class="footer">47 <p>© 2024 寵物遺失通報平台. All Rights Reserved.</p>48 </footer>49 50 <!-- 回到最上方按鈕 -->51 <div class="back-to-top" onclick="scrollToTop()">↑</div>52 53 <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>54 <script src="supabase-config.js"></script>55 <script>56 // 回到最上方按鈕功能57 function scrollToTop() {58 window.scrollTo({ top: 0, behavior: 'smooth' });59 }60 61 // 檢查管理員權限62 (async function checkAdmin() {63 const admin = await isAdmin();64 if (!admin) {65 alert("需要管理員權限！");66 window.location.href = "login.html";67 }68 })();69 70 // 載入所有案件71 window.onload = async function () {72 const cardsContainer = document.getElementById("cards-container");73 const caseCountNumber = document.getElementById("case-count-number");74 75 cardsContainer.innerHTML = "<p>載入中...</p>";76 77 // 取得所有案件（包含尋找和尋獲）78 const resultFind = await getCases('尋找');79 const resultLook = await getCases('尋獲');80 81 const allCases = [82 ...(resultFind.success ? resultFind.cases : []),83 ...(resultLook.success ? resultLook.cases : [])84 ];85 86 // 按時間排序87 allCases.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));88 89 caseCountNumber.textContent = allCases.length;90 91 if (allCases.length === 0) {92 cardsContainer.innerHTML = "<p>目前沒有任何案件。</p>";93 return;94 }95 96 cardsContainer.innerHTML = "";97 98 allCases.forEach(caseData => {99 const card = document.createElement("div");100 card.classList.add("card");101 card.setAttribute('data-case-id', caseData.id);102 103 // 根據案件類型設置顏色104 if (caseData.case_type === '尋找') {105 card.style.backgroundColor = '#fff3cd';106 } else if (caseData.case_type === '尋獲') {107 card.style.backgroundColor = '#d4edda';108 }109 110 // 處理圖片111 const imageContainer = document.createElement("div");112 imageContainer.classList.add("image-carousel");113 114 if (caseData.case_photos && caseData.case_photos.length > 0) {115 const sortedPhotos = caseData.case_photos.sort((a, b) => a.order - b.order);116 117 if (sortedPhotos.length > 1) {118 sortedPhotos.forEach((photo, index) => {119 const petPhoto = document.createElement("img");120 petPhoto.src = photo.photo_url;121 petPhoto.classList.add("carousel-photo");122 petPhoto.style.display = index === 0 ? "block" : "none";123 imageContainer.appendChild(petPhoto);124 });125 126 let currentIndex = 0;127 const images = imageContainer.getElementsByClassName("carousel-photo");128 setInterval(() => {129 images[currentIndex].style.display = "none";130 currentIndex = (currentIndex + 1) % images.length;131 images[currentIndex].style.display = "block";132 }, 3000);133 } else {134 const petPhoto = document.createElement("img");135 petPhoto.src = sortedPhotos[0].photo_url;136 imageContainer.appendChild(petPhoto);137 }138 }139 140 card.appendChild(imageContainer);141 142 // 標題143 const caseTitle = document.createElement("h4");144 caseTitle.textContent = caseData.title;145 card.appendChild(caseTitle);146 147 // 類型標籤148 const caseType = document.createElement("span");149 caseType.textContent = caseData.case_type;150 caseType.style.cssText = "padding: 4px 8px; border-radius: 4px; font-size: 12px; color: white; background-color: " + (caseData.case_type === '尋找' ? '#ffc107' : '#28a745');151 card.appendChild(caseType);152 153 // 時間154 const caseTime = document.createElement("p");155 const lostDate = new Date(caseData.lost_time);156 caseTime.innerHTML = `<strong>${caseData.case_type === '尋找' ? '走失' : '尋獲'}時間：</strong>${lostDate.toLocaleString()}`;157 card.appendChild(caseTime);158 159 // 地點160 const caseLocation = document.createElement("p");161 caseLocation.innerHTML = `<strong>地點：</strong>${caseData.location}`;162 card.appendChild(caseLocation);163 164 // 發布者165 if (caseData.users) {166 const publisher = document.createElement("p");167 publisher.innerHTML = `<strong>發布者：</strong>${caseData.users.username}`;168 card.appendChild(publisher);169 }170 171 // 按鈕群組172 const buttonGroup = document.createElement("div");173 buttonGroup.classList.add("button-group");174 175 // 查看詳細資訊按鈕176 const caseButton = document.createElement("button");177 caseButton.textContent = "查看詳情";178 caseButton.onclick = function () {179 localStorage.setItem('currentCaseId', caseData.id);180 window.location.href = caseData.case_type === '尋找' ? "memberfindcontent.html" : "memberlookcontent.html";181 };182 183 // 刪除按鈕184 const deleteButton = document.createElement("button");185 deleteButton.textContent = "刪除";186 deleteButton.classList.add("delete-button");187 deleteButton.onclick = async function () {188 const reason = prompt("請輸入刪除原因（可選）：");189 if (confirm("確定要刪除此案件嗎？")) {190 deleteButton.disabled = true;191 deleteButton.textContent = "刪除中...";192 193 const result = await deleteCase(caseData.id, reason || '');194 if (result.success) {195 card.remove();196 caseCountNumber.textContent = parseInt(caseCountNumber.textContent) - 1;197 alert("案件已刪除！");198 } else {199 alert("刪除失敗: " + result.error);200 deleteButton.disabled = false;201 deleteButton.textContent = "刪除";202 }203 }204 };205 206 buttonGroup.appendChild(caseButton);207 buttonGroup.appendChild(deleteButton);208 card.appendChild(buttonGroup);209 210 cardsContainer.appendChild(card);211 });212 };213 </script>214</body>215 216</html>217<style>218 /* 全局樣式 */219 #home-button {220 cursor: pointer;221 /* 當滑鼠指向時，顯示手型指標 */222 }223 224 /* 全局樣式 */225 body {226 font-family: Arial, sans-serif;227 margin: 0;228 padding: 0;229 background-color: #f9f9f9;230 color: #333;231 }232 233 /* Header 區塊 */234 .header {235 background-color: #2d756f;236 color: white;237 display: flex;238 justify-content: space-between;239 align-items: center;240 padding: 20px;241 }242 243 /* 頂部 LOGO 區域樣式 */244 .header .logo {245 display: flex;246 align-items: center;247 }248 249 /* LOGO 圖片樣式 */250 .header .logo img {251 height: 120px;252 margin-right: 10px;253 }254 255 /* 頂部導航欄樣式 */256 .header .nav {257 display: flex;258 justify-content: space-between;259 /* 左右分佈 */260 align-items: center;261 padding: 10px 20px;262 /* 調整內邊距 */263 }264 265 /* 導航欄鏈接樣式 */266 .header .nav a {267 color: white;268 text-decoration: none;269 margin: 0 15px;270 /* 增加水平間距 */271 font-size: 20px;272 /* 提高字體大小 */273 font-weight: 500;274 /* 增加字重 */275 }276 277 /* 滑鼠懸停效果 */278 .header .nav a:hover {279 text-decoration: underline;280 }281 282 /* 登入按鈕樣式 */283 .header .nav .login-btn {284 background-color: white;285 color: #2d756f;286 padding: 8px 20px;287 /* 增加按鈕內部填充 */288 border-radius: 8px;289 /* 圓角更柔和 */290 font-size: 18px;291 /* 調整字體大小 */292 text-decoration: none;293 font-weight: bold;294 }295 296 /* 成員資訊區域樣式 */297 .header .nav .login-btn:hover {298 background-color: #25655c;299 color: white;300 transition: all 0.3s ease;301 /* 增加過渡效果 */302 }303 304 /* 成員資訊區域樣式 */305 .header .nav .member-info {306 display: flex;307 align-items: center;308 gap: 12px;309 /* 圖片和文字的間距 */310 }311 312 /* 成員頭像圖片樣式 */313 .header .nav .member-info img {314 width: 40px;315 height: 40px;316 border-radius: 50%;317 /* 圓形圖片 */318 border: 2px solid white;319 /* 白色邊框 */320 object-fit: cover;321 /* 確保圖片完整顯示 */322 }323 324 .header .nav .member-info span {325 font-size: 20px;326 /* 提高文字大小 */327 color: white;328 font-weight: bold;329 }330 331 .results {332 display: flex;333 flex-wrap: wrap;334 justify-content: center;335 padding: 20px;336 gap: 20px;337 }338 339 .results h2 {340 font-size: 20px;341 font-weight: normal;342 color: #666;343 text-align: center;344 margin-bottom: 20px;345 }346 347 .header .nav .dropdown:hover .dropdown-content {348 display: block;349 }350 351 .header .nav {352 display: flex;353 align-items: center;354 position: relative;355 }356 357 .header .nav .dropdown {358 position: relative;359 }360 361 /* 下拉選單樣式 */362 .dropdown-content {363 display: none;364 position: absolute;365 top: 100%;366 /* 緊貼頭貼下方 */367 right: 0;368 /* 將浮窗靠齊右邊 */369 background-color: white;370 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);371 border-radius: 5px;372 padding: 10px 0;373 z-index: 100;374 min-width: 150px;375 }376 377 .header .nav .dropdown-content a {378 color: #333;379 text-decoration: none;380 display: block;381 padding: 10px 20px;382 font-size: 16px;383 white-space: nowrap;384 }385 386 .dropdown:hover .dropdown-content {387 display: block;388 }389 390 /* 頭貼區域 */391 .profile {392 position: relative;393 /* 讓下拉選單以頭貼為基準定位 */394 display: flex;395 align-items: center;396 }397 398 .profile img {399 width: 50px;400 height: 50px;401 border-radius: 50%;402 cursor: pointer;403 /* 滑鼠指標變為手指 */404 }405 406 /* 隱藏下拉選單，預設不顯示 */407 .dropdown-content {408 display: none;409 position: absolute;410 top: 100%;411 /* 下拉位置緊貼頭像底部 */412 right: 0;413 background-color: white;414 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);415 border-radius: 5px;416 padding: 10px 0;417 z-index: 100;418 min-width: 150px;419 /* 設定最小寬度 */420 }421 422 /* 下拉選單項目樣式 */423 .dropdown-content a {424 color: #333;425 text-decoration: none;426 display: block;427 padding: 10px 20px;428 font-size: 16px;429 }430 431 .dropdown-content a:hover {432 background-color: #f2f2f2;433 }434 435 /* 滑鼠懸停頭貼時顯示下拉選單 */436 .profile:hover .dropdown-content {437 display: block;438 }439 440 .cards-section h3 {441 margin-bottom: 20px;442 font-size: 1.5rem;443 text-align: center;444 }445 446 /* ------------------------ 447 顯示案件數量樣式 448------------------------ */449 #case-count {450 font-size: 2rem;451 /* 設置字型大小 */452 font-weight: bold;453 /* 加粗文字 */454 color: #333;455 /* 文字顏色 */456 text-align: center;457 /* 文字居中 */458 margin: 20px 0;459 /* 上下間距 */460 }461 462 /* ------------------------ 463 卡片容器樣式 464------------------------ */465 .cards-container {466 display: grid;467 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));468 gap: 1.5rem;469 padding: 20px;470 }471 472 /* ------------------------ 473 單個卡片樣式 474------------------------ */475 .card {476 background-color: #deffd1 !important;477 border: 1px solid #ddd;478 border-radius: 8px;479 padding: 1.25rem;480 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);481 text-align: center;482 transition: transform 0.3s ease;483 display: flex;484 flex-direction: column;485 gap: 10px;486 }487 488 .card:hover {489 transform: translateY(-5px);490 }491 492 .card img {493 width: 100%;494 max-height: 200px;495 object-fit: cover;496 border-radius: 8px;497 margin-bottom: 1rem;498 }499 500 .card p {501 margin: 0;502 font-size: 14px;503 }504 505 /* ------------------------ 506 按鈕群組樣式 507------------------------ */508 .button-group {509 display: flex;510 justify-content: space-between;511 margin-top: 10px;512 }513 514 .button-group button {515 display: inline-block;516 padding: 0.625rem 1.25rem;517 background-color: #009688;518 color: white;519 border: none;520 border-radius: 8px;521 font-size: 1.1rem;522 cursor: pointer;523 transition: background-color 0.3s, transform 0.3s;524 }525 526 .button-group button:hover {527 background-color: #00796b;528 transform: scale(1.05);529 }530 531 .button-group button:focus {532 outline: none;533 }534 535 .button-group button:active {536 background-color: #004d40;537 }538 539 /* 刪除按鈕特別樣式 */540 .delete-button {541 background-color: #dc3545;542 }543 544 .delete-button:hover {545 background-color: #c82333;546 }547 548 .details-button {549 background-color: #00796b;550 color: white;551 }552 553 .details-button:hover {554 background-color: #004d40;555 }556 557 /* ------------------------ 558 固定大小的寵物圖片 559------------------------ */560 .pet-photos-container {561 display: flex;562 gap: 10px;563 justify-content: center;564 /* 居中顯示圖片 */565 margin-bottom: 1rem;566 }567 568 .pet-photos-container img {569 width: 150px;570 /* 固定寬度 */571 height: 150px;572 /* 固定高度 */573 object-fit: cover;574 /* 保持圖片比例並裁剪圖片 */575 border-radius: 5px;576 }577 578 /* ------------------------ 579 設定固定大小的輪播圖片 580------------------------ */581 .image-carousel {582 position: relative;583 width: 100%;584 /* 使輪播容器具有響應性 */585 max-width: 500px;586 /* 限制最大寬度 */587 height: 300px;588 /* 設置固定高度 */589 overflow: hidden;590 /* 隱藏超出容器範圍的圖片 */591 margin: 0 auto;592 /* 居中輪播容器 */593 }594 595 .carousel-photo {596 width: 100%;597 /* 確保每張圖片填滿容器寬度 */598 height: 100%;599 /* 確保每張圖片填滿容器高度 */600 object-fit: cover;601 /* 確保圖片覆蓋區域且不變形 */602 display: none;603 /* 初始隱藏圖片 */604 }605 606 /* 底部區域樣式 */607 .footer {608 background-color: #333;609 color: white;610 padding: 20px 0;611 text-align: center;612 font-size: 14px;613 }614 615 /* 回到頂部按鈕樣式 */616 .back-to-top {617 position: fixed;618 bottom: 20px;619 right: 20px;620 width: 50px;621 height: 50px;622 background-color: #2d756f;623 color: white;624 border-radius: 50%;625 display: flex;626 justify-content: center;627 align-items: center;628 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);629 cursor: pointer;630 }631 632 .back-to-top:hover {633 background-color: #25655c;634 }635</style>