<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>眠安 - 助眠疗愈应用</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } body { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; color: #4a5568; line-height: 1.6; } .container { width: 768px; height: 1024px; background: rgba(255, 255, 255, 0.92); border-radius: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.03); overflow: hidden; position: relative; } .app-header { padding: 40px 0; text-align: center; background: linear-gradient(to bottom, #ffffff, #f5f7ff); border-bottom: 1px solid #edf2f7; } .app-logo { font-size: 36px; color: #718096; margin-bottom: 12px; } h1 { font-size: 32px; font-weight: 300; color: #4a5568; letter-spacing: 0.5px; } .app-subtitle { font-size: 18px; font-weight: 300; color: #a0aec0; margin-top: 8px; } .main-content { padding: 40px; } .section-title { font-size: 22px; font-weight: 400; color: #718096; margin-bottom: 30px; text-align: center; } /* 状态选择网格 */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 50px; } .grid-item { background: white; border-radius: 16px; padding: 28px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border: 1px solid #edf2f7; cursor: pointer; } .grid-item:hover { transform: translateY(-5px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07); border-color: #e2e8f0; } .grid-item i { font-size: 40px; margin-bottom: 20px; background: linear-gradient(135deg, #a3bffa, #667eea); -webkit-background-clip: text; background-clip: text; color: transparent; } .grid-item:nth-child(2) i { background: linear-gradient(135deg, #90cdf4, #4299e1); -webkit-background-clip: text; background-clip: text; } .grid-item:nth-child(3) i { background: linear-gradient(135deg, #9de4d8, #48bb78); -webkit-background-clip: text; background-clip: text; } .grid-item:nth-child(4) i { background: linear-gradient(135deg, #fbb6ce, #ed64a6); -webkit-background-clip: text; background-clip: text; } .grid-item:nth-child(5) i { background: linear-gradient(135deg, #ffd6b3, #ed8936); -webkit-background-clip: text; background-clip: text; } .grid-item:nth-child(6) i { background: linear-gradient(135deg, #d6bcfa, #9f7aea); -webkit-background-clip: text; background-clip: text; } .grid-item h3 { font-size: 18px; font-weight: 500; text-align: center; } /* 定时选择器 */ .timer-container { background: #f8fafc; border-radius: 18px; padding: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); border: 1px solid #e2e8f0; } .timer-options { display: flex; justify-content: space-between; } .timer-option { background: white; flex: 0 0 28%; border-radius: 14px; padding: 30px 15px; display: flex; flex-direction: column; align-items: center; border: 2px solid #e2e8f0; cursor: pointer; transition: all 0.3s ease; } .timer-option:hover { border-color: #cbd5e0; transform: scale(1.03); } .timer-option.active { border-color: #667eea; background: #f0f5ff; } .timer-option h4 { font-size: 22px; font-weight: 500; margin-bottom: 10px; } .timer-option p { font-size: 15px; color: #718096; text-align: center; line-height: 1.4; } /* 开始按钮 */ .start-button { width: 200px; padding: 20px; border-radius: 50px; background: linear-gradient(135deg, #667eea, #4c51bf); color: white; font-size: 20px; font-weight: 500; display: block; margin: 40px auto 20px; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); letter-spacing: 0.5px; } .start-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } .start-button:active { transform: translateY(1px); } .start-button:disabled { background: #cbd5e0; box-shadow: none; transform: none; cursor: not-allowed; } /* 底部导航 */ .app-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px; background: linear-gradient(to top, #ffffff, #f8fafc); border-top: 1px solid #edf2f7; display: flex; justify-content: space-around; } .footer-button { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .footer-button:hover { background: #edf2f7; } .footer-button i { font-size: 24px; color: #718096; margin-bottom: 5px; } .footer-button span { font-size: 13px; color: #718096; } /* 选中状态提示 */ .selection-info { text-align: center; margin-top: 25px; font-size: 17px; color: #4a5568; min-height: 28px; } /* 响应式调整 */ @media (max-width: 768px) { body { padding: 20px; } .container { width: 100%; height: auto; max-height: 95vh; } } .counter-icon { font-size: 28px; color: #667eea; margin-top: 15px; } .notification { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: #48bb78; color: white; padding: 15px 30px; border-radius: 30px; font-size: 16px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 1000; transition: top 0.5s ease; } </style> </head> <body> <div class="container"> <div class="app-header"> <div class="app-logo"> <i class="fas fa-cloud-moon"></i> </div> <h1>眠安 · 助眠疗愈</h1> <div class="app-subtitle">让自然的声音带您进入深度睡眠</div> </div> <div class="main-content"> <h2 class="section-title">您希望缓解哪方面的问题?</h2> <div class="grid-container"> <div class="grid-item" data-state="难以入睡"> <i class="fas fa-bed"></i> <h3>难以入睡</h3> </div> <div class="grid-item" data-state="焦虑压力"> <i class="fas fa-brain"></i> <h3>焦虑压力</h3> </div> <div class="grid-item" data-state="放松身心"> <i class="fas fa-spa"></i> <h3>放松身心</h3> </div> <div class="grid-item" data-state="深度休息"> <i class="fas fa-heartbeat"></i> <h3>深度休息</h3> </div> <div class="grid-item" data-state="缓解头痛"> <i class="fas fa-head-side-virus"></i> <h3>缓解头痛</h3> </div> <div class="grid-item" data-state="冥想专注"> <i class="fas fa-leaf"></i> <h3>冥想专注</h3> </div> </div> <h2 class="section-title">选择冥想时间</h2> <div class="timer-container"> <div class="timer-options"> <div class="timer-option" data-minutes="5"> <h4>5分钟</h4> <p>快速平静思绪,找回专注</p> <i class="fas fa-hourglass-start counter-icon"></i> </div> <div class="timer-option" data-minutes="10"> <h4>10分钟</h4> <p>缓解轻度压力,放松身心</p> <i class="fas fa-hourglass-half counter-icon"></i> </div> <div class="timer-option" data-minutes="15"> <h4>15分钟</h4> <p>深度放松,促进高质量睡眠</p> <i class="fas fa-hourglass counter-icon"></i> </div> </div> </div> <div class="selection-info" id="selectionInfo"> 请选择一个状态和时间开始 </div> <button class="start-button" disabled id="startButton"> 开始冥想旅程 </button> </div> <div class="app-footer"> <div class="footer-button"> <i class="fas fa-home"></i> <span>首页</span> </div> <div class="footer-button"> <i class="fas fa-compass"></i> <span>探索</span> </div> <div class="footer-button"> <i class="fas fa-history"></i> <span>记录</span> </div> <div class="footer-button"> <i class="fas fa-user"></i> <span>我的</span> </div> </div> </div> <div class="notification" id="notification"> 冥想即将开始,请调整到一个舒适的姿势 </div> <script> // DOM元素引用 const stateItems = document.querySelectorAll('.grid-item'); const timerOptions = document.querySelectorAll('.timer-option'); const startButton = document.getElementById('startButton'); const selectionInfo = document.getElementById('selectionInfo'); const notification = document.getElementById('notification'); // 当前选择的状态 let selectedState = null; let selectedMinutes = null; // 状态选择处理 stateItems.forEach(item => { item.addEventListener('click', () => { // 移除之前选择的样式 stateItems.forEach(el => el.classList.remove('selected')); // 添加当前选择的样式 item.classList.add('selected'); // 更新选择的状态 selectedState = item.dataset.state; updateSelectionInfo(); checkStartButton(); }); }); // 定时选择处理 timerOptions.forEach(option => { option.addEventListener('click', () => { // 移除之前选择的样式 timerOptions.forEach(el => el.classList.remove('active')); // 添加当前选择的样式 option.classList.add('active'); // 更新选择的时间 selectedMinutes = option.dataset.minutes; updateSelectionInfo(); checkStartButton(); }); }); // 开始按钮处理 startButton.addEventListener('click', () => { // 显示通知 notification.style.top = "30px"; setTimeout(() => { notification.style.top = "-60px"; }, 3000); // 这里实际应用中会跳转到播放页面 console.log(`开始 ${selectedMinutes} 分钟的 "${selectedState}" 冥想`); }); // 更新选择信息 function updateSelectionInfo() { if (selectedState && selectedMinutes) { selectionInfo.innerHTML = `即将开始: <strong>${selectedState}</strong> | 时长: <strong>${selectedMinutes}分钟</strong>`; } else if (selectedState) { selectionInfo.innerHTML = `已选择: <strong>${selectedState}</strong> | 请选择冥想时长`; } else if (selectedMinutes) { selectionInfo.innerHTML = `冥想时长: <strong>${selectedMinutes}分钟</strong> | 请选择需要缓解的状态`; } else { selectionInfo.innerHTML = "请选择一个状态和时间开始"; } } // 检查是否可以启用开始按钮 function checkStartButton() { if (selectedState && selectedMinutes) { startButton.disabled = false; } else { startButton.disabled = true; } } // 添加悬停动画效果 document.querySelectorAll('.grid-item, .timer-option').forEach(item => { item.addEventListener('mouseover', function() { this.style.transform = 'scale(1.03)'; }); item.addEventListener('mouseout', function() { this.style.transform = 'scale(1)'; }); }); </script> </body> </html>
相关知识
6款睡眠App,助你安睡
小睡眠APP记录睡眠的图文操作
十大好用的助眠app 哄睡app哪个好 解压助眠软件推荐
6款助眠APP,助你甜美梦境
助眠APP设计
10款助眠APP推荐,失眠者必备
利用斑马鱼模型评价安神助眠功效
健康催眠助手app下载
健康催眠助手app免费下载
睡眠app是如何检测睡眠的
网址: 眠安助眠APP原型图 https://m.trfsz.com/newsview1651185.html