GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Shopping UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Status bar */15 .status {16 height:90px;17 display:flex;18 align-items:center;19 justify-content:space-between;20 padding:0 30px;21 color:#333;22 font-size:34px;23 }24 .status .right {25 display:flex; align-items:center; gap:22px; color:#111;26 font-size:28px;27 }28 .icon-small { width:34px; height:34px; display:inline-block; }29 30 /* Search area */31 .search-area {32 padding:16px 24px 22px;33 border-bottom:1px solid #eee;34 background:#f7f7f7;35 }36 .search-row {37 display:flex; align-items:center; gap:18px;38 }39 .search-box {40 flex:1;41 height:90px;42 background:#fff;43 border:1px solid #e3e3e3;44 border-radius:45px;45 display:flex; align-items:center;46 padding:0 26px;47 box-shadow:0 2px 6px rgba(0,0,0,0.06);48 color:#777;49 font-size:34px;50 }51 .search-box .placeholder { margin-left:18px; }52 .circle-btn {53 width:88px; height:88px;54 background:#fff;55 border:1px solid #e3e3e3;56 border-radius:44px;57 display:flex; align-items:center; justify-content:center;58 }59 60 /* Upload box */61 .upload-box {62 margin:0 24px;63 background:#eef4ff;64 border:1px solid #dbe6ff;65 border-radius:22px;66 padding:22px;67 }68 .upload-title {69 font-size:36px; font-weight:700; color:#1d2c63; margin-bottom:18px;70 }71 .upload-actions { display:flex; gap:22px; }72 .pill {73 flex:1;74 display:flex; align-items:center; gap:16px;75 height:90px;76 padding:0 22px;77 border-radius:18px;78 border:1px solid #bcd3ff;79 background:#ffffff;80 color:#2876ff; font-weight:700; font-size:32px;81 }82 83 /* Section title */84 .section-title {85 padding:24px; font-size:42px; font-weight:800; color:#111;86 }87 88 /* Product grid */89 .products {90 padding:0 18px 260px; /* leave space under keyboard overlay */91 display:flex; flex-wrap:wrap; gap:22px;92 }93 .product-card {94 width:330px;95 background:#fff;96 border:1px solid #e5e5e5;97 border-radius:18px;98 box-shadow:0 2px 6px rgba(0,0,0,0.06);99 overflow:hidden;100 }101 .product-img {102 height:280px;103 background:#E0E0E0;104 border-bottom:1px solid #BDBDBD;105 display:flex; align-items:center; justify-content:center; color:#757575;106 font-size:28px; text-align:center; padding:10px;107 }108 .product-info {109 padding:16px;110 }111 .brand { font-weight:700; font-size:34px; color:#111; }112 .title { font-size:28px; color:#666; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }113 114 /* Keyboard overlay */115 .keyboard {116 position:absolute; left:0; bottom:0;117 width:100%;118 height:1040px;119 background:#121212;120 border-top:1px solid #222;121 border-top-left-radius:22px; border-top-right-radius:22px;122 color:#fff;123 padding:28px 18px 20px;124 box-sizing:border-box;125 }126 .kbd-tools {127 display:flex; justify-content:space-between; margin-bottom:12px;128 }129 .tool {130 width:120px; height:90px; border-radius:18px;131 background:#1f1f1f; border:1px solid #2b2b2b;132 display:flex; align-items:center; justify-content:center;133 color:#ddd; font-size:34px;134 }135 136 .row { display:flex; justify-content:space-between; margin:12px 6px; }137 .key {138 flex:1;139 margin:6px;140 height:112px;141 background:#212121;142 border:1px solid #2c2c2c;143 border-radius:24px;144 display:flex; align-items:center; justify-content:center;145 color:#eee; font-size:46px; font-weight:600;146 }147 .wide { flex:1.4; }148 .shift { flex:1.3; }149 .space { flex:5; }150 .back { flex:1.4; }151 .enter {152 flex:1.8;153 background:#57e3a1;154 color:#0e3c2a;155 border:1px solid #39c484;156 font-weight:800;157 }158 .sub { font-size:34px; color:#aaa; }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="status">166 <div>3:21</div>167 <div class="right">168 <!-- simple cellular icon -->169 <svg class="icon-small" viewBox="0 0 24 24">170 <rect x="1" y="14" width="4" height="8" fill="#555"/>171 <rect x="7" y="10" width="4" height="12" fill="#555"/>172 <rect x="13" y="6" width="4" height="16" fill="#555"/>173 <rect x="19" y="3" width="4" height="19" fill="#555"/>174 </svg>175 <!-- battery icon -->176 <div style="display:flex; align-items:center; gap:8px;">177 <svg class="icon-small" viewBox="0 0 28 18">178 <rect x="1" y="2" width="22" height="14" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>179 <rect x="3" y="4" width="18" height="10" fill="#4caf50"/>180 <rect x="24" y="6" width="3" height="6" fill="#333"/>181 </svg>182 <span>100%</span>183 </div>184 </div>185 </div>186 187 <!-- Search area -->188 <div class="search-area">189 <div class="search-row">190 <div class="search-box">191 <!-- search icon -->192 <svg width="36" height="36" viewBox="0 0 24 24">193 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>194 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#666" stroke-width="2"></line>195 </svg>196 <div class="placeholder">Search for Products, Brands and More</div>197 </div>198 <div class="circle-btn">199 <!-- mic icon -->200 <svg width="32" height="32" viewBox="0 0 24 24">201 <rect x="8" y="4" width="8" height="10" rx="4" fill="#444"></rect>202 <path d="M5 12c0 4 3 6 7 6s7-2 7-6" stroke="#444" stroke-width="2" fill="none"></path>203 <line x1="12" y1="18" x2="12" y2="22" stroke="#444" stroke-width="2"></line>204 <line x1="9" y1="22" x2="15" y2="22" stroke="#444" stroke-width="2"></line>205 </svg>206 </div>207 <div class="circle-btn">208 <!-- camera icon -->209 <svg width="32" height="32" viewBox="0 0 24 24">210 <rect x="3" y="6" width="18" height="13" rx="2" fill="none" stroke="#444" stroke-width="2"></rect>211 <circle cx="12" cy="12.5" r="4" fill="none" stroke="#444" stroke-width="2"></circle>212 <rect x="7" y="3" width="4" height="3" fill="#444"></rect>213 </svg>214 </div>215 </div>216 </div>217 218 <!-- Upload image box -->219 <div class="upload-box">220 <div class="upload-title">Upload an image to search for similar products</div>221 <div class="upload-actions">222 <div class="pill">223 <svg width="30" height="30" viewBox="0 0 24 24">224 <rect x="3" y="6" width="18" height="13" rx="2" fill="none" stroke="#2876ff" stroke-width="2"></rect>225 <circle cx="12" cy="12.5" r="4" fill="none" stroke="#2876ff" stroke-width="2"></circle>226 <rect x="7" y="3" width="4" height="3" fill="#2876ff"></rect>227 </svg>228 <span>Take a photo</span>229 </div>230 <div class="pill">231 <svg width="30" height="30" viewBox="0 0 24 24">232 <rect x="3" y="6" width="18" height="13" rx="2" fill="none" stroke="#2876ff" stroke-width="2"></rect>233 <path d="M5 9h14M5 13h10" stroke="#2876ff" stroke-width="2"></path>234 </svg>235 <span>Choose from gallery</span>236 </div>237 </div>238 </div>239 240 <!-- Popular products -->241 <div class="section-title">Popular Products</div>242 <div class="products">243 <!-- Row 1 -->244 <div class="product-card">245 <div class="product-img">[IMG: boAt Airdopes earbuds]</div>246 <div class="product-info">247 <div class="brand">boAt</div>248 <div class="title">boAt Airdopes True Wireless...</div>249 </div>250 </div>251 252 <div class="product-card">253 <div class="product-img">[IMG: Motorola Smartphone]</div>254 <div class="product-info">255 <div class="brand">MOTOROLA</div>256 <div class="title">MOTOROLA G3 8GB RAM 128GB...</div>257 </div>258 </div>259 260 <div class="product-card">261 <div class="product-img">[IMG: boAt Black Earbuds]</div>262 <div class="product-info">263 <div class="brand">boAt</div>264 <div class="title">boAt Airdopes Wireless...</div>265 </div>266 </div>267 268 <!-- Row 2 -->269 <div class="product-card">270 <div class="product-img">[IMG: Noise/Bullet Black Earbuds]</div>271 <div class="product-info">272 <div class="brand">Noise</div>273 <div class="title">Wireless Earbuds - Black</div>274 </div>275 </div>276 277 <div class="product-card">278 <div class="product-img">[IMG: POCO C55 Green Phone]</div>279 <div class="product-info">280 <div class="brand">POCO</div>281 <div class="title">POCO C55 (Green)</div>282 </div>283 </div>284 285 <div class="product-card">286 <div class="product-img">[IMG: POCO C55 Blue Phone]</div>287 <div class="product-info">288 <div class="brand">POCO</div>289 <div class="title">POCO C55 (Blue)</div>290 </div>291 </div>292 </div>293 294 <!-- Keyboard overlay -->295 <div class="keyboard">296 <div class="kbd-tools">297 <div class="tool">⬛</div>298 <div class="tool">😊</div>299 <div class="tool">GIF</div>300 <div class="tool">⚙️</div>301 <div class="tool">G↔</div>302 <div class="tool">🎨</div>303 <div class="tool">🎤</div>304 </div>305 306 <!-- Number row -->307 <div class="row">308 <div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key">4</div><div class="key">5</div>309 <div class="key">6</div><div class="key">7</div><div class="key">8</div><div class="key">9</div><div class="key">0</div>310 </div>311 312 <!-- QWERTY row -->313 <div class="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>315 <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>316 </div>317 318 <!-- ASDF row -->319 <div class="row">320 <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>321 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>322 <div class="key back">⌫</div>323 </div>324 325 <!-- ZXCV row -->326 <div class="row">327 <div class="key shift">⇧</div>328 <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>329 <div class="key">N</div><div class="key">M</div>330 <div class="key">,</div>331 <div class="key">⌦</div>332 </div>333 334 <!-- Bottom controls row -->335 <div class="row">336 <div class="key wide sub">?123</div>337 <div class="key wide">,</div>338 <div class="key wide">😊</div>339 <div class="key space"></div>340 <div class="key wide">.</div>341 <div class="key enter">✓</div>342 </div>343 </div>344 345</div>346</body>347</html>