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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #202124;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 30px;27    color: #5f6368;28  }29  .status-icons {30    display: flex;31    gap: 22px;32    align-items: center;33  }34  .dot { width: 10px; height: 10px; background: #5f6368; border-radius: 50%; display: inline-block; }35 36  /* App bar */37  .app-bar {38    height: 148px;39    border-bottom: 1px solid #eaecef;40    position: relative;41    display: flex;42    align-items: center;43    padding: 0 36px;44  }45  .app-title {46    width: 100%;47    text-align: center;48    font-size: 48px;49    font-weight: 500;50    color: #202124;51    pointer-events: none;52  }53  .action-right {54    position: absolute;55    right: 36px;56    top: 50%;57    transform: translateY(-50%);58    color: #1a73e8;59    font-size: 36px;60    font-weight: 500;61    pointer-events: auto;62  }63 64  /* New list button */65  .new-list-wrap {66    padding: 28px 36px 10px;67  }68  .new-list-btn {69    height: 112px;70    border: 1px solid #d7dbe2;71    border-radius: 56px;72    display: flex;73    align-items: center;74    justify-content: center;75    gap: 22px;76    color: #1a73e8;77    font-size: 38px;78    font-weight: 500;79  }80  .new-list-btn svg { stroke: #1a73e8; }81 82  /* List */83  .list {84    margin-top: 8px;85    border-top: 1px solid #eaecef;86  }87  .row {88    height: 176px;89    display: flex;90    align-items: center;91    padding: 0 36px;92    gap: 26px;93    border-bottom: 1px solid #eaecef;94  }95  .icon-wrap {96    width: 96px;97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .row .text {102    flex: 1;103  }104  .row .title {105    font-size: 40px;106    color: #202124;107    margin-bottom: 8px;108  }109  .row .sub {110    font-size: 28px;111    color: #5f6368;112  }113  .checkbox {114    width: 72px;115    height: 72px;116    display: flex;117    align-items: center;118    justify-content: center;119  }120  .checkbox svg rect {121    stroke: #6b6f76;122    fill: none;123    stroke-width: 6;124    rx: 10;125    ry: 10;126  }127 128  /* Bottom gesture bar */129  .gesture {130    position: absolute;131    bottom: 34px;132    left: 50%;133    transform: translateX(-50%);134    width: 360px;135    height: 12px;136    background: #70757a;137    border-radius: 10px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status bar -->145  <div class="status-bar">146    <div>12:37</div>147    <div class="status-icons">148      <span>34°</span>149      <span class="dot"></span>150      <span>34°</span>151      <span class="dot"></span>152      <span class="dot"></span>153      <span class="dot"></span>154    </div>155  </div>156 157  <!-- App bar -->158  <div class="app-bar">159    <div class="app-title">Save to list</div>160    <div class="action-right">Done</div>161  </div>162 163  <!-- New list button -->164  <div class="new-list-wrap">165    <div class="new-list-btn">166      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">167        <path d="M12 4v16M4 12h16" stroke-width="2" stroke-linecap="round"/>168      </svg>169      <span>New list</span>170    </div>171  </div>172 173  <!-- Lists -->174  <div class="list">175    <!-- delight -->176    <div class="row">177      <div class="icon-wrap">178        <!-- teal list icon -->179        <svg width="56" height="56" viewBox="0 0 24 24">180          <g stroke="#1aa6b4" stroke-width="2" fill="none" stroke-linecap="round">181            <path d="M4 6h16M4 12h16M4 18h10"/>182          </g>183        </svg>184      </div>185      <div class="text">186        <div class="title">delight</div>187        <div class="sub">Private · 1 place</div>188      </div>189      <div class="checkbox">190        <svg width="64" height="64" viewBox="0 0 24 24">191          <rect x="3" y="3" width="18" height="18" />192        </svg>193      </div>194    </div>195 196    <!-- Want to go -->197    <div class="row">198      <div class="icon-wrap">199        <!-- green flag -->200        <svg width="56" height="56" viewBox="0 0 24 24">201          <path d="M5 3v18M6 4h9l-2 4 2 4H6" stroke="#1e8e3e" stroke-width="2" fill="none" stroke-linejoin="round"/>202        </svg>203      </div>204      <div class="text">205        <div class="title">Want to go</div>206        <div class="sub">Private · 1 place</div>207      </div>208      <div class="checkbox">209        <svg width="64" height="64" viewBox="0 0 24 24">210          <rect x="3" y="3" width="18" height="18" />211        </svg>212      </div>213    </div>214 215    <!-- Favorites -->216    <div class="row">217      <div class="icon-wrap">218        <!-- pink heart -->219        <svg width="56" height="56" viewBox="0 0 24 24">220          <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0 1 9.5 6 5.2 5.2 0 0 1 12 7.3 5.2 5.2 0 0 1 14.5 6 4.5 4.5 0 0 1 19 10.5C19 15.5 12 20 12 20z" fill="none" stroke="#d81b60" stroke-width="2" stroke-linejoin="round"/>221        </svg>222      </div>223      <div class="text">224        <div class="title">Favorites</div>225        <div class="sub">Private · 2 places</div>226      </div>227      <div class="checkbox">228        <svg width="64" height="64" viewBox="0 0 24 24">229          <rect x="3" y="3" width="18" height="18" />230        </svg>231      </div>232    </div>233 234    <!-- Mkt -->235    <div class="row">236      <div class="icon-wrap">237        <!-- teal list icon -->238        <svg width="56" height="56" viewBox="0 0 24 24">239          <g stroke="#1aa6b4" stroke-width="2" fill="none" stroke-linecap="round">240            <path d="M4 6h16M4 12h16M4 18h10"/>241          </g>242        </svg>243      </div>244      <div class="text">245        <div class="title">Mkt</div>246        <div class="sub">Private · 0 places</div>247      </div>248      <div class="checkbox">249        <svg width="64" height="64" viewBox="0 0 24 24">250          <rect x="3" y="3" width="18" height="18" />251        </svg>252      </div>253    </div>254 255    <!-- Travel plans -->256    <div class="row">257      <div class="icon-wrap">258        <!-- blue suitcase -->259        <svg width="56" height="56" viewBox="0 0 24 24">260          <g stroke="#1a73e8" stroke-width="2" fill="none" stroke-linejoin="round">261            <rect x="5" y="7" width="14" height="12" rx="2" ry="2"/>262            <path d="M9 7V5h6v2"/>263          </g>264        </svg>265      </div>266      <div class="text">267        <div class="title">Travel plans</div>268        <div class="sub">Private · 0 places</div>269      </div>270      <div class="checkbox">271        <svg width="64" height="64" viewBox="0 0 24 24">272          <rect x="3" y="3" width="18" height="18" />273        </svg>274      </div>275    </div>276 277    <!-- Starred places -->278    <div class="row">279      <div class="icon-wrap">280        <!-- orange star -->281        <svg width="56" height="56" viewBox="0 0 24 24">282          <path d="M12 3l3 6 6 .9-4.4 4.3 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="none" stroke="#f29900" stroke-width="2" stroke-linejoin="round"/>283        </svg>284      </div>285      <div class="text">286        <div class="title">Starred places</div>287        <div class="sub">Private · 0 places</div>288      </div>289      <div class="checkbox">290        <svg width="64" height="64" viewBox="0 0 24 24">291          <rect x="3" y="3" width="18" height="18" />292        </svg>293      </div>294    </div>295  </div>296 297  <div class="gesture"></div>298</div>299</body>300</html>