防骗曝光台 · 全民反诈共享平台程序HTML代码页面演示参考
以下是针对“骗子曝光平台”的功能介绍及后续开发建议供您参考---## 一、平台功能介绍### 1. 核心功能- **曝光信息提交**用户可填写标题、店铺名称、被骗日期、商品名称、被骗内容介绍限10000字符、骗子联系方式电话/微信/QQ、发货地址、网址链接、证据截图支持多图上传以及备注说明限5000字符。- **证据截图展示**支持上传多张图片每张≤5MB点击图片可在当前页面通过模态框弹窗放大查看无需跳转新页面提升浏览体验。- **关键词搜索**支持按标题、店铺名、电话、微信号、商品名称、内容介绍、备注、地址、网址链接等进行全文搜索快速定位目标曝光信息。- **数据本地存储**所有曝光数据保存在浏览器本地localStorage无需后端服务器即可运行保护用户隐私。### 2. 用户体验- **自适应布局**采用响应式设计适配手机、平板、PC端界面简洁直观。- **表单验证**对必填项、字符长度进行前端校验防止无效提交。- **示例数据**首次加载时自动生成两条示例曝光帮助用户快速了解平台用途。---## 二、后续开发建议### 1. 后端化与数据持久化**当前限制**数据仅存储在用户浏览器本地无法跨设备同步也无法进行统一管理。**建议方案**- 搭建后端服务如Node.js Express、Python Flask/Django提供RESTful API。- 使用数据库如MySQL、PostgreSQL、MongoDB存储曝光信息实现数据云端持久化。- 增加用户认证系统注册/登录让用户可管理自己提交的曝光信息。### 2. 增加管理后台与审核机制**必要性**为防止虚假、恶意或侵权信息平台需建立内容审核机制。**建议功能**- 管理员后台可查看、审核、下架、编辑曝光内容。- 举报机制用户可对可疑信息进行举报管理员收到通知后处理。- 发布前审核或发布后举报两种模式根据平台定位选择。### 3. 提升搜索与筛选能力**当前**仅支持关键词模糊搜索。**可扩展功能**- 按时间范围筛选如最近一周、一个月。- 按骗子联系方式电话/微信号聚合展示方便查询同一骗子多次作案。- 按被骗金额区间筛选需增加金额字段。- 支持标签系统如“刷单诈骗”“冒充客服”等方便分类浏览。### 4. 增加互动与社区功能**建议**- 评论/留言区允许用户对曝光信息进行讨论、补充证据。- 点赞/支持数提高可信曝光信息的可见度。- 收藏功能用户可收藏关注特定曝光案例。### 5. 安全与防滥用**重点**- 图片上传增加服务端校验类型、大小、内容安全防止恶意文件上传。- 增加验证码机制防止机器人批量提交垃圾信息。- 敏感信息脱敏处理如手机号中间四位隐藏避免泄露隐私引发的法律风险。### 6. 数据导出与分享**建议**- 支持将曝光信息导出为PDF或图片方便用户保存证据或分享至社交平台。- 生成分享链接一键复制曝光内容。### 7. 移动端体验优化- 可考虑开发微信小程序或App提升移动端使用便捷性。- 增加拍照直接上传功能方便用户即时提交证据。### 8. 法律合规与免责声明- 明确平台责任边界增加详细的使用条款、隐私政策、投诉删除机制。- 提供“侵权投诉”入口便于被曝光方申诉。### 9. 数据可视化- 增加统计面板展示曝光趋势、诈骗类型分布、高发地区等帮助用户提高警惕。### 10. 国际化与多语言- 若平台受众扩大可增加多语言支持中/英等方便不同地区用户使用。---## 三、技术升级建议如后端化| 模块 | 推荐技术栈 ||------|------------|| 前端 | Vue.js / React增强交互性替代原生JS || 后端 | Node.js Express / Python FastAPI || 数据库 | PostgreSQL / MongoDB || 图片存储 | 阿里云OSS / 七牛云 / AWS S3 || 部署 | 云服务器阿里云、腾讯云或 Vercel 云函数 |---## 四、总结当前版本的“骗子曝光平台”已具备信息提交、展示、搜索等基础功能适合作为小型社区工具或原型演示。若计划长期运营或扩大影响力建议逐步引入后端架构、审核机制、用户系统及法律合规建设使其成为一个安全、可信、高效的防骗信息共享平台。如果需要进一步协助如后端接口设计、数据库结构、前端框架升级等可随时提出我可以继续提供具体实现方案。完整页面代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover, user-scalableyes title防骗曝光台 · 骗子举报平台/title style * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { background: #f0f2f5; font-family: Segoe UI, Roboto, Helvetica Neue, sans-serif; padding: 24px 16px 60px; color: #1e293b; } .container { max-width: 1280px; margin: 0 auto; } /* 头部 卡片通用样式 */ .card { background: white; border-radius: 28px; box-shadow: 0 8px 20px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.05); padding: 20px 24px; margin-bottom: 32px; transition: all 0.2s ease; border: 1px solid #eef2f6; } h1 { font-size: 1.9rem; font-weight: 700; background: linear-gradient(135deg, #c2410c, #b91c1c); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px; display: inline-block; } .sub { color: #5b6e8c; margin-top: 8px; font-size: 0.9rem; border-left: 3px solid #dc2626; padding-left: 12px; } /* 表单样式 */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px 24px; } .field-group { display: flex; flex-direction: column; gap: 6px; } .full-width { grid-column: 1 / -1; } label { font-weight: 600; font-size: 0.85rem; color: #334155; display: flex; align-items: center; gap: 6px; } .required:after { content: *; color: #e11d48; margin-left: 4px; } input, select, textarea { padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 18px; font-size: 0.95rem; font-family: inherit; transition: 0.2s; background: #fff; outline: none; } input:focus, select:focus, textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.2); } textarea { resize: vertical; min-height: 100px; } .char-count { font-size: 0.7rem; color: #6c757d; text-align: right; } .btn { background: #1e293b; border: none; padding: 12px 24px; border-radius: 40px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: 0.2s; color: white; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background: #dc2626; box-shadow: 0 4px 8px rgba(220,38,38,0.2); } .btn-primary:hover { background: #b91c1c; transform: translateY(-1px); } .btn-outline { background: white; border: 1px solid #dc2626; color: #dc2626; } .btn-outline:hover { background: #fff5f5; } /* 搜索条 */ .search-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 24px; } .search-input-wrapper { flex: 3; min-width: 200px; position: relative; } .search-input-wrapper input { width: 100%; padding-right: 40px; border-radius: 60px; } .stats { font-size: 0.85rem; background: #eef2ff; padding: 6px 14px; border-radius: 40px; color: #1e40af; } .clear-search { background: none; border: none; font-size: 1.2rem; cursor: pointer; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; } /* 曝光卡片列表 */ .exposures-list { display: flex; flex-direction: column; gap: 24px; } .expo-card { background: white; border-radius: 28px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.2s; border: 1px solid #edf2f7; overflow: hidden; } .expo-header { background: #fef9f5; padding: 16px 20px; border-bottom: 1px solid #ffe4dc; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; } .expo-title { font-size: 1.3rem; font-weight: 700; color: #991b1b; word-break: break-word; } .expo-date { font-size: 0.75rem; color: #6c757d; background: #f1f5f9; padding: 4px 10px; border-radius: 30px; } .expo-body { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 20px; } .info-row { font-size: 0.9rem; border-bottom: 1px dashed #f0f0f0; padding-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .info-label { font-weight: 700; min-width: 100px; color: #4b5563; } .info-value { color: #1f2937; word-break: break-all; flex: 1; } .content-block { grid-column: 1 / -1; background: #fafafc; padding: 14px 16px; border-radius: 20px; margin-top: 4px; } .content-text { white-space: pre-wrap; line-height: 1.5; font-size: 0.9rem; } .screenshot-area { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .screenshot-img { width: 100px; height: 100px; border-radius: 16px; border: 1px solid #e2e8f0; object-fit: cover; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .screenshot-img:hover { transform: scale(1.02); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .empty-state { text-align: center; padding: 60px 20px; background: white; border-radius: 48px; color: #94a3b8; } .badge { background: #fee2e2; color: #b91c1c; padding: 2px 12px; border-radius: 30px; font-size: 0.7rem; font-weight: 600; } footer { text-align: center; margin-top: 40px; font-size: 0.75rem; color: #7c8ba0; } media (max-width: 640px) { .card { padding: 16px; } .expo-header { flex-direction: column; } .info-label { min-width: 85px; } .screenshot-img { width: 80px; height: 80px; } } /* 图片模态框弹窗样式 */ .image-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.92); z-index: 9999; justify-content: center; align-items: center; cursor: pointer; backdrop-filter: blur(4px); } .modal-content { max-width: 90vw; max-height: 90vh; text-align: center; position: relative; } .modal-content img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 35px rgba(0,0,0,0.5); background: #1e1e1e; } .modal-close { position: absolute; top: -40px; right: -10px; background: rgba(255,255,255,0.2); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; cursor: pointer; transition: 0.2s; backdrop-filter: blur(4px); } .modal-close:hover { background: rgba(255,80,80,0.7); transform: scale(1.05); } media (max-width: 640px) { .modal-close { top: -30px; right: 0px; } } /style /head body div classcontainer !-- 标题区 -- div stylemargin-bottom: 20px; h1⚠️ 骗子曝光平台/h1 div classsub让诈骗无处遁形 · 提交前请确保信息真实依法举证/div /div !-- 提交表单卡片 -- div classcard h3 stylemargin-bottom: 18px; font-weight: 600; 提交曝光信息/h3 form idexposureForm div classform-grid div classfield-group label classrequired标题名称/label input typetext idtitle placeholder例虚假手机诈骗 maxlength200 required /div div classfield-group label店铺名称/label input typetext idshopName placeholder淘宝/微店/闲鱼ID等 /div div classfield-group label classrequired被骗日期/label input typedate idfraudDate required /div div classfield-group label购买的商品名称/label input typetext idproductName placeholder手机/课程/会员等 /div div classfield-group full-width label classrequired被骗内容介绍 span stylefont-weight: normal;(限10000字符)/span/label textarea idcontentIntro rows4 maxlength10000 placeholder详细描述被骗经过、手段、金额等... required/textarea div classchar-countspan idintroCount0/span/10000/div /div div classfield-group label骗子电话/label input typetel idphone placeholder手机/固话 /div div classfield-group label骗子的微信号/QQ等分类/label input typetext idwechatQQ placeholder微信号:xxx 或 QQ:123456 /div div classfield-group label骗子发货地址/label input typetext idaddress placeholder省/市/区 详细地址 /div div classfield-group label网址链接/label input typeurl idurlLink placeholderhttps://... /div div classfield-group label上传截图 (支持多图)/label input typefile idscreenshots multiple acceptimage/jpeg,image/png,image/webp div stylefont-size: 0.7rem; color:gray;最多5张每张≤5MB前端预览/div /div div classfield-group full-width label其它备注说明 span stylefont-weight: normal;(限5000字)/span/label textarea idremarks rows3 maxlength5000 placeholder补充证据线索等.../textarea div classchar-countspan idremarkCount0/span/5000/div /div /div div styledisplay: flex; gap: 16px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap; button typereset classbtn btn-outline stylebackground: #f8fafc;清空表单/button button typesubmit classbtn btn-primary✅ 提交曝光/button /div /form /div !-- 搜索 统计栏 -- div classsearch-bar div classsearch-input-wrapper input typetext idkeywordSearch placeholder 按标题、店铺、电话、微信号、商品、内容等关键词搜索... button classclear-search idclearSearchBtn aria-label清除✖/button /div div classstats idstatsInfo共 0 条曝光/div button idresetAllDemoBtn classbtn btn-outline stylepadding: 6px 18px; 重置演示数据/button /div !-- 曝光列表展示区 -- div idexposuresContainer classexposures-list !-- 动态卡片 -- div classempty-state暂无曝光信息成为第一个正义使者 /div /div footer免责声明平台仅为信息整理曝光请自行甄别依法维权。所有数据存储于浏览器本地。点击截图可在当前页面弹窗放大。/footer /div !-- 图片模态框弹窗 -- div idimageModal classimage-modal div classmodal-content span classmodal-close idmodalCloseBtntimes;/span img idmodalImage src alt证据截图放大预览 /div /div script // ---------- 存储KEY ---------- const STORAGE_KEY fraud_exposure_platform_data; // 辅助函数: 读取本地数据 function loadExposures() { const raw localStorage.getItem(STORAGE_KEY); if(!raw) return []; try { return JSON.parse(raw); } catch(e) { return []; } } // 保存数据 function saveExposures(data) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } // 生成简单ID function generateId() { return Date.now() - Math.random().toString(36).substr(2, 8); } // 全局数据 let exposures loadExposures(); let currentSearchKeyword ; // DOM 元素 const form document.getElementById(exposureForm); const titleInput document.getElementById(title); const shopNameInput document.getElementById(shopName); const fraudDateInput document.getElementById(fraudDate); const productNameInput document.getElementById(productName); const contentIntro document.getElementById(contentIntro); const phoneInput document.getElementById(phone); const wechatQQInput document.getElementById(wechatQQ); const addressInput document.getElementById(address); const urlLinkInput document.getElementById(urlLink); const screenshotsFile document.getElementById(screenshots); const remarksInput document.getElementById(remarks); const introCountSpan document.getElementById(introCount); const remarkCountSpan document.getElementById(remarkCount); const container document.getElementById(exposuresContainer); const statsSpan document.getElementById(statsInfo); const keywordSearchInput document.getElementById(keywordSearch); const clearSearchBtn document.getElementById(clearSearchBtn); const resetDemoBtn document.getElementById(resetAllDemoBtn); // 模态框元素 const modal document.getElementById(imageModal); const modalImg document.getElementById(modalImage); const modalCloseBtn document.getElementById(modalCloseBtn); // 全局图片弹窗函数在当前页面弹出 function showImageModal(imageSrc) { modalImg.src imageSrc; modal.style.display flex; document.body.style.overflow hidden; // 防止背景滚动 } function closeImageModal() { modal.style.display none; document.body.style.overflow ; modalImg.src ; // 清空避免残留 } // 模态框事件绑定 modal.addEventListener(click, function(e) { // 点击背景层关闭 if(e.target modal) closeImageModal(); }); modalCloseBtn.addEventListener(click, closeImageModal); // ESC 键关闭 document.addEventListener(keydown, function(e) { if(e.key Escape modal.style.display flex) { closeImageModal(); } }); // 字数统计监听 function updateCounters() { introCountSpan.innerText contentIntro.value.length; remarkCountSpan.innerText remarksInput.value.length; } contentIntro.addEventListener(input, updateCounters); remarksInput.addEventListener(input, updateCounters); // 设置默认日期为今天 if(!fraudDateInput.value) { const today new Date().toISOString().slice(0,10); fraudDateInput.value today; } // 辅助: 将FileList转为base64数组 (限制5MB 最多5张) function filesToBase64Array(files) { return new Promise((resolve) { if(!files || files.length 0) return resolve([]); const limit Math.min(files.length, 5); const promises []; for(let i0; ilimit; i) { const file files[i]; if(!file.type.startsWith(image/)) continue; if(file.size 5 * 1024 * 1024) { alert(图片 ${file.name} 超过5MB已跳过); continue; } const promise new Promise((ok) { const reader new FileReader(); reader.onload (e) ok({ src: e.target.result, name: file.name }); reader.readAsDataURL(file); }); promises.push(promise); } Promise.all(promises).then(resolve); }); } // 渲染列表 (根据搜索词) function renderExposures() { let filtered [...exposures]; const keyword currentSearchKeyword.trim().toLowerCase(); if(keyword ! ) { filtered exposures.filter(item { // 搜索范围: 标题,店铺名称,骗子电话,微信号/QQ,商品名称,内容介绍,备注,地址,网址链接 const searchableFields [ item.title, item.shopName, item.phone, item.wechatQQ, item.productName, item.contentIntro, item.remarks, item.address, item.urlLink ]; return searchableFields.some(field field field.toLowerCase().includes(keyword)); }); } statsSpan.innerText 共 ${filtered.length} 条曝光${keyword ? (匹配${keyword}) : }; if(filtered.length 0) { container.innerHTML div classempty-state 没有找到相关曝光信息尝试其他关键词或 span stylecolor:#dc2626;提交第一条曝光/span/div; return; } container.innerHTML filtered.map(expo { // 处理图片展示 - 绑定内联onclick事件调用showImageModal (无需跳转新页面) let imagesHtml ; if(expo.screenshotImages expo.screenshotImages.length) { imagesHtml div classscreenshot-area${expo.screenshotImages.map((img, idx) img classscreenshot-img src${img.src} alt截图证据 data-src${img.src} onclickwindow.showImageModalFromGlobal ? window.showImageModalFromGlobal(${img.src.replace(//g, \\)}) : (function(){ const modalDiv document.getElementById(imageModal); const modalImgEl document.getElementById(modalImage); modalImgEl.src ${img.src.replace(//g, \\)}; modalDiv.style.displayflex; document.body.style.overflowhidden; })() ).join()}/div; } else { imagesHtml div stylefont-size:0.7rem; color:#aaa;暂无上传截图/div; } // 为了确保onclick安全调用全局函数我们在window上挂载方法 return div classexpo-card div classexpo-header span classexpo-title${escapeHtml(expo.title)}/span span classexpo-date 被骗: ${expo.fraudDate || 未知}/span /div div classexpo-body div classinfo-rowspan classinfo-label 店铺名/spanspan classinfo-value${escapeHtml(expo.shopName) || —}/span/div div classinfo-rowspan classinfo-label️ 商品/spanspan classinfo-value${escapeHtml(expo.productName) || —}/span/div div classinfo-rowspan classinfo-label 骗子电话/spanspan classinfo-value${escapeHtml(expo.phone) || —}/span/div div classinfo-rowspan classinfo-label 微信/QQ/spanspan classinfo-value${escapeHtml(expo.wechatQQ) || —}/span/div div classinfo-rowspan classinfo-label 发货地址/spanspan classinfo-value${escapeHtml(expo.address) || —}/span/div div classinfo-rowspan classinfo-label 网址链接/spanspan classinfo-value${expo.urlLink ? a href${escapeHtml(expo.urlLink)} target_blank relnoopener noreferrer${escapeHtml(expo.urlLink)}/a : —}/span/div div classcontent-block div stylefont-weight:600; margin-bottom:6px; 被骗内容介绍/div div classcontent-text${escapeHtml(expo.contentIntro).replace(/\n/g,br)}/div /div ${expo.remarks ? div classcontent-blockdiv stylefont-weight:600; margin-bottom:6px; 备注说明/divdiv classcontent-text${escapeHtml(expo.remarks).replace(/\n/g,br)}/div/div : } div classcontent-block div stylefont-weight:600; margin-bottom:6px;️ 证据截图 (点击放大)/div ${imagesHtml} /div /div /div; }).join(); // 由于innerHTML后重新绑定图片点击事件但我们在HTML内联中已经使用了全局函数需要确保window上的方法有效 // 确保全局函数挂载 if(typeof window.showImageModalFromGlobal undefined) { window.showImageModalFromGlobal function(src) { const modalDiv document.getElementById(imageModal); const modalImgEl document.getElementById(modalImage); if(modalDiv modalImgEl) { modalImgEl.src src; modalDiv.style.display flex; document.body.style.overflow hidden; } }; } // 二次保险因为动态生成的img内联onclick里调用可能由于转义问题最好重新代理一下 // 直接为所有 .screenshot-img 添加事件委托 (更稳健) setTimeout(() { document.querySelectorAll(.screenshot-img).forEach(img { // 避免重复绑定 if(img.getAttribute(data-listener)) return; img.setAttribute(data-listener, true); const originalSrc img.getAttribute(src); img.removeAttribute(onclick); // 移除内联统一用事件委托 img.addEventListener(click, (e) { e.stopPropagation(); const srcVal img.getAttribute(src); if(srcVal) { window.showImageModalFromGlobal(srcVal); } }); }); }, 10); } // 简易防XSS function escapeHtml(str) { if(!str) return ; return str.replace(/[]/g, function(m) { if(m ) return amp;; if(m ) return lt;; if(m ) return gt;; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); } // 保存新曝光记录 async function addExposure(event) { event.preventDefault(); // 必填项验证 const title titleInput.value.trim(); if(!title) { alert(请填写标题名称); titleInput.focus(); return; } const fraudDate fraudDateInput.value; if(!fraudDate) { alert(请选择被骗日期); return; } const contentIntroVal contentIntro.value.trim(); if(!contentIntroVal) { alert(请填写被骗内容介绍); contentIntro.focus(); return; } if(contentIntroVal.length 10000) { alert(内容介绍不能超过10000字符); return; } const remarksVal remarksInput.value.trim(); if(remarksVal.length 5000) { alert(备注说明不能超过5000字符); return; } // 图片处理 let screenshotArray []; if(screenshotsFile.files.length 0) { screenshotArray await filesToBase64Array(screenshotsFile.files); } const newExpo { id: generateId(), title: title, shopName: shopNameInput.value.trim(), fraudDate: fraudDate, productName: productNameInput.value.trim(), contentIntro: contentIntroVal, phone: phoneInput.value.trim(), wechatQQ: wechatQQInput.value.trim(), address: addressInput.value.trim(), urlLink: urlLinkInput.value.trim(), remarks: remarksVal, screenshotImages: screenshotArray, createdAt: new Date().toISOString() }; exposures.unshift(newExpo); // 最新的在上面 saveExposures(exposures); // 重置表单 (除了日期保留默认清空文件等) form.reset(); // 重置日期为今天 const today new Date().toISOString().slice(0,10); fraudDateInput.value today; // 清空文件 screenshotsFile.value ; // 重置字数统计 updateCounters(); // 重新渲染并且保留搜索词不清空可选但刷新列表时搜索词不变比较好 renderExposures(); alert(曝光提交成功感谢您的勇气。); // 滚动到顶部 window.scrollTo({ top: 0, behavior: smooth }); } // 搜索事件 function handleSearch() { currentSearchKeyword keywordSearchInput.value; renderExposures(); } function clearSearch() { keywordSearchInput.value ; currentSearchKeyword ; renderExposures(); } // 初始化一些示例数据让平台不空旷同时展示效果 function initDemoDataIfEmpty() { if(exposures.length 0) { const demoImages []; // 无真实截图展示占位说明为演示添加一个带占位图的演示为了展示弹窗效果我们添加一个示例图片内嵌一个简单SVG? 但最好演示真实图片使用data:image示例 // 演示第一条加入一个简单示例图片基于data:image 一个小图标 const sampleImage { src: data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 100 100%3E%3Crect width100 height100 fill%23fee2e2/%3E%3Ctext x50 y55 font-size12 text-anchormiddle fill%23b91c1c%3E证据截图%3C/text%3E%3C/svg%3E, name: 示例截图 }; const demos [ { id: generateId(), title: 虚假购物平台诈骗, shopName: 数码专营店虚假, fraudDate: 2025-01-15, productName: iPhone 15 Pro Max, contentIntro: 通过微信联系转账后迟迟不发货最后拉黑。对方谎称海关扣押要求补税再次转账5000元后失联。, phone: 155****1234, wechatQQ: wxid_fake123, address: 广东省深圳市某区, urlLink: https://fake-shop-example.com, remarks: 已报警立案回执号A202501001聊天记录已备份。, screenshotImages: [sampleImage] }, { id: generateId(), title: 兼职刷单骗局, shopName: 某某任务平台, fraudDate: 2025-02-10, productName: 刷单垫付金, contentIntro: 骗子以高佣金诱导刷单前两单返现后第三单开始吞款被骗共计8700元。骗子QQ持续活跃。, phone: , wechatQQ: qq:987654321, address: 湖南省长沙市, urlLink: , remarks: 希望大家注意任何垫付都不可信。, screenshotImages: [] } ]; exposures.push(...demos); saveExposures(exposures); } renderExposures(); } // 重置演示数据 (清空全部并重新加入两条demo) function resetToDemo() { if(confirm(重置所有数据将清空当前所有曝光记录并恢复两条示例数据包含示例图片弹窗演示。确定吗)) { const sampleImage { src: data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 100 100%3E%3Crect width100 height100 fill%23ffe0e0/%3E%3Ctext x50 y55 font-size12 text-anchormiddle fill%23b91c1c%3E示例截图%3C/text%3E%3C/svg%3E, name: demo }; const freshDemo [ { id: generateId(), title: 虚假购物平台诈骗, shopName: 数码专营店虚假, fraudDate: 2025-01-15, productName: iPhone 15 Pro Max, contentIntro: 通过微信联系转账后迟迟不发货最后拉黑。对方谎称海关扣押要求补税再次转账5000元后失联。, phone: 155****1234, wechatQQ: wxid_fake123, address: 广东省深圳市某区, urlLink: https://fake-shop-example.com, remarks: 已报警立案回执号A202501001聊天记录已备份。, screenshotImages: [sampleImage] }, { id: generateId(), title: 兼职刷单骗局, shopName: 某某任务平台, fraudDate: 2025-02-10, productName: 刷单垫付金, contentIntro: 骗子以高佣金诱导刷单前两单返现后第三单开始吞款被骗共计8700元。骗子QQ持续活跃。, phone: , wechatQQ: qq:987654321, address: 湖南省长沙市, urlLink: , remarks: 希望大家注意任何垫付都不可信。, screenshotImages: [] } ]; exposures freshDemo; saveExposures(exposures); // 清空搜索 clearSearch(); renderExposures(); alert(已重置为演示数据点击截图图片可体验当前页面弹窗效果); } } // 监听提交 form.addEventListener(submit, addExposure); keywordSearchInput.addEventListener(input, handleSearch); clearSearchBtn.addEventListener(click, clearSearch); resetDemoBtn.addEventListener(click, resetToDemo); // 初始化全局弹窗方法 window.showImageModalFromGlobal function(src) { const modalDiv document.getElementById(imageModal); const modalImgEl document.getElementById(modalImage); if(modalDiv modalImgEl) { modalImgEl.src src; modalDiv.style.display flex; document.body.style.overflow hidden; } }; // 初始化页面 updateCounters(); initDemoDataIfEmpty(); /script /body /html名称建议如下根据平台的定位和功能我为您推荐以下几个标题选项您可以根据使用场景选择---## 一、简洁直白型适合正式场合1. **防骗曝光台**2. **骗子举报平台**3. **诈骗曝光网**4. **反诈信息共享平台**---## 二、警示呼吁型增强正义感5. **让骗子无处遁形**6. **曝光骗局 · 守护正义**7. **别让下一个受害者是你**8. **全民反诈曝光平台**---## 三、口语亲切型适合社区/自媒体9. **骗子避雷区**10. **防骗小黑板**11. **踩坑曝光站**12. **骗局雷达**---## 四、组合创意型个性化13. **照妖镜 · 骗子曝光平台**14. **防骗110**15. **真相曝光墙**16. **反诈避坑指南**---## 五、我的推荐如果希望兼顾**正式感与传播力**推荐 ### **防骗曝光台 · 全民反诈共享平台**如果希望**简洁易记**推荐 ### ⚠️ **骗子曝光台**如果需要配合您的现有页面风格当前页面使用的是 ### ⚠️ **骗子曝光平台**您可以根据平台定位选择或组合使用如需进一步调整风格更严肃/更年轻/更权威我可以继续优化。
