GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Save to list UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: "Segoe UI", Arial, Helvetica, sans-serif;14 color: #1f1f1f;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 34px;21 display: flex;22 align-items: center;23 color: #444;24 font-size: 32px;25 }26 .status-icons {27 margin-left: auto;28 display: flex;29 gap: 18px;30 align-items: center;31 }32 .dot {33 width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%;34 }35 .small-ico {36 width: 26px; height: 26px; border: 2px solid #777; border-radius: 4px;37 }38 39 /* App bar */40 .app-bar {41 height: 130px;42 border-bottom: 1px solid #e6e6e6;43 display: flex;44 align-items: center;45 justify-content: center;46 position: relative;47 }48 .app-title {49 font-size: 54px;50 font-weight: 600;51 }52 .done-btn {53 position: absolute;54 right: 34px;55 top: 50%;56 transform: translateY(-50%);57 color: #1a73e8;58 font-size: 44px;59 font-weight: 600;60 }61 62 /* New list pill */63 .content {64 padding: 26px 34px 0 34px;65 }66 .new-list {67 margin: 14px 6px 22px 6px;68 height: 120px;69 border: 2px solid #d9d9d9;70 border-radius: 60px;71 display: flex;72 align-items: center;73 padding: 0 34px;74 gap: 26px;75 color: #1967d2;76 font-size: 46px;77 font-weight: 600;78 }79 .new-list .plus {80 width: 62px; height: 62px; border-radius: 50%;81 border: 2px solid #cfd8dc;82 display: flex; align-items: center; justify-content: center;83 color: #1967d2;84 font-size: 56px; line-height: 56px;85 }86 87 /* List items */88 .section {89 border-top: 10px solid transparent; /* spacing block */90 }91 .item {92 position: relative;93 padding: 36px 140px 36px 34px;94 border-bottom: 2px solid #eeeeee;95 }96 .row {97 display: flex; align-items: center;98 gap: 28px;99 }100 .title {101 font-size: 48px;102 font-weight: 700;103 }104 .sub {105 margin-left: 96px;106 color: #6a6a6a;107 font-size: 34px;108 margin-top: 8px;109 }110 .checkbox {111 position: absolute;112 right: 34px; top: 48px;113 width: 64px; height: 64px;114 border-radius: 12px;115 border: 4px solid #bdbdbd;116 }117 .checkbox.checked {118 background: #1a73e8;119 border-color: #1a73e8;120 position: absolute;121 }122 .checkbox.checked::after {123 content: "";124 position: absolute;125 left: 16px; top: 12px;126 width: 28px; height: 16px;127 border: 6px solid #fff;128 border-top: none; border-right: none;129 transform: rotate(-45deg);130 }131 132 /* Note box */133 .note {134 margin: 26px 6px 8px 96px;135 height: 220px;136 border: 2px solid #cfcfcf;137 border-radius: 24px;138 color: #6a6a6a;139 font-size: 40px;140 padding: 28px;141 line-height: 1.3;142 display: flex; align-items: flex-start;143 }144 145 /* Icon styles */146 .icon {147 width: 70px; height: 70px; display: inline-block;148 }149 /* Simple SVGs */150 .icon svg { width: 100%; height: 100%; }151 152 .heart { stroke: #ff4d8a; fill: none; stroke-width: 10; }153 .suitcase { stroke: #4e8ef7; fill: none; stroke-width: 10; }154 .star { stroke: #f6a21a; fill: none; stroke-width: 10; }155 .flag-green { fill: #34a853; }156 157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>7:16</div>165 <div class="status-icons">166 <div class="dot"></div>167 <div class="dot"></div>168 <div class="dot"></div>169 <div class="dot"></div>170 <div class="small-ico"></div>171 <div class="small-ico"></div>172 </div>173 </div>174 175 <!-- App bar -->176 <div class="app-bar">177 <div class="app-title">Save to list</div>178 <div class="done-btn">Done</div>179 </div>180 181 <div class="content">182 <!-- New list pill -->183 <div class="new-list">184 <div class="plus">+</div>185 <div>New list</div>186 </div>187 188 <!-- Want to go -->189 <div class="item">190 <div class="row">191 <div class="icon">192 <!-- Green flag -->193 <svg viewBox="0 0 64 64">194 <rect x="6" y="6" width="6" height="52" fill="#34a853"></rect>195 <path class="flag-green" d="M12 10 L54 10 L44 24 L54 38 L12 38 Z"></path>196 </svg>197 </div>198 <div class="title">Want to go</div>199 </div>200 <div class="sub">Private · 1 place</div>201 <div class="checkbox checked"></div>202 203 <div class="note">Add a note about this place in the Want to go list?</div>204 </div>205 206 <!-- Favourites -->207 <div class="item">208 <div class="row">209 <div class="icon">210 <!-- Heart -->211 <svg viewBox="0 0 64 64">212 <path class="heart" d="M32 54 C30 52 14 40 10 30 C5 20 12 12 20 12 C25 12 29 15 32 19 C35 15 39 12 44 12 C52 12 59 20 54 30 C50 40 34 52 32 54 Z"/>213 </svg>214 </div>215 <div class="title">Favourites</div>216 </div>217 <div class="sub">Private · 4 places</div>218 <div class="checkbox"></div>219 </div>220 221 <!-- Travel plans -->222 <div class="item">223 <div class="row">224 <div class="icon">225 <!-- Suitcase -->226 <svg viewBox="0 0 64 64">227 <rect x="14" y="22" width="36" height="28" class="suitcase"></rect>228 <path class="suitcase" d="M26 22 V16 H38 V22"></path>229 </svg>230 </div>231 <div class="title">Travel plans</div>232 </div>233 <div class="sub">Private · 0 places</div>234 <div class="checkbox"></div>235 </div>236 237 <!-- Starred places -->238 <div class="item" style="border-bottom: none;">239 <div class="row">240 <div class="icon">241 <!-- Star -->242 <svg viewBox="0 0 64 64">243 <path class="star" d="M32 8 L38 24 L56 24 L42 34 L48 50 L32 40 L16 50 L22 34 L8 24 L26 24 Z"></path>244 </svg>245 </div>246 <div class="title">Starred places</div>247 </div>248 <div class="sub">Private · 0 places</div>249 <div class="checkbox"></div>250 </div>251 252 </div>253 254</div>255</body>256</html>