GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>This American Life - Channel UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f0f0f;13 color: #fff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 }16 17 /* Top status bar */18 .status-bar {19 height: 80px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #eaeaea;25 font-size: 34px;26 }27 .status-right {28 display: flex;29 gap: 28px;30 align-items: center;31 }32 .status-icon svg { width: 40px; height: 40px; fill: #eaeaea; }33 34 /* App bar */35 .app-bar {36 height: 108px;37 display: flex;38 align-items: center;39 padding: 0 24px;40 gap: 20px;41 }42 .app-title {43 font-size: 54px;44 font-weight: 700;45 flex: 1;46 }47 .app-actions {48 display: flex;49 gap: 28px;50 }51 .icon-btn svg { width: 50px; height: 50px; fill: #eaeaea; }52 53 /* Banner */54 .banner {55 height: 320px;56 margin: 0 0 30px 0;57 background: #E0E0E0;58 border: 1px solid #BDBDBD;59 display: flex;60 align-items: center;61 justify-content: center;62 color: #757575;63 font-size: 32px;64 }65 66 /* Channel header section */67 .channel-header {68 position: relative;69 padding-bottom: 32px;70 }71 .channel-avatar {72 width: 160px;73 height: 160px;74 border-radius: 50%;75 background: #c9302c;76 border: 6px solid #111;77 color: #fff;78 display: flex;79 align-items: center;80 justify-content: center;81 font-weight: 700;82 font-size: 30px;83 margin: -110px auto 24px;84 }85 .channel-name {86 text-align: center;87 font-size: 64px;88 font-weight: 800;89 letter-spacing: 0.5px;90 }91 .channel-meta {92 text-align: center;93 color: #cfcfcf;94 font-size: 30px;95 margin-top: 10px;96 }97 .channel-desc {98 text-align: center;99 color: #cfcfcf;100 font-size: 30px;101 margin: 18px 80px 0;102 line-height: 1.4;103 }104 .channel-links {105 text-align: center;106 margin-top: 18px;107 font-size: 30px;108 color: #3ea6ff;109 }110 111 /* Action buttons */112 .action-row {113 display: flex;114 gap: 24px;115 justify-content: center;116 margin: 28px 0 6px;117 padding: 0 24px;118 }119 .pill {120 height: 100px;121 padding: 0 32px;122 border-radius: 50px;123 border: 1px solid #333;124 background: #202020;125 color: #fff;126 display: inline-flex;127 align-items: center;128 gap: 16px;129 font-size: 34px;130 font-weight: 600;131 }132 .pill .small-icon svg { width: 40px; height: 40px; fill: #cfcfcf; }133 .pill.join {134 background: #303030;135 border: 1px solid #4a4a4a;136 }137 138 /* Tabs */139 .tabs {140 display: flex;141 gap: 46px;142 padding: 20px 24px 0;143 border-bottom: 1px solid #222;144 margin-top: 20px;145 }146 .tab {147 padding: 22px 10px;148 color: #cfcfcf;149 font-size: 36px;150 font-weight: 700;151 position: relative;152 }153 .tab.active { color: #fff; }154 .tab.active::after {155 content: "";156 position: absolute;157 left: 0; right: 0; bottom: -2px;158 height: 6px;159 background: #fff;160 border-radius: 3px;161 }162 163 /* Video list */164 .section-title {165 font-size: 44px;166 font-weight: 700;167 padding: 28px 24px 14px;168 }169 .video-list { padding: 0 24px; }170 .video-row {171 display: flex;172 gap: 26px;173 margin-bottom: 28px;174 position: relative;175 }176 .thumb {177 width: 336px;178 height: 200px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 color: #757575;182 display: flex;183 align-items: center;184 justify-content: center;185 font-size: 26px;186 position: relative;187 }188 .duration {189 position: absolute;190 bottom: 10px;191 right: 10px;192 background: rgba(0,0,0,0.8);193 color: #fff;194 padding: 6px 10px;195 font-size: 28px;196 border-radius: 6px;197 }198 .vid-info {199 flex: 1;200 padding-top: 6px;201 }202 .vid-title {203 font-size: 40px;204 font-weight: 800;205 line-height: 1.2;206 margin-bottom: 10px;207 }208 .vid-meta {209 color: #bdbdbd;210 font-size: 30px;211 }212 .row-menu {213 position: absolute;214 right: 24px;215 top: 12px;216 }217 .row-menu svg { width: 36px; height: 36px; fill: #bdbdbd; }218 219 /* Ad strip */220 .ad-strip {221 margin: 8px 0 0;222 border-top: 1px solid #1f1f1f;223 padding: 14px 24px;224 position: relative;225 }226 .ad-box {227 background: #181818;228 border: 1px solid #2a2a2a;229 border-radius: 16px;230 padding: 20px;231 display: flex;232 align-items: center;233 gap: 22px;234 }235 .ad-thumb {236 width: 220px;237 height: 110px;238 background: #E0E0E0;239 border: 1px solid #BDBDBD;240 color: #757575;241 display: flex;242 align-items: center;243 justify-content: center;244 font-size: 24px;245 }246 .ad-text { flex: 1; }247 .ad-title { font-size: 34px; font-weight: 700; }248 .ad-sub { font-size: 28px; color: #bdbdbd; margin-top: 6px; }249 .ad-actions {250 display: flex;251 align-items: center;252 gap: 22px;253 }254 .progress {255 width: 320px; height: 6px; background: #333; border-radius: 3px; overflow: hidden;256 }257 .progress > div { width: 160px; height: 100%; background: #ffd54f; }258 .close-btn {259 width: 46px; height: 46px; border-radius: 50%;260 border: 1px solid #555; display: flex; align-items: center; justify-content: center;261 }262 .close-btn svg { width: 28px; height: 28px; fill: #bdbdbd; }263 264 /* Bottom navigation */265 .bottom-nav {266 position: absolute;267 left: 0; right: 0; bottom: 0;268 height: 150px;269 background: #0f0f0f;270 border-top: 1px solid #1f1f1f;271 display: flex;272 align-items: center;273 justify-content: space-around;274 padding-bottom: 8px;275 }276 .nav-item {277 display: flex;278 flex-direction: column;279 align-items: center;280 gap: 10px;281 color: #cfcfcf;282 font-size: 26px;283 }284 .nav-item.active { color: #fff; }285 .nav-item svg { width: 52px; height: 52px; fill: currentColor; }286 .center-plus {287 width: 104px; height: 104px; border-radius: 50%; background: #202020;288 display: flex; align-items: center; justify-content: center; border: 1px solid #2d2d2d;289 transform: translateY(-26px);290 }291 .red-dot {292 position: absolute;293 width: 16px; height: 16px; background: #e53935; border-radius: 50%;294 margin-top: -8px; margin-left: 44px;295 }296</style>297</head>298<body>299<div id="render-target">300 301 <!-- Status Bar -->302 <div class="status-bar">303 <div>9:12</div>304 <div class="status-right">305 <div class="status-icon">306 <!-- simple cloud icon -->307 <svg viewBox="0 0 24 24"><path d="M6 17h10a4 4 0 0 0 0-8h-.3A6 6 0 0 0 6 7a5 5 0 0 0 0 10z"/></svg>308 </div>309 <div class="status-icon">310 <!-- wifi -->311 <svg viewBox="0 0 24 24"><path d="M12 18.5l2 2-2 2-2-2 2-2zm-6-7a10 10 0 0 1 16 0l-1.5 1.5a8 8 0 0 0-13 0L6 11.5zm3 3a6 6 0 0 1 10 0l-1.5 1.5a4 4 0 0 0-7 0L9 14.5z"/></svg>312 </div>313 <div class="status-icon">314 <!-- battery -->315 <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>316 </div>317 </div>318 </div>319 320 <!-- App Bar -->321 <div class="app-bar">322 <div class="icon-btn">323 <!-- back arrow -->324 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7v14z"/></svg>325 </div>326 <div class="app-title">This American Life</div>327 <div class="app-actions">328 <!-- cast -->329 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M3 5h18v12H3V5zm0 14h7v2H3v-2zm1-5h3a6 6 0 0 1 6 6H11a4 4 0 0 0-4-4H4v-2z"/></svg></div>330 <!-- search -->331 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm8.5 14.5L21 20l-2.5 2.5-2.5-2.5 2.5-2.5z"/></svg></div>332 <!-- more -->333 <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></div>334 </div>335 </div>336 337 <!-- Banner Image -->338 <div class="banner">[IMG: Desert canyon banner]</div>339 340 <!-- Channel Header -->341 <div class="channel-header">342 <div class="channel-avatar">This American Life</div>343 <div class="channel-name">This American Life</div>344 <div class="channel-meta">@ThisAmericanLifeOfficial · 7.2K subscribers · 57 videos</div>345 <div class="channel-desc">346 This American Life is a weekly public radio show, heard by 2.2 million people on more than 500 stations. Another 2.5 million people listen as a podcast…347 </div>348 <div class="channel-links">facebook.com/thislife and 2 more links</div>349 350 <!-- Action buttons -->351 <div class="action-row">352 <div class="pill">353 <span class="small-icon">354 <!-- bell -->355 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6H4l2-2v-4a6 6 0 0 1 12 0v4l2 2z"/></svg>356 </span>357 Subscribed358 <span class="small-icon">359 <!-- caret -->360 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>361 </span>362 </div>363 <div class="pill join">Join</div>364 </div>365 </div>366 367 <!-- Tabs -->368 <div class="tabs">369 <div class="tab active">Home</div>370 <div class="tab">Videos</div>371 <div class="tab">Live</div>372 <div class="tab">Podcasts</div>373 <div class="tab">Playlists</div>374 </div>375 376 <!-- Videos -->377 <div class="section-title">Videos</div>378 <div class="video-list">379 <!-- Video 1 -->380 <div class="video-row">381 <div class="thumb">382 [IMG: Runner in field at sunset]383 <div class="duration">58:27</div>384 </div>385 <div class="vid-info">386 <div class="vid-title">This American Life: Save the Day</div>387 <div class="vid-meta">9.8K views · 9 months ago</div>388 </div>389 <div class="row-menu">390 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>391 </div>392 </div>393 394 <!-- Video 2 -->395 <div class="video-row">396 <div class="thumb">397 [IMG: Stage show panelist on set]398 <div class="duration">1:01:06</div>399 </div>400 <div class="vid-info">401 <div class="vid-title">This American Life: Through the Looking Glass</div>402 <div class="vid-meta">3.5K views · 9 months ago</div>403 </div>404 <div class="row-menu">405 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>406 </div>407 </div>408 </div>409 410 <!-- Ad strip -->411 <div class="ad-strip">412 <div class="ad-box">413 <div class="ad-thumb">[IMG: Video ad preview]</div>414 <div class="ad-text">415 <div class="ad-title">Your video will play after this ad</div>416 <div class="ad-sub">Sponsored</div>417 <div class="progress"><div></div></div>418 </div>419 <div class="ad-actions">420 <!-- play icon -->421 <svg viewBox="0 0 24 24" style="width:46px;height:46px;fill:#eaeaea;"><path d="M8 5v14l11-7-11-7z"/></svg>422 <div class="close-btn">423 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6" stroke="#bdbdbd" stroke-width="2" fill="none"/></svg>424 </div>425 </div>426 </div>427 </div>428 429 <!-- Bottom Navigation -->430 <div class="bottom-nav">431 <div class="nav-item active">432 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9h-6v-6H9v6H3v-9z"/></svg>433 <div>Home</div>434 </div>435 <div class="nav-item">436 <svg viewBox="0 0 24 24"><path d="M4 5h16v6H4V5zm0 8h16v6H4v-6z"/></svg>437 <div>Shorts</div>438 </div>439 <div class="center-plus">440 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>441 </div>442 <div class="nav-item">443 <div style="position: relative;">444 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/></svg>445 <span class="red-dot"></span>446 </div>447 <div>Subscriptions</div>448 </div>449 <div class="nav-item">450 <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm4 3v8l8-4-8-4z"/></svg>451 <div>Library</div>452 </div>453 </div>454 455</div>456</body>457</html>