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>UI Recreation</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(#0c0d10, #1f242a 35%, #262b31 100%);12    border-radius: 36px;13    box-shadow: 0 20px 60px rgba(0,0,0,0.45);14    color: #e8edf2;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 18px; left: 24px; right: 24px; height: 48px; color: #e9eaed; font-size: 34px; display: flex; align-items: center; justify-content: space-between; opacity: 0.9;20  }21  .status-icons { display: flex; align-items: center; gap: 22px; }22  .status-icons svg { width: 36px; height: 36px; stroke: #e9eaed; fill: none; }23 24  /* Top controls */25  .back-btn {26    position: absolute; top: 140px; left: 28px; width: 88px; height: 88px; border-radius: 44px;27    background: rgba(12,13,16,0.6); display: flex; align-items: center; justify-content: center;28  }29  .back-btn svg { width: 40px; height: 40px; stroke: #ffffff; fill: none; stroke-width: 5; }30 31  .menu-bubble {32    position: absolute; top: 280px; right: 36px; width: 110px; height: 110px; border-radius: 55px;33    background: #0f1216; box-shadow: 0 6px 18px rgba(0,0,0,0.45);34    display: flex; align-items: center; justify-content: center;35  }36  .menu-bubble .dots { display: flex; flex-direction: column; gap: 10px; }37  .menu-bubble .dot {38    width: 12px; height: 12px; border-radius: 50%; background: #e8edf2;39  }40 41  /* Album/playlist cover */42  .cover {43    position: absolute; top: 260px; left: 120px; width: 720px; height: 720px;44    background: #3a3e47; border: 1px solid #2f333a; border-radius: 30px;45    display: flex; align-items: center; justify-content: center; color: #c9cfd6; font-size: 34px;46  }47 48  /* Action bubbles (edit/play) */49  .action-bubbles { position: absolute; top: 600px; left: 870px; display: flex; flex-direction: column; gap: 36px; }50  .bubble {51    width: 120px; height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: center;52    box-shadow: 0 8px 20px rgba(0,0,0,0.35);53  }54  .bubble.edit { background: #ffffff; }55  .bubble.play { background: #57c9b6; }56  .bubble svg { width: 50px; height: 50px; stroke-width: 4; }57  .bubble.edit svg { stroke: #2a2f36; fill: none; }58  .bubble.play svg { stroke: none; fill: #ffffff; }59 60  /* Titles and description */61  .title {62    position: absolute; top: 1040px; left: 70px; font-size: 74px; font-weight: 700; letter-spacing: 0.2px;63  }64  .subtitle {65    position: absolute; top: 1142px; left: 70px; font-size: 36px; color: #b9c0c8;66  }67 68  /* Small actions row */69  .meta-row {70    position: absolute; top: 1240px; left: 70px; display: flex; align-items: center; gap: 28px;71  }72  .circle-btn {73    width: 88px; height: 88px; border-radius: 44px; border: 2px solid #3b4149; color: #e8edf2;74    display: flex; align-items: center; justify-content: center; opacity: 0.95;75  }76  .circle-btn svg { width: 40px; height: 40px; stroke: #e8edf2; fill: none; stroke-width: 4; }77  .meta-text { font-size: 32px; color: #c3c9d0; margin-left: 18px; }78 79  /* Track item */80  .track {81    position: absolute; top: 1420px; left: 70px; right: 70px; display: flex; align-items: center; justify-content: space-between;82  }83  .track .left { display: flex; flex-direction: column; }84  .track .title { position: static; font-size: 46px; font-weight: 600; color: #eef2f6; }85  .track .artist { font-size: 32px; color: #b8bec6; margin-top: 8px; }86  .track .right { display: flex; align-items: center; gap: 34px; }87  .track .icon { width: 46px; height: 46px; }88  .track .icon svg { width: 46px; height: 46px; stroke: #cfd5dc; fill: none; stroke-width: 4; }89  .vertical-dots { display: flex; flex-direction: column; gap: 8px; }90  .vertical-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: #cfd5dc; }91 92  /* Add buttons */93  .add-more {94    position: absolute; top: 1660px; left: 70px; width: 940px; height: 126px; border-radius: 22px;95    background: #2a3037; display: flex; align-items: center; justify-content: center; gap: 22px; color: #7ad0c1; font-size: 42px; font-weight: 600;96  }97  .add-more .plus, .add-videos .plus { width: 44px; height: 44px; border-radius: 22px; border: 3px solid currentColor; display: flex; align-items: center; justify-content: center; }98  .add-videos {99    position: absolute; top: 1860px; left: 70px; width: 940px; height: 140px; border-radius: 26px;100    background: #61d1bf; color: #ffffff; display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 46px; font-weight: 700;101    box-shadow: 0 10px 24px rgba(0,0,0,0.25);102  }103  .badge {104    font-size: 26px; padding: 6px 12px; border-radius: 16px; background: rgba(255,255,255,0.25); color: #ffffff; letter-spacing: 0.4px;105  }106 107  /* Ad banner placeholder */108  .ad-banner {109    position: absolute; top: 1940px; left: 0; width: 1080px; height: 150px;110    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;111    display: flex; align-items: center; justify-content: center; font-size: 32px;112  }113 114  /* Mini player */115  .mini-player {116    position: absolute; top: 2100px; left: 0; width: 1080px; height: 130px; background: #2a2f36; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;117  }118  .mini-cover {119    width: 96px; height: 96px; margin-right: 22px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;120    display: flex; align-items: center; justify-content: center; font-size: 20px;121  }122  .mini-info { flex: 1; }123  .mini-info .t { font-size: 36px; color: #eef2f6; }124  .mini-info .s { font-size: 28px; color: #b8bec6; margin-top: 6px; }125  .mini-play { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }126  .mini-play svg { width: 50px; height: 50px; fill: none; stroke: #e8edf2; stroke-width: 5; }127 128  /* Home indicator */129  .home-indicator {130    position: absolute; top: 2242px; left: 50%; transform: translateX(-50%);131    width: 260px; height: 10px; border-radius: 6px; background: #bfc5cc; opacity: 0.65;132  }133 134  /* Bottom navigation */135  .bottom-nav {136    position: absolute; bottom: 0; left: 0; width: 1080px; height: 140px; background: #242a30; display: flex; align-items: center; justify-content: space-around; padding-bottom: 6px;137  }138  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #c7cdd4; }139  .nav-item svg { width: 44px; height: 44px; stroke: #c7cdd4; fill: none; stroke-width: 4; }140  .nav-item span { font-size: 30px; }141  .active span { color: #e8edf2; position: relative; }142  .active span::after {143    content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);144    width: 60px; height: 6px; border-radius: 3px; background: #e8edf2;145  }146  .nav-item .round {147    width: 44px; height: 44px; border-radius: 22px; background: #5f7f8f; color: #e8edf2; font-weight: 700; font-size: 28px;148    display: flex; align-items: center; justify-content: center;149  }150  .pro-dot {151    position: absolute; top: 6px; right: -4px; width: 16px; height: 16px; border-radius: 8px; background: #ff4d4d;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div>12:28</div>161    <div class="status-icons">162      <!-- wifi -->163      <svg viewBox="0 0 24 24"><path d="M2 8s5-4 10-4 10 4 10 4"/><path d="M5 12s4-3 7-3 7 3 7 3"/><path d="M8 16s3-2 4-2 4 2 4 2"/><circle cx="12" cy="19" r="1.5" fill="#e9eaed"/></svg>164      <!-- battery -->165      <svg viewBox="0 0 28 24">166        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#e9eaed"></rect>167        <rect x="4" y="7" width="14" height="10" fill="#e9eaed" stroke="none"></rect>168        <rect x="23" y="9" width="3" height="6" rx="1" ry="1" stroke="#e9eaed"></rect>169      </svg>170    </div>171  </div>172 173  <!-- Back button -->174  <div class="back-btn">175    <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>176  </div>177 178  <!-- Vertical dots menu bubble -->179  <div class="menu-bubble">180    <div class="dots">181      <div class="dot"></div>182      <div class="dot"></div>183      <div class="dot"></div>184    </div>185  </div>186 187  <!-- Cover placeholder -->188  <div class="cover">[IMG: Playlist Cover]</div>189 190  <!-- Edit and Play bubbles -->191  <div class="action-bubbles">192    <div class="bubble edit">193      <svg viewBox="0 0 24 24"><path d="M3 17l2.5 2.5L17.5 8.5l-2.5-2.5L3 17z"/><path d="M19 5l0 0"/></svg>194    </div>195    <div class="bubble play">196      <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z"/></svg>197    </div>198  </div>199 200  <!-- Title and subtitle -->201  <div class="title">Chill List</div>202  <div class="subtitle">1 song with music from artists like Joe Pass.</div>203 204  <!-- Meta / small actions -->205  <div class="meta-row">206    <div class="circle-btn">207      <svg viewBox="0 0 24 24"><path d="M7 17l5 5 5-5"/><path d="M12 3v19"/></svg>208    </div>209    <div class="circle-btn">210      <svg viewBox="0 0 24 24"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg>211    </div>212    <div class="meta-text">3m 32s • 1 Songs</div>213  </div>214 215  <!-- Track item -->216  <div class="track">217    <div class="left">218      <div class="title">Night And Day (Album Version)</div>219      <div class="artist">Joe Pass - Virtuoso</div>220    </div>221    <div class="right">222      <div class="icon">223        <svg viewBox="0 0 24 24"><path d="M7 17l5 5 5-5"/><path d="M12 3v19"/></svg>224      </div>225      <div class="vertical-dots">226        <div class="dot"></div>227        <div class="dot"></div>228        <div class="dot"></div>229      </div>230    </div>231  </div>232 233  <!-- Add buttons -->234  <div class="add-more">235    <div class="plus">+</div>236    Add More237  </div>238 239  <div class="add-videos">240    <div class="plus">+</div>241    Add Videos <span class="badge">PRO</span>242  </div>243 244  <!-- Ad banner -->245  <div class="ad-banner">[IMG: Ad Banner - Facebook]</div>246 247  <!-- Mini player -->248  <div class="mini-player">249    <div class="mini-cover">[IMG: Album Art]</div>250    <div class="mini-info">251      <div class="t">L-O-V-E (2003 Digital Remaster)</div>252      <div class="s">Nat King Cole — L-O-V-E</div>253    </div>254    <div class="mini-play">255      <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z"/></svg>256    </div>257  </div>258 259  <!-- Home indicator -->260  <div class="home-indicator"></div>261 262  <!-- Bottom navigation -->263  <div class="bottom-nav">264    <div class="nav-item">265      <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8"/><path d="M5 12v8h14v-8"/></svg>266      <span>Home</span>267    </div>268    <div class="nav-item">269      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-3.5-3.5"/></svg>270      <span>Search</span>271    </div>272    <div class="nav-item">273      <svg viewBox="0 0 24 24"><path d="M13 3l-2 8 8-2-5 12"/></svg>274      <span>For You</span>275    </div>276    <div class="nav-item active" style="position: relative;">277      <div class="round">C</div>278      <span>My Library</span>279    </div>280    <div class="nav-item" style="position: relative;">281      <svg viewBox="0 0 24 24"><path d="M6 19c6-4 9-10 9-14"/><path d="M15 5c0 4 3 8 3 8"/></svg>282      <span>Pro</span>283      <div class="pro-dot"></div>284    </div>285  </div>286 287</div>288</body>289</html>