s6663296/pet-lost-found
0
1<!DOCTYPE html>2<html lang="zh-TW">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>問題回報</title>8 <style>9 #home-button {10 cursor: pointer;11 /* 當滑鼠指向時，顯示手型指標 */12 }13 14 /* 全局樣式 */15 body {16 font-family: Arial, sans-serif;17 margin: 0;18 padding: 0;19 background-color: #f9f9f9;20 color: #333;21 22 }23 24 /* 讓 body 和 html 滿高，使用 Flexbox 排列 */25 html,26 body {27 height: 100%;28 /* 保證整個頁面填滿視窗高度 */29 margin: 0;30 display: flex;31 flex-direction: column;32 }33 34 35 /* Header 區塊 */36 .header {37 background-color: #2d756f;38 color: white;39 display: flex;40 justify-content: space-between;41 align-items: center;42 padding: 20px;43 }44 45 /* 頂部 LOGO 區域樣式 */46 .header .logo {47 display: flex;48 align-items: center;49 }50 51 /* LOGO 圖片樣式 */52 .header .logo img {53 height: 120px;54 margin-right: 10px;55 }56 57 /* 頂部導航欄樣式 */58 .header .nav {59 display: flex;60 justify-content: space-between;61 /* 左右分佈 */62 align-items: center;63 padding: 10px 20px;64 /* 調整內邊距 */65 }66 67 /* 導航欄鏈接樣式 */68 .header .nav a {69 color: white;70 text-decoration: none;71 margin: 0 15px;72 /* 增加水平間距 */73 font-size: 20px;74 /* 提高字體大小 */75 font-weight: 500;76 /* 增加字重 */77 }78 79 /* 滑鼠懸停效果 */80 .header .nav a:hover {81 text-decoration: underline;82 }83 84 /* 登入按鈕樣式 */85 .header .nav .login-btn {86 background-color: white;87 color: #2d756f;88 padding: 8px 20px;89 /* 增加按鈕內部填充 */90 border-radius: 8px;91 /* 圓角更柔和 */92 font-size: 18px;93 /* 調整字體大小 */94 text-decoration: none;95 font-weight: bold;96 }97 98 /* 成員資訊區域樣式 */99 .header .nav .login-btn:hover {100 background-color: #25655c;101 color: white;102 transition: all 0.3s ease;103 /* 增加過渡效果 */104 }105 106 /* 成員資訊區域樣式 */107 .header .nav .member-info {108 display: flex;109 align-items: center;110 gap: 12px;111 /* 圖片和文字的間距 */112 }113 114 /* 成員頭像圖片樣式 */115 .header .nav .member-info img {116 width: 40px;117 height: 40px;118 border-radius: 50%;119 /* 圓形圖片 */120 border: 2px solid white;121 /* 白色邊框 */122 object-fit: cover;123 /* 確保圖片完整顯示 */124 }125 126 .header .nav .member-info span {127 font-size: 20px;128 /* 提高文字大小 */129 color: white;130 font-weight: bold;131 }132 133 .results {134 display: flex;135 flex-wrap: wrap;136 justify-content: center;137 padding: 20px;138 gap: 20px;139 }140 141 .results h2 {142 font-size: 20px;143 font-weight: normal;144 color: #666;145 text-align: center;146 margin-bottom: 20px;147 }148 149 .header .nav .dropdown:hover .dropdown-content {150 display: block;151 }152 153 .header .nav {154 display: flex;155 align-items: center;156 position: relative;157 }158 159 .header .nav .dropdown {160 position: relative;161 }162 163 /* 下拉選單樣式 */164 .dropdown-content {165 display: none;166 position: absolute;167 top: 100%;168 /* 緊貼頭貼下方 */169 right: 0;170 /* 將浮窗靠齊右邊 */171 background-color: white;172 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);173 border-radius: 5px;174 padding: 10px 0;175 z-index: 100;176 min-width: 150px;177 }178 179 .header .nav .dropdown-content a {180 color: #333;181 text-decoration: none;182 display: block;183 padding: 10px 20px;184 font-size: 16px;185 white-space: nowrap;186 }187 188 .dropdown:hover .dropdown-content {189 display: block;190 }191 192 /* 頭貼區域 */193 .profile {194 position: relative;195 /* 讓下拉選單以頭貼為基準定位 */196 display: flex;197 align-items: center;198 margin-left: 20px;199 }200 201 .profile img {202 width: 50px;203 height: 50px;204 border-radius: 50%;205 cursor: pointer;206 /* 滑鼠指標變為手指 */207 }208 209 /* 隱藏下拉選單，預設不顯示 */210 .dropdown-content {211 display: none;212 position: absolute;213 top: 100%;214 /* 下拉位置緊貼頭像底部 */215 right: 0;216 background-color: white;217 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);218 border-radius: 5px;219 padding: 10px 0;220 z-index: 100;221 min-width: 150px;222 /* 設定最小寬度 */223 }224 225 /* 下拉選單項目樣式 */226 .dropdown-content a {227 color: #333;228 text-decoration: none;229 display: block;230 padding: 10px 20px;231 font-size: 16px;232 }233 234 .dropdown-content a:hover {235 background-color: #f2f2f2;236 }237 238 /* 滑鼠懸停頭貼時顯示下拉選單 */239 .profile:hover .dropdown-content {240 display: block;241 }242 243 244 /* 響應式設計 */245 .hamburger {246 display: none;247 font-size: 24px;248 cursor: pointer;249 }250 251 .mobile-nav {252 display: none;253 flex-direction: column;254 background-color: #2d756f;255 position: absolute;256 top: 80px;257 right: 0;258 width: 100%;259 padding: 10px 0;260 }261 262 .mobile-nav a {263 color: white;264 padding: 10px 20px;265 text-decoration: none;266 }267 268 .mobile-nav .dropdown-content {269 position: static;270 background-color: #2d756f;271 }272 273 .mobile-nav.open {274 display: flex;275 }276 277 @media (max-width: 768px) {278 .nav {279 display: none;280 }281 282 .hamburger {283 display: block;284 }285 }286 287 /* 主內容區塊 */288 .container {289 flex: 1;290 /* 將主內容擴展，填滿剩餘空間 */291 max-width: 800px;292 /* 設置最大寬度，避免變形 */293 width: 100%;294 /* 適應視窗寬度 */295 margin: 40px auto;296 /* 水平居中，與頂部保持間距 */297 padding: 20px;298 background-color: #fff;299 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);300 border-radius: 10px;301 box-sizing: border-box;302 /* 確保 padding 不會影響總寬度 */303 }304 305 h2 {306 text-align: center;307 margin-bottom: 20px;308 }309 310 .report-list {311 margin-top: 20px;312 }313 314 .report-item {315 display: flex;316 justify-content: space-between;317 align-items: center;318 background-color: #f1f1f1;319 padding: 10px 15px;320 border-radius: 5px;321 margin-bottom: 10px;322 }323 324 .report-item .info {325 display: flex;326 flex-direction: column;327 }328 329 .report-item button {330 background-color: #2d756f;331 color: white;332 border: none;333 border-radius: 5px;334 padding: 5px 10px;335 cursor: pointer;336 }337 338 .report-item button:hover {339 background-color: #25655c;340 }341 342 /* 詳情視窗 */343 .details-popup {344 display: none;345 position: fixed;346 top: 50%;347 left: 50%;348 transform: translate(-50%, -50%);349 width: 90%;350 max-width: 500px;351 background-color: white;352 border-radius: 10px;353 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);354 z-index: 1000;355 padding: 20px;356 }357 358 .overlay {359 display: none;360 position: fixed;361 top: 0;362 left: 0;363 width: 100%;364 height: 100%;365 background-color: rgba(0, 0, 0, 0.5);366 z-index: 999;367 }368 369 /* 詳情視窗 */370 .overlay {371 display: none;372 position: fixed;373 top: 0;374 left: 0;375 width: 100%;376 height: 100%;377 background-color: rgba(0, 0, 0, 0.5);378 z-index: 999;379 }380 381 /* 固定 Footer 在最底部 */382 .footer {383 background-color: #333;384 color: white;385 text-align: center;386 padding: 20px;387 margin-top: auto;388 /* 使用 Flexbox 屬性，將 footer 推到底部 */389 font-size: 14px;390 }391 392 393 394 .back-to-top {395 position: fixed;396 bottom: 20px;397 right: 20px;398 width: 50px;399 height: 50px;400 background-color: #2d756f;401 color: white;402 border-radius: 50%;403 display: flex;404 justify-content: center;405 align-items: center;406 cursor: pointer;407 }408 409 .back-to-top:hover {410 background-color: #25655c;411 }412 </style>413</head>414 415<body>416 <!-- Header -->417 <header class="header">418 <div class="logo">419 <!-- 將 LOGO 和標題包裹在<a>中，增加回首頁的功能 -->420 <a href="admin.html" style="text-decoration: none; color: inherit; display: flex; align-items: center;">421 <img src="https://imgur.com/dRBCHsj.jpg" alt="寵物遺失通報">422 <h1>寵物遺失通報</h1>423 </a>424 </div>425 <nav class="nav">426 <a href="admincase.html">管理案件</a>427 <a href="adminreport.html">查看問題回報</a>428 <div class="profile">429 <!-- 頭像圖片 -->430 <img src="https://imgur.com/VBlnP1O.jpg" alt="Profile">431 <!-- 浮窗下拉選單 -->432 <div class="dropdown-content">433 <a href="visitor.html" onclick="signOut()">登出</a>434 </div>435 </div>436 </div>437 </nav>438 </header>439 <div class="hamburger" onclick="toggleMenu()">☰</div>440 <div class="mobile-nav" id="mobile-nav">441 <a href="#">尋找與尋獲</a>442 <a href="managereport.html">查看問題回報</a>443 </div>444 </header>445 446 <div class="container">447 <h2>待查看問題回報</h2>448 <div class="report-list" id="reportList">449 <!-- 動態生成的報告項目將會顯示在這裡 -->450 </div>451 </div>452 453 454 <!-- 詳情視窗 -->455 <div class="overlay" id="overlay" onclick="closeDetails()"></div>456 <div class="details-popup" id="details-popup">457 <h3 id="details-title"></h3>458 <p><strong>發布者：</strong> <span id="details-author"></span></p>459 <p><strong>日期：</strong> <span id="details-date"></span></p>460 <p><strong>內容：</strong> <span id="details-content"></span></p>461 <button onclick="closeDetails()">關閉</button>462 </div>463 <!-- 詳情視窗 -->464 <div class="overlay" id="overlay" onclick="closeDetails()"></div>465 <div class="details-popup" id="details-popup">466 <h3 id="details-title"></h3>467 <p><strong>發布者：</strong> <span id="details-author"></span></p>468 <p><strong>日期：</strong> <span id="details-date"></span></p>469 <p><strong>內容：</strong> <span id="details-content"></span></p>470 <button onclick="closeDetails()">關閉</button>471 </div>472 473 <!-- Footer -->474 <footer class="footer">475 <p>© 2024 問題回報平台. All Rights Reserved.</p>476 </footer>477 <!-- 回到頂部按鈕 -->478 <div class="back-to-top" onclick="scrollToTop()">↑</div>479 480 <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>481 <script src="supabase-config.js"></script>482 <script>483 let reports = [];484 485 document.addEventListener("DOMContentLoaded", async () => {486 const reportList = document.querySelector(".report-list");487 reportList.innerHTML = "<p>載入中...</p>";488 489 // 從 Supabase 讀取問題回報490 const result = await getReports();491 492 if (!result.success) {493 reportList.innerHTML = `<p>載入失敗: ${result.error}</p>`;494 return;495 }496 497 reports = result.reports;498 renderReports();499 });500 501 // 渲染報告列表502 function renderReports() {503 const reportList = document.querySelector(".report-list");504 reportList.innerHTML = "";505 506 if (reports.length === 0) {507 reportList.innerHTML = "<p>目前沒有問題回報。</p>";508 return;509 }510 511 reports.forEach((report, index) => {512 const reportItem = document.createElement("div");513 reportItem.classList.add("report-item");514 515 const date = new Date(report.created_at);516 reportItem.innerHTML = `517 <div class="info">518 <span><strong>日期：</strong>${date.toLocaleDateString()}</span>519 <span><strong>標題：</strong>${report.title}</span>520 </div>521 <div>522 <button onclick="showFullDetails(${index})">詳細內容</button>523 <button onclick="deleteReport('${report.id}', ${index})">刪除</button>524 </div>525 `;526 reportList.appendChild(reportItem);527 });528 }529 530 // 查看完整詳情531 function showFullDetails(index) {532 const report = reports[index];533 document.getElementById("details-title").innerText = report.title;534 document.getElementById("details-author").innerText = report.publisher;535 document.getElementById("details-date").innerText = new Date(report.created_at).toLocaleDateString();536 document.getElementById("details-content").innerText = report.content;537 538 document.getElementById("overlay").style.display = "block";539 document.getElementById("details-popup").style.display = "block";540 }541 542 // 關閉詳情視窗543 function closeDetails() {544 document.getElementById("overlay").style.display = "none";545 document.getElementById("details-popup").style.display = "none";546 }547 548 // 刪除報告549 async function deleteReport(id, index) {550 if (confirm("確定要刪除此回報嗎？")) {551 const { error } = await supabase552 .from('reports')553 .delete()554 .eq('id', id);555 556 if (error) {557 alert("刪除失敗: " + error.message);558 return;559 }560 561 reports.splice(index, 1);562 renderReports();563 alert("回報已刪除！");564 }565 }566 567 // 回到頂部按鈕功能568 function scrollToTop() {569 window.scrollTo({ top: 0, behavior: 'smooth' });570 }571 </script>572</body>573 574</html>