GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Office Ladies 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:#0b0b0d; color:#f3f3f3;11  }12 13  /* Status bar */14  .status-bar {15    height:90px; padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    color:#eaeaea; font-weight:600; font-size:36px;18  }19  .status-icons { display:flex; gap:28px; align-items:center; }20  .icon { width:38px; height:38px; fill:none; stroke:#eaeaea; stroke-width:2.2px; }21 22  /* Header */23  .header {24    display:flex; align-items:center;25    padding:8px 24px 12px 24px;26  }27  .back-btn {28    width:72px; height:72px; display:flex; align-items:center; justify-content:center;29  }30  .back-btn svg { width:42px; height:42px; stroke:#f3f3f3; stroke-width:3.5px; fill:none; }31  .page-title { font-size:60px; font-weight:700; margin-left:16px; }32 33  /* Top block */34  .top-block { padding:20px 32px; display:flex; gap:28px; }35  .cover {36    width:236px; height:236px; background:#E0E0E0; border:1px solid #BDBDBD;37    display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;38  }39  .top-info { flex:1; }40  .podcast-title { font-size:64px; font-weight:800; margin-bottom:16px; }41  .desc { color:#b7b7b7; font-size:34px; line-height:1.36; max-width:940px; }42  .actions { margin-top:26px; display:flex; gap:38px; align-items:center; }43  .heart-btn, .visit-btn {44    display:flex; align-items:center; gap:18px; color:#f3f3f3;45    font-size:36px; font-weight:600;46  }47  .heart-btn svg, .visit-btn svg { width:42px; height:42px; stroke:#f3f3f3; stroke-width:2.6px; fill:none; }48 49  /* Episodes header */50  .episodes-header {51    margin-top:16px; padding:18px 32px 8px 32px;52    display:flex; align-items:center; justify-content:space-between;53  }54  .episodes-title { font-size:54px; font-weight:800; }55  .date-filter {56    display:flex; align-items:center; gap:16px;57    background:#1b1b20; padding:16px 22px; border-radius:12px; font-size:36px; font-weight:700;58    color:#f3f3f3;59  }60  .date-filter svg { width:36px; height:36px; stroke:#f3f3f3; stroke-width:2.4px; fill:none; }61 62  /* Episode list */63  .episode-list { padding:10px 32px 260px 32px; }64  .episode {65    padding:28px 0; border-bottom:1px solid #1e1e22;66    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;67  }68  .ep-left { max-width:760px; }69  .ep-date { color:#9aa0a6; font-size:32px; margin-bottom:10px; }70  .ep-title { font-size:46px; font-weight:700; margin-bottom:12px; }71  .ep-meta { display:flex; align-items:center; gap:18px; }72  .duration { color:#9aa0a6; font-size:32px; }73  .progress {74    width:420px; height:6px; background:#2a2a31; border-radius:3px; position:relative;75  }76  .progress span { display:block; height:6px; background:#6b6bff; width:45%; border-radius:3px; }77  .ep-right { display:flex; align-items:center; gap:24px; }78  .circle-btn {79    width:96px; height:96px; border-radius:50%;80    background:#1c1c22; display:flex; align-items:center; justify-content:center;81  }82  .circle-btn svg { width:46px; height:46px; stroke:#f3f3f3; stroke-width:2.6px; fill:none; }83 84  /* Mini player */85  .mini-player {86    position:absolute; left:0; right:0; bottom:0;87    height:176px; padding:22px 32px;88    background:linear-gradient(90deg,#1c1b2a,#151425);89    display:flex; align-items:center; justify-content:space-between;90    box-shadow:0 -10px 24px rgba(0,0,0,0.35);91  }92  .mp-left { display:flex; align-items:center; gap:22px; }93  .mp-cover {94    width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD;95    display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700; font-size:24px;96    border-radius:12px;97  }98  .mp-title { font-size:40px; font-weight:700; }99  .mp-controls { display:flex; align-items:center; gap:38px; }100  .mp-circle {101    width:116px; height:116px; border-radius:50%; background:#24243a;102    display:flex; align-items:center; justify-content:center;103  }104  .mp-circle svg { width:56px; height:56px; stroke:#f3f3f3; stroke-width:2.6px; fill:none; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div>9:22</div>113    <div class="status-icons">114      <!-- speaker with slash -->115      <svg class="icon" viewBox="0 0 24 24">116        <path d="M4 10h4l5-4v12l-5-4H4z"/>117        <path d="M18 6l-10 12"/>118      </svg>119      <!-- wifi -->120      <svg class="icon" viewBox="0 0 24 24">121        <path d="M2 8c5-4 15-4 20 0"/>122        <path d="M5 11c3-3 11-3 14 0"/>123        <path d="M8 14c2-2 6-2 8 0"/>124        <circle cx="12" cy="18" r="1.6" fill="#eaeaea" stroke="none"/>125      </svg>126      <!-- battery with bolt -->127      <svg class="icon" viewBox="0 0 28 24">128        <rect x="2" y="6" width="20" height="12" rx="2" />129        <rect x="22" y="9" width="4" height="6" rx="1" />130        <path d="M12 8l-3 4h4l-2 4" />131      </svg>132    </div>133  </div>134 135  <!-- Header -->136  <div class="header">137    <div class="back-btn">138      <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>139    </div>140    <div class="page-title">Office Ladies</div>141  </div>142 143  <!-- Top Block -->144  <div class="top-block">145    <div class="cover">[IMG: Podcast Cover]</div>146    <div class="top-info">147      <div class="podcast-title">Office Ladies</div>148      <div class="desc">149        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...150      </div>151      <div class="actions">152        <div class="heart-btn">153          <svg viewBox="0 0 24 24">154            <path d="M12 20s-7-4.6-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.4-7 10-7 10z"/>155          </svg>156        </div>157        <div class="visit-btn">158          <svg viewBox="0 0 24 24">159            <circle cx="12" cy="12" r="9"/>160            <path d="M3 12h18M12 3a16 16 0 0 1 0 18M12 3a16 16 0 0 0 0 18"/>161          </svg>162          <span>Visit website</span>163        </div>164      </div>165    </div>166  </div>167 168  <!-- Episodes Header -->169  <div class="episodes-header">170    <div class="episodes-title">Episodes</div>171    <div class="date-filter">172      <span>DATE</span>173      <svg viewBox="0 0 24 24">174        <path d="M12 5l-4 4h8l-4-4z"/>175        <path d="M12 19l4-4H8l4 4z"/>176      </svg>177    </div>178  </div>179 180  <!-- Episode List -->181  <div class="episode-list">182 183    <!-- Episode 1 -->184    <div class="episode">185      <div class="ep-left">186        <div class="ep-date">27.12.2023 10:35</div>187        <div class="ep-title">A Look Back on Christening</div>188        <div class="ep-meta">189          <div class="duration">1:03:05</div>190          <div class="progress"><span></span></div>191        </div>192      </div>193      <div class="ep-right">194        <div class="circle-btn">195          <svg viewBox="0 0 24 24">196            <path d="M12 4v10"/>197            <path d="M8 10l4 4 4-4"/>198            <path d="M4 20h16"/>199          </svg>200        </div>201        <div class="circle-btn">202          <svg viewBox="0 0 24 24">203            <circle cx="12" cy="5" r="2.2" fill="#f3f3f3" stroke="none"/>204            <circle cx="12" cy="12" r="2.2" fill="#f3f3f3" stroke="none"/>205            <circle cx="12" cy="19" r="2.2" fill="#f3f3f3" stroke="none"/>206          </svg>207        </div>208      </div>209    </div>210 211    <!-- Episode 2 -->212    <div class="episode">213      <div class="ep-left">214        <div class="ep-date">20.12.2023 10:35</div>215        <div class="ep-title">A Look Back on Secret Santa</div>216        <div class="ep-meta">217          <div class="duration">1:19:01</div>218          <div class="progress"><span style="width:25%;"></span></div>219        </div>220      </div>221      <div class="ep-right">222        <div class="circle-btn">223          <svg viewBox="0 0 24 24">224            <path d="M12 4v10"/>225            <path d="M8 10l4 4 4-4"/>226            <path d="M4 20h16"/>227          </svg>228        </div>229        <div class="circle-btn">230          <svg viewBox="0 0 24 24">231            <circle cx="12" cy="5" r="2.2" fill="#f3f3f3" stroke="none"/>232            <circle cx="12" cy="12" r="2.2" fill="#f3f3f3" stroke="none"/>233            <circle cx="12" cy="19" r="2.2" fill="#f3f3f3" stroke="none"/>234          </svg>235        </div>236      </div>237    </div>238 239    <!-- Episode 3 -->240    <div class="episode">241      <div class="ep-left">242        <div class="ep-date">13.12.2023 10:35</div>243        <div class="ep-title">Free Family Portrait Studio</div>244        <div class="ep-meta">245          <div class="duration">1:17:10</div>246          <div class="progress"><span style="width:55%;"></span></div>247        </div>248      </div>249      <div class="ep-right">250        <div class="circle-btn">251          <svg viewBox="0 0 24 24">252            <path d="M12 4v10"/>253            <path d="M8 10l4 4 4-4"/>254            <path d="M4 20h16"/>255          </svg>256        </div>257        <div class="circle-btn">258          <svg viewBox="0 0 24 24">259            <circle cx="12" cy="5" r="2.2" fill="#f3f3f3" stroke="none"/>260            <circle cx="12" cy="12" r="2.2" fill="#f3f3f3" stroke="none"/>261            <circle cx="12" cy="19" r="2.2" fill="#f3f3f3" stroke="none"/>262          </svg>263        </div>264      </div>265    </div>266 267    <!-- Episode 4 -->268    <div class="episode">269      <div class="ep-left">270        <div class="ep-date">11.12.2023 10:35</div>271        <div class="ep-title">Office Ladies Live: Fan Mailbag</div>272        <div class="ep-meta">273          <div class="duration">1:07:13</div>274          <div class="progress"><span style="width:35%;"></span></div>275        </div>276      </div>277      <div class="ep-right">278        <div class="circle-btn">279          <svg viewBox="0 0 24 24">280            <path d="M12 4v10"/>281            <path d="M8 10l4 4 4-4"/>282            <path d="M4 20h16"/>283          </svg>284        </div>285        <div class="circle-btn">286          <svg viewBox="0 0 24 24">287            <circle cx="12" cy="5" r="2.2" fill="#f3f3f3" stroke="none"/>288            <circle cx="12" cy="12" r="2.2" fill="#f3f3f3" stroke="none"/>289            <circle cx="12" cy="19" r="2.2" fill="#f3f3f3" stroke="none"/>290          </svg>291        </div>292      </div>293    </div>294 295  </div>296 297  <!-- Mini Player -->298  <div class="mini-player">299    <div class="mp-left">300      <div class="mp-cover">[IMG: Logo]</div>301      <div class="mp-title">Latina Stereo</div>302    </div>303    <div class="mp-controls">304      <div class="mp-circle">305        <svg viewBox="0 0 24 24">306          <path d="M12 20s-7-4.6-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.4-7 10-7 10z"/>307        </svg>308      </div>309      <div class="mp-circle" style="background:#2a2a45;">310        <svg viewBox="0 0 24 24">311          <path d="M8 5l12 7-12 7z" fill="#f3f3f3" stroke="none"/>312        </svg>313      </div>314      <div class="mp-circle">315        <svg viewBox="0 0 24 24">316          <path d="M6 18V7l6-2v11"/>317          <circle cx="10" cy="18" r="2" fill="#f3f3f3" stroke="none"/>318          <path d="M14 20v-8l4-1v9"/>319          <circle cx="17" cy="20" r="2" fill="#f3f3f3" stroke="none"/>320        </svg>321      </div>322    </div>323  </div>324 325</div>326</body>327</html>