GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FAFAFA;13 border-radius: 32px;14 box-shadow: 0 6px 18px rgba(0,0,0,0.12);15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 24px 30px 0 30px;21 color: #333;22 font-size: 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 }27 .status-right {28 display: flex;29 gap: 24px;30 align-items: center;31 color: #555;32 font-size: 28px;33 }34 .dot {35 width: 14px; height: 14px; background:#777; border-radius:50%;36 display:inline-block;37 }38 39 /* Header search area */40 .search-header {41 background: #FFFFFF;42 padding: 20px 24px 16px 24px;43 border-bottom: 1px solid #ECECEC;44 }45 .search-row {46 display: flex;47 align-items: center;48 gap: 20px;49 }50 .circle-btn {51 width: 72px; height: 72px; border-radius: 36px;52 border: 1px solid #E0E0E0;53 display: flex; align-items: center; justify-content: center;54 background: #fff;55 }56 .search-pill {57 flex: 1;58 height: 90px;59 background: #F5F5F5;60 border-radius: 45px;61 display: flex;62 align-items: center;63 padding: 0 28px;64 border: 1px solid #E3E3E3;65 }66 .search-pill .placeholder {67 color: #6F6F6F;68 font-size: 40px;69 flex: 1;70 }71 .icon {72 width: 44px; height: 44px;73 }74 75 /* Chips row */76 .chips {77 margin-top: 22px;78 display: grid;79 grid-template-columns: 1fr 1fr 1fr;80 column-gap: 18px;81 }82 .chip {83 background: #FFFFFF;84 border: 1px solid #EAEAEA;85 border-radius: 18px;86 padding: 22px;87 display: flex;88 align-items: center;89 gap: 18px;90 min-height: 140px;91 }92 .chip .label {93 font-size: 40px; color: #222; font-weight: 600;94 }95 .chip .sublabel {96 font-size: 34px; color: #777; margin-top: 6px;97 }98 .divider {99 width: 1px; background: #EAEAEA; height: 110px;100 margin: 0 0 0 22px;101 }102 103 /* Recent section */104 .content {105 padding: 24px 30px;106 }107 .section-title {108 color: #222; font-size: 42px; font-weight: 700;109 display: flex; align-items: center; justify-content: space-between;110 margin-top: 22px;111 }112 .list {113 margin-top: 24px;114 background: transparent;115 }116 .item {117 display: flex; align-items: flex-start; gap: 26px;118 padding: 26px 0;119 border-bottom: 1px solid #EEEEEE;120 }121 .item .title {122 font-size: 44px; color: #1F1F1F; font-weight: 700;123 line-height: 1.2;124 }125 .item .subtitle {126 font-size: 36px; color: #6A6A6A; margin-top: 10px;127 }128 .meta {129 font-size: 34px; margin-top: 12px;130 }131 .red { color: #D80000; font-weight: 700; }132 .grey { color: #6A6A6A; }133 .link {134 font-size: 38px; color: #1A73E8; font-weight: 700; margin-top: 26px;135 }136 137 /* Keyboard mock */138 .keyboard {139 position: absolute;140 left: 0; right: 0; bottom: 0;141 height: 900px;142 background: #1B1A1D;143 border-top-left-radius: 28px;144 border-top-right-radius: 28px;145 box-shadow: 0 -12px 24px rgba(0,0,0,0.25);146 padding: 40px 36px;147 }148 .kbd-top {149 display: flex; align-items: center; gap: 28px; margin-bottom: 26px;150 }151 .kbd-button {152 width: 88px; height: 88px; border-radius: 22px;153 border: 1px solid #3A3A3A; color: #EDEDED;154 display: flex; align-items: center; justify-content: center;155 background: #242227; font-size: 34px;156 }157 .key-row {158 display: grid;159 grid-template-columns: repeat(10, 1fr);160 gap: 22px;161 margin-top: 22px;162 }163 .key {164 height: 120px; border-radius: 24px;165 background: #2A282E; color: #EFEFEF; font-size: 46px; 166 display: flex; align-items: center; justify-content: center;167 border: 1px solid #3A3840;168 }169 .space-row {170 display: grid;171 grid-template-columns: 160px 1fr 160px;172 gap: 22px;173 margin-top: 26px;174 }175 .space {176 height: 120px; border-radius: 24px; background: #2A282E; border: 1px solid #3A3840;177 }178 179 /* gesture bar */180 .gesture {181 position: absolute; left: 50%; transform: translateX(-50%);182 bottom: 24px; width: 360px; height: 12px; border-radius: 8px; background: #E0E0E0;183 opacity: 0.85;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status Bar -->191 <div class="status-bar">192 <div>10:54</div>193 <div class="status-right">194 <span class="kbd-button" style="width:52px;height:52px;border-radius:12px; font-size:28px; background:#EFEFF3; color:#333; border-color:#D9D9DF;">B</span>195 <span class="kbd-button" style="width:52px;height:52px;border-radius:12px; font-size:28px; background:#EFEFF3; color:#333; border-color:#D9D9DF;">↗</span>196 <span class="dot"></span>197 <span class="dot"></span>198 <span class="dot"></span>199 </div>200 </div>201 202 <!-- Search Header -->203 <div class="search-header">204 <div class="search-row">205 <div class="circle-btn">206 <svg class="icon" viewBox="0 0 24 24">207 <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>208 </svg>209 </div>210 <div class="search-pill">211 <div class="placeholder">Search here</div>212 <svg class="icon" viewBox="0 0 24 24">213 <path d="M12 3c2.5 0 4 2 4 4v4c0 2-1.5 4-4 4s-4-2-4-4V7c0-2 1.5-4 4-4z" fill="#333"></path>214 <rect x="10.5" y="17" width="3" height="4" rx="1.5" fill="#333"></rect>215 </svg>216 </div>217 </div>218 219 <div class="chips">220 <div class="chip">221 <svg class="icon" viewBox="0 0 24 24">222 <path d="M12 3l9 8v10H3V11l9-8z" fill="#555"></path>223 </svg>224 <div>225 <div class="label">Home</div>226 <div class="sublabel">Set location</div>227 </div>228 </div>229 230 <div class="chip">231 <svg class="icon" viewBox="0 0 24 24">232 <path d="M4 7h16v5H4V7zm3 10h10v-3H7v3z" fill="#555"></path>233 </svg>234 <div>235 <div class="label">Work</div>236 <div class="sublabel">Set location</div>237 </div>238 </div>239 240 <div class="chip" style="justify-content: space-between;">241 <div style="display:flex; align-items:center; gap:18px;">242 <div class="circle-btn" style="width:64px;height:64px;">243 <svg class="icon" viewBox="0 0 24 24">244 <circle cx="5" cy="12" r="2" fill="#555"></circle>245 <circle cx="12" cy="12" r="2" fill="#555"></circle>246 <circle cx="19" cy="12" r="2" fill="#555"></circle>247 </svg>248 </div>249 <div>250 <div class="label">More</div>251 </div>252 </div>253 </div>254 </div>255 </div>256 257 <!-- Content -->258 <div class="content">259 <div class="section-title">260 <span>Recent</span>261 <div class="circle-btn" style="width:56px;height:56px;">262 <svg viewBox="0 0 24 24" class="icon">263 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>264 <path d="M12 7v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>265 </svg>266 </div>267 </div>268 269 <div class="list">270 <div class="item">271 <div class="circle-btn" style="width:72px;height:72px; background:#F6F6F6;">272 <svg class="icon" viewBox="0 0 24 24">273 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>274 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>275 </svg>276 </div>277 <div>278 <div class="title">80203</div>279 <div class="subtitle">Denver, CO, USA</div>280 </div>281 </div>282 283 <div class="item">284 <div class="circle-btn" style="width:72px;height:72px; background:#F6F6F6;">285 <svg class="icon" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>287 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>288 </svg>289 </div>290 <div>291 <div class="title">El Five</div>292 <div class="subtitle">Umatilla Street Unit #500, Denver, CO, USA</div>293 <div class="meta"><span class="red">Closed</span> <span class="grey">· Opens 5:00 PM</span></div>294 </div>295 </div>296 </div>297 298 <div class="link">More from recent history</div>299 </div>300 301 <!-- Keyboard mock -->302 <div class="keyboard">303 <div class="kbd-top">304 <div class="kbd-button">◧</div>305 <div class="kbd-button">☺</div>306 <div class="kbd-button">GIF</div>307 <div class="kbd-button">⚙</div>308 <div class="kbd-button">G</div>309 <div class="kbd-button">🎨</div>310 <div class="kbd-button">🎤</div>311 </div>312 313 <div class="key-row">314 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>315 </div>316 <div class="key-row">317 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>318 </div>319 <div class="key-row">320 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">⟵</div><div class="key">.</div><div class="key">🔍</div>321 </div>322 <div class="space-row">323 <div class="space" style="display:flex; align-items:center; justify-content:center; color:#EEE; font-size:40px;">?123</div>324 <div class="space" style="display:flex; align-items:center; justify-content:center; color:#EEE; font-size:40px;">space</div>325 <div class="space" style="display:flex; align-items:center; justify-content:center; color:#EEE; font-size:40px;">⏎</div>326 </div>327 </div>328 329 <div class="gesture"></div>330</div>331</body>332</html>