1. 最近死了么，挺火的，用ai写了个活着么，短信自己配置就行，保存到本地.html就可以..
    短信自己配置就行，保存到本地.html就可以

  2. <!DOCTYPE html>
  3. <html lang=“zh-CN”>
  4. <head>
  5.     <meta charset=“UTF-8”>
  6.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  7.     <title>活着么签到系统</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.             font-family: ‘PingFang SC’, ‘Microsoft YaHei’, sans-serif;
  14.         }
  15.          
  16.         body {
  17.             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  18.             min-height: 100vh;
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             padding: 20px;
  23.         }
  24.          
  25.         .container {
  26.             width: 100%;
  27.             max-width: 500px;
  28.             background: white;
  29.             border-radius: 16px;
  30.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  31.             overflow: hidden;
  32.         }
  33.          
  34.         .header {
  35.             background: #4a6bdf;
  36.             color: white;
  37.             padding: 25px 20px;
  38.             text-align: center;
  39.         }
  40.          
  41.         .header h1 {
  42.             font-size: 24px;
  43.             font-weight: 600;
  44.         }
  45.          
  46.         .form-container {
  47.             padding: 25px;
  48.         }
  49.          
  50.         .form-group {
  51.             margin-bottom: 20px;
  52.         }
  53.          
  54.         .form-group label {
  55.             display: block;
  56.             margin-bottom: 8px;
  57.             font-weight: 500;
  58.             color: #333;
  59.         }
  60.          
  61.         .form-group input {
  62.             width: 100%;
  63.             padding: 14px;
  64.             border: 1px solid #ddd;
  65.             border-radius: 8px;
  66.             font-size: 16px;
  67.             transition: border-color 0.3s;
  68.         }
  69.          
  70.         .form-group input:focus {
  71.             border-color: #4a6bdf;
  72.             outline: none;
  73.             box-shadow: 0 0 0 2px rgba(74, 107, 223, 0.2);
  74.         }
  75.          
  76.         .btn {
  77.             width: 100%;
  78.             padding: 14px;
  79.             background: #4a6bdf;
  80.             color: white;
  81.             border: none;
  82.             border-radius: 8px;
  83.             font-size: 16px;
  84.             font-weight: 500;
  85.             cursor: pointer;
  86.             transition: background 0.3s;
  87.         }
  88.          
  89.         .btn:hover {
  90.             background: #3a5bce;
  91.         }
  92.          
  93.         .btn:disabled {
  94.             background: #b0b0b0;
  95.             cursor: not-allowed;
  96.         }
  97.          
  98.         .view {
  99.             display: none;
  100.         }
  101.          
  102.         .view.active {
  103.             display: block;
  104.             animation: fadeIn 0.3s ease;
  105.         }
  106.          
  107.         @keyframes fadeIn {
  108.             from { opacity: 0; }
  109.             to { opacity: 1; }
  110.         }
  111.          
  112.         .user-info {
  113.             background: #f9f9f9;
  114.             padding: 15px;
  115.             border-radius: 8px;
  116.             margin-bottom: 20px;
  117.         }
  118.          
  119.         .user-info p {
  120.             margin-bottom: 8px;
  121.             color: #555;
  122.         }
  123.          
  124.         .user-info span {
  125.             font-weight: 500;
  126.             color: #333;
  127.         }
  128.          
  129.         .checkin-status {
  130.             text-align: center;
  131.             padding: 20px;
  132.             border-radius: 8px;
  133.             margin-bottom: 20px;
  134.             font-weight: 500;
  135.         }
  136.          
  137.         .checked-in {
  138.             background: #e8f5e9;
  139.             color: #2e7d32;
  140.         }
  141.          
  142.         .not-checked-in {
  143.             background: #fff3e0;
  144.             color: #ef6c00;
  145.         }
  146.          
  147.         .history {
  148.             margin-top: 25px;
  149.         }
  150.          
  151.         .history h3 {
  152.             margin-bottom: 15px;
  153.             color: #333;
  154.             padding-bottom: 8px;
  155.             border-bottom: 1px solid #eee;
  156.         }
  157.          
  158.         .history-list {
  159.             max-height: 200px;
  160.             overflow-y: auto;
  161.         }
  162.          
  163.         .history-item {
  164.             padding: 12px 15px;
  165.             background: #f9f9f9;
  166.             border-radius: 8px;
  167.             margin-bottom: 10px;
  168.             display: flex;
  169.             justify-content: space-between;
  170.         }
  171.          
  172.         .history-date {
  173.             color: #555;
  174.         }
  175.          
  176.         .history-time {
  177.             color: #888;
  178.             font-size: 14px;
  179.         }
  180.          
  181.         .alert {
  182.             padding: 15px;
  183.             border-radius: 8px;
  184.             margin-bottom: 20px;
  185.             font-size: 14px;
  186.         }
  187.          
  188.         .alert-warning {
  189.             background: #fff3e0;
  190.             color: #ef6c00;
  191.             border-left: 4px solid #ff9800;
  192.         }
  193.          
  194.         .alert-info {
  195.             background: #e3f2fd;
  196.             color: #1565c0;
  197.             border-left: 4px solid #2196f3;
  198.         }
  199.          
  200.         .sms-config {
  201.             background: #f9f9f9;
  202.             padding: 15px;
  203.             border-radius: 8px;
  204.             margin-top: 20px;
  205.             font-size: 14px;
  206.         }
  207.          
  208.         .sms-config h4 {
  209.             margin-bottom: 10px;
  210.             color: #333;
  211.         }
  212.          
  213.         .sms-config p {
  214.             margin-bottom: 8px;
  215.             color: #555;
  216.         }
  217.          
  218.         [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 600px) {
  219.             .container {
  220.                 border-radius: 12px;
  221.             }
  222.             
  223.             .header {
  224.                 padding: 20px 15px;
  225.             }
  226.             
  227.             .form-container {
  228.                 padding: 20px 15px;
  229.             }
  230.         }
  231.     </style>
  232. </head>
  233. <body>
  234.     <div class=“container”>
  235.         <div class=“header”>
  236.             <h1>活着么签到系统</h1>
  237.         </div>
  239.         <!– 注册视图 –>
  240.         <div id=“register-view” class=“view active”>
  241.             <div class=“form-container”>
  242.                 <h2>手机号注册</h2>
  243.                 <div class=“alert alert-info”>
  244.                     请输入您的手机号进行注册，注册后需要设置紧急联系人才能开始签到
  245.                 </div>
  247.                 <div class=“form-group”>
  248.                     <label for=“phone”>手机号</label>
  249.                     <input type=“tel” id=“phone” placeholder=“请输入11位手机号” pattern=“[0-9]{11}” required>
  250.                 </div>
  252.                 <button id=“register-btn” class=“btn”>注册</button>
  253.             </div>
  254.         </div>
  256.         <!– 紧急联系人视图 –>
  257.         <div id=“emergency-contact-view” class=“view”>
  258.             <div class=“form-container”>
  259.                 <h2>设置紧急联系人</h2>
  260.                 <div class=“alert alert-warning”>
  261.                     紧急联系人不能是自己，建议填写直系亲属信息
  262.                 </div>
  264.                 <div class=“form-group”>
  265.                     <label for=“contact-name”>联系人姓名</label>
  266.                     <input type=“text” id=“contact-name” placeholder=“请输入联系人姓名” required>
  267.                 </div>
  269.                 <div class=“form-group”>
  270.                     <label for=“contact-phone”>联系人手机号</label>
  271.                     <input type=“tel” id=“contact-phone” placeholder=“请输入11位手机号” pattern=“[0-9]{11}” required>
  272.                 </div>
  274.                 <div class=“form-group”>
  275.                     <label for=“relationship”>与您的关系</label>
  276.                     <input type=“text” id=“relationship” placeholder=“例如：父亲、母亲、配偶等” required>
  277.                 </div>
  279.                 <button id=“set-contact-btn” class=“btn”>完成设置</button>
  280.             </div>
  281.         </div>
  283.         <!– 主视图 –>
  284.         <div id=“main-view” class=“view”>
  285.             <div class=“form-container”>
  286.                 <h2>每日打卡</h2>
  288.                 <div class=“user-info”>
  289.                     <p>手机号: <span id=“user-phone”></span></p>
  290.                     <p>紧急联系人: <span id=“emergency-contact”></span> (<span id=“contact-relationship”></span>)</p>
  291.                 </div>
  293.                 <div id=“checkin-status” class=“checkin-status not-checked-in”>
  294.                     今日尚未签到，请点击下方按钮签到
  295.                 </div>
  297.                 <button id=“checkin-btn” class=“btn”>今日签到</button>
  299.                 <div class=“history”>
  300.                     <h3>签到历史</h3>
  301.                     <div id=“history-list” class=“history-list”>
  302.                         <!– 签到历史将在这里显示 –>
  303.                     </div>
  304.                 </div>
  306.                 <div class=“sms-config”>
  307.                     <h4>阿里云短信服务配置</h4>
  308.                     <p>AccessKey ID: <span id=“access-key-id”>已配置</span></p>
  309.                     <p>AccessKey Secret: <span id=“access-key-secret”>已配置</span></p>
  310.                     <p>签名: <span id=“sms-sign”>已配置</span></p>
  311.                     <p>模板代码: <span id=“template-code”>已配置</span></p>
  312.                 </div>
  313.             </div>
  314.         </div>
  315.     </div>
  317.     <script>
  318.         document.addEventListener(‘DOMContentLoaded’, function() {
  319.             // 初始化数据
  320.             let userData = {
  321.                 phone: ”,
  322.                 emergencyContact: {
  323.                     name: ”,
  324.                     phone: ”,
  325.                     relationship: ”
  326.                 },
  327.                 checkInHistory: [],
  328.                 lastCheckInDate: null
  329.             };
  330.             
  331.             // 从localStorage加载数据
  332.             function loadData() {
  333.                 const savedData = localStorage.getItem(‘checkInData’);
  334.                 if (savedData) {
  335.                     userData = JSON.parse(savedData);
  336.                     updateUI();
  337.                 }
  338.             }
  339.             
  340.             // 保存数据到localStorage
  341.             function saveData() {
  342.                 localStorage.setItem(‘checkInData’, JSON.stringify(userData));
  343.             }
  344.             
  345.             // 更新UI
  346.             function updateUI() {
  347.                 if (userData.phone && !userData.emergencyContact.name) {
  348.                     showView(’emergency-contact-view’);
  349.                 } else if (userData.phone && userData.emergencyContact.name) {
  350.                     showView(‘main-view’);
  351.                     updateMainView();
  352.                 } else {
  353.                     showView(‘register-view’);
  354.                 }
  355.             }
  356.             
  357.             // 显示指定视图
  358.             function showView(viewId) {
  359.                 document.querySelectorAll(‘.view’).forEach(view => {
  360.                     view.classList.remove(‘active’);
  361.                 });
  362.                 document.getElementById(viewId).classList.add(‘active’);
  363.             }
  364.             
  365.             // 更新主视图
  366.             function updateMainView() {
  367.                 document.getElementById(‘user-phone’).textContent = userData.phone.replace(/(\d{3})\d{4}(\d{4})/, ‘$1****$2’);
  368.                 document.getElementById(’emergency-contact’).textContent = userData.emergencyContact.name;
  369.                 document.getElementById(‘contact-relationship’).textContent = userData.emergencyContact.relationship;
  370.                  
  371.                 // 更新签到状态
  372.                 const today = new Date().toISOString().split(‘T’)[0];
  373.                 const hasCheckedIn = userData.checkInHistory.some(record => record.date === today);
  374.                  
  375.                 const checkinStatus = document.getElementById(‘checkin-status’);
  376.                 const checkinBtn = document.getElementById(‘checkin-btn’);
  377.                  
  378.                 if (hasCheckedIn) {
  379.                     checkinStatus.textContent = `您今天已于 ${userData.checkInHistory.find(r => r.date === today).time} 签到成功！`;
  380.                     checkinStatus.className = ‘checkin-status checked-in’;
  381.                     checkinBtn.textContent = ‘今日已签到’;
  382.                     checkinBtn.disabled = true;
  383.                 } else {
  384.                     checkinStatus.textContent = ‘今日尚未签到，请点击下方按钮签到’;
  385.                     checkinStatus.className = ‘checkin-status not-checked-in’;
  386.                     checkinBtn.textContent = ‘今日签到’;
  387.                     checkinBtn.disabled = false;
  388.                 }
  389.                  
  390.                 // 更新签到历史
  391.                 const historyList = document.getElementById(‘history-list’);
  392.                 historyList.innerHTML = ”;
  393.                  
  394.                 if (userData.checkInHistory.length === 0) {
  395.                     historyList.innerHTML = ‘<div class=”history-item”>暂无签到记录</div>’;
  396.                 } else {
  397.                     // 按日期降序排列
  398.                     const sortedHistory = […userData.checkInHistory].sort((a, b) => new Date(b.date) – new Date(a.date));
  399.                      
  400.                     sortedHistory.forEach(record => {
  401.                         const item = document.createElement(‘div’);
  402.                         item.className = ‘history-item’;
  403.                         item.innerHTML = `
  404.                             <div>
  405.                                 <div class=”history-date”>${record.date}</div>
  406.                             </div>
  407.                             <div class=”history-time”>${record.time}</div>
  408.                         `;
  409.                         historyList.appendChild(item);
  410.                     });
  411.                 }
  412.                  
  413.                 // 检查连续未签到天数
  414.                 checkConsecutiveMissedDays();
  415.             }
  416.             
  417.             // 检查连续未签到天数
  418.             function checkConsecutiveMissedDays() {
  419.                 if (!userData.lastCheckInDate) return;
  420.                  
  421.                 const lastCheckIn = new Date(userData.lastCheckInDate);
  422.                 const today = new Date();
  423.                 today.setHours(0, 0, 0, 0);
  424.                  
  425.                 const diffTime = Math.abs(today – lastCheckIn);
  426.                 const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  427.                  
  428.                 if (diffDays >= 3) {
  429.                     // 模拟发送短信
  430.                     sendSMSNotification(diffDays);
  431.                 }
  432.             }
  433.             
  434.             // 模拟发送短信通知
  435.             function sendSMSNotification(daysMissed) {
  436.                 // 在实际应用中，这里会调用阿里云短信API
  437.                 console.log(`正在发送短信通知紧急联系人 ${userData.emergencyContact.name} (${userData.emergencyContact.phone})`);
  438.                 console.log(`短信内容: 您的亲属 ${userData.phone.replace(/(\d{3})\d{4}(\d{4})/, ‘$1****$2’)} 已连续 ${daysMissed} 天未签到，请及时联系确认安全。`);
  439.                  
  440.                 alert(`模拟短信发送成功！\n\n已向紧急联系人 ${userData.emergencyContact.name} (${userData.emergencyContact.phone}) 发送通知：\n”您的亲属已连续 ${daysMissed} 天未签到，请及时联系确认安全。”`);
  441.                  
  442.                 // 重置计数器（在实际应用中，可能需要更复杂的逻辑）
  443.                 userData.lastCheckInDate = new Date().toISOString().split(‘T’)[0];
  444.                 saveData();
  445.             }
  446.             
  447.             // 注册按钮点击事件
  448.             document.getElementById(‘register-btn’).addEventListener(‘click’, function() {
  449.                 const phone = document.getElementById(‘phone’).value;
  450.                  
  451.                 if (!/^\d{11}$/.test(phone)) {
  452.                     alert(‘请输入有效的11位手机号！’);
  453.                     return;
  454.                 }
  455.                  
  456.                 userData.phone = phone;
  457.                 saveData();
  458.                 updateUI();
  459.             });
  460.             
  461.             // 设置紧急联系人按钮点击事件
  462.             document.getElementById(‘set-contact-btn’).addEventListener(‘click’, function() {
  463.                 const name = document.getElementById(‘contact-name’).value;
  464.                 const phone = document.getElementById(‘contact-phone’).value;
  465.                 const relationship = document.getElementById(‘relationship’).value;
  466.                  
  467.                 if (!name || !/^\d{11}$/.test(phone) || !relationship) {
  468.                     alert(‘请填写完整的紧急联系人信息！’);
  469.                     return;
  470.                 }
  471.                  
  472.                 if (phone === userData.phone) {
  473.                     alert(‘紧急联系人不能是自己！’);
  474.                     return;
  475.                 }
  476.                  
  477.                 userData.emergencyContact = {
  478.                     name,
  479.                     phone,
  480.                     relationship
  481.                 };
  482.                  
  483.                 saveData();
  484.                 updateUI();
  485.             });
  486.             
  487.             // 签到按钮点击事件
  488.             document.getElementById(‘checkin-btn’).addEventListener(‘click’, function() {
  489.                 const today = new Date().toISOString().split(‘T’)[0];
  490.                 const now = new Date();
  491.                 const time = now.toTimeString().split(‘ ‘)[0].substring(0, 5);
  492.                  
  493.                 // 检查今天是否已经签到
  494.                 const hasCheckedIn = userData.checkInHistory.some(record => record.date === today);
  495.                 if (hasCheckedIn) {
  496.                     alert(‘您今天已经签到过了！’);
  497.                     return;
  498.                 }
  499.                  
  500.                 // 添加签到记录
  501.                 userData.checkInHistory.push({
  502.                     date: today,
  503.                     time: time
  504.                 });
  505.                  
  506.                 // 更新最后签到日期
  507.                 userData.lastCheckInDate = today;
  508.                  
  509.                 saveData();
  510.                 updateUI();
  511.                  
  512.                 alert(‘签到成功！’);
  513.             });
  514.             
  515.             // 初始化应用
  516.             loadData();
  517.             
  518.             // 每天检查一次连续未签到情况（在实际应用中，这应该在后端完成）
  519.             setInterval(checkConsecutiveMissedDays, 24 * 60 * 60 * 1000);
  520.         });
  521.     </script>
  522. </body>
  523. </html>
声明：本站所有文章均为永久链接，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系邮箱:jyxs_top@163.com进行处理。