GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Discover Screen</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: linear-gradient(180deg, #355f8c 0%, #2e5380 25%, #2a4a76 55%, #233a67 75%, #1f2e5c 100%);19 color: #ffffff;20 }21 22 /* Top Header */23 .top-area {24 padding-top: 60px;25 }26 .title {27 text-align: center;28 font-weight: 700;29 font-size: 56px;30 letter-spacing: 0.5px;31 }32 33 /* Search Bar */34 .search-wrapper {35 width: 980px;36 margin: 40px auto 20px auto;37 height: 116px;38 border-radius: 58px;39 border: 1px solid rgba(255,255,255,0.18);40 background: rgba(255,255,255,0.06);41 display: flex;42 align-items: center;43 padding: 0 40px;44 box-sizing: border-box;45 backdrop-filter: blur(2px);46 }47 .search-icon {48 width: 56px;49 height: 56px;50 margin-right: 24px;51 opacity: 0.9;52 }53 .search-input {54 color: rgba(255,255,255,0.92);55 font-size: 38px;56 letter-spacing: 0.3px;57 }58 59 /* Section Header */60 .section-row {61 width: 980px;62 margin: 28px auto 22px auto;63 display: flex;64 align-items: center;65 justify-content: space-between;66 }67 .section-row .left {68 font-size: 48px;69 font-weight: 700;70 }71 .section-row .right {72 font-size: 38px;73 color: rgba(255,255,255,0.85);74 }75 76 /* Cards */77 .cards {78 width: 980px;79 margin: 20px auto 10px auto;80 display: flex;81 gap: 30px;82 }83 .card {84 width: 475px;85 }86 .img-box {87 position: relative;88 width: 100%;89 height: 470px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 color: #757575;93 border-radius: 36px;94 display: flex;95 align-items: center;96 justify-content: center;97 font-size: 34px;98 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);99 }100 .lock {101 position: absolute;102 left: 22px;103 bottom: 22px;104 width: 64px;105 height: 64px;106 border-radius: 32px;107 background: rgba(0,0,0,0.55);108 display: flex;109 align-items: center;110 justify-content: center;111 }112 .lock svg {113 fill: #ffffff;114 width: 32px;115 height: 32px;116 }117 .card-title {118 margin-top: 26px;119 font-size: 48px;120 font-weight: 800;121 color: #ffffff;122 }123 .card-sub {124 margin-top: 6px;125 font-size: 36px;126 color: rgba(255,255,255,0.88);127 }128 .card-desc {129 margin-top: 6px;130 font-size: 36px;131 color: rgba(255,255,255,0.88);132 }133 134 /* Promo Banner */135 .promo {136 width: 980px;137 margin: 34px auto;138 padding: 36px 36px;139 box-sizing: border-box;140 border-radius: 30px;141 background: rgba(255,255,255,0.08);142 border: 1px solid rgba(255,255,255,0.15);143 display: flex;144 align-items: center;145 gap: 28px;146 }147 .promo-icon {148 width: 110px;149 height: 110px;150 border-radius: 24px;151 background: linear-gradient(180deg, #9fe3d2, #57c9a3);152 display: flex;153 align-items: center;154 justify-content: center;155 color: #0a3b33;156 font-weight: 800;157 font-size: 46px;158 }159 .promo-text {160 flex: 1;161 }162 .promo-title {163 font-size: 46px;164 font-weight: 800;165 margin-bottom: 10px;166 }167 .promo-sub {168 font-size: 36px;169 color: rgba(255,255,255,0.95);170 line-height: 1.25;171 }172 .promo-arrow {173 width: 68px;174 height: 68px;175 border-radius: 34px;176 background: rgba(255,255,255,0.15);177 display: flex;178 align-items: center;179 justify-content: center;180 }181 182 /* Category Grid */183 .grid {184 width: 980px;185 margin: 18px auto 0 auto;186 display: flex;187 flex-wrap: wrap;188 gap: 34px;189 }190 .grid-item {191 width: 300px;192 height: 220px;193 border-radius: 36px;194 background: rgba(255,255,255,0.06);195 border: 1px solid rgba(255,255,255,0.10);196 display: flex;197 flex-direction: column;198 align-items: center;199 justify-content: center;200 gap: 20px;201 color: #ffffff;202 }203 .grid-item .icon {204 width: 72px;205 height: 72px;206 opacity: 0.95;207 }208 .grid-item .label {209 font-size: 38px;210 font-weight: 700;211 }212 213 /* Bottom Navigation */214 .bottom-nav {215 position: absolute;216 left: 0;217 right: 0;218 bottom: 0;219 height: 210px;220 background: rgba(16,25,54,0.9);221 border-top: 1px solid rgba(255,255,255,0.1);222 display: flex;223 align-items: center;224 justify-content: space-around;225 padding-bottom: 24px;226 }227 .nav-item {228 display: flex;229 flex-direction: column;230 align-items: center;231 gap: 18px;232 color: rgba(255,255,255,0.85);233 font-size: 30px;234 }235 .nav-item .ni {236 width: 60px;237 height: 60px;238 }239 .nav-item.active {240 color: #ffffff;241 font-weight: 800;242 }243 .nav-item.active .ni {244 width: 70px;245 height: 70px;246 }247 248 /* Helper */249 .dot-divider {250 opacity: 0.8;251 }252</style>253</head>254<body>255<div id="render-target">256 257 <div class="top-area">258 <div class="title">Discover</div>259 260 <div class="search-wrapper">261 <svg class="search-icon" viewBox="0 0 24 24">262 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>263 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>264 </svg>265 <div class="search-input">Title, narrator, artist or topic</div>266 </div>267 </div>268 269 <div class="section-row">270 <div class="left">Today's Dailies</div>271 <div class="right">See All</div>272 </div>273 274 <div class="cards">275 <!-- Card 1 -->276 <div class="card">277 <div class="img-box">278 [IMG: Person in Forest]279 <div class="lock">280 <svg viewBox="0 0 24 24">281 <path d="M12 1.75c-2.9 0-5.25 2.35-5.25 5.25v2H5a2 2 0 0 0-2 2v8A2 2 0 0 0 5 21h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1.75v-2c0-2.9-2.35-5.25-5.25-5.25zm0 2a3.25 3.25 0 0 1 3.25 3.25v2H8.75v-2A3.25 3.25 0 0 1 12 3.75z"></path>282 </svg>283 </div>284 </div>285 <div class="card-title">Daily Calm</div>286 <div class="card-sub">Meditation • Tamara Levitt</div>287 <div class="card-desc">The Middle Way</div>288 </div>289 290 <!-- Card 2 -->291 <div class="card">292 <div class="img-box">293 [IMG: Person Indoors]294 <div class="lock">295 <svg viewBox="0 0 24 24">296 <path d="M12 1.75c-2.9 0-5.25 2.35-5.25 5.25v2H5a2 2 0 0 0-2 2v8A2 2 0 0 0 5 21h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1.75v-2c0-2.9-2.35-5.25-5.25-5.25zm0 2a3.25 3.25 0 0 1 3.25 3.25v2H8.75v-2A3.25 3.25 0 0 1 12 3.75z"></path>297 </svg>298 </div>299 </div>300 <div class="card-title">Daily Jay</div>301 <div class="card-sub">Wisdom • Jay Shetty</div>302 <div class="card-desc">Drive With the Radio Off</div>303 </div>304 </div>305 306 <!-- Promo -->307 <div class="promo">308 <div class="promo-icon">✨</div>309 <div class="promo-text">310 <div class="promo-title">Start the New Year Right</div>311 <div class="promo-sub">10,000+ sessions for half the price<br>before January 31st</div>312 </div>313 <div class="promo-arrow">314 <svg viewBox="0 0 24 24" width="34" height="34">315 <path d="M8 4l8 8-8 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>316 </svg>317 </div>318 </div>319 320 <!-- Category Grid -->321 <div class="grid">322 <div class="grid-item">323 <svg class="icon" viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="5" fill="#fff"></circle>325 <line x1="12" y1="1" x2="12" y2="5" stroke="#fff" stroke-width="2"></line>326 <line x1="12" y1="19" x2="12" y2="23" stroke="#fff" stroke-width="2"></line>327 </svg>328 <div class="label">Dailies</div>329 </div>330 <div class="grid-item">331 <svg class="icon" viewBox="0 0 24 24">332 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>333 </svg>334 <div class="label">Meditation</div>335 </div>336 <div class="grid-item">337 <svg class="icon" viewBox="0 0 24 24">338 <path d="M4 9h14v10H4z" stroke="#fff" stroke-width="2" fill="none"></path>339 <path d="M8 5v4M14 5v4" stroke="#fff" stroke-width="2"></path>340 </svg>341 <div class="label">Music</div>342 </div>343 344 <div class="grid-item">345 <svg class="icon" viewBox="0 0 24 24">346 <path d="M12 3a7 7 0 0 0 0 18 7 7 0 0 0 0-18z" stroke="#fff" stroke-width="2" fill="none"></path>347 <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none"></path>348 </svg>349 <div class="label">Sleep</div>350 </div>351 <div class="grid-item">352 <svg class="icon" viewBox="0 0 24 24">353 <path d="M6 18c0-2 2-3 6-3s6 1 6 3" stroke="#fff" stroke-width="2" fill="none"></path>354 <path d="M11 7h2v5h-2z" fill="#fff"></path>355 </svg>356 <div class="label">For Work</div>357 </div>358 <div class="grid-item">359 <svg class="icon" viewBox="0 0 24 24">360 <path d="M6 4l10 5-10 5z" fill="#fff"></path>361 <path d="M6 14v6" stroke="#fff" stroke-width="2"></path>362 </svg>363 <div class="label">Kids</div>364 </div>365 </div>366 367 <!-- Bottom Navigation -->368 <div class="bottom-nav">369 <div class="nav-item">370 <svg class="ni" viewBox="0 0 24 24">371 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1z" stroke="#fff" stroke-width="2" fill="none"></path>372 </svg>373 <div>Home</div>374 </div>375 <div class="nav-item">376 <svg class="ni" viewBox="0 0 24 24">377 <path d="M21 12a8 8 0 1 1-8-8 6 6 0 0 0 8 8z" fill="#fff"></path>378 </svg>379 <div>Sleep</div>380 </div>381 <div class="nav-item active">382 <svg class="ni" viewBox="0 0 24 24">383 <circle cx="12" cy="12" r="3" fill="#fff"></circle>384 <path d="M12 2v6M12 16v6M2 12h6M16 12h6" stroke="#fff" stroke-width="2"></path>385 </svg>386 <div>Discover</div>387 </div>388 <div class="nav-item">389 <svg class="ni" viewBox="0 0 24 24">390 <circle cx="12" cy="8" r="4" stroke="#fff" stroke-width="2" fill="none"></circle>391 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#fff" stroke-width="2" fill="none"></path>392 </svg>393 <div>Profile</div>394 </div>395 <div class="nav-item">396 <svg class="ni" viewBox="0 0 24 24">397 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" stroke="#fff" stroke-width="2" fill="none"></path>398 </svg>399 <div>Premium</div>400 </div>401 </div>402 403</div>404</body>405</html>