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>Save to list 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: #FFFFFF;15    font-family: Roboto, Arial, sans-serif;16    color: #202124;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #3c4043;31    font-size: 44px;32  }33  .status-left { display: flex; align-items: center; gap: 20px; }34  .status-right { display: flex; align-items: center; gap: 26px; }35  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #3c4043; stroke-width: 6; }36 37  /* Header */38  .header {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 160px;44    border-bottom: 1px solid #E0E0E0;45  }46  .header-title {47    text-align: center;48    font-size: 64px;49    font-weight: 500;50    line-height: 160px;51    color: #202124;52  }53  .header-action {54    position: absolute;55    right: 40px;56    top: 52px;57    font-size: 48px;58    color: #1a73e8;59    font-weight: 500;60  }61 62  /* New list pill */63  .new-list {64    position: absolute;65    top: 300px;66    left: 40px;67    width: 1000px;68    height: 140px;69    border: 2px solid #E0E0E0;70    border-radius: 80px;71    display: flex;72    align-items: center;73    justify-content: center;74    color: #1a73e8;75    font-size: 48px;76    font-weight: 500;77    box-sizing: border-box;78  }79  .new-list .plus {80    margin-right: 16px;81    width: 40px;82    height: 40px;83  }84  .new-list .plus svg { width: 40px; height: 40px; fill: none; stroke: #1a73e8; stroke-width: 10; }85 86  /* List area */87  .list {88    position: absolute;89    top: 480px;90    left: 0;91    width: 1080px;92  }93  .divider {94    width: 1080px;95    height: 1px;96    background: #E0E0E0;97  }98  .row {99    position: relative;100    width: 1080px;101    min-height: 170px;102    box-sizing: border-box;103    padding: 35px 40px 35px 140px;104  }105  .row .icon {106    position: absolute;107    left: 40px;108    top: 40px;109    width: 64px;110    height: 64px;111  }112  .row .title {113    font-size: 56px;114    font-weight: 500;115    color: #202124;116  }117  .row .subtitle {118    font-size: 38px;119    color: #5f6368;120    margin-top: 8px;121  }122  .row .checkbox {123    position: absolute;124    right: 40px;125    top: 60px;126    width: 64px;127    height: 64px;128    border: 3px solid #9AA0A6;129    border-radius: 8px;130    box-sizing: border-box;131  }132  .row .checkbox.checked {133    background: #1a73e8;134    border-color: #1a73e8;135  }136  .row .checkbox.checked svg {137    position: absolute;138    left: 10px;139    top: 10px;140    width: 44px;141    height: 44px;142  }143  .note {144    margin: 24px 40px 24px 140px;145    width: 900px;146    min-height: 160px;147    border: 2px solid #CFCFCF;148    border-radius: 20px;149    padding: 32px;150    color: #5f6368;151    font-size: 42px;152    line-height: 1.35;153    box-sizing: border-box;154  }155 156  /* Bottom home bar */157  .home-bar {158    position: absolute;159    bottom: 40px;160    left: 390px;161    width: 300px;162    height: 12px;163    background: #8A8A8A;164    border-radius: 8px;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div class="status-left">174      <div>11:26</div>175      <div class="status-icon">176        <svg viewBox="0 0 24 24">177          <circle cx="12" cy="12" r="9"></circle>178          <line x1="12" y1="12" x2="12" y2="6"></line>179          <line x1="12" y1="12" x2="16" y2="14"></line>180        </svg>181      </div>182    </div>183    <div class="status-right">184      <div class="status-icon">185        <!-- WiFi -->186        <svg viewBox="0 0 24 24">187          <path d="M2 9c5-4 15-4 20 0"></path>188          <path d="M5 12c4-3 10-3 14 0"></path>189          <path d="M8 15c3-2 5-2 8 0"></path>190          <circle cx="12" cy="18" r="1.5" fill="#3c4043" stroke="none"></circle>191        </svg>192      </div>193      <div class="status-icon">194        <!-- Battery -->195        <svg viewBox="0 0 26 24">196          <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>197          <rect x="21" y="10" width="3" height="4"></rect>198          <rect x="4" y="8" width="10" height="8" fill="#3c4043" stroke="none"></rect>199        </svg>200      </div>201    </div>202  </div>203 204  <!-- Header -->205  <div class="header">206    <div class="header-title">Save to list</div>207    <div class="header-action">Done</div>208  </div>209 210  <!-- New list pill -->211  <div class="new-list">212    <div class="plus">213      <svg viewBox="0 0 24 24">214        <line x1="12" y1="4" x2="12" y2="20"></line>215        <line x1="4" y1="12" x2="20" y2="12"></line>216      </svg>217    </div>218    + New list219  </div>220 221  <!-- Lists -->222  <div class="list">223 224    <!-- Travel plans -->225    <div class="divider"></div>226    <div class="row">227      <div class="icon">228        <!-- Suitcase (blue) -->229        <svg viewBox="0 0 24 24">230          <rect x="5" y="7" width="14" height="11" rx="2" ry="2" fill="none" stroke="#1a73e8" stroke-width="2.5"></rect>231          <rect x="9" y="4" width="6" height="3" rx="1" ry="1" fill="none" stroke="#1a73e8" stroke-width="2.5"></rect>232        </svg>233      </div>234      <div class="title">Travel plans</div>235      <div class="subtitle">Shared · 1 place</div>236      <div class="checkbox"></div>237    </div>238 239    <!-- Want to go -->240    <div class="divider"></div>241    <div class="row">242      <div class="icon">243        <!-- Flag (green) -->244        <svg viewBox="0 0 24 24">245          <path d="M5 3v18" stroke="#34a853" stroke-width="2.5" fill="none"></path>246          <path d="M5 4h10l-2 4h-8z" fill="#34a853" stroke="#34a853" stroke-width="1"></path>247        </svg>248      </div>249      <div class="title">Want to go</div>250      <div class="subtitle">Private · 2 places</div>251      <div class="checkbox"></div>252    </div>253 254    <!-- Favourites -->255    <div class="divider"></div>256    <div class="row">257      <div class="icon">258        <!-- Heart outline (pink) -->259        <svg viewBox="0 0 24 24">260          <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 6.8 6c2 0 3.2 1.2 5.2 3.1C14 7.2 15.2 6 17.2 6 20.5 6 23 9 21 12.5 19 16.5 12 21 12 21z"261                fill="none" stroke="#e91e63" stroke-width="2.5" />262        </svg>263      </div>264      <div class="title">Favourites</div>265      <div class="subtitle">Private · 0 places</div>266      <div class="checkbox checked">267        <svg viewBox="0 0 24 24">268          <path d="M4 12l5 5 11-11" fill="none" stroke="#FFFFFF" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"></path>269        </svg>270      </div>271      <div class="note">Add a note about this place in the Favourites list?</div>272    </div>273 274    <!-- Starred places -->275    <div class="divider"></div>276    <div class="row">277      <div class="icon">278        <!-- Star (orange) -->279        <svg viewBox="0 0 24 24">280          <path d="M12 3l3.1 6.3 6.9 1-5 4.7 1.3 6.7L12 18l-6.3 3.7 1.3-6.7-5-4.7 6.9-1z"281                fill="none" stroke="#f9ab00" stroke-width="2.5"></path>282        </svg>283      </div>284      <div class="title">Starred places</div>285      <div class="subtitle">Private · 0 places</div>286      <div class="checkbox"></div>287    </div>288 289    <div class="divider"></div>290  </div>291 292  <!-- Bottom home bar -->293  <div class="home-bar"></div>294 295</div>296</body>297</html>