GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - This American Life</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #111; color: #fff;11  }12  .status-bar {13    height: 80px; padding: 0 24px;14    display: flex; align-items: center; justify-content: space-between;15    font-size: 34px; color: #dcdcdc;16  }17  .status-icons svg { width: 40px; height: 40px; margin-left: 22px; fill: #dcdcdc; }18  .top-search {19    height: 120px; padding: 0 20px;20    display: flex; align-items: center;21  }22  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }23  .icon-btn svg { width: 48px; height: 48px; fill: #fff; opacity: 0.9; }24  .search-field {25    flex: 1; height: 86px; margin: 0 12px;26    background: #1e1e1e; border-radius: 44px; border: 1px solid #2c2c2c;27    display: flex; align-items: center; padding: 0 28px; color: #e6e6e6;28    font-size: 36px;29  }30  .search-text { flex: 1; opacity: 0.95; }31  .search-actions svg { width: 42px; height: 42px; fill: #bdbdbd; margin-left: 18px; }32  .thumb {33    width: 1080px; height: 480px;34    background: #E0E0E0; border: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center;36    color: #555; font-size: 38px; letter-spacing: 0.2px;37    position: relative;38  }39  .duration {40    position: absolute; right: 22px; bottom: 22px;41    background: rgba(0,0,0,0.75); color: #fff;42    padding: 8px 14px; border-radius: 10px; font-size: 34px;43  }44  .wave {45    height: 90px; background: #1b1b1b; display: flex; align-items: center;46    overflow: hidden;47  }48  .wave .bar {49    width: 20px; background: #eaeaea; margin: 0 8px; border-radius: 6px;50    animation: none; opacity: 0.9;51  }52  .wave .bar:nth-child(odd) { height: 38px; }53  .wave .bar:nth-child(even) { height: 22px; }54  .wave .bar:nth-child(3n) { height: 55px; }55  .video-meta {56    padding: 24px; position: relative; background: #111;57  }58  .avatar {59    width: 100px; height: 100px; border-radius: 100px;60    background: #c62828; display: inline-flex; align-items: center; justify-content: center;61    font-weight: bold; font-size: 26px; margin-right: 22px;62  }63  .title-row { display: flex; align-items: flex-start; }64  .video-title { font-size: 44px; font-weight: 700; line-height: 1.2; margin-top: 4px; }65  .kebab { position: absolute; right: 26px; top: 36px; }66  .kebab svg { width: 50px; height: 50px; fill: #d9d9d9; }67  .subline { font-size: 32px; color: #c0c0c0; margin-left: 146px; margin-top: 6px; }68  .chips { display: flex; padding: 10px 24px 24px; gap: 18px; }69  .chip {70    background: #1f1f1f; border: 1px solid #2b2b2b;71    border-radius: 26px; padding: 18px 24px; font-size: 32px; color: #e8e8e8;72    display: flex; align-items: center; gap: 16px;73  }74  .chip .time { background: #b71c1c; color: #fff; padding: 6px 10px; border-radius: 14px; font-weight: 600; }75  .chip .arrow svg { width: 32px; height: 32px; fill: #cfcfcf; }76  .channel-card {77    display: flex; align-items: center; padding: 28px; border-top: 1px solid #252525; border-bottom: 1px solid #252525;78    background: #111;79  }80  .channel-logo {81    width: 160px; height: 160px; border-radius: 160px; background: #c62828; color: #fff;82    display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; margin-right: 28px;83  }84  .channel-info { flex: 1; }85  .channel-name { font-size: 44px; font-weight: 700; }86  .channel-handle { font-size: 30px; color: #bdbdbd; margin-top: 6px; }87  .subs { font-size: 30px; color: #bdbdbd; margin-top: 6px; }88  .subscribe-btn {89    background: #232323; border: 1px solid #2d2d2d; color: #eaeaea; border-radius: 40px;90    padding: 16px 22px; display: inline-flex; align-items: center; gap: 14px; font-size: 32px; margin-top: 8px;91  }92  .subscribe-btn svg { width: 36px; height: 36px; fill: #eaeaea; }93  .art {94    width: 1080px; height: 720px; background: #E0E0E0; border: 1px solid #BDBDBD;95    display: flex; align-items: center; justify-content: center; color: #555; font-size: 36px;96  }97  /* Mini player */98  .mini-player {99    position: absolute; bottom: 180px; left: 0; width: 1080px; height: 140px;100    background: #1a1a1a; border-top: 1px solid #2a2a2a; display: flex; align-items: center; padding: 12px 20px;101  }102  .mini-thumb {103    width: 220px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;104    display: flex; align-items: center; justify-content: center; color: #555; font-size: 26px;105  }106  .mini-info { flex: 1; padding: 0 20px; }107  .mini-title { font-size: 34px; font-weight: 700; }108  .mini-channel { font-size: 28px; color: #c0c0c0; margin-top: 4px; }109  .mini-actions { display: flex; align-items: center; gap: 30px; }110  .mini-actions svg { width: 52px; height: 52px; fill: #fff; }111  .mini-progress {112    position: absolute; bottom: 0; left: 0; height: 8px; width: 1080px; background: #333;113  }114  .mini-progress .bar { height: 8px; width: 320px; background: #e53935; }115  /* Bottom navigation */116  .bottom-nav {117    position: absolute; bottom: 0; left: 0; width: 1080px; height: 180px;118    background: #0f0f0f; border-top: 1px solid #262626;119    display: flex; align-items: center; justify-content: space-around;120  }121  .nav-item { display: flex; flex-direction: column; align-items: center; color: #ddd; font-size: 26px; }122  .nav-item svg { width: 60px; height: 60px; fill: #ddd; margin-bottom: 8px; }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="status-bar">130    <div>7:03</div>131    <div class="status-icons">132      <!-- cellular -->133      <svg viewBox="0 0 24 24"><path d="M3 20h2v-4H3v4zm4 0h2v-6H7v6zm4 0h2v-8h-2v8zm4 0h2v-10h-2v10zm4 0h2V4h-2v16z"/></svg>134      <!-- wifi -->135      <svg viewBox="0 0 24 24"><path d="M12 20l3-3H9l3 3zm8.94-10.94A15.91 15.91 0 0 0 12 6a15.91 15.91 0 0 0-8.94 3.06L4 11a12.9 12.9 0 0 1 8-2 12.9 12.9 0 0 1 8 2l.94-1.94z"/></svg>136      <!-- battery -->137      <svg viewBox="0 0 24 24"><path d="M20 8h2v8h-2V8zM2 8h17v8H2V8zm3 2v4h11v-4H5z"/></svg>138    </div>139  </div>140 141  <!-- Search header -->142  <div class="top-search">143    <div class="icon-btn">144      <!-- back arrow -->145      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>146    </div>147    <div class="search-field">148      <div class="search-text">this american life the...</div>149      <div class="search-actions">150        <!-- clear (x) -->151        <svg viewBox="0 0 24 24"><path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.41L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.29 6.3 6.29-6.3z"/></svg>152      </div>153    </div>154    <div class="icon-btn">155      <!-- mic -->156      <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-4.08A7 7 0 0 0 19 11h-2z"/></svg>157    </div>158    <div class="icon-btn">159      <!-- cast -->160      <svg viewBox="0 0 24 24"><path d="M3 5h18v12H14v-2h5V7H5v1H3V5zm0 6v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0 4v2c1.66 0 3 1.34 3 3h2c0-2.76-2.24-5-5-5zm0 4v2h2c0-1.1-.9-2-2-2z"/></svg>161    </div>162    <div class="icon-btn">163      <!-- more (vertical dots) -->164      <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 6zm0 8a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 14zm0 8a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 22z"/></svg>165    </div>166  </div>167 168  <!-- Episode cover -->169  <div class="thumb">170    [IMG: Episode cover - This American Life]171    <div class="duration">58:37</div>172  </div>173 174  <!-- Waveform -->175  <div class="wave">176    <!-- a simple set of bars to mimic a waveform -->177    <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>178    <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>179    <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>180    <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>181    <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>182  </div>183 184  <!-- Video meta -->185  <div class="video-meta">186    <div class="title-row">187      <div class="avatar">TAL</div>188      <div>189        <div class="video-title">This American Life: The Call</div>190      </div>191    </div>192    <div class="kebab">193      <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 5zm0 5a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 10zm0 5a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 15z"/></svg>194    </div>195    <div class="subline">This American Life · 2K views · Streamed 12 days ago</div>196  </div>197 198  <!-- Chips row -->199  <div class="chips">200    <div class="chip">201      <span class="time">0:00</span>202      Support for This American Life comes...203    </div>204    <div class="chip">205      Transcript206      <span class="arrow">207        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>208      </span>209    </div>210  </div>211 212  <!-- Channel card -->213  <div class="channel-card">214    <div class="channel-logo">TAL</div>215    <div class="channel-info">216      <div class="channel-name">This American Life</div>217      <div class="channel-handle">@ThisAmericanLifeOfficial</div>218      <div class="subs">7.21K subscribers</div>219      <div class="subscribe-btn">220        <!-- bell -->221        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5L4 17v2h16v-2l-2-1z"/></svg>222        Subscribed223        <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>224      </div>225    </div>226  </div>227 228  <!-- Additional content image -->229  <div class="art">[IMG: Abstract hands artwork]</div>230 231  <!-- Mini player -->232  <div class="mini-player">233    <div class="mini-thumb">[IMG: Episode cover]</div>234    <div class="mini-info">235      <div class="mini-title">This American Life: The Call</div>236      <div class="mini-channel">This American Life</div>237    </div>238    <div class="mini-actions">239      <!-- play -->240      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>241      <!-- close -->242      <svg viewBox="0 0 24 24"><path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.41L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.29 6.3 6.29-6.3z"/></svg>243    </div>244    <div class="mini-progress"><div class="bar"></div></div>245  </div>246 247  <!-- Bottom navigation -->248  <div class="bottom-nav">249    <div class="nav-item">250      <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>251      <div>Home</div>252    </div>253    <div class="nav-item">254      <svg viewBox="0 0 24 24"><path d="M10 8l6 4-6 4V8z"/><path d="M4 6h2v12H4V6z"/></svg>255      <div>Shorts</div>256    </div>257    <div class="nav-item">258      <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2h5z"/></svg>259      <div>+</div>260    </div>261    <div class="nav-item">262      <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm0 4h18v12H3V8zm3 3v6l5-3-5-3z"/></svg>263      <div>Subscriptions</div>264    </div>265    <div class="nav-item">266      <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm4 3v8h8V8H8z"/></svg>267      <div>Library</div>268    </div>269  </div>270 271</div>272</body>273</html>