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>My Library - Dark UI</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: #111516;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  .screen {20    padding: 80px 56px 240px 56px;21  }22 23  .top-actions {24    position: absolute;25    top: 80px;26    right: 56px;27    color: #2FB1A6;28    font-size: 40px;29    letter-spacing: 0.2px;30  }31 32  .title {33    font-size: 96px;34    font-weight: 800;35    margin: 60px 0 36px 0;36  }37 38  .divider {39    height: 1px;40    background: #2A2E2F;41    margin: 24px 0;42  }43 44  /* Library list */45  .list {46    margin-top: 8px;47    border-top: 1px solid #2A2E2F;48  }49  .row {50    display: flex;51    align-items: center;52    justify-content: space-between;53    height: 140px;54    border-bottom: 1px solid #2A2E2F;55  }56  .row-left {57    display: flex;58    align-items: center;59    gap: 32px;60  }61  .row .label {62    font-size: 44px;63    font-weight: 600;64    color: #F5F5F5;65  }66  .row .meta {67    margin-right: 24px;68    font-size: 38px;69    color: #889296;70  }71  .meta.plus { color: #E2B236; font-weight: 700; }72  .day { color: #8D979A; }73  .chev {74    width: 32px;75    height: 32px;76    opacity: 0.8;77  }78  .icon {79    width: 60px;80    height: 60px;81    color: #D7D7D7;82    opacity: 0.92;83  }84 85  /* Recently Played */86  .section-title {87    font-size: 64px;88    font-weight: 800;89    margin: 56px 0 24px;90  }91  .recent-item {92    display: flex;93    align-items: center;94    gap: 32px;95    padding: 24px 0 40px;96    border-bottom: 1px solid #2A2E2F;97  }98  .thumb {99    width: 260px;100    height: 260px;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    border-radius: 24px;104    color: #757575;105    display: flex;106    align-items: center;107    justify-content: center;108    text-align: center;109    font-size: 32px;110  }111  .recent-info {112    flex: 1;113    min-width: 0;114  }115  .meta-small {116    font-size: 36px;117    color: #9CA4A6;118    margin-bottom: 8px;119  }120  .recent-title {121    font-size: 54px;122    font-weight: 800;123    color: #FFFFFF;124    margin: 8px 0 10px;125  }126  .sub {127    font-size: 36px;128    color: #98A0A3;129  }130  .bookmark-btn {131    width: 56px;132    height: 56px;133    color: #DADADA;134  }135 136  /* Bottom Tab Bar */137  .tabbar {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 80px;142    height: 156px;143    background: rgba(20,24,25,0.96);144    border-top: 1px solid #2A2E2F;145    display: flex;146    align-items: center;147    justify-content: space-around;148    padding: 0 40px;149  }150  .tab {151    display: flex;152    flex-direction: column;153    align-items: center;154    gap: 10px;155    color: #D9DDDE;156    font-size: 32px;157  }158  .tab svg { width: 56px; height: 56px; }159  .tab.center { color: #E2B236; font-weight: 800; font-size: 46px; }160  .home-indicator {161    position: absolute;162    left: 50%;163    transform: translateX(-50%);164    bottom: 24px;165    width: 300px;166    height: 12px;167    background: #D9DDE0;168    opacity: 0.65;169    border-radius: 8px;170  }171</style>172</head>173<body>174<div id="render-target">175  <div class="screen">176    <div class="top-actions">Edit</div>177 178    <div class="title">My Library</div>179 180    <div class="list">181      <!-- Bookmarks -->182      <div class="row">183        <div class="row-left">184          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">185            <path d="M5 3h14a1 1 0 0 1 1 1v17l-8-5-8 5V4a1 1 0 0 1 1-1z"/>186          </svg>187          <div class="label">Bookmarks</div>188        </div>189        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>190      </div>191 192      <!-- Playlists -->193      <div class="row">194        <div class="row-left">195          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">196            <path d="M4 6h10M4 10h10M4 14h6"/>197            <path d="M16 5v8a3 3 0 1 0 2-2.8V7h3V5z"/>198          </svg>199          <div class="label">Playlists</div>200        </div>201        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>202      </div>203 204      <!-- Journal -->205      <div class="row">206        <div class="row-left">207          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">208            <rect x="5" y="4" width="14" height="16" rx="2"/>209            <path d="M9 8h6M9 12h6M9 16h6"/>210          </svg>211          <div class="label">Journal</div>212        </div>213        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>214      </div>215 216      <!-- Challenges -->217      <div class="row">218        <div class="row-left">219          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">220            <circle cx="12" cy="12" r="9"/>221            <path d="M12 6l1.8 3.6L18 10.2l-3 2.9.7 4.1L12 15.8 8.3 17.2l.7-4.1-3-2.9 4.2-.6L12 6z"/>222          </svg>223          <div class="label">Challenges</div>224        </div>225        <div class="meta day">Day 1</div>226        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>227      </div>228 229      <!-- Courses -->230      <div class="row">231        <div class="row-left">232          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">233            <path d="M3 7l9-4 9 4-9 4-9-4z"/>234            <path d="M3 7v7l9 4 9-4V7"/>235          </svg>236          <div class="label">Courses</div>237        </div>238        <div class="meta plus">Plus</div>239        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>240      </div>241 242      <!-- Downloads -->243      <div class="row">244        <div class="row-left">245          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">246            <path d="M12 3v10"/>247            <path d="M8 10l4 4 4-4"/>248            <path d="M5 19h14"/>249          </svg>250          <div class="label">Downloads</div>251        </div>252        <div class="meta plus">Plus</div>253        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>254      </div>255 256      <!-- Create a folder -->257      <div class="row">258        <div class="row-left">259          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">260            <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>261          </svg>262          <div class="label">Create a folder</div>263        </div>264        <div class="meta plus">Plus</div>265        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#A7ADB0" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>266      </div>267    </div>268 269    <div class="section-title">Recently Played</div>270 271    <!-- Recent item 1 -->272    <div class="recent-item">273      <div class="thumb">[IMG: Night sky over house]</div>274      <div class="recent-info">275        <div class="meta-small">69 min Music</div>276        <div class="recent-title">Deep Sleep</div>277        <div class="sub">4.8 ★ Chris Collins</div>278      </div>279      <svg class="bookmark-btn" viewBox="0 0 24 24" fill="none" stroke="#D7D7D7" stroke-width="2">280        <path d="M6 3h12a1 1 0 0 1 1 1v16l-7-4-7 4V4a1 1 0 0 1 1-1z"/>281      </svg>282    </div>283 284    <!-- Recent item 2 -->285    <div class="recent-item">286      <div class="thumb">[IMG: Ocean waves close-up]</div>287      <div class="recent-info">288        <div class="meta-small">90 min Music</div>289        <div class="recent-title">Relaxing Sounds Of Ocean Waves</div>290        <div class="sub">4.7 ★ Ocean Studio</div>291      </div>292      <svg class="bookmark-btn" viewBox="0 0 24 24" fill="none" stroke="#D7D7D7" stroke-width="2">293        <path d="M6 3h12a1 1 0 0 1 1 1v16l-7-4-7 4V4a1 1 0 0 1 1-1z"/>294      </svg>295    </div>296  </div>297 298  <!-- Bottom navigation bar -->299  <div class="tabbar">300    <div class="tab">301      <svg viewBox="0 0 24 24" fill="none" stroke="#E5E9EA" stroke-width="2">302        <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2v-9z"/>303      </svg>304    </div>305    <div class="tab">306      <svg viewBox="0 0 24 24" fill="none" stroke="#E5E9EA" stroke-width="2">307        <path d="M5 3h14a1 1 0 0 1 1 1v17l-8-5-8 5V4a1 1 0 0 1 1-1z"/>308      </svg>309    </div>310    <div class="tab center">Plus</div>311    <div class="tab">312      <svg viewBox="0 0 24 24" fill="none" stroke="#E5E9EA" stroke-width="2">313        <circle cx="11" cy="11" r="7"/>314        <path d="M21 21l-4.3-4.3"/>315      </svg>316    </div>317    <div class="tab">318      <svg viewBox="0 0 24 24" fill="none" stroke="#E5E9EA" stroke-width="2">319        <circle cx="12" cy="12" r="9"/>320        <path d="M2.5 12h19M12 2.5a14 14 0 0 1 0 19M12 2.5a14 14 0 0 0 0 19"/>321      </svg>322    </div>323  </div>324 325  <div class="home-indicator"></div>326</div>327</body>328</html>