Yats house ~ 雅子の不動產租售
歡迎來到雅子の不動產租售，有需要在台南買屋賣屋的朋友，可以參考本站物件。 讓雅子來幫您繫上，您和房子的緣分！！
搜尋此網誌
我的客戶管理系統
🔒 雅子 CRM 系統
系統保護中，請驗證身份
登入系統
密碼錯誤
<!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>CRM 系統</title> <style> :root{--bg:#f7f4ef;--accent:#4f8bfd;--accent-dark:#3a6fe0;--tag-sell:#ff6b6b;--tag-buy:#51cf66;--tag-co:#339af0;--card-shadow:0 8px 26px rgba(2,6,23,0.08);--max-width:980px}html,body{height:100%;margin:0;font-family:"Segoe UI","Noto Sans TC",system-ui,-apple-system;font-size:15px}body{background:var(--bg) url('https://www.toptal.com/designers/subtlepatterns/uploads/leaves-pattern.png') fixed;background-size:420px;color:#222;padding:0}.wrapper{max-width:var(--max-width);margin:0 auto;padding:18px 18px 96px}.top-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}.logo-banner{width:720px;height:128px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 10px 26px rgba(2,6,23,0.06);display:flex;align-items:center;justify-content:center}.logo-banner img{width:720px;height:128px;object-fit:cover;display:block}.app-title{font-weight:700;font-size:18px;text-align:center}.row{width:100%;display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.row.center{justify-content:center}.row.space{justify-content:space-between;align-items:center}.count-stats{display:flex;gap:12px;align-items:center;font-size:14px;color:#555;margin-left:auto}.count-item{display:flex;align-items:center;gap:4px;padding:4px 8px;background:rgba(255,255,255,0.7);border-radius:8px;border:1px solid rgba(0,0,0,0.08)}.count-badge{padding:2px 6px;border-radius:999px;font-size:12px;font-weight:700;color:white}.count-sell{background:var(--tag-sell)}.count-buy{background:var(--tag-buy)}.count-co{background:var(--tag-co)}.count-total{background:#666}#searchInput{flex:1;min-width:160px;padding:12px;border-radius:14px;border:1px solid #e6e2dd;background:white;box-shadow:0 6px 18px rgba(2,6,23,0.04)}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{padding:8px 12px;border-radius:999px;border:none;background:white;cursor:pointer;box-shadow:0 6px 14px rgba(2,6,23,0.04);font-size:14px;white-space:nowrap}.filter-btn.active{background:var(--accent);color:white;box-shadow:0 10px 22px rgba(79,139,253,0.16)}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-size:14px;white-space:nowrap}.btn.primary{background:linear-gradient(135deg,#6ea8ff,var(--accent));color:white;font-weight:600;box-shadow:0 10px 22px rgba(0,0,0,0.12)}.btn.ghost{background:white;box-shadow:0 8px 18px rgba(2,6,23,0.04)}.input-file{display:none}.btn-small{padding:4px 8px;font-size:12px;border-radius:6px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:8px}.card{position:relative;padding:18px;border-radius:16px;background:linear-gradient(135deg,#fff,#fbfaf8);box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.75);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease}.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.12)}.card .tag{position:absolute;right:12px;top:12px;padding:6px 12px;border-radius:999px;color:white;font-weight:700;font-size:12px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}.card .name{font-size:1.4rem;font-weight:800;margin-bottom:6px}.card .phone{color:#444;font-size:0.95rem}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:24px;gap:12px;flex-wrap:wrap}.page-info{font-size:14px;color:#666;padding:8px 12px;background:white;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}.page-btn{padding:10px 16px;border-radius:10px;border:none;background:white;cursor:pointer;font-weight:600;color:#444;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all .2s ease;min-width:40px;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled){background:var(--accent);color:white;transform:translateY(-2px);box-shadow:0 6px 16px rgba(79,139,253,0.2)}.page-btn:disabled{opacity:0.5;cursor:not-allowed}.page-btn.active{background:var(--accent);color:white;box-shadow:0 6px 16px rgba(79,139,253,0.2)}.page-numbers{display:flex;gap:6px}#detailPage{position:fixed;inset:0;display:none;flex-direction:column;z-index:120;background:#fff;overflow:auto;font-size:1.5em}#detailPage.show{display:flex}.detail-top{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:white;padding:24px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;position:relative;min-height:180px}.detail-top .name{font-size:2.25rem;font-weight:800;text-align:center;margin-top:10px}.detail-top .sub{opacity:0.95;font-size:1.5rem;text-align:center}.detail-top .tag{margin-top:6px;padding:9px 18px;border-radius:999px;font-weight:800;display:inline-block;font-size:1.2rem}.detail-body{padding:24px 20px;flex:1;max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box}.detail-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1200px;margin:0 auto}.detail-section{background:#f9f9f9;border-radius:16px;padding:24px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}.detail-section h3{margin-top:0;margin-bottom:20px;font-size:1.5rem;color:#333;border-bottom:2px solid var(--accent);padding-bottom:8px}.field{margin-bottom:20px}.field label{display:block;color:#666;margin-bottom:9px;font-size:1.2rem;font-weight:600}.field input[type="text"],.field x-area,.field select{width:100%;padding:15px;border-radius:12px;border:1.5px solid #e8e6e3;box-sizing:border-box;font-size:1.2rem;background:white;transition:border-color .2s}.field input[type="text"]:focus,.field x-area:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,139,253,0.1)}.field x-area{min-height:120px;resize:vertical;font-family:inherit;line-height:1.5}.type-input-wrapper{display:flex;gap:12px;align-items:center}.detail-actions{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:20px;border-top:1px solid #eee}.detail-top-buttons{display:flex;gap:12px;position:absolute;top:20px;width:100%;padding:0 20px;box-sizing:border-box;justify-content:space-between}.detail-top-buttons .btn{background:rgba(255,255,255,0.15);color:white;border-radius:12px;padding:12px 16px;font-size:1.2rem;border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(10px);transition:all .2s}.detail-top-buttons .btn:hover{background:rgba(255,255,255,0.25);transform:translateY(-2px)}.call-btn-wrapper{display:flex;gap:12px}.call-btn-wrapper .btn.primary{padding:15px 24px;font-size:1.2rem;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}#btnDelete{background:#ff6b6b;color:white;padding:12px 24px;font-size:1.2rem;border:none;border-radius:12px;cursor:pointer;transition:all .2s}#btnDelete:hover{background:#ff5252;transform:translateY(-2px)}#editingHint{font-size:1.2rem;color:#666;font-style:italic}@media(min-width:1200px){.detail-body{padding:30px 40px}.detail-content{grid-template-columns:1fr 1fr;gap:30px}.detail-section:last-child:nth-child(odd){grid-column:1/-1}}@media(max-width:1199px) and (min-width:768px){.detail-body{padding:24px 30px}.detail-content{grid-template-columns:1fr;max-width:800px}}@media(max-width:767px){.logo-banner{width:100%;max-width:92%;height:auto;aspect-ratio:720/128;margin:0 auto}.logo-banner img{width:100%;height:auto;aspect-ratio:720/128}.app-title{font-size:16px}.cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.card{padding:12px;min-height:100px}.card .name{font-size:1.2rem;margin-bottom:4px}.card .phone{font-size:0.85rem}.card .tag{font-size:10px;padding:4px 8px;right:8px;top:8px}.row{gap:8px;margin-bottom:8px}#searchInput{padding:10px;font-size:14px;width:100%}.filters{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;gap:6px;margin-bottom:4px}.filter-btn{padding:6px 10px;font-size:13px;flex-shrink:0}.actions{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;gap:6px;margin-top:4px}.actions .btn{padding:8px 10px;font-size:13px;flex-shrink:0}.count-stats{display:none}#detailPage{font-size:1.3em}.detail-top{min-height:160px;padding:20px 16px;gap:8px}.detail-top .name{font-size:1.8rem;margin-top:20px}.detail-top .sub{font-size:1.2rem}.detail-top .tag{font-size:1rem;padding:6px 12px}.detail-body{padding:20px 16px}.detail-content{display:block}.detail-section{margin-bottom:20px;padding:20px}.field{margin-bottom:16px}.field input[type="text"],.field x-area,.field select{padding:12px;font-size:1.1rem}.field label{font-size:1.1rem;margin-bottom:6px}.detail-section h3{font-size:1.3rem}.detail-top-buttons{flex-direction:row;justify-content:space-between;top:16px;padding:0 16px}.detail-top-buttons .btn{padding:10px 14px;font-size:1rem}.row-inline,.type-input-wrapper{flex-direction:column;align-items:stretch;gap:8px}.type-input-wrapper select,.type-input-wrapper input{width:100%}.call-btn-wrapper{flex-direction:column}.call-btn-wrapper .btn.primary{width:100%;padding:12px;font-size:1.1rem}.detail-actions{flex-direction:column;gap:16px;align-items:stretch}#btnDelete{width:100%;padding:12px;font-size:1.1rem}.pagination-controls{flex-direction:column;gap:8px}.page-numbers{flex-wrap:wrap;justify-content:center}.page-btn{padding:8px 12px;font-size:13px}}@media(max-width:360px){.cards{grid-template-columns:1fr}.filter-btn{padding:5px 8px;font-size:12px}.actions .btn{padding:6px 8px;font-size:12px}} /* Image styles */ .image-field{margin-bottom:20px}.image-field label{display:block;color:#666;margin-bottom:9px;font-size:1.2rem;font-weight:600}.image-preview-container{position:relative;width:100%;height:384px;border:2px dashed #e8e6e3;border-radius:12px;background:#f9f9f9;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:border-color .2s;cursor:pointer}.image-preview-container:hover{border-color:var(--accent)}.image-preview{max-width:100%;max-height:100%;object-fit:contain;display:none;cursor:zoom-in;transition:transform .3s ease}.image-preview:hover{transform:scale(1.02)}.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;padding:20px;text-align:center}.image-placeholder-icon{font-size:48px;margin-bottom:12px;opacity:0.5}.image-placeholder-text{font-size:1rem;margin-bottom:4px}.image-placeholder-subtext{font-size:0.9rem;color:#777}.image-input-wrapper{display:flex;gap:8px;width:100%}.image-input-wrapper input{flex:1;padding:12px;border-radius:8px;border:1.5px solid #e8e6e3;font-size:1rem;box-sizing:border-box}.image-input-wrapper input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,139,253,0.1)}.image-actions{display:flex;gap:8px}.image-action-btn{padding:10px 16px;border-radius:8px;border:1.5px solid #e8e6e3;background:white;cursor:pointer;font-size:1rem;white-space:nowrap;transition:all .2s}.image-action-btn.primary{background:linear-gradient(135deg,#6ea8ff,var(--accent));color:white;border-color:var(--accent)}.image-action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}#imageModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.9);z-index:200;backdrop-filter:blur(5px)}#imageModal.show{display:flex}.image-modal-content{position:relative;width:90%;height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center}.image-modal-img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .3s ease;cursor:grab}.image-modal-img:active{cursor:grabbing}.image-modal-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:12px;background:rgba(0,0,0,0.7);padding:12px 20px;border-radius:30px;backdrop-filter:blur(10px)}.image-modal-btn{width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,0.2);color:white;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.image-modal-btn:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.image-modal-close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,0.2);color:white;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.image-modal-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.image-modal-info{position:absolute;top:20px;left:20px;color:white;font-size:14px;background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:20px;backdrop-filter:blur(5px)}.image-modal-scale{position:absolute;top:70px;left:20px;color:white;font-size:14px;background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:20px;backdrop-filter:blur(5px)}.image-modal-fullsize{position:absolute;top:120px;left:20px;color:white;font-size:14px;background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:20px;backdrop-filter:blur(5px)}@media(max-width:767px){.image-preview-container{height:250px}.image-input-wrapper{flex-direction:column}.image-actions{width:100%;justify-content:stretch}.image-action-btn{flex:1;text-align:center}.image-placeholder-icon{font-size:36px}.image-modal-controls{bottom:10px;padding:8px 16px}.image-modal-btn{width:40px;height:40px;font-size:18px}.image-modal-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}.image-modal-info,.image-modal-scale,.image-modal-fullsize{font-size:12px;padding:6px 12px;top:10px;left:10px}.image-modal-scale{top:50px}.image-modal-fullsize{top:85px}} /* Settings, Merge, Categories */ #previewModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.36);z-index:140}#previewModal.show{display:flex}.preview-card{width:92%;max-width:1000px;background:white;border-radius:14px;padding:16px;box-shadow:0 12px 36px rgba(2,6,23,0.24);max-height:80vh;overflow:auto}.preview-table{width:100%;border-collapse:collapse;margin-top:10px}.preview-table th,.preview-table td{border:1px solid #eee;padding:8px;font-size:13px}.preview-table th{background:#fafafa}#settingsModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.36);z-index:150}#settingsModal.show{display:flex}.settings-card{width:92%;max-width:640px;background:white;border-radius:12px;padding:16px;box-shadow:0 12px 36px rgba(2,6,23,0.24)}.input-url{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd}#mergeModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.36);z-index:160}#mergeModal.show{display:flex}.merge-card{width:92%;max-width:800px;background:white;border-radius:14px;padding:16px;box-shadow:0 12px 36px rgba(2,6,23,0.24);max-height:80vh;overflow:auto}.merge-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #eee;border-radius:8px;margin-bottom:8px}.merge-check{width:20px;height:20px}.merge-info{flex:1}.merge-info strong{display:block;margin-bottom:2px}.merge-info small{color:#666;font-size:12px}.merge-type{padding:4px 8px;border-radius:6px;color:white;font-size:12px;font-weight:600}.merge-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}#categoriesModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.36);z-index:170}#categoriesModal.show{display:flex}.categories-card{width:92%;max-width:500px;background:white;border-radius:14px;padding:16px;box-shadow:0 12px 36px rgba(2,6,23,0.24);max-height:80vh;overflow:auto}.category-item{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #eee;border-radius:8px;margin-bottom:8px}.category-color{width:24px;height:24px;border-radius:6px;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,0.1)}.category-name{flex:1;font-weight:500}.category-count{font-size:12px;color:#666;background:#f0f0f0;padding:2px 8px;border-radius:10px}.category-actions{display:flex;gap:4px}.color-picker-wrapper{display:flex;align-items:center;gap:8px;margin-top:8px}.color-picker-label{font-size:12px;color:#666}.color-picker-input{width:40px;height:40px;border:none;border-radius:8px;cursor:pointer;border:2px solid #eee} </style> </head> <body> <div class="wrapper"><div class="top-area" role="banner"><div id="logoBanner" class="logo-banner" aria-hidden="true"><img id="centerLogo" src="" alt="LOGO" style="display:none"></div><div class="app-title" id="appTitle">南北房屋夢時代 ~ 陳雅雯用</div></div><div class="row"><input id="searchInput" placeholder="搜尋姓名 / 電話 / 備註..." aria-label="搜尋姓名或電話或備註"></div><div class="row"><div class="filters" role="tablist" aria-label="分類" id="filterButtons"><button class="filter-btn active" id="fAll" role="tab">全部</button></div><div class="count-stats" id="countStats"><div class="count-item"><span>總數</span><span id="countTotal" class="count-badge count-total">0</span></div></div></div><div class="row"><div class="actions" style="margin-left:0"><button id="btnSettings" class="btn ghost" title="設定 LOGO">⚙ 設定</button><button id="btnCheckDuplicates" class="btn ghost">🔍 檢查重複</button><button id="btnManageCategories" class="btn ghost">🏷️ 管理分類</button><button id="btnAdd" class="btn primary">＋ 新增</button><button id="btnExport" class="btn ghost">匯出 CSV</button><label class="btn ghost" style="cursor:pointer">匯入 CSV<input id="fileImport" class="input-file" type="file" accept=".csv,text/csv" /></label></div></div><div class="cards" id="cards" aria-live="polite"></div><div class="pagination-controls" id="paginationControls" style="display:none"><button id="btnFirstPage" class="page-btn">⏮ 第一頁</button><button id="btnPrevPage" class="page-btn">◀ 上一頁</button><div class="page-numbers" id="pageNumbers"></div><button id="btnNextPage" class="page-btn">下一頁 ▶</button><button id="btnLastPage" class="page-btn">最後一頁 ⏭</button><div class="page-info" id="pageInfo">第 1 頁，共 1 頁 (0 筆)</div></div></div><div id="detailPage" aria-hidden="true"><div class="detail-top" id="detailTop"><div class="detail-top-buttons"><button id="btnBack" class="btn">← 返回</button><button id="btnDone" class="btn">完成</button></div><div class="name" id="topName">—</div><div class="sub" id="topSub">—</div><div id="topTag" class="tag">—</div></div><div class="detail-body"><div class="detail-content"><div class="detail-section"><h3>基本資訊</h3><div class="field"><label>分類</label><div class="type-input-wrapper"><select id="dType"></select><input id="dTypeNew" type="text" placeholder="新增分類..." style="display:none" /><button id="btnAddType" class="btn-small ghost" style="white-space:nowrap">＋ 新增</button><button id="btnCancelType" class="btn-small" style="display:none; background:#f0f0f0; white-space:nowrap">取消</button></div></div><div class="field"><label>姓名</label><input id="dName" type="text" /></div><div class="field"><label>電話</label><div class="call-btn-wrapper"><input id="dPhone" type="text" /><a id="callBtn" class="btn primary" style="text-decoration:none;color:white;white-space:nowrap">📞 撥出</a></div></div></div><div class="detail-section"><h3>備註資訊</h3><div class="field"><label>備註欄一</label><x-area id="dNote1" placeholder="輸入備註..."></x-area></div><div class="field"><label>備註欄二</label><x-area id="dNote2" placeholder="輸入備註..."></x-area></div><div class="field"><label>備註欄三</label><x-area id="dNote3" placeholder="輸入備註..."></x-area></div><div class="image-field"><label>圖片連結一 <span style="font-size:0.8em;color:#777;font-weight:normal">(可選)</span></label><div class="image-preview-container" id="imagePreview1" data-image-index="1"><div class="image-placeholder"><div class="image-placeholder-icon">🖼️</div><div class="image-placeholder-text">尚未設定圖片</div><div class="image-placeholder-subtext">可選：支援外鏈圖片</div><div class="image-placeholder-subtext">點擊預覽區可放大查看</div></div><img id="previewImg1" class="image-preview" alt="圖片預覽" data-image-index="1"></div><div class="image-input-wrapper"><input id="dImage1" type="text" placeholder="輸入圖片網址 (可選)" /><div class="image-actions"><button id="btnPreviewImage1" class="image-action-btn">預覽</button><button id="btnClearImage1" class="image-action-btn">清除</button></div></div></div><div class="image-field"><label>圖片連結二 <span style="font-size:0.8em;color:#777;font-weight:normal">(可選)</span></label><div class="image-preview-container" id="imagePreview2" data-image-index="2"><div class="image-placeholder"><div class="image-placeholder-icon">🖼️</div><div class="image-placeholder-text">尚未設定圖片</div><div class="image-placeholder-subtext">可選：支援外鏈圖片</div><div class="image-placeholder-subtext">點擊預覽區可放大查看</div></div><img id="previewImg2" class="image-preview" alt="圖片預覽" data-image-index="2"></div><div class="image-input-wrapper"><input id="dImage2" type="text" placeholder="輸入圖片網址 (可選)" /><div class="image-actions"><button id="btnPreviewImage2" class="image-action-btn">預覽</button><button id="btnClearImage2" class="image-action-btn">清除</button></div></div></div></div></div><div class="detail-actions"><div class="small-muted" id="editingHint">—</div><div style="display:flex;gap:12px"><button id="btnDelete" class="btn">🗑️ 刪除聯絡人</button></div></div></div></div><div id="imageModal" aria-hidden="true"><div class="image-modal-content"><img id="imageModalImg" class="image-modal-img" alt="全屏圖片" /><div id="imageModalInfo" class="image-modal-info"></div><div id="imageModalScale" class="image-modal-scale">縮放: 100%</div><div id="imageModalFullsize" class="image-modal-fullsize"></div><button id="imageModalClose" class="image-modal-close">×</button><div class="image-modal-controls"><button id="imageModalZoomIn" class="image-modal-btn" title="放大">+</button><button id="imageModalZoomOut" class="image-modal-btn" title="縮小">−</button><button id="imageModalReset" class="image-modal-btn" title="重置">⟲</button><button id="imageModalRotate" class="image-modal-btn" title="旋轉">↻</button><button id="imageModalDownload" class="image-modal-btn" title="下載">↓</button></div></div></div><div id="previewModal" aria-hidden="true"><div class="preview-card" role="dialog" aria-modal="true"><div style="display:flex;align-items:center;justify-content:space-between"><div><h3 id="previewTitle" style="margin:0">匯出前預覽</h3><div id="previewSub" style="color:#666;font-size:13px;margin-top:6px">以下為即將匯出的資料（CSV 欄位：id,name,phone,type,note1,note2,note3,image1,image2）</div></div><div style="display:flex;gap:8px"><button id="btnCancelPreview" class="btn">取消</button><button id="btnConfirmPreview" class="btn primary">確認匯出</button></div></div><div style="overflow:auto;max-height:60vh;margin-top:12px"><table class="preview-table" id="previewTable"></table></div></div></div><div id="settingsModal" aria-hidden="true"><div class="settings-card" role="dialog" aria-modal="true"><h3 style="margin:0 0 8px 0">設定 — 首頁 LOGO（圖片連結）</h3><div style="color:#666;margin-bottom:8px">貼上圖片網址 (http(s)://...)。系統會把 LOGO 強制顯示為 <strong>720×128 px（cover 模式，會裁切以填滿）</strong>。</div><div style="display:flex;gap:8px;align-items:center;margin-bottom:10px"><input id="logoUrlInput" class="input-url" placeholder="https://example.com/logo.jpg" /><button id="btnPreviewLogo" class="btn">預覽</button></div><div style="margin-bottom:10px"><div style="border:1px dashed #eee;padding:8px;border-radius:8px;display:flex;align-items:center;gap:10px"><div style="width:220px;display:flex;align-items:center;justify-content:center"><img id="logoPreviewImg" src="" alt="logo preview" style="width:220px;height:64px;object-fit:cover;border-radius:6px;display:none" /></div><div style="flex:1;color:#666">預覽區（縮小顯示）。若無法顯示，該圖片來源可能不允許外部載入（CORS/防盜鏈）。</div></div></div><div style="display:flex;justify-content:flex-end;gap:8px"><button id="btnRemoveLogo" class="btn">移除 LOGO</button><button id="btnCloseSettings" class="btn">取消</button><button id="btnSaveLogo" class="btn primary">儲存設定</button></div></div></div><div id="mergeModal" aria-hidden="true"><div class="merge-card" role="dialog" aria-modal="true"><h3 style="margin:0 0 12px 0">合併重複聯絡人</h3><div id="mergeMessage" style="color:#666;margin-bottom:12px">系統發現以下可能重複的聯絡人。請選擇要合併的項目：</div><div id="mergeList" style="max-height:50vh;overflow:auto;margin-bottom:16px"></div><div class="merge-actions"><button id="btnCancelMerge" class="btn">取消</button><button id="btnSelectAllMerge" class="btn ghost">全選</button><button id="btnMergeSelected" class="btn primary">合併選取的項目</button></div></div></div><div id="categoriesModal" aria-hidden="true"><div class="categories-card" role="dialog" aria-modal="true"><h3 style="margin:0 0 12px 0">管理分類</h3><div style="color:#666;margin-bottom:12px">管理您的聯絡人分類。每個分類可以設定顏色，系統會自動計算該分類的聯絡人數量。</div><div id="categoriesList" style="max-height:40vh;overflow:auto;margin-bottom:16px"></div><div style="background:#f9f9f9;padding:12px;border-radius:8px;margin-bottom:16px"><h4 style="margin:0 0 8px 0">新增分類</h4><div style="display:flex;gap:8px;align-items:center"><input id="newCategoryName" type="text" placeholder="分類名稱" style="flex:1;padding:8px;border-radius:6px;border:1px solid #ddd" /><div class="color-picker-wrapper"><span class="color-picker-label">顏色：</span><input id="newCategoryColor" type="color" class="color-picker-input" value="#4f8bfd" title="選擇分類顏色" /></div><button id="btnAddCategory" class="btn primary btn-small">新增</button></div><div style="font-size:12px;color:#666;margin-top:8px">提示：預設分類（賣方、買方、同事）無法刪除，但可以修改顏色。</div></div><div style="display:flex;justify-content:flex-end;gap:8px"><button id="btnCloseCategories" class="btn">關閉</button></div></div></div> <script> const STORAGE_KEY='crm_contacts_local_v1';const LOGO_KEY='crm_logo_url_v1';const CATEGORIES_KEY='crm_categories_v1';const uid=()=>Date.now().toString(36)+Math.floor(Math.random()*9999).toString(36);function esc(s){return String(s||'').replace(/[&<>"]/g,ch=>({'&':'&','<':'<','>':'>','"':'"'}[ch]))}const ITEMS_PER_PAGE=50;let currentPage=1;let totalPages=1;let contacts=[];let currentFilter='all';let editingId=null;let importBuffer=[];let categories=[];let isAddingNewType=false;let currentImageScale=1;let currentImageRotation=0;let currentImageIndex=1;let isDragging=false;let dragStartX=0;let dragStartY=0;const cardsEl=document.getElementById('cards');const searchInput=document.getElementById('searchInput');const filterButtons=document.getElementById('filterButtons');const fAll=document.getElementById('fAll');const btnSettings=document.getElementById('btnSettings'),btnAdd=document.getElementById('btnAdd'),btnExport=document.getElementById('btnExport'),fileImport=document.getElementById('fileImport');const btnCheckDuplicates=document.getElementById('btnCheckDuplicates');const btnManageCategories=document.getElementById('btnManageCategories');const countStats=document.getElementById('countStats');const countTotal=document.getElementById('countTotal');const paginationControls=document.getElementById('paginationControls');const btnFirstPage=document.getElementById('btnFirstPage');const btnPrevPage=document.getElementById('btnPrevPage');const btnNextPage=document.getElementById('btnNextPage');const btnLastPage=document.getElementById('btnLastPage');const pageNumbers=document.getElementById('pageNumbers');const pageInfo=document.getElementById('pageInfo');const detailPage=document.getElementById('detailPage'),topName=document.getElementById('topName'),topSub=document.getElementById('topSub'),topTag=document.getElementById('topTag');const btnBack=document.getElementById('btnBack'),btnDone=document.getElementById('btnDone'),btnDelete=document.getElementById('btnDelete');const dType=document.getElementById('dType'),dTypeNew=document.getElementById('dTypeNew'),btnAddType=document.getElementById('btnAddType'),btnCancelType=document.getElementById('btnCancelType'),dName=document.getElementById('dName'),dPhone=document.getElementById('dPhone'),dNote1=document.getElementById('dNote1'),dNote2=document.getElementById('dNote2'),dNote3=document.getElementById('dNote3'),callBtn=document.getElementById('callBtn'),editingHint=document.getElementById('editingHint');const dImage1=document.getElementById('dImage1');const dImage2=document.getElementById('dImage2');const previewImg1=document.getElementById('previewImg1');const previewImg2=document.getElementById('previewImg2');const btnPreviewImage1=document.getElementById('btnPreviewImage1');const btnPreviewImage2=document.getElementById('btnPreviewImage2');const btnClearImage1=document.getElementById('btnClearImage1');const btnClearImage2=document.getElementById('btnClearImage2');const imagePreview1=document.getElementById('imagePreview1');const imagePreview2=document.getElementById('imagePreview2');const imageModalEl=document.getElementById('imageModal');const imageModalImg=document.getElementById('imageModalImg');const imageModalClose=document.getElementById('imageModalClose');const imageModalZoomIn=document.getElementById('imageModalZoomIn');const imageModalZoomOut=document.getElementById('imageModalZoomOut');const imageModalReset=document.getElementById('imageModalReset');const imageModalRotate=document.getElementById('imageModalRotate');const imageModalDownload=document.getElementById('imageModalDownload');const imageModalInfo=document.getElementById('imageModalInfo');const imageModalScale=document.getElementById('imageModalScale');const imageModalFullsize=document.getElementById('imageModalFullsize');const previewModal=document.getElementById('previewModal'),previewTable=document.getElementById('previewTable'),previewTitle=document.getElementById('previewTitle'),previewSub=document.getElementById('previewSub'),btnCancelPreview=document.getElementById('btnCancelPreview'),btnConfirmPreview=document.getElementById('btnConfirmPreview');const settingsModal=document.getElementById('settingsModal'),logoUrlInput=document.getElementById('logoUrlInput'),btnPreviewLogo=document.getElementById('btnPreviewLogo'),logoPreviewImg=document.getElementById('logoPreviewImg'),btnSaveLogo=document.getElementById('btnSaveLogo'),btnCloseSettings=document.getElementById('btnCloseSettings'),btnRemoveLogo=document.getElementById('btnRemoveLogo');const centerLogo=document.getElementById('centerLogo'),logoBanner=document.getElementById('logoBanner');const mergeModal=document.getElementById('mergeModal');const mergeList=document.getElementById('mergeList');const mergeMessage=document.getElementById('mergeMessage');const btnCancelMerge=document.getElementById('btnCancelMerge');const btnSelectAllMerge=document.getElementById('btnSelectAllMerge');const btnMergeSelected=document.getElementById('btnMergeSelected');const categoriesModal=document.getElementById('categoriesModal');const categoriesList=document.getElementById('categoriesList');const newCategoryName=document.getElementById('newCategoryName');const newCategoryColor=document.getElementById('newCategoryColor');const btnAddCategory=document.getElementById('btnAddCategory');const btnCloseCategories=document.getElementById('btnCloseCategories');function loadLocal(){try{const raw=localStorage.getItem(STORAGE_KEY);contacts=raw?JSON.parse(raw):[]}catch(e){contacts=[]}}function saveLocal(){try{localStorage.setItem(STORAGE_KEY,JSON.stringify(contacts))}catch(e){console.error(e)}}function loadLogo(){try{return localStorage.getItem(LOGO_KEY)||''}catch(e){return''}}function saveLogo(url){try{if(url)localStorage.setItem(LOGO_KEY,url);else localStorage.removeItem(LOGO_KEY)}catch(e){console.error(e)}}function loadCategories(){try{const raw=localStorage.getItem(CATEGORIES_KEY);if(raw){categories=JSON.parse(raw)}else{categories=[{name:'賣方',color:'#ff6b6b',isDefault:true},{name:'買方',color:'#51cf66',isDefault:true},{name:'同事',color:'#339af0',isDefault:true}];saveCategories()}}catch(e){console.error(e);categories=[{name:'賣方',color:'#ff6b6b',isDefault:true},{name:'買方',color:'#51cf66',isDefault:true},{name:'同事',color:'#339af0',isDefault:true}]}}function saveCategories(){try{localStorage.setItem(CATEGORIES_KEY,JSON.stringify(categories))}catch(e){console.error(e)}}function getCategoryColor(categoryName){const category=categories.find(c=>c.name===categoryName);return category?category.color:'#666666'}function getCategoryCount(categoryName){return contacts.filter(c=>c.type===categoryName).length}function updateTypeSelect(){dType.innerHTML='';categories.forEach(category=>{const option=document.createElement('option');option.value=category.name;option.textContent=category.name;option.style.color=category.color;option.style.fontWeight='600';dType.appendChild(option)})}function updateFilterButtons(){const existingButtons=filterButtons.querySelectorAll('.filter-btn:not(#fAll)');existingButtons.forEach(btn=>btn.remove());categories.forEach(category=>{const button=document.createElement('button');button.className='filter-btn';button.id=`f${category.name}`;button.setAttribute('role','tab');button.textContent=category.name;button.style.color=category.color;button.style.border=`1px solid ${category.color}40`;button.addEventListener('click',()=>{document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));button.classList.add('active');button.style.background=category.color;button.style.color='white';button.style.boxShadow=`0 10px 22px ${category.color}40`;currentFilter=category.name;currentPage=1;renderList()});filterButtons.appendChild(button)});fAll.addEventListener('click',()=>{document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));fAll.classList.add('active');fAll.style.background='';fAll.style.color='';fAll.style.boxShadow='';fAll.style.border='';currentFilter='all';currentPage=1;renderList()})}function updateCountStats(){const totalCount=contacts.length;countTotal.textContent=totalCount;const countItems=countStats.querySelectorAll('.count-item:not(:last-child)');countItems.forEach(item=>item.remove());categories.forEach(category=>{const count=getCategoryCount(category.name);if(count>0){const countItem=document.createElement('div');countItem.className='count-item';countItem.innerHTML=`<span>${category.name}</span><span class="count-badge" style="background: ${category.color}">${count}</span>`;countStats.insertBefore(countItem,countTotal.parentElement)}})}function ensureSample(){if(!localStorage.getItem(STORAGE_KEY)){contacts=[{id:uid(),name:'林忠斌',phone:'0912-345-678',type:'賣方',note1:'樣本A',note2:'',note3:'',image1:'',image2:''},{id:uid(),name:'李怡君',phone:'0987-654-321',type:'買方',note1:'樣本B',note2:'',note3:'',image1:'',image2:''},{id:uid(),name:'陳雅雯',phone:'0911-222-333',type:'同事',note1:'同事',note2:'',note3:'',image1:'',image2:''}];saveLocal()}}function getFilteredContacts(){const q=(searchInput.value||'').trim().toLowerCase();return contacts.filter(c=>{if(currentFilter!=='all'&&c.type!==currentFilter)return false;if(!q)return true;return[c.name,c.phone,c.note1,c.note2,c.note3].some(v=>(v||'').toLowerCase().includes(q))})}function updatePagination(totalItems){totalPages=Math.max(1,Math.ceil(totalItems/ITEMS_PER_PAGE));if(currentPage>totalPages){currentPage=totalPages}if(totalPages>1){paginationControls.style.display='flex'}else{paginationControls.style.display='none'}btnFirstPage.disabled=currentPage===1;btnPrevPage.disabled=currentPage===1;btnNextPage.disabled=currentPage===totalPages;btnLastPage.disabled=currentPage===totalPages;updatePageNumbers();const startItem=(currentPage-1)*ITEMS_PER_PAGE+1;const endItem=Math.min(currentPage*ITEMS_PER_PAGE,totalItems);pageInfo.textContent=`第 ${currentPage} 頁，共 ${totalPages} 頁 (${startItem}-${endItem} / ${totalItems} 筆)`}function updatePageNumbers(){pageNumbers.innerHTML='';let startPage=Math.max(1,currentPage-2);let endPage=Math.min(totalPages,startPage+4);if(endPage-startPage<4&&startPage>1){startPage=Math.max(1,endPage-4)}for(let i=startPage;i<=endPage;i++){const pageBtn=document.createElement('button');pageBtn.className='page-btn';if(i===currentPage){pageBtn.classList.add('active')}pageBtn.textContent=i;pageBtn.addEventListener('click',()=>{currentPage=i;renderList()});pageNumbers.appendChild(pageBtn)}if(startPage>1){const firstBtn=document.createElement('button');firstBtn.className='page-btn';firstBtn.textContent='1';firstBtn.addEventListener('click',()=>{currentPage=1;renderList()});pageNumbers.insertBefore(firstBtn,pageNumbers.firstChild);if(startPage>2){const ellipsis=document.createElement('span');ellipsis.textContent='...';ellipsis.style.padding='0 8px';ellipsis.style.color='#666';pageNumbers.insertBefore(ellipsis,pageNumbers.children[1])}}if(endPage<totalPages){if(endPage<totalPages-1){const ellipsis=document.createElement('span');ellipsis.textContent='...';ellipsis.style.padding='0 8px';ellipsis.style.color='#666';pageNumbers.appendChild(ellipsis)}const lastBtn=document.createElement('button');lastBtn.className='page-btn';lastBtn.textContent=totalPages;lastBtn.addEventListener('click',()=>{currentPage=totalPages;renderList()});pageNumbers.appendChild(lastBtn)}}function getCurrentPageContacts(filteredContacts){const startIndex=(currentPage-1)*ITEMS_PER_PAGE;const endIndex=startIndex+ITEMS_PER_PAGE;return filteredContacts.slice(startIndex,endIndex)}function renderList(){const filteredContacts=getFilteredContacts();const currentPageContacts=getCurrentPageContacts(filteredContacts);cardsEl.innerHTML='';currentPageContacts.forEach(c=>{const tagColor=getCategoryColor(c.type);const div=document.createElement('div');div.className='card';div.innerHTML=`<div class="tag" style="background: ${tagColor}">${esc(c.type)}</div><div class="name">${esc(c.name||'—')}</div><div class="phone">${esc(c.phone||'—')}</div>`;div.addEventListener('click',()=>openDetail(c.id));cardsEl.appendChild(div)});if(filteredContacts.length===0){const noDataDiv=document.createElement('div');noDataDiv.style.textAlign='center';noDataDiv.style.padding='40px 20px';noDataDiv.style.color='#666';noDataDiv.style.gridColumn='1 / -1';noDataDiv.innerHTML=`<div style="font-size: 48px; margin-bottom: 16px; opacity: 0.3">📇</div><div style="font-size: 18px; margin-bottom: 8px; font-weight: 600">暫無聯絡人</div><div style="font-size: 14px;">點擊上方「新增」按鈕開始添加聯絡人</div>`;cardsEl.appendChild(noDataDiv)}updateCountStats();updatePagination(filteredContacts.length)}function toggleAddTypeMode(){isAddingNewType=!isAddingNewType;if(isAddingNewType){dType.style.display='none';dTypeNew.style.display='block';btnAddType.style.display='none';btnCancelType.style.display='block';dTypeNew.focus()}else{dType.style.display='block';dTypeNew.style.display='none';btnAddType.style.display='block';btnCancelType.style.display='none';dTypeNew.value=''}}function addNewCategory(){const newType=dTypeNew.value.trim();if(!newType){alert('請輸入分類名稱');return}if(categories.some(c=>c.name===newType)){alert('此分類已存在');return}const randomColor=`#${Math.floor(Math.random()*16777215).toString(16)}`;categories.push({name:newType,color:randomColor,isDefault:false});saveCategories();updateTypeSelect();updateFilterButtons();updateCountStats();dType.value=newType;toggleAddTypeMode();if(editingId){doSave()}}function showCategoriesModal(){renderCategoriesList();categoriesModal.classList.add('show');categoriesModal.setAttribute('aria-hidden','false')}function renderCategoriesList(){categoriesList.innerHTML='';if(categories.length===0){categoriesList.innerHTML='<div style="text-align:center;padding:20px;color:#666">尚無分類</div>';return}categories.forEach((category,index)=>{const count=getCategoryCount(category.name);const itemDiv=document.createElement('div');itemDiv.className='category-item';itemDiv.innerHTML=`<div class="category-color" style="background: ${category.color}"></div><div class="category-name">${esc(category.name)}</div><div class="category-count">${count} 人</div><div class="category-actions"><input type="color" class="color-picker-input" value="${category.color}" data-index="${index}" title="修改顏色" />${!category.isDefault?`<button class="btn-small ghost" data-index="${index}" data-action="delete" style="color:#ff6b6b">刪除</button>`:`<span style="font-size:12px;color:#999;padding:4px 8px">預設</span>`}</div>`;categoriesList.appendChild(itemDiv)});const colorPickers=categoriesList.querySelectorAll('input[type="color"]');colorPickers.forEach(picker=>{picker.addEventListener('change',function(){const index=parseInt(this.getAttribute('data-index'));categories[index].color=this.value;saveCategories();updateTypeSelect();updateFilterButtons();updateCountStats();renderList()})});const deleteButtons=categoriesList.querySelectorAll('[data-action="delete"]');deleteButtons.forEach(button=>{button.addEventListener('click',function(){const index=parseInt(this.getAttribute('data-index'));const category=categories[index];const contactCount=getCategoryCount(category.name);if(contactCount>0){if(!confirm(`「${category.name}」分類中有 ${contactCount} 位聯絡人，刪除後這些聯絡人將被移至「買方」分類。確定要刪除嗎？`)){return}contacts.forEach(contact=>{if(contact.type===category.name){contact.type='買方'}});saveLocal()}categories.splice(index,1);saveCategories();updateTypeSelect();updateFilterButtons();updateCountStats();renderList();renderCategoriesList()})})}function openDetail(id){const c=contacts.find(x=>String(x.id)===String(id));if(!c)return;editingId=String(c.id);topName.textContent=c.name||'—';topSub.textContent=c.phone||'—';topTag.textContent=c.type||'買方';const tagColor=getCategoryColor(c.type);topTag.style.background=tagColor;dType.value=c.type||'買方';dName.value=c.name||'';dPhone.value=c.phone||'';dNote1.value=c.note1||'';dNote2.value=c.note2||'';dNote3.value=c.note3||'';dImage1.value=c.image1||'';dImage2.value=c.image2||'';updateImagePreview(1,c.image1||'');updateImagePreview(2,c.image2||'');callBtn.href=`tel:${encodeURIComponent(c.phone||'')}`;editingHint.textContent='編輯中：'+(c.name||'—');if(isAddingNewType){toggleAddTypeMode()}detailPage.classList.add('show');detailPage.setAttribute('aria-hidden','false');document.body.style.overflow='hidden'}function closeDetail(){detailPage.classList.remove('show');detailPage.setAttribute('aria-hidden','true');editingId=null;document.body.style.overflow=''}function debounce(fn,ms=300){let t;return(...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}const doSave=debounce(()=>{if(!editingId)return;const idx=contacts.findIndex(x=>String(x.id)===String(editingId));if(idx===-1)return;const name=dName.value.trim();const phone=dPhone.value.trim();const type=dType.value;if(!name){alert('請填寫「姓名」欄位');dName.focus();return}if(!phone){alert('請填寫「電話」欄位');dPhone.focus();return}const phonePattern=/^[0-9\-]+$/;if(!phonePattern.test(phone)){alert('電話號碼格式不正確，請只輸入數字和橫線');dPhone.focus();return}contacts[idx].type=type;contacts[idx].name=name;contacts[idx].phone=phone;contacts[idx].note1=dNote1.value||'';contacts[idx].note2=dNote2.value||'';contacts[idx].note3=dNote3.value||'';contacts[idx].image1=dImage1.value||'';contacts[idx].image2=dImage2.value||'';topName.textContent=name||'—';topSub.textContent=phone||'—';topTag.textContent=type||'買方';const tagColor=getCategoryColor(type);topTag.style.background=tagColor;callBtn.href=`tel:${encodeURIComponent(phone||'')}`;saveLocal();renderList()},250);function addNew(){const c={id:uid(),name:'新客戶',phone:'',type:categories.length>0?categories[0].name:'買方',note1:'',note2:'',note3:'',image1:'',image2:''};contacts.unshift(c);saveLocal();renderList();openDetail(c.id)}function doDelete(){if(!editingId)return;if(!confirm('確認刪除此筆資料？'))return;contacts=contacts.filter(x=>String(x.id)!==String(editingId));saveLocal();renderList();closeDetail()}function checkForDuplicates(){const duplicates=[];const seenNames=new Map();const seenPhones=new Map();contacts.forEach((contact,index)=>{if(contact.name&&contact.name.trim()){const nameKey=contact.name.trim().toLowerCase();if(seenNames.has(nameKey)){const existing=seenNames.get(nameKey);if(!existing.duplicateGroup){existing.duplicateGroup=[existing];duplicates.push(existing.duplicateGroup)}existing.duplicateGroup.push(contact)}else{seenNames.set(nameKey,{...contact,index})}}if(contact.phone&&contact.phone.trim()){const phoneKey=contact.phone.trim().replace(/[-\s]/g,'');if(phoneKey.length>=4){if(seenPhones.has(phoneKey)){const existing=seenPhones.get(phoneKey);if(!existing.duplicateGroup){existing.duplicateGroup=[existing];duplicates.push(existing.duplicateGroup)}if(!existing.duplicateGroup.includes(contact)){existing.duplicateGroup.push(contact)}}else{seenPhones.set(phoneKey,{...contact,index})}}}});const uniqueDuplicates=[];const processedIds=new Set();duplicates.forEach(group=>{const uniqueGroup=[];group.forEach(contact=>{if(!processedIds.has(contact.id)){processedIds.add(contact.id);uniqueGroup.push(contact)}});if(uniqueGroup.length>1){uniqueDuplicates.push(uniqueGroup)}});return uniqueDuplicates}function showMergeModal(){const duplicates=checkForDuplicates();if(duplicates.length===0){alert('未發現重複聯絡人！');return}mergeList.innerHTML='';let totalItems=0;duplicates.forEach((group,groupIndex)=>{group.forEach((contact,contactIndex)=>{totalItems++;const tagColor=getCategoryColor(contact.type);const itemDiv=document.createElement('div');itemDiv.className='merge-item';itemDiv.innerHTML=`<input type="checkbox" class="merge-check" data-group="${groupIndex}" data-id="${contact.id}" checked><div class="merge-info"><strong>${esc(contact.name||'無姓名')}</strong><small>${esc(contact.phone||'無電話')}</small></div><span class="merge-type" style="background: ${tagColor}">${esc(contact.type)}</span>`;mergeList.appendChild(itemDiv)})});mergeMessage.textContent=`系統發現 ${duplicates.length} 組可能重複的聯絡人，共 ${totalItems} 筆記錄。請選擇要保留的項目（預設全選，系統將合併為一筆）：`;mergeModal.classList.add('show');mergeModal.setAttribute('aria-hidden','false')}function mergeSelectedContacts(){const checkboxes=mergeList.querySelectorAll('.merge-check:checked');const groups=new Map();checkboxes.forEach(checkbox=>{const groupId=checkbox.getAttribute('data-group');const contactId=checkbox.getAttribute('data-id');if(!groups.has(groupId)){groups.set(groupId,[])}groups.get(groupId).push(contactId)});const newContacts=[];const groupsToProcess=Array.from(groups.entries());groupsToProcess.forEach(([groupId,contactIds])=>{const groupContacts=contacts.filter(c=>contactIds.includes(c.id));if(groupContacts.length===0)return;const mergedContact={...groupContacts[0]};mergedContact.id=uid();const allNotes=[];const allImages=[];groupContacts.forEach(c=>{if(c.note1)allNotes.push(c.note1);if(c.note2)allNotes.push(c.note2);if(c.note3)allNotes.push(c.note3);if(c.image1)allImages.push(c.image1);if(c.image2)allImages.push(c.image2)});const uniqueNotes=[...new Set(allNotes.filter(n=>n.trim()))];const uniqueImages=[...new Set(allImages.filter(i=>i.trim()))];mergedContact.note1=uniqueNotes[0]||'';mergedContact.note2=uniqueNotes[1]||'';mergedContact.note3=uniqueNotes.slice(2).join(' | ')||'';mergedContact.image1=uniqueImages[0]||'';mergedContact.image2=uniqueImages[1]||'';newContacts.push(mergedContact)});const allMergedIds=new Set();groupsToProcess.forEach(([_,contactIds])=>{contactIds.forEach(id=>allMergedIds.add(id))});contacts.forEach(contact=>{if(!allMergedIds.has(contact.id)){newContacts.push(contact)}});contacts=newContacts;saveLocal();renderList();mergeModal.classList.remove('show');alert(`合併完成！原本 ${contacts.length+allMergedIds.size-newContacts.length} 筆資料已合併為 ${contacts.length} 筆。`)}function updateImagePreview(imageNum,url){const previewImg=imageNum===1?previewImg1:previewImg2;const container=imageNum===1?imagePreview1:imagePreview2;const placeholder=container.querySelector('.image-placeholder');if(url&&url.trim()){previewImg.src=url;previewImg.style.display='block';if(placeholder)placeholder.style.display='none';previewImg.onload=function(){};previewImg.onerror=function(){previewImg.style.display='none';if(placeholder)placeholder.style.display='flex'}}else{previewImg.src='';previewImg.style.display='none';if(placeholder)placeholder.style.display='flex'}}function previewImage(imageNum){const input=imageNum===1?dImage1:dImage2;const url=input.value.trim();if(!url){updateImagePreview(imageNum,'');return}if(!url.startsWith('http://')&&!url.startsWith('https://')){if(!confirm('圖片網址格式可能不正確（應以 http:// 或 https:// 開頭），確定要儲存嗎？')){return}}updateImagePreview(imageNum,url);doSave()}function clearImage(imageNum){const input=imageNum===1?dImage1:dImage2;input.value='';updateImagePreview(imageNum,'');doSave()}function initImagePreview(){[imagePreview1,imagePreview2].forEach((container,index)=>{const imgNum=index+1;container.addEventListener('click',(e)=>{const img=document.getElementById(`previewImg${imgNum}`);const input=document.getElementById(`dImage${imgNum}`);if(img.src&&img.style.display!=='none'){openImageModal(img.src,imgNum)}else if(input.value.trim()){const url=input.value.trim();if(url){const tempImg=new Image();tempImg.onload=function(){openImageModal(url,imgNum)};tempImg.onerror=function(){alert('無法載入圖片，請檢查網址是否正確')};tempImg.src=url}}})})}function openImageModal(imageUrl,imageIndex){currentImageScale=1;currentImageRotation=0;currentImageIndex=imageIndex;imageModalImg.src=imageUrl;imageModalImg.style.transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg)`;const input=document.getElementById(`dImage${imageIndex}`);const name=document.getElementById('dName').value||'未命名';imageModalInfo.textContent=`${name} - 圖片${imageIndex}`;updateImageModalInfo();imageModalEl.classList.add('show');imageModalEl.setAttribute('aria-hidden','false');document.body.style.overflow='hidden'}function updateImageModalInfo(){const scalePercent=Math.round(currentImageScale*100);imageModalScale.textContent=`縮放: ${scalePercent}%`;const img=imageModalImg;if(img.naturalWidth&&img.naturalHeight){const displayWidth=Math.round(img.naturalWidth*currentImageScale);const displayHeight=Math.round(img.naturalHeight*currentImageScale);imageModalFullsize.textContent=`${displayWidth} × ${displayHeight} (原圖: ${img.naturalWidth} × ${img.naturalHeight})`}}function zoomImage(factor){currentImageScale*=factor;if(currentImageScale<0.1)currentImageScale=0.1;if(currentImageScale>10)currentImageScale=10;imageModalImg.style.transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg)`;updateImageModalInfo()}function rotateImage(){currentImageRotation+=90;if(currentImageRotation>=360)currentImageRotation=0;imageModalImg.style.transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg)`;updateImageModalInfo()}function resetImage(){currentImageScale=1;currentImageRotation=0;imageModalImg.style.transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg)`;updateImageModalInfo()}function downloadImage(){const imageUrl=imageModalImg.src;const link=document.createElement('a');link.href=imageUrl;link.download=`contact_image_${currentImageIndex}_${Date.now()}.jpg`;document.body.appendChild(link);link.click();document.body.removeChild(link)}function initImageDrag(){let startX=0;let startY=0;let translateX=0;let translateY=0;imageModalImg.addEventListener('mousedown',startDrag);imageModalImg.addEventListener('touchstart',startDragTouch);function startDrag(e){e.preventDefault();startX=e.clientX-translateX;startY=e.clientY-translateY;document.addEventListener('mousemove',drag);document.addEventListener('mouseup',stopDrag);imageModalImg.style.cursor='grabbing'}function startDragTouch(e){e.preventDefault();const touch=e.touches[0];startX=touch.clientX-translateX;startY=touch.clientY-translateY;document.addEventListener('touchmove',dragTouch);document.addEventListener('touchend',stopDrag)}function drag(e){translateX=e.clientX-startX;translateY=e.clientY-startY;const transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg) translate(${translateX}px, ${translateY}px)`;imageModalImg.style.transform=transform}function dragTouch(e){const touch=e.touches[0];translateX=touch.clientX-startX;translateY=touch.clientY-startY;const transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg) translate(${translateX}px, ${translateY}px)`;imageModalImg.style.transform=transform}function stopDrag(){document.removeEventListener('mousemove',drag);document.removeEventListener('mouseup',stopDrag);document.removeEventListener('touchmove',dragTouch);document.removeEventListener('touchend',stopDrag);imageModalImg.style.cursor='grab';setTimeout(()=>{translateX=0;translateY=0;const transform=`scale(${currentImageScale}) rotate(${currentImageRotation}deg)`;imageModalImg.style.transform=transform},100)}}function initWheelZoom(){imageModalEl.addEventListener('wheel',function(e){e.preventDefault();const zoomFactor=e.deltaY>0?0.9:1.1;zoomImage(zoomFactor)})}function initKeyboardShortcuts(){document.addEventListener('keydown',function(e){if(!imageModalEl.classList.contains('show'))return;switch(e.key){case'Escape':imageModalClose.click();break;case'+':case'=':if(e.ctrlKey||e.metaKey){e.preventDefault();zoomImage(1.2)}break;case'-':if(e.ctrlKey||e.metaKey){e.preventDefault();zoomImage(0.8)}break;case'0':if(e.ctrlKey||e.metaKey){e.preventDefault();resetImage()}break;case'r':case'R':if(e.ctrlKey||e.metaKey){e.preventDefault();rotateImage()}break;case'd':case'D':if(e.ctrlKey||e.metaKey){e.preventDefault();downloadImage()}break}})}function initImageModalEvents(){imageModalZoomIn.addEventListener('click',()=>zoomImage(1.2));imageModalZoomOut.addEventListener('click',()=>zoomImage(0.8));imageModalReset.addEventListener('click',resetImage);imageModalRotate.addEventListener('click',rotateImage);imageModalDownload.addEventListener('click',downloadImage);imageModalEl.addEventListener('click',function(e){if(e.target===imageModalEl){imageModalClose.click()}})}function buildPreviewTable(arr){const headers=['id','name','phone','type','note1','note2','note3','image1','image2'];previewTable.innerHTML='';const thead=document.createElement('thead');const trh=document.createElement('tr');headers.forEach(h=>{const th=document.createElement('th');th.textContent=h;trh.appendChild(th)});thead.appendChild(trh);previewTable.appendChild(thead);const tbody=document.createElement('tbody');arr.forEach(c=>{const tr=document.createElement('tr');headers.forEach(h=>{const td=document.createElement('td');td.textContent=c[h]||'';tr.appendChild(td)});tbody.appendChild(tr)});previewTable.appendChild(tbody)}function openExportPreview(){if(contacts.length===0){alert('沒有資料可匯出');return}buildPreviewTable(contacts);previewTitle.textContent='匯出前預覽';previewSub.textContent='以下為即將匯出的資料（CSV 欄位：id,name,phone,type,note1,note2,note3,image1,image2）';btnConfirmPreview.textContent='確認匯出';btnConfirmPreview.onclick=()=>{previewModal.classList.remove('show');doExportCSV()};previewModal.classList.add('show');previewModal.setAttribute('aria-hidden','false')}function closePreview(){previewModal.classList.remove('show');previewModal.setAttribute('aria-hidden','true')}async function doExportCSV(){const headers=['id','name','phone','type','note1','note2','note3','image1','image2'];const validContacts=contacts.filter(c=>{return(c.name&&c.name.trim()!=='')||(c.phone&&c.phone.trim()!=='')});if(validContacts.length===0){alert('沒有有效的聯絡人資料可匯出');return}const rows=[headers.join(',')];validContacts.forEach(c=>{const row=headers.map(h=>{const value=c[h]||'';const escapedValue=String(value).replace(/"/g,'""');if(value.includes(',')||value.includes('\n')||value.includes('\r')||value.includes('"')){return`"${escapedValue}"`}return escapedValue}).join(',');rows.push(row)});const csv=rows.join('\n');const blob=new Blob(['\ufeff'+csv],{type:'text/csv;charset=utf-8'});const filename=`contacts_${getTimestampName()}.csv`;if(window.showSaveFilePicker){try{const handle=await showSaveFilePicker({suggestedName:filename,types:[{description:'CSV',accept:{'text/csv':['.csv']}}]});const writable=await handle.createWritable();await writable.write(blob);await writable.close();alert(`匯出成功！共匯出 ${validContacts.length} 筆資料`);return}catch(e){console.warn('save cancelled or error',e);return}}const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download=filename;a.click();URL.revokeObjectURL(url);alert(`匯出成功！共匯出 ${validContacts.length} 筆資料`)}function parseCSVLine(line){const parts=line.match(/("([^"]|"")*"|[^,]*)(?:,|$)/g);if(!parts)return[];return parts.map(p=>{p=p.replace(/,$/,'').trim();if(p.startsWith('"')&&p.endsWith('"'))p=p.slice(1,-1).replace(/""/g,'"');return p})}function handleImportText(text){const currentCategories=[...categories];const rows=text.split(/\r?\n/).map(r=>r.trim()).filter(r=>r.length>0&&!r.startsWith('#'));if(rows.length<1){alert('CSV 內容錯誤或為空');return}const header=parseCSVLine(rows[0]).map(h=>h.trim().toLowerCase());const expected=['id','name','phone','type','note1','note2','note3','image1','image2'];const missing=expected.filter(h=>!header.includes(h));if(missing.length){alert('CSV 欄位缺少：'+missing.join(',')+'\n請使用 header: id,name,phone,type,note1,note2,note3,image1,image2');return}const parsed=[];const importedCategories=new Set();for(let i=1;i<rows.length;i++){const cols=parseCSVLine(rows[i]);if(cols.length===0)continue;const obj={};for(let j=0;j<header.length;j++){const key=header[j];if(!key)continue;obj[key]=cols[j]||''}if((obj.name&&obj.name.trim())||(obj.phone&&obj.phone.trim())){parsed.push({id:obj.id||'',name:obj.name||'',phone:obj.phone||'',type:obj.type||'買方',note1:obj.note1||'',note2:obj.note2||'',note3:obj.note3||'',image1:obj.image1||'',image2:obj.image2||''});if(obj.type&&obj.type.trim()){importedCategories.add(obj.type.trim())}}}if(parsed.length===0){alert('CSV 無有效資料（需有姓名或電話）');return}importBuffer=parsed.slice();buildPreviewTable(importBuffer);previewTitle.textContent='匯入預覽（全部覆蓋）';previewSub.textContent='確認後會全部覆蓋目前聯絡人資料，但會保留現有的分類設定。請確認無誤後按「確認匯入」。';btnConfirmPreview.textContent='確認匯入';btnConfirmPreview.onclick=()=>confirmImportOverwrite(currentCategories);btnCancelPreview.onclick=()=>{previewModal.classList.remove('show');restorePreviewButtons()};previewModal.classList.add('show');previewModal.setAttribute('aria-hidden','false')}function confirmImportOverwrite(originalCategories){if(!importBuffer||importBuffer.length===0){alert('無匯入資料');previewModal.classList.remove('show');return}importBuffer=importBuffer.map(p=>({...p,id:p.id&&p.id.trim()?String(p.id):uid()}));contacts=importBuffer.slice();saveLocal();const importedCategories=new Set();contacts.forEach(c=>{if(c.type&&c.type.trim()){importedCategories.add(c.type.trim())}});const newCategories=[...originalCategories];importedCategories.forEach(categoryName=>{if(!newCategories.some(c=>c.name===categoryName)){const randomColor=`#${Math.floor(Math.random()*16777215).toString(16)}`;newCategories.push({name:categoryName,color:randomColor,isDefault:false})}});categories=newCategories;saveCategories();renderList();updateTypeSelect();updateFilterButtons();updateCountStats();previewModal.classList.remove('show');restorePreviewButtons();alert(`匯入完成！已覆蓋現有聯絡人資料，共 ${contacts.length} 筆。\n分類設定已保留並新增了 ${newCategories.length-originalCategories.length} 個新分類。`);importBuffer=[]}function restorePreviewButtons(){previewTitle.textContent='匯出前預覽';previewSub.textContent='以下為即將匯出的資料（CSV 欄位：id,name,phone,type,note1,note2,note3,image1,image2）';btnConfirmPreview.textContent='確認匯出';btnConfirmPreview.onclick=()=>{previewModal.classList.remove('show');doExportCSV()};btnCancelPreview.onclick=closePreview}function getTimestampName(){const d=new Date();const pad=n=>String(n).padStart(2,'0');return`${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}_${pad(d.getHours())}-${pad(d.getMinutes())}-${pad(d.getSeconds())}`}btnSettings.addEventListener('click',()=>{logoUrlInput.value=loadLogo()||'';logoPreviewImg.style.display='none';logoPreviewImg.src='';settingsModal.classList.add('show');settingsModal.setAttribute('aria-hidden','false')});btnCloseSettings.addEventListener('click',()=>{settingsModal.classList.remove('show');settingsModal.setAttribute('aria-hidden','true')});btnPreviewLogo.addEventListener('click',()=>{const url=(logoUrlInput.value||'').trim();if(!url){alert('請輸入圖片網址');return}if(!/^https?:\/\//i.test(url)){alert('請輸入完整 http 或 https 連結');return}logoPreviewImg.src=url;logoPreviewImg.style.display='block'});btnSaveLogo.addEventListener('click',()=>{const url=(logoUrlInput.value||'').trim();if(url&&!/^https?:\/\//i.test(url)){alert('請輸入完整 http 或 https 連結');return}saveLogo(url||'');applyLogoFromStorage();settingsModal.classList.remove('show')});btnRemoveLogo.addEventListener('click',()=>{if(!confirm('移除 LOGO？'))return;logoUrlInput.value='';logoPreviewImg.src='';logoPreviewImg.style.display='none';saveLogo('');applyLogoFromStorage()});function applyLogoFromStorage(){const url=loadLogo();if(url){centerLogo.src=url;centerLogo.style.display='block';logoBanner.style.background='#fff';centerLogo.onerror=function(){console.warn('logo load failed');centerLogo.style.display='none';logoBanner.style.background='#fff';alert('無法載入該圖片（可能被來源網站阻擋或連結有誤）')}}else{centerLogo.src='';centerLogo.style.display='none';logoBanner.style.background='#fff'}}btnManageCategories.addEventListener('click',showCategoriesModal);btnCloseCategories.addEventListener('click',()=>{categoriesModal.classList.remove('show');categoriesModal.setAttribute('aria-hidden','true')});btnAddCategory.addEventListener('click',function(){const name=newCategoryName.value.trim();if(!name){alert('請輸入分類名稱');return}if(categories.some(c=>c.name===name)){alert('此分類已存在');return}const color=newCategoryColor.value;categories.push({name:name,color:color,isDefault:false});saveCategories();updateTypeSelect();updateFilterButtons();updateCountStats();renderList();renderCategoriesList();newCategoryName.value='';newCategoryColor.value='#4f8bfd'});btnAddType.addEventListener('click',toggleAddTypeMode);btnCancelType.addEventListener('click',toggleAddTypeMode);dTypeNew.addEventListener('keypress',function(e){if(e.key==='Enter'){addNewCategory()}});dType.addEventListener('change',()=>{if(!isAddingNewType){doSave()}});btnPreviewImage1.addEventListener('click',()=>previewImage(1));btnPreviewImage2.addEventListener('click',()=>previewImage(2));btnClearImage1.addEventListener('click',()=>clearImage(1));btnClearImage2.addEventListener('click',()=>clearImage(2));[dImage1,dImage2].forEach((input,index)=>{input.addEventListener('change',()=>{editingHint.textContent='編輯中：'+(dName.value||'—');doSave()});input.addEventListener('blur',()=>{doSave()});input.addEventListener('keypress',(e)=>{if(e.key==='Enter'){e.preventDefault();const url=input.value.trim();if(url){updateImagePreview(index+1,url)}doSave()}})});imageModalClose.addEventListener('click',()=>{imageModalEl.classList.remove('show');imageModalEl.setAttribute('aria-hidden','true');document.body.style.overflow=''});btnCheckDuplicates.addEventListener('click',showMergeModal);btnCancelMerge.addEventListener('click',()=>{mergeModal.classList.remove('show');mergeModal.setAttribute('aria-hidden','true')});btnSelectAllMerge.addEventListener('click',()=>{const checkboxes=mergeList.querySelectorAll('.merge-check');const allChecked=Array.from(checkboxes).every(cb=>cb.checked);checkboxes.forEach(cb=>cb.checked=!allChecked)});btnMergeSelected.addEventListener('click',mergeSelectedContacts);btnFirstPage.addEventListener('click',()=>{currentPage=1;renderList()});btnPrevPage.addEventListener('click',()=>{if(currentPage>1){currentPage--;renderList()}});btnNextPage.addEventListener('click',()=>{if(currentPage<totalPages){currentPage++;renderList()}});btnLastPage.addEventListener('click',()=>{currentPage=totalPages;renderList()});searchInput.addEventListener('input',()=>{currentPage=1;renderList()});btnAdd.addEventListener('click',addNew);btnDelete.addEventListener('click',doDelete);btnBack.addEventListener('click',closeDetail);btnDone.addEventListener('click',closeDetail);[dName,dPhone,dNote1,dNote2,dNote3].forEach(el=>{el.addEventListener('input',()=>{editingHint.textContent='編輯中：'+(dName.value||'—');doSave()})});dType.addEventListener('change',()=>{editingHint.textContent='編輯中：'+(dName.value||'—');doSave()});btnExport.addEventListener('click',openExportPreview);fileImport.addEventListener('change',function(e){const f=this.files&&this.files[0];if(!f)return;const reader=new FileReader();reader.onload=function(evt){handleImportText(String(evt.target.result||''));fileImport.value=''};reader.readAsText(f,'utf-8')});(function init(){loadLocal();loadCategories();ensureSample();updateTypeSelect();updateFilterButtons();updateCountStats();renderList();restorePreviewButtons();applyLogoFromStorage();initImagePreview();initImageModalEvents();initImageDrag();initWheelZoom();initKeyboardShortcuts()})(); </script> </body> </html>
首頁
訂閱：
意見 (Atom)
☰
選單
00 出租案件 (88)
01 東區 (117)
02 北區 (60)
03 中西區 (61)
04 南區 (59)
05 安平區 (75)
06 安南區 (57)
07 永康區 (192)
08 仁德、歸仁、關廟、龍崎區 (103)
09 新市、善化、安定、山上區 (56)
10 玉井、楠西、南化、左鎮區 (29)
11 新營、鹽水、白河、柳營、後壁、東山區 (48)
12 麻豆、下營、六甲、官田、大內、佳里區 (33)
13 學甲、西港、七股、將軍、北門、新化區 (36)
14 台南以外縣市 (29)
15 建地 (73)
16 農地 (129)
17 工業地 (11)
18 其他用地 (3)
已售出 (253)
公寓大樓 (75)
投資宿舍 (16)
車位 (209)
車庫透天 (132)
店面 (79)
持分 (2)
套房 (89)
配件 (11)
透天 (122)
農舍 (6)
電梯 (3)
電梯大樓 (399)
廠房 (30)
雞舍 (7)