GD-ML/AndroidCode
13.4k
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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Status bar */23 .status-bar {24 height: 96px;25 padding: 0 40px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #1f1f1f;30 font-size: 34px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .status-icon {38 width: 28px;39 height: 28px;40 border-radius: 50%;41 background: #7a7a7a;42 opacity: 0.8;43 }44 45 /* Header */46 .header {47 height: 160px;48 border-bottom: 1px solid #ececec;49 position: relative;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .header h1 {55 margin: 0;56 font-size: 52px;57 font-weight: 600;58 color: #2b2b2b;59 }60 .header .done {61 position: absolute;62 right: 40px;63 top: 50%;64 transform: translateY(-50%);65 color: #1a73e8;66 font-weight: 600;67 font-size: 36px;68 }69 70 /* New list pill */71 .new-list {72 margin: 28px 40px 10px 40px;73 height: 110px;74 border: 1px solid #d7d7d7;75 border-radius: 56px;76 display: flex;77 align-items: center;78 justify-content: center;79 gap: 20px;80 color: #1a73e8;81 font-size: 36px;82 font-weight: 600;83 }84 .plus {85 width: 40px;86 height: 40px;87 }88 89 /* List section */90 .list-item {91 padding: 34px 40px;92 border-top: 1px solid #eeeeee;93 }94 .row {95 display: flex;96 align-items: center;97 justify-content: space-between;98 }99 .left {100 display: flex;101 align-items: center;102 gap: 28px;103 }104 .icon {105 width: 54px;106 height: 54px;107 }108 .text-block .title {109 font-size: 40px;110 color: #2b2b2b;111 margin-bottom: 8px;112 font-weight: 600;113 }114 .text-block .subtitle {115 font-size: 28px;116 color: #6f6f6f;117 }118 119 /* Checkbox styles */120 .checkbox {121 width: 64px;122 height: 64px;123 border: 2px solid #bdbdbd;124 border-radius: 10px;125 }126 .checkbox.checked {127 background: #1a73e8;128 border-color: #1a73e8;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .checkbox svg {134 width: 40px;135 height: 40px;136 }137 138 /* Note box */139 .note-box {140 margin-left: 122px;141 margin-top: 22px;142 width: 880px;143 height: 160px;144 border: 2px solid #cfcfcf;145 border-radius: 24px;146 display: flex;147 align-items: center;148 padding: 0 28px;149 color: #6f6f6f;150 font-size: 34px;151 }152 153 /* Bottom home indicator */154 .home-indicator {155 position: absolute;156 bottom: 30px;157 left: 50%;158 transform: translateX(-50%);159 width: 240px;160 height: 14px;161 background: #bdbdbd;162 border-radius: 8px;163 opacity: 0.7;164 }165</style>166</head>167<body>168<div id="render-target">169 <!-- Status bar -->170 <div class="status-bar">171 <div>12:38</div>172 <div class="status-right">173 <div>34°</div>174 <div class="status-icon"></div>175 <div class="status-icon"></div>176 <div class="status-icon"></div>177 <div class="status-icon"></div>178 </div>179 </div>180 181 <!-- Header -->182 <div class="header">183 <h1>Save to list</h1>184 <div class="done">Done</div>185 </div>186 187 <!-- New list pill -->188 <div class="new-list">189 <svg class="plus" viewBox="0 0 24 24">190 <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#1a73e8"></path>191 </svg>192 <span>New list</span>193 </div>194 195 <!-- delight -->196 <div class="list-item">197 <div class="row">198 <div class="left">199 <svg class="icon" viewBox="0 0 48 48">200 <g fill="none" stroke="#1EAE9B" stroke-width="4" stroke-linecap="round">201 <path d="M10 14h28"></path>202 <path d="M10 24h28"></path>203 <path d="M10 34h28"></path>204 <path d="M10 14h6"></path>205 <path d="M10 24h6"></path>206 <path d="M10 34h6"></path>207 </g>208 </svg>209 <div class="text-block">210 <div class="title">delight</div>211 <div class="subtitle">Private · 1 place</div>212 </div>213 </div>214 <div class="checkbox"></div>215 </div>216 </div>217 218 <!-- Want to go -->219 <div class="list-item">220 <div class="row">221 <div class="left">222 <svg class="icon" viewBox="0 0 48 48">223 <path d="M10 40V8m8 4 20 8-20 8z" fill="#2DBE60" stroke="#2DBE60" stroke-width="4" stroke-linejoin="round"></path>224 </svg>225 <div class="text-block">226 <div class="title">Want to go</div>227 <div class="subtitle">Private · 1 place</div>228 </div>229 </div>230 <div class="checkbox checked">231 <svg viewBox="0 0 24 24">232 <path d="M6 12l4 4 8-8" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>233 </svg>234 </div>235 </div>236 <div class="note-box">Add a note about this place in the Want to go list?</div>237 </div>238 239 <!-- Favorites -->240 <div class="list-item">241 <div class="row">242 <div class="left">243 <svg class="icon" viewBox="0 0 48 48">244 <path d="M24 40s-12-7.2-16-14c-2.4-4 0-10 6-11 4-1 8 2 10 5 2-3 6-6 10-5 6 1 8.4 7 6 11-4 6.8-16 14-16 14z" fill="none" stroke="#EB4A8A" stroke-width="4" stroke-linejoin="round"></path>245 </svg>246 <div class="text-block">247 <div class="title">Favorites</div>248 <div class="subtitle">Private · 2 places</div>249 </div>250 </div>251 <div class="checkbox"></div>252 </div>253 </div>254 255 <!-- Mkt -->256 <div class="list-item">257 <div class="row">258 <div class="left">259 <svg class="icon" viewBox="0 0 48 48">260 <g fill="none" stroke="#20B2AA" stroke-width="4" stroke-linecap="round">261 <path d="M10 14h28"></path>262 <path d="M10 24h28"></path>263 <path d="M10 34h28"></path>264 <path d="M10 14h8"></path>265 <path d="M10 24h8"></path>266 <path d="M10 34h8"></path>267 </g>268 </svg>269 <div class="text-block">270 <div class="title">Mkt</div>271 <div class="subtitle">Private · 0 places</div>272 </div>273 </div>274 <div class="checkbox"></div>275 </div>276 </div>277 278 <!-- Travel plans -->279 <div class="list-item">280 <div class="row">281 <div class="left">282 <svg class="icon" viewBox="0 0 48 48">283 <path d="M16 14h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H16a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4z" fill="none" stroke="#2D7BF3" stroke-width="4"></path>284 <path d="M20 14v-4h8v4" fill="none" stroke="#2D7BF3" stroke-width="4" stroke-linecap="round"></path>285 </svg>286 <div class="text-block">287 <div class="title">Travel plans</div>288 <div class="subtitle">Private · 0 places</div>289 </div>290 </div>291 <div class="checkbox"></div>292 </div>293 </div>294 295 <!-- Starred places -->296 <div class="list-item">297 <div class="row">298 <div class="left">299 <svg class="icon" viewBox="0 0 48 48">300 <path d="M24 6l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" fill="none" stroke="#F3992E" stroke-width="4" stroke-linejoin="round"></path>301 </svg>302 <div class="text-block">303 <div class="title">Starred places</div>304 <div class="subtitle">Private · 0 places</div>305 </div>306 </div>307 <div class="checkbox"></div>308 </div>309 </div>310 311 <!-- bottom spacer -->312 <div class="home-indicator"></div>313</div>314</body>315</html>