GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Door lock - Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EEEEEE;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 }17 18 /* Status bar */19 .statusbar {20 height: 88px;21 display: flex;22 align-items: center;23 padding: 0 28px;24 color: #EDEDED;25 font-size: 34px;26 letter-spacing: 0.2px;27 }28 .statusbar .left,29 .statusbar .right {30 display: flex;31 align-items: center;32 }33 .statusbar .left { gap: 22px; }34 .statusbar .right {35 margin-left: auto;36 gap: 22px;37 }38 .status-icon {39 width: 36px;40 height: 36px;41 border-radius: 18px;42 border: 1px solid #2A2A2A;43 display: inline-flex;44 align-items: center;45 justify-content: center;46 font-size: 20px;47 color: #BDBDBD;48 }49 .status-dot {50 width: 8px; height: 8px; border-radius: 50%; background: #BDBDBD;51 }52 53 /* Top app bar */54 .topbar {55 height: 120px;56 display: flex;57 align-items: center;58 padding: 0 28px;59 border-bottom: 1px solid #1F1F1F;60 }61 .topbar .title {62 font-size: 48px;63 font-weight: 600;64 margin-left: 18px;65 }66 .topbar .spacer { flex: 1; }67 .icon-btn {68 width: 72px; height: 72px;69 border-radius: 36px;70 display: inline-flex; align-items: center; justify-content: center;71 }72 .icon-btn svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 2.5; }73 74 /* Chips */75 .chip-row {76 display: flex;77 gap: 20px;78 padding: 20px 24px 12px 24px;79 overflow: hidden;80 }81 .chip {82 display: inline-flex;83 align-items: center;84 gap: 14px;85 padding: 18px 26px;86 border-radius: 30px;87 border: 1px solid #4A4A4A;88 background: #1E1E1E;89 color: #EDEDED;90 font-size: 30px;91 white-space: nowrap;92 }93 .chip svg { width: 28px; height: 28px; stroke: #EDEDED; stroke-width: 2.2; fill: none; }94 .chip .caret {95 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;96 border-top: 12px solid #CFCFCF; margin-left: 6px;97 }98 99 .count-line {100 text-align: center;101 color: #CFCFCF;102 font-size: 28px;103 padding: 6px 24px 16px 24px;104 }105 .count-line .info {106 display: inline-flex; align-items: center; justify-content: center;107 width: 34px; height: 34px; border-radius: 17px; border: 1px solid #4A4A4A; color: #BDBDBD; font-size: 22px;108 margin-left: 10px;109 }110 111 /* Grid */112 .grid {113 display: grid;114 grid-template-columns: 1fr 1fr;115 gap: 20px;116 padding: 0 24px;117 }118 .card {119 background: #171717;120 border-radius: 10px;121 overflow: hidden;122 }123 .card .img {124 position: relative;125 height: 340px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 display: flex; align-items: center; justify-content: center;129 color: #757575; font-size: 28px;130 }131 .favorite-badge {132 position: absolute; top: 14px; right: 14px;133 width: 56px; height: 56px; border-radius: 28px; background: #FFFFFF;134 display: flex; align-items: center; justify-content: center;135 box-shadow: 0 2px 8px rgba(0,0,0,0.5);136 }137 .favorite-badge svg { width: 28px; height: 28px; stroke: #111; stroke-width: 2.5; fill: none; }138 139 .img .dots {140 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);141 display: flex; gap: 6px;142 }143 .img .dot { width: 10px; height: 10px; border-radius: 50%; background: #EDEDED; opacity: 0.7; }144 .img .dot.dim { opacity: 0.35; }145 146 .card .body {147 padding: 16px 16px 20px 16px;148 }149 .title {150 font-size: 30px; line-height: 1.2; color: #EEEEEE; margin-bottom: 10px;151 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;152 }153 .rating {154 font-size: 26px; color: #EDEDED; margin-bottom: 10px;155 }156 .rating .stars { color: #FFFFFF; letter-spacing: 1px; margin: 0 6px; }157 .pill {158 display: inline-block;159 background: #476454;160 color: #D9F2E0;161 border-radius: 22px;162 padding: 10px 16px;163 font-size: 26px;164 margin: 8px 0 6px 0;165 }166 .price { font-size: 32px; font-weight: 600; margin-top: 4px; }167 .sub { font-size: 24px; color: #BDBDBD; margin-top: 4px; }168 169 /* Bottom nav */170 .bottom-nav {171 position: absolute;172 bottom: 40px;173 left: 0; right: 0;174 height: 160px;175 background: #111111;176 border-top: 1px solid #1F1F1F;177 display: flex; align-items: center; justify-content: space-around;178 padding: 8px 0;179 }180 .nav-item {181 display: flex; flex-direction: column; align-items: center; gap: 10px;182 color: #EDEDED; font-size: 26px;183 }184 .nav-item svg { width: 42px; height: 42px; stroke: #EDEDED; stroke-width: 2.5; fill: none; }185 .gesture-bar {186 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);187 width: 300px; height: 10px; background: #FFFFFF; border-radius: 6px; opacity: 0.9;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status bar -->195 <div class="statusbar">196 <div class="left">197 <div>11:13</div>198 <div class="status-icon">i</div>199 <div class="status-icon">LR</div>200 <svg width="30" height="30" viewBox="0 0 24 24" style="stroke:#BDBDBD; fill:none;">201 <circle cx="11" cy="11" r="7" stroke-width="2"></circle>202 <line x1="20" y1="20" x2="16" y2="16" stroke-width="2"></line>203 </svg>204 <div class="status-dot"></div>205 </div>206 <div class="right">207 <svg width="32" height="32" viewBox="0 0 24 24" style="stroke:#BDBDBD; fill:none;">208 <path d="M3 18c4-5 8-5 12 0" stroke-width="2"></path>209 <path d="M6 15c3-3 6-3 9 0" stroke-width="2"></path>210 <path d="M9 12c2-1 4-1 6 0" stroke-width="2"></path>211 </svg>212 <svg width="32" height="32" viewBox="0 0 24 24" style="stroke:#BDBDBD; fill:none;">213 <rect x="2" y="7" width="18" height="10" rx="3" stroke-width="2"></rect>214 <rect x="20" y="10" width="2" height="4" fill="#BDBDBD" stroke="none"></rect>215 </svg>216 </div>217 </div>218 219 <!-- Top app bar -->220 <div class="topbar">221 <div class="icon-btn">222 <svg viewBox="0 0 48 48">223 <path d="M30 12 L18 24 L30 36" stroke-linecap="round" stroke-linejoin="round"></path>224 </svg>225 </div>226 <div class="title">Door lock</div>227 <div class="spacer"></div>228 <div class="icon-btn">229 <svg viewBox="0 0 48 48">230 <path d="M24 32c6-4 8-7 8-11a8 8 0 0 0-16 0c0 4 2 7 8 11z"></path>231 <path d="M24 32c-6-4-8-7-8-11a8 8 0 0 1 16 0c0 4-2 7-8 11z" fill="none"></path>232 </svg>233 </div>234 </div>235 236 <!-- Filter chips -->237 <div class="chip-row">238 <div class="chip">239 <svg viewBox="0 0 24 24">240 <path d="M3 6h18M6 12h12M9 18h6" stroke-linecap="round"></path>241 </svg>242 <span>Filter</span>243 </div>244 <div class="chip">245 <span>Price</span>246 <div class="caret"></div>247 </div>248 <div class="chip">249 <span>Ships from</span>250 <div class="caret"></div>251 </div>252 <div class="chip">253 <span>Free shipping</span>254 </div>255 </div>256 257 <div class="count-line">258 13,232 items with Ads259 <span class="info">?</span>260 </div>261 262 <!-- Product grid -->263 <div class="grid">264 265 <!-- Card 1 -->266 <div class="card">267 <div class="img">268 [IMG: Four round bathroom thumb turn locks on white surface]269 <div class="favorite-badge">270 <svg viewBox="0 0 24 24">271 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>272 </svg>273 </div>274 <div class="dots">275 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>276 </div>277 </div>278 <div class="body">279 <div class="title">Solid Brass Bathroom Thumb Turn Lock</div>280 <div class="rating">281 4.9 <span class="stars">★★★★★</span> (4,630)282 </div>283 <div class="pill">Free shipping</div>284 <div class="price">$39.42</div>285 <div class="sub">Ad by Etsy seller</div>286 </div>287 </div>288 289 <!-- Card 2 -->290 <div class="card">291 <div class="img">292 [IMG: Bathroom indicator bolt latch set on wooden table]293 <div class="favorite-badge">294 <svg viewBox="0 0 24 24">295 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>296 </svg>297 </div>298 <div class="dots">299 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>300 </div>301 </div>302 <div class="body">303 <div class="title">Bathroom Indicator Bolt Latch</div>304 <div class="rating">305 4.8 <span class="stars">★★★★★</span> (1,541)306 </div>307 <div class="price">$19.64</div>308 <div class="sub">Ad by Etsy seller</div>309 </div>310 </div>311 312 <!-- Card 3 -->313 <div class="card">314 <div class="img">315 [IMG: Portable door lock device on door with handle]316 <div class="favorite-badge">317 <svg viewBox="0 0 24 24">318 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>319 </svg>320 </div>321 <div class="dots">322 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>323 </div>324 </div>325 <div class="body">326 <div class="title">Portable Door Lock Home Security</div>327 <div class="rating">328 4.8 <span class="stars">★★★★★</span> (295)329 </div>330 <div class="price">$3.99</div>331 </div>332 </div>333 334 <!-- Card 4 -->335 <div class="card">336 <div class="img">337 [IMG: Safety lock portable set with red and black units]338 <div class="favorite-badge">339 <svg viewBox="0 0 24 24">340 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>341 </svg>342 </div>343 <div class="dots">344 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>345 </div>346 </div>347 <div class="body">348 <div class="title">Safety Lock | Portable | Hotel Door</div>349 <div class="rating">350 4.5 <span class="stars">★★★★☆</span> (2)351 </div>352 <div class="price">$10.00</div>353 </div>354 </div>355 356 <!-- Card 5 -->357 <div class="card">358 <div class="img">359 [IMG: Vintage ornate lockset with keys and brass knobs]360 <div class="favorite-badge">361 <svg viewBox="0 0 24 24">362 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>363 </svg>364 </div>365 <div class="dots">366 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>367 </div>368 </div>369 <div class="body">370 <div class="title">Decorative Antique Door Lock Set</div>371 <div class="rating">372 4.7 <span class="stars">★★★★★</span>373 </div>374 <div class="price">$45.00</div>375 </div>376 </div>377 378 <!-- Card 6 -->379 <div class="card">380 <div class="img">381 [IMG: Lock handle with white block; text overlay “No Adhesives No Disassembly”]382 <div class="favorite-badge">383 <svg viewBox="0 0 24 24">384 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>385 </svg>386 </div>387 <div class="dots">388 <div class="dot"></div><div class="dot dim"></div><div class="dot dim"></div>389 </div>390 </div>391 <div class="body">392 <div class="title">Custom Shapes & Sizes Door Handle Stop</div>393 <div class="rating">394 4.6 <span class="stars">★★★★★</span>395 </div>396 <div class="price">$20.00</div>397 </div>398 </div>399 400 </div>401 402 <!-- Bottom navigation -->403 <div class="bottom-nav">404 <div class="nav-item">405 <svg viewBox="0 0 24 24">406 <path d="M3 11 L12 4 L21 11" stroke-linecap="round" stroke-linejoin="round"></path>407 <rect x="6" y="11" width="12" height="9" rx="2"></rect>408 </svg>409 <div>Home</div>410 </div>411 <div class="nav-item">412 <svg viewBox="0 0 24 24">413 <path d="M12 20s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" stroke-linejoin="round"></path>414 </svg>415 <div>Favorites</div>416 </div>417 <div class="nav-item">418 <svg viewBox="0 0 24 24">419 <rect x="3" y="6" width="18" height="12" rx="2"></rect>420 <path d="M7 10h10 M7 14h7" stroke-linecap="round"></path>421 </svg>422 <div>Deals</div>423 </div>424 <div class="nav-item">425 <svg viewBox="0 0 24 24">426 <circle cx="12" cy="8" r="4"></circle>427 <path d="M4 20c2-4 14-4 16 0" stroke-linecap="round"></path>428 </svg>429 <div>You</div>430 </div>431 <div class="nav-item">432 <svg viewBox="0 0 24 24">433 <path d="M6 6h12l-2 12H8L6 6z" stroke-linecap="round" stroke-linejoin="round"></path>434 <circle cx="9" cy="20" r="1.8"></circle>435 <circle cx="15" cy="20" r="1.8"></circle>436 </svg>437 <div>Cart</div>438 </div>439 </div>440 441 <div class="gesture-bar"></div>442 443</div>444</body>445</html>