GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Deep Sleep Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #182A45;15 border-radius: 0;16 box-shadow: none;17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18 color: #FFFFFF;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 120px;28 background: #142B52;29 display: flex;30 align-items: center;31 padding: 0 36px;32 box-sizing: border-box;33 }34 .status-bar .time {35 font-size: 36px;36 font-weight: 600;37 color: #E7EDF7;38 }39 .status-icons {40 margin-left: auto;41 display: flex;42 gap: 24px;43 align-items: center;44 }45 .status-dot {46 width: 20px;47 height: 20px;48 background: #E7EDF7;49 border-radius: 50%;50 opacity: 0.9;51 }52 .wifi, .battery {53 width: 40px;54 height: 24px;55 }56 .wifi path, .battery path { fill: #E7EDF7; }57 58 /* Hero */59 .hero {60 position: absolute;61 top: 120px;62 left: 0;63 width: 1080px;64 height: 860px;65 overflow: hidden;66 }67 .hero-img {68 position: absolute;69 inset: 0;70 background: #E0E0E0;71 border: 1px solid #BDBDBD;72 display: flex;73 align-items: center;74 justify-content: center;75 color: #757575;76 font-size: 34px;77 }78 .hero::after {79 content: "";80 position: absolute;81 left: 0; right: 0; bottom: 0; top: 0;82 background: linear-gradient(to bottom, rgba(24,42,69,0) 45%, rgba(24,42,69,0.7) 75%, rgba(24,42,69,0.95) 100%);83 pointer-events: none;84 }85 86 /* Overlaid controls */87 .top-actions {88 position: absolute;89 top: 40px;90 right: 36px;91 display: flex;92 gap: 24px;93 z-index: 2;94 }95 .circle-btn {96 width: 108px;97 height: 108px;98 border-radius: 54px;99 background: rgba(11,27,54,0.9);100 border: 1px solid rgba(255,255,255,0.15);101 display: flex;102 align-items: center;103 justify-content: center;104 }105 .circle-btn svg { width: 52px; height: 52px; fill: none; stroke: #E7EDF7; stroke-width: 4; }106 107 .back-btn {108 position: absolute;109 top: 40px;110 left: 36px;111 width: 88px;112 height: 88px;113 border-radius: 44px;114 background: rgba(11,27,54,0.8);115 border: 1px solid rgba(255,255,255,0.15);116 display: flex;117 align-items: center;118 justify-content: center;119 z-index: 2;120 }121 .back-btn svg { width: 44px; height: 44px; stroke: #E7EDF7; stroke-width: 5; fill: none; }122 123 .play-btn {124 position: absolute;125 left: 50%;126 top: 50%;127 width: 196px;128 height: 196px;129 margin-left: -98px;130 margin-top: -98px;131 border-radius: 50%;132 background: rgba(255,255,255,0.3);133 backdrop-filter: blur(2px);134 display: flex;135 align-items: center;136 justify-content: center;137 z-index: 2;138 }139 .play-btn svg { width: 88px; height: 88px; fill: #FFFFFF; }140 141 /* Title area overlay on hero bottom */142 .hero-text {143 position: absolute;144 left: 36px;145 bottom: 36px;146 z-index: 2;147 }148 .hero-title {149 font-size: 96px;150 line-height: 1.05;151 font-weight: 800;152 letter-spacing: -0.5px;153 margin: 0 0 12px;154 color: #FFFFFF;155 text-shadow: 0 2px 6px rgba(0,0,0,0.25);156 }157 .hero-sub {158 font-size: 40px;159 color: #8C79FF;160 margin: 0;161 font-weight: 600;162 }163 164 /* Content Section */165 .content {166 position: absolute;167 top: 980px;168 left: 0;169 width: 100%;170 padding: 36px;171 box-sizing: border-box;172 }173 .description {174 font-size: 40px;175 line-height: 1.4;176 color: #F2F5FA;177 max-width: 1000px;178 margin-top: 12px;179 }180 .show-more {181 color: #AAB2C4;182 font-size: 36px;183 margin-top: 12px;184 text-align: right;185 }186 187 .author {188 display: flex;189 align-items: center;190 gap: 24px;191 margin-top: 34px;192 }193 .author .avatar {194 width: 80px;195 height: 80px;196 border-radius: 18px;197 background: #E0E0E0;198 border: 1px solid #BDBDBD;199 display: flex;200 align-items: center;201 justify-content: center;202 color: #757575;203 font-size: 22px;204 }205 .author .by {206 font-size: 36px;207 color: #DDE5F5;208 }209 .author .name {210 font-size: 40px;211 font-weight: 700;212 color: #DDE5F5;213 }214 215 .section-title {216 margin-top: 64px;217 font-size: 56px;218 font-weight: 800;219 color: #FFFFFF;220 }221 222 /* Cards */223 .cards {224 display: flex;225 gap: 28px;226 margin-top: 24px;227 padding-right: 24px;228 }229 .card {230 position: relative;231 width: 460px;232 height: 520px;233 border-radius: 36px;234 overflow: hidden;235 background: rgba(255,255,255,0.06);236 border: 1px solid rgba(255,255,255,0.08);237 }238 .card-img {239 position: absolute;240 inset: 0;241 background: #E0E0E0;242 border: 1px solid #BDBDBD;243 display: flex;244 align-items: center;245 justify-content: center;246 color: #757575;247 font-size: 30px;248 }249 .lock {250 position: absolute;251 top: 18px;252 right: 18px;253 width: 64px;254 height: 64px;255 border-radius: 32px;256 background: rgba(245,249,255,0.9);257 display: flex;258 align-items: center;259 justify-content: center;260 }261 .lock svg { width: 34px; height: 34px; fill: none; stroke: #324B76; stroke-width: 4; }262 .card-title {263 position: absolute;264 left: 24px;265 bottom: 24px;266 right: 24px;267 color: #FFFFFF;268 font-size: 40px;269 font-weight: 700;270 text-shadow: 0 2px 6px rgba(0,0,0,0.25);271 }272 273 /* Bottom navigation */274 .bottom-nav {275 position: absolute;276 bottom: 60px;277 left: 0;278 width: 1080px;279 height: 200px;280 background: #1D2F4C;281 display: flex;282 align-items: center;283 justify-content: space-around;284 border-top: 1px solid rgba(255,255,255,0.08);285 }286 .nav-item {287 display: flex;288 flex-direction: column;289 align-items: center;290 gap: 18px;291 color: #C9D3E8;292 width: 180px;293 }294 .nav-item svg { width: 54px; height: 54px; stroke: #C9D3E8; stroke-width: 4; fill: none; }295 .nav-item.active { color: #FFFFFF; }296 .nav-item.active svg { stroke: #FFFFFF; }297 .nav-label { font-size: 28px; font-weight: 600; }298 299 .home-indicator {300 position: absolute;301 bottom: 16px;302 left: 50%;303 width: 360px;304 height: 12px;305 border-radius: 6px;306 background: #FFFFFF;307 transform: translateX(-50%);308 opacity: 0.9;309 }310</style>311</head>312<body>313<div id="render-target">314 <!-- Status Bar -->315 <div class="status-bar">316 <div class="time">12:22</div>317 <div class="status-icons">318 <div class="status-dot"></div>319 <svg class="wifi" viewBox="0 0 24 24">320 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 20l2-2-2-2-2 2 2 2z"/>321 </svg>322 <svg class="battery" viewBox="0 0 24 24">323 <rect x="1" y="6" width="18" height="12" rx="2"></rect>324 <rect x="3" y="8" width="14" height="8" fill="#E7EDF7"></rect>325 <rect x="20" y="9" width="3" height="6" rx="1"></rect>326 </svg>327 </div>328 </div>329 330 <!-- Hero Section -->331 <div class="hero">332 <div class="hero-img">[IMG: Sleeping person in bed]</div>333 334 <!-- Overlay Actions -->335 <div class="back-btn">336 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>337 </div>338 <div class="top-actions">339 <!-- list + icon -->340 <div class="circle-btn">341 <svg viewBox="0 0 24 24">342 <path d="M4 6h12M4 12h12M4 18h8"></path>343 <path d="M20 12v6M17 15h6" stroke-linecap="round"></path>344 </svg>345 </div>346 <!-- share icon -->347 <div class="circle-btn">348 <svg viewBox="0 0 24 24">349 <circle cx="6" cy="12" r="3"></circle>350 <circle cx="18" cy="6" r="3"></circle>351 <circle cx="18" cy="18" r="3"></circle>352 <path d="M9 12l6-6M9 12l6 6"></path>353 </svg>354 </div>355 <!-- heart icon -->356 <div class="circle-btn">357 <svg viewBox="0 0 24 24">358 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 6.5 6 8.5 6 10 7 12 9c2-2 3.5-3 5.5-3C20.5 6 23 9 21 12.5 19 16.5 12 21 12 21z" fill="none"></path>359 </svg>360 </div>361 <!-- download icon -->362 <div class="circle-btn">363 <svg viewBox="0 0 24 24">364 <path d="M12 3v10M8 9l4 4 4-4"></path>365 <path d="M4 19h16" stroke-linecap="round"></path>366 </svg>367 </div>368 </div>369 370 <!-- Play Button -->371 <div class="play-btn">372 <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19"/></svg>373 </div>374 375 <!-- Title and subtitle -->376 <div class="hero-text">377 <h1 class="hero-title">Deep Sleep</h1>378 <p class="hero-sub">Bedtime Hypnotherapy • 24min</p>379 </div>380 </div>381 382 <!-- Content Section -->383 <div class="content">384 <div class="description">385 Overcome your sleep problems and insomnia. This is a skilled hypnotherapy technique that will guide you into a deep sleep each and every night. The background sound effects have been designed to386 </div>387 <div class="show-more">Show more</div>388 389 <div class="author">390 <div class="avatar">[IMG: Author Avatar]</div>391 <div class="by">By <span class="name">Glenn Harrold</span></div>392 </div>393 394 <div class="section-title">You might also like</div>395 396 <div class="cards">397 <div class="card">398 <div class="card-img">[IMG: Full moon over cherry blossoms]</div>399 <div class="lock">400 <svg viewBox="0 0 24 24">401 <rect x="5" y="10" width="14" height="10" rx="2"></rect>402 <path d="M8 10V7a4 4 0 118 0v3" ></path>403 </svg>404 </div>405 <div class="card-title">Sleep • Moonlight</div>406 </div>407 408 <div class="card">409 <div class="card-img">[IMG: Moon above mountain range]</div>410 <div class="lock">411 <svg viewBox="0 0 24 24">412 <rect x="5" y="10" width="14" height="10" rx="2"></rect>413 <path d="M8 10V7a4 4 0 118 0v3" ></path>414 </svg>415 </div>416 <div class="card-title">Deep Sleep + Relaxation</div>417 </div>418 419 <div class="card">420 <div class="card-img">[IMG: Calm ocean shoreline]</div>421 <div class="lock">422 <svg viewBox="0 0 24 24">423 <rect x="5" y="10" width="14" height="10" rx="2"></rect>424 <path d="M8 10V7a4 4 0 118 0v3" ></path>425 </svg>426 </div>427 <div class="card-title">Ocean Breeze</div>428 </div>429 </div>430 </div>431 432 <!-- Bottom Navigation -->433 <div class="bottom-nav">434 <div class="nav-item active">435 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H6V10z"></path></svg>436 <div class="nav-label">Today</div>437 </div>438 <div class="nav-item">439 <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"></path><path d="M8 9h8M8 13h5"></path></svg>440 <div class="nav-label">Therapy</div>441 </div>442 <div class="nav-item">443 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 6v6l4 3"></path></svg>444 <div class="nav-label">Goals</div>445 </div>446 <div class="nav-item">447 <svg viewBox="0 0 24 24"><path d="M4 4h16v14H4z"></path><path d="M8 8h8M8 12h8"></path></svg>448 <div class="nav-label">Library</div>449 </div>450 <div class="nav-item">451 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path></svg>452 <div class="nav-label">Profile</div>453 </div>454 </div>455 456 <div class="home-indicator"></div>457</div>458</body>459</html>