GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Sleep Screen Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background:13 radial-gradient(1200px 800px at 50% 0%, #233a7a 0%, #1b2a6b 35%, #2b2462 60%, #261a57 100%);14 color: #EDE8FF;15 }16 /* subtle stars */17 #render-target:before {18 content: "";19 position: absolute;20 inset: 0;21 background-image:22 radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.35) 99%, transparent 100%),23 radial-gradient(1px 1px at 30% 35%, rgba(255,255,255,0.35) 99%, transparent 100%),24 radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.35) 99%, transparent 100%),25 radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.35) 99%, transparent 100%),26 radial-gradient(1px 1px at 20% 70%, rgba(255,255,255,0.35) 99%, transparent 100%),27 radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.35) 99%, transparent 100%);28 pointer-events: none;29 }30 31 .screen-padding { padding: 80px 60px 0 60px; position: relative; }32 33 .top-title {34 font-size: 120px;35 font-weight: 800;36 letter-spacing: 1px;37 }38 39 .bell {40 position: absolute;41 top: 70px;42 right: 60px;43 width: 110px;44 height: 110px;45 border-radius: 60px;46 background: rgba(255,255,255,0.12);47 display: flex;48 align-items: center;49 justify-content: center;50 box-shadow: 0 12px 24px rgba(0,0,0,0.2) inset;51 }52 .bell svg { width: 48px; height: 48px; fill: none; stroke: #EDE8FF; stroke-width: 5; }53 54 .section-title {55 margin-top: 30px;56 font-size: 64px;57 font-weight: 700;58 }59 60 .cards-row {61 margin-top: 30px;62 display: flex;63 gap: 38px;64 }65 66 .card {67 width: 310px;68 height: 430px;69 border-radius: 40px;70 background: #E0E0E0;71 border: 1px solid #BDBDBD;72 position: relative;73 display: flex;74 align-items: center;75 justify-content: center;76 color: #444;77 font-weight: 600;78 text-align: center;79 box-shadow: 0 8px 24px rgba(0,0,0,0.35);80 }81 82 .timer-chip {83 position: absolute;84 top: 22px;85 left: 22px;86 padding: 10px 18px;87 border-radius: 26px;88 background: rgba(255,255,255,0.15);89 border: 1px solid rgba(255,255,255,0.25);90 display: flex;91 align-items: center;92 gap: 10px;93 font-size: 30px;94 }95 .timer-chip svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 4; }96 97 .play-overlay {98 position: absolute;99 width: 160px;100 height: 160px;101 border-radius: 80px;102 background: rgba(255,255,255,0.22);103 display: flex;104 align-items: center;105 justify-content: center;106 backdrop-filter: blur(2px);107 }108 .play-overlay svg { width: 70px; height: 70px; fill: #fff; }109 110 .new-tag {111 position: absolute;112 bottom: 28px;113 left: 24px;114 padding: 14px 26px;115 border-radius: 36px;116 background: linear-gradient(90deg, #6e3bd6, #f287bd);117 font-size: 30px;118 color: #fff;119 font-weight: 700;120 }121 122 .card-caption-row {123 display: flex;124 gap: 38px;125 margin-top: 22px;126 }127 .caption {128 width: 310px;129 font-size: 46px;130 font-weight: 700;131 }132 133 .chips-row {134 margin-top: 40px;135 display: flex;136 justify-content: center;137 gap: 24px;138 }139 .chip {140 width: 118px;141 height: 118px;142 background: #35256f;143 border-radius: 60px;144 border: 1px solid rgba(255,255,255,0.2);145 display: flex;146 align-items: center;147 justify-content: center;148 box-shadow: 0 10px 24px rgba(0,0,0,0.35);149 }150 .chip svg { width: 60px; height: 60px; stroke: #c7baff; fill: none; stroke-width: 5; }151 152 .promo {153 margin-top: 40px;154 text-align: center;155 }156 .promo h2 {157 font-size: 76px;158 margin: 0 0 20px 0;159 font-weight: 800;160 }161 .promo p {162 font-size: 40px;163 color: #c7baff;164 margin: 0;165 line-height: 1.4;166 }167 168 .cta-btn {169 margin: 40px auto 10px auto;170 width: 560px;171 height: 120px;172 border-radius: 80px;173 background: linear-gradient(90deg, #7a53e8, #f08ab9);174 display: flex;175 align-items: center;176 justify-content: center;177 gap: 22px;178 color: #fff;179 font-size: 46px;180 font-weight: 800;181 box-shadow: 0 18px 34px rgba(0,0,0,0.45);182 }183 .cta-btn svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 5; }184 185 .stories-title {186 margin-top: 80px;187 font-size: 64px;188 font-weight: 800;189 }190 191 .stories-row {192 margin-top: 26px;193 display: flex;194 gap: 36px;195 }196 .story-card {197 width: 480px;198 height: 350px;199 border-radius: 36px;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 color: #444;203 font-weight: 600;204 display: flex;205 align-items: center;206 justify-content: center;207 position: relative;208 box-shadow: 0 8px 24px rgba(0,0,0,0.35);209 text-align: center;210 }211 .story-timer {212 position: absolute;213 top: 20px;214 left: 20px;215 padding: 12px 22px;216 border-radius: 26px;217 background: rgba(0,0,0,0.55);218 color: #fff;219 font-size: 32px;220 }221 222 /* Bottom navigation bar */223 .bottom-nav {224 position: absolute;225 bottom: 0;226 left: 0;227 width: 100%;228 height: 190px;229 background: rgba(10, 8, 38, 0.9);230 border-top: 1px solid rgba(255,255,255,0.08);231 display: flex;232 align-items: center;233 justify-content: space-around;234 }235 .nav-item {236 width: 170px;237 height: 150px;238 display: flex;239 flex-direction: column;240 align-items: center;241 justify-content: center;242 color: #c7baff;243 font-size: 36px;244 gap: 18px;245 }246 .nav-item svg { width: 58px; height: 58px; stroke: #c7baff; fill: none; stroke-width: 5; }247 .nav-item.active { color: #ffffff; }248 .nav-item.active svg { stroke: #ffffff; }249 250 /* Center sleep icon glow */251 .nav-item.active .glow {252 filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));253 }254 255</style>256</head>257<body>258<div id="render-target">259 <div class="screen-padding">260 <div class="top-title">Sleep</div>261 <div class="bell">262 <svg viewBox="0 0 24 24">263 <path d="M6 18h12l-1-2V11a5 5 0 0 0-10 0v5l-1 2z"></path>264 <path d="M9 18a3 3 0 0 0 6 0"></path>265 </svg>266 </div>267 268 <div class="section-title">Meditations</div>269 270 <div class="cards-row">271 <div class="card">272 <div class="timer-chip">273 <svg viewBox="0 0 24 24">274 <circle cx="12" cy="12" r="9"></circle>275 <path d="M12 7v6l4 2"></path>276 </svg>277 <span>18 min</span>278 </div>279 <div class="play-overlay">280 <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z"></path></svg>281 </div>282 <div>[IMG: Night Sky Clouds]</div>283 </div>284 285 <div class="card">286 <div class="timer-chip" style="visibility:hidden;"></div>287 <div>[IMG: Milky Way & Shooting Star]</div>288 </div>289 290 <div class="card">291 <div class="timer-chip" style="visibility:hidden;"></div>292 <div class="new-tag">NEW SERIES</div>293 <div>[IMG: Moon & Orange Clouds]</div>294 </div>295 </div>296 297 <div class="card-caption-row">298 <div class="caption">Sleep</div>299 <div class="caption">Sleep Well</div>300 <div class="caption">Relaxed Body</div>301 </div>302 303 <div class="chips-row">304 <div class="chip">305 <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6L21 9l-5.2 4.2L17 21l-5-3.2L7 21l1.2-7.8L3 9l6.4-.4L12 2z"></path></svg>306 </div>307 <div class="chip">308 <svg viewBox="0 0 24 24"><path d="M12 6a3 3 0 0 1 3 3v1h2a3 3 0 0 1 0 6h-2l1 3H8l1-3H7a3 3 0 0 1 0-6h2V9a3 3 0 0 1 3-3z"></path></svg>309 </div>310 <div class="chip">311 <svg viewBox="0 0 24 24"><path d="M16 12a6 6 0 1 1-8-8 7 7 0 1 0 8 8z"></path></svg>312 </div>313 <div class="chip">314 <svg viewBox="0 0 24 24"><path d="M4 15c2-1 4-1 8-1s6 0 8 1-4 6-8 6-10-5-8-6z"></path><path d="M8 11c1-2 3-3 4-3s3 1 4 3"></path></svg>315 </div>316 <div class="chip">317 <svg viewBox="0 0 24 24"><path d="M9 18V5l8 3v9"></path><circle cx="7" cy="18" r="2"></circle><circle cx="17" cy="17" r="2"></circle></svg>318 </div>319 </div>320 321 <div class="promo">322 <h2>Unlock everything!</h2>323 <p>Here is a special offer for you. Become a Premium<br>member while saving 40%.</p>324 325 <div class="cta-btn">326 <svg viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="10" rx="2"></rect><path d="M8 10V8a4 4 0 0 1 8 0v2"></path></svg>327 <span>SAVE 40%</span>328 </div>329 </div>330 331 <div class="stories-title">Stories</div>332 <div class="stories-row">333 <div class="story-card">334 <div class="story-timer">28 min</div>335 <div>[IMG: Horizon Night Story Artwork]</div>336 </div>337 <div class="story-card">338 <div class="story-timer">16 min</div>339 <div>[IMG: Squirrel on Branch Story Artwork]</div>340 </div>341 </div>342 </div>343 344 <div class="bottom-nav">345 <div class="nav-item">346 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7"></path><path d="M5 10v10h14V10"></path></svg>347 <div>Today</div>348 </div>349 <div class="nav-item">350 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 4v8l5 2"></path></svg>351 <div>Meditation</div>352 </div>353 <div class="nav-item active">354 <svg class="glow" viewBox="0 0 24 24"><path d="M20 12c-2 4-6 6-10 6a7 7 0 1 1 0-14"></path><circle cx="7" cy="5" r="1.2"></circle><circle cx="9.5" cy="7.5" r="1"></circle></svg>355 <div>Sleep</div>356 </div>357 <div class="nav-item">358 <svg viewBox="0 0 24 24"><path d="M9 18V5l8 3v9"></path><circle cx="7" cy="18" r="2"></circle></svg>359 <div>Music</div>360 </div>361 <div class="nav-item">362 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 22c1-5 7-6 8-6s7 1 8 6"></path></svg>363 <div>Profile</div>364 </div>365 </div>366</div>367</body>368</html>