GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Office Ladies - Podcast UI</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:#0E0E0E; color:#F5F5F5;11 }12 13 /* Status bar */14 .statusbar {15 height:90px; padding:0 32px;16 display:flex; align-items:center; justify-content:space-between;17 color:#f0f0f0; font-weight:600; font-size:36px;18 }19 .status-icons { display:flex; gap:24px; align-items:center; }20 .status-icons svg { width:32px; height:32px; fill:#D7D7D7; opacity:0.9; }21 22 /* Header */23 .header { padding:10px 32px 20px 32px; }24 .back-row { height:72px; display:flex; align-items:center; gap:22px; }25 .back-row svg { width:44px; height:44px; fill:#FFFFFF; opacity:0.95; }26 .title { font-size:60px; font-weight:700; margin:12px 0 0 0; }27 28 .hero {29 display:flex; gap:28px; align-items:center;30 margin-top:24px;31 }32 .cover {33 width:240px; height:240px;34 background:#E0E0E0; border:1px solid #BDBDBD;35 display:flex; justify-content:center; align-items:center;36 color:#757575; font-weight:700; text-align:center; padding:10px;37 border-radius:20px;38 }39 .podcast-name { font-size:56px; font-weight:800; }40 .description {41 margin:24px 32px 14px 32px; color:#C7C7C7; font-size:34px; line-height:1.4;42 max-width:980px;43 }44 45 .actions { display:flex; align-items:center; gap:28px; padding:18px 32px; }46 .action-pill {47 display:flex; align-items:center; gap:16px;48 color:#EAEAEA; font-size:36px; font-weight:600;49 }50 .action-pill svg { width:40px; height:40px; fill:#DADADA; }51 52 /* Episodes */53 .section-title { padding:22px 32px 12px 32px; font-size:50px; font-weight:800; }54 .sort-row {55 position:absolute; right:32px; top:840px; /* approximate placement */56 display:flex; align-items:center; gap:18px;57 }58 .sort-btn {59 background:#1E1E1E; border-radius:12px; padding:18px 26px;60 font-size:36px; font-weight:700; color:#FFFFFF; border:1px solid #2A2A2A;61 }62 .sort-row svg { width:36px; height:36px; fill:#D0D0D0; }63 64 .episodes { margin-top:18px; padding:0 32px; }65 .episode { padding:28px 0; border-bottom:1px solid #1C1C1C; display:flex; align-items:flex-start; }66 .ep-left { flex:1; }67 .ep-date { color:#A8A8A8; font-size:32px; margin-bottom:8px; }68 .ep-title { font-size:44px; font-weight:700; margin:4px 0 10px 0; }69 .ep-meta { color:#AFAFAF; font-size:30px; margin-bottom:12px; }70 .progress { height:4px; background:#2A2A2A; width:560px; border-radius:2px; }71 .ep-right { width:180px; display:flex; gap:24px; justify-content:flex-end; padding-top:20px; }72 73 .icon-btn {74 width:88px; height:88px; border-radius:44px;75 background:#1B1B1B; border:1px solid #2A2A2A;76 display:flex; align-items:center; justify-content:center;77 }78 .icon-btn svg { width:46px; height:46px; fill:#EDEDED; }79 80 /* Mini player */81 .mini-player {82 position:absolute; left:0; bottom:160px;83 width:100%; height:160px;84 background:#152036; /* subtle dark-blue tint like screenshot */85 border-top-left-radius:22px; border-top-right-radius:22px;86 display:flex; align-items:center; padding:18px 26px; gap:24px;87 }88 .mini-art {89 width:104px; height:104px; background:#E0E0E0; border:1px solid #BDBDBD;90 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;91 border-radius:12px;92 }93 .mini-meta { flex:1; }94 .mini-title { font-size:38px; font-weight:800; }95 .mini-sub { font-size:30px; color:#D1D1D1; margin-top:6px; }96 .mini-actions { display:flex; align-items:center; gap:26px; }97 .mini-actions .icon-btn { width:70px; height:70px; border-radius:35px; }98 .bottom-shadow {99 position:absolute; left:0; bottom:0; width:100%; height:160px;100 background:#0E0E0E;101 display:flex; align-items:center; justify-content:center;102 }103 .bottom-shadow svg { width:56px; height:56px; fill:#FFFFFF; opacity:0.85; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="statusbar">111 <div>9:28</div>112 <div class="status-icons">113 <!-- Silent bell -->114 <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2H10c0 1.1.9 2 2 2zm8-6v-5c0-3.53-2.61-6.43-6-6.92V3a2 2 0 10-4 0v1.08A7 7 0 004 11v5l-2 2v1h20v-1l-2-2z" opacity="0.7"/></svg>115 <!-- Wifi -->116 <svg viewBox="0 0 24 24"><path d="M12 18c.83 0 1.5.67 1.5 1.5S12.83 21 12 21s-1.5-.67-1.5-1.5S11.17 18 12 18zm7-7.5l-1.41 1.41A9.97 9.97 0 0012 9c-2.68 0-5.11 1.05-6.99 2.91L3.6 10.5C5.83 8.38 8.76 7 12 7s6.17 1.38 8.4 3.5zM12 11c-2.01 0-3.86.78-5.26 2.06L5.33 12.65A8.49 8.49 0 0112 10c2.25 0 4.31.85 5.9 2.25l-1.41 1.41A6.49 6.49 0 0012 11z"/></svg>117 <!-- Battery -->118 <svg viewBox="0 0 24 24"><path d="M16 8h1V6h-1V4h-8v2H7v2h1v8H7v2h1v2h8v-2h1v-2h-1V8z" transform="rotate(90 12 12)" /></svg>119 </div>120 </div>121 122 <!-- Header -->123 <div class="header">124 <div class="back-row">125 <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>126 <div class="title">Office Ladies</div>127 </div>128 129 <div class="hero">130 <div class="cover">[IMG: Podcast Cover]</div>131 <div class="podcast-name">Office Ladies</div>132 </div>133 134 <div class="description">135 The Office co-stars and best friends, Jenna Fischer and Angela Kinsey, are doing the ultimate The Office re-watch podcast for you. Each week Jenna and Angela will ...136 </div>137 138 <div class="actions">139 <!-- Heart outline -->140 <div class="icon-btn" title="Favorite">141 <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 016.5 4c1.74 0 3.41.81 4.5 2.09A6.09 6.09 0 0115.5 4 4.5 4.5 0 0120 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="none" stroke="#EDEDED" stroke-width="2"/></svg>142 </div>143 144 <div class="action-pill">145 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm.9 15H11V7h1.9v10z"/></svg>146 <span>Visit website</span>147 </div>148 </div>149 </div>150 151 <!-- Episodes header -->152 <div class="section-title">Episodes</div>153 <div class="sort-row">154 <div class="sort-btn">DATE</div>155 <svg viewBox="0 0 24 24"><path d="M7 10l5-5 5 5H7zm10 4l-5 5-5-5h10z"/></svg>156 </div>157 158 <!-- Episodes list -->159 <div class="episodes">160 <!-- Episode 1 -->161 <div class="episode">162 <div class="ep-left">163 <div class="ep-date">27.12.2023 10:35</div>164 <div class="ep-title">A Look Back on Christening</div>165 <div class="ep-meta">1:03:05</div>166 <div class="progress"></div>167 </div>168 <div class="ep-right">169 <div class="icon-btn" title="Download">170 <svg viewBox="0 0 24 24"><path d="M12 3v10l3.5-3.5 1.4 1.4L12 16.7 7.1 10.9l1.4-1.4L12 13V3h0zM5 19h14v2H5v-2z"/></svg>171 </div>172 <div class="icon-btn" title="More">173 <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>174 </div>175 </div>176 </div>177 178 <!-- Episode 2 -->179 <div class="episode">180 <div class="ep-left">181 <div class="ep-date">20.12.2023 10:35</div>182 <div class="ep-title">A Look Back on Secret Santa</div>183 <div class="ep-meta">1:19:01</div>184 <div class="progress" style="width:620px;"></div>185 </div>186 <div class="ep-right">187 <div class="icon-btn" title="Download">188 <svg viewBox="0 0 24 24"><path d="M12 3v10l3.5-3.5 1.4 1.4L12 16.7 7.1 10.9l1.4-1.4L12 13V3h0zM5 19h14v2H5v-2z"/></svg>189 </div>190 <div class="icon-btn" title="More">191 <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>192 </div>193 </div>194 </div>195 196 <!-- Episode 3 -->197 <div class="episode">198 <div class="ep-left">199 <div class="ep-date">13.12.2023 10:35</div>200 <div class="ep-title">Free Family Portrait Studio</div>201 <div class="ep-meta">1:17:10</div>202 <div class="progress" style="width:620px;"></div>203 </div>204 <div class="ep-right">205 <div class="icon-btn" title="Download">206 <svg viewBox="0 0 24 24"><path d="M12 3v10l3.5-3.5 1.4 1.4L12 16.7 7.1 10.9l1.4-1.4L12 13V3h0zM5 19h14v2H5v-2z"/></svg>207 </div>208 <div class="icon-btn" title="More">209 <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>210 </div>211 </div>212 </div>213 214 <!-- Episode 4 -->215 <div class="episode" style="border-bottom:none;">216 <div class="ep-left">217 <div class="ep-date">11.12.2023 10:35</div>218 <div class="ep-title">Office Ladies Live: Fan Mailbag</div>219 <div class="ep-meta">1:07:13</div>220 <div class="progress" style="width:610px;"></div>221 </div>222 <div class="ep-right">223 <div class="icon-btn" title="Download">224 <svg viewBox="0 0 24 24"><path d="M12 3v10l3.5-3.5 1.4 1.4L12 16.7 7.1 10.9l1.4-1.4L12 13V3h0zM5 19h14v2H5v-2z"/></svg>225 </div>226 <div class="icon-btn" title="More">227 <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>228 </div>229 </div>230 </div>231 </div>232 233 <!-- Mini Player -->234 <div class="mini-player">235 <div class="mini-art">[IMG]</div>236 <div class="mini-meta">237 <div class="mini-title">Office Ladies</div>238 <div class="mini-sub">A Look Back on Christening</div>239 </div>240 <div class="mini-actions">241 <div class="icon-btn" title="Favorite">242 <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 016.5 4c1.74 0 3.41.81 4.5 2.09A6.09 6.09 0 0115.5 4 4.5 4.5 0 0120 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="none" stroke="#FFFFFF" stroke-width="2"/></svg>243 </div>244 <div class="icon-btn" title="More">245 <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>246 </div>247 </div>248 </div>249 250 <!-- Bottom area with a centered control (play) -->251 <div class="bottom-shadow">252 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>253 </div>254</div>255</body>256</html>