GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Sleep UI Mock</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: linear-gradient(180deg, #2a1b5f 0%, #241d64 50%, #1f1b52 100%);18 color: #ffffff;19 }20 .screen-padding {21 padding: 54px 60px 0 60px;22 }23 .title {24 text-align: center;25 font-size: 64px;26 font-weight: 700;27 letter-spacing: 1px;28 margin-top: 24px;29 margin-bottom: 40px;30 }31 32 /* Tabs */33 .tabs {34 display: flex;35 gap: 24px;36 margin-bottom: 34px;37 }38 .pill {39 padding: 26px 36px;40 border-radius: 48px;41 border: 2px solid rgba(255,255,255,0.25);42 color: #d7d7ff;43 font-size: 36px;44 line-height: 1;45 cursor: default;46 white-space: nowrap;47 }48 .pill.active {49 background: #ffffff;50 color: #2a1b5f;51 border-color: #ffffff;52 font-weight: 700;53 }54 55 /* Offer Card */56 .offer-card {57 margin-top: 18px;58 background: rgba(255,255,255,0.08);59 border: 2px solid rgba(255,255,255,0.1);60 border-radius: 36px;61 padding: 32px;62 display: flex;63 align-items: center;64 gap: 28px;65 }66 .offer-icon {67 width: 110px;68 height: 110px;69 border-radius: 24px;70 background: rgba(150,180,255,0.25);71 display: flex;72 align-items: center;73 justify-content: center;74 border: 2px solid rgba(255,255,255,0.15);75 }76 .offer-texts {77 flex: 1;78 }79 .offer-title {80 font-size: 44px;81 font-weight: 700;82 margin-bottom: 8px;83 }84 .offer-sub {85 font-size: 34px;86 color: #c7c9ff;87 }88 .chev {89 width: 64px;90 height: 64px;91 }92 .chev svg {93 width: 100%;94 height: 100%;95 }96 97 /* Section Header */98 .section-header {99 display: flex;100 justify-content: space-between;101 align-items: center;102 margin-top: 44px;103 margin-bottom: 22px;104 }105 .section-title {106 font-size: 54px;107 font-weight: 700;108 }109 .see-all {110 font-size: 36px;111 color: #c7c9ff;112 }113 114 /* Featured Image Card */115 .featured-card {116 position: relative;117 width: 100%;118 height: 520px;119 border-radius: 32px;120 overflow: hidden;121 border: 2px solid rgba(255,255,255,0.12);122 background: #E0E0E0;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #4e4e4e;127 font-size: 40px;128 text-align: center;129 }130 .new-badge {131 position: absolute;132 top: 20px;133 left: 20px;134 background: #1f1b52;135 color: #ffffff;136 border: 2px solid rgba(255,255,255,0.25);137 padding: 12px 18px;138 border-radius: 30px;139 font-size: 28px;140 font-weight: 700;141 opacity: 0.95;142 }143 .lock-badge {144 position: absolute;145 bottom: 20px;146 left: 20px;147 width: 64px;148 height: 64px;149 border-radius: 32px;150 background: rgba(31,27,82,0.9);151 display: flex;152 align-items: center;153 justify-content: center;154 border: 2px solid rgba(255,255,255,0.2);155 }156 .lock-badge svg {157 width: 32px;158 height: 32px;159 fill: #ffffff;160 }161 162 /* Below featured meta */163 .featured-meta {164 display: flex;165 align-items: center;166 gap: 26px;167 margin-top: 28px;168 }169 .avatar {170 width: 110px;171 height: 110px;172 border-radius: 55px;173 background: #E0E0E0;174 border: 2px solid #BDBDBD;175 display: flex;176 align-items: center;177 justify-content: center;178 color: #757575;179 font-size: 28px;180 }181 .meta-texts .meta-title {182 font-size: 48px;183 font-weight: 800;184 }185 .meta-texts .meta-sub {186 font-size: 34px;187 color: #c7c9ff;188 margin-top: 6px;189 }190 191 /* Recently Played */192 .recent-grid {193 display: grid;194 grid-template-columns: 1fr 1fr;195 gap: 34px;196 margin-top: 22px;197 }198 .recent-card {199 height: 450px;200 border-radius: 28px;201 background: #E0E0E0;202 border: 2px solid #BDBDBD;203 display: flex;204 align-items: center;205 justify-content: center;206 color: #555;207 font-size: 38px;208 text-align: center;209 padding: 20px;210 }211 212 /* Bottom Nav */213 .bottom-nav {214 position: absolute;215 left: 0;216 bottom: 0;217 width: 100%;218 height: 190px;219 background: rgba(5,5,8,0.92);220 border-top: 2px solid rgba(255,255,255,0.1);221 display: flex;222 justify-content: space-around;223 align-items: center;224 }225 .nav-item {226 display: flex;227 flex-direction: column;228 align-items: center;229 gap: 14px;230 color: #c7c9ff;231 font-size: 30px;232 }233 .nav-item .icon {234 width: 64px;235 height: 64px;236 opacity: 0.9;237 }238 .nav-item.active {239 color: #ffffff;240 }241 .nav-item.active .icon {242 filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));243 }244 245 /* Home indicator */246 .home-indicator {247 position: absolute;248 bottom: 204px;249 left: 50%;250 transform: translateX(-50%);251 width: 360px;252 height: 12px;253 background: rgba(255,255,255,0.7);254 border-radius: 6px;255 }256</style>257</head>258<body>259<div id="render-target">260 <div class="screen-padding">261 <div class="title">Sleep</div>262 263 <div class="tabs">264 <div class="pill active">Sleep Stories</div>265 <div class="pill">All</div>266 <div class="pill">Meditations</div>267 <div class="pill">Tools</div>268 </div>269 270 <div class="offer-card">271 <div class="offer-icon">272 <!-- simple clock icon -->273 <svg width="64" height="64" viewBox="0 0 32 32">274 <circle cx="16" cy="16" r="13" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.8"/>275 <path d="M16 7 v9 l6 4" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276 </svg>277 </div>278 <div class="offer-texts">279 <div class="offer-title">Special Welcome Offer</div>280 <div class="offer-sub">Get 40% off Calm Premium - Today only!</div>281 </div>282 <div class="chev">283 <svg viewBox="0 0 24 24">284 <path d="M8 4 L16 12 L8 20" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 </div>288 289 <div class="section-header">290 <div class="section-title">Featured</div>291 <div class="see-all">See All</div>292 </div>293 294 <div class="featured-card">295 <div class="new-badge">New</div>296 <div class="lock-badge">297 <svg viewBox="0 0 24 24">298 <path d="M7 11 h10 v8 H7 z M9 11 V8a5 5 0 0 1 10 0v3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>299 </svg>300 </div>301 [IMG: Holiday lamp with Christmas lights]302 </div>303 304 <div class="featured-meta">305 <div class="avatar">[IMG: Avatar]</div>306 <div class="meta-texts">307 <div class="meta-title">Christmas Eve in Frankenmuth</div>308 <div class="meta-sub">Ameli Dziemba • Sleep Story</div>309 </div>310 </div>311 312 <div class="section-header" style="margin-top: 44px;">313 <div class="section-title">Recently Played</div>314 <div class="see-all">See All</div>315 </div>316 317 <div class="recent-grid">318 <div class="recent-card">[IMG: Sleep story cover - The Grand Plan to Rise & Shine]</div>319 <div class="recent-card">[IMG: Campfire at night]</div>320 </div>321 </div>322 323 <div class="home-indicator"></div>324 325 <div class="bottom-nav">326 <div class="nav-item">327 <svg class="icon" viewBox="0 0 24 24">328 <path d="M3 11 L12 4 L21 11 V20 H14 V14 H10 V20 H3 Z" fill="#c7c9ff"/>329 </svg>330 <div>Home</div>331 </div>332 <div class="nav-item active">333 <svg class="icon" viewBox="0 0 24 24">334 <path d="M18 12a7 7 0 1 1-7-7c-.7 1.8-.4 4.4 1.1 6a7 7 0 0 0 5.9 4.2z" fill="#ffffff"/>335 </svg>336 <div>Sleep</div>337 </div>338 <div class="nav-item">339 <svg class="icon" viewBox="0 0 24 24">340 <circle cx="11" cy="11" r="7" stroke="#c7c9ff" stroke-width="2" fill="none"/>341 <path d="M20 20 L16 16" stroke="#c7c9ff" stroke-width="2" stroke-linecap="round"/>342 </svg>343 <div>Discover</div>344 </div>345 <div class="nav-item">346 <svg class="icon" viewBox="0 0 24 24">347 <circle cx="12" cy="8" r="4" fill="#c7c9ff"/>348 <path d="M4 20 a8 8 0 0 1 16 0 Z" fill="#c7c9ff"/>349 </svg>350 <div>Profile</div>351 </div>352 <div class="nav-item">353 <svg class="icon" viewBox="0 0 24 24">354 <path d="M12 2 L14.8 8.5 L22 9.3 L17 14 L18.4 21 L12 17.7 L5.6 21 L7 14 L2 9.3 L9.2 8.5 Z" fill="#c7c9ff"/>355 </svg>356 <div>Premium</div>357 </div>358 </div>359</div>360</body>361</html>