GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F7FA;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1B2433;17  }18 19  /* Top app bar */20  .appbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 240px;26    background: #1CA7AE; /* teal */27    box-shadow: 0 2px 8px rgba(0,0,0,0.1);28  }29  .status-row {30    height: 96px;31    display: flex;32    align-items: center;33    padding: 0 36px;34    color: #0E2B2E;35    opacity: 0.9;36  }37  .status-time {38    font-size: 40px;39    font-weight: 600;40    letter-spacing: 0.5px;41  }42  .status-icons {43    margin-left: auto;44    display: flex;45    gap: 20px;46    align-items: center;47  }48  .nav-row {49    height: 144px;50    display: flex;51    align-items: center;52    padding-left: 28px;53  }54  .back-btn {55    width: 72px;56    height: 72px;57  }58 59  /* List items under appbar */60  .list {61    position: absolute;62    top: 240px;63    left: 0;64    width: 100%;65    padding: 24px 40px;66  }67  .card {68    background: #FFFFFF;69    border-radius: 16px;70    padding: 36px 32px;71    margin-bottom: 28px;72    box-shadow: 0 1px 0 rgba(0,0,0,0.06);73    border: 1px solid #ECEFF4;74  }75  .card h3 {76    margin: 0;77    font-size: 48px;78    font-weight: 800;79    color: #111B2A;80  }81  .card .meta {82    margin-top: 12px;83    font-size: 34px;84    color: #8A93A3;85    letter-spacing: 1px;86  }87  .card .desc {88    margin-top: 18px;89    font-size: 36px;90    line-height: 1.35;91    color: #3D4654;92    max-width: 880px;93  }94  .card .more {95    position: absolute;96    right: 48px;97    margin-top: -14px;98    font-size: 52px;99    color: #414B5A;100  }101  .divider {102    height: 1px;103    background: #E6EBF2;104    margin: 32px 0 0 0;105  }106 107  /* Bottom sheet overlay */108  .scrim {109    position: absolute;110    top: 240px;111    left: 0;112    width: 100%;113    height: 860px;114    background: rgba(0,0,0,0.25);115  }116  .bottom-sheet {117    position: absolute;118    top: 1050px;119    left: 0;120    width: 100%;121    background: #FFFFFF;122    border-top-left-radius: 28px;123    border-top-right-radius: 28px;124    box-shadow: 0 -8px 24px rgba(0,0,0,0.15);125    padding: 64px 72px 40px;126  }127  .delete-btn {128    width: 900px;129    height: 132px;130    border-radius: 66px;131    background: #141930;132    color: #E8ECF7;133    display: flex;134    align-items: center;135    justify-content: center;136    margin: 0 auto;137    font-size: 44px;138    font-weight: 800;139    letter-spacing: 6px;140  }141 142  /* Episode details section */143  .episode {144    position: absolute;145    top: 1350px;146    left: 0;147    width: 100%;148    padding: 54px 56px 160px;149    background: #F7F9FC;150  }151  .ep-header {152    display: flex;153    align-items: center;154    gap: 28px;155    margin-bottom: 24px;156  }157  .ep-title {158    font-size: 56px;159    font-weight: 800;160    color: #151D33;161    letter-spacing: 0.5px;162  }163  .share {164    margin-left: auto;165    width: 64px;166    height: 64px;167  }168  .ep-meta {169    font-size: 34px;170    color: #9AA3B2;171    letter-spacing: 3px;172    margin: 28px 0 22px;173  }174  .ep-text {175    font-size: 36px;176    line-height: 1.55;177    color: #2C3445;178    max-width: 940px;179  }180 181  /* Home indicator */182  .home-indicator {183    position: absolute;184    bottom: 30px;185    left: 50%;186    transform: translateX(-50%);187    width: 320px;188    height: 12px;189    background: #C6CCD8;190    border-radius: 12px;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- App bar -->198  <div class="appbar">199    <div class="status-row">200      <div class="status-time">9:44</div>201      <div class="status-icons">202        <!-- simple chat bubble -->203        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">204          <path d="M6 7h24v16H18l-6 6v-6H6V7z" stroke="#0E2B2E" stroke-width="3" stroke-linejoin="round"/>205        </svg>206        <!-- small badge -->207        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">208          <circle cx="16" cy="16" r="10" stroke="#0E2B2E" stroke-width="3"/>209          <text x="12" y="21" font-size="12" fill="#0E2B2E">ib</text>210        </svg>211        <!-- letters LR -->212        <div style="font-weight:700;color:#0E2B2E;font-size:22px;border:1px solid #0E2B2E;border-radius:4px;padding:4px 6px;">LR</div>213        <!-- slash icon -->214        <svg width="34" height="34" viewBox="0 0 34 34">215          <path d="M6 28L28 6" stroke="#0E2B2E" stroke-width="3"/>216        </svg>217        <!-- dot -->218        <div style="width:10px;height:10px;background:#0E2B2E;border-radius:50%;"></div>219        <!-- mute icon -->220        <svg width="34" height="34" viewBox="0 0 34 34">221          <path d="M6 20h6l10 8V8l-10 8H6v4z" fill="#0E2B2E"/>222          <path d="M8 8l18 18" stroke="#0E2B2E" stroke-width="3"/>223        </svg>224        <!-- wifi -->225        <svg width="36" height="36" viewBox="0 0 36 36">226          <path d="M6 14c8-6 16-6 24 0" stroke="#0E2B2E" stroke-width="3" fill="none"/>227          <path d="M10 18c6-4 10-4 16 0" stroke="#0E2B2E" stroke-width="3" fill="none"/>228          <circle cx="18" cy="24" r="2.5" fill="#0E2B2E"/>229        </svg>230        <!-- battery -->231        <svg width="40" height="36" viewBox="0 0 40 36">232          <rect x="4" y="8" width="28" height="20" rx="3" stroke="#0E2B2E" stroke-width="3"/>233          <rect x="7" y="11" width="18" height="14" fill="#0E2B2E"/>234          <rect x="33" y="13" width="4" height="10" rx="1" fill="#0E2B2E"/>235        </svg>236      </div>237    </div>238    <div class="nav-row">239      <!-- Back arrow -->240      <svg class="back-btn" viewBox="0 0 48 48">241        <path d="M30 10 L18 24 L30 38" stroke="#0E2B2E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>242      </svg>243    </div>244  </div>245 246  <!-- Content list under the app bar -->247  <div class="list">248    <div class="card" style="position: relative;">249      <div class="more">•••</div>250      <h3>The 'Marc on Movies' Special</h3>251      <div class="meta">12/25/2023</div>252      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>253      <div class="divider"></div>254    </div>255 256    <div class="card" style="position: relative;">257      <div class="more">•••</div>258      <h3>The 'Marc on Movies' Special</h3>259      <div class="meta">12/25/2023</div>260      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>261    </div>262  </div>263 264  <!-- Scrim over content and bottom sheet -->265  <div class="scrim"></div>266 267  <div class="bottom-sheet">268    <div class="delete-btn">DELETE</div>269  </div>270 271  <!-- Episode details section -->272  <div class="episode">273    <div class="ep-header">274      <!-- Play icon -->275      <svg width="78" height="78" viewBox="0 0 78 78">276        <circle cx="39" cy="39" r="34" stroke="#1B2433" stroke-width="4" fill="none"/>277        <polygon points="33,27 56,39 33,51" fill="#1B2433"/>278      </svg>279      <div class="ep-title">Episode 1498 - Blitz Bazawule</div>280      <!-- Share icon -->281      <svg class="share" viewBox="0 0 24 24" fill="none">282        <path d="M12 4l4 4h-3v6h-2V8H8l4-4z" fill="#1B2433"/>283        <path d="M6 18h12v2H6z" fill="#1B2433"/>284      </svg>285    </div>286    <div class="ep-meta">Dec 21, 2023 · 01:36:17</div>287    <div class="ep-text">288      Growing up in Ghana, director Blitz Bazawule relied on three things to transport him to other worlds: movies,289      American hip-hop, and his grandmother’s stories. Blitz tells Marc how he combined all three in his work as a290      director, how his style of visual poetry attracted the attention of Beyoncé, and how he suddenly found himself291      at the helm of his first major studio film, the musical version of The Color Purple. Sign up here for WTF+ to292      get the full show archives and weekly bonus material! https://plus.acast.com/s/wtf-with-marc-maron-podcast.293      <br><br>294      Hosted on Acast. See acast.com/privacy for more information.295    </div>296  </div>297 298  <!-- Home indicator -->299  <div class="home-indicator"></div>300</div>301</body>302</html>