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>Podcast Episode UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Inter, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #F4F6FA;20    border-radius: 24px;21    box-shadow: 0 8px 24px rgba(0,0,0,0.15);22  }23 24  /* Top app bar */25  .topbar {26    position: absolute;27    left: 0;28    top: 0;29    width: 1080px;30    height: 220px;31    background: #1FA7B3;32  }33  .topbar .back {34    position: absolute;35    left: 32px;36    top: 140px;37    width: 64px;38    height: 64px;39  }40  .topbar .status {41    position: absolute;42    left: 36px;43    top: 40px;44    font-size: 36px;45    color: rgba(0,0,0,0.65);46    letter-spacing: 1px;47  }48 49  /* Episode list preview under header */50  .list {51    position: absolute;52    top: 230px;53    left: 0;54    right: 0;55    padding: 0 40px;56  }57  .item {58    position: relative;59    padding: 36px 0 32px 0;60    border-bottom: 1px solid #E2E6EE;61  }62  .item .title {63    font-weight: 800;64    font-size: 44px;65    color: #1B2236;66    margin-bottom: 10px;67  }68  .item .date {69    font-size: 30px;70    color: #9AA3AF;71    font-style: italic;72    letter-spacing: 1px;73    margin-bottom: 20px;74  }75  .item .desc {76    font-size: 34px;77    color: #3A4254;78    line-height: 48px;79    opacity: 0.9;80    max-width: 860px;81  }82  .item .more {83    position: absolute;84    right: 10px;85    top: 20px;86    width: 60px;87    height: 60px;88  }89 90  /* Bottom sheet with Download button */91  .sheet {92    position: absolute;93    left: 0;94    top: 980px;95    width: 1080px;96    height: 420px;97    background: #FFFFFF;98    border-top-left-radius: 34px;99    border-top-right-radius: 34px;100    box-shadow: 0 -10px 24px rgba(0,0,0,0.08);101  }102  .cta {103    position: absolute;104    left: 120px;105    top: 70px;106    width: 840px;107    height: 140px;108    background: #171A2D;109    border-radius: 80px;110    display: flex;111    align-items: center;112    justify-content: center;113    letter-spacing: 4px;114    color: #FFFFFF;115    font-weight: 800;116    font-size: 40px;117  }118 119  /* Episode detail section */120  .detail {121    position: absolute;122    left: 40px;123    top: 1450px;124    right: 40px;125  }126  .detail-header {127    display: flex;128    align-items: center;129    gap: 26px;130    margin-bottom: 22px;131  }132  .play-icon {133    width: 80px;134    height: 80px;135  }136  .detail-title {137    font-size: 48px;138    font-weight: 800;139    color: #1B2236;140    flex: 1;141  }142  .share {143    width: 60px;144    height: 60px;145  }146  .meta {147    font-size: 32px;148    color: #A1A9B6;149    letter-spacing: 2px;150    margin: 18px 0 26px 106px;151  }152  .desc-long {153    font-size: 36px;154    color: #2E3547;155    line-height: 56px;156    margin-left: 106px;157    max-width: 960px;158  }159  .footer-note {160    font-size: 32px;161    color: #3F475A;162    line-height: 50px;163    margin-left: 106px;164    margin-top: 36px;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Top bar -->172  <div class="topbar">173    <div class="status">9:43</div>174    <svg class="back" viewBox="0 0 100 100">175      <path d="M70 20 L30 50 L70 80" fill="none" stroke="#0E4A51" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>176    </svg>177  </div>178 179  <!-- Episode list items -->180  <div class="list">181    <div class="item">182      <div class="title">The 'Marc on Movies' Special</div>183      <div class="date">12/25/2023</div>184      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segmen…</div>185      <svg class="more" viewBox="0 0 100 100">186        <circle cx="50" cy="20" r="8" fill="#3A4254"/>187        <circle cx="50" cy="50" r="8" fill="#3A4254"/>188        <circle cx="50" cy="80" r="8" fill="#3A4254"/>189      </svg>190    </div>191    <div class="item">192      <div class="title">The 'Marc on Movies' Special</div>193      <div class="date">12/25/2023</div>194      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segmen…</div>195      <svg class="more" viewBox="0 0 100 100">196        <circle cx="50" cy="20" r="8" fill="#3A4254"/>197        <circle cx="50" cy="50" r="8" fill="#3A4254"/>198        <circle cx="50" cy="80" r="8" fill="#3A4254"/>199      </svg>200    </div>201    <div class="item">202      <div class="title">The 'Marc on Movies' Special</div>203      <div class="date">12/25/2023</div>204      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segmen…</div>205      <svg class="more" viewBox="0 0 100 100">206        <circle cx="50" cy="20" r="8" fill="#3A4254"/>207        <circle cx="50" cy="50" r="8" fill="#3A4254"/>208        <circle cx="50" cy="80" r="8" fill="#3A4254"/>209      </svg>210    </div>211  </div>212 213  <!-- Bottom sheet -->214  <div class="sheet">215    <div class="cta">DOWNLOAD</div>216  </div>217 218  <!-- Episode detail -->219  <div class="detail">220    <div class="detail-header">221      <svg class="play-icon" viewBox="0 0 100 100">222        <circle cx="50" cy="50" r="45" fill="none" stroke="#1B2236" stroke-width="8"/>223        <polygon points="40,32 72,50 40,68" fill="#1B2236"/>224      </svg>225      <div class="detail-title">Episode 1498 - Blitz Bazawule</div>226      <svg class="share" viewBox="0 0 100 100">227        <path d="M30 40 L50 20 L70 40" fill="none" stroke="#1B2236" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>228        <path d="M50 20 L50 64" fill="none" stroke="#1B2236" stroke-width="8" stroke-linecap="round"/>229        <path d="M26 64 H74 V84 H26 Z" fill="none" stroke="#1B2236" stroke-width="8" stroke-linejoin="round"/>230      </svg>231    </div>232    <div class="meta">Dec 21, 2023 · 01:36:17</div>233    <div class="desc-long">234      Growing up in Ghana, director Blitz Bazawule relied on three things to transport him to other worlds: movies, American hip-hop, and his grandmother’s stories. Blitz tells Marc how he combined all three in his work as a director, how his style of visual poetry attracted the attention of Beyoncé, and how he suddenly found himself at the helm of his first major studio film, the musical version of The Color Purple. Sign up here for WTF+ to get the full show archives and weekly bonus material! https://plus.acast.com/s/wtf-with-marc-maron-podcast.235    </div>236    <div class="footer-note">237      Hosted on Acast. See acast.com/privacy for more information.238    </div>239  </div>240 241</div>242</body>243</html>