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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #202124; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #60646b;25    font-size: 36px;26  }27  .status-icons {28    display: flex;29    gap: 22px;30    align-items: center;31  }32  .dot { width: 10px; height: 10px; background: #9aa0a6; border-radius: 50%; display: inline-block; }33 34  /* Top app bar */35  .app-bar {36    height: 120px;37    border-bottom: 1px solid #ECECEC;38    display: flex;39    align-items: center;40    justify-content: center;41    position: relative;42  }43  .app-title { font-size: 48px; font-weight: 500; color: #202124; }44  .action-right {45    position: absolute;46    right: 36px;47    top: 50%;48    transform: translateY(-50%);49    font-size: 42px;50    color: #1a73e8;51    font-weight: 500;52  }53 54  /* New list pill */55  .new-list-wrap {56    padding: 28px 36px 10px;57    border-bottom: 1px solid #ECECEC;58  }59  .new-list-pill {60    height: 110px;61    border: 2px solid #E0E3E7;62    border-radius: 56px;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #1a73e8;67    font-size: 44px;68    gap: 18px;69  }70  .new-list-pill svg { width: 44px; height: 44px; }71 72  /* List section */73  .list-section { }74  .row {75    padding: 32px 36px;76    display: flex;77    align-items: flex-start;78    gap: 28px;79  }80  .row + .row { border-top: 1px solid #ECECEC; }81 82  .icon-box {83    width: 72px;84    height: 72px;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .titles {90    flex: 1;91  }92  .title {93    font-size: 46px;94    line-height: 56px;95    margin-bottom: 8px;96  }97  .subtitle {98    color: #6b7280;99    font-size: 32px;100  }101  .check {102    width: 72px;103    height: 72px;104    border-radius: 12px;105    border: 6px solid #9aa0a6;106    box-sizing: border-box;107  }108  .check.checked {109    background: #1a73e8;110    border-color: #1a73e8;111    position: relative;112  }113  .check.checked:after {114    content: "";115    position: absolute;116    left: 18px;117    top: 14px;118    width: 24px;119    height: 40px;120    border: 8px solid #fff;121    border-top: 0;122    border-left: 0;123    transform: rotate(45deg);124    border-radius: 2px;125  }126 127  /* Note textarea placeholder block */128  .note {129    margin: 18px 36px 32px 136px;130    border: 2px solid #DADCE0;131    border-radius: 24px;132    padding: 26px;133    color: #6b7280;134    font-size: 36px;135    line-height: 46px;136  }137 138  /* Bottom gesture bar */139  .gesture {140    position: absolute;141    bottom: 26px;142    left: 50%;143    transform: translateX(-50%);144    width: 360px;145    height: 12px;146    background: #80868b;147    border-radius: 8px;148    opacity: 0.7;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Status bar -->156  <div class="status-bar">157    <div class="time">12:11</div>158    <div class="status-icons">159      <span class="dot"></span>160      <span class="dot"></span>161      <span class="dot"></span>162      <span class="dot"></span>163      <span class="dot" style="width:12px;height:12px;"></span>164    </div>165  </div>166 167  <!-- App bar -->168  <div class="app-bar">169    <div class="app-title">Save to list</div>170    <div class="action-right">Done</div>171  </div>172 173  <!-- New list -->174  <div class="new-list-wrap">175    <div class="new-list-pill">176      <svg viewBox="0 0 24 24" fill="none">177        <path d="M12 4v16M4 12h16" stroke="#1a73e8" stroke-width="2.5" stroke-linecap="round"/>178      </svg>179      <span>New list</span>180    </div>181  </div>182 183  <!-- Lists -->184  <div class="list-section">185 186    <!-- Escape de ville (selected) -->187    <div class="row">188      <div class="icon-box">189        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">190          <path d="M4 7h16M4 12h16M4 17h10" stroke="#1AA3A3" stroke-width="2.2" stroke-linecap="round"/>191        </svg>192      </div>193      <div class="titles">194        <div class="title">Escape de ville</div>195        <div class="subtitle">Private · 6 places</div>196      </div>197      <div class="check checked"></div>198    </div>199 200    <div class="note">Add a note about this place in the Escape de ville list?</div>201 202    <!-- Travel plans -->203    <div class="row" style="padding-top: 36px;">204      <div class="icon-box">205        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">206          <rect x="5" y="8" width="14" height="10" rx="2" stroke="#1a73e8" stroke-width="2"/>207          <rect x="9" y="6" width="6" height="2" rx="1" fill="#1a73e8"/>208          <path d="M7 18v2M17 18v2" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>209        </svg>210      </div>211      <div class="titles">212        <div class="title">Travel plans</div>213        <div class="subtitle">Private · 1 place</div>214      </div>215      <div class="check"></div>216    </div>217 218    <!-- Favorites -->219    <div class="row">220      <div class="icon-box">221        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">222          <path d="M12 20s-6.5-4.1-8.5-7.2C1.4 10 2.3 6.5 5.6 6c2.2-.3 3.6 1.3 4.4 2.5.8-1.2 2.2-2.8 4.4-2.5 3.3.5 4.2 4 2.1 6.8C18.5 15.9 12 20 12 20z"223                stroke="#EA4C89" stroke-width="2" fill="none" stroke-linejoin="round"/>224        </svg>225      </div>226      <div class="titles">227        <div class="title">Favorites</div>228        <div class="subtitle">Private · 0 places</div>229      </div>230      <div class="check"></div>231    </div>232 233    <!-- Want to go -->234    <div class="row">235      <div class="icon-box">236        <svg width="58" height="58" viewBox="0 0 24 24" fill="none">237          <path d="M6 4v12l6-4 6 4V4H6z" stroke="#188038" stroke-width="2" fill="none" />238        </svg>239      </div>240      <div class="titles">241        <div class="title">Want to go structur go</div>242        <div class="subtitle">Private · 0 places</div>243      </div>244      <div class="check"></div>245    </div>246 247    <!-- Starred places -->248    <div class="row">249      <div class="icon-box">250        <svg width="58" height="58" viewBox="0 0 24 24" fill="none">251          <path d="M12 3l2.9 6 6.1.9-4.4 4.3 1 6.1L12 18l-5.6 3.3 1-6.1-4.4-4.3 6.1-.9L12 3z"252                stroke="#FB8C00" stroke-width="2" fill="none" stroke-linejoin="round"/>253        </svg>254      </div>255      <div class="titles">256        <div class="title">Starred places</div>257        <div class="subtitle">Private · 0 places</div>258      </div>259      <div class="check"></div>260    </div>261 262  </div>263 264  <div class="gesture"></div>265</div>266</body>267</html>