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 List UI</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#F2F5F8;13  }14 15  /* Top teal area (status + app bar) */16  .teal-header{17    position:absolute; left:0; top:0; width:100%; height:320px; background:#56C0CF;18  }19  .status-bar{20    height:90px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; color:#0D3B46; font-weight:600; font-size:36px; opacity:0.95;21  }22  .status-icons{ display:flex; align-items:center; gap:22px; }23  .dot{ width:10px; height:10px; border-radius:50%; background:#0D3B46; opacity:0.7; }24  .toolbar{25    position:absolute; left:0; top:110px; height:210px; width:100%; display:flex; align-items:center;26    padding:0 28px;27  }28  .back-btn{29    width:80px; height:80px; display:flex; align-items:center; justify-content:center;30    margin-left:10px;31  }32  .back-btn svg{ width:56px; height:56px; fill:#0D3B46; }33 34  /* List area */35  .list{36    position:absolute; left:0; top:320px; right:0; bottom:0;37    padding:10px 0 0 0; overflow:hidden;38  }39  .item{40    background:#FFFFFF; padding:40px 40px 36px 40px; position:relative;41  }42  .title{43    font-size:44px; color:#273646; font-weight:800; line-height:1.25;44  }45  .date{46    margin-top:10px; font-size:34px; color:#8A95A4; font-style:italic;47  }48  .desc{49    margin-top:18px; font-size:34px; color:#5F6D7A; line-height:1.35;50    max-height:100px; overflow:hidden; text-overflow:ellipsis;51  }52  .divider{ height:2px; background:#E6EBEF; margin:28px 0 0 0; }53  .more{54    position:absolute; right:30px; top:36px; width:70px; height:70px; display:flex; align-items:center; justify-content:center;55  }56  .more svg{ width:36px; height:36px; fill:#5C6671; }57 58  /* Ad banner */59  .ad-wrap{ background:#FFFFFF; padding:18px 20px; }60  .ad{61    width:100%; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:space-between; padding:0 24px; color:#606C78; font-size:32px;62  }63  .ad .btn{64    background:#3F7DF2; color:#fff; padding:22px 36px; border-radius:6px; font-weight:700; font-size:34px;65  }66 67  /* Mini player */68  .mini-player{69    position:absolute; left:0; right:0; bottom:170px; background:#FFFFFF; height:150px; border-top:2px solid #E5EAEE; display:flex; align-items:center; padding:0 24px;70  }71  .art{72    width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#707B85; font-size:28px; margin-right:24px;73  }74  .track{75    flex:1;76  }77  .track .t1{ font-size:36px; font-weight:800; color:#22313B; }78  .track .t2{ font-size:28px; color:#7C8A96; margin-top:6px; }79  .player-actions{ display:flex; align-items:center; gap:28px; }80  .icon-btn svg{ width:56px; height:56px; fill:#22313B; }81 82  /* Bottom navigation */83  .bottom-nav{84    position:absolute; left:0; right:0; bottom:0; height:170px; background:#FFFFFF; border-top:2px solid #E5EAEE; display:flex; align-items:center; justify-content:space-around;85  }86  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#8A96A3; font-size:26px; letter-spacing:2px; }87  .nav-item svg{ width:54px; height:54px; fill:#8A96A3; }88  .nav-item.active{ color:#1E2B35; font-weight:800; }89  .nav-item.active svg{ fill:#1E2B35; }90  .indicator{91    position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:200px; height:10px; background:#C7CDD4; border-radius:6px;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Top teal header -->99  <div class="teal-header">100    <div class="status-bar">101      <div>9:42</div>102      <div class="status-icons">103        <div class="dot"></div>104        <div class="dot"></div>105        <div class="dot"></div>106        <div class="dot"></div>107        <div class="dot"></div>108      </div>109    </div>110    <div class="toolbar">111      <div class="back-btn" aria-label="Back">112        <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/></svg>113      </div>114    </div>115  </div>116 117  <!-- List area -->118  <div class="list">119 120    <div class="item">121      <div class="title">The 'Marc on Movies' Special</div>122      <div class="date">12/25/2023</div>123      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>124      <div class="more" aria-label="More">125        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>126      </div>127      <div class="divider"></div>128    </div>129 130    <div class="item">131      <div class="title">The 'Marc on Movies' Special</div>132      <div class="date">12/25/2023</div>133      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>134      <div class="more" aria-label="More">135        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>136      </div>137      <div class="divider"></div>138    </div>139 140    <div class="item">141      <div class="title">The 'Marc on Movies' Special</div>142      <div class="date">12/25/2023</div>143      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>144      <div class="more" aria-label="More">145        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>146      </div>147      <div class="divider"></div>148    </div>149 150    <div class="item">151      <div class="title">Episode 1498 - Blitz Bazawule</div>152      <div class="date">12/21/2023</div>153      <div class="desc">Growing up in Ghana, director Blitz Bazawule relied on three things to trans…</div>154      <div class="more" aria-label="More">155        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>156      </div>157      <div class="divider"></div>158    </div>159 160    <div class="ad-wrap">161      <div class="ad">162        <div>Visualize the exterior of your home before building it using 3D Services!</div>163        <div class="btn">Install</div>164      </div>165    </div>166 167    <div class="item" style="padding-bottom:28px;">168      <div class="title">The 'Marc on Movies' Special</div>169      <div class="date">12/25/2023</div>170      <div class="desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>171      <div class="more" aria-label="More">172        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>173      </div>174    </div>175 176  </div>177 178  <!-- Mini Player -->179  <div class="mini-player">180    <div class="art">[IMG: Podcast Cover]</div>181    <div class="track">182      <div class="t1">WTF with Marc Maron 24/7</div>183      <div class="t2">WTF with Marc Maron Podcast</div>184    </div>185    <div class="player-actions">186      <div class="icon-btn" title="Broadcast">187        <svg viewBox="0 0 24 24">188          <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>189          <path d="M4 12a8 8 0 0116 0" fill="none" stroke="currentColor" stroke-width="2"/>190          <path d="M6 12a6 6 0 0112 0" fill="none" stroke="currentColor" stroke-width="2"/>191        </svg>192      </div>193      <div class="icon-btn" title="Pause">194        <svg viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14"></rect><rect x="14" y="5" width="4" height="14"></rect></svg>195      </div>196    </div>197  </div>198 199  <!-- Bottom Navigation -->200  <div class="bottom-nav">201    <div class="nav-item">202      <svg viewBox="0 0 24 24"><path d="M12 3l9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10l9-7z"/></svg>203      <div>HOME</div>204    </div>205    <div class="nav-item">206      <svg viewBox="0 0 24 24"><path d="M6 3h12v18H6zM9 3v18"/></svg>207      <div>LIBRARY</div>208    </div>209    <div class="nav-item">210      <svg viewBox="0 0 24 24"><path d="M12 3l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z"/></svg>211      <div>RADIO</div>212    </div>213    <div class="nav-item active">214      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>215      <div>SEARCH</div>216    </div>217    <div class="nav-item">218      <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/></svg>219      <div>PREMIUM</div>220    </div>221    <div class="indicator"></div>222  </div>223 224</div>225</body>226</html>