返回列表 发布新帖

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

2662 1
小K网牛逼 发表于 昨天 00:00 | 查看全部 阅读模式 <

马上注册,结交更多好友,享用更多功能,让你轻松玩转小K网。

您需要 登录 才可以下载或查看,没有账号?立即注册 微信登录

×
最近死了么,挺火的,用ai写了个活着么,短信自己配置就行,保存到本地.html就可以有大佬可以优化一下短信服务

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

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

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



评论1

手机用户MU33341Lv.1 发表于 昨天 14:17 | 查看全部 <
🚀顶你上去Go Go Go!
回复

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册 微信登录

本版积分规则

您需要 登录 后才可以回复,轻松玩转社区,没有帐号?立即注册
快速回复
关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表