GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Podcast UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #1f2a37;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #eef2f6;21 }22 23 /* Top teal header */24 .top-header {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 220px;30 background: #5fc3cf;31 }32 .status-bar {33 height: 90px;34 padding: 0 36px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 color: #0d2f3a;39 font-weight: 600;40 font-size: 36px;41 letter-spacing: 0.2px;42 }43 .status-icons {44 display: flex;45 gap: 24px;46 align-items: center;47 }48 .app-bar {49 height: 130px;50 display: flex;51 align-items: center;52 padding: 0 26px;53 color: #0d2f3a;54 }55 .app-bar .back {56 width: 72px;57 height: 72px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .icon {63 width: 42px;64 height: 42px;65 }66 67 /* Main content card */68 .content-wrap {69 position: absolute;70 top: 220px;71 left: 0;72 width: 1080px;73 height: 1800px;74 background: #f7f9fc;75 overflow: hidden;76 }77 78 .section-card {79 background: #ffffff;80 border-radius: 24px;81 box-shadow: 0 8px 20px rgba(20, 30, 40, 0.08);82 margin: 24px 24px 0 24px;83 padding: 36px;84 }85 86 .section-title {87 font-size: 44px;88 font-weight: 700;89 margin-bottom: 28px;90 color: #222a36;91 }92 93 .station-row {94 display: flex;95 align-items: center;96 justify-content: space-between;97 }98 .cover-and-text {99 display: flex;100 align-items: center;101 gap: 30px;102 }103 .img-box {104 width: 160px;105 height: 160px;106 background: #E0E0E0;107 border: 1px solid #BDBDBD;108 border-radius: 24px;109 box-shadow: 0 8px 14px rgba(0,0,0,0.08);110 display: flex;111 justify-content: center;112 align-items: center;113 color: #757575;114 font-size: 26px;115 text-align: center;116 padding: 10px;117 }118 .station-text .title {119 font-size: 38px;120 font-weight: 700;121 margin-bottom: 10px;122 }123 .station-text .subtitle {124 font-size: 28px;125 color: #7a8494;126 letter-spacing: 0.2px;127 }128 129 .episodes-title {130 font-size: 42px;131 font-weight: 800;132 color: #1f2a37;133 margin: 36px 24px 0 24px;134 }135 136 .list {137 background: #ffffff;138 border-radius: 24px;139 box-shadow: 0 8px 20px rgba(20, 30, 40, 0.06);140 margin: 20px 24px;141 padding: 8px 0;142 }143 144 .episode {145 padding: 30px 36px;146 position: relative;147 }148 .episode + .episode {149 border-top: 1px solid #e7ebf1;150 }151 .ep-title {152 font-size: 36px;153 font-weight: 800;154 margin-bottom: 10px;155 color: #222a36;156 }157 .ep-meta {158 display: flex;159 align-items: center;160 gap: 14px;161 font-size: 28px;162 color: #8a94a5;163 margin-bottom: 16px;164 }165 .dot {166 width: 14px;167 height: 14px;168 background: #4cc3c8;169 border-radius: 50%;170 }171 .ep-desc {172 font-size: 28px;173 color: #6f7a8a;174 line-height: 40px;175 }176 .kebab {177 position: absolute;178 right: 30px;179 top: 34px;180 color: #7a8494;181 font-size: 44px;182 letter-spacing: 6px;183 }184 185 /* Ad banner */186 .ad-banner {187 position: absolute;188 left: 24px;189 right: 24px;190 bottom: 480px;191 height: 130px;192 background: #ffffff;193 border-radius: 18px;194 box-shadow: 0 8px 18px rgba(0,0,0,0.08);195 display: flex;196 align-items: center;197 padding: 0 24px;198 gap: 20px;199 }200 .ad-img {201 width: 210px;202 height: 100px;203 background: #E0E0E0;204 border: 1px solid #BDBDBD;205 display: flex;206 align-items: center;207 justify-content: center;208 color: #757575;209 font-size: 24px;210 }211 .ad-text {212 flex: 1;213 }214 .ad-title {215 font-size: 32px;216 font-weight: 700;217 color: #243041;218 }219 .ad-sub {220 font-size: 26px;221 color: #7a8494;222 margin-top: 6px;223 }224 .ad-btn {225 background: #2f63ff;226 color: #fff;227 border: none;228 border-radius: 14px;229 padding: 18px 36px;230 font-size: 30px;231 font-weight: 700;232 cursor: default;233 }234 235 /* Mini player */236 .player {237 position: absolute;238 left: 0;239 bottom: 180px;240 width: 100%;241 height: 170px;242 background: #ffffff;243 border-top: 1px solid #e7ebf1;244 display: flex;245 align-items: center;246 padding: 0 24px;247 gap: 24px;248 }249 .mini-cover {250 width: 110px;251 height: 110px;252 background: #E0E0E0;253 border: 1px solid #BDBDBD;254 border-radius: 14px;255 display: flex;256 justify-content: center;257 align-items: center;258 color: #757575;259 font-size: 22px;260 }261 .player-info {262 flex: 1;263 }264 .player-title {265 font-size: 32px;266 font-weight: 800;267 margin-bottom: 6px;268 color: #222a36;269 }270 .player-sub {271 font-size: 26px;272 color: #7a8494;273 }274 .player-actions {275 display: flex;276 align-items: center;277 gap: 24px;278 margin-right: 18px;279 }280 .round-btn {281 width: 84px;282 height: 84px;283 border-radius: 42px;284 background: #f2f4f8;285 display: flex;286 align-items: center;287 justify-content: center;288 }289 290 /* Home indicator */291 .home-indicator {292 position: absolute;293 bottom: 168px;294 left: 50%;295 transform: translateX(-50%);296 width: 260px;297 height: 14px;298 background: #cbd2db;299 border-radius: 10px;300 }301 302 /* Bottom nav */303 .bottom-nav {304 position: absolute;305 bottom: 0;306 left: 0;307 width: 1080px;308 height: 180px;309 background: #ffffff;310 border-top: 1px solid #e7ebf1;311 display: flex;312 align-items: center;313 justify-content: space-around;314 padding-top: 18px;315 }316 .nav-item {317 width: 160px;318 text-align: center;319 color: #8a94a5;320 font-size: 24px;321 }322 .nav-item .nav-icon {323 width: 46px;324 height: 46px;325 margin: 0 auto 12px auto;326 display: block;327 }328 .nav-item.active {329 color: #263244;330 font-weight: 800;331 }332</style>333</head>334<body>335<div id="render-target">336 <!-- Top -->337 <div class="top-header">338 <div class="status-bar">339 <div>9:42</div>340 <div class="status-icons">341 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#0d2f3a"/></svg>342 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#0d2f3a" stroke-width="2"/></svg>343 <svg class="icon" viewBox="0 0 24 24"><path d="M4 14c4-6 12-6 16 0" stroke="#0d2f3a" stroke-width="2" fill="none"/></svg>344 <svg class="icon" viewBox="0 0 24 24"><path d="M20 6v12" stroke="#0d2f3a" stroke-width="2"/><rect x="3" y="8" width="14" height="8" rx="2" stroke="#0d2f3a" stroke-width="2" fill="none"/></svg>345 <svg class="icon" viewBox="0 0 24 24"><path d="M18 7l-6 6-4-4" stroke="#0d2f3a" stroke-width="2" fill="none"/></svg>346 </div>347 </div>348 <div class="app-bar">349 <div class="back">350 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke="#0d2f3a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>351 </div>352 </div>353 </div>354 355 <!-- Main content -->356 <div class="content-wrap">357 <div class="section-card">358 <div class="section-title">Listen on a live station</div>359 <div class="station-row">360 <div class="cover-and-text">361 <div class="img-box">[IMG: WTF Podcast Cover]</div>362 <div class="station-text">363 <div class="title">WTF with Marc Maron 24/7</div>364 <div class="subtitle">3 hours 54 minutes remaining</div>365 </div>366 </div>367 <svg class="icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#7a8494" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>368 </div>369 </div>370 371 <div class="episodes-title">Episodes</div>372 <div class="list">373 <div class="episode">374 <div class="ep-title">The 'Marc on Movies' Special</div>375 <div class="ep-meta">376 <div>12/25/2023</div>377 <div class="dot"></div>378 </div>379 <div class="ep-desc">For Christmas Day, Marc presents a special collection of exclusive segment...</div>380 <div class="kebab">•••</div>381 </div>382 <div class="episode">383 <div class="ep-title">The 'Marc on Movies' Special</div>384 <div class="ep-meta">385 <div>12/25/2023</div>386 <div class="dot"></div>387 </div>388 <div class="ep-desc">For Christmas Day, Marc presents a special collection of exclusive segment...</div>389 <div class="kebab">•••</div>390 </div>391 <div class="episode">392 <div class="ep-title">The 'Marc on Movies' Special</div>393 <div class="ep-meta">394 <div>12/25/2023</div>395 <div class="dot"></div>396 </div>397 <div class="ep-desc">For Christmas Day, Marc presents a special collection of exclusive segment...</div>398 <div class="kebab">•••</div>399 </div>400 <div class="episode">401 <div class="ep-title">The 'Marc on Movies' Special</div>402 <div class="ep-meta">403 <div>12/25/2023</div>404 <div class="dot"></div>405 </div>406 <div class="ep-desc">For Christmas Day, Marc presents a special collection of exclusive segment...</div>407 <div class="kebab">•••</div>408 </div>409 </div>410 </div>411 412 <!-- Ad banner -->413 <div class="ad-banner">414 <div class="ad-img">[IMG: Ad Banner]</div>415 <div class="ad-text">416 <div class="ad-title">Utec - Home Building Solut...</div>417 <div class="ad-sub">FREE • Get it on Google Play</div>418 </div>419 <button class="ad-btn">Install</button>420 </div>421 422 <!-- Mini player -->423 <div class="player">424 <div class="mini-cover">[IMG: WTF]</div>425 <div class="player-info">426 <div class="player-title">WTF with Marc Maron 24/7</div>427 <div class="player-sub">WTF with Marc Maron Podcast</div>428 </div>429 <div class="player-actions">430 <div class="round-btn">431 <svg class="icon" viewBox="0 0 24 24"><path d="M4 18c6-10 10-10 16 0" stroke="#1f2a37" stroke-width="2" fill="none"/></svg>432 </div>433 <div class="round-btn">434 <svg class="icon" viewBox="0 0 24 24"><rect x="6" y="6" width="4" height="12" fill="#1f2a37"/><rect x="14" y="6" width="4" height="12" fill="#1f2a37"/></svg>435 </div>436 </div>437 </div>438 439 <div class="home-indicator"></div>440 441 <!-- Bottom navigation -->442 <div class="bottom-nav">443 <div class="nav-item">444 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H15v-6H9v6H3z" fill="none" stroke="#8a94a5" stroke-width="2"/></svg>445 HOME446 </div>447 <div class="nav-item">448 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M5 4h14v6H5zM5 14h14v6H5z" fill="none" stroke="#8a94a5" stroke-width="2"/></svg>449 LIBRARY450 </div>451 <div class="nav-item">452 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 18c5-8 11-8 16 0" stroke="#8a94a5" stroke-width="2" fill="none"/></svg>453 RADIO454 </div>455 <div class="nav-item active">456 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" stroke="#263244" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#263244" stroke-width="2"/></svg>457 SEARCH458 </div>459 <div class="nav-item">460 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" stroke="#8a94a5" stroke-width="2" fill="none"/><rect x="13" y="13" width="7" height="7" stroke="#8a94a5" stroke-width="2" fill="none"/></svg>461 PREMIUM462 </div>463 </div>464</div>465</body>466</html>