首頁 資訊 眠安助眠APP原型圖

眠安助眠APP原型圖

來源：泰然健康網(wǎng) 時(shí)間：2025年08月08日 06:20

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>眠安 - 助眠療愈應(yīng)用</title> <link rel="stylesheet" > <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; } /* 狀態(tài)選擇網(wǎng)格 */ .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; } /* 定時(shí)選擇器 */ .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; } /* 底部導(dǎo)航 */ .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; } /* 選中狀態(tài)提示 */ .selection-info { text-align: center; margin-top: 25px; font-size: 17px; color: #4a5568; min-height: 28px; } /* 響應(yīng)式調(diào)整 */ @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">讓自然的聲音帶您進(jìn)入深度睡眠</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">選擇冥想時(shí)間</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>深度放松，促進(jìn)高質(zhì)量睡眠</p> <i class="fas fa-hourglass counter-icon"></i> </div> </div> </div> <div class="selection-info" id="selectionInfo"> 請選擇一個(gè)狀態(tài)和時(shí)間開始 </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"> 冥想即將開始，請調(diào)整到一個(gè)舒適的姿勢 </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'); // 當(dāng)前選擇的狀態(tài) let selectedState = null; let selectedMinutes = null; // 狀態(tài)選擇處理 stateItems.forEach(item => { item.addEventListener('click', () => { // 移除之前選擇的樣式 stateItems.forEach(el => el.classList.remove('selected')); // 添加當(dāng)前選擇的樣式 item.classList.add('selected'); // 更新選擇的狀態(tài) selectedState = item.dataset.state; updateSelectionInfo(); checkStartButton(); }); }); // 定時(shí)選擇處理 timerOptions.forEach(option => { option.addEventListener('click', () => { // 移除之前選擇的樣式 timerOptions.forEach(el => el.classList.remove('active')); // 添加當(dāng)前選擇的樣式 option.classList.add('active'); // 更新選擇的時(shí)間 selectedMinutes = option.dataset.minutes; updateSelectionInfo(); checkStartButton(); }); }); // 開始按鈕處理 startButton.addEventListener('click', () => { // 顯示通知 notification.style.top = "30px"; setTimeout(() => { notification.style.top = "-60px"; }, 3000); // 這里實(shí)際應(yīng)用中會跳轉(zhuǎn)到播放頁面 console.log(`開始 ${selectedMinutes} 分鐘的 "${selectedState}" 冥想`); }); // 更新選擇信息 function updateSelectionInfo() { if (selectedState && selectedMinutes) { selectionInfo.innerHTML = `即將開始: <strong>${selectedState}</strong> | 時(shí)長: <strong>${selectedMinutes}分鐘</strong>`; } else if (selectedState) { selectionInfo.innerHTML = `已選擇: <strong>${selectedState}</strong> | 請選擇冥想時(shí)長`; } else if (selectedMinutes) { selectionInfo.innerHTML = `冥想時(shí)長: <strong>${selectedMinutes}分鐘</strong> | 請選擇需要緩解的狀態(tài)`; } else { selectionInfo.innerHTML = "請選擇一個(gè)狀態(tài)和時(shí)間開始"; } } // 檢查是否可以啟用開始按鈕 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>

相關(guān)知識

6款睡眠App，助你安睡
小睡眠APP記錄睡眠的圖文操作
十大好用的助眠app 哄睡app哪個(gè)好 解壓助眠軟件推薦
6款助眠APP，助你甜美夢境
助眠APP設(shè)計(jì)
10款助眠APP推薦，失眠者必備
利用斑馬魚模型評價(jià)安神助眠功效
健康催眠助手app下載
健康催眠助手app免費(fèi)下載
睡眠app是如何檢測睡眠的

網(wǎng)址: 眠安助眠APP原型圖 http://m.u1s5d6.cn/newsview1651185.html

推薦資訊