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>Library - New Playlist</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 96px;20    color: #eaeaea;21    font-weight: 500;22    display: flex; align-items: center; justify-content: space-between;23    padding: 0 36px;24    opacity: 0.9;25    font-size: 40px;26  }27  .status-right { display: flex; align-items: center; gap: 24px; }28  .status-icon { width: 40px; height: 40px; opacity: 0.9; }29 30  /* App header */31  .app-header {32    position: absolute; top: 140px; left: 36px; right: 36px;33    height: 120px; display: flex; align-items: center; justify-content: space-between;34  }35  .title {36    font-size: 78px; font-weight: 800; letter-spacing: -0.5px;37    display: flex; align-items: center; gap: 14px;38  }39  .chevron {40    width: 32px; height: 32px; opacity: 0.8;41  }42  .header-actions { display: flex; align-items: center; gap: 48px; }43  .circle-btn {44    width: 72px; height: 72px; border-radius: 36px;45    background: #1f1f1f; display: flex; align-items: center; justify-content: center;46  }47  .header-icon { width: 56px; height: 56px; opacity: 0.9; }48  .avatar {49    width: 72px; height: 72px; border-radius: 36px;50    background: #2e6b5f; color: #dfece8; display: flex; align-items: center; justify-content: center;51    font-weight: 700; font-size: 36px;52  }53 54  /* Filters / chips */55  .chips { position: absolute; top: 360px; left: 36px; display: flex; align-items: center; gap: 24px; }56  .chip-x {57    width: 150px; height: 110px; border-radius: 24px;58    background: #2a2a2a; color: #dcdcdc;59    display: flex; align-items: center; justify-content: center;60    font-size: 50px; font-weight: 600; box-shadow: inset 0 0 0 1px #3a3a3a;61  }62  .chip {63    padding: 28px 40px; border-radius: 28px; background: #3a3a3a; color: #fff;64    font-size: 44px; font-weight: 600; box-shadow: inset 0 0 0 1px #4a4a4a;65  }66 67  /* Modal card */68  .modal {69    position: absolute; left: 48px; right: 48px; top: 880px;70    background: #1c1c1c; border-radius: 28px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);71    padding: 56px 56px 40px;72  }73  .modal h2 {74    margin: 0 0 48px; font-size: 64px; font-weight: 800;75  }76  .field { margin-bottom: 48px; }77  .label {78    font-size: 40px; color: #bdbdbd; margin-bottom: 22px;79  }80  .underline {81    height: 2px; background: #575757;82  }83  .underline.active { background: #2574d9; height: 4px; }84 85  .privacy-row {86    display: flex; align-items: center; justify-content: space-between;87    margin-top: 18px;88  }89  .privacy-left { display: flex; align-items: center; gap: 26px; }90  .privacy-text { font-size: 42px; color: #fff; }91  .chevron-down { width: 42px; height: 42px; opacity: 0.8; }92 93  .modal-actions {94    margin-top: 48px; display: flex; justify-content: flex-end; gap: 24px;95  }96  .btn {97    height: 110px; padding: 0 40px; border-radius: 55px;98    font-size: 42px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;99  }100  .btn-outline {101    background: #1c1c1c; color: #fff; box-shadow: inset 0 0 0 2px #5c5c5c;102  }103  .btn-disabled {104    background: #6b6b6b; color: #e6e6e6; opacity: 0.8;105  }106 107  /* Mini player bar */108  .mini-player {109    position: absolute; left: 0; right: 0; bottom: 240px;110    height: 180px; background: #141414; border-top: 1px solid #2a2a2a;111    display: flex; align-items: center; padding: 0 36px; gap: 32px;112  }113  .album-thumb {114    width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;115    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center;116  }117  .track-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }118  .track-title { font-size: 44px; color: #fff; }119  .track-artist { font-size: 36px; color: #bdbdbd; }120  .mini-actions { display: flex; align-items: center; gap: 28px; }121 122  /* Bottom nav */123  .bottom-nav {124    position: absolute; left: 0; right: 0; bottom: 0;125    height: 240px; background: #111; border-top: 1px solid #2a2a2a;126    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;127  }128  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #bdbdbd; }129  .nav-item.active { color: #fff; }130  .nav-icon { width: 70px; height: 70px; opacity: 0.95; }131  .nav-label { font-size: 34px; font-weight: 600; }132 133  /* Gesture bar */134  .gesture-bar {135    position: absolute; bottom: 260px; left: 50%; transform: translateX(-50%);136    width: 300px; height: 12px; background: #eaeaea; border-radius: 6px; opacity: 0.85;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div>1:27</div>146    <div class="status-right">147      <!-- Simple icons for status -->148      <svg class="status-icon" viewBox="0 0 24 24">149        <path fill="#fff" d="M3 11h18v10H3z"></path>150        <path fill="#000" d="M5 13h14v6H5z"></path>151      </svg>152      <svg class="status-icon" viewBox="0 0 24 24">153        <path fill="none" stroke="#fff" stroke-width="2" d="M3 16c4-4 14-4 18 0"></path>154        <path fill="none" stroke="#fff" stroke-width="2" d="M6 13c3-3 9-3 12 0"></path>155        <path fill="none" stroke="#fff" stroke-width="2" d="M9 10c2-2 4-2 6 0"></path>156      </svg>157      <svg class="status-icon" viewBox="0 0 24 24">158        <rect x="3" y="4" width="18" height="16" rx="3" fill="none" stroke="#fff" stroke-width="2"></rect>159        <rect x="6" y="7" width="12" height="10" fill="#fff"></rect>160      </svg>161    </div>162  </div>163 164  <!-- Header -->165  <div class="app-header">166    <div class="title">167      <span>Library</span>168      <svg class="chevron" viewBox="0 0 24 24">169        <path fill="#fff" d="M7 9l5 5 5-5H7z"></path>170      </svg>171    </div>172    <div class="header-actions">173      <div class="circle-btn">174        <!-- History icon -->175        <svg class="header-icon" viewBox="0 0 24 24">176          <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>177          <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>178        </svg>179      </div>180      <div class="circle-btn">181        <!-- Search icon -->182        <svg class="header-icon" viewBox="0 0 24 24">183          <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>184          <path d="M20 20l-4.5-4.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>185        </svg>186      </div>187      <div class="avatar">C</div>188    </div>189  </div>190 191  <!-- Chips -->192  <div class="chips">193    <div class="chip-x">✕</div>194    <div class="chip">Playlists</div>195  </div>196 197  <!-- Modal: New playlist -->198  <div class="modal">199    <h2>New playlist</h2>200 201    <div class="field">202      <div class="label">Title</div>203      <div class="underline active"></div>204    </div>205 206    <div class="field">207      <div class="label">Description</div>208      <div class="underline"></div>209    </div>210 211    <div class="field">212      <div class="label">Privacy</div>213      <div class="privacy-row">214        <div class="privacy-left">215          <!-- Globe icon -->216          <svg class="header-icon" viewBox="0 0 24 24">217            <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>218            <path d="M3 12h18M12 3c4 4 4 14 0 18M12 3c-4 4-4 14 0 18" stroke="#fff" stroke-width="2" fill="none"></path>219          </svg>220          <div class="privacy-text">Public</div>221        </div>222        <svg class="chevron-down" viewBox="0 0 24 24">223          <path fill="#fff" d="M7 9l5 5 5-5H7z"></path>224        </svg>225      </div>226    </div>227 228    <div class="modal-actions">229      <div class="btn btn-outline">Cancel</div>230      <div class="btn btn-disabled">Create</div>231    </div>232  </div>233 234  <!-- Mini Player -->235  <div class="mini-player">236    <div class="album-thumb">[IMG: Album Art]</div>237    <div class="track-info">238      <div class="track-title">Tere Vaaste - Unplugged</div>239      <div class="track-artist">Varun Jain</div>240    </div>241    <div class="mini-actions">242      <!-- Cast -->243      <svg class="header-icon" viewBox="0 0 24 24">244        <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>245        <path d="M4 18c2 0 4 2 4 4" stroke="#fff" stroke-width="2" fill="none"></path>246        <path d="M4 15c3 0 6 3 6 6" stroke="#fff" stroke-width="2" fill="none"></path>247      </svg>248      <!-- Play -->249      <svg class="header-icon" viewBox="0 0 24 24">250        <path d="M7 5l12 7-12 7V5z" fill="#fff"></path>251      </svg>252    </div>253  </div>254 255  <!-- Bottom Navigation -->256  <div class="bottom-nav">257    <div class="nav-item">258      <svg class="nav-icon" viewBox="0 0 24 24">259        <path d="M3 11l9-7 9 7v9H3v-9z" fill="none" stroke="#bdbdbd" stroke-width="2"></path>260        <path d="M9 20v-6h6v6" fill="none" stroke="#bdbdbd" stroke-width="2"></path>261      </svg>262      <div class="nav-label">Home</div>263    </div>264    <div class="nav-item">265      <svg class="nav-icon" viewBox="0 0 24 24">266        <circle cx="12" cy="12" r="8" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>267        <path d="M12 8l2 4-4 2 2-6z" fill="#bdbdbd"></path>268      </svg>269      <div class="nav-label">Explore</div>270    </div>271    <div class="nav-item active">272      <svg class="nav-icon" viewBox="0 0 24 24">273        <rect x="6" y="5" width="12" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>274        <path d="M10 9v6M14 7v8" stroke="#fff" stroke-width="2"></path>275      </svg>276      <div class="nav-label">Library</div>277    </div>278    <div class="nav-item">279      <svg class="nav-icon" viewBox="0 0 24 24">280        <path d="M12 2l2.5 6H21l-5 4 2 6-6-3.5L6 18l2-6-5-4h6.5L12 2z" fill="none" stroke="#bdbdbd" stroke-width="2"></path>281      </svg>282      <div class="nav-label">Upgrade</div>283    </div>284  </div>285 286  <!-- Gesture bar -->287  <div class="gesture-bar"></div>288</div>289</body>290</html>