最近死了么，挺火的，用ai写了个活着么，短信自己配置就行，保存到本地.html就可以有大佬可以优化一下短信服务
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>活着么签到系统</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { width: 100%; max-width: 500px; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { background: #4a6bdf; color: white; padding: 25px 20px; text-align: center; } .header h1 { font-size: 24px; font-weight: 600; } .form-container { padding: 25px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } .form-group input { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: border-color 0.3s; } .form-group input:focus { border-color: #4a6bdf; outline: none; box-shadow: 0 0 0 2px rgba(74, 107, 223, 0.2); } .btn { width: 100%; padding: 14px; background: #4a6bdf; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.3s; } .btn:hover { background: #3a5bce; } .btn:disabled { background: #b0b0b0; cursor: not-allowed; } .view { display: none; } .view.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .user-info { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .user-info p { margin-bottom: 8px; color: #555; } .user-info span { font-weight: 500; color: #333; } .checkin-status { text-align: center; padding: 20px; border-radius: 8px; margin-bottom: 20px; font-weight: 500; } .checked-in { background: #e8f5e9; color: #2e7d32; } .not-checked-in { background: #fff3e0; color: #ef6c00; } .history { margin-top: 25px; } .history h3 { margin-bottom: 15px; color: #333; padding-bottom: 8px; border-bottom: 1px solid #eee; } .history-list { max-height: 200px; overflow-y: auto; } .history-item { padding: 12px 15px; background: #f9f9f9; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; } .history-date { color: #555; } .history-time { color: #888; font-size: 14px; } .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; } .alert-warning { background: #fff3e0; color: #ef6c00; border-left: 4px solid #ff9800; } .alert-info { background: #e3f2fd; color: #1565c0; border-left: 4px solid #2196f3; } .sms-config { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 14px; } .sms-config h4 { margin-bottom: 10px; color: #333; } .sms-config p { margin-bottom: 8px; color: #555; } [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 600px) { .container { border-radius: 12px; }
.header { padding: 20px 15px; }
.form-container { padding: 20px 15px; } } </style></head><body> <div class="container"> <div class="header"> <h1>活着么签到系统</h1> </div> <!-- 注册视图 --> <div id="register-view" class="view active"> <div class="form-container"> <h2>手机号注册</h2> <div class="alert alert-info"> 请输入您的手机号进行注册，注册后需要设置紧急联系人才能开始签到 </div> <div class="form-group"> <label for="phone">手机号</label> <input type="tel" id="phone" placeholder="请输入11位手机号" pattern="[0-9]{11}" required> </div> <button id="register-btn" class="btn">注册</button> </div> </div> <!-- 紧急联系人视图 --> <div id="emergency-contact-view" class="view"> <div class="form-container"> <h2>设置紧急联系人</h2> <div class="alert alert-warning"> 紧急联系人不能是自己，建议填写直系亲属信息 </div> <div class="form-group"> <label for="contact-name">联系人姓名</label> <input type="text" id="contact-name" placeholder="请输入联系人姓名" required> </div> <div class="form-group"> <label for="contact-phone">联系人手机号</label> <input type="tel" id="contact-phone" placeholder="请输入11位手机号" pattern="[0-9]{11}" required> </div> <div class="form-group"> <label for="relationship">与您的关系</label> <input type="text" id="relationship" placeholder="例如：父亲、母亲、配偶等" required> </div> <button id="set-contact-btn" class="btn">完成设置</button> </div> </div> <!-- 主视图 --> <div id="main-view" class="view"> <div class="form-container"> <h2>每日打卡</h2> <div class="user-info"> <p>手机号: <span id="user-phone"></span></p> <p>紧急联系人: <span id="emergency-contact"></span> (<span id="contact-relationship"></span>)</p> </div> <div id="checkin-status" class="checkin-status not-checked-in"> 今日尚未签到，请点击下方按钮签到 </div> <button id="checkin-btn" class="btn">今日签到</button> <div class="history"> <h3>签到历史</h3> <div id="history-list" class="history-list"> <!-- 签到历史将在这里显示 --> </div> </div> <div class="sms-config"> <h4>阿里云短信服务配置</h4> <p>AccessKey ID: <span id="access-key-id">已配置</span></p> <p>AccessKey Secret: <span id="access-key-secret">已配置</span></p> <p>签名: <span id="sms-sign">已配置</span></p> <p>模板代码: <span id="template-code">已配置</span></p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // 初始化数据 let userData = { phone: '', emergencyContact: { name: '', phone: '', relationship: '' }, checkInHistory: [], lastCheckInDate: null };
// 从localStorage加载数据 function loadData() { const savedData = localStorage.getItem('checkInData'); if (savedData) { userData = JSON.parse(savedData); updateUI(); } }
// 保存数据到localStorage function saveData() { localStorage.setItem('checkInData', JSON.stringify(userData)); }
// 更新UI function updateUI() { if (userData.phone && !userData.emergencyContact.name) { showView('emergency-contact-view'); } else if (userData.phone && userData.emergencyContact.name) { showView('main-view'); updateMainView(); } else { showView('register-view'); } }
// 显示指定视图 function showView(viewId) { document.querySelectorAll('.view').forEach(view => { view.classList.remove('active'); }); document.getElementById(viewId).classList.add('active'); }
// 更新主视图 function updateMainView() { document.getElementById('user-phone').textContent = userData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); document.getElementById('emergency-contact').textContent = userData.emergencyContact.name; document.getElementById('contact-relationship').textContent = userData.emergencyContact.relationship; // 更新签到状态 const today = new Date().toISOString().split('T')[0]; const hasCheckedIn = userData.checkInHistory.some(record => record.date === today); const checkinStatus = document.getElementById('checkin-status'); const checkinBtn = document.getElementById('checkin-btn'); if (hasCheckedIn) { checkinStatus.textContent = `您今天已于 ${userData.checkInHistory.find(r => r.date === today).time} 签到成功！`; checkinStatus.className = 'checkin-status checked-in'; checkinBtn.textContent = '今日已签到'; checkinBtn.disabled = true; } else { checkinStatus.textContent = '今日尚未签到，请点击下方按钮签到'; checkinStatus.className = 'checkin-status not-checked-in'; checkinBtn.textContent = '今日签到'; checkinBtn.disabled = false; } // 更新签到历史 const historyList = document.getElementById('history-list'); historyList.innerHTML = ''; if (userData.checkInHistory.length === 0) { historyList.innerHTML = '<div class="history-item">暂无签到记录</div>'; } else { // 按日期降序排列 const sortedHistory = [...userData.checkInHistory].sort((a, b) => new Date(b.date) - new Date(a.date)); sortedHistory.forEach(record => { const item = document.createElement('div'); item.className = 'history-item'; item.innerHTML = ` <div> <div class="history-date">${record.date}</div> </div> <div class="history-time">${record.time}</div> `; historyList.appendChild(item); }); } // 检查连续未签到天数 checkConsecutiveMissedDays(); }
// 检查连续未签到天数 function checkConsecutiveMissedDays() { if (!userData.lastCheckInDate) return; const lastCheckIn = new Date(userData.lastCheckInDate); const today = new Date(); today.setHours(0, 0, 0, 0); const diffTime = Math.abs(today - lastCheckIn); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (diffDays >= 3) { // 模拟发送短信 sendSMSNotification(diffDays); } }
// 模拟发送短信通知 function sendSMSNotification(daysMissed) { // 在实际应用中，这里会调用阿里云短信API console.log(`正在发送短信通知紧急联系人 ${userData.emergencyContact.name} (${userData.emergencyContact.phone})`); console.log(`短信内容: 您的亲属 ${userData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')} 已连续 ${daysMissed} 天未签到，请及时联系确认安全。`); alert(`模拟短信发送成功！\n\n已向紧急联系人 ${userData.emergencyContact.name} (${userData.emergencyContact.phone}) 发送通知：\n"您的亲属已连续 ${daysMissed} 天未签到，请及时联系确认安全。"`); // 重置计数器（在实际应用中，可能需要更复杂的逻辑） userData.lastCheckInDate = new Date().toISOString().split('T')[0]; saveData(); }
// 注册按钮点击事件 document.getElementById('register-btn').addEventListener('click', function() { const phone = document.getElementById('phone').value; if (!/^\d{11}$/.test(phone)) { alert('请输入有效的11位手机号！'); return; } userData.phone = phone; saveData(); updateUI(); });
// 设置紧急联系人按钮点击事件 document.getElementById('set-contact-btn').addEventListener('click', function() { const name = document.getElementById('contact-name').value; const phone = document.getElementById('contact-phone').value; const relationship = document.getElementById('relationship').value; if (!name || !/^\d{11}$/.test(phone) || !relationship) { alert('请填写完整的紧急联系人信息！'); return; } if (phone === userData.phone) { alert('紧急联系人不能是自己！'); return; } userData.emergencyContact = { name, phone, relationship }; saveData(); updateUI(); });
// 签到按钮点击事件 document.getElementById('checkin-btn').addEventListener('click', function() { const today = new Date().toISOString().split('T')[0]; const now = new Date(); const time = now.toTimeString().split(' ')[0].substring(0, 5); // 检查今天是否已经签到 const hasCheckedIn = userData.checkInHistory.some(record => record.date === today); if (hasCheckedIn) { alert('您今天已经签到过了！'); return; } // 添加签到记录 userData.checkInHistory.push({ date: today, time: time }); // 更新最后签到日期 userData.lastCheckInDate = today; saveData(); updateUI(); alert('签到成功！'); });
// 初始化应用 loadData();
// 每天检查一次连续未签到情况（在实际应用中，这应该在后端完成） setInterval(checkConsecutiveMissedDays, 24 * 60 * 60 * 1000); }); </script></body></html>复制代码
| 
